Re write (#7)

* re-write

* udpate todo.md

* Show loading indicator when searching

* disable image select conditionally

* update todo

* fix modal descriptions

* add upload life cycle hooks

* add default search option

* fix

* finalize the re-write

* Fix styling

* add notice

* Fix styling

---------

Co-authored-by: mansoorkhan96 <mansoorkhan96@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,7 +1,7 @@
 name: Bug Report
 description: Report an Issue or Bug with the Package
-title: "[Bug]: "
-labels: ["bug"]
+title: '[Bug]: '
+labels: ['bug']
 body:
   - type: markdown
     attributes:

.github/workflows/fix-php-code-style-issues.yml

@@ -1,4 +1,4 @@
-name: "Fix PHP Code Styling"
+name: 'Fix PHP Code Styling'
 
 on:
   push:

.github/workflows/update-changelog.yml

@@ -1,4 +1,4 @@
-name: "Update Changelog"
+name: 'Update Changelog'
 
 on:
   release:

.gitignore

@@ -12,3 +12,5 @@ phpstan.neon
 testbench.yaml
 vendor
 .env
+.devdbrc
+playground

.prettierrc

@@ -1,5 +1,4 @@
 {
     "semi": false,
-    "singleQuote": true,
-    "trailingComma": "all"
+    "singleQuote": true
 }

README.md

@@ -15,165 +15,159 @@ This package is being re-written and will mostly probably be ready to use after
 
 ## Installation
 
-You can install the package via composer:
+You can install the plugin via composer:
 
 ```bash
 composer require mansoor/filament-unsplash-picker
 ```
 
-Add your Unsplash Client ID to your `.env` file
+Add Unsplash Client ID to `config/services.php`
 
-```env
-UNSPLASH_CLIENT_ID=your-unsplash-client-id-goes-here
+```php
+'unsplash' => [
+    'client_id' => env('UNSPLASH_CLIENT_ID'),
+],
 ```
 
-**Note: Package includes a queueable job to clear/delete unused files after 24 hours. Make sure to set your queue connection to any async driver. This Job is only dispatched when QUEUE_CONNECTION is not set to `sync`**
+Integrate plugin Tailwind CSS by [creating a custom Filament theme](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme). After you have created your custom theme, add Unsplash Picker views to your new theme's `tailwind.config.js` file located in `resources/css/filament/admin/tailwind.config.js`:
 
-```php
-QUEUE_CONNECTION=database
+```js
+content: [
+    ...
+    './vendor/mansoor/filament-unsplash-picker/resources/views/**/*.blade.php',
+],
 ```
 
 ## Usage
 
-Just add the `UnsplashPickerAction` to your FileUpload Field.
+Just add the `UnsplashPickerAction` to your FileUpload Field's action.
 
 ```php
 use Mansoor\UnsplashPicker\Actions\UnsplashPickerAction;
 
 Forms\Components\FileUpload::make('featured_image')
     ->image()
-    ->hintAction(UnsplashPickerAction::make())
+    ->hintAction(
+        UnsplashPickerAction::make()
+    )
 ```
 
-## Specifying Disk and Directory
-
-If you have specified the directory and disk to your FileUpload field, it will respect the configuration and upload to the correct path.
+This plugin also supports all the features for [Spatie Media Libaray Plugin](https://filamentphp.com/plugins/filament-spatie-media-library)
 
 ```php
-use Mansoor\UnsplashPicker\Actions\UnsplashPickerAction;
-
-Forms\Components\FileUpload::make('featured_image')
+SpatieMediaLibraryFileUpload::make('featured_image')
     ->image()
-    ->disk('public')
-    ->directory('posts/featured-images')
-    ->hintAction(UnsplashPickerAction::make())
+    ->hintAction(
+        UnsplashPickerAction::make()
+    )
 ```
 
 ## Specifying Image Size
 
 You can specify which image size to use.
 
 ```php
-use Mansoor\UnsplashPicker\Actions\UnsplashPickerAction;
-
-Forms\Components\FileUpload::make('featured_image')
-    ->image()
-    ->hintAction(UnsplashPickerAction::make()->regular())
+UnsplashPickerAction::make()
+    ->regular()
 ```
 
 **Available sizes:**
 
-- `->raw()`
-- `->full()`
-- `->regular()`
-- `->small()`
-- `->thumbnail()`
-
-## Specifying Per Page
+-   `->raw()`
+-   `->full()`
+-   `->regular()`
+-   `->small()`
+-   `->thumbnail()`
 
-You can specify how many image results should show on a single page.
+## Choose multiple photos
 
-Update per_page option in `.env`
+If you add `->multiple()` to your FileUpload field, the plugin will allow you to pick multiple images. The plugin respects the validation so you will only be able to pick max files set by the FileUpload field.
 
 ```php
-'per_page' => env('UNSPLASH_PICKER_PER_PAGE', 20),
+FileUpload::make('featured_image')
+    ->multiple() // This will indicate the plugin to allow the user to pick multiple files
+    ->hintAction(
+        UnsplashPickerAction::make()
+    )
 ```
 
-You can also set different per page option for each `UnsplashPickerAction` by appending `->perPage()` method
+## Specifying Per Page
+
+You may specify how many photos to show per page by appending `->perPage()` method.
 
 ```php
-Forms\Components\FileUpload::make('featured_image')
-    ->image()
-    ->hintAction(
-        UnsplashPickerAction::make()
-            ->thumbnail()
-            ->perPage(20)
-    )
+UnsplashPickerAction::make()
+    ->perPage(20)
 ```
 
 ## Enable/Disable Square Mode
 
 You can choose to dispaly images in square which uses `aspect-square` class from Tailwind CSS or disable it to display images in original height.
 
-Update use_square_display option in `.env` to apply this setting globally.
-
 ```php
-'use_square_display' => env('UNSPLASH_PICKER_USE_SQUARE_DISPLAY', true),
+UnsplashPickerAction::make()
+    ->useSquareDisplay(false)
 ```
 
-Or, You can disable this setting for each `UnsplashPickerAction` by appending `->useSquareDisplay(false)` method
+### Default search
+
+You may set the default search input.
 
 ```php
-Forms\Components\FileUpload::make('featured_image')
-    ->image()
-    ->hintAction(
-        UnsplashPickerAction::make()
-            ->thumbnail()
-            ->perPage(20)
-            ->useSquareDisplay(false)
-    )
+UnsplashPickerAction::make()
+    ->defaultSearch('Hello world')
 ```
 
-## Customization
-
-The `UnsplashPickerAction` is simple Filament Form Action and you append all the available methods. The Image picker component is a livewire component, you can extend and override the methods.
-
-Here is a very cool example that shows how to get other data for selected unsplash image:
+You can also pass a custom closure to get search input from a field and return the search string.
 
 ```php
-use Filament\Forms\Components\Actions\Action;
-use Livewire\Component;
-use Filament\Forms\Components\FileUpload;
-use Filament\Forms\Set;
-use Illuminate\Support\Arr;
-
 UnsplashPickerAction::make()
-    ->regular()
-    ->action(function (Action $action, $arguments, Component $livewire, FileUpload $component, Set $set) {
-        $action->uploadImage($arguments, $livewire, $component);
+    ->defaultSearch(fn (Get $get) => $get('title'))
+```
 
-        $creatorName = Arr::get($arguments, 'user.name');
+### Hooks
 
-        $altText = Arr::get($arguments, 'alt_description');
-        $creditText = "Photo by {$creatorName}, from unsplash.com";
-        $creditUrl = Arr::get($arguments, 'user.links.html');
+Similar to core Filament, Unsplash picker provides two hooks `beforeUpload` and `afterUpload` to let you use Unsplash data.
 
-        $set('featured_image_alt', $altText);
-        $set('featured_image_credit.text', $creditText);
-        $set('featured_image_credit.url', $creditUrl);
+```php
+UnsplashPickerAction::make()
+    ->afterUpload(function (array $data) {
+        dd($data);
     })
 ```
 
-You dont need to but you can publish the config file with:
+## Customization
+
+The `UnsplashPickerAction` is simple Filament Form Action and you may override all the available methods. The Image picker component is a Livewire component, which is easy to extend.
+
+Optionally, you can publish the views using
 
 ```bash
-php artisan vendor:publish --tag="filament-unsplash-picker-config"
+php artisan vendor:publish --tag="filament-unsplash-picker-views"
 ```
 
-This is the contents of the published config file:
+> [!IMPORTANT]
+> When defining the `extraAlpineAttributes` method for `SpatieMediaLibraryFileUpload` or `FileUpload` field, make sure to merge the Alpine attributes from `UnsplashPickerAction`.
 
 ```php
-return [
-    'unsplash_client_id' => env('UNSPLASH_CLIENT_ID'),
-    'per_page' => env('UNSPLASH_PICKER_PER_PAGE', 20),
-];
+SpatieMediaLibraryFileUpload::make('media')
+    ->extraAlpineAttributes(function ($component) {
+        return [
+            'custom-attribute' => 'custom-attribute-value-goes-here',
+            ...UnsplashPickerAction::getExtraAlpineAttributes($component),
+        ];
+    })
 ```
 
-Optionally, you can publish the views using
+## Upgrade to 1.x
 
-```bash
-php artisan vendor:publish --tag="filament-unsplash-picker-views"
-```
+This plugin is re-written but it is very small and simple, so upgrade is very easy. If you follow the docs from top to bottom, you should be good to use the latest version.
+
+-   This plugin no longer ships with config file. Hence per_page, use_square_display are no longer supported. You may use `Action::configureUsing()` in service provider to achieve the same. You may also delete the config file
+-   `unsplash_client_id` has been removed to from plugin config file. You may add it to `config/services.php`. Please check Installation section.
+-   Latest version of plugin requires to add a custom theme. Please check Installation section.
+-   The need for using queueable job to clear/delete un-used media is now removed. So you may use any queue connection desired.
+-   The language file has been renamed and the structure has changed very much.
 
 ## Testing
 
@@ -195,8 +189,8 @@ Please review [our security policy](../../security/policy) on how to report secu
 
 ## Credits
 
-- [Mansoor Ahmed](https://github.com/mansoorkhan96)
-- [All Contributors](../../contributors)
+-   [Mansoor Ahmed](https://github.com/mansoorkhan96)
+-   [All Contributors](../../contributors)
 
 ## License