@geenius/storybook

Shared storybook shell bridge and Vite preset for @geenius/* package demos.

@geenius/storybook gives package families a standard story surface contract, a shared shell runtime, a dedicated Vite preset subpath, and buildable React and SolidJS demo scaffolds without each package re-inventing navigation, keyboard shortcuts, theming, or comparison layouts.

The package deliberately ships two runtime styles per framework:

• Headless runtimes: @geenius/storybook/react, @geenius/storybook/solidjs
• Bundled CSS runtimes: @geenius/storybook/react-css, @geenius/storybook/solidjs-css

Installation

pnpm add @geenius/storybook

Supported Imports

| Import | Purpose | | --- | --- | | @geenius/storybook | Shared contract for surfaces, runtime helpers, and typed errors | | @geenius/storybook/shared | Explicit alias to the shared contract | | @geenius/storybook/runtime | Runtime-safe shared helpers and typed errors for browser code | | @geenius/storybook/vite | Config-only Vite preset entry for build-time integration | | @geenius/storybook/react | Headless React shell runtime | | @geenius/storybook/react-css | React shell runtime with bundled vanilla CSS | | @geenius/storybook/solidjs | Headless SolidJS shell runtime | | @geenius/storybook/solidjs-css | SolidJS shell runtime with bundled vanilla CSS |

Quick Start

1. Define a story surface

import { defineSurface } from "@geenius/storybook/runtime";

export const STORY_SURFACE = defineSurface([
  {
    title: "Primitives",
    stories: [
      {
        id: "button",
        label: "Button",
        description: "Primary button states and variants",
        tags: ["comparison", "forms"],
      },
    ],
  },
] as const);

2. Create a Vite config

import react from "@vitejs/plugin-react";
import { createStorybookViteConfig } from "@geenius/storybook/vite";

export default createStorybookViteConfig({
  framework: "react",
  port: 3060,
  plugins: [react()],
});

3. Mount the styled runtime

import { ReactStorybookApp } from "@geenius/storybook/react-css";

export function App() {
  return (
    <ReactStorybookApp
      packageName="@geenius/ui"
      frameworkLabel="React"
      overview="Shared component stories with the standard Geenius shell."
      sections={STORY_SURFACE}
      components={{
        button: () => <button>Button story</button>,
      }}
      defaultStoryId="button"
    />
  );
}

Headless vs CSS Variants

• Use @geenius/storybook/react or @geenius/storybook/solidjs when you want the shell runtime without bundled styles.
• Use @geenius/storybook/react-css or @geenius/storybook/solidjs-css when you want the same runtime with the standard vanilla CSS shell styling included.
• The package ships React and SolidJS demo apps in this repository as release-gate checks, not as part of the published npm contract.

Demo Apps

The repository includes React and SolidJS demo apps that act as the real-consumer verification surface for this package.

Both demos intentionally show the headless and bundled CSS runtime variants side by side while mounting the published @geenius/storybook/* exports. The demo sources live in the package repository and are exercised by the release gate rather than being part of the published npm contract.

Repository demo links:

• React demo app
• SolidJS demo app

Run them locally with:

pnpm --filter ./apps/storybook-react dev
pnpm --filter ./apps/storybook-solidjs dev

Release Gate

The package release gate requires all of the following to pass:

• pnpm build
• pnpm lint
• pnpm lint:apps
• pnpm test
• pnpm build:apps

License

MIT. See LICENSE.