add themes to the docs

docs/assets/js/controllers/ray_controller.js

@@ -1,9 +0,0 @@
-import { Controller } from '@hotwired/stimulus'
-
-import { ray } from 'node-ray/web'
-
-export default class extends Controller {
-    initialize() {
-        window.ray = ray
-    }
-}

docs/assets/js/controllers/theme_amazon_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/amazon/amazon.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.amazon')
+    }
+}

docs/assets/js/controllers/theme_amber_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/amber/amber.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.amber')
+    }
+}

docs/assets/js/controllers/theme_aurora_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/aurora/aurora.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.aurora')
+    }
+}

docs/assets/js/controllers/theme_crystal_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/crystal/crystal.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.crystal')
+    }
+}

docs/assets/js/controllers/theme_emerald_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/emerald/emerald.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.emerald')
+    }
+}

docs/assets/js/controllers/theme_facebook_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/facebook/facebook.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.facebook')
+    }
+}

docs/assets/js/controllers/theme_flasher_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/flasher/flasher.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.flasher')
+    }
+}

docs/assets/js/controllers/theme_google_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/google/google.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.google')
+    }
+}

docs/assets/js/controllers/theme_ios_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/ios/ios.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.ios')
+    }
+}

docs/assets/js/controllers/theme_jade_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/jade/jade.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.jade')
+    }
+}

docs/assets/js/controllers/theme_material_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/material/material.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.material')
+    }
+}

docs/assets/js/controllers/theme_minimal_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/minimal/minimal.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.minimal')
+    }
+}

docs/assets/js/controllers/theme_neon_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/neon/neon.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.neon')
+    }
+}

docs/assets/js/controllers/theme_onyx_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/onyx/onyx.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.onyx')
+    }
+}

docs/assets/js/controllers/theme_ruby_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/ruby/ruby.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.ruby')
+    }
+}

docs/assets/js/controllers/theme_sapphire_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/sapphire/sapphire.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.sapphire')
+    }
+}

docs/assets/js/controllers/theme_slack_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus'
+import { showNotificationsForHandler } from '../show_notifications'
+
+import '@flasher/flasher/dist/themes/slack/slack.min.css'
+
+export default class extends Controller {
+    connect() {
+        showNotificationsForHandler('theme.slack')
+    }
+}

docs/assets/js/controllers/tryit_controller.js

@@ -8,6 +8,23 @@ import '@flasher/flasher-noty'
 import '@flasher/flasher-notyf'
 import '@flasher/flasher-sweetalert'
 
+import '@flasher/flasher/dist/themes/amazon/amazon'
+import '@flasher/flasher/dist/themes/amber/amber'
+import '@flasher/flasher/dist/themes/aurora/aurora'
+import '@flasher/flasher/dist/themes/crystal/crystal'
+import '@flasher/flasher/dist/themes/emerald/emerald'
+import '@flasher/flasher/dist/themes/facebook/facebook'
+import '@flasher/flasher/dist/themes/google/google'
+import '@flasher/flasher/dist/themes/ios/ios'
+import '@flasher/flasher/dist/themes/jade/jade'
+import '@flasher/flasher/dist/themes/material/material'
+import '@flasher/flasher/dist/themes/minimal/minimal'
+import '@flasher/flasher/dist/themes/neon/neon'
+import '@flasher/flasher/dist/themes/onyx/onyx'
+import '@flasher/flasher/dist/themes/ruby/ruby'
+import '@flasher/flasher/dist/themes/sapphire/sapphire'
+import '@flasher/flasher/dist/themes/slack/slack'
+
 window.flasher = flasher
 
 export default class extends Controller {

docs/assets/js/show_notifications.js

@@ -14,15 +14,31 @@ function showNotifications(notifications) {
 export function showNotificationsForHandler(handler, options = {}) {
     const factory = flasher.use(handler)
 
-    factory.info('Welcome back', 'Info', options)
+    // Handle theme-based handlers with different positions
+    const isThemeHandler = handler.startsWith('theme.')
+
+    // Define position-specific options for theme handlers
+    let infoOptions = { ...options }
+    let errorOptions = { ...options }
+    let warningOptions = { ...options }
+    let successOptions = { ...options }
+
+    if (isThemeHandler) {
+        infoOptions = { ...options, position: 'bottom-right' }
+        errorOptions = { ...options, position: 'bottom-right' }
+        warningOptions = { ...options, position: 'bottom-right' }
+        successOptions = { ...options, position: 'bottom-right' }
+    }
+
+    factory.info('Welcome back', 'Info', infoOptions)
 
     if (['sweetalert'].includes(handler)) {
         return
     }
 
     showNotifications([
-        () => factory.error('Oops! Something went wrong!', 'Error', options),
-        () => factory.warning('Are you sure you want to proceed ?', 'Warning', options),
-        () => factory.success('Data has been saved successfully!', 'Success', options),
+        () => factory.error('Oops! Something went wrong!', 'Error', errorOptions),
+        () => factory.warning('Are you sure you want to proceed?', 'Warning', warningOptions),
+        () => factory.success('Data has been saved successfully!', 'Success', successOptions),
     ])
 }