Revitalize Storybook (#261)

* feat: Revitalize Storybook

* fix: Fix comments

---------

Co-authored-by: Pavel Trofimov <[email protected]>

.github/workflows/storybook-deployment.yml

@@ -0,0 +1,31 @@
+name: 'Storybook deployment'
+
+on:
+# push:
+# branches: [ master ]
+# paths:
+# - 'template/apps/web/src/components/**'
+ workflow_dispatch:
+ inputs:
+ sha:
+ description: The SHA-1 hash referring to the commit to check.
+ required: true
+ ref:
+ description: The head branch associated with the pull request.
+ required: true
+
+jobs:
+ chromatic-deployment:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v1
+ - name: Go to the storybook direc
+ run: |
+ cd template/apps/web
+ npm i --ignore-scripts
+ - name: Publish to Chromatic
+ uses: chromaui/action@v1
+ with:
+ token: ${{ secrets.GITHUB_TOKEN }}
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+ workingDir: services/web

template/.github/workflows/storybook-deployment.yml

@@ -0,0 +1,39 @@
+# Workflow name
+name: 'storybook-deployment'
+
+# Event for the workflow
+on:
+ push:
+ branches: [ main ]
+ paths:
+ - 'apps/web/src/components/**'
+ # Allows you to run this workflow manually from the Actions tab
+ workflow_dispatch:
+ inputs:
+ logLevel:
+ description: 'Log level'
+ required: true
+ default: 'warning'
+ tags:
+ description: 'Test scenario'
+ required: false
+
+# List of jobs
+jobs:
+ chromatic-deployment:
+ # Operating System
+ runs-on: ubuntu-latest
+ # Job steps
+ steps:
+ - uses: actions/checkout@v1
+ - name: Install dependencies
+ run: yarn
+ # 👇 Adds Chromatic as a step in the workflow
+ - name: Publish to Chromatic
+ uses: chromaui/action@v1
+ # Chromatic GitHub Action options
+ with:
+ token: ${{ secrets.GITHUB_TOKEN }}
+ # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+ # https://www.chromatic.com/docs/github-actions/#:~:text=Project%20token%20secret&text=On%20GitHub%2C%20go%20to%20the,project%20token%20as%20the%20Secret.
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

template/apps/web/.dockerignore

@@ -1,3 +1,4 @@
 node_modules
 .idea
 .husky
+.storybook

template/apps/web/.eslintrc.js

@@ -10,8 +10,9 @@ module.exports = {
  'next',
  'airbnb',
  'airbnb-typescript',
+ 'plugin:storybook/recommended'
  ],
- ignorePatterns: ['.eslintrc.js'],
+ ignorePatterns: ['.eslintrc.js', '!.storybook'],
  parserOptions: {
  project: './tsconfig.json',
  tsconfigRootDir: __dirname,

template/apps/web/.gitignore

@@ -30,3 +30,6 @@ yarn-error.log*
 
 .env
 .env.local
+
+#storybook
+storybook-static

template/apps/web/.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+import { join, dirname } from 'path';
+
+function getAbsolutePath(value: string): any {
+ return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+ core: {
+ builder: '@storybook/builder-webpack5',
+ },
+ stories: ['../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ getAbsolutePath('@storybook/addon-links'),
+ getAbsolutePath('@storybook/addon-essentials'),
+ getAbsolutePath('@storybook/addon-onboarding'),
+ getAbsolutePath('@storybook/addon-interactions'),
+ getAbsolutePath('@storybook/addon-styling-webpack'),
+ getAbsolutePath('storybook-dark-mode'),
+ ],
+ framework: {
+ name: getAbsolutePath('@storybook/nextjs'),
+ options: {},
+ },
+ docs: {
+ autodocs: 'tag',
+ },
+};
+export default config;

template/apps/web/.storybook/preview.tsx

@@ -0,0 +1,29 @@
+import '@mantine/core/styles.css';
+
+import React, { useEffect } from 'react';
+import { addons } from '@storybook/preview-api';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+import { MantineProvider, useMantineColorScheme } from '@mantine/core';
+
+import theme from '../src/theme';
+
+const channel = addons.getChannel();
+
+const ColorSchemeWrapper = ({ children }: { children: React.ReactNode }) => {
+ const { setColorScheme } = useMantineColorScheme();
+ const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
+
+ useEffect(() => {
+ channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
+ return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [channel]);
+
+ // eslint-disable-next-line react/jsx-no-useless-fragment
+ return <>{ children }</>;
+};
+
+export const decorators = [
+ (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
+ (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
+];

template/apps/web/package.json

@@ -9,7 +9,9 @@
  "dev": "next dev -p 3002",
  "start": "next start -p 3002",
  "ts-lint": "tsc --noEmit --incremental --watch",
- "precommit": "lint-staged && next lint --fix"
+ "precommit": "lint-staged && next lint --fix",
+ "storybook": "storybook dev -p 6006",
+ "build-storybook": "storybook build"
  },
  "dependencies": {
  "@hookform/resolvers": "2.9.11",
@@ -42,6 +44,18 @@
  },
  "devDependencies": {
  "@babel/core": "7.21.0",
+ "@storybook/addon-essentials": "7.6.9",
+ "@storybook/addon-styling-webpack": "0.0.6",
+ "@storybook/preview-api": "7.6.9",
+ "@storybook/addon-interactions": "7.6.9",
+ "@storybook/addon-links": "7.6.9",
+ "@storybook/addon-onboarding": "^1.0.10",
+ "@storybook/blocks": "7.6.9",
+ "@storybook/builder-webpack5": "7.6.10",
+ "@storybook/nextjs": "7.6.9",
+ "@storybook/react": "7.6.9",
+ "@storybook/test": "7.6.9",
+ "storybook-dark-mode": "3.0.3",
  "@tanstack/eslint-plugin-query": "5.12.1",
  "@tanstack/react-query-devtools": "5.13.5",
  "@types/mixpanel-browser": "2.38.1",
@@ -57,10 +71,12 @@
  "eslint-config-airbnb": "19.0.4",
  "eslint-config-airbnb-typescript": "17.0.0",
  "eslint-config-next": "13.2.4",
+ "eslint-plugin-storybook": "0.6.15",
  "lint-staged": "13.2.0",
  "postcss": "8.4.19",
  "postcss-preset-mantine": "1.9.0",
  "postcss-simple-vars": "7.0.1",
+ "storybook": "7.6.9",
  "style-loader": "3.3.1",
  "typescript": "4.9.5"
  },

template/apps/web/src/components/Link/Link.stories.tsx

@@ -0,0 +1,70 @@
+import { IconUserCircle } from '@tabler/icons-react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import Link from './index';
+
+export default {
+ title: 'Components/Link',
+ component: Link,
+ tags: ['autodocs'],
+ argTypes: {
+ children: { name: 'Text', control: 'text', defaultValue: 'Text' },
+ href: { name: 'Href', control: 'text', defaultValue: 'https://www.paralect.com' },
+ disabled: {
+ name: 'Disabled',
+ options: [true, false],
+ control: { type: 'boolean' },
+ defaultValue: false,
+ },
+ underline: {
+ name: 'Underline',
+ options: [true, false],
+ control: { type: 'boolean' },
+ defaultValue: false,
+ },
+ inherit: {
+ name: 'Inherit',
+ options: [true, false],
+ control: { type: 'boolean' },
+ defaultValue: false,
+ },
+ icon: {
+ table: {
+ disable: true,
+ },
+ },
+ inNewTab: {
+ name: 'In new tab',
+ options: [true, false],
+ control: { type: 'boolean' },
+ defaultValue: true,
+ },
+ size: {
+ name: 'Size',
+ options: ['xs', 'sm', 'md', 'lg', 'xl'],
+ control: {
+ type: 'inline-radio',
+ labels: {
+ xs: 'Extra small',
+ sm: 'Small',
+ md: 'Medium',
+ lg: 'Large',
+ xl: 'Extra large',
+ },
+ },
+ defaultValue: 'md',
+ },
+ },
+} as Meta<typeof Link>;
+
+const Template: StoryFn<typeof Link> = ({ ...args }) => (
+ <Link {...args}>
+ {args.children}
+ </Link>
+);
+
+export const Icon = Template.bind({});
+
+Icon.args = {
+ icon: <IconUserCircle />,
+};

template/apps/web/tsconfig.json

@@ -26,7 +26,8 @@
  "**/*.ts",
  "**/*.tsx",
  "next.config.js",
- "postcss.config.js"
+ "postcss.config.js",
+ ".storybook/*"
  ],
  "exclude": ["node_modules"],
 }