@tunghtml/strapi-plugin-dynamic-enum 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 tunghtml
+
+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,80 @@
+# Strapi Plugin Dynamic Enum
+
+A Strapi v5 custom field plugin that provides an enum field with the ability to dynamically create new options on the fly.
+
+## Features
+
+- 🎯 Single select dropdown (like standard enum)
+- ✨ Create new options directly from the input field
+- 🔍 Search/filter existing options
+- 💾 Automatically includes saved values in options list
+- 🎨 Clean UX with Strapi Design System
+
+## Installation
+
+```bash
+npm install @tunghtml/strapi-plugin-dynamic-enum
+# or
+yarn add @tunghtml/strapi-plugin-dynamic-enum
+```
+
+## Configuration
+
+Add the plugin to your `config/plugins.js`:
+
+```javascript
+module.exports = {
+  // ...
+  'dynamic-enum': {
+    enabled: true,
+  },
+};
+```
+
+## Usage
+
+1. Go to **Content-Type Builder**
+2. Select a content type or create a new one
+3. Add a new field and select **Dynamic Enum** from custom fields
+4. In the field settings, add initial options as JSON array:
+   ```json
+   ["Option 1", "Option 2", "Option 3"]
+   ```
+5. Save and use!
+
+## How It Works
+
+When editing an entry:
+
+- Select from existing options in the dropdown
+- Type to search/filter options
+- If you type a value that doesn't exist, the plugin will show a "Create '...'" option
+- Click to create and select the new option immediately
+- Newly created options are automatically added to the list for future use
+
+## Example
+
+Initial options: `["Pending", "In Progress", "Completed"]`
+
+User types "Cancelled" → Plugin shows "Create 'Cancelled'" → User clicks → "Cancelled" is now available as an option.
+
+## Data Storage
+
+Values are stored as strings in the database, just like standard enum fields.
+
+## Requirements
+
+- Strapi v5.x
+- Node.js >= 18.0.0
+
+## License
+
+MIT
+
+## Author
+
+[tunghtml](https://github.com/finnwasabi)
+
+## Repository
+
+[https://github.com/finnwasabi/strapi-plugin-dynamic-enum](https://github.com/finnwasabi/strapi-plugin-dynamic-enum)

package/admin/src/components/DynamicEnumInput.jsx

@@ -0,0 +1,133 @@
+import {
+  Combobox,
+  ComboboxOption,
+  DesignSystemProvider,
+  Field,
+} from '@strapi/design-system';
+import { useNotification } from '@strapi/strapi/admin';
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useTheme } from 'styled-components';
+
+const DynamicEnumInput = ({
+  name,
+  value,
+  onChange,
+  intlLabel,
+  label,
+  required,
+  error,
+  disabled = false,
+  attribute,
+}) => {
+  const theme = useTheme();
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+
+  const [options, setOptions] = useState(() => {
+    const initialOptions = attribute?.options?.enum || attribute?.options || [];
+    let opts = [];
+    if (typeof initialOptions === 'string') {
+      try {
+        opts = JSON.parse(initialOptions);
+      } catch {
+        opts = [];
+      }
+    } else {
+      opts = Array.isArray(initialOptions) ? initialOptions : [];
+    }
+
+    // Add current value to options if it doesn't exist
+    if (value && !opts.includes(value)) {
+      opts = [...opts, value];
+    }
+
+    return opts;
+  });
+
+  const [searchValue, setSearchValue] = useState('');
+
+  // Add current value to options if it doesn't exist (for when loading saved data)
+  useEffect(() => {
+    if (value && !options.includes(value)) {
+      setOptions((prev) => [...prev, value]);
+    }
+  }, [value, options]);
+
+  const handleInputChange = (value) => {
+    // Handle both string and event object
+    const newValue =
+      typeof value === 'string' ? value : value?.target?.value || '';
+    setSearchValue(newValue);
+  };
+
+  const handleCreateOption = (newValue) => {
+    const trimmedValue = String(newValue || '').trim();
+
+    if (!trimmedValue) {
+      return;
+    }
+
+    if (options.includes(trimmedValue)) {
+      onChange({ target: { name, value: trimmedValue, type: 'string' } });
+      setSearchValue(''); // Reset search
+      return;
+    }
+
+    const updatedOptions = [...options, trimmedValue];
+    setOptions(updatedOptions);
+    onChange({ target: { name, value: trimmedValue, type: 'string' } });
+    setSearchValue(''); // Reset search
+
+    toggleNotification({
+      type: 'success',
+      message: `Created and selected "${trimmedValue}"`,
+    });
+  };
+
+  const handleChange = (selectedValue) => {
+    onChange({ target: { name, value: selectedValue, type: 'string' } });
+    setSearchValue(''); // Reset search after selection
+  };
+
+  const searchStr = String(searchValue || '');
+
+  const filteredOptions = options.filter((option) =>
+    option.toLowerCase().includes(searchStr.toLowerCase())
+  );
+
+  return (
+    <DesignSystemProvider theme={theme}>
+      <Field.Root
+        name={name}
+        required={required}
+        error={error}
+        disabled={disabled}
+      >
+        <Field.Label>
+          {intlLabel?.id ? formatMessage(intlLabel) : label || name}
+        </Field.Label>
+
+        <Combobox
+          value={value || ''}
+          onChange={handleChange}
+          onInputChange={handleInputChange}
+          placeholder="Select or type to create"
+          disabled={disabled}
+          creatable
+          onCreateOption={handleCreateOption}
+        >
+          {filteredOptions.map((option) => (
+            <ComboboxOption key={option} value={option}>
+              {option}
+            </ComboboxOption>
+          ))}
+        </Combobox>
+
+        <Field.Error />
+      </Field.Root>
+    </DesignSystemProvider>
+  );
+};
+
+export default DynamicEnumInput;

package/admin/src/components/PluginIcon.jsx

@@ -0,0 +1,5 @@
+import { List } from '@strapi/icons';
+
+const PluginIcon = () => <List />;
+
+export default PluginIcon;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@tunghtml/strapi-plugin-dynamic-enum",
+  "version": "1.0.0",
+  "description": "A Strapi custom field plugin for enum with dynamic option creation",
+  "keywords": [
+    "strapi",
+    "strapi-plugin",
+    "custom-field",
+    "enum",
+    "dynamic-enum"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/finnwasabi/strapi-plugin-dynamic-enum.git"
+  },
+  "author": {
+    "name": "tunghtml",
+    "url": "https://github.com/finnwasabi"
+  },
+  "maintainers": [
+    {
+      "name": "tunghtml",
+      "url": "https://github.com/finnwasabi"
+    }
+  ],
+  "strapi": {
+    "name": "dynamic-enum",
+    "displayName": "Dynamic Enum",
+    "description": "Custom field for enum with ability to create new options",
+    "kind": "plugin"
+  },
+  "dependencies": {
+    "@strapi/design-system": "2.1.2",
+    "@strapi/icons": "2.1.2"
+  },
+  "peerDependencies": {
+    "@strapi/strapi": "5.33.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-redux": "^9.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0 <=22.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

package/server/register.js

@@ -0,0 +1,7 @@
+export default ({ strapi }) => {
+  strapi.customFields.register({
+    name: 'dynamic-enum',
+    plugin: 'dynamic-enum',
+    type: 'string',
+  });
+};

package/strapi-admin.js

@@ -0,0 +1,66 @@
+import PluginIcon from './admin/src/components/PluginIcon';
+
+export default {
+  register(app) {
+    app.customFields.register({
+      name: 'dynamic-enum',
+      pluginId: 'dynamic-enum',
+      type: 'string',
+      intlLabel: {
+        id: 'dynamic-enum.label',
+        defaultMessage: 'Dynamic Enum',
+      },
+      intlDescription: {
+        id: 'dynamic-enum.description',
+        defaultMessage: 'Single select with ability to create new options',
+      },
+      icon: PluginIcon,
+      components: {
+        Input: async () => import('./admin/src/components/DynamicEnumInput'),
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: {
+              id: 'dynamic-enum.options.base.settings',
+              defaultMessage: 'Settings',
+            },
+            items: [
+              {
+                name: 'options',
+                type: 'json',
+                intlLabel: {
+                  id: 'dynamic-enum.options.enum',
+                  defaultMessage: 'Initial Options',
+                },
+                description: {
+                  id: 'dynamic-enum.options.enum.description',
+                  defaultMessage:
+                    'Enter initial enum values as JSON array: ["Option 1", "Option 2"]',
+                },
+                placeholder: {
+                  id: 'dynamic-enum.options.enum.placeholder',
+                  defaultMessage: '["Option 1", "Option 2", "Option 3"]',
+                },
+              },
+              {
+                name: 'required',
+                type: 'checkbox',
+                intlLabel: {
+                  id: 'dynamic-enum.options.requiredField',
+                  defaultMessage: 'Required field',
+                },
+                description: {
+                  id: 'dynamic-enum.options.requiredField.description',
+                  defaultMessage:
+                    "You won't be able to create an entry if this field is empty",
+                },
+              },
+            ],
+          },
+        ],
+        advanced: [],
+      },
+    });
+  },
+};

package/strapi-server.js

@@ -0,0 +1,9 @@
+export default {
+  register({ strapi }) {
+    strapi.customFields.register({
+      name: 'dynamic-enum',
+      plugin: 'dynamic-enum',
+      type: 'string',
+    });
+  },
+};