Add checkbox-list custom field plugin to Strapi

- Introduced a new custom field type 'checkbox-list' with associated input component.
- Updated package.json to reflect the new plugin name.
- Added necessary server-side files for plugin registration, including bootstrap, destroy, and service methods.
- Updated package-lock.json to include new dependencies and versions.
- Enhanced admin interface with custom field registration and input handling.
This commit is contained in:
2026-02-05 11:53:17 +00:00
parent efa89313fa
commit 7fe5502dc1
21 changed files with 1254 additions and 170 deletions

View File

@@ -0,0 +1,115 @@
import type { ReactNode } from 'react';
import { Box, Checkbox, Field, Flex, Typography } from '@strapi/design-system';
import { useIntl } from 'react-intl';
type CheckboxListInputProps = {
name: string;
value?: unknown;
onChange: (eventOrPath: { target: { name: string; value: string[] } }, value?: unknown) => void;
attribute?: {
enum?: string[];
options?: {
enum?: string[];
};
} | null;
label?: ReactNode;
hint?: ReactNode;
required?: boolean;
disabled?: boolean;
error?: string;
labelAction?: ReactNode;
};
const getEnumValues = (attribute: CheckboxListInputProps['attribute']): string[] => {
if (!attribute) {
return [];
}
if (Array.isArray(attribute.enum)) {
return attribute.enum;
}
if (Array.isArray(attribute.options?.enum)) {
return attribute.options.enum;
}
return [];
};
const normalizeValue = (value: unknown): string[] => {
if (Array.isArray(value)) {
return value.filter((item): item is string => typeof item === 'string');
}
if (typeof value === 'string' && value.length > 0) {
return [value];
}
return [];
};
const CheckboxListInput = ({
name,
value,
onChange,
attribute,
label,
hint,
required = false,
disabled = false,
error,
labelAction,
}: CheckboxListInputProps) => {
const { formatMessage } = useIntl();
const enumValues = getEnumValues(attribute);
const selectedValues = normalizeValue(value);
const handleToggle = (option: string, isChecked: boolean) => {
const nextValues = isChecked
? Array.from(new Set([...selectedValues, option]))
: selectedValues.filter((item) => item !== option);
onChange({
target: {
name,
value: nextValues,
},
});
};
return (
<Field.Root name={name} hint={hint} error={error} required={required}>
<Field.Label action={labelAction}>{label ?? name}</Field.Label>
{enumValues.length > 0 ? (
<Flex direction="column" gap={2} paddingTop={1}>
{enumValues.map((option) => (
<Checkbox
key={option}
checked={selectedValues.includes(option)}
disabled={disabled}
onCheckedChange={(checked: boolean | 'indeterminate') =>
handleToggle(option, Boolean(checked))
}
>
{option}
</Checkbox>
))}
</Flex>
) : (
<Box paddingTop={1}>
<Typography variant="pi" textColor="neutral500">
{formatMessage({
id: 'checkbox-list.field.empty',
defaultMessage: 'No values configured yet.',
})}
</Typography>
</Box>
)}
<Field.Error />
<Field.Hint />
</Field.Root>
);
};
export default CheckboxListInput;

View File

