[UIE-53] Introduce Storybook. (#4580)

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['airbnb-typescript-prettier'],
+  extends: ['airbnb-typescript-prettier', 'plugin:storybook/recommended'],
   settings: {
     'import/resolver': {
       typescript: {
@@ -94,13 +94,13 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/*.test.ts', '**/*.test.js', 'src/setupTests.ts'],
+      files: ['**/*.test.ts', '**/*.test.tsx', '**/*.test.js', 'src/setupTests.ts'],
       env: {
         jest: true,
       },
     },
     {
-      files: 'src/**/*.{js,ts}',
+      files: 'src/**/*.{js,ts,tsx}',
       rules: {
         // 'no-console': ['warn', { allow: ['assert', 'error'] }],//TODO: should be enabled
       },
@@ -118,4 +118,5 @@ module.exports = {
     },
   ],
   plugins: ['lodash-fp', 'simple-import-sort'],
+  'ignorePatterns': ['!.storybook'],
 };

.storybook/StoryThemeProvider.tsx

@@ -0,0 +1,9 @@
+import { ThemeProvider } from '@terra-ui-packages/components';
+import { PropsWithChildren } from 'react';
+import React from 'react';
+import { defaultBrand } from 'src/libs/brands';
+
+const StoryThemeProvider = (props: PropsWithChildren) => {
+  return <ThemeProvider theme={defaultBrand.theme}>{props.children}</ThemeProvider>;
+};
+export default StoryThemeProvider;

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { dirname, join } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview-body.html

@@ -0,0 +1,16 @@
+<style>
+  /* Taken from style.css */
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  html, body {
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    font-size: 14px;
+    width: 100%;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+
+import StoryThemeProvider from './StoryThemeProvider';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <StoryThemeProvider>
+        <Story />
+      </StoryThemeProvider>
+    ),
+  ],
+};
+
+export default preview;