v2.0.0

2.0.0 (2024-07-03)

Bug Fixes

• add node version to actions/setup-node (#48) (bc05c3f)

Features

• update ui (#46) (0afda86)

BREAKING CHANGES

• This updates the ui parts of toybox, and introduces new properties to
  present stories in another way!

Startpage

You can now create a start page story. You can specify this in
toybox.config.js.

const config: Config = {
  startpageComponentPath: "startpage.story.md",
};

Story header properties

• Each story can now include a status type, which displays a Badge
  indicating the current status of a component.
• If you wish to change the background display of your story render,
  variant has a couple of styles that you can try!
• By using hideControls, codeTemplates spans the full width by hiding
  the property toolbar.
• A new type named import has been added, which illustrates how to
  import a component. Optionally, you can name another npm package in your
  story, otherwise it will default to what you specify the
  npmPackageName field in toybox.config.js.

Here is a breakdown of the new changes in the story file

header: {
    title: 'Button', // Title of story
    description:
      'Buttons communicate actions that users can take. Button labels express what action will occur when the user interacts with it.', // Description of the story.
    storyButtons: [
      // Demonstrates component import. Package name defaults to toybox.config.ts setting.
      {
        type: 'import'
        value: 'Button',
      },
      // Status of the component.
      {
        type: 'status',
        value: 'core' | 'not-supported' | 'deprecated';
      },
      // For 'github' type, URL is optional. It can be auto-generated from the component name or manually provided.
      { type: 'github' },
      // For figma `url` is a link to the design of the component.
      {
        type: 'figma',
        url: 'https://www.figma.com/',
      },
    ],
  },
  stories: [
    {
      name: 'How to use the Button component', // The name of this story
      center: true, // Should the component be in center or not
      hideControls: true, // Hides the prop toolbar
      /**
       * The code template will show how to use the component.
       * `props` is a string representation of all stings in a single line.
       * If you want to show the props on multi lines you can use `props.asMultiline(indentSpace)` instead.
       */
      codeTemplate: (props, children) => `
        <Button${props}>
          ${children}
        </Button>`,
      variant: "filled" | "transparent", // Optionally, you can switch to another background on the codeTemplate.
      render(},) {
        return (
          <YourComponent />
        );
      },
    };
  ]
};

Preview: