feat: create strapi-plugin-scheme-select

packages/strapi-dashboard/package.json

@@ -17,6 +17,7 @@
     "@frameless/preview-button": "file:../preview-button",
     "@frameless/strapi-plugin-ckeditor5": "file:../strapi-plugin-ckeditor5",
     "@frameless/strapi-plugin-gemeente-select": "0.0.0-semantically-released",
+    "@frameless/strapi-plugin-scheme-select": "0.0.0-semantically-released",
     "@strapi/plugin-graphql": "4.5.0",
     "@strapi/plugin-i18n": "4.5.0",
     "@strapi/plugin-users-permissions": "4.5.0",

packages/strapi-plugin-scheme-select/README.md

@@ -0,0 +1,3 @@
+# Strapi plugin scheme-select
+
+A strapi custom field for selecting a scheme

packages/strapi-plugin-scheme-select/admin/src/components/ComboboxIcon/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '@strapi/design-system/Icon';
+import { Flex } from '@strapi/design-system/Flex';
+import ManyToMany from '@strapi/icons/ManyToMany';
+
+const IconBox = styled(Flex)`
+    background-color: #f0f0ff; /* primary100 */
+    border: 1px solid #d9d8ff; /* primary200 */
+    
+    svg > path {
+        fill: #4945ff; /* primary600 */
+    }
+`;
+
+const ComboboxIcon = () => {
+    return (
+        <IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
+            <Icon as={ManyToMany} />
+        </IconBox>
+    );
+};
+
+export default ComboboxIcon;

packages/strapi-plugin-scheme-select/admin/src/components/CustomCombobox/index.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Combobox, ComboboxOption } from '@strapi/design-system/Combobox';
+import { Stack } from '@strapi/design-system/Stack';
+import { Field, FieldLabel, FieldError, FieldHint } from '@strapi/design-system/Field';
+import { useIntl } from 'react-intl';
+
+const CustomCombobox = ({
+    value,
+    onChange,
+    name,
+    intlLabel,
+    labelAction,
+    required,
+    attribute,
+    description,
+    placeholder,
+    disabled,
+    error,
+}) => {
+    const { formatMessage } = useIntl();
+
+    const schemeData = [{ resourceIdentifier: '{http://standaarden.overheid.nl/owms/terms/}Gemeente', prefLabel: 'Gemeente' }]
+    return (
+        <Field
+            name={name}
+            id={name}
+            error={error}
+            hint={description && formatMessage(description)}
+        >
+            <Stack spacing={1}>
+                <FieldLabel action={labelAction} required={required}>
+                    {formatMessage(intlLabel)}
+                </FieldLabel>
+                <Combobox
+                    placeholder={placeholder && formatMessage(placeholder)}
+                    aria-label={formatMessage(intlLabel)}
+                    aria-disabled={disabled}
+                    disabled={disabled}
+                    value={value}
+                    onChange={resourceIdentifier => onChange({ target: { name, value: resourceIdentifier, type: attribute.type } })
+                    }
+                >
+                    {schemeData.map(({ prefLabel, resourceIdentifier
+                    }) => (<ComboboxOption value={resourceIdentifier} key={resourceIdentifier}>{prefLabel}</ComboboxOption>)
+                    )}
+                </Combobox>
+                <FieldHint />
+                <FieldError />
+            </Stack>
+        </Field>
+    )
+}
+
+CustomCombobox.defaultProps = {
+    description: null,
+    disabled: false,
+    error: null,
+    labelAction: null,
+    required: false,
+    value: '',
+};
+
+CustomCombobox.propTypes = {
+    intlLabel: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    attribute: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    description: PropTypes.object,
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    labelAction: PropTypes.object,
+    required: PropTypes.bool,
+    value: PropTypes.string,
+};
+
+export default CustomCombobox;

packages/strapi-plugin-scheme-select/admin/src/index.js