@@ -1,7 +1,8 @@
import { getTranslation } from './utils/getTranslation';
import { PLUGIN_ID } from './pluginId';
import { Check } from '@strapi/icons';
import { Initializer } from './components/Initializer';
import { PluginIcon } from './components/PluginIcon';
import { PLUGIN_ID } from './pluginId';
import { getTranslation } from './utils/getTranslation';
export default {
register(app: any) {
@@ -25,6 +26,53 @@ export default {
isReady: false,
name: PLUGIN_ID,
});
app.customFields.register({
name: 'checkbox-list',
pluginId: PLUGIN_ID,
type: 'json',
icon: Check,
intlLabel: {
id: `${PLUGIN_ID}.customField.label`,
defaultMessage: 'Checkbox list',
},
intlDescription: {
id: `${PLUGIN_ID}.customField.description`,
defaultMessage: 'Select multiple values from a list',
},
components: {
Input: async () => {
const { default: Component } = await import('./components/CheckboxListInput');
return { default: Component };
},
},
options: {
base: [
{
sectionTitle: null,
items: [
{
name: 'enum',
type: 'textarea-enum',
size: 6,
intlLabel: {
id: 'form.attribute.item.enumeration.rules',
defaultMessage: 'Values (one line per value)',
},
placeholder: {
id: 'form.attribute.item.enumeration.placeholder',
defaultMessage: 'Ex:\nmorning\nnoon\nevening',
},
validations: {
required: true,
},
},
],
},
],
},
});
},
async registerTrads({ locales }: { locales: string[] }) {

172
package-lock.json generated
View File

@@ -7777,6 +7777,18 @@
"csstype": "^3.2.2"
}
},
"node_modules/@strapi/ui-primitives/node_modules/aria-hidden": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
"integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/@strapi/ui-primitives/node_modules/react-remove-scroll": {
"version": "2.5.10",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.10.tgz",
@@ -9151,9 +9163,9 @@
"license": "MIT"
},
"node_modules/@types/react": {
"version": "19.2.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.12.tgz",
"integrity": "sha512-22v4srzdW0RP/o1SSBaDEoid99oodPAY6zx9xYj0GnJQP0YXgBpwi2zrEN6iamB6EijL9H9QsgsNeSK8rFBJtA==",
"version": "19.2.13",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.13.tgz",
"integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==",
"license": "MIT",
"dependencies": {
"csstype": "^3.2.2"
@@ -9190,13 +9202,12 @@
}
},
"node_modules/@types/send": {
"version": "0.17.6",
"resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.6.tgz",
"integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==",
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
"integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/mime": "^1",
"@types/node": "*"
}
},
@@ -9212,6 +9223,17 @@
"@types/send": "<1"
}
},
"node_modules/@types/serve-static/node_modules/@types/send": {
"version": "0.17.6",
"resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.6.tgz",
"integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/mime": "^1",
"@types/node": "*"
}
},
"node_modules/@types/stylis": {
"version": "4.2.7",
"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.7.tgz",
@@ -9867,9 +9889,9 @@
"license": "Python-2.0"
},
"node_modules/aria-hidden": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
"integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
"integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
@@ -10339,6 +10361,28 @@
"nodemailer-shared": "1.1.0"
}
},
"node_modules/buildmail/node_modules/iconv-lite": {
"version": "0.4.13",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
"integrity": "sha512-QwVuTNQv7tXC5mMWFX5N5wGjmybjNBBD8P3BReTkPmipoxTUFgWM2gXNvldHQr6T14DH0Dh6qBVg98iJt7u4mQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/buildmail/node_modules/libmime": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/libmime/-/libmime-2.1.0.tgz",
"integrity": "sha512-4be2R6/jOasyPTw0BkpIZBVk2cElqjdIdS0PRPhbOCV4wWuL/ZcYYpN1BCTVB+6eIQ0uuAwp5hQTHFrM5Joa8w==",
"dev": true,
"license": "MIT",
"dependencies": {
"iconv-lite": "0.4.13",
"libbase64": "0.1.0",
"libqp": "1.1.0"
}
},
"node_modules/byte-size": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/byte-size/-/byte-size-8.1.1.tgz",
@@ -15805,6 +15849,16 @@
"zod": "^3.19.1"
}
},
"node_modules/koa-body/node_modules/zod": {
"version": "3.25.76",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
},
"node_modules/koa-compose": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
@@ -16142,25 +16196,25 @@
"license": "MIT"
},
"node_modules/libmime": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/libmime/-/libmime-2.1.0.tgz",
"integrity": "sha512-4be2R6/jOasyPTw0BkpIZBVk2cElqjdIdS0PRPhbOCV4wWuL/ZcYYpN1BCTVB+6eIQ0uuAwp5hQTHFrM5Joa8w==",
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/libmime/-/libmime-2.1.3.tgz",
"integrity": "sha512-ABr2f4O+K99sypmkF/yPz2aXxUFHEZzv+iUkxItCeKZWHHXdQPpDXd6rV1kBBwL4PserzLU09EIzJ2lxC9hPfQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"iconv-lite": "0.4.13",
"iconv-lite": "0.4.15",
"libbase64": "0.1.0",
"libqp": "1.1.0"
}
},
"node_modules/libmime/node_modules/iconv-lite": {
"version": "0.4.13",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
"integrity": "sha512-QwVuTNQv7tXC5mMWFX5N5wGjmybjNBBD8P3BReTkPmipoxTUFgWM2gXNvldHQr6T14DH0Dh6qBVg98iJt7u4mQ==",
"version": "0.4.15",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.15.tgz",
"integrity": "sha512-RGR+c9Lm+tLsvU57FTJJtdbv2hQw42Yl2n26tVIBaYmZzLN+EGfroUugN/z9nJf9kOXd49hBmpoGr4FEm+A4pw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.8.0"
"node": ">=0.10.0"
}
},
"node_modules/libqp": {
@@ -16514,6 +16568,28 @@
"libmime": "2.1.0"
}
},
"node_modules/mailcomposer/node_modules/iconv-lite": {
"version": "0.4.13",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
"integrity": "sha512-QwVuTNQv7tXC5mMWFX5N5wGjmybjNBBD8P3BReTkPmipoxTUFgWM2gXNvldHQr6T14DH0Dh6qBVg98iJt7u4mQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/mailcomposer/node_modules/libmime": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/libmime/-/libmime-2.1.0.tgz",
"integrity": "sha512-4be2R6/jOasyPTw0BkpIZBVk2cElqjdIdS0PRPhbOCV4wWuL/ZcYYpN1BCTVB+6eIQ0uuAwp5hQTHFrM5Joa8w==",
"dev": true,
"license": "MIT",
"dependencies": {
"iconv-lite": "0.4.13",
"libbase64": "0.1.0",
"libqp": "1.1.0"
}
},
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -17414,9 +17490,9 @@
"license": "MIT"
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"version": "1.54.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
"integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
"dev": true,
"license": "MIT",
"engines": {
@@ -17436,6 +17512,16 @@
"node": ">= 0.6"
}
},
"node_modules/mime-types/node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mimic-fn": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -19204,9 +19290,10 @@
}
},
"node_modules/postcss": {
"version": "8.4.49",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"funding": [
{
"type": "opencollective",
@@ -19223,7 +19310,7 @@
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.7",
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
@@ -21910,6 +21997,34 @@
}
}
},
"node_modules/styled-components/node_modules/postcss": {
"version": "8.4.49",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/styled-components/node_modules/stylis": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
@@ -24219,11 +24334,12 @@
}
},
"node_modules/zod": {
"version": "3.25.76",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
"integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
"dev": true,
"license": "MIT",
"peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}

View File

@@ -58,7 +58,7 @@
},
"strapi": {
"kind": "plugin",
"name": "strapi-plugin-checkbox-list",
"name": "checkbox-list",
"displayName": "",
"description": ""
},

