Merge branch 'main' into fix/sanitization-throw-instead-of-filter

packages/core/helper-plugin/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['custom/front/typescript'],
+  extends: ['custom/front/typescript', 'plugin:storybook/recommended'],
   parserOptions: {
     project: ['./tsconfig.eslint.json'],
   },

packages/core/helper-plugin/.storybook/main.js

@@ -1,10 +0,0 @@
-module.exports = {
-  stories: ['../*.stories.mdx', '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  core: {
-    builder: 'webpack5',
-  },
-  typescript: {
-    check: false,
-  },
-};

packages/core/helper-plugin/.storybook/main.ts

@@ -0,0 +1,47 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { dirname, join } from 'path';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../*.stories.mdx', '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+  ],
+
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+
+  typescript: {
+    check: false,
+  },
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
+
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    return mergeConfig(config, {
+      /**
+       * This is required to support the import from "@strapi/design-system/v2"
+       */
+      plugins: [nodeResolve()],
+    });
+  },
+};
+
+function getAbsolutePath<T extends string>(value: T): T {
+  return dirname(require.resolve(join(value, 'package.json'))) as T;
+}
+
+export default config;

packages/core/helper-plugin/.storybook/preview.js

@@ -1,27 +0,0 @@
-import { DesignSystemProvider } from '@strapi/design-system';
-import { IntlProvider } from 'react-intl';
-import { MemoryRouter } from 'react-router-dom';
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-export const decorators = [
-  (Story) => (
-    <MemoryRouter>
-      <DesignSystemProvider locale="en">
-        <IntlProvider messages={{}} textComponent="span" locale="en">
-          <main>
-            <Story />
-          </main>
-        </IntlProvider>
-      </DesignSystemProvider>
-    </MemoryRouter>
-  ),
-];

packages/core/helper-plugin/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { DesignSystemProvider } from '@strapi/design-system';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <DesignSystemProvider locale="en">
+          <IntlProvider messages={{}} textComponent="span" locale="en">
+            <main>
+              <Story />
+            </main>
+          </IntlProvider>
+        </DesignSystemProvider>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default preview;

packages/core/helper-plugin/package.json

@@ -34,9 +34,9 @@
   "scripts": {
     "prebuild": "rimraf build",
     "build": "cross-env NODE_ENV=production webpack-cli",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "prepublishOnly": "npm run build",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "test:front": "run -T jest --config ./jest.config.front.js",
     "test:front:cov": "run -T jest --config ./jest.config.front.js --coverage",
     "test:front:watch": "run -T jest --config ./jest.config.front.js --watchAll",
@@ -57,12 +57,13 @@
     "react-select": "5.7.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.5.10",
+    "@rollup/plugin-node-resolve": "15.1.0",
-    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addon-actions": "7.2.2",
-    "@storybook/addon-links": "6.5.10",
+    "@storybook/addon-essentials": "7.2.2",
-    "@storybook/builder-webpack5": "6.5.15",
+    "@storybook/addon-links": "7.2.2",
-    "@storybook/manager-webpack5": "6.5.15",
+    "@storybook/addon-mdx-gfm": "7.2.2",
-    "@storybook/react": "^6.5.16",
+    "@storybook/builder-vite": "7.2.2",
+    "@storybook/react-vite": "7.2.2",
     "@strapi/design-system": "1.9.0",
     "@strapi/icons": "1.9.0",
     "@testing-library/react": "14.0.0",
@@ -75,13 +76,16 @@
     "cross-env": "^7.0.3",
     "esbuild-loader": "^2.21.0",
     "eslint-config-custom": "4.12.1",
+    "eslint-plugin-storybook": "0.6.13",
     "msw": "1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "5.3.4",
     "rimraf": "3.0.2",
+    "storybook": "7.2.2",
     "styled-components": "5.3.3",
     "typescript": "5.1.3",
+    "vite": "4.4.9",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.0"
   },

packages/core/helper-plugin/src/components/AnErrorOccurred.stories.mdx

