Skip to content

Latest commit

 

History

History
113 lines (85 loc) · 3.37 KB

README.md

File metadata and controls

113 lines (85 loc) · 3.37 KB

StoryMate

StoryMate is a Visual Studio Code extension that automatically generates Storybook stories for React components.

Features

  • Automatically generates .stories.tsx files for new React components.
  • Configurable directories to watch for new files.

Configuration

You can configure the directories to watch for new files by adding the following settings to your settings.json:

  • storyMate.watchDirectories
  • storyMate.templatePath
  • storyMate.fileExtensions

Defaults are configured as follows:

{
 "storyMate.watchDirectories": ["ui/src/components"],
 "storyMate.templatePath": "apps/storybook/.storybook/storyTemplate.hbs",
 "storyMate.fileExtensions": [".tsx", ".jsx"]
}

Tip

Use vscode file nesting for nice organization without folders.

Usage

Create a new React component file (e.g., Button.tsx) in one of the configured directories. The extension will automatically generate a companion .stories.tsx file (e.g., Button.stories.tsx) in the same directory.

Note

It is expected that addon-designs is installed and configured in Storybook

Example

Given a component file Button.tsx in the ui/src/components/interactions directory, the extension will generate a Button.stories.tsx file with the following content:

import type { Meta, StoryObj } from "@storybook/react";
import Button, { BUTTON_VARIANTS } from "./Button";

const meta = {
 title: "Interactions/Button",
 component: Button,
 argTypes: {
  variant: {
   options: BUTTON_VARIANTS,
   control: "select",
  },
  onPress: { action: "Pressed" },
 },
 args: {
  children: "Default Text",
 },
} satisfies Meta<typeof Button>;

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

export const Basic: Story = {
 parameters: {
  design: {
   type: "figma",
   url: "REPLACE_WITH_FIGMA_URL",
   allowFullscreen: true,
  },
 },
};

Note

It is expected that the Button.tsx will have BUTTON_VARIANTS exported.

Export BUTTON_VARIANTS as follows:

export type ButtonVariant = "primary" | "secondary" | "tertiary";

export const BUTTON_VARIANTS: ButtonVariant[] = ["primary", "secondary", "tertiary"];

Variables used

  • storiesFilePath: Full path of the new .stories.tsx file
  • componentName: Name of the component (e.g., "Button")
  • componentVariants: Component variants constant (e.g., "BUTTON_VARIANTS")
  • formattedDirName: Capitalized directory name (e.g., "Interactions")

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

TODO

  • auto-edit story on save
    • read variants and defaultVariants (and props from Component.tsx ?)
    • add variants and defaultVariants to story
    • make sure the current story figma url isn't overwritten
    • make sure the current story args children string isn't overwritten
    • add folder-based story title
  • update README
    • add available handlebars
  • bundle extension
  • add import defaultStoryTemplate.hbs to extension.ts
  • check if settings.json configuration works
  • check if custom template can be read from custom path
  • move functions to separate files (cleaner code)
  • make sure the current story isn't overwritten (update only argTypes and args)