feat: update ui

[marcustisater-kivra]

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:

[gustensund]

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

What does this mean? I mean what happens when you do?

[marcustisater-kivra]

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

What does this mean? I mean what happens when you do?

@gustensund it will set up a page at the root / route, which is the landing page when you visit the styleguide, https://github.com/kivra/toybox/blob/feat/redesign-app/src/webapp/index.tsx#L18-L33. I think it would be nice to show release notes or something else, you will have to add that startpage story in your styleguide project.