feat: add storybook

app/templates/.gitignore

@@ -1,8 +1,10 @@
 /.history
 /.idea
 node_modules
-/dist
-/build
-/coverage
-/src/assets/tailwind.parsed.css
+dist/
+build/
+coverage/
+tailwind.parsed.css
 .env
+.jest-test-results.json
+storybook/

app/templates/_configs/with-recoil/packages/project/.storybook/config/recoil.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import { addDecorator } from '@storybook/react';
+
+addDecorator(
+  (Story) => (
+    <RecoilRoot>
+      <Story />
+    </RecoilRoot>
+  )
+);

app/templates/_configs/with-redux/packages/project/.storybook/config/redux.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import store from '../../src/state/store';
+import { addDecorator } from '@storybook/react';
+
+addDecorator(
+  (Story) => (
+    <Provider store={store}>
+      <Story />
+    </Provider>
+  )
+);

app/templates/packages/project/.storybook/addon/addon-coverage/register.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import addons, { types } from '@storybook/addons';
+import path from 'path';
+
+const ADDON_ID = 'storybook/coverage';
+const PANEL_ID = `${ADDON_ID}/panel`;
+const PANEL_TITLE = 'Coverage';
+const coverage = {};
+
+function normalize(name) {
+  return name.toLowerCase().replace(/-/, '');
+}
+
+function loadCoverage() {
+  try {
+    const finds = require.context('../../../../../coverage/react', true, /index\.html$/);
+    finds.keys().forEach((file) => {
+      const dir = path.dirname(file);
+      const componentName = dir.split('/').pop();
+      coverage[normalize(componentName)] = file.replace('./', '');
+    });
+  } catch (e) {
+    console.error('[Storybook/Addon coverage] coverage not found', e);
+  }
+}
+
+function renderCoverage(api) {
+  const pathname = window.location.pathname;
+  return (args) => {
+    const storyData = api.getCurrentStoryData();
+    if (args.key !== PANEL_ID || !args.active || !storyData || !storyData.kind) {
+      return;
+    }
+    const componentName = storyData.kind.split('/').pop();
+    const test = componentName && coverage[normalize(componentName)];
+    if (!test) {
+      return;
+    }
+    return React.createElement('iframe', {
+      key: test,
+      src: pathname + test,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    });
+  };
+}
+
+function registerCallback(api) {
+  addons.addPanel(PANEL_ID, {
+    type: types.PANEL,
+    title: PANEL_TITLE,
+    render: renderCoverage(api)
+  });
+};
+
+try {
+  loadCoverage();
+  addons.register(ADDON_ID, registerCallback);
+} catch (e) {
+  console.error('[Storybook/Addon coverage]', e);
+}

app/templates/packages/project/.storybook/config/console.js

@@ -0,0 +1,6 @@
+import { setConsoleOptions } from '@storybook/addon-console';
+
+const panelExclude = setConsoleOptions({}).panelExclude;
+setConsoleOptions({
+  panelExclude: [...panelExclude, /deprecated/],
+});

app/templates/packages/project/.storybook/config/i18n.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { I18nProvider } from '../../src/i18n';
+import { addDecorator } from '@storybook/react';
+
+addDecorator(
+  (Story, { globals }) => (
+    <I18nProvider locale={globals.locale}>
+      <Story />
+    </I18nProvider>
+  )
+);

app/templates/packages/project/.storybook/config/layout.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: '<%= projectNameCanonical %> react components',
+  brandUrl: 'https://mrmilu.com',
+  brandImage:
+    'https://pbs.twimg.com/profile_images/1226078968878641152/cLaoB--o_400x400.png'
+});

app/templates/packages/project/.storybook/config/performance.js

@@ -0,0 +1,4 @@
+import { addDecorator } from '@storybook/react';
+import { withPerformance } from 'storybook-addon-performance';
+
+addDecorator(withPerformance);

app/templates/packages/project/.storybook/config/tests.js

@@ -0,0 +1,6 @@
+import { addDecorator } from '@storybook/react';
+import { withTests } from '@storybook/addon-jest';
+
+import results from '../../src/stories/.jest-test-results.json';
+
+addDecorator(withTests({ results }));

app/templates/packages/project/.storybook/main.js

@@ -0,0 +1,72 @@
+const { default: addons, mockChannel } = require('@storybook/addons');
+const path = require('path');
+const tsconfig = path.resolve(__dirname, '../tsconfig.json');
+
+addons.setChannel(mockChannel());
+
+module.exports = {
+  stories: [
+    '../@(src|documentation)/**/*.@(story|stories).@(tsx|mdx)'
+  ],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null
+      }
+    },
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          test: [/\.stories\.tsx$/],
+          include: [path.resolve(__dirname, '../src')]
+        },
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: true }
+        }
+        // injectStoryParameters: true
+      }
+    },
+    '@storybook/addon-essentials',
+    'storybook-addon-material-ui',
+    '@storybook/addon-a11y',
+    '@storybook/addon-jest',
+    './addon/addon-coverage/register',
+    'storybook-addon-performance/register',
+    '@storybook/addon-links',
+    {
+      name: 'storybook-addon-turbo-build',
+      options: {
+        // Please refer below tables for available options
+        optimizationLevel: 2
+      }
+    }
+  ],
+  typescript: {
+    check: true,
+    checkOptions: { tsconfig },
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldExtractValuesFromUnion: false,
+      skipChildrenPropWithoutDoc: false,
+      shouldRemoveUndefinedFromOptional: true,
+      tsconfigPath: tsconfig
+      // propFilter: prop => !/^(testID)$/.test(prop.name),
+    }
+  },
+  webpackFinal: async (config, args) => {
+    config.module.rules.push({
+      test: /\.html$/,
+      use: {
+        loader: 'html-loader'
+      }
+    });
+    return config;
+  }
+};

