datocms-plugin-lucide-icon-selector 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Seppe Alaerts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,137 @@
+# DatoCMS Icon Selector Plugin
+
+A custom field extension for DatoCMS that provides a searchable icon selector using [Lucide Icons](https://lucide.dev/).
+
+## Features
+
+- 🎨 **Visual Icon Selection**: Browse and select from hundreds of Lucide icons with visual previews
+- 🔍 **Search Functionality**: Quickly find icons by typing their name
+- 💾 **Simple Storage**: Icons are stored as string values (icon names) that you can use with the Lucide React library
+- 🎯 **Easy Integration**: Can be manually assigned to any string field in the DatoCMS schema editor
+- ✨ **Modern UI**: Clean, intuitive interface that adapts to DatoCMS light and dark mode
+- 🎛️ **Per-field Icon Filtering**: Restrict which icons are available per field via the field configuration screen
+- 🔧 **Manual Assignment**: Can be manually assigned to any string field in the DatoCMS schema editor
+
+## Installation
+
+1. Install the plugin in your DatoCMS project:
+
+   - Go to your DatoCMS project settings
+   - Navigate to Plugins
+   - Click "Add plugin" and select this plugin
+
+2. Or install via npm (for development):
+   ```bash
+   npm install
+   ```
+
+## Setting up a field
+
+Assign the **Lucide Icon Selector** editor to any string field via the DatoCMS schema editor:
+
+1. Create a **String** field in your DatoCMS model
+2. In the field's **Presentation** settings, look for the **Editor** dropdown
+3. Select **Lucide Icon Selector** from the list of available editors
+4. Optionally click the gear icon ⚙ to configure which icons are pickable
+
+### Per-field Icon Filtering
+
+When you manually assign the Lucide Icon Selector to a string field, you can configure exactly which icons are available for selection:
+
+1. In the field's **Presentation** settings, select **Lucide Icon Selector** as the editor
+2. Click the gear icon ⚙ next to the editor name
+3. The configuration screen opens showing all available Lucide icons
+4. **Search** for specific icons by name
+5. **Toggle** individual icons to whitelist them
+6. Use **Select all filtered** to bulk-select visible icons, or **Clear all** to reset the selection
+7. Save your changes
+
+When icons are whitelisted, content editors can only pick from the configured set. If no icons are whitelisted, all Lucide icons are available.
+
+To reset the whitelist back to "all icons", clear the configuration settings for that field.
+
+### Using the selected icon in your application
+
+The plugin stores the icon name as a string. Use it with the Lucide React library:
+
+```tsx
+import { Heart, Star, User } from "lucide-react";
+
+// Get the icon name from DatoCMS
+const iconName = record.icon; // e.g., "Heart"
+
+// Use it in your component
+const IconComponent = { Heart, Star, User }[iconName];
+return <IconComponent size={24} />;
+```
+
+Or dynamically:
+
+```tsx
+import * as LucideIcons from "lucide-react";
+
+const iconName = record.icon;
+const IconComponent = LucideIcons[iconName as keyof typeof LucideIcons];
+return IconComponent ? <IconComponent size={24} /> : null;
+```
+
+## How It Works
+
+The plugin works by:
+
+1. **Custom Editor**: Replaces the default text input with a custom icon selector when manually assigned to a string field
+2. **Icon Loading**: Dynamically loads and displays all available Lucide icons
+3. **Search & Filter**: Provides real-time search to filter through hundreds of icons
+4. **Per-field Configuration**: The field-level configuration screen lets you whitelist specific icons per field
+5. **Theme Adaptation**: The plugin automatically adapts to DatoCMS light and dark mode via the built-in `Canvas` component and native CSS custom properties
+6. **Value Storage**: Stores the selected icon name as a string value in DatoCMS
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- npm or yarn
+
+### Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+### Project Structure
+
+```
+src/
+  ├── entrypoints/
+  │   ├── ConfigScreen.tsx                # Plugin configuration screen
+  │   ├── FieldExtensionConfigScreen.tsx   # Per-field icon filtering config screen
+  │   ├── IconSelectField.tsx             # Main icon selector field component
+  │   └── styles.module.css               # Component styles
+  ├── utils/
+  │   ├── lucideIcons.ts                  # Lucide icon names utility
+  │   └── render.tsx                      # React rendering utility
+  └── main.tsx                            # Plugin entry point
+```
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Support
+
+For issues, questions, or feature requests, please open an issue on the GitHub repository.