Features/storybook: Basic Storybook configuration (#1)

* [WIP] Almost there. We just need to fix ThemeDecorator

* Finish basic Storybook configuration

.storybook/decorators/index.ts

@@ -0,0 +1,10 @@
+/**
+ * This file is automatically generated!
+ *
+ * To regenerate the index, press cmd+shift+p then run the command
+ * "Generate Index"
+ */
+
+// @index('./*', f => `export { default as ${f.name} } from "${f.path}";`);
+export { default as themes } from "./themes";
+// @endindex

.storybook/decorators/themes.ts

@@ -0,0 +1,12 @@
+import { MarkoRenderer } from "@storybook/marko";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+
+export default withThemeByDataAttribute<MarkoRenderer>({
+  themes: {
+    "Figma Light": "light",
+    "Figma Dark": "dark",
+    FigJam: "figjam",
+  },
+  defaultTheme: "Figma Light",
+  attributeName: "data-theme",
+});

.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/marko-vite";
+
+export default {
+  stories: [
+    // "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|mjs|cjs|ts|mts|cts|marko)",
+    "../src/**/*.stories.@(js|mjs|cjs|ts|mts|cts|marko)",
+  ],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-themes",
+    "@storybook/addon-designs",
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-interactions",
+    "@storybook/addon-storysource",
+  ],
+  framework: {
+    name: "@storybook/marko-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+} satisfies StorybookConfig;

.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview, MarkoRenderer } from "@storybook/marko";
+
+import "../src/global.css";
+
+import "../src/themes/index.css";
+
+import * as decorators from "./decorators";
+
+export default {
+  decorators: [decorators.themes],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    layout: "centered",
+
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+} satisfies Preview;

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "jayfong.generate-index"
+  ]
+}

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
   "cSpell.words": [
+    "endindex",
+    "figjam",
     "marko"
   ]
 }

README.md

@@ -21,3 +21,45 @@ This project is powered by [@marko/run](https://github.com/marko-js/run).
 Pages map to the directory structure. You can add additional pages by creating files/directories under `src/routes` with `+page.marko` files.
 Learn more in the [`@marko/run` docs](https://github.com/marko-js/run/#file-based-routing).
 
+# To Do
+
+## Configure Addons
+
+### Documentation
+
+- [ ] [`@storybook/addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs/):
+
+  > Document component usage and properties in Markdown
+
+- [ ] [`storybook-addon-docs-tabs`](https://storybook.js.org/addons/storybook-addon-docs-tabs):
+
+  > A Storybook addon that adds tabs to the Docs Addon.
+
+  ![](https://raw.githubusercontent.com/cliedelt/storybook-addon-docs-tabs/HEAD/screenshot.png)
+
+- [ ] [`@storybook/addon-storysource`](https://storybook.js.org/addons/@storybook/addon-storysource/):
+
+  > View a story’s source code to see how it works and paste into your app
+
+  ![addon storysource preview](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/demo.gif)
+
+### Versioning and Publishing
+
+- [ ] Configure component statuses for [@etchteam/storybook-addon-status](https://github.com/etchteam/storybook-addon-status)
+
+### Prototyping
+
+- [ ] Configure [@storybook/addon-links](https://storybook.js.org/addons/@storybook/addon-links/)
+
+  > The Storybook Links addon can be used to create links that navigate between stories in Storybook.
+
+### Speeding up Development
+
+- [ ] [Create a custom ChatGPT to create stories](https://storybook.js.org/blog/build-your-own-storybook-gpt/)
+
+- [ ] [storybook-vscode-component](https://storybook.js.org/addons/storybook-vscode-component)
+
+  > A simple Storybook addon to open the component source in VS Code
+
+- [ ] [@storybook/addon-designs](https://storybookjs.github.io/addon-designs/?path=/docs/docs-quick-start--docs)
+  > Storybook addon for embedding your design preview in addon panel