@@ -0,0 +1,72 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import pluginId from './pluginId';
+import ComboboxIcon from './components/ComboboxIcon';
+import getTrad from './utils/getTrad';
+
+export default {
+    register(app) {
+        app.customFields.register({
+            name: 'scheme',
+            pluginId: 'scheme-select',
+            type: 'string',
+            icon: ComboboxIcon,
+            intlLabel: {
+                id: getTrad('scheme-select.label'),
+                defaultMessage: 'Scheme',
+            },
+            intlDescription: {
+                id: getTrad('scheme-select.description'),
+                defaultMessage: 'Select any scheme',
+            },
+            components: {
+                Input: async () =>
+                    import('./components/CustomCombobox'),
+            },
+            options: {
+                advanced: [
+                    {
+                        sectionTitle: {
+                            id: 'global.settings',
+                            defaultMessage: 'Settings',
+                        },
+                        items: [
+                            {
+                                name: 'required',
+                                type: 'checkbox',
+                                intlLabel: {
+                                    id: 'form.attribute.item.requiredField',
+                                    defaultMessage: 'Required field',
+                                },
+                                description: {
+                                    id: 'form.attribute.item.requiredField.description',
+                                    defaultMessage: "You won't be able to create an entry if this field is empty",
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        });
+    },
+    async registerTrads({ locales }) {
+        const importedTrads = await Promise.all(
+            locales.map((locale) => {
+                return import(`./translations/${locale}.json`)
+                    .then(({ default: data }) => {
+                        return {
+                            data: prefixPluginTranslations(data, pluginId),
+                            locale,
+                        };
+                    })
+                    .catch(() => {
+                        return {
+                            data: {},
+                            locale,
+                        };
+                    });
+            })
+        );
+
+        return Promise.resolve(importedTrads);
+    },
+};

packages/strapi-plugin-scheme-select/admin/src/pluginId.js

@@ -0,0 +1,5 @@
+const pluginPkg = require('../../package.json')
+
+const pluginId = pluginPkg.name.replace(/^@frameless\/(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
+
+module.exports = pluginId;

packages/strapi-plugin-scheme-select/admin/src/translations/en.json

@@ -0,0 +1,4 @@
+{
+    "scheme-select.label": "Scheme",
+    "scheme-select.description": "Select a Scheme"
+}

packages/strapi-plugin-scheme-select/admin/src/translations/nl.json

@@ -0,0 +1,4 @@
+{
+    "scheme-select.label": "Scheme",
+    "scheme-select.description": "Selecteer een scheme"
+}

packages/strapi-plugin-scheme-select/admin/src/utils/getTrad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = (id) => `${pluginId}.${id}`;
+
+export default getTrad;

packages/strapi-plugin-scheme-select/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@frameless/strapi-plugin-scheme-select",
+    "version": "0.0.0-semantically-released",
+    "description": "A strapi custom field for selecting scheme",
+    "private": false,
+    "strapi": {
+        "name": "scheme-select",
+        "description": "Scheme Select custom field",
+        "kind": "plugin",
+        "displayName": "Scheme Select"
+    },
+    "repository": {
+        "type": "git+ssh",
+        "url": "git@github.com:frameless/strapi.git"
+    },
+    "publishConfig": {
+        "registry": "https://npm.pkg.github.com/"
+    },
+    "author": {
+        "name": ""
+    },
+    "license": "MIT",
+    "peerDependencies": {
+        "@strapi/strapi": ">=4.0.0"
+    },
+    "engines": {
+        "node": ">=16.16.0 <=18.x.x",
+        "npm": ">=6.0.0"
+    }
+}

packages/strapi-plugin-scheme-select/server/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const register = require('./register');
+
+module.exports = {
+    register,
+};

packages/strapi-plugin-scheme-select/server/register.js

@@ -0,0 +1,10 @@
+'use strict';
+const plugin = require('../admin/src/pluginId')
+
+module.exports = ({ strapi }) => {
+    strapi.customFields.register({
+        name: 'scheme',
+        plugin,
+        type: 'string',
+    });
+};

packages/strapi-plugin-scheme-select/strapi-admin.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./admin/src').default;

packages/strapi-plugin-scheme-select/strapi-server.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./server');