wip

package.json

@@ -1,11 +1,11 @@
 {
     "name": "filament",
     "scripts": {
-        "dev:components": "node bin/build --watch",
-        "dev:admin": "mix watch",
+        "dev:js": "node bin/build --watch",
+        "dev:css": "npx tailwindcss -c ./packages/admin/tailwind.config.js -i ./packages/admin/resources/css/index.css -o ./packages/admin/dist/index.css --minify --watch",
         "dev": "npm-run-all --parallel dev:*",
-        "build:components": "node bin/build",
-        "build:admin": "mix --production",
+        "build:js": "node bin/build",
+        "build:css": "npx tailwindcss -c ./packages/admin/tailwind.config.js -i ./packages/admin/resources/css/index.css -o ./packages/admin/dist/index.css --minify",
         "build": "npm-run-all build:*",
         "prettier": "npx prettier --write '**/*.{css,js,yml}' '!**/dist' '!**/vendor'"
     },

packages/admin/resources/js/index.js

@@ -0,0 +1,70 @@
+import Chart from 'chart.js/auto'
+import Collapse from '@alpinejs/collapse'
+import Focus from '@alpinejs/focus'
+import Mousetrap from '@danharrin/alpine-mousetrap'
+import Persist from '@alpinejs/persist'
+import Tooltip from '@ryangjchandler/alpine-tooltip'
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.plugin(Collapse)
+    window.Alpine.plugin(Focus)
+    window.Alpine.plugin(Mousetrap)
+    window.Alpine.plugin(Persist)
+    window.Alpine.plugin(Tooltip)
+
+    window.Alpine.store('sidebar', {
+        isOpen: window.Alpine.$persist(true).as('isOpen'),
+
+        collapsedGroups: window.Alpine.$persist([]).as('collapsedGroups'),
+
+        groupIsCollapsed: function (group) {
+            return this.collapsedGroups.includes(group)
+        },
+
+        collapseGroup: function (group) {
+            if (this.collapsedGroups.includes(group)) {
+                return
+            }
+
+            this.collapsedGroups = this.collapsedGroups.concat(group)
+        },
+
+        toggleCollapsedGroup: function (group) {
+            this.collapsedGroups = this.collapsedGroups.includes(group)
+                ? this.collapsedGroups.filter(
+                      (collapsedGroup) => collapsedGroup !== group,
+                  )
+                : this.collapsedGroups.concat(group)
+        },
+
+        close: function () {
+            this.isOpen = false
+        },
+
+        open: function () {
+            this.isOpen = true
+        },
+    })
+
+    window.Alpine.store(
+        'theme',
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light',
+    )
+
+    window.addEventListener('dark-mode-toggled', (event) => {
+        window.Alpine.store('theme', event.detail)
+    })
+
+    window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', (event) => {
+            window.Alpine.store('theme', event.matches ? 'dark' : 'light')
+        })
+})
+
+Chart.defaults.font.family = `'DM Sans', sans-serif`
+Chart.defaults.color = '#6b7280'
+
+window.Chart = Chart

packages/admin/src/FilamentServiceProvider.php

@@ -16,6 +16,7 @@
 use Filament\Pages\Page;
 use Filament\Resources\RelationManagers\RelationManager;
 use Filament\Resources\Resource;
+use Filament\Support\Assets\Css;
 use Filament\Support\Assets\Js;
 use Filament\Support\Facades\Asset;
 use Filament\Tables\Actions\Action as TableAction;
@@ -102,6 +103,7 @@ public function packageBooted(): void
         parent::packageBooted();
 
         Asset::register([
+            Css::make('app', __DIR__ . '/../dist/app.css')->html(Filament::getTheme()),
             Js::make('app', __DIR__ . '/../dist/app.js')->core(),
             Js::make('echo', __DIR__ . '/../dist/echo.js')->core(),
         ]);