@strapi/design-system 1.2.7 → 1.3.0-beta.1

package/.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+storybook-static

package/.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  env: {
+    jest: true,
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  rules: {
+    'react/sort-prop-types': 1,
+    'default-case': 'error',
+    'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
+    'no-undef': 'error',
+  },
+  overrides: [
+    {
+      files: '*.mdx',
+      parser: 'eslint-mdx',
+      rules: {
+        'react/react-in-jsx-scope': 'off',
+      },
+    },
+  ],
+};

package/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: "all",
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};

package/.storybook/components/Theme.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { useDarkMode } from 'storybook-dark-mode';
+import { parse } from 'qs';
+import { ThemeProvider } from '../../src/ThemeProvider';
+import { Box } from '../../src/Box';
+import { lightTheme } from '../../src/themes/lightTheme';
+import { darkTheme } from '../../src/themes/darkTheme';
+
+const themeQueryURL = parse(document.location.search).theme;
+
+const Theme = ({ children }) => {
+  const isDarkAddon = useDarkMode();
+  const [isDark, setIsDark] = useState(themeQueryURL || isDarkAddon);
+
+  useEffect(() => {
+    if(!themeQueryURL && isDarkAddon !== isDark) {
+      setIsDark(isDarkAddon);
+    }
+  }, [isDarkAddon, isDark]);
+
+  return (
+    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+      <Box padding={2} background='neutral0'>{children}</Box>
+    </ThemeProvider>
+  )
+};
+
+export default Theme;

package/.storybook/main.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'storybook-dark-mode'],
+  webpackFinal: (config) => {
+    // Fix that allows to fix storybook issues with core-js
+    // https://github.com/storybookjs/storybook/issues/11255
+    config.resolve.alias['core-js'] = path.dirname(require.resolve('core-js'));
+    config.resolve.alias['@strapi/icons'] = path.dirname(require.resolve('../../strapi-icons/dist'));
+    return config;
+  },
+};

package/.storybook/manager.js

@@ -0,0 +1,12 @@
+import { addons } from '@storybook/addons';
+import { lightTheme } from '../src/themes/lightTheme';
+import { createCustomTheme } from './utils/createCustomTheme';
+
+addons.setConfig({
+  theme: createCustomTheme({
+    theme: lightTheme,
+    options: {
+      base: 'light'
+    },
+  })
+});

package/.storybook/preview.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { themes } from '@storybook/theming';
+import { createCustomTheme } from './utils/createCustomTheme';
+import Theme from './components/Theme';
+import { darkTheme } from '../src/themes/darkTheme';
+import { lightTheme } from '../src/themes/lightTheme';
+import { MemoryRouter } from 'react-router-dom';
+import { VisuallyHidden } from '../src/VisuallyHidden';
+import { Box } from '../src/Box';
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: ['Design System', ['Subatomic', 'Atoms', 'Molecules', 'Organisms', 'Layouts']],
+    },
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  darkMode: {
+    // Override the default dark theme
+    dark: createCustomTheme({ theme: darkTheme, asStorybookTheme: false }),
+    // Override the default light theme
+    light: createCustomTheme({ theme: lightTheme, asStorybookTheme: false }),
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <MemoryRouter>
+      <Theme>
+        <main>
+          <VisuallyHidden>
+            {/* Necessary in order to prevent axe core from providing errors on main / heading */}
+            <h1>Storybook story</h1>
+          </VisuallyHidden>
+          <Box height="100%" padding={2}>
+            <Story />
+          </Box>
+        </main>
+      </Theme>
+    </MemoryRouter>
+  ),
+];

package/.storybook/utils/createCustomTheme.js

@@ -0,0 +1,26 @@
+import { create } from '@storybook/theming/create';
+
+export const createCustomTheme = ({
+  theme,
+  options = {},
+  asStorybookTheme = true,
+}) => {
+  const themeValue = {
+    // UI
+    appBg: theme.colors.neutral100,
+    appContentBg: theme.colors.neutral0,
+    appBorderColor: theme.colors.neutral200,
+
+    // Text colors
+    textColor: theme.colors.neutral800,
+
+    // Toolbar default and active colors
+    barTextColor: theme.colors.neutral800,
+    barSelectedColor: theme.colors.primary600,
+    barBg: theme.colors.neutral0,
+
+    ...options,
+  };
+
+  return asStorybookTheme ? create(themeValue) : themeValue;
+}

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2012-2022 Scott Chacon and others
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/babel.config.js

@@ -0,0 +1,5 @@
+// Used by jest
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: [['@babel/plugin-transform-runtime']],
+};

package/createIndexFiles.js

