Updated documentation

README.md

@@ -1,47 +1,30 @@
+<p align="center">
+    <a href="https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain"><img alt="Tests" src="https://img.shields.io/github/actions/workflow/status/savannabits/filament-modules/run-tests.yml?branch=main&label=tests&style=for-the-badge&logo=github"></a>
+    <a href="https://github.com/savannabits/filament-flatpickr/actions?query=workflow%fix-php-code-style-issues+branch%3Amain"><img alt="Styling" src="https://img.shields.io/github/actions/workflow/status/savannabits/filament-modules/fix-php-code-style-issues.yml?branch=main&label=code%20style&style=for-the-badge&logo=github"></a>
+    <a href="https://laravel.com"><img alt="Laravel v9.x" src="https://img.shields.io/badge/Laravel-v9.x-FF2D20?style=for-the-badge&logo=laravel"></a>
+    <a href="https://filamentphp.com"><img alt="Filament v2.x" src="https://img.shields.io/badge/FilamentPHP-v2.x-FB70A9?style=for-the-badge&logo=filament"></a>
+    <a href="https://php.net"><img alt="PHP 8.1" src="https://img.shields.io/badge/PHP-8.1-777BB4?style=for-the-badge&logo=php"></a>
+    <a href="https://packagist.org/packages/savannabits/filament-flatpickr"><img alt="Packagist" src="https://img.shields.io/packagist/dt/savannabits/filament-flatpickr.svg?style=for-the-badge&logo=count"></a>
+</p>
 
