@inspirer-dev/hero-widget-selector/admin/src/index.ts

A custom field plugin for Strapi v5 that provides a widget selector with size filtering capabilities. Perfect for selecting hero widgets from a filtered collection based on size (S, M, L, XL).

import { Stack } from '@strapi/icons';
import { PLUGIN_ID } from './pluginId';
import { Initializer } from './components/Initializer';

export default {
  register(app: any) {
    // app.addMenuLink({
    //   to: `plugins/${PLUGIN_ID}`,
    //   icon: Stack,
    //   intlLabel: {
    //     id: `${PLUGIN_ID}.plugin.name`,
    //     defaultMessage: PLUGIN_ID,
    //   },
    //   Component: async () => {
    //     const { App } = await import('./pages/App');

    //     return App;
    //   },
    // });

    // Register custom field following the DEV.to guide pattern
    app.customFields.register({
      name: 'widget-selector',
      pluginId: PLUGIN_ID,
      plugin: PLUGIN_ID,
      type: 'string',
      intlLabel: {
        id: `${PLUGIN_ID}.widget-selector.label`,
        defaultMessage: 'Widget Selector',
      },
      intlDescription: {
        id: `${PLUGIN_ID}.widget-selector.description`,
        defaultMessage: 'Select a widget from filtered collection',
      },
      icon: Stack,
      components: {
        Input: async () => import('./components/WidgetSelectorInput'),
      },
      options: {
        base: [
          {
            sectionTitle: {
              id: `${PLUGIN_ID}.widget-selector.section.filter`,
              defaultMessage: 'Filter Options',
            },
            items: [
              {
                intlLabel: {
                  id: `${PLUGIN_ID}.widget-selector.size`,
                  defaultMessage: 'Widget Size',
                },
                name: 'options.size',
                type: 'select',
                value: 'S',
                options: [
                  {
                    key: 'S',
                    value: 'S',
                    defaultValue: 'S',
                    metadatas: {
                      intlLabel: {
                        id: `${PLUGIN_ID}.widget-selector.size.s`,
                        defaultMessage: 'Small (S)',
                      },
                    },
                  },
                  {
                    key: 'M',
                    value: 'M',
                    metadatas: {
                      intlLabel: {
                        id: `${PLUGIN_ID}.widget-selector.size.m`,
                        defaultMessage: 'Medium (M)',
                      },
                    },
                  },
                  {
                    key: 'L',
                    value: 'L',
                    metadatas: {
                      intlLabel: {
                        id: `${PLUGIN_ID}.widget-selector.size.l`,
                        defaultMessage: 'Large (L)',
                      },
                    },
                  },
                  {
                    key: 'XL',
                    value: 'XL',
                    metadatas: {
                      intlLabel: {
                        id: `${PLUGIN_ID}.widget-selector.size.xl`,
                        defaultMessage: 'Extra Large (XL)',
                      },
                    },
                  },
                ],
              },
            ],
          },
        ],
        advanced: [],
      },
    });

    app.registerPlugin({
      id: PLUGIN_ID,
      initializer: Initializer,
      isReady: false,
      name: PLUGIN_ID,
    });
  },

  bootstrap(app: any) {
    // Simplified bootstrap - no injection zones for now
  },

  async registerTrads({ locales }: { locales: string[] }) {
    return Promise.all(
      locales.map(async (locale) => {
        try {
          const { default: data } = await import(`./translations/${locale}.json`);

          return { data, locale };
        } catch {
          return { data: {}, locale };
        }
      })
    );
  },
};