@@ -0,0 +1,34 @@
+const fs = require('fs-extra');
+const path = require('path');
+const excludedFolders = require('../../tools/excludedFolders');
+
+const isV2Build = process.env.IS_V2 === 'true';
+let entryFolder = isV2Build ? path.resolve(__dirname, 'src', 'v2') : path.resolve(__dirname, 'src');
+const fileNames = fs.readdirSync(entryFolder);
+const entries = fileNames.filter((name) => !excludedFolders.includes(name));
+
+const createIndexFile = async (fileName) => {
+  const name = fileName.replace('.js', '');
+  const content = `
+  'use strict';
+  
+  if (process.env.NODE_ENV === "production") {
+    module.exports = require("./${name}.production.js");
+  } else {
+    module.exports = require("./${name}.development.js");
+  }
+  `;
+
+  try {
+    const outputPath = isV2Build
+      ? path.resolve(__dirname, 'dist', 'v2', `${name}.js`)
+      : path.resolve(__dirname, 'dist', `${name}.js`);
+    fs.writeFile(outputPath, content);
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+entries.forEach((entry) => {
+  createIndexFile(entry);
+});

package/global-setup.js

@@ -0,0 +1,4 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC';
+  process.env.LANG = 'en_US.UTF-8';
+};

package/jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  testRegex: ['src/.*\\.spec\\.(jsx|js)$', 'tests/.*\\.spec.js$'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './test-bundler.js'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+    '^@strapi/icons/(.*)': '<rootDir>/../strapi-icons/dist/$1',
+    '^@strapi/icons': '<rootDir>/../strapi-icons/dist/index.js',
+  },
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.[tj]sx?$': ['@swc/jest', { jsc: { parser: { jsx: true, dynamicImport: true } } }],
+    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
+  },
+  globalSetup: '<rootDir>/global-setup.js',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.2.7",
+  "version": "1.3.0-beta.1",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
@@ -51,7 +51,7 @@
     "webpack-cli": "^4.5.0"
   },
   "peerDependencies": {
-    "@strapi/icons": "^1.2.6",
+    "@strapi/icons": "^1.2.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
@@ -77,5 +77,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "bf52e690f743703a47f768ba83ebff55a3a12795"
+  "gitHead": "bfb372de4377a8b345c7801758c10d3d0bac509c"
 }

package/playwright.config.js

@@ -0,0 +1,39 @@
+const { devices } = require('@playwright/test');
+
+const config = {
+  testMatch: '**/__tests__/*.e2e.js',
+  // Forbid test.only on CI
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  use: {
+    baseURL: 'http://localhost:6006',
+    headless: true,
+    contextOptions: {
+      locale: 'en-US', // set the locale
+    },
+    actionTimeout: 0,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+  ],
+};
+
+module.exports = config;

package/src/Accordion/Accordion.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Typography } from '../Typography';
+import { AccordionContext } from './AccordionContext';
+import { useId } from '../helpers/useId';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+
+const getBorder = ({ theme, expanded, variant, disabled, error }) => {
+  if (error) {
+    return `1px solid ${theme.colors.danger600} !important`;
+  }
+
+  if (disabled) {
+    return `1px solid ${theme.colors.neutral150}`;
+  }
+
+  if (expanded) {
+    return `1px solid ${theme.colors.primary600}`;
+  }
+
+  if (variant === 'primary') {
+    return `1px solid ${theme.colors.neutral0}`;
+  }
+
+  return `1px solid ${theme.colors.neutral100}`;
+};
+
+export const AccordionTypography = styled(Typography)``;
+
+const AccordionWrapper = styled(Box)`
+  border: ${getBorder};
+
+  &:hover:not([aria-disabled='true']) {
+    border: 1px solid ${({ theme }) => theme.colors.primary600};
+
+    ${AccordionTypography} {
+      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary700)};
+    }
+
+    ${Typography} {
+      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary600)};
+    }
+
+    & > ${Flex} {
+      background: ${({ theme }) => theme.colors.primary100};
+    }
+
+    [data-strapi-dropdown='true'] {
+      background: ${({ theme }) => theme.colors.primary200};
+    }
+  }
+`;
+
+export const Accordion = ({
+  children,
+  expanded,
+  id,
+  size,
+  variant,
+  disabled,
+  error,
+  hasErrorMessage,
+  onToggle,
+  toggle,
+}) => {
+  const generatedId = useId('accordion', id);
+
+  return (
+    <AccordionContext.Provider value={{ expanded, onToggle, toggle, id: generatedId, size, variant, disabled }}>
+      <AccordionWrapper
+        data-strapi-expanded={expanded}
+        disabled={disabled}
+        aria-disabled={disabled}
+        expanded={expanded}
+        hasRadius
+        variant={variant}
+        error={error}
+      >
+        {children}
+      </AccordionWrapper>
+      {error && hasErrorMessage && (
+        <Box paddingTop={1}>
+          <Typography variant="pi" textColor="danger600">
+            {error}
+          </Typography>
+        </Box>
+      )}
+    </AccordionContext.Provider>
+  );
+};
+
+Accordion.defaultProps = {
+  disabled: false,
+  error: undefined,
+  expanded: false,
+  hasErrorMessage: true,
+  id: undefined,
+  toggle: false,
+  size: 'M',
+  variant: 'primary',
+  onToggle: undefined,
+  toggle: undefined,
+};
+
+Accordion.propTypes = {
+  children: PropTypes.node.isRequired,
+  /**
+   * If `true`, the accordion will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If defined, will add a border (borderColor: `danger600`) and display the error message below the component.
+   */
+  error: PropTypes.string,
+  /**
+   * If `true`, an expanded Accordion will be rendered.
+   */
+  expanded: PropTypes.bool,
+  /**
+   * If `false`, the error message won't show.
+   * If the `Accordion` is as child of an `AccordionGroup`, this prop will be set to `false` automatically.
+   * The error message of the `AccordionGroup` will be shown below the group instead of the Accordion itself.
+   */
+  hasErrorMessage: PropTypes.bool,
+  /**
+   * The id of the component.
+   */
+  id: PropTypes.string,
+  /**
+   * The callback invoked after a click event on the `AccordionToggle`.
+   */
+  onToggle: PropTypes.func,
+  /**
+   * Size of the Accordion.
+   */
+  size: PropTypes.oneOf(['S', 'M']),
+  /**
+   * DEPRECATED: The callback invoked after a click event on the `AccordionToggle`.
+   */
+  toggle: PropTypes.func,
+  /**
+   * Color variant for `Accordion`. The "secondary" variant reverses the background colors.
+   * This is useful when you want to display a list and alternate the colors of the accordions.
+   */
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+};