-# Flatpickr Date/Time Picker as a Filament Field
+Use **[Flatpickr](https://flatpickr.js.org/)** as your date picker in your Filament Forms and Panels.
 
-[![Latest Version on Packagist](https://img.shields.io/packagist/v/savannabits/filament-flatpickr.svg?style=flat-square)](https://packagist.org/packages/savannabits/filament-flatpickr)
-[![GitHub Tests Action Status](https://img.shields.io/github/workflow/status/savannabits/filament-flatpickr/run-tests?label=tests)](https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3Arun-tests+branch%3Amain)
-[![GitHub Code Style Action Status](https://img.shields.io/github/workflow/status/savannabits/filament-flatpickr/Fix%20PHP%20code%20style%20issues?label=code%20style)](https://github.com/savannabits/filament-flatpickr/actions?query=workflow%3A"Fix+PHP+code+style+issues"+branch%3Amain)
-[![Total Downloads](https://img.shields.io/packagist/dt/savannabits/filament-flatpickr.svg?style=flat-square)](https://packagist.org/packages/savannabits/filament-flatpickr)
-
-Flatpickr is one of the most popular js datepickers. This filament plugin allows you to use flatpickr as a Filament Field without the sweat of configuration.
-
-![image](https://user-images.githubusercontent.com/5610289/183527622-4d26a2cb-ed8b-46d6-ba57-08aeeccdd7d6.png)
-![image](https://user-images.githubusercontent.com/5610289/183527983-17401461-a1eb-4ba4-a83e-d65b267b8a7d.png)
-
-## Features
-- Configure easily using fluent (chained) methods
-- Supports an optional month Selector
-- Supports an optional week selector
-- Support for both light and dark modes
-- Specify the theme (among the available themes) as a configuration
-- Supports Range Selection mode
-- Supports multiple date selection mode
-- And many more features are coming...
+**NB: These docs are for v2.x, which only supports Filament 2.x. Support for Filament 3.x is still under development**
 
 ## Installation
 
-You can install the package via composer:
+Install the package via composer:
 
 ```bash
 composer require savannabits/filament-flatpickr
 ```
 
-You can publish the config file with:
+Next, publish the package's assets with the following command:
 
 ```bash
-php artisan vendor:publish --tag="filament-flatpickr-config"
+php artisan vendor:publish --tag="filament-flatpickr-assets" --force
 ```
 
-This is the contents of the published config file:
-
-```php
-return [
-    'default_theme' => 'airbnb', // 'default','dark','material_blue','material_green','material_red','material_orange','airbnb','confetti'
-];
-```
 If you are using a custom filament theme (using tailwind.config.js), append the following to `tailwind.config.js` under `content` for proper styling:
 ```js
 module.exports = {
@@ -52,54 +35,62 @@ module.exports = {
 ```
 
 ## Usage
-Use the `Flatpickr` field anywhere in your filament forms as shown in the following examples
-```php
-use Savannabits\Flatpickr\Flatpickr;
-
-// Basic, Date Field
-Flatpickr::make('read_at')->default(now()),
-```
-![image](https://user-images.githubusercontent.com/5610289/183526410-e1318643-f9ee-4a5b-b344-4eb1dcf86cf9.png)
-
-```php
-// Datetime field
-Flatpickr::make('read_at')->enableTime(),
-```
-![image](https://user-images.githubusercontent.com/5610289/183526312-f76afd0f-2132-4179-9120-e6730beb7093.png)
-```php
-// Month Selector field
-Flatpickr::make('read_at')->monthSelect(),
-```
-![image](https://user-images.githubusercontent.com/5610289/183527776-09de10a0-9caa-4c73-a114-0855c1d72c67.png)
+The Flatpickr component from this package a **datepicker, timepicker, datetimepicker, date range picker, week picker and month picker** based on your configuration.
+Most of the fluent config methods you can align are similar to [Flatpickr's official](https://flatpickr.js.org/options/) options in naming.
+The rest of the methods are just like the other filament inputs.
 
-```php
-// Date Range picker field
-Flatpickr::make('read_at')->rangePicker(),
-```
-![image](https://user-images.githubusercontent.com/5610289/183526584-121d9062-5a4a-487f-8afc-1b118c4ac474.png)
+Here are some examples of the methods. Refer to Flatpickr's Official Documentation for details on each of the configurations.
 
 ```php
-// Specify the Date format
-Flatpickr::make('read_at')->dateFormat('Y-m-d'),
-
-// Toggle AltInput (true by default) and set Alt Display Format:
-Flatpickr::make('read_at')->altInput(true)->altFormat('F J Y'),
-```
-![image](https://user-images.githubusercontent.com/5610289/183525593-ff27da63-199f-4cda-b444-74cae729d5be.png)
-```php
-// Specify the input Date Format
-Flatpickr::make('read_at')->dateFormat('d/m/Y')->altInput(false),
-```
-![image](https://user-images.githubusercontent.com/5610289/183526041-9dbebc2b-14b9-400b-8362-434719cd556b.png)
+use Savannabits\Flatpickr\Flatpickr;
 
-```php
-// Specify the Datepicker's Theme: See for https://flatpickr.js.org/themes/ available themes
-Flatpickr::make('read_at')->theme('material_red'),
+// Basic, Date Field
+Flatpickr::make('test_field') // Minimal Config as a datepicker
+Flatpickr::make('test_field')
+    ->allowInput(true)
+    ->altInput(true)
+    ->altFormat('F j, Y')
+    ->enableTime()
+    ->disabledDates(['2023-07-25','2023-07-26'])
+    ->minDate(today()->startOfYear())
+    ->maxDate(today())
+    ->minTime(now()->format('H:i:s'))
+    ->maxTime(now()->addHours(12)->format('H:i:s'))
+    ->hourIncrement(1)
+    ->minuteIncrement(10)
+    ->enableSeconds(false)
+    ->defaultSeconds(0) //Initial value of the seconds element, when no date is selected 
+    ->defaultMinute(00)
+    ->allowInvalidPreload()
+    ->altInputClass('sample-class')
+    ->animate()
+    ->dateFormat('Y-m-d')
+    ->ariaDateFormat('Y-m-d')
+    ->clickOpens(true)
+    ->closeOnSelect(true)
+    ->conjunction(',')
+    ->inline(true)
+    ->disableMobile(true)
+    ->theme(\Savannabits\Flatpickr\Enums\FlatpickrTheme::AIRBNB)
+    ->mode(\Savannabits\Flatpickr\Enums\FlatpickrMode::RANGE)
+    ->monthSelectorType(\Savannabits\Flatpickr\Enums\FlatpickrMonthSelectorType::DROPDOWN)
+    ->shorthandCurrentMonth(true)
+    ->nextArrow('>')
+    ->prevArrow('<')
+    ->noCalendar(true)
+    ->position(\Savannabits\Flatpickr\Enums\FlatpickrPosition::AUTO_CENTER)
+    ->showMonths(1)
+    ->weekNumbers(true)
+    ->use24hr(true)
+    ->wrap(true)
+;
+Flatpickr::make('published_at')->enableTime() // Use as a DateTimePicker
+Flatpickr::make('week')->weekSelect() // Use as a Week Picker
+Flatpickr::make('report_month')->monthSelect() // Use as a Month Picker
+Flatpickr::make('start_time')->time() // Use as a TimePicker
+Flatpickr::make('filter_range')->range() // Use as a Date Range Picker
+Flatpickr::make('list_of_dates')->multiple() // Use as a Multiple Date Picker
 ```
-![image](https://user-images.githubusercontent.com/5610289/183527163-62abbf8c-436d-4609-aa17-4cd135780ce8.png)
-## Automatic dark mode:
-![image](https://user-images.githubusercontent.com/5610289/183527360-952ff77f-df8b-4f5b-b00b-489b302b43fa.png)
-
 
 ## Testing
 

src/Enums/FlatpickrMode.php

@@ -1,8 +1,11 @@
 <?php
+
 namespace Savannabits\Flatpickr\Enums;
-enum FlatpickrMode: string {
-    case RANGE      = 'range';
-    case SINGLE     = 'single';
-    case MULTIPLE   = 'multiple';
-    case TIME       = 'time';
+
+enum FlatpickrMode: string
+{
+    case RANGE = 'range';
+    case SINGLE = 'single';
+    case MULTIPLE = 'multiple';
+    case TIME = 'time';
 }

src/Enums/FlatpickrMonthSelectorType.php

@@ -1,6 +1,9 @@
 <?php
+
 namespace Savannabits\Flatpickr\Enums;
-enum FlatpickrMonthSelectorType: string {
+
+enum FlatpickrMonthSelectorType: string
+{
     case DROPDOWN = 'dropdown';
     case STATIK = 'static';
 }

src/Enums/FlatpickrPosition.php

@@ -1,17 +1,19 @@
 <?php
+
 namespace Savannabits\Flatpickr\Enums;
+
 enum FlatpickrPosition: string
 {
-    case AUTO = "auto";
-    case ABOVE = "above";
-    case BELOW = "below";
-    case AUTO_LEFT = "auto left";
-    case AUTO_CENTER = "auto center";
-    case AUTO_RIGHT = "auto right";
-    case ABOVE_LEFT = "above left";
-    case ABOVE_CENTER = "above center";
-    case ABOVE_RIGHT = "above right";
-    case BELOW_LEFT = "below left";
-    case BELOW_CENTER = "below center";
-    case BELOW_RIGHT = "below right";
+    case AUTO = 'auto';
+    case ABOVE = 'above';
+    case BELOW = 'below';
+    case AUTO_LEFT = 'auto left';
+    case AUTO_CENTER = 'auto center';
+    case AUTO_RIGHT = 'auto right';
+    case ABOVE_LEFT = 'above left';
+    case ABOVE_CENTER = 'above center';
+    case ABOVE_RIGHT = 'above right';
+    case BELOW_LEFT = 'below left';
+    case BELOW_CENTER = 'below center';
+    case BELOW_RIGHT = 'below right';
 }

src/Enums/FlatpickrTheme.php

@@ -1,6 +1,9 @@
 <?php
+
 namespace Savannabits\Flatpickr\Enums;
-enum FlatpickrTheme: string {
+
+enum FlatpickrTheme: string
+{
     case DEFAULT = 'default';
     case LIGHT = 'light';
     case DARK = 'dark';