From fd0d00e59956c2f55ef404c276664d888cca405f Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Tue, 22 Aug 2023 14:48:52 +0200 Subject: [PATCH 01/12] chore(docs): add storybook dependencies --- common/config/rush/pnpm-lock.yaml | 21 +++++++++++++++++++++ common/config/rush/repo-state.json | 2 +- packages/apps/docs/package.json | 7 +++++++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index a81135d27d..f4ba949cb9 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -140,9 +140,15 @@ importers: '@rushstack/heft-jest-plugin': specifier: ~0.5.12 version: 0.5.13(@rushstack/heft@0.50.7)(@types/node@16.18.39) + '@storybook/addon-a11y': + specifier: 7.1.0 + version: 7.1.0(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-actions': specifier: ^7.1.0 version: 7.1.1(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-controls': + specifier: ^7.1.0 + version: 7.1.1(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-essentials': specifier: ^7.1.0 version: 7.1.1(react-dom@18.2.0)(react@18.2.0) @@ -155,6 +161,15 @@ importers: '@storybook/addon-mdx-gfm': specifier: ^7.1.0 version: 7.1.1 + '@storybook/blocks': + specifier: ^7.1.0 + version: 7.1.1(react-dom@18.2.0)(react@18.2.0) + '@storybook/csf': + specifier: ~0.1.1 + version: 0.1.1 + '@storybook/docs-mdx': + specifier: ~0.1.0 + version: 0.1.0 '@storybook/react': specifier: ^7.1.0 version: 7.1.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) @@ -164,6 +179,9 @@ importers: '@storybook/testing-library': specifier: ^0.2.0 version: 0.2.0 + '@storybook/theming': + specifier: ~7.1.0 + version: 7.1.0(react-dom@18.2.0)(react@18.2.0) '@types/gtag.js': specifier: ~0.0.12 version: 0.0.12 @@ -197,6 +215,9 @@ importers: eslint-config-next: specifier: 13.4.5 version: 13.4.5(eslint@8.45.0)(typescript@5.1.6) + eslint-plugin-storybook: + specifier: ~0.6.13 + version: 0.6.13(eslint@8.45.0)(typescript@5.1.6) jest: specifier: ~29.6.1 version: 29.6.2(@types/node@16.18.39) diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json index 6b8e8d31f7..771181ecd9 100644 --- a/common/config/rush/repo-state.json +++ b/common/config/rush/repo-state.json @@ -1,5 +1,5 @@ // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush. { - "pnpmShrinkwrapHash": "85e90f93731f85cd184c0955b33e8e836d614305", + "pnpmShrinkwrapHash": "5535eb0ba15d064648ecc53d8d6e4940ff975837", "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f" } diff --git a/packages/apps/docs/package.json b/packages/apps/docs/package.json index 2f7ededf91..0ad74028fa 100644 --- a/packages/apps/docs/package.json +++ b/packages/apps/docs/package.json @@ -72,14 +72,20 @@ "@rushstack/eslint-config": "~3.3.0", "@rushstack/heft": "~0.50.6", "@rushstack/heft-jest-plugin": "~0.5.12", + "@storybook/addon-a11y": "7.1.0", "@storybook/addon-actions": "^7.1.0", + "@storybook/addon-controls": "^7.1.0", "@storybook/addon-essentials": "^7.1.0", "@storybook/addon-interactions": "^7.1.0", "@storybook/addon-links": "^7.1.0", "@storybook/addon-mdx-gfm": "^7.1.0", + "@storybook/blocks": "^7.1.0", + "@storybook/csf": "~0.1.1", + "@storybook/docs-mdx": "~0.1.0", "@storybook/react": "^7.1.0", "@storybook/react-webpack5": "^7.1.0", "@storybook/testing-library": "^0.2.0", + "@storybook/theming": "~7.1.0", "@types/gtag.js": "~0.0.12", "@types/heft-jest": "~1.0.3", "@types/mailchimp__mailchimp_marketing": "~3.0.10", @@ -91,6 +97,7 @@ "dotenv": "~16.0.3", "eslint": "^8.45.0", "eslint-config-next": "13.4.5", + "eslint-plugin-storybook": "~0.6.13", "jest": "~29.6.1", "jest-standard-reporter": "~2.0.0", "mdast-util-from-markdown": "~1.3.0", From ef1816024cc97a20b64b5e30ec95fabb37dfb263 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Tue, 22 Aug 2023 14:52:32 +0200 Subject: [PATCH 02/12] chore(docs): fix storybook configuration --- common/config/rush/pnpm-lock.yaml | 10 ++- common/config/rush/repo-state.json | 2 +- packages/apps/docs/.babelrc.json | 16 ++++ packages/apps/docs/.storybook/main.js | 31 -------- packages/apps/docs/.storybook/main.ts | 77 +++++++++++++++++++ .../.storybook/{preview.js => preview.ts} | 3 +- packages/apps/docs/package.json | 4 +- 7 files changed, 107 insertions(+), 36 deletions(-) create mode 100644 packages/apps/docs/.babelrc.json delete mode 100644 packages/apps/docs/.storybook/main.js create mode 100644 packages/apps/docs/.storybook/main.ts rename packages/apps/docs/.storybook/{preview.js => preview.ts} (87%) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index f4ba949cb9..800c1bc7d0 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -203,6 +203,9 @@ importers: '@vanilla-extract/next-plugin': specifier: 2.1.2 version: 2.1.2(@types/node@16.18.39)(next@13.4.5)(webpack@5.88.2) + '@vanilla-extract/webpack-plugin': + specifier: 2.2.0 + version: 2.2.0(@types/node@16.18.39)(webpack@5.88.2) cypress: specifier: ~12.12.0 version: 12.12.0 @@ -233,6 +236,9 @@ importers: micromark-extension-frontmatter: specifier: ~1.1.0 version: 1.1.1 + mini-css-extract-plugin: + specifier: 2.7.6 + version: 2.7.6(webpack@5.88.2) openapi-types: specifier: ~12.1.3 version: 12.1.3 @@ -10103,7 +10109,7 @@ packages: chalk: 4.1.2 debug: 4.3.4(supports-color@5.5.0) loader-utils: 2.0.4 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(webpack-cli@4.10.0) transitivePeerDependencies: - '@types/node' - less @@ -24287,7 +24293,7 @@ packages: peerDependencies: webpack: ^5.0.0 dependencies: - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(webpack-cli@4.10.0) /style-to-object@0.4.1: resolution: {integrity: sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==} diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json index 771181ecd9..6d8cdcb784 100644 --- a/common/config/rush/repo-state.json +++ b/common/config/rush/repo-state.json @@ -1,5 +1,5 @@ // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush. { - "pnpmShrinkwrapHash": "5535eb0ba15d064648ecc53d8d6e4940ff975837", + "pnpmShrinkwrapHash": "907539779efb30a1979bfdc7fd1b50ed35a9b245", "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f" } diff --git a/packages/apps/docs/.babelrc.json b/packages/apps/docs/.babelrc.json new file mode 100644 index 0000000000..00ca841a4b --- /dev/null +++ b/packages/apps/docs/.babelrc.json @@ -0,0 +1,16 @@ +{ + "sourceType": "unambiguous", + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "chrome": 100 + } + } + ], + "@babel/preset-typescript", + "@babel/preset-react" + ], + "plugins": [] +} diff --git a/packages/apps/docs/.storybook/main.js b/packages/apps/docs/.storybook/main.js deleted file mode 100644 index a30c83f51c..0000000000 --- a/packages/apps/docs/.storybook/main.js +++ /dev/null @@ -1,31 +0,0 @@ -const path = require('path'); - -module.exports = { - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-mdx-gfm', - 'storybook-dark-mode', - 'storybook-addon-next-router', - ], - framework: { - name: '@storybook/react-webpack5', - options: {}, - }, - docs: { - autodocs: true, - }, - webpackFinal: async (config) => { - config.resolve.alias = { - ...config.resolve.alias, - - '@/components': path.resolve(__dirname, '../src/components'), - '@/utils': path.resolve(__dirname, '../src/utils'), - '@/types': path.resolve(__dirname, '../src/types'), - }; - - return config; - }, -}; diff --git a/packages/apps/docs/.storybook/main.ts b/packages/apps/docs/.storybook/main.ts new file mode 100644 index 0000000000..000947f64f --- /dev/null +++ b/packages/apps/docs/.storybook/main.ts @@ -0,0 +1,77 @@ +const path = require('path'); +import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import { StorybookConfig } from '@storybook/react-webpack5'; + +const config: StorybookConfig = { + stories: ['../src/**/*.stories.@(ts|tsx)'], + addons: [ + '@storybook/addon-a11y', + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-controls', + '@storybook/addon-interactions', + '@storybook/addon-mdx-gfm', + 'storybook-dark-mode', + 'storybook-addon-next-router', + ], + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, + docs: { + autodocs: true, + }, + webpackFinal: async (config) => { + config.plugins = config?.plugins || []; + (config.plugins)?.push( + new VanillaExtractPlugin(), + new MiniCssExtractPlugin(), + ); + + // Exclude vanilla extract's "*.vanilla.css" files from other "*.css" processing + config.module?.rules?.forEach((rule) => { + if ( + typeof rule !== 'string' && + rule.test instanceof RegExp && + rule.test.test('test.css') + ) { + rule.exclude = /\.vanilla\.css$/i; + } + }); + config.module?.rules?.push({ + // Targets only CSS files generated by vanilla-extract + test: /\.vanilla\.css$/i, + use: [ + MiniCssExtractPlugin.loader, + { + loader: require.resolve('css-loader'), + options: { + // Required as image imports should be handled via JS/TS import statements + url: false, + }, + }, + ], + }); + + config.resolve = config.resolve || {}; + + config.resolve.alias = { + ...config.resolve.alias, + + '@/components': path.resolve(__dirname, '../src/components'), + '@/utils': path.resolve(__dirname, '../src/utils'), + '@/types': path.resolve(__dirname, '../src/types'), + '@kadena-ui/react-components': path.resolve(__dirname, '../../../libs/react-components'), + }; + + config.resolve.fallback = { + ...config.resolve?.fallback, + zlib: false, + } + + return config; + }, +}; + +export default config; diff --git a/packages/apps/docs/.storybook/preview.js b/packages/apps/docs/.storybook/preview.ts similarity index 87% rename from packages/apps/docs/.storybook/preview.js rename to packages/apps/docs/.storybook/preview.ts index f17e103b70..83b50011b8 100644 --- a/packages/apps/docs/.storybook/preview.js +++ b/packages/apps/docs/.storybook/preview.ts @@ -3,6 +3,7 @@ import { globalCss, baseGlobalStyles, } from '@kadena-ui/react-components'; +import { darkThemeClass } from '@kadena/react-ui/theme'; import { themes } from '@storybook/theming'; import { RouterContext } from 'next/dist/shared/lib/router-context'; // next 12 @@ -27,7 +28,7 @@ export const parameters = { darkMode: { classTarget: 'body', stylePreview: true, - darkClass: darkTheme.className, + darkClass: `${darkThemeClass} ${darkTheme.className}`, lightClass: 'theme', current: 'light', // Override the default dark theme diff --git a/packages/apps/docs/package.json b/packages/apps/docs/package.json index 0ad74028fa..9a612a04aa 100644 --- a/packages/apps/docs/package.json +++ b/packages/apps/docs/package.json @@ -109,6 +109,8 @@ "storybook": "^7.1.0", "storybook-addon-next-router": "~4.0.2", "storybook-dark-mode": "^3.0.0", - "typescript": "5.1.6" + "typescript": "5.1.6", + "@vanilla-extract/webpack-plugin": "2.2.0", + "mini-css-extract-plugin": "2.7.6" } } From 1657d23065746b2da19c00224bde0ea514e62841 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Tue, 22 Aug 2023 14:53:12 +0200 Subject: [PATCH 03/12] chore(docs): add BodyText component stories --- .../Typography/BodyText.stories.tsx | 41 +++++++++++++++++++ .../src/components/Typography/BodyText.tsx | 4 +- 2 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 packages/apps/docs/src/components/Typography/BodyText.stories.tsx diff --git a/packages/apps/docs/src/components/Typography/BodyText.stories.tsx b/packages/apps/docs/src/components/Typography/BodyText.stories.tsx new file mode 100644 index 0000000000..1b3c4c3a47 --- /dev/null +++ b/packages/apps/docs/src/components/Typography/BodyText.stories.tsx @@ -0,0 +1,41 @@ +import { BodyText, IBodyTextProps } from './BodyText'; + +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +const selectOptions: string[] = ['p', 'span']; + +const meta: Meta = { + title: 'Typography/BodyText', + argTypes: { + as: { + options: selectOptions, + control: { + type: 'select', + }, + }, + bold: { + control: { + type: 'boolean', + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + name: 'Default', + args: { + as: 'p', + bold: false, + }, + render: ({ as, bold }) => ( +
+ + Hello! I'm there...! + +
+ ), +}; diff --git a/packages/apps/docs/src/components/Typography/BodyText.tsx b/packages/apps/docs/src/components/Typography/BodyText.tsx index 36f3f6e00a..ebd66140c6 100644 --- a/packages/apps/docs/src/components/Typography/BodyText.tsx +++ b/packages/apps/docs/src/components/Typography/BodyText.tsx @@ -2,13 +2,13 @@ import { ITextProps, Text } from '@kadena/react-ui'; import React, { FC, ReactNode } from 'react'; -interface IProps { +export interface IBodyTextProps { children?: ReactNode; as?: ITextProps['as']; bold?: ITextProps['bold']; } -export const BodyText: FC = ({ children, as, bold }) => { +export const BodyText: FC = ({ children, as, bold }) => { return ( {children} From a245541d081ae867e728906a8901f32611631ca6 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Tue, 22 Aug 2023 17:00:45 +0200 Subject: [PATCH 04/12] chore(docs): remove babel config and use swc to align with next js build --- common/config/rush/pnpm-lock.yaml | 157 ++++++++++++++++---------- common/config/rush/repo-state.json | 2 +- packages/apps/docs/.babelrc.json | 16 --- packages/apps/docs/.storybook/main.ts | 10 ++ packages/apps/docs/package.json | 9 +- 5 files changed, 113 insertions(+), 81 deletions(-) delete mode 100644 packages/apps/docs/.babelrc.json diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 800c1bc7d0..000ffc21dd 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -175,13 +175,16 @@ importers: version: 7.1.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@storybook/react-webpack5': specifier: ^7.1.0 - version: 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.71)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) + version: 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.78)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@storybook/testing-library': specifier: ^0.2.0 version: 0.2.0 '@storybook/theming': specifier: ~7.1.0 version: 7.1.0(react-dom@18.2.0)(react@18.2.0) + '@swc/core': + specifier: ~1.3.78 + version: 1.3.78 '@types/gtag.js': specifier: ~0.0.12 version: 0.0.12 @@ -254,6 +257,9 @@ importers: storybook-addon-next-router: specifier: ~4.0.2 version: 4.0.2(@storybook/addon-actions@7.1.1)(@storybook/addons@6.5.16)(@storybook/client-api@6.5.16)(next@13.4.5)(react-dom@18.2.0)(react@18.2.0) + storybook-addon-swc: + specifier: ~1.2.0 + version: 1.2.0(@swc/core@1.3.78)(webpack@5.88.2) storybook-dark-mode: specifier: ^3.0.0 version: 3.0.1(react-dom@18.2.0)(react@18.2.0) @@ -1285,7 +1291,7 @@ importers: version: 7.1.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@storybook/react-webpack5': specifier: ^7.1.0 - version: 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.71)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) + version: 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.78)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@storybook/testing-library': specifier: ^0.2.0 version: 0.2.0 @@ -1409,7 +1415,7 @@ importers: version: 7.1.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@storybook/react-webpack5': specifier: ^7.1.0 - version: 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.71)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) + version: 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.78)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@storybook/testing-library': specifier: ^0.2.0 version: 0.2.0 @@ -1514,7 +1520,7 @@ importers: version: 5.1.6 webpack: specifier: ~5.88.2 - version: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + version: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) ../../packages/libs/types: devDependencies: @@ -5745,7 +5751,7 @@ packages: dependencies: '@mdx-js/mdx': 2.3.0 source-map: 0.7.4 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) transitivePeerDependencies: - supports-color dev: false @@ -6473,7 +6479,7 @@ packages: react-refresh: 0.11.0 schema-utils: 3.3.0 source-map: 0.7.4 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) dev: true /@pothos/core@3.33.0(graphql@16.8.0): @@ -7735,7 +7741,7 @@ packages: '@storybook/router': 7.1.1(react-dom@18.2.0)(react@18.2.0) '@storybook/store': 7.1.1 '@storybook/theming': 7.1.1(react-dom@18.2.0)(react@18.2.0) - '@swc/core': 1.3.71 + '@swc/core': 1.3.78 '@types/node': 16.18.39 '@types/semver': 7.5.0 babel-loader: 9.1.3(@babel/core@7.22.9)(webpack@5.88.2) @@ -7754,14 +7760,14 @@ packages: react-dom: 18.2.0(react@18.2.0) semver: 7.5.4 style-loader: 3.3.3(webpack@5.88.2) - swc-loader: 0.2.3(@swc/core@1.3.71)(webpack@5.88.2) - terser-webpack-plugin: 5.3.9(@swc/core@1.3.71)(esbuild@0.18.17)(webpack@5.88.2) + swc-loader: 0.2.3(@swc/core@1.3.78)(webpack@5.88.2) + terser-webpack-plugin: 5.3.9(@swc/core@1.3.78)(esbuild@0.18.17)(webpack@5.88.2) ts-dedent: 2.2.0 typescript: 5.1.6 url: 0.11.1 util: 0.12.5 util-deprecate: 1.0.2 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) webpack-dev-middleware: 6.1.1(webpack@5.88.2) webpack-hot-middleware: 2.25.4 webpack-virtual-modules: 0.5.0 @@ -8251,7 +8257,7 @@ packages: resolution: {integrity: sha512-qpe6BiFLVs9YYFQVGgRT0dJxPOKBtGLIAsnVEpXKUPrltEWQpTxQEqqOSJlut+FLoWB5MTxrwiJ/7891h4a5pw==} dev: true - /@storybook/preset-react-webpack@7.1.1(@babel/core@7.22.9)(@swc/core@1.3.71)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6): + /@storybook/preset-react-webpack@7.1.1(@babel/core@7.22.9)(@swc/core@1.3.78)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6): resolution: {integrity: sha512-SuYNaFzPf7FWDKn7+InsOPltAt/wooCOrpgVYYNTyeEOj7TXn+YvGcxb3d0HVzQAzQuYyobt10KQGfgjUUfxgQ==} engines: {node: '>=16.0.0'} peerDependencies: @@ -8284,7 +8290,7 @@ packages: react-refresh: 0.11.0 semver: 7.5.4 typescript: 5.1.6 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) transitivePeerDependencies: - '@swc/core' - '@types/webpack' @@ -8358,7 +8364,7 @@ packages: react-docgen-typescript: 2.2.2(typescript@5.1.6) tslib: 2.6.1 typescript: 5.1.6 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) transitivePeerDependencies: - supports-color dev: true @@ -8373,7 +8379,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /@storybook/react-webpack5@7.1.1(@babel/core@7.22.9)(@swc/core@1.3.71)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6): + /@storybook/react-webpack5@7.1.1(@babel/core@7.22.9)(@swc/core@1.3.78)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6): resolution: {integrity: sha512-iTliWdmqSXw5wz/iHefr7yKhI7rko8oN5JUfkYlZafqk7M3mXy0wamLgFcrOncnBcY2UNPX1oEAiLJBKSy9ulA==} engines: {node: '>=16.0.0'} peerDependencies: @@ -8389,7 +8395,7 @@ packages: dependencies: '@babel/core': 7.22.9 '@storybook/builder-webpack5': 7.1.1(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) - '@storybook/preset-react-webpack': 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.71)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) + '@storybook/preset-react-webpack': 7.1.1(@babel/core@7.22.9)(@swc/core@1.3.78)(esbuild@0.18.17)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@storybook/react': 7.1.1(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6) '@types/node': 16.18.39 react: 18.2.0 @@ -8788,88 +8794,88 @@ packages: - supports-color dev: false - /@swc/core-darwin-arm64@1.3.71: - resolution: {integrity: sha512-xOm0hDbcO2ShwQu1CjLtq3fwrG9AvhuE0s8vtBc8AsamYExHmR8bo6GQHJUtfPG1FVPk5a8xoQSd1fs09FQjLg==} + /@swc/core-darwin-arm64@1.3.78: + resolution: {integrity: sha512-596KRua/d5Gx1buHKKchSyHuwoIL4S1BRD/wCvYNLNZ3xOzcuBBmXOjrDVigKi1ztNDeS07p30RO5UyYur0XAA==} engines: {node: '>=10'} cpu: [arm64] os: [darwin] requiresBuild: true optional: true - /@swc/core-darwin-x64@1.3.71: - resolution: {integrity: sha512-9sbDXBWgM22w/3Ll5kPhXMPkOiHRoqwMOyxLJBfGtIMnFlh5O+NRN3umRerK3pe4Q6/7hj2M5V+crEHYrXmuxg==} + /@swc/core-darwin-x64@1.3.78: + resolution: {integrity: sha512-w0RsD1onQAj0vuLAoOVi48HgnW6D6oBEIZP17l0HYejCDBZ+FRZLjml7wgNAWMqHcd2qNRqgtZ+v7aLza2JtBQ==} engines: {node: '>=10'} cpu: [x64] os: [darwin] requiresBuild: true optional: true - /@swc/core-linux-arm-gnueabihf@1.3.71: - resolution: {integrity: sha512-boKdMZsfKvhBs0FDeqH7KQj0lfYe0wCtrL1lv50oYMEeLajY9o4U5xSmc61Sg4HRXjlbR6dlM2cFfL84t7NpAA==} + /@swc/core-linux-arm-gnueabihf@1.3.78: + resolution: {integrity: sha512-v1CpRn+H6fha1WIqmdRvJM40pFdjUHrGfhf4Ygci72nlAU41l5XimN8Iwkm8FgIwf2wnv0lLzedSM4IHvpq/yA==} engines: {node: '>=10'} cpu: [arm] os: [linux] requiresBuild: true optional: true - /@swc/core-linux-arm64-gnu@1.3.71: - resolution: {integrity: sha512-yDatyHYMiOVwhyIA/LBwknPs2CUtLYWEMzPZjgLc+56PbgPs3oiEbNWeVUND5onPrfDQgK7NK1y8JeiXZqTgGQ==} + /@swc/core-linux-arm64-gnu@1.3.78: + resolution: {integrity: sha512-Sis17dz9joJRFVvR/gteOZSUNrrrioo81RQzani0Zr5ZZOfWLMTB9DA+0MVlfnVa2taYcsJHJZFoAv9JkLwbzg==} engines: {node: '>=10'} cpu: [arm64] os: [linux] requiresBuild: true optional: true - /@swc/core-linux-arm64-musl@1.3.71: - resolution: {integrity: sha512-xAdCA0L/hoa0ULL5SR4sMZCxkWk7C90DOU7wJalNVG9qNWYICfq3G7AR0E9Ohphzqyahfb5QJED/nA7N0+XwbQ==} + /@swc/core-linux-arm64-musl@1.3.78: + resolution: {integrity: sha512-E5F8/qp+QupnfBnsP4vN1PKyCmAHYHDG1GMyPE/zLFOUYLgw+jK4C9rfyLBR0o2bWo1ay2WCIjusBZD9XHGOSA==} engines: {node: '>=10'} cpu: [arm64] os: [linux] requiresBuild: true optional: true - /@swc/core-linux-x64-gnu@1.3.71: - resolution: {integrity: sha512-j94qLXP/yqhu2afnABAq/xrJIU8TEqcNkp1TlsAeO3R2nVLYL1w4XX8GW71SPnXmd2bwF102c3Cfv/2ilf2y2A==} + /@swc/core-linux-x64-gnu@1.3.78: + resolution: {integrity: sha512-iDxa+RknnTQlyy+WfPor1FM6y44ERNI2E0xiUV6gV6uPwegCngi8LFC+E7IvP6+p+yXtAkesunAaiZ8nn0s+rw==} engines: {node: '>=10'} cpu: [x64] os: [linux] requiresBuild: true optional: true - /@swc/core-linux-x64-musl@1.3.71: - resolution: {integrity: sha512-YiyU848ql6dLlmt0BHccGAaZ36Cf61VzCAMDKID/gd72snvzWcMCHrwSRW0gEFNXHsjBJrmNl+SLYZHfqoGwUA==} + /@swc/core-linux-x64-musl@1.3.78: + resolution: {integrity: sha512-dWtIYUFL5sMTE2UKshkXTusHcK8+zAhhGzvqWq1wJS45pqTlrAbzpyqB780fle880x3A6DMitWmsAFARdNzpuQ==} engines: {node: '>=10'} cpu: [x64] os: [linux] requiresBuild: true optional: true - /@swc/core-win32-arm64-msvc@1.3.71: - resolution: {integrity: sha512-1UsJ+6hnIRe/PVdgDPexvgGaN4KpBncT/bAOqlWc9XC7KeBXAWcGA08LrPUz2Ei00DJXzR622IGZVEYOHNkUOw==} + /@swc/core-win32-arm64-msvc@1.3.78: + resolution: {integrity: sha512-CXFaGEc2M9Su3UoUMC8AnzKb9g+GwPxXfakLWZsjwS448h6jcreExq3nwtBNdVGzQ26xqeVLMFfb1l/oK99Hwg==} engines: {node: '>=10'} cpu: [arm64] os: [win32] requiresBuild: true optional: true - /@swc/core-win32-ia32-msvc@1.3.71: - resolution: {integrity: sha512-KnuI89+zojR9lDFELdQYZpxzPZ6pBfLwJfWTSGatnpL1ZHhIsV3tK1jwqIdJK1zkRxpBwc6p6FzSZdZwCSpnJw==} + /@swc/core-win32-ia32-msvc@1.3.78: + resolution: {integrity: sha512-FaH1jwWnJpWkdImpMoiZpMg9oy9UUyZwltzN7hFwjR48e3Li82cRFb+9PifIBHCUSBM+CrrsJXbHP213IMVAyw==} engines: {node: '>=10'} cpu: [ia32] os: [win32] requiresBuild: true optional: true - /@swc/core-win32-x64-msvc@1.3.71: - resolution: {integrity: sha512-Pcw7fFirpaBOZsU8fhO48ZCb7NxIjuLnLRPrHqWQ4Mapx1+w9ZNdGya2DKP9n8EAiUrJO20WDsrBNMT2MQSWkA==} + /@swc/core-win32-x64-msvc@1.3.78: + resolution: {integrity: sha512-oYxa+tPdhlx1aH14AIoF6kvVjo49tEOW0drNqoEaVHufvgH0y43QU2Jum3b2+xXztmMRtzK2CSN3GPOAXDKKKg==} engines: {node: '>=10'} cpu: [x64] os: [win32] requiresBuild: true optional: true - /@swc/core@1.3.71: - resolution: {integrity: sha512-T8dqj+SV/S8laW/FGmKHhCGw1o4GRUvJ2jHfbYgEwiJpeutT9uavHvG02t39HJvObBJ52EZs/krGtni4U5928Q==} + /@swc/core@1.3.78: + resolution: {integrity: sha512-y6DQP571v7fbUUY7nz5G4lNIRGofuO48K5pGhD9VnuOCTuptfooCdi8wnigIrIhM/M4zQ53m/YCMDCbOtDgEww==} engines: {node: '>=10'} requiresBuild: true peerDependencies: @@ -8878,16 +8884,16 @@ packages: '@swc/helpers': optional: true optionalDependencies: - '@swc/core-darwin-arm64': 1.3.71 - '@swc/core-darwin-x64': 1.3.71 - '@swc/core-linux-arm-gnueabihf': 1.3.71 - '@swc/core-linux-arm64-gnu': 1.3.71 - '@swc/core-linux-arm64-musl': 1.3.71 - '@swc/core-linux-x64-gnu': 1.3.71 - '@swc/core-linux-x64-musl': 1.3.71 - '@swc/core-win32-arm64-msvc': 1.3.71 - '@swc/core-win32-ia32-msvc': 1.3.71 - '@swc/core-win32-x64-msvc': 1.3.71 + '@swc/core-darwin-arm64': 1.3.78 + '@swc/core-darwin-x64': 1.3.78 + '@swc/core-linux-arm-gnueabihf': 1.3.78 + '@swc/core-linux-arm64-gnu': 1.3.78 + '@swc/core-linux-arm64-musl': 1.3.78 + '@swc/core-linux-x64-gnu': 1.3.78 + '@swc/core-linux-x64-musl': 1.3.78 + '@swc/core-win32-arm64-msvc': 1.3.78 + '@swc/core-win32-ia32-msvc': 1.3.78 + '@swc/core-win32-x64-msvc': 1.3.78 /@swc/helpers@0.5.1: resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==} @@ -10109,7 +10115,7 @@ packages: chalk: 4.1.2 debug: 4.3.4(supports-color@5.5.0) loader-utils: 2.0.4 - webpack: 5.88.2(webpack-cli@4.10.0) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) transitivePeerDependencies: - '@types/node' - less @@ -11368,7 +11374,7 @@ packages: '@babel/core': 7.22.9 find-cache-dir: 4.0.0 schema-utils: 4.2.0 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) dev: true /babel-plugin-add-react-displayname@0.0.5: @@ -15246,7 +15252,7 @@ packages: semver: 7.5.4 tapable: 2.2.1 typescript: 5.1.6 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) dev: true /form-data-encoder@1.9.0: @@ -19675,7 +19681,7 @@ packages: webpack: ^5.0.0 dependencies: schema-utils: 4.2.0 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) /minimalistic-assert@1.0.1: resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==} @@ -24045,6 +24051,25 @@ packages: tslib: 2.4.0 dev: true + /storybook-addon-swc@1.2.0(@swc/core@1.3.78)(webpack@5.88.2): + resolution: {integrity: sha512-PEpxhAH+407KTcVDC7uUH4S26qtuBDC/JlZI3NqFYu0Tm2uCBf56On+13lK4iE3Iz8FORl4aSXo2RricJ/UhPQ==} + peerDependencies: + '@swc/core': ^1.2.152 + terser-webpack-plugin: ^4.0.0 || ^5.0.0 + webpack: ^4.0.0 || ^5.0.0 + peerDependenciesMeta: + terser-webpack-plugin: + optional: true + webpack: + optional: true + dependencies: + '@babel/runtime': 7.22.6 + '@swc/core': 1.3.78 + deepmerge: 4.3.1 + swc-loader: 0.1.16(@swc/core@1.3.78)(webpack@5.88.2) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) + dev: true + /storybook-dark-mode@3.0.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3V6XBhkUq63BF6KzyDBbfV5/8sYtF4UtVccH1tK+Lrd4p0tF8k7yHOvVDhFL9hexnKXcLEnbC+42YDTPvjpK+A==} peerDependencies: @@ -24293,7 +24318,7 @@ packages: peerDependencies: webpack: ^5.0.0 dependencies: - webpack: 5.88.2(webpack-cli@4.10.0) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) /style-to-object@0.4.1: resolution: {integrity: sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==} @@ -24499,14 +24524,24 @@ packages: tslib: 2.6.1 dev: true - /swc-loader@0.2.3(@swc/core@1.3.71)(webpack@5.88.2): + /swc-loader@0.1.16(@swc/core@1.3.78)(webpack@5.88.2): + resolution: {integrity: sha512-NKIm8aJjK/z/yfzk+v7YGwJMjBKaLaUs9ZKI2zoaIGKAjtkwjO92ZLI0fiTZuwzRqVLQl/29fBdSgFCBzquR0w==} + peerDependencies: + '@swc/core': ^1.2.147 + webpack: '>=2' + dependencies: + '@swc/core': 1.3.78 + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) + dev: true + + /swc-loader@0.2.3(@swc/core@1.3.78)(webpack@5.88.2): resolution: {integrity: sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==} peerDependencies: '@swc/core': ^1.2.147 webpack: '>=2' dependencies: - '@swc/core': 1.3.71 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + '@swc/core': 1.3.78 + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) dev: true /swr@2.2.1(react@18.2.0): @@ -24688,7 +24723,7 @@ packages: supports-hyperlinks: 2.3.0 dev: false - /terser-webpack-plugin@5.3.9(@swc/core@1.3.71)(esbuild@0.18.17)(webpack@5.88.2): + /terser-webpack-plugin@5.3.9(@swc/core@1.3.78)(esbuild@0.18.17)(webpack@5.88.2): resolution: {integrity: sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -24705,13 +24740,13 @@ packages: optional: true dependencies: '@jridgewell/trace-mapping': 0.3.18 - '@swc/core': 1.3.71 + '@swc/core': 1.3.78 esbuild: 0.18.17 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.1 terser: 5.19.2 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) /terser-webpack-plugin@5.3.9(webpack@5.88.2): resolution: {integrity: sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==} @@ -26012,7 +26047,7 @@ packages: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.2.0 - webpack: 5.88.2(@swc/core@1.3.71)(esbuild@0.18.17) + webpack: 5.88.2(@swc/core@1.3.78)(esbuild@0.18.17) dev: true /webpack-dev-server@4.15.1(debug@4.3.4)(webpack@5.88.2): @@ -26115,7 +26150,7 @@ packages: resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==} dev: true - /webpack@5.88.2(@swc/core@1.3.71)(esbuild@0.18.17): + /webpack@5.88.2(@swc/core@1.3.78)(esbuild@0.18.17): resolution: {integrity: sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==} engines: {node: '>=10.13.0'} hasBin: true @@ -26146,7 +26181,7 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.9(@swc/core@1.3.71)(esbuild@0.18.17)(webpack@5.88.2) + terser-webpack-plugin: 5.3.9(@swc/core@1.3.78)(esbuild@0.18.17)(webpack@5.88.2) watchpack: 2.4.0 webpack-sources: 3.2.3 transitivePeerDependencies: diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json index 6d8cdcb784..262f5c75a0 100644 --- a/common/config/rush/repo-state.json +++ b/common/config/rush/repo-state.json @@ -1,5 +1,5 @@ // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush. { - "pnpmShrinkwrapHash": "907539779efb30a1979bfdc7fd1b50ed35a9b245", + "pnpmShrinkwrapHash": "15ba9d7d5d059080c5fe00460e97a00a1625c946", "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f" } diff --git a/packages/apps/docs/.babelrc.json b/packages/apps/docs/.babelrc.json deleted file mode 100644 index 00ca841a4b..0000000000 --- a/packages/apps/docs/.babelrc.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "sourceType": "unambiguous", - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "chrome": 100 - } - } - ], - "@babel/preset-typescript", - "@babel/preset-react" - ], - "plugins": [] -} diff --git a/packages/apps/docs/.storybook/main.ts b/packages/apps/docs/.storybook/main.ts index 000947f64f..bf48560f5a 100644 --- a/packages/apps/docs/.storybook/main.ts +++ b/packages/apps/docs/.storybook/main.ts @@ -14,6 +14,16 @@ const config: StorybookConfig = { '@storybook/addon-mdx-gfm', 'storybook-dark-mode', 'storybook-addon-next-router', + { + name: 'storybook-addon-swc', + options: { + enable: true, + enableSwcLoader: true, + enableSwcMinify: true, + swcLoaderOptions: {}, + swcMinifyOptions: {}, + }, + }, ], framework: { name: '@storybook/react-webpack5', diff --git a/packages/apps/docs/package.json b/packages/apps/docs/package.json index 9a612a04aa..1c0aec10c9 100644 --- a/packages/apps/docs/package.json +++ b/packages/apps/docs/package.json @@ -13,6 +13,7 @@ "build:importReadMe": "node ./src/scripts/importReadme.mjs && prettier ./src/pages/docs --write", "build:next": "npm run build:scripts && next build", "build:scripts": "npm run build:importReadMe && npm run build:createtree && npm run build:createSpecJson && npm run build:brokenLinks ", + "build:storybook": "storybook build", "cypress:ci": "NEXT_PUBLIC_APP_DEV=test start-server-and-test dev http://localhost:3000 cypress:run", "cypress:cilocal": "NEXT_PUBLIC_APP_DEV=test start-server-and-test dev http://localhost:3000 cypress:open", "cypress:open": "percy exec -- cypress open", @@ -86,6 +87,7 @@ "@storybook/react-webpack5": "^7.1.0", "@storybook/testing-library": "^0.2.0", "@storybook/theming": "~7.1.0", + "@swc/core": "~1.3.78", "@types/gtag.js": "~0.0.12", "@types/heft-jest": "~1.0.3", "@types/mailchimp__mailchimp_marketing": "~3.0.10", @@ -93,6 +95,7 @@ "@types/react": "^18.2.15", "@types/react-dom": "18.2.7", "@vanilla-extract/next-plugin": "2.1.2", + "@vanilla-extract/webpack-plugin": "2.2.0", "cypress": "~12.12.0", "dotenv": "~16.0.3", "eslint": "^8.45.0", @@ -103,14 +106,14 @@ "mdast-util-from-markdown": "~1.3.0", "mdast-util-frontmatter": "~1.0.1", "micromark-extension-frontmatter": "~1.1.0", + "mini-css-extract-plugin": "2.7.6", "openapi-types": "~12.1.3", "prettier": "~3.0.0", "start-server-and-test": "~2.0.0", "storybook": "^7.1.0", "storybook-addon-next-router": "~4.0.2", + "storybook-addon-swc": "~1.2.0", "storybook-dark-mode": "^3.0.0", - "typescript": "5.1.6", - "@vanilla-extract/webpack-plugin": "2.2.0", - "mini-css-extract-plugin": "2.7.6" + "typescript": "5.1.6" } } From 4f5d1d73037600a2bbefda4c41a177d7405ac112 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Tue, 22 Aug 2023 17:02:14 +0200 Subject: [PATCH 05/12] chore(docs): remove multiple classes to make dark mode work --- packages/apps/docs/.storybook/preview.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/apps/docs/.storybook/preview.ts b/packages/apps/docs/.storybook/preview.ts index 83b50011b8..b6dcf64b48 100644 --- a/packages/apps/docs/.storybook/preview.ts +++ b/packages/apps/docs/.storybook/preview.ts @@ -1,5 +1,4 @@ import { - darkTheme, globalCss, baseGlobalStyles, } from '@kadena-ui/react-components'; @@ -28,7 +27,7 @@ export const parameters = { darkMode: { classTarget: 'body', stylePreview: true, - darkClass: `${darkThemeClass} ${darkTheme.className}`, + darkClass: darkThemeClass, lightClass: 'theme', current: 'light', // Override the default dark theme From 964b4d907fb9c029db86c058700a3a6ed243fa1a Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Wed, 23 Aug 2023 11:49:42 +0200 Subject: [PATCH 06/12] chore(docs): setup chromatic --- .gitignore | 3 +++ common/config/rush/pnpm-lock.yaml | 3 +++ common/config/rush/repo-state.json | 2 +- packages/apps/docs/package.json | 2 ++ 4 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index f49a036bc3..97f81a5277 100644 --- a/.gitignore +++ b/.gitignore @@ -96,3 +96,6 @@ packages/*/*/temp # Intelij idea files .idea .idea/* + +# Storybook static build +storybook-static diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 000ffc21dd..8514b598fa 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -209,6 +209,9 @@ importers: '@vanilla-extract/webpack-plugin': specifier: 2.2.0 version: 2.2.0(@types/node@16.18.39)(webpack@5.88.2) + chromatic: + specifier: 6.20.0 + version: 6.20.0 cypress: specifier: ~12.12.0 version: 12.12.0 diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json index 262f5c75a0..dedf6c0363 100644 --- a/common/config/rush/repo-state.json +++ b/common/config/rush/repo-state.json @@ -1,5 +1,5 @@ // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush. { - "pnpmShrinkwrapHash": "15ba9d7d5d059080c5fe00460e97a00a1625c946", + "pnpmShrinkwrapHash": "ba9afce944c3453f647b9eb44f46094ab7bca44e", "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f" } diff --git a/packages/apps/docs/package.json b/packages/apps/docs/package.json index 1c0aec10c9..776c4f51fe 100644 --- a/packages/apps/docs/package.json +++ b/packages/apps/docs/package.json @@ -14,6 +14,7 @@ "build:next": "npm run build:scripts && next build", "build:scripts": "npm run build:importReadMe && npm run build:createtree && npm run build:createSpecJson && npm run build:brokenLinks ", "build:storybook": "storybook build", + "chromatic": "chromatic -b build:storybook", "cypress:ci": "NEXT_PUBLIC_APP_DEV=test start-server-and-test dev http://localhost:3000 cypress:run", "cypress:cilocal": "NEXT_PUBLIC_APP_DEV=test start-server-and-test dev http://localhost:3000 cypress:open", "cypress:open": "percy exec -- cypress open", @@ -96,6 +97,7 @@ "@types/react-dom": "18.2.7", "@vanilla-extract/next-plugin": "2.1.2", "@vanilla-extract/webpack-plugin": "2.2.0", + "chromatic": "6.20.0", "cypress": "~12.12.0", "dotenv": "~16.0.3", "eslint": "^8.45.0", From 214a40c9e1a0bcf7c3669e95f380dc5639c80db5 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Wed, 23 Aug 2023 11:50:21 +0200 Subject: [PATCH 07/12] chore(docs): setup chromatic script for github actions --- .github/workflows/docs-chromatic.yml | 33 ++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 .github/workflows/docs-chromatic.yml diff --git a/.github/workflows/docs-chromatic.yml b/.github/workflows/docs-chromatic.yml new file mode 100644 index 0000000000..a0d99893a8 --- /dev/null +++ b/.github/workflows/docs-chromatic.yml @@ -0,0 +1,33 @@ +name: Chromatic for Docs +# All pull requests, and +# Workflow dispatch allows you to run this workflow manually from the Actions tab +on: + push: + paths: + - packages/apps/docs/** + +jobs: + chromatic: + name: Visual Regression Tests + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 # 👈 Required to retrieve git history, needed to determine diffs. + + - uses: actions/setup-node@v3 + with: + node-version: 18 + + - name: Rush install (install-run-rush) + run: | + node common/scripts/install-run-rush.js install -t @kadena/docs + - name: Publish Storybook + uses: chromaui/action@v1 + with: + # 👇 Chromatic projectToken, refer to the manage page to obtain it. + exitOnceUploaded: true + buildScriptName: 'build:storybook' + projectToken: ${{ secrets.REACT_UI_CHROMATIC_TOKEN }} + workingDir: /packages/apps/docs + autoAcceptChanges: 'main' From 73ccc4a622ed4d056f879a547ceb555b8762c475 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Wed, 23 Aug 2023 11:58:22 +0200 Subject: [PATCH 08/12] chore(docs): fix react-ui package reference issue --- .github/workflows/docs-chromatic.yml | 3 ++- packages/apps/docs/.storybook/main.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/docs-chromatic.yml b/.github/workflows/docs-chromatic.yml index a0d99893a8..4099d51026 100644 --- a/.github/workflows/docs-chromatic.yml +++ b/.github/workflows/docs-chromatic.yml @@ -21,7 +21,8 @@ jobs: - name: Rush install (install-run-rush) run: | - node common/scripts/install-run-rush.js install -t @kadena/docs + node common/scripts/install-run-rush.js install -t @kadena/react-ui + node common/scripts/install-run-rush.js install -t @kadena/react-components - name: Publish Storybook uses: chromaui/action@v1 with: diff --git a/packages/apps/docs/.storybook/main.ts b/packages/apps/docs/.storybook/main.ts index bf48560f5a..0366330995 100644 --- a/packages/apps/docs/.storybook/main.ts +++ b/packages/apps/docs/.storybook/main.ts @@ -73,6 +73,7 @@ const config: StorybookConfig = { '@/utils': path.resolve(__dirname, '../src/utils'), '@/types': path.resolve(__dirname, '../src/types'), '@kadena-ui/react-components': path.resolve(__dirname, '../../../libs/react-components'), + '@kadena-ui/react-ui': path.resolve(__dirname, '../../../libs/react-ui'), }; config.resolve.fallback = { From 0a5d6096cc81525ef603377818ed523497f868e5 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Wed, 23 Aug 2023 12:05:43 +0200 Subject: [PATCH 09/12] chore(docs): remove local webpack alias --- packages/apps/docs/.storybook/main.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/apps/docs/.storybook/main.ts b/packages/apps/docs/.storybook/main.ts index 0366330995..bf48560f5a 100644 --- a/packages/apps/docs/.storybook/main.ts +++ b/packages/apps/docs/.storybook/main.ts @@ -73,7 +73,6 @@ const config: StorybookConfig = { '@/utils': path.resolve(__dirname, '../src/utils'), '@/types': path.resolve(__dirname, '../src/types'), '@kadena-ui/react-components': path.resolve(__dirname, '../../../libs/react-components'), - '@kadena-ui/react-ui': path.resolve(__dirname, '../../../libs/react-ui'), }; config.resolve.fallback = { From f83b7c7e5f3e1b473548761c8fa3e5ecdf37e2b5 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Wed, 23 Aug 2023 13:10:37 +0200 Subject: [PATCH 10/12] chore(docs): update docs chromatic setup with build local deps --- .github/workflows/docs-chromatic.yml | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/.github/workflows/docs-chromatic.yml b/.github/workflows/docs-chromatic.yml index 4099d51026..7d0d46dbec 100644 --- a/.github/workflows/docs-chromatic.yml +++ b/.github/workflows/docs-chromatic.yml @@ -21,14 +21,19 @@ jobs: - name: Rush install (install-run-rush) run: | - node common/scripts/install-run-rush.js install -t @kadena/react-ui - node common/scripts/install-run-rush.js install -t @kadena/react-components + node common/scripts/install-run-rush.js install -t @kadena/docs + + - name: Rush Build (internal dependencies) + run: | + node common/scripts/install-run-rush.js build -t @kadena/react-ui + node common/scripts/install-run-rush.js build -t @kadena/react-components + - name: Publish Storybook uses: chromaui/action@v1 with: # 👇 Chromatic projectToken, refer to the manage page to obtain it. exitOnceUploaded: true buildScriptName: 'build:storybook' - projectToken: ${{ secrets.REACT_UI_CHROMATIC_TOKEN }} + projectToken: ${{ secrets.DOCS_CHROMATIC_TOKEN }} workingDir: /packages/apps/docs autoAcceptChanges: 'main' From 3ec3543152a6ac1d02dac556963f8ae73ae79a31 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Wed, 23 Aug 2023 13:21:32 +0200 Subject: [PATCH 11/12] chore(docs): add story for sub body text component --- .../Typography/SubBodyText.stories.tsx | 41 +++++++++++++++++++ .../src/components/Typography/SubBodyText.tsx | 2 +- 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 packages/apps/docs/src/components/Typography/SubBodyText.stories.tsx diff --git a/packages/apps/docs/src/components/Typography/SubBodyText.stories.tsx b/packages/apps/docs/src/components/Typography/SubBodyText.stories.tsx new file mode 100644 index 0000000000..75a32eb961 --- /dev/null +++ b/packages/apps/docs/src/components/Typography/SubBodyText.stories.tsx @@ -0,0 +1,41 @@ +import { IProps, SubBodyText } from './SubBodyText'; + +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +const selectOptions: string[] = ['p', 'span']; + +const meta: Meta = { + title: 'Typography/SubBodyText', + argTypes: { + as: { + options: selectOptions, + control: { + type: 'select', + }, + }, + bold: { + control: { + type: 'boolean', + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + name: 'Default', + args: { + as: 'p', + bold: false, + }, + render: ({ as, bold }) => ( +
+ + Hello! I'm sub body text...! + +
+ ), +}; diff --git a/packages/apps/docs/src/components/Typography/SubBodyText.tsx b/packages/apps/docs/src/components/Typography/SubBodyText.tsx index 5110026bf3..4ee99b41f7 100644 --- a/packages/apps/docs/src/components/Typography/SubBodyText.tsx +++ b/packages/apps/docs/src/components/Typography/SubBodyText.tsx @@ -2,7 +2,7 @@ import { ITextProps, Text } from '@kadena/react-ui'; import React, { FC, ReactNode } from 'react'; -interface IProps { +export interface IProps { children?: ReactNode; as?: ITextProps['as']; bold?: ITextProps['bold']; From 5c1f2ad6d7dbd77f3cfca17a978cb7e1c7ee82a3 Mon Sep 17 00:00:00 2001 From: Mohamed Ismail Date: Thu, 24 Aug 2023 15:14:40 +0200 Subject: [PATCH 12/12] chore(ci): rename chromatic docs + react-ui workflow files --- .github/workflows/{docs-chromatic.yml => chromatic-docs.yml} | 0 .github/workflows/{chromatic.yml => chromatic-react-ui.yml} | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename .github/workflows/{docs-chromatic.yml => chromatic-docs.yml} (100%) rename .github/workflows/{chromatic.yml => chromatic-react-ui.yml} (92%) diff --git a/.github/workflows/docs-chromatic.yml b/.github/workflows/chromatic-docs.yml similarity index 100% rename from .github/workflows/docs-chromatic.yml rename to .github/workflows/chromatic-docs.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic-react-ui.yml similarity index 92% rename from .github/workflows/chromatic.yml rename to .github/workflows/chromatic-react-ui.yml index d57a67d7a5..83e1f64771 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic-react-ui.yml @@ -1,4 +1,4 @@ -name: Chromatic +name: Chromatic for react ui # All pull requests, and # Workflow dispatch allows you to run this workflow manually from the Actions tab on: @@ -27,7 +27,7 @@ jobs: with: # 👇 Chromatic projectToken, refer to the manage page to obtain it. exitOnceUploaded: true - buildScriptName: "build:storybook" + buildScriptName: 'build:storybook' projectToken: ${{ secrets.REACT_UI_CHROMATIC_TOKEN }} workingDir: /packages/libs/react-ui autoAcceptChanges: 'main'