docs: remove website & enhance storybook (#1697)

Co-authored-by: Jamie Howard <48524071+jhoward1994@users.noreply.github.com>
Co-authored-by: Madhuri Sandbhor <madhuri.sandbhor@strapi.io>

.changeset/calm-pets-live.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+feat: typography now extends Box

CONTRIBUTING.md

@@ -13,7 +13,7 @@ making a pull request that may not align with the project roadmap.
 
 **Before submitting your pull request** make sure the following requirements are fulfilled:
 
-- Fork the repository and create your new branch from `main`.
+- Fork the repository and create your new branch from `develop`.
 - Run `yarn` in the root of the repository.
 - If you've fixed a bug or added code that should be tested, please make sure to add tests
 - Ensure the following test suites are passing:
@@ -46,18 +46,6 @@ yarn develop
 
 Storybook will be running on `localhost:6006` for you to test your changes to components or their documentation.
 
-### 4. Start the website for documentation changes (optional)
-
-Start the DS website to test your changes on the design-system website, not all changes would require this step.
-
-```bash
-cd website
-yarn
-yarn dev
-```
-
-**Awesome! You are now able to contribute to Strapi Design System.**
-
 ---
 
 ## Git Conventions
@@ -109,7 +97,7 @@ Use `kebab-case` to name your branches: `prefix/branch-name-something`
 
 - `fix`: When fixing an issue: `fix/some-bug`
 - `chore`: When doing some cleanup, working on tooling, some refactoring: `chore/update-dependencies`
-- `doc`: When writing documentation: `doc/documentation-subject`
+- `docs`: When writing documentation: `doc/documentation-subject`
 - `feature`: When you are working on a feature. Start by creating a `feature/name-of-feature` branch & create tasks branches with the feature name as prefix:
   - `feature/i18n` is the main feature branch
   - `i18n/init-plugin` is a task for this feature
@@ -118,7 +106,7 @@ The most important thing to remember is to make your intention explicit. Try to
 
 ## Pull Requests
 
-New pull requests should be done either against `main` or against the related feature branch (see [Git Conventions](#branches)). You can reference the Jira task ID in the Pull Request description.
+New pull requests should be done either against `develop` or against the related feature branch (see [Git Conventions](#branches)). You can reference the Jira task ID in the Pull Request description.
 
 If your pull request is against `main` don't forget to add it to the relevant milestone. If you are not sure which one to select, use the one for the next release.
 

README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 <p align="center">
-<a style='margin-right:10px' href="https://design-system.strapi.io/">Documentation</a>|<a style='margin-left:10px' href="https://design-system-git-main-strapijs.vercel.app/">Try components</a></p>
+<a href="https://v2.design-system.strapi.io/">Documentation</a>
 <br />
 
 [![Version](https://img.shields.io/npm/v/@strapi/design-system?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)

docs/.eslintignore

@@ -1,2 +1 @@
-**/node_modules/**
 storybook-static

docs/.eslintrc

@@ -1,17 +1,6 @@
 {
   "root": true,
   "extends": ["@strapi/eslint-config/front/typescript"],
-  "parserOptions": {
-    "project": ["./tsconfig.eslint.json"]
-  },
-  "settings": {
-    "import/resolver": {
-      "typescript": {
-        "project": "./tsconfig.eslint.json"
-      }
-    }
-  },
-  "ignorePatterns": ["**/*.mdx/*.{ts,tsx}"],
   "overrides": [
     {
       "files": ["*.stories.tsx"],
@@ -23,21 +12,19 @@
           "error",
           {
             "selector": "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
-            "message": "Default React import not allowed"
-          }
-        ]
-      }
+            "message": "Default React import not allowed",
+          },
+        ],
+      },
     },
     {
       "files": ["*.mdx"],
       "extends": ["plugin:mdx/recommended"],
       "rules": {
+        "react/jsx-no-undef": "off",
         "import/namespace": "off",
-        "@typescript-eslint/no-unused-vars": "error"
-      }
-    }
+        "@typescript-eslint/no-unused-vars": "error",
+      },
+    },
   ],
-  "rules": {
-    "import/no-unresolved": "off"
-  }
 }

docs/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "proseWrap": "always"
+}

docs/.storybook/main.ts

@@ -21,18 +21,39 @@ const config: StorybookConfig = {
     if (config.mode !== 'production') {
       config.optimizeDeps = {
         ...config.optimizeDeps,
-        exclude: ['@strapi/ui-primtivies', '@strapi/design-system', '@strapi/icons'],
+        include: [
+          ...(config.optimizeDeps?.include ?? []),
+          'react',
+          `react/jsx-runtime`,
+          'react-dom/client',
+          'styled-components',
+        ],
+        exclude: [
+          ...(config.optimizeDeps?.exclude ?? []),
+          '@strapi/ui-primitives',
+          '@strapi/design-system',
+          '@strapi/icons',
+        ],
       };
 
       if (!config.resolve) {
         config.resolve = {};
       }
 
+      config.resolve.dedupe = [
+        ...(config.resolve?.dedupe ?? []),
+        'react',
+        'react-dom',
+        'react-router-dom',
+        'styled-components',
+      ];
+
       config.resolve.alias = {
         ...config.resolve?.alias,
         '@strapi/ui-primitives': resolve(__dirname, '..', '..', 'packages', 'primitives', 'src'),
         '@strapi/design-system': resolve(__dirname, '..', '..', 'packages', 'strapi-design-system', 'src'),
         '@strapi/icons': resolve(__dirname, '..', '..', 'packages', 'strapi-icons', 'src'),
+        'styled-components': resolve(__dirname, '..', '..', 'node_modules', 'styled-components'),
       };
     }
 

docs/.storybook/preview-head.html

@@ -1,12 +1,26 @@
 <style>
   body {
+    margin: 0;
     padding: 0 !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: 100vh;
+    overflow: auto;
   }
 
-  #storybook-root:not([hidden='true']) {
-    display: flex;
-    justify-content: stretch;
-    align-items: stretch;
+  #storybook-root {
     height: 100%;
   }
+
+  .sbdocs.sbdocs-content > .sb-unstyled {
+    height: 100%;
+  }
+
+  .sbdocs.sbdocs-wrapper {
+    padding: 0;
+  }
+
+  .sbdocs.sbdocs-content {
+    max-width: unset;
+  }
 </style>

docs/.storybook/preview.tsx

@@ -3,32 +3,136 @@ import { Preview } from '@storybook/react';
 import { useDarkMode } from 'storybook-dark-mode';
 import { parse } from 'qs';
 
-import { VisuallyHidden, DesignSystemProvider, Box, darkTheme, lightTheme } from '@strapi/design-system';
+import { DesignSystemProvider, Box, darkTheme, lightTheme, type BoxProps } from '@strapi/design-system';
 
-import { createCustomTheme } from './utils/createCustomTheme';
+import { DocsContainer, Unstyled } from '@storybook/blocks';
+import styled, { DefaultTheme } from 'styled-components';
+import { MARKDOWN_OVERRIDES, Markdown } from '../components/Markdown';
+
+const createCustomTheme = (theme: DefaultTheme, base: 'light' | 'dark' = 'light') => {
+  return {
+    base,
+    brandTitle: 'Strapi Design System',
+    brandUrl: 'https://strapi.io/',
+    brandImage: base === 'light' ? '/site/logo.svg' : '/site/logo_dark.svg',
+
+    //
+    colorPrimary: theme.colors.primary600,
+    colorSecondary: theme.colors.secondary600,
+
+    // UI
+    appBg: theme.colors.neutral100,
+    appContentBg: theme.colors.neutral0,
+    appPreviewBg: theme.colors.neutral0,
+    appBorderColor: theme.colors.neutral200,
+
+    // Text colors
+    textColor: theme.colors.neutral800,
+    textInverseColor: theme.colors.neutral800,
+
+    // Toolbar default and active colors
+    barTextColor: theme.colors.neutral800,
+    barSelectedColor: theme.colors.primary600,
+    barHoverColor: theme.colors.primary600,
+    barBg: theme.colors.neutral0,
+
+    // Form colors
+    inputBg: theme.colors.neutral0,
+    inputBorder: theme.colors.neutral800,
+    inputTextColor: theme.colors.neutral800,
+  };
+};
+
+const themeQueryURL = parse(document.location.search).theme;
+
+const Theme = ({ children, ...props }: BoxProps) => {
+  const isDarkAddon = useDarkMode();
+  const [isDark, setIsDark] = React.useState(themeQueryURL || isDarkAddon);
+
+  React.useEffect(() => {
+    if (!themeQueryURL && isDarkAddon !== isDark) {
+      setIsDark(isDarkAddon);
+    }
+  }, [isDarkAddon, isDark]);
+
+  return (
+    <DesignSystemProvider locale="en" theme={isDark ? darkTheme : lightTheme}>
+      <Main as="main" background="neutral0" padding="4rem" paddingBottom="8rem" height="100%">
+        <Box maxWidth="84rem" margin="auto" height="100%" {...props}>
+          {children}
+        </Box>
+      </Main>
+    </DesignSystemProvider>
+  );
+};
+
+const Main = styled(Box)`
+  .sbdocs-preview {
+    border: solid 1px ${(props) => props.theme.colors.neutral200};
+
+    .docs-story > div {
+      background: ${(props) => props.theme.colors.neutral0};
+    }
+  }
+
+  .docblock-argstable {
+    border: solid 1px ${(props) => props.theme.colors.neutral200};
+
+    table > tbody {
+      border: solid 1px ${(props) => props.theme.colors.neutral200} !important;
+    }
+  }
+
+  .docblock-argstable tr th {
+    color: ${(props) => props.theme.colors.neutral800};
+  }
+
+  .docblock-argstable tr td {
+    color: ${(props) => props.theme.colors.neutral800} !important;
+    background-color: ${(props) => props.theme.colors.neutral0} !important;
+    border-inline: unset !important;
+    border-block: unset !important;
+    border-top: solid 1px ${(props) => props.theme.colors.neutral200} !important;
+  }
+
+  .docblock-code-toggle {
+    cursor: pointer;
+    border: 1px solid ${(props) => props.theme.colors.neutral200};
+    background: ${(props) => props.theme.colors.neutral150};
+    color: ${(props) => props.theme.colors.neutral800};
+  }
+
+  .docblock-code-toggle:hover {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+`;
 
 const preview: Preview = {
   decorators: [
     (Story) => (
       <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>
+        <Story />
       </Theme>
     ),
   ],
   parameters: {
+    docs: {
+      container: ({ children, ...props }: { children: any; context: any }) => (
+        <DocsContainer {...props}>
+          <Unstyled>
+            <Theme>{children}</Theme>
+          </Unstyled>
+        </DocsContainer>
+      ),
+      components: MARKDOWN_OVERRIDES,
+    },
     options: {
       storySort: {
         order: [
+          'Getting Started',
+          ['Welcome', 'Contributing', 'Changelog', 'Migration Guides', ['V1 to V2']],
           'Foundations',
-          ['Overview', 'Icons', ['Overview', '*']],
+          ['Accessibility', 'Color', 'Grid', 'Icons', ['Overview', '*'], 'Typography'],
           'Primitives',
           ['Overview', '*'],
           'Inputs',
@@ -38,38 +142,13 @@ const preview: Preview = {
         ],
       },
     },
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      expanded: true,
-    },
     darkMode: {
       // Override the default dark theme
-      dark: createCustomTheme({ theme: darkTheme, asStorybookTheme: false }),
+      dark: createCustomTheme(darkTheme, 'dark'),
       // Override the default light theme
-      light: createCustomTheme({ theme: lightTheme, asStorybookTheme: false }),
+      light: createCustomTheme(lightTheme),
     },
   },
 };
 
-const themeQueryURL = parse(document.location.search).theme;
-
-const Theme = ({ children }: { children: React.ReactNode }) => {
-  const isDarkAddon = useDarkMode();
-  const [isDark, setIsDark] = React.useState(themeQueryURL || isDarkAddon);
-
-  React.useEffect(() => {
-    if (!themeQueryURL && isDarkAddon !== isDark) {
-      setIsDark(isDarkAddon);
-    }
-  }, [isDarkAddon, isDark]);
-
-  return (
-    <DesignSystemProvider locale="en" theme={isDark ? darkTheme : lightTheme}>
-      <Box flex="1 0 100%" padding={2} background="neutral0">
-        {children}
-      </Box>
-    </DesignSystemProvider>
-  );
-};
-
 export default preview;