Set up autodocs and dark mode toggler.

cosmicds · May 29, 2024 · 439ad63 · 439ad63
1 parent 3b2b0a3
commit 439ad63
Show file tree

Hide file tree

Showing 6 changed files with 530 additions and 3 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -8,6 +8,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-docs",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/vue3-webpack5",

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -14,6 +14,12 @@ setup((app) => {
 });
 
 const preview: Preview = {
+  // TODO: This is what storybook tells us to do:
+  // https://storybook.js.org/docs/writing-docs/autodocs
+  // but doesn't seem to work. Why not?
+  // For now, we can work around this by marking each story
+  // with this tag
+  // tags: ["autodocs"],
   parameters: {
     controls: {
       matchers: {

diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "react": "^18.3.1",
     "storybook": "^8.0.9",
     "storybook-css-modules-preset": "^1.1.1",
+    "storybook-dark-mode": "^4.0.1",
     "style-loader": "^4.0.0",
     "typedoc": "^0.25.13",
     "typedoc-plugin-markdown": "^3.17.1",

diff --git a/src/stories/CreditLogos.stories.ts b/src/stories/CreditLogos.stories.ts
@@ -6,6 +6,7 @@ import CreditLogos from "../components/CreditLogos.vue";
 
 const meta: Meta<typeof CreditLogos> = {
   component: CreditLogos,
+  tags: ["autodocs"],
 };
 
 export default meta;

diff --git a/src/stories/IconButton.stories.ts b/src/stories/IconButton.stories.ts
@@ -11,6 +11,7 @@ library.add(faBookOpen);
 
 const meta: Meta<typeof IconButton> = {
   component: IconButton,
+  tags: ["autodocs"],
 };
 
 export default meta;