Fix open issues: dehydration, reactivity, CSS, and tests (#143)

coolsam726 · web-flow · commit e8c5ee2be18e · 2026-06-14T00:13:36.000+03:00
## Summary This PR builds on #142 and tackles the highest-impact open GitHub issues with PHP fixes, JS reactivity improvements, CSS cleanup, dependency narrowing, and expanded tests. ### Issues addressed - **#128 / #119** — Multiple/range pickers now dehydrate array state correctly and validate per-date instead of choking on comma-separated strings - **#131** — Cleared picker values sync `null` back to Livewire via `onChange`/`onClose` handlers - **#133** — `$set()` / entangled state updates now re-sync the Flatpickr instance via Alpine `$watch` - **#103** — Added configurable `rangeSeparator()` (defaults to ` to `) for locale-specific range parsing - **#100** — Time picker defaults to `H:i` format and dehydrates to time strings - **#141** — `locale()` accepts arrays (e.g. `firstDayOfWeek`) passed through to Flatpickr JS - **#122** — Date validation moved from dehydration into component `setUp()` so rules run before dehydration - **#130 / #125** — Removed Filament `@source` scanning from `flatpickr.css`; bundle shrank ~627KB → ~16KB and no longer hides the sidebar logo or bleeds table styles - **#126** — Production dependency narrowed to `filament/forms` + `filament/support` (`filament/filament` kept in dev for tests/builds) ### Still open / follow-up - **#96** — Dynamic `minDate`/`maxDate` from PHP closures still need a Livewire-friendly attrs refresh strategy (`wire:ignore` on the picker root limits re-rendering) - **#129** — Modal lazy-load edge cases may need further Livewire lifecycle hooks - **#104** — Manual time entry fix included via `onClose`; needs browser QA - **#53** — Year picker remains a feature request - **#124** — Filament v3 compatibility (project targets v4/v5) ## Test plan - [x] `vendor/bin/pint --test` - [x] `vendor/bin/phpstan analyse` - [x] `vendor/bin/pest --ci` (17 tests) - [x] `npm run build` - [ ] CI matrix passes - [ ] Manual QA: range/multiple edit forms, `$set()` reactivity, clear-then-save, Spanish range separator, time picker manual entry
diff --git a/.gitattributes b/.gitattributes
@@ -1,6 +1,11 @@
 # Path-based git attributes
 # https://www.kernel.org/pub/software/scm/git/docs/gitattributes.html
 
+* text=auto eol=lf
+
+*.php text eol=lf
+*.blade.php text eol=lf
+
 # Ignore all test and documentation with "export-ignore".
 /.github                export-ignore
 /.gitattributes         export-ignore
diff --git a/.github/workflows/fix-php-code-style-issues.yml b/.github/workflows/fix-php-code-style-issues.yml
@@ -1,7 +1,7 @@
 name: "Fix PHP Code Styling"
 
 on:
-  push:
+  pull_request:
     paths:
       - '**.php'
 
diff --git a/.github/workflows/phpstan.yml b/.github/workflows/phpstan.yml
@@ -2,6 +2,11 @@ name: PHPStan
 
 on:
   push:
+    branches: [main]
+    paths:
+      - '**.php'
+      - 'phpstan.neon.dist'
+  pull_request:
     paths:
       - '**.php'
       - 'phpstan.neon.dist'
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -34,6 +34,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v5
 
+      - name: Configure Git line endings
+        if: runner.os == 'Windows'
+        shell: bash
+        run: git config --global core.autocrlf false
+
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
         with:
@@ -54,5 +59,8 @@ jobs:
       - name: List Installed Dependencies
         run: composer show -D
 
+      - name: Check code style
+        run: vendor/bin/pint --test
+
       - name: Execute tests
         run: vendor/bin/pest --ci --coverage --min=0
diff --git a/.github/workflows/update-changelog.yml b/.github/workflows/update-changelog.yml
@@ -6,6 +6,7 @@ on:
 
 permissions:
   contents: write
+  pull-requests: write
 
 jobs:
   update:
@@ -23,9 +24,12 @@ jobs:
           latest-version: ${{ github.event.release.name }}
           release-notes: ${{ github.event.release.body }}
 
-      - name: Commit updated CHANGELOG
-        uses: stefanzweifel/git-auto-commit-action@v7
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
         with:
-          branch: main
-          commit_message: Update CHANGELOG
-          file_pattern: CHANGELOG.md
+          commit-message: Update CHANGELOG
+          title: Update CHANGELOG for ${{ github.event.release.name }}
+          body: |
+            Automated changelog update for release ${{ github.event.release.name }}.
+          branch: changelog/${{ github.event.release.tag_name }}
+          delete-branch: true
diff --git a/composer.json b/composer.json
@@ -21,11 +21,13 @@
     ],
     "require": {
         "php": "^8.2",
-        "filament/filament": "^4.0|^5.0",
+        "filament/forms": "^4.0|^5.0",
+        "filament/support": "^4.0|^5.0",
         "spatie/laravel-package-tools": "^1.15.0"
     },
     "require-dev": {
         "barryvdh/laravel-ide-helper": "^3.5",
+        "filament/filament": "^4.0|^5.0",
         "laravel/pint": "^1.0",
         "nunomaduro/larastan": "^3.1.0",
         "orchestra/testbench": "^9.12",
diff --git a/config/flatpickr.php b/config/flatpickr.php
@@ -1,5 +1,7 @@
 <?php
 
+use Coolsam\Flatpickr\Enums\FlatpickrTheme;
+
 return [
-    'theme' => \Coolsam\Flatpickr\Enums\FlatpickrTheme::DEFAULT, // Recommended: Use DEFAULT theme for better compatibility with Filament Styling and dark mode
+    'theme' => FlatpickrTheme::DEFAULT, // Recommended: Use DEFAULT theme for better compatibility with Filament Styling and dark mode
 ];
diff --git a/resources/css/filament-theme.css b/resources/css/filament-theme.css
@@ -1,8 +1,6 @@
 @import '../../vendor/filament/filament/resources/css/theme.css';
 
-@source '../../src/**/*';
 @source '../../resources/views/**/*';
-@source '../../vendor/filament/**/*';
 
 :root {
     --flatpickr-padding-y: 0.5rem;
diff --git a/resources/css/index.css b/resources/css/index.css
@@ -1,15 +1,15 @@
 @import "flatpickr/dist/flatpickr.min.css";
 @import "flatpickr/dist/plugins/monthSelect/style.css";
-@import '../../vendor/filament/filament/resources/css/theme.css';
-
-@source '../../src/**/*';
-@source '../../resources/views/**/*';
-@source '../../vendor/filament/**/*';
 
 .flatpickr-calendar {
     opacity: 1 !important;
-    @apply bg-white dark:bg-gray-800 opacity-100;
+    background-color: #fff;
+}
+
+.dark .flatpickr-calendar {
+    background-color: rgb(31 41 55);
 }
+
 .flatpickr-confirm {
     display: inline-flex;
     align-items: center;
diff --git a/resources/dist/components/flatpickr.js b/resources/dist/components/flatpickr.js
diff --git a/resources/dist/flatpickr.css b/resources/dist/flatpickr.css
diff --git a/resources/dist/themes/default.css b/resources/dist/themes/default.css
diff --git a/resources/js/components/flatpickr.js b/resources/js/components/flatpickr.js
@@ -5,12 +5,10 @@ import localeData from 'dayjs/plugin/localeData'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 import flatpickr from 'flatpickr'
-import flatpickrLocales from "flatpickr/dist/l10n"
+import flatpickrLocales from 'flatpickr/dist/l10n'
 
-import ConfirmDate from "flatpickr/dist/esm/plugins/confirmDate/confirmDate.js"
-import MonthSelect from "flatpickr/dist/esm/plugins/monthSelect/index.js"
-import WeekSelect from "flatpickr/dist/esm/plugins/weekSelect/weekSelect.js"
-// import rangePlugin from 'flatpickr/dist/plugins/rangePlugin.js'
+import MonthSelect from 'flatpickr/dist/esm/plugins/monthSelect/index.js'
+import WeekSelect from 'flatpickr/dist/esm/plugins/weekSelect/weekSelect.js'
 
 dayjs.extend(advancedFormat)
 dayjs.extend(customParseFormat)
@@ -20,6 +18,48 @@ dayjs.extend(utc)
 
 window.dayjs = dayjs
 
+function resolveLocale(localeConfig) {
+  if (localeConfig === null || localeConfig === undefined) {
+    return flatpickrLocales.en
+  }
+
+  if (typeof localeConfig === 'string') {
+    return flatpickrLocales[localeConfig] ?? flatpickrLocales.en
+  }
+
+  if (typeof localeConfig === 'object') {
+    const localeCode = localeConfig.locale ?? 'en'
+    const baseLocale = flatpickrLocales[localeCode] ?? flatpickrLocales.en
+
+    return {
+      ...baseLocale,
+      ...localeConfig,
+    }
+  }
+
+  return flatpickrLocales.en
+}
+
+function resolveDayjsLocale(localeConfig) {
+  if (typeof localeConfig === 'string') {
+    return locales[localeConfig] ?? locales.en
+  }
+
+  if (typeof localeConfig === 'object' && localeConfig?.locale) {
+    return locales[localeConfig.locale] ?? locales.en
+  }
+
+  return locales.en
+}
+
+function normalizeState(state) {
+  if (state === null || state === undefined || state === '') {
+    return null
+  }
+
+  return state
+}
+
 export default function flatpickrComponent(state, attrs) {
   const timezone = dayjs.tz.guess()
 
@@ -28,52 +68,98 @@ export default function flatpickrComponent(state, attrs) {
     attrs,
     timezone,
 
-    locale: String(attrs.locale),
-
     fp: null,
 
-    init: function() {
-      console.log('INit flatpickr', this.state, this.attrs)
-      Livewire.on('attributes-updated', (props) => {
-        console.log('Attributes updated', props)
+    init: function () {
+      this.initFlatpickr()
+
+      this.$watch('state', (value) => {
+        this.syncPickerFromState(value)
       })
-      const customLocale = flatpickrLocales[this.locale] ?? flatpickrLocales['en'];
-      const plugins = [
-        // new ConfirmDate({
-        //   showAlways: false,
-        // }),
-      ];
+    },
+
+    initFlatpickr: function () {
+      if (this.fp) {
+        this.fp.destroy()
+        this.fp = null
+      }
+
+      const localeConfig = this.attrs.locale ?? 'en'
+      const customLocale = resolveLocale(localeConfig)
+      const plugins = []
+
       if (this.attrs.monthPicker) {
-        plugins.push(new MonthSelect({
-          shorthand: this.attrs.monthPickerShorthand || false,
-          dateFormat: this.attrs.dateFormat || 'Y-m',
-          altFormat: this.attrs.altFormat || 'F Y',
-        }))
+        plugins.push(
+          new MonthSelect({
+            shorthand: this.attrs.monthPickerShorthand || false,
+            dateFormat: this.attrs.dateFormat || 'Y-m',
+            altFormat: this.attrs.altFormat || 'F Y',
+          }),
+        )
       } else if (this.attrs.weekPicker) {
-        plugins.push(new WeekSelect({
-        }))
-      }
-      if (this.attrs.rangePicker) {
-        // plugins.push(new rangePlugin({
-        // }))
+        plugins.push(new WeekSelect({}))
       }
+
       const config = {
         disableMobile: true,
-        initialDate: this.state,
-        defaultDate: this.state,
+        initialDate: normalizeState(this.state),
+        defaultDate: normalizeState(this.state),
         static: false,
         altInput: true,
         ...this.attrs,
+        locale: customLocale,
         plugins,
+        onChange: (selectedDates, dateStr) => {
+          this.state = selectedDates.length === 0 ? null : dateStr
+        },
+        onClose: () => {
+          if (!this.fp || !this.attrs.allowInput) {
+            return
+          }
+
+          const inputValue = this.fp.altInput?.value ?? this.fp.input.value
+
+          if (inputValue === '') {
+            this.fp.clear()
+            this.state = null
+
+            return
+          }
+
+          const parsed = this.fp.parseDate(inputValue, this.fp.config.dateFormat)
+
+          if (parsed) {
+            this.fp.setDate(parsed, false)
+            this.state = this.fp.input.value
+          }
+        },
       }
-      dayjs.locale(locales[this.locale] ?? locales['en'])
+
+      dayjs.locale(resolveDayjsLocale(localeConfig))
       flatpickr.localize(customLocale)
-      this.fp = flatpickr(this.$refs.input, config);
-      this.fp.parseDate(this.state, this.fp.config.dateFormat);
+
+      this.fp = flatpickr(this.$refs.input, config)
+
+      if (this.state) {
+        this.syncPickerFromState(this.state)
+      }
+    },
+
+    syncPickerFromState: function (value) {
+      if (!this.fp) {
+        return
+      }
+
+      const normalized = normalizeState(value)
+
+      if (normalized === null) {
+        this.fp.clear()
+
+        return
+      }
+
+      this.fp.setDate(normalized, false)
     },
-    updateAttributes(attrs) {
-        console.log('Update attributes', attrs)
-    }
   }
 }
 
diff --git a/resources/views/forms/components/flatpickr.blade.php b/resources/views/forms/components/flatpickr.blade.php
@@ -28,7 +28,6 @@
 >
     <link rel="stylesheet" id="pickr-theme" type="text/css" href="{{$getThemeAsset()}}">
     <x-filament::input.wrapper
-            wire:ignore
             :disabled="$isDisabled"
             :inline-prefix="$isPrefixInline"
             :inline-suffix="$isSuffixInline"
@@ -69,6 +68,7 @@
             />
         @else
             <div
+                    wire:ignore
                     @if (FilamentView::hasSpaMode())
                         {{-- format-ignore-start --}}x-load="visible || event (ax-modal-opened)"
                     {{-- format-ignore-end --}}
@@ -120,11 +120,4 @@
             @endforeach
         </datalist>
     @endif
-</x-dynamic-component>
-@script
-<script>
-    $wire.on('attributes-updated', (args) => {
-        console.log(`Attributes have been updated. What to do?`, args);
-    })
-</script>
-@endscript
+</x-dynamic-component>
diff --git a/src/FlatpickrServiceProvider.php b/src/FlatpickrServiceProvider.php
@@ -79,7 +79,10 @@ public function configurePackage(Package $package): void
         }
     }
 
-    public function packageRegistered(): void {}
+    public function packageRegistered(): void
+    {
+        // No package-level bindings are registered for this plugin.
+    }
 
     public function packageBooted(): void
     {
diff --git a/src/Forms/Components/Flatpickr.php b/src/Forms/Components/Flatpickr.php
diff --git a/tests/FlatpickrDehydrationTest.php b/tests/FlatpickrDehydrationTest.php
