docs: update storybook

jtiala · Apr 18, 2024 · bf6c234 · bf6c234
1 parent 49bc61d
commit bf6c234
Show file tree

Hide file tree

Showing 4 changed files with 1,407 additions and 1,621 deletions.
diff --git a/apps/docs/.storybook/main.ts b/apps/docs/.storybook/main.ts
@@ -1,13 +1,28 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-import { dirname, join } from "path";
+import remarkGfm from "remark-gfm";
 
 const config: StorybookConfig = {
   stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-interactions"),
-    getAbsolutePath("@storybook/addon-a11y"),
+    "@storybook/addon-links",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        docs: false,
+      },
+    },
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/react-vite",
@@ -16,14 +31,13 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+    },
+  },
 };
 
-/**
- * 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): string {
-  return dirname(require.resolve(join(value, "package.json")));
-}
-
 export default config;
diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts
@@ -38,7 +38,13 @@ const preview: Preview = {
       },
     },
     actions: { argTypesRegex: "^on[A-Z].*" },
+    docs: {
+      controls: {
+        sort: "alpha",
+      },
+    },
     controls: {
+      sort: "alpha",
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -51,14 +51,16 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "7.6.10",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
-    "@storybook/blocks": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-vite": "7.6.10",
-    "@storybook/test-runner": "0.16.0",
+    "@storybook/addon-a11y": "8.0.8",
+    "@storybook/addon-docs": "8.0.8",
+    "@storybook/addon-essentials": "8.0.8",
+    "@storybook/addon-interactions": "8.0.8",
+    "@storybook/addon-links": "8.0.8",
+    "@storybook/addon-mdx-gfm": "8.0.8",
+    "@storybook/blocks": "8.0.8",
+    "@storybook/react": "8.0.8",
+    "@storybook/react-vite": "8.0.8",
+    "@storybook/test-runner": "0.17.0",
     "@themeless-ui/eslint-config": "workspace:*",
     "@themeless-ui/typescript-config": "workspace:*",
     "@types/react": "18.2.48",
@@ -67,8 +69,9 @@
     "axe-playwright": "2.0.1",
     "concurrently": "8.2.2",
     "eslint": "8.56.0",
+    "remark-gfm": "4.0.0",
     "serve": "14.2.1",
-    "storybook": "7.6.10",
+    "storybook": "8.0.8",
     "typescript": "5.3.3",
     "vite": "5.0.12",
     "wait-on": "7.2.0"