From c22590db4f77cb0aff17bb5acf3567588e02e96c Mon Sep 17 00:00:00 2001 From: Marc Espin Date: Fri, 5 Jul 2024 12:00:09 +0200 Subject: [PATCH] refactor(general): Remove storybook from wallet and explorer (#910) Co-authored-by: Mario --- apps/explorer/.storybook/main.js | 15 - apps/explorer/.storybook/manager.js | 10 - apps/explorer/.storybook/preview-head.html | 3 - apps/explorer/.storybook/preview.js | 14 - apps/explorer/package.json | 10 - apps/wallet/.storybook/main.js | 40 - apps/wallet/.storybook/manager.js | 10 - apps/wallet/.storybook/preview.js | 40 - apps/wallet/package.json | 13 - .../src/ui/app/shared/Badge.stories.tsx | 25 - .../app/shared/ButtonConnectedTo.stories.tsx | 49 -- .../src/ui/app/shared/ButtonUI.stories.tsx | 74 -- .../app/shared/ConfirmationModal.stories.tsx | 38 - .../ui/app/shared/InputWithAction.stories.tsx | 41 - .../wallet/src/ui/app/shared/Link.stories.tsx | 34 - .../src/ui/app/shared/PageTitle.stories.tsx | 45 - .../wallet/src/ui/app/shared/Pill.stories.tsx | 30 - .../ui/app/shared/header/Header.stories.tsx | 40 - pnpm-lock.yaml | 823 ++---------------- 19 files changed, 64 insertions(+), 1290 deletions(-) delete mode 100644 apps/explorer/.storybook/main.js delete mode 100644 apps/explorer/.storybook/manager.js delete mode 100644 apps/explorer/.storybook/preview-head.html delete mode 100644 apps/explorer/.storybook/preview.js delete mode 100644 apps/wallet/.storybook/main.js delete mode 100644 apps/wallet/.storybook/manager.js delete mode 100644 apps/wallet/.storybook/preview.js delete mode 100644 apps/wallet/src/ui/app/shared/Badge.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/ButtonUI.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/ConfirmationModal.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/InputWithAction.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/Link.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/PageTitle.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/Pill.stories.tsx delete mode 100644 apps/wallet/src/ui/app/shared/header/Header.stories.tsx diff --git a/apps/explorer/.storybook/main.js b/apps/explorer/.storybook/main.js deleted file mode 100644 index 58efad40fda..00000000000 --- a/apps/explorer/.storybook/main.js +++ /dev/null @@ -1,15 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 - -module.exports = { - stories: [ - { - directory: '../src/ui/stories', - titlePrefix: 'UI', - files: '**/*.stories.*', - }, - ], - addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'], - framework: '@storybook/react-vite', - staticDirs: ['../public'], -}; diff --git a/apps/explorer/.storybook/manager.js b/apps/explorer/.storybook/manager.js deleted file mode 100644 index 7837bed817b..00000000000 --- a/apps/explorer/.storybook/manager.js +++ /dev/null @@ -1,10 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 - -import { addons } from '@storybook/addons'; -import { themes } from '@storybook/theming'; - -// Force the theme to light, as our components do not suppor theming -addons.setConfig({ - theme: themes.light, -}); diff --git a/apps/explorer/.storybook/preview-head.html b/apps/explorer/.storybook/preview-head.html deleted file mode 100644 index 17767f3a958..00000000000 --- a/apps/explorer/.storybook/preview-head.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/apps/explorer/.storybook/preview.js b/apps/explorer/.storybook/preview.js deleted file mode 100644 index 9dd7511f5a7..00000000000 --- a/apps/explorer/.storybook/preview.js +++ /dev/null @@ -1,14 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 - -import '../src/index.css'; - -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, -}; diff --git a/apps/explorer/package.json b/apps/explorer/package.json index d4676917524..016f9f91ed3 100644 --- a/apps/explorer/package.json +++ b/apps/explorer/package.json @@ -15,9 +15,6 @@ "lint": "pnpm eslint:check && pnpm prettier:check", "lint:fix": "pnpm eslint:fix && pnpm prettier:fix", "preview": "vite preview", - "storybook": "storybook dev", - "build-storybook": "storybook build", - "preview-storybook": "pnpm dlx serve ./storybook-static", "ampli": "ampli", "pull-amplitude": "ampli pull web && node prependLicense.mjs && prettier -w ampli.json src/utils/analytics/ampli/index.ts" }, @@ -81,12 +78,6 @@ "@amplitude/ampli": "^1.31.5", "@babel/core": "^7.22.9", "@playwright/test": "^1.36.1", - "@storybook/addon-a11y": "^7.1.0", - "@storybook/addon-essentials": "^7.1.0", - "@storybook/addons": "^7.1.0", - "@storybook/react": "^7.1.0", - "@storybook/react-vite": "^7.1.0", - "@storybook/theming": "^7.1.0", "@testing-library/dom": "^9.3.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^14.0.0", @@ -102,7 +93,6 @@ "onchange": "^7.1.0", "postcss": "^8.4.31", "start-server-and-test": "^2.0.0", - "storybook": "^7.1.0", "tailwindcss": "^3.3.3", "tsconfig-paths": "^4.2.0", "typescript": "^5.3.3", diff --git a/apps/wallet/.storybook/main.js b/apps/wallet/.storybook/main.js deleted file mode 100644 index c996479e7ee..00000000000 --- a/apps/wallet/.storybook/main.js +++ /dev/null @@ -1,40 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 - -const { default: getWebpackConfig } = require('../configs/webpack/webpack.config.dev.ts'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const path = require('path'); - -module.exports = { - stories: ['../src/ui/**/*.mdx', '../src/ui/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - ], - framework: { - name: '@storybook/react-webpack5', - options: {}, - }, - docs: { - docsPage: true, - }, - webpackFinal: async (config) => { - const custom = await getWebpackConfig(); - - config.plugins.push(new MiniCssExtractPlugin()); - config.resolve.alias = custom.resolve.alias; - - const cssRule = custom.module.rules.find((rule) => rule.test?.test('.css')); - const tsRule = custom.module.rules.find((rule) => rule.test?.test('.tsx')); - tsRule.include = path.resolve('../icons/src'); - - config.module.rules = [ - ...config.module.rules.filter((rule) => !rule.test?.test('.css')), - tsRule, - cssRule, - ]; - - return config; - }, -}; diff --git a/apps/wallet/.storybook/manager.js b/apps/wallet/.storybook/manager.js deleted file mode 100644 index 7837bed817b..00000000000 --- a/apps/wallet/.storybook/manager.js +++ /dev/null @@ -1,10 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 - -import { addons } from '@storybook/addons'; -import { themes } from '@storybook/theming'; - -// Force the theme to light, as our components do not suppor theming -addons.setConfig({ - theme: themes.light, -}); diff --git a/apps/wallet/.storybook/preview.js b/apps/wallet/.storybook/preview.js deleted file mode 100644 index c5aac559152..00000000000 --- a/apps/wallet/.storybook/preview.js +++ /dev/null @@ -1,40 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// SPDX-License-Identifier: Apache-2.0 - -import '../src/ui/styles/global.scss'; -import '@fontsource-variable/inter'; -import '@fontsource-variable/red-hat-mono'; -import 'bootstrap-icons/font/bootstrap-icons.scss'; - -import { MemoryRouter } from 'react-router-dom'; - -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - viewport: { - viewports: { - extension: { - name: 'Chrome Extension', - styles: { - height: '600px', - width: '360px', - }, - type: 'mobile', - }, - }, - defaultViewport: 'extension', - }, -}; - -export const decorators = [ - (Story) => ( - - - - ), -]; diff --git a/apps/wallet/package.json b/apps/wallet/package.json index 56c63172c62..035e6bc75a7 100644 --- a/apps/wallet/package.json +++ b/apps/wallet/package.json @@ -20,9 +20,6 @@ "test:watch": "vitest", "playwright": "cross-env PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=\"1\" playwright", "pack:zip": "web-ext build --source-dir ./dist --overwrite-dest", - "storybook": "storybook dev -p 6007", - "build-storybook": "storybook build", - "preview-storybook": "pnpm dlx serve ./storybook-static -l 6007", "ampli": "ampli", "pull-amplitude": "ampli pull web && node prependLicense.mjs && prettier -w ampli.json src/shared/analytics/ampli/index.ts", "demoApp:dev": "pnpm vite -c ./tests/demo-app/vite.config.ts ./tests/demo-app/ --port 5181" @@ -46,15 +43,6 @@ "@playwright/test": "^1.36.1", "@sentry/react": "^7.59.2", "@sentry/webpack-plugin": "^1.20.0", - "@storybook/addon-a11y": "^7.1.0", - "@storybook/addon-essentials": "^7.1.0", - "@storybook/addon-interactions": "^7.1.0", - "@storybook/addon-links": "^7.1.0", - "@storybook/addons": "^7.1.0", - "@storybook/blocks": "^7.1.0", - "@storybook/react": "^7.1.0", - "@storybook/react-webpack5": "^7.1.0", - "@storybook/theming": "^7.1.0", "@svgr/webpack": "^7.0.0", "@types/git-rev-sync": "^2.0.0", "@types/node": "^20.4.2", @@ -82,7 +70,6 @@ "postcss-preset-env": "^9.0.0", "sass": "^1.63.6", "sass-loader": "^13.3.2", - "storybook": "^7.1.0", "tailwindcss": "^3.3.3", "tailwindcss-animate": "^1.0.6", "ts-loader": "^9.4.4", diff --git a/apps/wallet/src/ui/app/shared/Badge.stories.tsx b/apps/wallet/src/ui/app/shared/Badge.stories.tsx deleted file mode 100644 index c89dcd1882d..00000000000 --- a/apps/wallet/src/ui/app/shared/Badge.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { type Meta, type StoryObj } from '@storybook/react'; - -import { Badge } from './Badge'; - -export default { - component: Badge, -} as Meta; - -export const Success: StoryObj = { - args: { - label: 'New', - variant: 'success', - }, -}; - -export const Warning: StoryObj = { - args: { - label: 'At Risk', - variant: 'warning', - }, -}; diff --git a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx deleted file mode 100644 index ff5ae31a687..00000000000 --- a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { StakeAdd16 } from '@iota/icons'; -import { type Meta, type StoryObj } from '@storybook/react'; - -import { ButtonConnectedTo } from './ButtonConnectedTo'; - -export default { - component: ButtonConnectedTo, -} as Meta; - -export const Default: StoryObj = { - args: { - text: 'Button', - }, -}; - -export const LightGrey: StoryObj = { - args: { - text: 'Button', - bgOnHover: 'grey', - }, -}; - -export const Disabled: StoryObj = { - args: { - text: 'Button', - bgOnHover: 'grey', - disabled: true, - }, -}; - -export const LongText: StoryObj = { - render: (props) => { - return ( -
- -
- ); - }, - args: { - text: 'Button with very long text', - bgOnHover: 'grey', - iconBefore: , - iconAfter: , - }, -}; diff --git a/apps/wallet/src/ui/app/shared/ButtonUI.stories.tsx b/apps/wallet/src/ui/app/shared/ButtonUI.stories.tsx deleted file mode 100644 index dbf28b3b7dd..00000000000 --- a/apps/wallet/src/ui/app/shared/ButtonUI.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { Add16, StakeAdd16 } from '@iota/icons'; -import { type Meta, type StoryObj } from '@storybook/react'; - -import { Button } from './ButtonUI'; - -export default { - component: Button, -} as Meta; - -export const Default: StoryObj = { - args: { - text: 'Default Button', - }, -}; - -export const AllButton: StoryObj = { - render: (props) => { - const variants = [ - 'primary', - 'secondary', - 'outline', - 'outlineWarning', - 'warning', - 'plain', - ] as const; - const sizes = ['tall', 'narrow', 'xs'] as const; - return ( -
- {sizes.map((size) => - variants.map((variant) => ( -
-
{`${variant}-${size}`}
-
- )), - )} -
- ); - }, -}; - -export const AllLink: StoryObj = { - ...AllButton, - args: { to: '.' }, -}; -export const AllAnchor: StoryObj = { - ...AllButton, - args: { href: 'https://example.com' }, -}; diff --git a/apps/wallet/src/ui/app/shared/ConfirmationModal.stories.tsx b/apps/wallet/src/ui/app/shared/ConfirmationModal.stories.tsx deleted file mode 100644 index 8d98129034d..00000000000 --- a/apps/wallet/src/ui/app/shared/ConfirmationModal.stories.tsx +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { type Meta, type StoryObj } from '@storybook/react'; -import { useState } from 'react'; - -import { Button } from './ButtonUI'; -import { ConfirmationModal } from './ConfirmationModal'; - -export default { - component: ConfirmationModal, - decorators: [ - (Story, ctx) => { - const [isOpen, setIsOpen] = useState(false); - return ( - <> -