File diff suppressed because it is too large Load Diff

6
server/src/bootstrap.js vendored Normal file
View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const bootstrap = ({ strapi }) => {
// bootstrap phase
};
exports.default = bootstrap;

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
default: {},
validator() { },
};

View File

@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {};

View File

@@ -0,0 +1,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const controller = ({ strapi }) => ({
index(ctx) {
ctx.body = strapi
.plugin('strapi-plugin-checkbox-list')
// the name of the service file & the method.
.service('service')
.getWelcomeMessage();
},
});
exports.default = controller;

View File

@@ -0,0 +1,9 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const controller_1 = __importDefault(require("./controller"));
exports.default = {
controller: controller_1.default,
};

6
server/src/destroy.js Normal file
View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const destroy = ({ strapi }) => {
// destroy phase
};
exports.default = destroy;

33
server/src/index.js Normal file
View File

@@ -0,0 +1,33 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Application methods
*/
const bootstrap_1 = __importDefault(require("./bootstrap"));
const destroy_1 = __importDefault(require("./destroy"));
const register_1 = __importDefault(require("./register"));
/**
* Plugin server methods
*/
const config_1 = __importDefault(require("./config"));
const content_types_1 = __importDefault(require("./content-types"));
const controllers_1 = __importDefault(require("./controllers"));
const middlewares_1 = __importDefault(require("./middlewares"));
const policies_1 = __importDefault(require("./policies"));
const routes_1 = __importDefault(require("./routes"));
const services_1 = __importDefault(require("./services"));
exports.default = {
register: register_1.default,
bootstrap: bootstrap_1.default,
destroy: destroy_1.default,
config: config_1.default,
controllers: controllers_1.default,
routes: routes_1.default,
services: services_1.default,
contentTypes: content_types_1.default,
policies: policies_1.default,
middlewares: middlewares_1.default,
};

View File

@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {};

View File

@@ -0,0 +1,3 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {};

11
server/src/register.js Normal file
View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const register = ({ strapi }) => {
// register phase
strapi.customFields.register({
name: 'checkbox-list',
plugin: 'checkbox-list',
type: 'json',
});
};
exports.default = register;

View File

@@ -2,6 +2,11 @@ import type { Core } from '@strapi/strapi';
const register = ({ strapi }: { strapi: Core.Strapi }) => {
// register phase
strapi.customFields.register({
name: 'checkbox-list',
plugin: 'checkbox-list',
type: 'json',
});
};
export default register;

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = () => ({
type: 'admin',
routes: [],
});

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = () => ({
type: 'content-api',
routes: [
{
method: 'GET',
path: '/',
// name of the controller file & the method.
handler: 'controller.index',
config: {
policies: [],
},
},
],
});

View File

@@ -0,0 +1,12 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const content_api_1 = __importDefault(require("./content-api"));
const admin_1 = __importDefault(require("./admin"));
const routes = {
'content-api': content_api_1.default,
admin: admin_1.default,
};
exports.default = routes;

View File

@@ -0,0 +1,9 @@
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const service_1 = __importDefault(require("./service"));
exports.default = {
service: service_1.default,
};

View File

@@ -0,0 +1,8 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const service = ({ strapi }) => ({
getWelcomeMessage() {
return 'Welcome to Strapi 🚀';
},
});
exports.default = service;