@aussieljk/forkbook 0.0.1-4 → 0.0.1-6

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Lucas Knight
+Copyright (c) 2024 Storybook
+
+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,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-KRDPNBZS.js → Color-2BMQTRYG.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
@@ -802,7 +802,7 @@ 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 = { swatches: "fb-jgXPQa-swatches", swatch: "fb-jgXPQa-swatch", input: "fb-jgXPQa-input", popoverTrigger: "fb-jgXPQa-popoverTrigger", wrapper: "fb-jgXPQa-wrapper", tooltipContent: "fb-jgXPQa-tooltipContent", cycleColorSpaceButton: "fb-jgXPQa-cycleColorSpaceButton" };
+var Color_default = { wrapper: "fb-jgXPQa-wrapper", swatches: "fb-jgXPQa-swatches", swatch: "fb-jgXPQa-swatch", popoverTrigger: "fb-jgXPQa-popoverTrigger", cycleColorSpaceButton: "fb-jgXPQa-cycleColorSpaceButton", tooltipContent: "fb-jgXPQa-tooltipContent", input: "fb-jgXPQa-input" };
 
 // 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-GJACFWKM.js

@@ -0,0 +1,196 @@
+import {
+  PortalContainerContext,
+  PortalTheme,
+  index_parts_exports
+} from "./chunk-DPRGR3QP.js";
+import "./chunk-X7D777E6.js";
+import {
+  global
+} from "./chunk-6AKCRYVX.js";
+import "./chunk-IMSF75WX.js";
+
+// src/components/components/tooltip/WithTooltip.tsx
+import React, { useCallback, useContext, useEffect, useId, useState } from "react";
+import { deprecate } from "@aussieljk/forkbook/internal/client-logger";
+
+// 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 = { targetSvg: "fb-QoytUq-targetSvg", target: "fb-QoytUq-target", wrapper: "fb-QoytUq-wrapper", arrow: "fb-QoytUq-arrow" };
+
+// src/components/components/tooltip/WithTooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var { document: document2 } = global, Tooltip = React.forwardRef(
+  ({
+    placement = "top",
+    hasChrome = !0,
+    children,
+    arrowProps = {},
+    tooltipRef,
+    color,
+    withArrows,
+    hidden,
+    className,
+    style,
+    ...props
+  }, ref) => jsxs(
+    "div",
+    {
+      "data-testid": "tooltip",
+      ref,
+      hidden,
+      ...props,
+      className: [WithTooltip_default.wrapper, className].filter(Boolean).join(" "),
+      style: { display: hidden ? "none" : void 0, ...style },
+      "data-chrome": hasChrome || void 0,
+      "data-color": color,
+      children: [
+        hasChrome && withArrows && jsx(
+          "div",
+          {
+            className: WithTooltip_default.arrow,
+            "data-side": placement.split("-")[0],
+            ...arrowProps,
+            "data-color": color
+          }
+        ),
+        children
+      ]
+    }
+  )
+);
+Tooltip.displayName = "Tooltip";
+var toSideAndAlign = (placement) => {
+  let [side, align = "center"] = placement.split("-");
+  return {
+    side: side === "auto" ? "top" : side,
+    align
+  };
+}, WithTooltipPure = ({
+  svg = !1,
+  trigger = "click",
+  closeOnOutsideClick = !1,
+  placement = "top",
+  hasChrome = !0,
+  defaultVisible = !1,
+  withArrows,
+  offset = [0, 8],
+  tooltip,
+  children,
+  delayHide = trigger === "hover" ? 200 : 0,
+  visible,
+  interactive: _interactive,
+  delayShow = trigger === "hover" ? 400 : 0,
+  strategy,
+  onVisibleChange,
+  portalContainer,
+  ...props
+}) => {
+  let Container = svg ? "g" : "div", triggers = trigger === null ? [] : Array.isArray(trigger) ? trigger : [trigger], isHover = triggers.includes("hover"), isClick = triggers.includes("click"), isFocus = triggers.includes("focus"), triggerId = useId(), [shown, setShown] = useState(defaultVisible), isVisible = visible ?? shown, setVisible = useCallback(
+    (next) => {
+      setShown(next), onVisibleChange?.(next);
+    },
+    [onVisibleChange]
+  ), onOpenChange = useCallback(
+    (open, { reason }) => {
+      reason === "trigger-press" && !isClick || reason === "trigger-hover" && !isHover || reason === "trigger-focus" && !isFocus || reason === "outside-press" && !closeOnOutsideClick || setVisible(open);
+    },
+    [isClick, isHover, isFocus, closeOnOutsideClick, setVisible]
+  ), contextContainer = useContext(PortalContainerContext), portalTarget = (typeof portalContainer == "string" ? document2.querySelector(portalContainer) : portalContainer) || contextContainer || document2.body;
+  return jsxs(index_parts_exports.Root, { open: isVisible, onOpenChange, triggerId, children: [
+    jsx(
+      index_parts_exports.Trigger,
+      {
+        id: triggerId,
+        nativeButton: !1,
+        openOnHover: isHover,
+        delay: delayShow,
+        closeDelay: delayHide,
+        render: jsx(
+          Container,
+          {
+            className: svg ? WithTooltip_default.targetSvg : WithTooltip_default.target,
+            "data-hover": isHover || void 0,
+            ...props
+          }
+        ),
+        children
+      }
+    ),
+    jsx(index_parts_exports.Portal, { container: portalTarget, children: jsx(PortalTheme, { children: jsx(
+      index_parts_exports.Positioner,
+      {
+        ...toSideAndAlign(placement),
+        sideOffset: offset[1],
+        alignOffset: offset[0],
+        collisionPadding: 8,
+        arrowPadding: 8,
+        positionMethod: strategy,
+        style: { zIndex: 2147483647 },
+        children: jsxs(
+          index_parts_exports.Popup,
+          {
+            initialFocus: !1,
+            finalFocus: !1,
+            render: jsx(Tooltip, { hasChrome }),
+            children: [
+              hasChrome && withArrows && jsx(index_parts_exports.Arrow, { render: jsx("div", { className: WithTooltip_default.arrow }) }),
+              typeof tooltip == "function" ? tooltip({ onHide: () => setVisible(!1) }) : tooltip
+            ]
+          }
+        )
+      }
+    ) }) })
+  ] });
+}, WithToolTipState = ({
+  startOpen = !1,
+  onVisibleChange: onChange,
+  ...rest
+}) => {
+  let [tooltipShown, setTooltipShown] = useState(startOpen), onVisibilityChange = useCallback(
+    (visibility) => {
+      onChange && onChange(visibility) === !1 || setTooltipShown(visibility);
+    },
+    [onChange]
+  );
+  return useEffect(() => {
+    let hide = () => onVisibilityChange(!1), handleKeyDown = (e) => {
+      e.key === "Escape" && hide();
+    };
+    document2.addEventListener("keydown", handleKeyDown, !1);
+    let iframes = Array.from(document2.getElementsByTagName("iframe")), unbinders = [];
+    return iframes.forEach((iframe) => {
+      let bind = () => {
+        try {
+          iframe.contentWindow.document && (iframe.contentWindow.document.addEventListener("click", hide), unbinders.push(() => {
+            try {
+              iframe.contentWindow.document.removeEventListener("click", hide);
+            } catch {
+            }
+          }));
+        } catch {
+        }
+      };
+      bind(), iframe.addEventListener("load", bind), unbinders.push(() => {
+        iframe.removeEventListener("load", bind);
+      });
+    }), () => {
+      document2.removeEventListener("keydown", handleKeyDown), unbinders.forEach((unbind) => {
+        unbind();
+      });
+    };
+  }), jsx(WithTooltipPure, { ...rest, visible: tooltipShown, onVisibleChange: onVisibilityChange });
+}, DeprecatedPure = (props) => (deprecate(
+  "WithTooltipPure is deprecated and will be removed in Forkbook 11. Please use WithTooltip instead."
+), jsx(WithTooltipPure, { "data-deprecated": "WithTooltipPure", ...props })), DeprecatedState = (props) => (deprecate(
+  "WithToolTipState is deprecated and will be removed in Forkbook 11. Please use WithTooltip instead."
+), jsx(WithToolTipState, { "data-deprecated": "WithToolTipState", ...props }));
+export {
+  Tooltip,
+  DeprecatedState as WithToolTipState,
+  WithToolTipState as WithTooltip,
+  DeprecatedPure as WithTooltipPure
+};

package/dist/_browser-chunks/chunk-6AKCRYVX.js

@@ -0,0 +1,6 @@
+// src/shared/global.ts
+var global = globalThis;
+
+export {
+  global
+};