@@ -1,7 +1,7 @@
-<!--- AnErrorOccurred.stories.mdx --->
+{/* - AnErrorOccurred.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row, Button } from '@strapi/design-system';
+import { Main, Button } from '@strapi/design-system';
 import { AnErrorOccurred } from './AnErrorOccurred';
 
 <Meta title="components/AnErrorOccurred" />

packages/core/helper-plugin/src/components/CheckPagePermissions.stories.mdx

@@ -1,4 +1,4 @@
-<!--- CheckPagePermissions.stories.mdx --->
+{/*- CheckPagePermissions.stories.mdx -*/}
 
 import { ArgsTable, Meta } from '@storybook/addon-docs';
 import { CheckPagePermissions } from './CheckPagePermissions';

packages/core/helper-plugin/src/components/CheckPermissions.stories.mdx

@@ -1,4 +1,4 @@
-<!--- CheckPermissions.stories.mdx --->
+{/*- CheckPermissions.stories.mdx -*/}
 
 import { ArgsTable, Meta } from '@storybook/addon-docs';
 import { CheckPermissions } from './CheckPermissions';

packages/core/helper-plugin/src/components/ConfirmDialog.stories.mdx

@@ -1,4 +1,4 @@
-<!--- ConfirmDialog.stories.mdx --->
+{/*- ConfirmDialog.stories.mdx -*/}
 
 import { useState } from 'react';
 import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs';

packages/core/helper-plugin/src/components/ContentBox.stories.mdx

@@ -1,4 +1,4 @@
-<!--- ContentBox.stories.mdx --->
+{/*- ContentBox.stories.mdx -*/}
 
 import { useState } from 'react';
 import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs';

packages/core/helper-plugin/src/components/DateTimePicker.stories.mdx

@@ -1,4 +1,4 @@
-<!--- DateTimePicker.stories.mdx --->
+{/*- DateTimePicker.stories.mdx -*/}
 
 import { useState } from 'react';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

packages/core/helper-plugin/src/components/DynamicTable.stories.mdx

@@ -1,4 +1,4 @@
-<!--- DynamicTable.stories.mdx --->
+{/*- DynamicTable.stories.mdx -*/}
 
 import { useEffect } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';

packages/core/helper-plugin/src/components/EmptyBodyTable.stories.mdx

@@ -1,16 +1,7 @@
-<!--- EmptyBodyTable.stories.mdx --->
+{/* - EmptyBodyTable.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import {
+import { BaseCheckbox, Box, Main, Table, Th, Thead, VisuallyHidden } from '@strapi/design-system';
-  BaseCheckbox,
-  Box,
-  Main,
-  Table,
-  TableLabel,
-  Th,
-  Thead,
-  VisuallyHidden,
-} from '@strapi/design-system';
 import { EmptyBodyTable } from './EmptyBodyTable';
 
 <Meta title="components/EmptyBodyTable" />

packages/core/helper-plugin/src/components/EmptyStateLayout.stories.mdx

@@ -1,7 +1,7 @@
-<!--- EmptyStateLayout.stories.mdx --->
+{/* - EmptyStateLayout.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row } from '@strapi/design-system';
+import { Main } from '@strapi/design-system';
 import { EmptyStateLayout } from './EmptyStateLayout';
 
 <Meta title="components/EmptyStateLayout" />

packages/core/helper-plugin/src/components/FilterListURLQuery.stories.mdx

@@ -1,4 +1,4 @@
-<!--- FilterListURLQuery.stories.mdx --->
+{/*- FilterListURLQuery.stories.mdx -*/}
 
 import { useEffect } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';

packages/core/helper-plugin/src/components/FilterPopoverURLQuery.stories.mdx

@@ -1,4 +1,4 @@
-<!--- FilterPopoverURLQuery.stories.mdx --->
+{/*- FilterPopoverURLQuery.stories.mdx -*/}
 
 import { useEffect, useState, useRef } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';

packages/core/helper-plugin/src/components/Form.stories.mdx

@@ -1,7 +1,7 @@
-<!--- EmptyStateLayout.stories.mdx --->
+{/* - Form.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row } from '@strapi/design-system';
+import { Main } from '@strapi/design-system';
 import { TextInput } from '@strapi/design-system';
 import { Button } from '@strapi/design-system';
 import { Box } from '@strapi/design-system';
@@ -92,4 +92,4 @@ Make sure to run this story in detached mode. The embeded iframe breaks the focu
 
 ### Props
 
-<ArgsTable of={EmptyStateLayout} />
+<ArgsTable of={Form} />

packages/core/helper-plugin/src/components/GenericInput.stories.mdx

@@ -1,4 +1,4 @@
-<!--- GenericInput.stories.mdx --->
+{/*- GenericInput.stories.mdx -*/}
 
 import { useState } from 'react';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

