@aussieljk/forkbook 0.0.0-stage → 0.0.1-2

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Storybook
+Copyright (c) 2026 Lucas Knight (Forkbook)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -1,3 +1,78 @@
-# Temporary Holding Version
+# Forkbook
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@aussieljk/forkbook?label=npm)](https://www.npmjs.com/package/@aussieljk/forkbook)
+[![Docs](https://img.shields.io/badge/docs-forkbook.ljk.dev-0F766E)](https://forkbook.ljk.dev)
+
+Forkbook is a small, fast fork of [Storybook](https://github.com/storybookjs/storybook). Use it to develop, document and test UI components in isolation.
+
+- npm: [`@aussieljk/forkbook`](https://www.npmjs.com/package/@aussieljk/forkbook)
+- Docs: [forkbook.ljk.dev](https://forkbook.ljk.dev)
+
+## What is different
+
+- It is one package. The renderer, the frameworks, the Vite builder, the addons and the CLI are subpaths of `@aussieljk/forkbook`.
+- It supports only React with Vite and Next.js with Vite.
+- The CLI is `forkbook`, and the config folder is `.forkbook`.
+- It sends no telemetry, unless you set an OpenTelemetry endpoint.
+
+## Start
+
+```sh
+bun add -d @aussieljk/forkbook
+bunx forkbook init
+bunx forkbook dev
+```
+
+`.forkbook/main.ts`:
+
+```ts
+import type { StorybookConfig } from '@aussieljk/forkbook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+  framework: '@aussieljk/forkbook/react-vite',
+  addons: ['@aussieljk/forkbook/addon-docs', '@aussieljk/forkbook/addon-a11y'],
+};
+
+export default config;
+```
+
+## Subpaths
+
+| Subpath | Use |
+|---|---|
+| `@aussieljk/forkbook/react-vite` | React with Vite (framework) |
+| `@aussieljk/forkbook/nextjs-vite` | Next.js with Vite (framework) |
+| `@aussieljk/forkbook/react` | React renderer and types |
+| `@aussieljk/forkbook/addon-docs` | Docs pages and MDX |
+| `@aussieljk/forkbook/addon-a11y` | Accessibility checks |
+| `@aussieljk/forkbook/addon-vitest` | Run stories as Vitest tests |
+| `@aussieljk/forkbook/addon-themes` | Theme switcher |
+| `@aussieljk/forkbook/addon-links` | Links between stories |
+| `@aussieljk/forkbook/addon-pseudo-states` | Hover, focus and active states |
+| `@aussieljk/forkbook/addon-mcp` | MCP server for agents |
+| `@aussieljk/forkbook/test` | `fn`, `expect` and `userEvent` |
+
+## Telemetry with OpenTelemetry (for example SigNoz)
+
+Forkbook sends nothing by default. To send data to your own OpenTelemetry backend:
+
+```sh
+bun add -d @opentelemetry/api @opentelemetry/context-async-hooks @opentelemetry/sdk-trace-base \
+  @opentelemetry/sdk-logs @opentelemetry/exporter-trace-otlp-http \
+  @opentelemetry/exporter-logs-otlp-http @opentelemetry/resources
+OTEL_EXPORTER_OTLP_ENDPOINT=https://signoz.example.com bunx forkbook dev
+```
+
+- Traces: one span for each command (`forkbook dev`, `forkbook build`, `forkbook init`), with child spans for the story index, the manager start and the preview start.
+- Logs: one record for each Forkbook event (`forkbook.dev`, `forkbook.build`, `forkbook.save-story`, and more). The data is anonymous and has no file paths.
+- The standard variables apply: `OTEL_SERVICE_NAME` (default `forkbook`), `OTEL_EXPORTER_OTLP_HEADERS` (for example an ingestion key).
+- `core.disableTelemetry: true` in `main.ts` stops the event logs.
+
+## Develop
+
+See [CLAUDE.md](./CLAUDE.md) for the commands. `bun run verify` builds, type-checks and tests the repo.
+
+## Licence
+
+MIT. Forkbook is a fork of Storybook. See [LICENSE](./LICENSE).

package/assets/addon-vitest/templates/vitest.config.4.template.ts

@@ -0,0 +1,36 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@aussieljk/forkbook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Forkbook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, 'CONFIG_DIR') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
+  },
+});

package/assets/browser/favicon-wrapper.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <defs>
+    <mask id="active-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M25,15.3 C26.8630998,15.3 28.7261995,16.2284418 29.795607,18.0853254 L29.795607,18.0853254 L34.7484772,26.6853254 C35.2679728,27.5873604 35.5068948,28.5446245 35.509009,29.4780654 C35.5112408,30.4762222 35.243212,31.4466974 34.7610935,32.2926531 C34.2789749,33.1386087 33.5826171,33.8603071 32.7267084,34.3600412 C31.9262928,34.8273748 30.9864445,35.1 29.9528702,35.1 L29.9528702,35.1 L20.0471298,35.1 C19.0135555,35.1 18.0737072,34.8273748 17.2732916,34.3600412 C16.4173829,33.8603071 15.7210251,33.1386087 15.2389065,32.2926531 C14.756788,31.4466974 14.4887592,30.4762222 14.490991,29.4780654 C14.4931052,28.5446245 14.7320272,27.5873604 15.2515228,26.6853254 L15.2515228,26.6853254 L20.204393,18.0853254 C21.2738005,16.2284418 23.1369002,15.3 25,15.3 Z"
+        transform="rotate(90 25 25.2)" />
+    </mask>
+    <mask id="critical-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M23.9,14.6 C26.7442665,14.6 29.3192665,15.7528668 31.1831998,17.6168002 C33.0471332,19.4807335 34.2,22.0557335 34.2,24.9 C34.2,27.7442665 33.0471332,30.3192665 31.1831998,32.1831998 C29.3192665,34.0471332 26.7442665,35.2 23.9,35.2 C21.0557335,35.2 18.4807335,34.0471332 16.6168002,32.1831998 C14.7528668,30.3192665 13.6,27.7442665 13.6,24.9 C13.6,22.0557335 14.7528668,19.4807335 16.6168002,17.6168002 C18.4807335,15.7528668 21.0557335,14.6 23.9,14.6 Z" />
+    </mask>
+    <mask id="negative-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M28.2,14.8 C29.633165,14.8 31.06633,15.346734 32.159798,16.440202 C33.2414078,17.5218119 33.7880833,18.9357904 33.8,20.353376 C33.811544,21.7725108 33.2872104,23.1952877 32.2266806,24.2917914 L32.2266806,24.2917914 L31.7206,24.8006729 L32.159798,25.240202 C33.253266,26.33367 33.8,27.766835 33.8,29.2 C33.8,30.633165 33.253266,32.06633 32.159798,33.159798 C31.0781881,34.2414078 29.6642096,34.7880833 28.246624,34.8 C26.8274892,34.811544 25.4047123,34.2872104 24.3082086,33.2266806 L24.3082086,33.2266806 L23.7993271,32.7206 L23.359798,33.159798 C22.26633,34.253266 20.833165,34.8 19.4,34.8 C17.966835,34.8 16.53367,34.253266 15.440202,33.159798 C14.3585922,32.0781881 13.8119167,30.6642096 13.8,29.246624 C13.788456,27.8274892 14.3127896,26.4047123 15.3733194,25.3082086 L15.3733194,25.3082086 L15.8794,24.7993271 L15.440202,24.359798 C14.346734,23.26633 13.8,21.833165 13.8,20.4 C13.8,18.966835 14.346734,17.53367 15.440202,16.440202 C16.5218119,15.3585922 17.9357904,14.8119167 19.353376,14.8 C20.7725108,14.788456 22.1952877,15.3127896 23.2917914,16.3733194 L23.2917914,16.3733194 L23.8006729,16.8794 L24.240202,16.440202 C25.33367,15.346734 26.766835,14.8 28.2,14.8 Z" />
+    </mask>
+    <mask id="positive-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M29.7294207,16.9922805 C31.1625744,16.9866282 32.5979013,17.5276612 33.6957071,18.6167741 C34.7816077,19.6940761 35.3338993,21.1058704 35.351258,22.5233982 C35.3686336,23.9423122 34.8500808,25.3669976 33.7941627,26.4676563 L33.7941627,26.4676563 L27.1794488,33.1363075 C26.0960963,34.2283069 24.675298,34.7802389 23.2508341,34.7920857 C21.8249459,34.8039445 20.3953569,34.27469 19.296927,33.2041927 L19.296927,33.2041927 L15.7761737,29.656491 C14.6870608,28.5586851 14.1460279,27.1233582 14.1516801,25.6902046 C14.1574213,24.2570509 14.7098478,22.8260705 15.8076536,21.7369576 C16.7544861,20.7976225 17.9523748,20.2659173 19.1834383,20.1411672 C20.4372495,20.0141119 21.7255226,20.3088158 22.8178242,21.0249737 L22.8178242,21.0249737 L23.1781395,21.2667759 L25.7761737,18.648254 C26.8652867,17.5504481 28.2962671,16.9980217 29.7294207,16.9922805 Z" />
+    </mask>
+    <mask id="warning-mask">
+      <rect x="0" y="0" width="32" height="32" fill="#FFF" />
+      <path fill="#000" fill-rule="nonzero"
+        d="M23.8,14.8 C25.6808284,14.8 27.5616567,15.7284418 28.6412402,17.5853254 L28.6412402,17.5853254 L33.6412402,26.1853254 C34.1656792,27.0873604 34.4068747,28.0446245 34.409009,28.9780654 C34.4112621,29.9762222 34.1406828,30.9466974 33.6539766,31.7926531 C33.1672704,32.6386087 32.4642862,33.3603071 31.600233,33.8600412 C30.7922009,34.3273748 29.8434094,34.6 28.8,34.6 L28.8,34.6 L18.8,34.6 C17.7565906,34.6 16.8077991,34.3273748 15.999767,33.8600412 C15.1357138,33.3603071 14.4327296,32.6386087 13.9460234,31.7926531 C13.4593172,30.9466974 13.1887379,29.9762222 13.190991,28.9780654 C13.1931253,28.0446245 13.4343208,27.0873604 13.9587598,26.1853254 L13.9587598,26.1853254 L18.9587598,17.5853254 C20.0383433,15.7284418 21.9191716,14.8 23.8,14.8 Z" />
+    </mask>
+
+    <polygon id="active" fill="none" stroke="#029CFD" stroke-linejoin="round" stroke-width="2.8"
+      points="25 21 30 29.6 20 29.6" transform="rotate(90 25 25.3)" />
+    <circle id="critical" fill="none" cx="23.9" cy="24.9" r="4.7" stroke="#000" stroke-linejoin="round"
+      stroke-width="2.8" />
+    <path id="negative" fill="none" stroke="#F40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8"
+      d="M19.4,20.4 L28.2,29.2 M28.2,20.4 L19.4,29.2" />
+    <polyline id="positive" fill="none" stroke="#66BF3C" stroke-linecap="round" stroke-linejoin="round"
+      stroke-width="2.8" points="19.752 25.712 23.204 29.192 29.752 22.592" />
+    <polygon id="warning" fill="none" stroke="#FFAE00" stroke-linejoin="round" stroke-width="2.8"
+      points="23.8 20.4 28.8 29 18.8 29" />
+  </defs>
+
+  <g id="mask">
+    <use id="icon" />
+  </g>
+  <use id="status" />
+</svg>

package/assets/browser/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0F766E"/><g fill="#FFF"><rect x="20" y="10" width="5" height="20" rx="2.5"/><rect x="29.5" y="10" width="5" height="20" rx="2.5"/><rect x="39" y="10" width="5" height="20" rx="2.5"/><rect x="20" y="25" width="24" height="9" rx="4.5"/><rect x="28.5" y="30" width="7" height="25" rx="3.5"/></g></svg>

package/assets/builder-vite/iframe.html

@@ -0,0 +1,99 @@
+<!doctype html>
+<!--suppress HtmlUnknownTarget -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Forkbook</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
+
+    <script>
+      window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
+      window.LOGLEVEL = '[LOGLEVEL HERE]';
+      window.FRAMEWORK_OPTIONS = '[FRAMEWORK_OPTIONS HERE]';
+      window.CHANNEL_OPTIONS = '[CHANNEL_OPTIONS HERE]';
+      window.FEATURES = '[FEATURES HERE]';
+      window.STORIES = '[STORIES HERE]';
+      window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
+      window.TAGS_OPTIONS = '[TAGS_OPTIONS HERE]';
+
+      ('OTHER_GLOBALS HERE');
+
+      // We do this so that "module && module.hot" etc. in Forkbook source code
+      // doesn't fail (it will simply be disabled)
+      window.module = undefined;
+      window.global = window;
+    </script>
+    <!-- [HEAD HTML SNIPPET HERE] -->
+  </head>
+
+  <body>
+    <!-- [BODY HTML SNIPPET HERE] -->
+    <div id="storybook-root"></div>
+    <div id="storybook-docs"></div>
+    <script>
+      function __onViteAppLoadingError(event) {
+        const hostname = globalThis.location.hostname;
+        if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {
+          const message = `Failed to load the Forkbook preview file 'vite-app.js':
+
+      It looks like you're visiting the Forkbook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.
+      Please re-run your Forkbook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal.
+
+      See:`;
+          const docs = [
+            'https://storybook.js.org/docs/api/cli-options#dev',
+            'https://storybook.js.org/docs/api/main-config/main-config-vite-final',
+            'https://vite.dev/config/server-options.html#server-allowedhosts',
+          ];
+          console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`);
+
+          document.getElementById('storybook-root').innerHTML =
+            `<p style="color: red; max-width: 70ch">${message.replaceAll(
+              '\n',
+              '<br/>'
+            )}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}</ul></p>`;
+          return;
+        }
+      }
+    </script>
+    <script
+      type="module"
+      src="virtual:/@storybook/builder-vite/vite-app.js"
+      onerror="__onViteAppLoadingError(event)"
+    ></script>
+  </body>
+</html>

package/assets/create/rendererAssets/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "rules": {
+    "no-undef": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/extensions": "off"
+  },
+  "overrides": [
+    {
+      "files": ["nextjs/**/*.@(jsx|tsx)"],
+      "rules": {
+        "react/no-unknown-property": "off"
+      }
+    }
+  ]
+}