diff --git a/examples/admin-development/.babelrc.json b/examples/admin-development/.babelrc.json new file mode 100644 index 0000000000..f74d02d9a9 --- /dev/null +++ b/examples/admin-development/.babelrc.json @@ -0,0 +1,61 @@ +{ + "sourceType": "unambiguous", + "presets": [ + [ + "@babel/preset-env", + { + "shippedProposals": true, + "loose": true + } + ], + "@babel/preset-typescript" + ], + "plugins": [ + "@babel/plugin-transform-shorthand-properties", + "@babel/plugin-transform-block-scoping", + [ + "@babel/plugin-proposal-decorators", + { + "legacy": true + } + ], + [ + "@babel/plugin-proposal-class-properties", + { + "loose": true + } + ], + [ + "@babel/plugin-proposal-private-methods", + { + "loose": true + } + ], + "@babel/plugin-proposal-export-default-from", + "@babel/plugin-syntax-dynamic-import", + [ + "@babel/plugin-proposal-object-rest-spread", + { + "loose": true, + "useBuiltIns": true + } + ], + "@babel/plugin-transform-classes", + "@babel/plugin-transform-arrow-functions", + "@babel/plugin-transform-parameters", + "@babel/plugin-transform-destructuring", + "@babel/plugin-transform-spread", + "@babel/plugin-transform-for-of", + "babel-plugin-macros", + "@babel/plugin-proposal-optional-chaining", + "@babel/plugin-proposal-nullish-coalescing-operator", + [ + "babel-plugin-polyfill-corejs3", + { + "method": "usage-global", + "absoluteImports": "core-js", + "version": "3.21.1" + } + ] + ] +} \ No newline at end of file diff --git a/examples/admin-development/.storybook/main.js b/examples/admin-development/.storybook/main.js new file mode 100644 index 0000000000..dbb668475c --- /dev/null +++ b/examples/admin-development/.storybook/main.js @@ -0,0 +1,15 @@ +module.exports = { + stories: [ + '../*.stories.mdx', + '../../../packages/core/**/admin/src/**/*.stories.mdx', + '../../../packages/core/**/admin/src/**/*.stories.@(js|jsx|ts|tsx)', + '../../../packages/plugins/**/admin/src/**/*.stories.mdx', + '../../../packages/plugins/**/admin/src/**/*.stories.@(js|jsx|ts|tsx)', + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + ], + framework: '@storybook/react', +}; diff --git a/examples/admin-development/.storybook/preview.js b/examples/admin-development/.storybook/preview.js new file mode 100644 index 0000000000..30ed0621df --- /dev/null +++ b/examples/admin-development/.storybook/preview.js @@ -0,0 +1,27 @@ +import { ThemeProvider, lightTheme } 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 => ( + + + +
+ +
+
+
+
+ ), +]; diff --git a/examples/admin-development/Introduction.stories.mdx b/examples/admin-development/Introduction.stories.mdx new file mode 100644 index 0000000000..e46c3fed50 --- /dev/null +++ b/examples/admin-development/Introduction.stories.mdx @@ -0,0 +1,9 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Welcome to the documentation + +Use this app to develop local components in plugins. + +To do so just create a story in your plugins `./admin/src` folder diff --git a/examples/admin-development/package.json b/examples/admin-development/package.json new file mode 100644 index 0000000000..bd65ae6185 --- /dev/null +++ b/examples/admin-development/package.json @@ -0,0 +1,42 @@ +{ + "name": "admin-development", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "devDependencies": { + "@babel/core": "^7.16.7", + "@babel/plugin-proposal-class-properties": "7.16.7", + "@babel/plugin-proposal-decorators": "7.16.7", + "@babel/plugin-proposal-export-default-from": "7.16.7", + "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7", + "@babel/plugin-proposal-object-rest-spread": "7.16.7", + "@babel/plugin-proposal-optional-chaining": "7.16.7", + "@babel/plugin-proposal-private-methods": "7.16.7", + "@babel/plugin-syntax-dynamic-import": "7.8.3", + "@babel/plugin-transform-arrow-functions": "7.16.7", + "@babel/plugin-transform-block-scoping": "7.16.7", + "@babel/plugin-transform-classes": "7.16.7", + "@babel/plugin-transform-destructuring": "7.17.7", + "@babel/plugin-transform-for-of": "7.16.7", + "@babel/plugin-transform-parameters": "7.16.7", + "@babel/plugin-transform-shorthand-properties": "7.16.7", + "@babel/plugin-transform-spread": "7.16.7", + "@babel/preset-env": "7.16.11", + "@babel/preset-typescript": "7.16.7", + "@storybook/addon-actions": "6.4.10", + "@storybook/addon-essentials": "6.4.10", + "@storybook/addon-interactions": "6.4.10", + "@storybook/addon-links": "6.4.10", + "@storybook/react": "^6.3.7", + "@storybook/testing-library": "^0.0.9", + "babel-loader": "^8.2.4", + "babel-plugin-macros": "3.1.0", + "babel-plugin-polyfill-corejs3": "0.5.2", + "core-js": "3.21.1" + }, + "dependencies": {}, + "scripts": { + "storybook": "start-storybook -p 6007", + "build-storybook": "build-storybook" + } +} diff --git a/packages/core/admin/admin/src/content-manager/components/SelectMany/index.js b/packages/core/admin/admin/src/content-manager/components/SelectMany/index.js index 283b8fd7b8..09e2b42dd6 100644 --- a/packages/core/admin/admin/src/content-manager/components/SelectMany/index.js +++ b/packages/core/admin/admin/src/content-manager/components/SelectMany/index.js @@ -2,7 +2,8 @@ import React, { memo } from 'react'; import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import isEmpty from 'lodash/isEmpty'; -import Select, { createFilter } from 'react-select'; +import { createFilter } from 'react-select'; +import { ReactSelect as Select } from '@strapi/helper-plugin'; import { Box } from '@strapi/design-system/Box'; import { Stack } from '@strapi/design-system/Stack'; import { Typography } from '@strapi/design-system/Typography'; diff --git a/packages/core/admin/admin/src/content-manager/components/SelectWrapper/index.js b/packages/core/admin/admin/src/content-manager/components/SelectWrapper/index.js index a251173f8a..e0229d09be 100644 --- a/packages/core/admin/admin/src/content-manager/components/SelectWrapper/index.js +++ b/packages/core/admin/admin/src/content-manager/components/SelectWrapper/index.js @@ -7,7 +7,6 @@ import { import { useLocation } from 'react-router-dom'; import { Link } from '@strapi/design-system/Link'; import { Stack } from '@strapi/design-system/Stack'; -import { useTheme } from 'styled-components'; import findIndex from 'lodash/findIndex'; import get from 'lodash/get'; import isArray from 'lodash/isArray'; @@ -21,12 +20,8 @@ import { getTrad } from '../../utils'; import Label from './Label'; import SelectOne from '../SelectOne'; import SelectMany from '../SelectMany'; -import ClearIndicator from './ClearIndicator'; -import DropdownIndicator from './DropdownIndicator'; -import IndicatorSeparator from './IndicatorSeparator'; import Option from './Option'; import { connect, select } from './utils'; -import getSelectStyles from './utils/getSelectStyles'; const initialPaginationState = { contains: '', @@ -76,7 +71,6 @@ function SelectWrapper({ onRemoveRelation, } = useCMEditViewDataManager(); const { pathname } = useLocation(); - const theme = useTheme(); const value = get(modifiedData, name, null); const [state, setState] = useState(initialPaginationState); @@ -277,8 +271,6 @@ function SelectWrapper({ return ; } - const styles = getSelectStyles(theme); - return (