chore(storybook): react boilerplate (#324)

* story: react boilerplate

* chore(storybook): update storybook configs

* chore(storybook): add theming and a11y checker

* added jest test suite and ts supp:

* yarn lock commit

* fix storybook

* added snapshot testing

* chore: update package.jsons and storybook theme url

* chore: point to babelrc from jest config

* Update packages/react/.gitignore

Co-authored-by: Anna Wen <[email protected]>

* resolved comments

* modified mdx

* yarn lock conflict

* yarn lock main

* lock file fix

* chore: clean up for ci-check

---------

Co-authored-by: Anna Wen <[email protected]>

packages/react/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

packages/react/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/storybook-static
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*storybook.log

packages/react/.storybook/main.js

@@ -0,0 +1,98 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import path, { join, dirname } from 'path';
+import remarkGfm from 'remark-gfm';
+
+/**
+ * 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) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+    '@storybook/addon-webpack5-compiler-babel',
+    'storybook-addon-accessibility-checker',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.s?css$/,
+      sideEffects: true,
+      use: [
+        {
+          loader:
+            process.env.NODE_ENV === 'production'
+              ? MiniCssExtractPlugin.loader
+              : 'style-loader',
+        },
+        {
+          loader: 'css-loader',
+          options: {
+            importLoaders: 2,
+            sourceMap: true,
+          },
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: [
+                require('autoprefixer')({
+                  overrideBrowserslist: ['last 1 version'],
+                }),
+              ],
+            },
+            sourceMap: true,
+          },
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            implementation: require('sass'),
+            sassOptions: {
+              includePaths: [
+                path.resolve(__dirname, '..', 'node_modules'),
+                path.resolve(__dirname, '..', '..', '..', 'node_modules'),
+              ],
+            },
+            warnRuleAsWarning: true,
+            sourceMap: true,
+          },
+        },
+      ],
+    });
+    if (process.env.NODE_ENV === 'production') {
+      config.plugins.push(
+        new MiniCssExtractPlugin({
+          filename: '[name].[contenthash].css',
+        })
+      );
+    }
+    return config;
+  },
+  docs: {
+    autodocs: true,
+    defaultName: 'Overview',
+  },
+};
+export default config;

packages/react/.storybook/preview.js

@@ -0,0 +1,216 @@
+import React from 'react';
+import { white, g10, g90, g100 } from '@carbon/themes';
+import { breakpoints } from '@carbon/layout';
+import { GlobalTheme } from '@carbon/react/es/components/Theme';
+import { Layout } from '@carbon/react/es/components/Layout';
+import { TextDirection } from '@carbon/react/es/components/Text';
+import './styles.scss';
+
+import theme from './theme';
+
+console.log('process.env.NODE_ENV', process.env.NODE_ENV);
+
+const devTools = {
+  layoutSize: {
+    description: "Set the layout context's size",
+    defaultValue: false,
+    toolbar: {
+      title: 'dev :: unstable__Layout size',
+      items: [
+        {
+          value: false,
+          title: 'None',
+        },
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        '2xl',
+      ],
+    },
+  },
+  layoutDensity: {
+    description: "Set the layout context's density",
+    defaultValue: false,
+    toolbar: {
+      title: 'dev :: unstable__Layout density',
+      items: [
+        {
+          value: false,
+          title: 'None',
+        },
+        'condensed',
+        'normal',
+      ],
+    },
+  },
+};
+
+export const globalTypes = {
+  dir: {
+    name: 'Text direction',
+    description: 'Set the text direction for the story',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'transfer',
+      title: 'Text direction',
+      items: [
+        {
+          right: '🔄',
+          title: 'auto',
+          value: 'auto',
+        },
+        {
+          right: '➡️',
+          title: 'left-to-right (ltr)',
+          value: 'ltr',
+        },
+        {
+          right: '⬅️',
+          title: 'right-to-left (rtl)',
+          value: 'rtl',
+        },
+      ],
+    },
+  },
+  theme: {
+    name: 'Theme',
+    description: 'Set the global theme for displaying components',
+    defaultValue: 'white',
+    toolbar: {
+      icon: 'paintbrush',
+      items: ['white', 'g10', 'g90', 'g100'],
+    },
+  },
+  ...(process.env.NODE_ENV === 'development' ? devTools : {}),
+};
+
+export const parameters = {
+  backgrounds: {
+    // https://storybook.js.org/docs/react/essentials/backgrounds#grid
+    grid: {
+      cellSize: 8,
+      opacity: 0.5,
+    },
+    values: [
+      {
+        name: 'white',
+        value: white.background,
+      },
+      {
+        name: 'g10',
+        value: g10.background,
+      },
+      {
+        name: 'g90',
+        value: g90.background,
+      },
+      {
+        name: 'g100',
+        value: g100.background,
+      },
+    ],
+  },
+  controls: {
+    // https://storybook.js.org/docs/react/essentials/controls#show-full-documentation-for-each-property
+    expanded: true,
+
+    // https://storybook.js.org/docs/react/essentials/controls#specify-initial-preset-color-swatches
+    // presetColors: [],
+
+    // https://storybook.js.org/docs/react/essentials/controls#sorting-controls
+    sort: 'alpha',
+
+    hideNoControlsWarning: true,
+  },
+  darkMode: {
+    current: 'light',
+  },
+  docs: {
+    theme,
+  },
+  // Small (<672)
+  // Medium (672 - 1056px)
+  // Large (1056 - 1312px)
+  // X-Large (1312 - 1584px)
+  // Max (>1584)
+  viewport: {
+    viewports: {
+      sm: {
+        name: 'Small',
+        styles: {
+          width: breakpoints.sm.width,
+          height: '100%',
+        },
+      },
+      md: {
+        name: 'Medium',
+        styles: {
+          width: breakpoints.md.width,
+          height: '100%',
+        },
+      },
+      lg: {
+        name: 'Large',
+        styles: {
+          width: breakpoints.lg.width,
+          height: '100%',
+        },
+      },
+      xlg: {
+        name: 'X-Large',
+        styles: {
+          width: breakpoints.xlg.width,
+          height: '100%',
+        },
+      },
+      Max: {
+        name: 'Max',
+        styles: {
+          width: breakpoints.max.width,
+          height: '100%',
+        },
+      },
+    },
+  },
+};
+
+const decorators = [
+  (Story, context) => {
+    const { layoutDensity, layoutSize, locale, dir, theme } = context.globals;
+    const [randomKey, setRandomKey] = React.useState(1);
+
+    React.useEffect(() => {
+      document.documentElement.setAttribute('data-carbon-theme', theme);
+    }, [theme]);
+
+    React.useLayoutEffect(() => {
+      document.documentElement.lang = locale;
+      document.documentElement.dir = dir;
+      // Need to set random key to recalculate Popover coordinates
+      setRandomKey(Math.floor(Math.random() * 10));
+    }, [locale, dir]);
+
+    return (
+      <GlobalTheme theme={theme}>
+        <Layout size={layoutSize || null} density={layoutDensity || null}>
+          <TextDirection
+            getTextDirection={(text) => {
+              return dir;
+            }}>
+            <Story key={randomKey} {...context} />
+          </TextDirection>
+        </Layout>
+      </GlobalTheme>
+    );
+  },
+];
+
+const preview = {
+  parameters,
+  decorators,
+  globalTypes,
+};
+
+export default preview;

packages/react/.storybook/styles.scss

@@ -0,0 +1,3 @@
+@use '@carbon/styles' as styles with (
+  $font-path: '~@ibm/plex'
+);

packages/react/.storybook/theme.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { create } from '@storybook/theming';
+import PackageInfo from '../package.json';
+
+/**
+ * @see https://storybook.js.org/docs/react/configure/theming
+ */
+export default create({
+  base: 'light',
+
+  // Typography
+  fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif",
+  fontCode:
+    "'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
+
+  brandTitle: `@carbon-labs React`,
+  brandUrl:
+    'https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react',
+});

packages/react/__mocks__/styleMock.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {};