First draft: add chromatic/storybook

.babelrc.json

@@ -0,0 +1,15 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}

.storybook/main.js

@@ -0,0 +1,17 @@
+/** @type { import('@storybook/html-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/html-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+}
+export default config

.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/html').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

_config.yml

@@ -48,6 +48,7 @@ exclude:
    - Dockerfile
  # theme test code
    - fixtures/
+   - stories/
 
 # Set a path/url to a logo that will be displayed instead of the title
 #logo: "/assets/images/just-the-docs.png"

package.json

@@ -1,13 +1,25 @@
 {
   "name": "just-the-docs",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "description": "A modern Jekyll theme for documentation",
   "repository": "just-the-docs/just-the-docs",
   "license": "MIT",
   "bugs": "https://github.com/just-the-docs/just-the-docs/issues",
   "devDependencies": {
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/blocks": "^7.0.7",
+    "@storybook/html": "^7.0.7",
+    "@storybook/html-webpack5": "^7.0.7",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.7",
     "stylelint": "^15.6.0",
     "stylelint-config-standard-scss": "^8.0.0"
   },
@@ -16,7 +28,9 @@
     "lint:css": "stylelint '**/*.scss'",
     "lint:formatting": "prettier --check '**/*.{scss,js,json}'",
     "format": "prettier --write '**/*.{scss,js,json}'",
-    "test": "npm run lint"
+    "test": "npm run lint",
+    "storybook": "bundle exec jekyll build && storybook dev -p 6006",
+    "build-storybook": "bundle exec jekyll build && storybook build"
   },
   "stylelint": {
     "ignoreFiles": [

stories/Introduction.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Example/Introduction" />
+
+# Storybook for Just the Docs
+
+A WIP [Storybook](https://storybook.js.org/) for Just the Docs.

stories/ui-components/Button.js

@@ -0,0 +1,11 @@
+import "../../_site/assets/css/just-the-docs-default.css"
+
+export const createButton = ({ variant = "default", label, size = "4" }) => {
+  const btn = document.createElement("button")
+  btn.type = "button"
+  btn.innerText = label
+
+  btn.className = ["btn", `btn-${variant}`, `fs-${size}`].join(" ")
+
+  return btn
+}

stories/ui-components/Button.stories.js

@@ -0,0 +1,68 @@
+import { createButton } from "./Button"
+
+export default {
+  title: "UI Components/Button",
+  tags: ["autodocs"],
+  render: ({ label, ...args }) => {
+    return createButton({ label, ...args })
+  },
+  argTypes: {
+    label: { control: "text" },
+    size: {
+      control: { type: "select" },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "primary", "purple", "blue", "green", "outline"],
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    variant: "default",
+    label: "Button",
+    size: 4,
+  },
+}
+
+export const Primary = {
+  args: {
+    variant: "primary",
+    label: "Button",
+    size: 4,
+  },
+}
+
+export const Purple = {
+  args: {
+    variant: "purple",
+    label: "Button",
+    size: 4,
+  },
+}
+
+export const Blue = {
+  args: {
+    variant: "blue",
+    label: "Button",
+    size: 4,
+  },
+}
+
+export const Green = {
+  args: {
+    variant: "green",
+    label: "Button",
+    size: 4,
+  },
+}
+
+export const Outline = {
+  args: {
+    variant: "outline",
+    label: "Button",
+    size: 4,
+  },
+}

stories/ui-components/Label.js

@@ -0,0 +1,10 @@
+import "../../_site/assets/css/just-the-docs-default.css"
+
+export const createLabel = ({ variant = "default", label, size = "4" }) => {
+  const btn = document.createElement("span")
+  btn.innerText = label
+
+  btn.className = ["label", `label-${variant}`, `fs-${size}`].join(" ")
+
+  return btn
+}

stories/ui-components/Label.stories.js

@@ -0,0 +1,68 @@
+import { createLabel } from "./Label"
+
+export default {
+  title: "UI Components/Label",
+  tags: ["autodocs"],
+  render: ({ label, ...args }) => {
+    return createLabel({ label, ...args })
+  },
+  argTypes: {
+    label: { control: "text" },
+    size: {
+      control: { type: "select" },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "purple", "blue", "green", "red", "yellow"],
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    variant: "default",
+    label: "Label",
+    size: 4,
+  },
+}
+
+export const Purple = {
+  args: {
+    variant: "purple",
+    label: "Label",
+    size: 4,
+  },
+}
+
+export const Blue = {
+  args: {
+    variant: "blue",
+    label: "Label",
+    size: 4,
+  },
+}
+
+export const Green = {
+  args: {
+    variant: "green",
+    label: "Label",
+    size: 4,
+  },
+}
+
+export const Red = {
+  args: {
+    variant: "red",
+    label: "Label",
+    size: 4,
+  },
+}
+
+export const Yellow = {
+  args: {
+    variant: "yellow",
+    label: "Label",
+    size: 4,
+  },
+}