packages/core/helper-plugin/src/components/Link.stories.mdx

@@ -1,4 +1,4 @@
-<!--- Link.stories.mdx --->
+{/*- Link.stories.mdx -*/}
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { Box } from '@strapi/design-system';

packages/core/helper-plugin/src/components/LinkButton.stories.mdx

@@ -1,4 +1,4 @@
-<!--- LinkButton.stories.mdx --->
+{/*- LinkButton.stories.mdx -*/}
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { Box } from '@strapi/design-system';

packages/core/helper-plugin/src/components/LoadingIndicatorPage.stories.mdx

@@ -1,4 +1,4 @@
-<!--- LoadingIndicatorPage.stories.mdx --->
+{/*- LoadingIndicatorPage.stories.mdx -*/}
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { LoadingIndicatorPage } from './LoadingIndicatorPage';

packages/core/helper-plugin/src/components/NoContent.stories.mdx

@@ -1,7 +1,7 @@
-<!--- EmptyStateLayout.stories.mdx --->
+{/* - EmptyStateLayout.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row, Button } from '@strapi/design-system';
+import { Main, Button } from '@strapi/design-system';
 import { NoContent } from './NoContent';
 
 <Meta title="components/NoContent" />

packages/core/helper-plugin/src/components/NoMedia.stories.mdx

@@ -1,7 +1,7 @@
-<!--- EmptyStateLayout.stories.mdx --->
+{/* - EmptyStateLayout.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row, Button } from '@strapi/design-system';
+import { Main, Button } from '@strapi/design-system';
 import { NoMedia } from './NoMedia';
 
 <Meta title="components/NoMedia" />

packages/core/helper-plugin/src/components/NoPermissions.stories.mdx

@@ -1,7 +1,7 @@
-<!--- EmptyStateLayout.stories.mdx --->
+{/* - EmptyStateLayout.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row } from '@strapi/design-system';
+import { Main } from '@strapi/design-system';
 import { NoPermissions } from './NoPermissions';
 
 <Meta title="components/NoPermissions" />

packages/core/helper-plugin/src/components/PageSizeURLQuery.stories.mdx

@@ -1,4 +1,4 @@
-<!--- PageSizeURLQuery.stories.mdx --->
+{/*- PageSizeURLQuery.stories.mdx -*/}
 
 import { useEffect } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';

packages/core/helper-plugin/src/components/PaginationURLQuery.stories.mdx

@@ -1,4 +1,4 @@
-<!--- PaginationURLQuery.stories.mdx --->
+{/*- PaginationURLQuery.stories.mdx -*/}
 
 import { useEffect } from 'react';
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';

packages/core/helper-plugin/src/components/RelativeTime.stories.mdx

@@ -1,7 +1,7 @@
-<!--- RelativeTime.stories.mdx --->
+{/* - RelativeTime.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row, Button } from '@strapi/design-system';
+import { Main, Button } from '@strapi/design-system';
 import { RelativeTime } from './RelativeTime';
 
 <Meta title="components/RelativeTime" />

packages/core/helper-plugin/src/components/SearchURLQuery.stories.mdx

@@ -1,4 +1,4 @@
-<!--- Search.stories.mdx --->
+{/*- Search.stories.mdx -*/}
 
 import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs';
 import { Flex } from '@strapi/design-system';

packages/core/helper-plugin/src/components/Status.stories.mdx

@@ -1,4 +1,4 @@
-<!--- Status.stories.mdx --->
+{/*- Status.stories.mdx -*/}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 import { Flex } from '@strapi/design-system';

packages/core/helper-plugin/src/components/Table.stories.mdx

@@ -1,4 +1,4 @@
-<!--- Table.stories.mdx --->
+{/*- Table.stories.mdx -*/}
 
 import { Table, useTableContext } from './Table';
 import { Tbody, Td, Th, Tr, Typography, BaseCheckbox, Button, Flex } from '@strapi/design-system';

packages/core/helper-plugin/src/content-manager/hooks/useCMEditViewDataManager.stories.mdx

