Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: kivra/toybox
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.7.0
Choose a base ref
...
head repository: kivra/toybox
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v2.0.0
Choose a head ref
  • 2 commits
  • 37 files changed
  • 1 contributor

Commits on Jul 3, 2024

  1. feat: update ui (#46) 

    BREAKING CHANGE: 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`.

```ts
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

```tsx
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:

![ui-update-toybox](https://github.com/kivra/toybox/assets/77273035/8c696731-79e0-447b-8923-535af19d686d)
    @marcustisater-kivra
    marcustisater-kivra authored Jul 3, 2024
    Configuration menu
    Copy the full SHA
    0afda86 View commit details
    Browse the repository at this point in the history

  2. fix: add node version to actions/setup-node (#48)

    @marcustisater-kivra
    marcustisater-kivra authored Jul 3, 2024
    Configuration menu
    Copy the full SHA
    bc05c3f View commit details
    Browse the repository at this point in the history
Loading