Fix Frame & Accordion styling and set up their stories

Author: tobias-mintlify

.gitignore

@@ -35,6 +35,7 @@ yarn.lock
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.build-storybook.log
 
 # local env files
 .env

.npmignore

@@ -1,5 +1,5 @@
 # Storybook Tests
-/stories
+/.storybook
 
 # Source code (we publish webpack's results not the source code itself)
 /src

.storybook/main.js

@@ -0,0 +1,51 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5",
+  },
+  addons: [
+    "storybook-addon-themes",
+    "@storybook/addon-links",
+    "@storybook/addon-interactions",
+    "@storybook/addon-essentials",
+    {
+      /**
+       * Fix Storybook issue with PostCSS@8
+       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+       */
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
+  ],
+  core: {
+    builder: "webpack5",
+  },
+  webpackFinal: (config) => {
+    /**
+     * Add support for alias-imports
+     * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
+     */
+    config.resolve.alias = {
+      ...config.resolve?.alias,
+      "@": [path.resolve(__dirname, "../src/"), path.resolve(__dirname, "../")],
+    };
+
+    /**
+     * Fixes font import with /
+     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
+     */
+    config.resolve.roots = [
+      path.resolve(__dirname, "../public"),
+      "node_modules",
+    ];
+
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,41 @@
+import "../src/css/globals.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  themes: {
+    clearable: false,
+    icon: "lightning",
+    list: [
+      {
+        name: "Light Mode",
+        class: [],
+        color: "#ffffff",
+        default: true,
+      },
+      {
+        name: "Dark Mode",
+        // The class dark will be added to the body tag for Tailwind to work
+        class: ["dark"],
+        color: "#000000",
+      },
+    ],
+  },
+  backgrounds: {
+    values: [
+      {
+        name: "Light Background",
+        value: "#00000",
+      },
+      {
+        name: "Dark Background",
+        value: "#0F172A",
+      },
+    ],
+  },
+};

README.md

@@ -6,7 +6,7 @@ Mintlify uses Mintlify Components in customers' docs. We encourage you to use th
 
 # Designed for Next.js
 
-The project is designed for use in static side rendering where we don't have access to `document` or `window`. Thus, our webpack config has to use `mini-css-extract-plugin` instead of `style-loader`.
+The project is designed for use with static side rendering where we don't have access to `document` or `window`. Thus, our webpack config has to use `mini-css-extract-plugin` instead of `style-loader`.
 
 # Documentation