feat(small): add code examples to storybook, update storybook

SoftwareBrothers · Feb 27, 2024 · 1ac4368 · 1ac4368
1 parent 2acab4b
commit 1ac4368
Show file tree

Hide file tree

Showing 174 changed files with 3,427 additions and 1,739 deletions.
diff --git a/.babelrc.cjs b/.babelrc.cjs
@@ -6,7 +6,8 @@ module.exports = {
       "alias": {
         "@styled-components": "./utils/styled.js"
       }
-    }]
+    }],
+    ["replace-import-extension", { "extMapping": { ".jsx": ".js" }}],
   ],
   "presets": [
     "@babel/preset-react",

diff --git a/.gitignore b/.gitignore
@@ -172,6 +172,7 @@ sketch
 
 # tsc build output
 build
+build-sb
 types
 
 # storybook

diff --git a/.npmignore b/.npmignore
@@ -2,3 +2,4 @@ node_modules
 .github
 storybook
 coommitlint.config.js
+build-sb
diff --git a/.storybook/main.mjs b/.storybook/main.mjs
@@ -1,6 +1,11 @@
+import path from 'path'
+
+import ResolveTypeScriptPlugin from 'resolve-typescript-plugin'
+import TypeScriptConfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
-export default {
-  stories: ['../build/**/*.stories.js'],
+const config = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -11,18 +16,46 @@ export default {
     options: {},
   },
   webpackFinal: (config) => {
+    if (!config.module) config.module = { rules: [] }
+    if (!config.module.rules) config.module.rules = []
+    if (!config.resolve) config.resolve = {}
+
     config.module.rules.push({
-      test: /\.(js|mjs|jsx)$/,
-      enforce: 'pre',
-      loader: require.resolve('source-map-loader'),
-      resolve: {
-        fullySpecified: false,
-      },
+      test: /\.tsx?$/,
+      use: 'ts-loader',
     })
+
+    config.resolve.alias = {
+      atoms: path.resolve(__dirname, '../src/atoms/'),
+      hooks: path.resolve(__dirname, '../src/hooks/'),
+      molecules: path.resolve(__dirname, '../src/molecules/'),
+      organisms: path.resolve(__dirname, '../src/organisms/'),
+      templates: path.resolve(__dirname, '../src/templates/'),
+      utils: path.resolve(__dirname, '../src/utils/'),
+    }
+
+    config.resolve.extensions = ['.js', '.jsx', '.json']
+
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      /**
+       * See https://github.com/storybookjs/storybook/issues/15962
+       * and https://github.com/softwareventures/resolve-typescript-plugin
+       */
+      new ResolveTypeScriptPlugin(),
+      new TypeScriptConfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ]
+
     return config
   },
   babel: () => ({
     plugins: [
+      [
+        'styled-components',
+        { displayName: true },
+      ],
       [
         'module-resolver',
         {
@@ -40,7 +73,7 @@ export default {
         '@babel/preset-env',
         {
           targets: {
-            node: '18',
+            node: '20',
           },
           loose: true,
           modules: false,
@@ -58,10 +91,13 @@ export default {
       compilerOptions: {
         allowSyntheticDefaultImports: false,
         esModuleInterop: false,
+        jsx: 'preserve',
       },
     },
   },
   docs: {
     autodocs: true,
   },
 }
+
+export default config
diff --git a/.storybook/manager.mjs b/.storybook/manager.mjs
@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming'
+import { addons } from '@storybook/manager-api'
 
-const theme = create({
+export const theme = create({
   base: 'light',
 
   colorPrimary: '#3040D6',
@@ -27,12 +27,15 @@ const theme = create({
   inputTextColor: '#0B1C34',
   inputBorderRadius: 0,
 
-  brandTitle: 'Admin Design System',
+  brandTitle: 'AdminJS Design System',
   brandUrl: 'https://adminjs.co/',
-  brandImage: 'https://demo.adminjs.co/admin/frontend/assets/logo.svg',
+  brandImage: 'https://demo.adminjs.co/app/frontend/assets/logo.svg',
   brandTarget: '_blank',
-});
+})
 
+addons.setConfig({
+  theme,
+})
 
 addons.setConfig({
   isFullscreen: false,
@@ -43,4 +46,4 @@ addons.setConfig({
   isToolshown: true,
   theme,
   initialActive: 'sidebar',
-});
+})
diff --git a/.storybook/preview.mjs b/.storybook/preview.mjs
@@ -1,11 +1,18 @@
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 
-import ThemeDecorator from './theme-decorator.jsx'
+import ThemeDecorator from './theme-decorator.js'
+import { theme } from './manager.mjs'
 
-/** @type { import('@storybook/react').Preview } */
+/** @type { import('@storybook/react').Preview['parameters'] } */
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
-  docs: { source: { code: null } },
+  docs: {
+    source: {
+      language: 'tsx',
+      type: 'auto',
+    },
+    theme,
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -28,8 +35,10 @@ export const parameters = {
   viewport: { viewports: MINIMAL_VIEWPORTS },
 }
 
+/** @type { import('@storybook/react').Preview['decorators'] } */
 export const decorators = [ThemeDecorator]
 
+/** @type { import('@storybook/react').Preview['globalTypes'] } */
 export const globalTypes = {
   theme: {
     title: 'Theme',

diff --git a/.storybook/theme-decorator.jsx → .storybook/theme-decorator.js b/.storybook/theme-decorator.jsx → .storybook/theme-decorator.js
diff --git a/package.json b/package.json
@@ -57,12 +57,18 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.0",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.0.2",
-    "@storybook/addon-interactions": "^7.0.2",
-    "@storybook/addon-links": "^7.0.2",
-    "@storybook/react": "^7.0.2",
-    "@storybook/react-webpack5": "^7.0.2",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-storysource": "^7.6.3",
+    "@storybook/addons": "^7.6.3",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/manager-api": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/source-loader": "^7.6.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.3",
     "@types/react": "^18.0.15",
     "@types/react-datepicker": "^4.10.0",
     "@types/react-text-mask": "^5.4.11",
@@ -71,44 +77,49 @@
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
     "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-replace-import-extension": "^1.1.3",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "resolve-typescript-plugin": "^2.0.1",
     "rollup": "^3.17.3",
     "semantic-release": "^20.1.3",
     "semantic-release-slack-bot": "^4.0.0",
     "source-map-loader": "^4.0.1",
-    "storybook": "^7.0.2",
+    "storybook": "^7.6.3",
+    "ts-loader": "^9.5.1",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.0.2"
   },
   "dependencies": {
     "@hypnosphi/create-react-context": "^0.3.1",
-    "@tiptap/core": "2.0.1",
-    "@tiptap/extension-bubble-menu": "2.0.1",
-    "@tiptap/extension-character-count": "2.0.1",
-    "@tiptap/extension-code": "2.0.1",
-    "@tiptap/extension-document": "2.0.1",
-    "@tiptap/extension-floating-menu": "2.0.1",
-    "@tiptap/extension-heading": "2.0.1",
-    "@tiptap/extension-image": "2.0.1",
-    "@tiptap/extension-link": "2.0.1",
-    "@tiptap/extension-table": "2.0.1",
-    "@tiptap/extension-table-cell": "2.0.1",
-    "@tiptap/extension-table-header": "2.0.1",
-    "@tiptap/extension-table-row": "2.0.1",
-    "@tiptap/extension-text": "2.0.1",
-    "@tiptap/extension-text-align": "2.0.1",
-    "@tiptap/extension-typography": "2.0.1",
-    "@tiptap/pm": "2.0.1",
-    "@tiptap/react": "2.0.1",
-    "@tiptap/starter-kit": "2.0.1",
+    "@tiptap/core": "2.1.13",
+    "@tiptap/extension-bubble-menu": "2.1.13",
+    "@tiptap/extension-character-count": "2.1.13",
+    "@tiptap/extension-code": "2.1.13",
+    "@tiptap/extension-document": "2.1.13",
+    "@tiptap/extension-floating-menu": "2.1.13",
+    "@tiptap/extension-heading": "2.1.13",
+    "@tiptap/extension-image": "2.1.13",
+    "@tiptap/extension-link": "2.1.13",
+    "@tiptap/extension-table": "2.1.13",
+    "@tiptap/extension-table-cell": "2.1.13",
+    "@tiptap/extension-table-header": "2.1.13",
+    "@tiptap/extension-table-row": "2.1.13",
+    "@tiptap/extension-text": "2.1.13",
+    "@tiptap/extension-text-align": "2.1.13",
+    "@tiptap/extension-typography": "2.1.13",
+    "@tiptap/pm": "2.1.13",
+    "@tiptap/react": "2.1.13",
+    "@tiptap/starter-kit": "2.1.13",
     "date-fns": "^2.29.3",
     "flat": "^5.0.2",
     "jw-paginate": "^1.0.4",
@@ -125,27 +136,25 @@
     "text-mask-addons": "^3.8.0"
   },
   "resolutions": {
-    "@storybook/node-logger": "7.0.1",
-    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.630821.0",
-    "@tiptap/core": "2.0.1",
-    "@tiptap/extension-bubble-menu": "2.0.1",
-    "@tiptap/extension-character-count": "2.0.1",
-    "@tiptap/extension-code": "2.0.1",
-    "@tiptap/extension-document": "2.0.1",
-    "@tiptap/extension-floating-menu": "2.0.1",
-    "@tiptap/extension-heading": "2.0.1",
-    "@tiptap/extension-image": "2.0.1",
-    "@tiptap/extension-link": "2.0.1",
-    "@tiptap/extension-table": "2.0.1",
-    "@tiptap/extension-table-cell": "2.0.1",
-    "@tiptap/extension-table-header": "2.0.1",
-    "@tiptap/extension-table-row": "2.0.1",
-    "@tiptap/extension-text": "2.0.1",
-    "@tiptap/extension-text-align": "2.0.1",
-    "@tiptap/extension-typography": "2.0.1",
-    "@tiptap/pm": "2.0.1",
-    "@tiptap/react": "2.0.1",
-    "@tiptap/starter-kit": "2.0.1",
+    "@tiptap/core": "2.1.13",
+    "@tiptap/extension-bubble-menu": "2.1.13",
+    "@tiptap/extension-character-count": "2.1.13",
+    "@tiptap/extension-code": "2.1.13",
+    "@tiptap/extension-document": "2.1.13",
+    "@tiptap/extension-floating-menu": "2.1.13",
+    "@tiptap/extension-heading": "2.1.13",
+    "@tiptap/extension-image": "2.1.13",
+    "@tiptap/extension-link": "2.1.13",
+    "@tiptap/extension-table": "2.1.13",
+    "@tiptap/extension-table-cell": "2.1.13",
+    "@tiptap/extension-table-header": "2.1.13",
+    "@tiptap/extension-table-row": "2.1.13",
+    "@tiptap/extension-text": "2.1.13",
+    "@tiptap/extension-text-align": "2.1.13",
+    "@tiptap/extension-typography": "2.1.13",
+    "@tiptap/pm": "2.1.13",
+    "@tiptap/react": "2.1.13",
+    "@tiptap/starter-kit": "2.1.13",
     "styled-components": "5.3.9"
   }
 }
diff --git a/src/atoms/avatar/avatar.stories.tsx b/src/atoms/avatar/avatar.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
-import { Avatar } from './index.js'
+import Avatar from './avatar.jsx'
 
-export const Default = {}
+export const Default: StoryObj<typeof Avatar> = {}
 
 export const WithLetter: StoryObj<typeof Avatar> = {
   render: ({ alt }) => (
@@ -16,11 +16,13 @@ export const WithLetter: StoryObj<typeof Avatar> = {
   ),
 }
 
-export default {
+const meta: Meta<typeof Avatar> = {
   title: 'DesignSystem/Atoms/Avatar',
   component: Avatar,
   args: {
     src: 'https://images.unsplash.com/photo-1612144431180-2d672779556c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
     alt: 'Bubble Avatar',
   },
-} as Meta<typeof Avatar>
+}
+
+export default meta
diff --git a/src/atoms/avatar/avatar.tsx b/src/atoms/avatar/avatar.tsx
@@ -39,4 +39,6 @@ export const Avatar = styled.div<AvatarProps>`
   ${space}
 `
 
+Avatar.displayName = 'Avatar'
+
 export default Avatar
diff --git a/src/atoms/avatar/index.ts b/src/atoms/avatar/index.ts
@@ -1 +1 @@
-export * from './avatar.js'
+export * from './avatar.jsx'
diff --git a/src/atoms/badge/badge.stories.tsx b/src/atoms/badge/badge.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import React from 'react'
 
-import StoryWrapper from '../../utils/story-wrapper.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
 import { Box, Header, Text as TextComponent } from '../index.js'
 import { Badge } from './index.js'
 
@@ -72,7 +72,7 @@ export const Examples: StoryFn = () => (
   </Box>
 )
 
-export default {
+const meta: Meta<typeof Badge> = {
   title: 'DesignSystem/Atoms/Badge',
   component: Badge,
   args: {
@@ -85,4 +85,6 @@ export default {
     size: { options: sizes, control: { type: 'select' } },
     outline: { control: { type: 'boolean' } },
   },
-} as Meta<typeof Badge>
+}
+
+export default meta
diff --git a/src/atoms/badge/badge.tsx b/src/atoms/badge/badge.tsx
@@ -93,5 +93,7 @@ Badge.defaultProps = {
   className: cssClass('Badge'),
 }
 
+Badge.displayName = 'Badge'
+
 export { Badge }
 export default Badge
diff --git a/src/atoms/badge/index.ts b/src/atoms/badge/index.ts
@@ -1 +1 @@
-export * from './badge.js'
+export * from './badge.jsx'