app/templates/packages/project/.storybook/manager.js

@@ -0,0 +1,16 @@
+import { addons } from '@storybook/addons';
+import layoutTheme from './config/layout';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  sidebarAnimations: true,
+  enableShortcuts: false,
+  isToolshown: true,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  showRoots: false,
+  theme: layoutTheme
+});

app/templates/packages/project/.storybook/preview.js.ejs

@@ -0,0 +1,46 @@
+import './config/console';
+import './config/performance';
+import './config/tests';
+import './config/i18n';
+<%_ if (hasRecoil) { -%>
+import './config/recoil';
+<%_ } -%>
+<%_ if (hasRedux) { -%>
+import './config/redux';
+<%_ } -%>
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: { expanded: true },
+  layout: 'centered',
+  options: {
+    storySort: {
+      order: [
+        'Introduction',
+        ['Docs']
+      ]
+    }
+  },
+  previewTabs: {
+    canvas: { title: 'Code', hidden: false },
+    'storybook/docs/panel': { title: 'Documentation' }
+  }
+};
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Español' },
+        { value: 'fr', right: '🇫🇷', title: 'Français' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'kr', right: '🇰🇷', title: '한국어' }
+      ]
+    }
+  }
+};

app/templates/packages/project/documentation/introduction.story.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Introduction/Docs" parameters={{
+  docsOnly: true,
+  previewTabs: {
+    canvas: { hidden: true },
+  }
+}} />
+
+# Documentation
+
+This is a documentation for the project and components

app/templates/packages/project/jest.config.js

@@ -5,7 +5,10 @@ const cfg = config('react', __dirname);
 
 cfg.setupFilesAfterEnv.unshift(path.resolve(__dirname, './react.setup-after-env.js'));
 cfg.transform = {
-  '^.+\\.tsx?$': 'babel-jest'
+  '^.+\\.tsx?$': 'babel-jest',
+  '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx'
 };
+cfg.collectCoverageFrom = [...cfg.collectCoverageFrom, '!**/*.(story|stories).tsx'];
+cfg.coverageReporters = [...cfg.coverageReporters, ['json', { outputFile: './src/stories/.jest-test-results.json' }]];
 
 module.exports = cfg;

app/templates/packages/project/package.json.ejs

@@ -20,7 +20,11 @@
     "build": "run-s clean:build build:code",
 <%_ } -%>
     "translate": "ts-node -P tsconfig.run.json scripts/transform.ts",
-    "test": "jest",
+    "storybook": "run-s test:coverage storybook:clean storybook:build",
+    "storybook:build": "build-storybook -o ./storybook -s ../../coverage/react",
+    "storybook:clean": "rimraf node_modules/.cache storybook",
+    "storybook:dev": "start-storybook -p 6006 -s ../../coverage/react",
+    "test": "jest --json --outputFile=src/stories/.jest-test-results.json",
     "test:coverage": "yarn test --coverage",
     "snowpack:dev": "dotenv -e ../../env/development.env -- snowpack dev",
     "snowpack:watch": "dotenv -e ../../env/development.env -- snowpack build --watch",
@@ -89,6 +93,19 @@
     "tailwindcss-elevation": "1.0.1",
     "twin.macro": "2.3.0",
 <%_ } -%>
-    "snowpack": "3.0.13"
+    "snowpack": "3.0.13",
+    "react-docgen-typescript": "1.21.0",
+    "@storybook/addon-a11y": "6.1.21",
+    "@storybook/addon-actions": "6.1.21",
+    "@storybook/addon-console": "1.2.3",
+    "@storybook/addon-essentials": "6.1.21",
+    "@storybook/addon-jest": "6.1.21",
+    "@storybook/addon-links": "6.1.21",
+    "@storybook/addon-storysource": "6.1.21",
+    "@storybook/addons": "6.1.21",
+    "@storybook/preset-create-react-app": "3.1.7",
+    "@storybook/react": "6.1.21",
+    "storybook-addon-performance": "0.14.0",
+    "storybook-addon-turbo-build": "1.0.0-beta.0"
   }
 }

app/templates/packages/project/src/components/button/button.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, Story } from '@storybook/react';
+import React from 'react';
+import Button, { ButtonProps } from './button.component';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    jest: ['__tests__/button.spec.tsx']
+  },
+  argTypes: {
+    onClick: {
+      table: {
+        category: 'Events'
+      }
+    }
+  }
+} as Meta;
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const defaultView = Template.bind({});
+defaultView.args = {
+  children: 'Button'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  children: 'Button'
+};

app/templates/packages/project/src/i18n/i18n.provider.tsx

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { Locale, useTranslation } from './i18n.hooks';
+
+export type I18nProviderProps = Required<PropsWithChildren<unknown>> & {
+  locale: Locale;
+};
+
+export function I18nProvider({ children, locale }: I18nProviderProps) {
+  const { i18n, changeLanguage } = useTranslation();
+  useEffect(() => {
+    void changeLanguage(locale);
+  }, [changeLanguage, locale]);
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}

app/templates/packages/project/src/i18n/index.ts

@@ -1,2 +1,3 @@
 /* istanbul ignore file */
 export * from './i18n.hooks';
+export * from './i18n.provider';