Releases: kivra/toybox
Releases · kivra/toybox
v2.0.3
v2.0.2
v2.0.1
v2.0.0
2.0.0 (2024-07-03)
Bug Fixes
Features
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,
varianthas 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
importhas 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
npmPackageNamefield intoybox.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:
