chore: add storybook

configs/storybook/.storybook/main.js

@@ -0,0 +1,57 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const monorepoRoot = path.resolve(__dirname, '../../../');
+
+module.exports = {
+  stories: [
+    'packages/*/src/**/*.stories.@(js|jsx|ts|tsx)',
+    'packages/*/src/**/*.stories.mdx',
+  ].map((story) => path.resolve(monorepoRoot, story)),
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-viewport',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+      ],
+    });
+
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      buffer: require.resolve('buffer/'),
+      stream: require.resolve('stream-browserify'),
+      crypto: require.resolve('crypto-browserify'),
+      path: require.resolve('path-browserify'),
+      fs: false,
+      os: require.resolve('os-browserify/browser'),
+    };
+
+    // Add Buffer polyfill
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      })
+    );
+
+    return config;
+  },
+};

configs/storybook/.storybook/preview.js

@@ -0,0 +1,10 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  layout: 'fullscreen',
+};

configs/storybook/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@mongodb-js/storybook-config",
+  "version": "1.0.0",
+  "description": "Storybook configuration for MongoDB Compass",
+  "main": "index.js",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-viewport": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/testing-library": "^0.2.2",
+    "storybook": "^7.6.17",
+    "ts-loader": "^9.5.1",
+    "buffer": "^6.0.3",
+    "stream-browserify": "^3.0.0",
+    "crypto-browserify": "^3.12.0",
+    "path-browserify": "^1.0.1",
+    "os-browserify": "^0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}