@@ -1,7 +1,7 @@
-<!--- useCMEditViewDataManager.stories.mdx --->
+{/* - useCMEditViewDataManager.stories.mdx - */}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
-import { Main, Row, Button } from '@strapi/design-system';
+import { Main, Button } from '@strapi/design-system';
 
 <Meta title="content-manager/hooks/useCMEditViewDataManager" />
 

packages/core/helper-plugin/src/content-manager/utils/formatContentTypeData.stories.mdx

@@ -1,4 +1,4 @@
-<!--- formatContentTypeData.stories.mdx --->
+{/*- formatContentTypeData.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/features/CustomFields.stories.mdx

@@ -1,4 +1,4 @@
-<!--- useCustomFields.stories.mdx --->
+{/*- useCustomFields.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/features/GuidedTour.stories.mdx

@@ -1,4 +1,4 @@
-<!--- GuidedTourProvider.stories.mdx --->
+{/*- GuidedTourProvider.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/features/Notifications.stories.mdx

@@ -1,4 +1,4 @@
-<!--- useNotification.stories.mdx --->
+{/*- useNotification.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/hooks/useFieldHint.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable check-file/filename-naming-convention */ // this is disabled because the file name is correct however, we do use JSX in this file.
 import React from 'react';
 
 import { useIntl } from 'react-intl';

packages/core/helper-plugin/src/hooks/useFocusWhenNavigate.stories.mdx

@@ -1,4 +1,4 @@
-<!--- useFocusWhenNavigate.stories.mdx --->
+{/*- useFocusWhenNavigate.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/hooks/useLockScroll.stories.mdx

@@ -1,4 +1,4 @@
-<!--- useLockScroll.stories.mdx --->
+{/*- useLockScroll.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/hooks/useSelectionState.stories.mdx

@@ -1,4 +1,4 @@
-<!--- useLockScroll.stories.mdx --->
+{/*- useLockScroll.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/icons/RemoveRoundedButton.stories.mdx

@@ -1,4 +1,4 @@
-<!--- RemoveRoundedButton.stories.mdx --->
+{/*- RemoveRoundedButton.stories.mdx -*/}
 
 import { Meta, Canvas, Story } from '@storybook/addon-docs';
 import { RemoveRoundedButton } from './RemoveRoundedButton';

packages/core/helper-plugin/src/icons/SortIcon.stories.mdx

@@ -1,4 +1,4 @@
-<!--- SortIcon.stories.mdx --->
+{/*- SortIcon.stories.mdx -*/}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 import { Typography } from '@strapi/design-system';

packages/core/helper-plugin/src/templates/PageTemplate.stories.mdx

@@ -1,4 +1,4 @@
-<!--- EmptyStateLayout.stories.mdx --->
+{/*- EmptyStateLayout.stories.mdx -*/}
 
 import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
 import {

packages/core/helper-plugin/src/utils/auth.stories.mdx

@@ -1,4 +1,4 @@
-<!--- auth.stories.mdx --->
+{/*- auth.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/awaitToJS.stories.mdx

@@ -1,4 +1,4 @@
-<!--- await-to-js.stories.mdx --->
+{/*- await-to-js.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/difference.stories.mdx

@@ -1,4 +1,4 @@
-<!--- difference.stories.mdx --->
+{/*- difference.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/getFileExtension.stories.mdx

@@ -1,4 +1,4 @@
-<!--- getFileExtension.stories.mdx --->
+{/*- getFileExtension.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/hasPermissions.stories.mdx

@@ -1,4 +1,4 @@
-<!--- hasPermissions.stories.mdx --->
+{/*- hasPermissions.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/prefixFileUrlWithBackendUrl.stories.mdx

@@ -1,4 +1,4 @@
-<!--- prefixFileUrlWithBackendUrl.stories.mdx --->
+{/*- prefixFileUrlWithBackendUrl.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/pxToRem.stories.mdx

@@ -1,4 +1,4 @@
-<!--- pxToRem.stories.mdx --->
+{/*- pxToRem.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/setHexOpacity.stories.mdx

@@ -1,4 +1,4 @@
-<!--- setHexOpacity.stories.mdx --->
+{/*- setHexOpacity.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';
 

packages/core/helper-plugin/src/utils/translatedErrors.stories.mdx

@@ -1,4 +1,4 @@
-<!--- translatedErrors.stories.mdx --->
+{/*- translatedErrors.stories.mdx -*/}
 
 import { Meta } from '@storybook/addon-docs';