@aussieljk/forkbook 0.0.1-3 → 0.0.1-5

package/LICENSE

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
+Copyright (c) 2026 Lucas Knight
 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

package/README.md

@@ -1,21 +1,13 @@
-# Forkbook
+# 🪩 Forkbook
 
-[![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)
+[![npm](https://img.shields.io/npm/v/@aussieljk/forkbook?style=flat-square&color=555&labelColor=333&label=npm)](https://www.npmjs.com/package/@aussieljk/forkbook)
+[![licence](https://img.shields.io/npm/l/@aussieljk/forkbook?style=flat-square&color=555&labelColor=333&label=licence)](https://www.npmjs.com/package/@aussieljk/forkbook)
 
-Forkbook is a small, fast fork of [Storybook](https://github.com/storybookjs/storybook). Use it to develop, document and test UI components in isolation.
+Forkbook is a small, fast workshop for UI components. Use it to develop, document and test components in isolation. It reads Storybook stories (CSF) and MDX docs.
 
-- 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.
+It supports React with Vite, Next.js with Vite, and React Native (iOS, Expo).
 
-## Start
+## Install
 
 ```sh
 bun add -d @aussieljk/forkbook
@@ -23,56 +15,46 @@ bunx forkbook init
 bunx forkbook dev
 ```
 
-`.forkbook/main.ts`:
-
 ```ts
-import type { StorybookConfig } from '@aussieljk/forkbook/react-vite';
+import type { Meta, StoryObj } 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'],
-};
+## Quick start
 
-export default config;
-```
+- React with Vite: [forkbook.ljk.dev/docs/get-started/frameworks/react-vite](https://forkbook.ljk.dev/docs/get-started/frameworks/react-vite)
+- Next.js with Vite: [forkbook.ljk.dev/docs/get-started/frameworks/nextjs-vite](https://forkbook.ljk.dev/docs/get-started/frameworks/nextjs-vite)
+- React Native (iOS): [forkbook.ljk.dev/docs/get-started/frameworks/react-native](https://forkbook.ljk.dev/docs/get-started/frameworks/react-native)
 
-## Subpaths
+## Forkbook and Storybook
 
-| 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` |
+| | Forkbook | Storybook 10.6 |
+|---|---|---|
+| Packages | One: `@aussieljk/forkbook` | One for the core, plus one for each framework, renderer and addon |
+| Frameworks | React (Vite), Next.js (Vite), React Native (iOS) | React, Vue, Angular, Svelte, Preact, Web Components and more |
+| Bundler | Vite 8 only | Vite and webpack |
+| UI styles | CSS variables and CSS modules | Emotion |
+| Syntax highlight | sugar-high | react-syntax-highlighter (Prism) |
+| Component docs | tsgo (TypeScript native) | react-docgen |
+| Source formatter | oxfmt | Prettier |
+| File watcher | @parcel/watcher | watchpack |
+| React Native UI | Expo UI (SwiftUI sheets, slider, date picker) and SF Symbols | @gorhom/bottom-sheet, react-native-svg, community slider and date picker |
+| Unpacked size (web and React Native packages) | 25.8 MB | 28.9 MB (`storybook`, `@storybook/react-vite`, `react`, `builder-vite`, `react-dom-shim`, `addon-docs`, `addon-a11y`, `addon-vitest`, `nextjs-vite` and the six React Native packages) |
+| Telemetry | Off | On (you can turn it off) |
 
-## Telemetry with OpenTelemetry (for example SigNoz)
+## Moving from Storybook
 
-Forkbook sends nothing by default. To send data to your own OpenTelemetry backend:
+Replace the packages with `@aussieljk/forkbook` and change the imports. See [forkbook.ljk.dev/docs/migrate/from-storybook](https://forkbook.ljk.dev/docs/migrate/from-storybook).
 
-```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
-```
+## Notes
 
-- 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.
+- Telemetry: Forkbook sends nothing. To send traces and logs to your own OpenTelemetry server, set `OTEL_EXPORTER_OTLP_ENDPOINT` ([telemetry](https://forkbook.ljk.dev/docs/configure/telemetry)).
 
-## Develop
+## Links
 
-See [CLAUDE.md](./CLAUDE.md) for the commands. `bun run verify` builds, type-checks and tests the repo.
+- Docs: [forkbook.ljk.dev](https://forkbook.ljk.dev)
+- Docs for agents: [forkbook.ljk.dev/llms.txt](https://forkbook.ljk.dev/llms.txt) (add `.md` to any docs page URL for markdown)
+- Source: [github.com/aussieljk/forkbook](https://github.com/aussieljk/forkbook). To work on it, see [CLAUDE.md](https://github.com/aussieljk/forkbook/blob/master/CLAUDE.md). `bun run verify` builds, type-checks and tests the repo.
 
 ## Licence
 
-MIT. Forkbook is a fork of Storybook. See [LICENSE](./LICENSE).
+MIT.

package/dist/_browser-chunks/{Color-PSH7RHPM.js → Color-GTF4GM7L.js}

@@ -578,7 +578,7 @@ var require_color_convert = __commonJS({
 // src/addon-docs/blocks/controls/Color.tsx
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Form, PopoverProvider } from "@aussieljk/forkbook/internal/components";
-import { MarkupIcon } from "@storybook/icons";
+import { CodeIcon } from "@phosphor-icons/react";
 var import_color_convert = __toESM(require_color_convert(), 1);
 
 // ../../node_modules/react-colorful/dist/index.mjs
@@ -796,13 +796,13 @@ var xe = { defaultColor: "rgba(0, 0, 0, 1)", toHsva: j, fromHsva: function(e2) {
   return e.createElement(re, l({}, r2, { colorModel: xe }));
 };
 
-// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/controls/Color.module.css
+// storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/addon-docs/blocks/controls/Color.module.css
 var id = "core/src/addon-docs/blocks/controls/Color.module.css";
 if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id}"]`)) {
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id), style.textContent = '.fb-jgXPQa-wrapper{max-width:250px;position:relative}.fb-jgXPQa-tooltipContent{width:200px;margin:5px;& .react-colorful__saturation{border-radius:4px 4px 0 0}& .react-colorful__hue{box-shadow:inset 0 0 0 1px #0000000d}& .react-colorful__last-control{border-radius:0 0 4px 4px}}.fb-jgXPQa-swatches{grid-template-columns:repeat(9,16px);gap:6px;width:200px;margin-top:5px;padding:3px;display:grid}.fb-jgXPQa-swatch{--checkers:url("data:image/svg+xml;charset=utf-8,<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" fill-opacity=\\"0.05\\" fill=\\"black\\"><path d=\\"M8 0h8v8H8zM0 8h8v8H0z\\"/></svg>");width:16px;height:16px;box-shadow:var(--fb-app-border-color) 0 0 0 1px inset;border-radius:var(--fb-app-border-radius);border:none;&,&:hover{background:unset;background-color:unset;background-image:linear-gradient(var(--fb-swatch-color), var(--fb-swatch-color)), var(--checkers)}&[data-selected]{box-shadow:var(--fb-app-border-color) 0 0 0 1px inset, rgb(from var(--fb-text-muted-color) r g b / .31) 0 0 0 4px}}:where([data-fb-theme=dark]) .fb-jgXPQa-swatch{--checkers:url("data:image/svg+xml;charset=utf-8,<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" fill-opacity=\\"0.05\\" fill=\\"white\\"><path d=\\"M8 0h8v8H8zM0 8h8v8H0z\\"/></svg>")}.fb-jgXPQa-input{box-sizing:border-box;width:100%;font-family:var(--fb-font-base);padding-left:30px;padding-right:30px;[aria-readonly=true]>&{background:var(--fb-color-lighter)}}:where([data-fb-theme=dark]) [aria-readonly=true]>.fb-jgXPQa-input{background:0 0}.fb-jgXPQa-popoverTrigger{z-index:1;cursor:pointer;position:absolute;top:4px;left:4px;&:disabled,&[aria-disabled=true]{cursor:not-allowed}}.fb-jgXPQa-cycleColorSpaceButton{z-index:1;box-sizing:border-box;cursor:pointer;width:20px;height:20px;color:var(--fb-input-color);padding:4px;position:absolute;top:6px;right:7px}', document.head.appendChild(style);
 }
-var Color_default = { tooltipContent: "fb-jgXPQa-tooltipContent", swatch: "fb-jgXPQa-swatch", input: "fb-jgXPQa-input", popoverTrigger: "fb-jgXPQa-popoverTrigger", cycleColorSpaceButton: "fb-jgXPQa-cycleColorSpaceButton", wrapper: "fb-jgXPQa-wrapper", swatches: "fb-jgXPQa-swatches" };
+var Color_default = { input: "fb-jgXPQa-input", wrapper: "fb-jgXPQa-wrapper", cycleColorSpaceButton: "fb-jgXPQa-cycleColorSpaceButton", swatches: "fb-jgXPQa-swatches", popoverTrigger: "fb-jgXPQa-popoverTrigger", tooltipContent: "fb-jgXPQa-tooltipContent", swatch: "fb-jgXPQa-swatch" };
 
 // src/addon-docs/blocks/controls/Color.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -1014,7 +1014,7 @@ var swatchStyle = (color) => ({ "--fb-swatch-color": color }), ColorSpace = /* @
         ariaLabel: "Cycle through color spaces",
         disabled: readOnly,
         onClick: readOnly ? void 0 : cycleColorSpace,
-        children: jsx(MarkupIcon, {})
+        children: jsx(CodeIcon, {})
       }
     ) : null
   ] });

package/dist/_browser-chunks/{WithTooltip-JLXUJSYD.js → WithTooltip-V55S6YCY.js}

@@ -1423,13 +1423,13 @@ function usePopperTooltip(config, popperOptions) {
   }, popperProps);
 }
 
-// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/components/components/tooltip/WithTooltip.module.css
+// storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/components/components/tooltip/WithTooltip.module.css
 var id = "core/src/components/components/tooltip/WithTooltip.module.css";
 if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id}"]`)) {
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id), style.textContent = ".fb-QoytUq-wrapper{--tooltip-bg:#fffffff2;z-index:2147483647;color-scheme:light dark;display:inline-block;&[data-chrome]{background:var(--tooltip-bg);filter:drop-shadow(0 5px 5px #0000000d)drop-shadow(0 1px 3px #0000001a);border-radius:calc(var(--fb-app-border-radius) + 2px);font-family:var(--fb-font-base);font-size:var(--fb-size-s1)}}:where([data-fb-theme=dark]) .fb-QoytUq-wrapper:not([data-color]){--tooltip-bg:var(--fb-background-app)}.fb-QoytUq-arrow{border:8px solid #0000;position:absolute;inset:auto;&[data-side=top]{border-bottom-width:0;border-top-color:var(--tooltip-bg);bottom:-8px;transform:translate(8px)}&[data-side=bottom]{border-top-width:0;border-bottom-color:var(--tooltip-bg);top:-8px;transform:translate(8px)}&[data-side=left]{border-right-width:0;border-left-color:var(--tooltip-bg);right:-8px;transform:translateY(8px)}&[data-side=right]{border-left-width:0;border-right-color:var(--tooltip-bg);left:-8px;transform:translateY(8px)}}.fb-QoytUq-target{cursor:pointer;display:inline-block;&[data-hover]{cursor:default}}.fb-QoytUq-targetSvg{cursor:pointer;&[data-hover]{cursor:default}}", document.head.appendChild(style);
 }
