@ea-work-org/embed-storybook-story

Reusable React UI component with a Storybook iframe wrapper (ExternalStory) that lets you embed stories anywhere (apps, Figma Sites code components).

Install

npm i @ea-work-org/embed-storybook-story

Usage

import { Button, ExternalStory } from "@ea-work-org/embed-storybook-story";

export function Demo() {
  return (
    <div>
      <Button variant="primary" size="lg">Buy now</Button>

      <ExternalStory
        baseUrl="https://your-team.github.io/design-system"
        storyId="button--primary"
        args={{ label: "Buy now", size: "lg", primary: true }}
        height={250}
        title="External Story"
      />
    </div>
  );
}

Figma Sites (Code Component)

import { defineProperties } from "figma:react";
import { Button, ExternalStory } from "@ea-work-org/embed-storybook-story";

export default function DSButton({ label = "Buy now" }) {
  return <Button>{label}</Button>;
}

defineProperties(DSButton, {
  label: { type: "string", defaultValue: "Buy now" },
});

Scripts

• npm run build – builds ESM/CJS + type declarations (via tsup).
• npm publish --access public – publishes your package (after login).