Skip to main content

Bridging Jotai and Storybook.

This package works with Node.js, Deno, Bun
This package works with Node.js
This package works with Deno
This package works with Bun
JSR Score
100%
Published
2 weeks ago (0.2.4)

storybook-jotai

Bridging Jotai and Storybook.

Synchronize Args and Atom.

Installation

npx jsr add @totto/storybook-jotai
yarn dlx jsr add @totto/storybook-jotai
pnpx jsr add @totto/storybook-jotai
bux jsr add @totto/storybook-jotai
import { jotaiDecolator } from "@totto/storybook-jotai";

Add the following components to your project.

jotaiDecolator.tsx

Example

Story Units

export const Primary: Story = {
  args: { state: true },
  parameters: {
    jotai: { state: stateAtom },
  },
  decorators: jotaiDecolator,
};

Meta Units

const meta = {
  title: "Example/JotaiButton",
  component: JotaiButton,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    state: { control: "boolean" },
  },
  decorators: jotaiDecolator,
} satisfies Meta<typeof JotaiButton>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: { state: true },
  parameters: {
    jotai: { state: stateAtom },
  },
};

Global

import React from "react";

import { Preview } from "@storybook/react";

const preview: Preview = {
  decorators: [jotaiDecolator],
};

export default preview;

For Developpers

We use Deno.

The version is .mise.toml.

Check

deno lint
deno fmt
deno check **/*.ts

Add Package

deno add @totto/storybook-jotai

Import symbol

import * as mod from "@totto/storybook-jotai/";

Add Package

npx jsr add @totto/storybook-jotai

Import symbol

import * as mod from "@totto/storybook-jotai/";

Add Package

yarn dlx jsr add @totto/storybook-jotai

Import symbol

import * as mod from "@totto/storybook-jotai/";

Add Package

pnpm dlx jsr add @totto/storybook-jotai

Import symbol

import * as mod from "@totto/storybook-jotai/";

Add Package

bunx jsr add @totto/storybook-jotai

Import symbol

import * as mod from "@totto/storybook-jotai/";