-var WithTooltip_default = { wrapper: "fb-QoytUq-wrapper", target: "fb-QoytUq-target", targetSvg: "fb-QoytUq-targetSvg", arrow: "fb-QoytUq-arrow" };
+var WithTooltip_default = { targetSvg: "fb-QoytUq-targetSvg", wrapper: "fb-QoytUq-wrapper", target: "fb-QoytUq-target", arrow: "fb-QoytUq-arrow" };
 
 // src/components/components/tooltip/WithTooltip.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/_browser-chunks/{chunk-PPZ2HCWJ.js → chunk-6ELMKWKX.js}

@@ -5,7 +5,7 @@ import {
 // src/addon-docs/blocks/components/EmptyBlock.tsx
 import { withReset } from "@aussieljk/forkbook/internal/components";
 
-// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/EmptyBlock.module.css
+// storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/addon-docs/blocks/components/EmptyBlock.module.css
 var id = "core/src/addon-docs/blocks/components/EmptyBlock.module.css";
 if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id}"]`)) {
   let style = document.createElement("style");

package/dist/_browser-chunks/{chunk-EE42XVSP.js → chunk-HOSBMS2F.js}

@@ -1,15 +1,15 @@
 import {
   EmptyBlock
-} from "./chunk-PPZ2HCWJ.js";
+} from "./chunk-6ELMKWKX.js";
 import {
   clsx
 } from "./chunk-CNED6RYH.js";
 
 // src/addon-docs/blocks/components/SnippetWarning.tsx
 import { Button } from "@aussieljk/forkbook/internal/components";
