From 5896480c223f74030367aadd29ceb10e45020e08 Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Thu, 2 Mar 2023 09:06:48 +0100 Subject: [PATCH 1/6] Add new page to helper-plugin's storybook about useCustomFields --- .../useCustomFields.stories.mdx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx diff --git a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx new file mode 100644 index 0000000000..3ae7ef83ce --- /dev/null +++ b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx @@ -0,0 +1,74 @@ + + +import { Meta, Canvas, Story } from '@storybook/addon-docs'; + + + +# useCustomFields + +This hook provides you with a `get` function to retrieve information about a specific custom field registered in the app, as well as an `getAll` function to obtain information about all custom fields registered in the app. + +## Get information about a specific plugin if I know its uid + +With the `get` function from the `useCustomFields` hook you can have all the information of a custom field. + +### Example + +```js +import { useCustomFields } from '@strapi/helper-plugin'; + +const CustomIcon = ({ customFieldUuid }) => { + const customFieldsRegistry = useCustomFields(); + const customField = customFieldsRegistry.get(customFieldUuid); + + /* + { + components: {}, + icon: {}, + intlDescription: {}, + intlLabel: {}, + name: "Custom field name", + options: {}, + pluginId: "custom-field-id", + type: "string|number|etc" + } + */ + + if (customField?.icon) { + return customFieldIcon; + } + + return ; +}; +``` + +## Get all the custom fields + +With the getAll function of the useCustomFields hook, you will receive a dictionary containing all the custom fields with their respective information. + +```js +import { useCustomFields } from '@strapi/helper-plugin'; +import { Typography } from '@strapi/design-system'; + +const CustomFieldsList = () => { + const customFieldsRegistry = useCustomFields(); + const customFields = customFieldsRegistry.getAll(); + /* + { + plugin::my-plugin.my-custom-field: { + ... All the custom field information + }, + plugin::other-plugin.other-custom-field: { ... } + } + */ + const registeredCustomFields = Object.entries(customFields.getAll()); + + return ( + <> + {registeredCustomFields.map(([uid, customField]) => ( + {`${customField.name} uid: ${uid}`} + ))} + + ); +}; +``` From 47e0709cd21282117b02377fe4289c27170e3e40 Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Thu, 2 Mar 2023 10:58:06 +0100 Subject: [PATCH 2/6] add methods and typescript declaration to the docs --- .../useCustomFields.stories.mdx | 65 +++++++++++-------- 1 file changed, 37 insertions(+), 28 deletions(-) diff --git a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx index 3ae7ef83ce..93403c12d6 100644 --- a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx +++ b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx @@ -8,11 +8,9 @@ import { Meta, Canvas, Story } from '@storybook/addon-docs'; This hook provides you with a `get` function to retrieve information about a specific custom field registered in the app, as well as an `getAll` function to obtain information about all custom fields registered in the app. -## Get information about a specific plugin if I know its uid +## Usage -With the `get` function from the `useCustomFields` hook you can have all the information of a custom field. - -### Example +### Get information about a specific plugin if I know its uid ```js import { useCustomFields } from '@strapi/helper-plugin'; @@ -21,19 +19,6 @@ const CustomIcon = ({ customFieldUuid }) => { const customFieldsRegistry = useCustomFields(); const customField = customFieldsRegistry.get(customFieldUuid); - /* - { - components: {}, - icon: {}, - intlDescription: {}, - intlLabel: {}, - name: "Custom field name", - options: {}, - pluginId: "custom-field-id", - type: "string|number|etc" - } - */ - if (customField?.icon) { return customFieldIcon; } @@ -42,9 +27,7 @@ const CustomIcon = ({ customFieldUuid }) => { }; ``` -## Get all the custom fields - -With the getAll function of the useCustomFields hook, you will receive a dictionary containing all the custom fields with their respective information. +### Get all the custom fields ```js import { useCustomFields } from '@strapi/helper-plugin'; @@ -53,14 +36,6 @@ import { Typography } from '@strapi/design-system'; const CustomFieldsList = () => { const customFieldsRegistry = useCustomFields(); const customFields = customFieldsRegistry.getAll(); - /* - { - plugin::my-plugin.my-custom-field: { - ... All the custom field information - }, - plugin::other-plugin.other-custom-field: { ... } - } - */ const registeredCustomFields = Object.entries(customFields.getAll()); return ( @@ -72,3 +47,37 @@ const CustomFieldsList = () => { ); }; ``` + +## Methods + +### `get(customFieldUid: Uid): Object` + +With the method from `useCustomFields` hook you can have all the information of a custom field. + +### `getAll(): Object` + +With this method from `useCustomFields` hook, you will receive a dictionary containing all the custom fields with their respective information. + +## Typescript + +```ts +interface CustomField { + components: Object; + icon: React.ComponentType; + intlDescription: IntlObject; + intlLabel: IntlObject; + name: string; + options: Object; + pluginId: string; + type: string; +} + +type CustomFields = { + [uid: string]: CustomField; +}; + +type UseCustomFields = () => { + get: (uid: string) => CustomField | undefined; + getAll: () => CustomFields; +}; +``` From b2e5f90da7a01d6103ef7316f293d6b1bb66983a Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Thu, 2 Mar 2023 11:00:20 +0100 Subject: [PATCH 3/6] remove unnecessary storybook imports --- .../lib/src/hooks/useCustomFields/useCustomFields.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx index 93403c12d6..629ad3f5a7 100644 --- a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx +++ b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx @@ -1,6 +1,6 @@ -import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs'; From ac15879247fbeff1feaf9ced1a2d614935f2c07d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Ch=C3=A1vez?= Date: Thu, 2 Mar 2023 13:24:44 +0100 Subject: [PATCH 4/6] Update packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com> --- .../lib/src/hooks/useCustomFields/useCustomFields.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx index 629ad3f5a7..8957d064b2 100644 --- a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx +++ b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx @@ -50,7 +50,7 @@ const CustomFieldsList = () => { ## Methods -### `get(customFieldUid: Uid): Object` +### `get(customFieldUid: string): CustomField` With the method from `useCustomFields` hook you can have all the information of a custom field. From 24fa0fbf32ca464ad97a963cb088428cd580aa92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fernando=20Ch=C3=A1vez?= Date: Thu, 2 Mar 2023 13:25:14 +0100 Subject: [PATCH 5/6] Update packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx Co-authored-by: Josh <37798644+joshuaellis@users.noreply.github.com> --- .../lib/src/hooks/useCustomFields/useCustomFields.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx index 8957d064b2..08a3eedf9e 100644 --- a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx +++ b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx @@ -54,7 +54,7 @@ const CustomFieldsList = () => { With the method from `useCustomFields` hook you can have all the information of a custom field. -### `getAll(): Object` +### `getAll(): Record` With this method from `useCustomFields` hook, you will receive a dictionary containing all the custom fields with their respective information. From a6a9fc16489b1a880cf49436f6a82bb45fd12c32 Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Thu, 2 Mar 2023 13:59:10 +0100 Subject: [PATCH 6/6] improves to useCustomFields typescript --- .../useCustomFields/useCustomFields.stories.mdx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx index 08a3eedf9e..d4aa4fce14 100644 --- a/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx +++ b/packages/core/helper-plugin/lib/src/hooks/useCustomFields/useCustomFields.stories.mdx @@ -20,7 +20,8 @@ const CustomIcon = ({ customFieldUuid }) => { const customField = customFieldsRegistry.get(customFieldUuid); if (customField?.icon) { - return customFieldIcon; + const CustomFieldIcon = customField.icon; + return ; } return ; @@ -35,8 +36,7 @@ import { Typography } from '@strapi/design-system'; const CustomFieldsList = () => { const customFieldsRegistry = useCustomFields(); - const customFields = customFieldsRegistry.getAll(); - const registeredCustomFields = Object.entries(customFields.getAll()); + const registeredCustomFields = Object.entries(customFieldsRegistry.getAll()); return ( <> @@ -62,22 +62,18 @@ With this method from `useCustomFields` hook, you will receive a dictionary cont ```ts interface CustomField { - components: Object; + components: object; icon: React.ComponentType; intlDescription: IntlObject; intlLabel: IntlObject; name: string; - options: Object; + options: object; pluginId: string; type: string; } -type CustomFields = { - [uid: string]: CustomField; -}; - type UseCustomFields = () => { get: (uid: string) => CustomField | undefined; - getAll: () => CustomFields; + getAll: () => Record; }; ```