-import { AlertIcon } from "@storybook/icons";
+import { WarningIcon } from "@phosphor-icons/react";
 
-// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/SnippetWarning.module.css
+// storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/addon-docs/blocks/components/SnippetWarning.module.css
 var id = "core/src/addon-docs/blocks/components/SnippetWarning.module.css";
 if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id}"]`)) {
   let style = document.createElement("style");
@@ -28,7 +28,7 @@ var SNIPPET_WARNING_LABEL = "Incomplete code snippet", SnippetWarning = ({ warni
     variant: "ghost",
     size: "small",
     padding: "small",
-    children: jsx(AlertIcon, {})
+    children: jsx(WarningIcon, {})
   }
 ) : null;
 
@@ -36,13 +36,13 @@ var SNIPPET_WARNING_LABEL = "Incomplete code snippet", SnippetWarning = ({ warni
 import { SyntaxHighlighter } from "@aussieljk/forkbook/internal/components";
 import { ThemeProvider, convert, themes, useTheme } from "@aussieljk/forkbook/theming";
 
-// storybook-css:/Users/ljk/p/repos/storybook/code/core/src/addon-docs/blocks/components/Source.module.css
+// storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/addon-docs/blocks/components/Source.module.css
 var id2 = "core/src/addon-docs/blocks/components/Source.module.css";
 if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id2}"]`)) {
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id2), style.textContent = ".fb-I61SDG-syntaxHighlighter{font-size:calc(var(--fb-size-s2) - 1px);border-radius:var(--fb-app-border-radius);margin:25px 0 40px;line-height:19px;box-shadow:0 1px 3px #0000001a;& pre.fb-I61SDG-prismjs{background:inherit;padding:20px}}.fb-I61SDG-snippetWarning{z-index:1;position:absolute;top:4px;right:4px}.fb-I61SDG-sourceWrapper{position:relative}.fb-I61SDG-skeletonWrapper{background:var(--fb-background-content);border-radius:var(--fb-app-border-radius);border:1px solid var(--fb-app-border-color);margin:25px 0 40px;padding:20px 20px 20px 22px;box-shadow:0 1px 3px #0000001a}:where([data-fb-theme=dark]){& .fb-I61SDG-syntaxHighlighter,& .fb-I61SDG-skeletonWrapper{box-shadow:0 2px 5px #0003}}.fb-I61SDG-skeletonPlaceholder{background:var(--fb-app-border-color);width:60%;height:17px;margin-top:1px;animation:1.5s ease-in-out infinite fb-I61SDG-glow;&:first-child{margin:0}}@keyframes fb-I61SDG-glow{0%,to{opacity:1}50%{opacity:.4}}", document.head.appendChild(style);
 }
-var Source_default = { sourceWrapper: "fb-I61SDG-sourceWrapper", glow: "fb-I61SDG-glow", syntaxHighlighter: "fb-I61SDG-syntaxHighlighter", skeletonPlaceholder: "fb-I61SDG-skeletonPlaceholder", prismjs: "fb-I61SDG-prismjs", snippetWarning: "fb-I61SDG-snippetWarning", skeletonWrapper: "fb-I61SDG-skeletonWrapper" };
+var Source_default = { skeletonPlaceholder: "fb-I61SDG-skeletonPlaceholder", snippetWarning: "fb-I61SDG-snippetWarning", sourceWrapper: "fb-I61SDG-sourceWrapper", skeletonWrapper: "fb-I61SDG-skeletonWrapper", prismjs: "fb-I61SDG-prismjs", glow: "fb-I61SDG-glow", syntaxHighlighter: "fb-I61SDG-syntaxHighlighter" };
 
 // src/addon-docs/blocks/components/Source.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";