Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@chakra-ui/storybook-addon
Advanced tools
Readme
Use Chakra UI in your Storybook stories.
This Plugin wraps each of your stories with ChakraProvider
which can be configured using Storybook parameters.
yarn add -D @chakra-ui/storybook-addon
npm i -D @chakra-ui/storybook-addon
Add the addon to your configuration in .storybook/main.js
and disable the
emotion alias (available with Storybook >6.4).
module.exports = {
addons: ["@chakra-ui/storybook-addon"],
features: {
emotionAlias: false,
},
}
ChakraProvider
If you need to customize the props passed to ChakraProvider
for your stories
(to use a custom theme
, for example), you'll need to create custom Storybook
parameters.
To set global parameters for this addon, add a chakra
object to the
parameters
export in .storybook/preview.js
:
import myTheme from "../theme"
export const parameters = {
chakra: {
theme: myTheme,
},
}
The chakra
parameters take the same shape as the props
for ChakraProvider
.
See the ChakraProvider
props table to see the list of
possible parameters.
ChakraProvider
configuration for individual components or storiesStorybook allows you to define parameters at multiple levels: global, component, and story. We recommend setting default parameters at the global level, and overriding them at the component or story when necessary. See the Storybook Parameters documentation for more information.
You will be able to toggle your color mode with the button in the toolbar. It tries to sync with your theme through the localstorage key.
Get controls for the theming props variant
, size
and colorScheme
in your
stories with getThemingArgTypes(theme, componentName)
.
import { Meta, StoryFn } from "@storybook/react"
import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
import { theme } from "<your-theme>"
export default {
title: "Components / Forms / Button",
// get controls for `variant`, `size` and `colorScheme`
argTypes: getThemingArgTypes(theme, "Button"),
} as Meta
interface StoryProps extends ThemingProps<"Button"> {}
export const Basic: StoryFn<StoryProps> = (props) => (
<Button {...props}>Button</Button>
)
This will render input fields to choose the theming prop values:
FAQs
The official Storybook Addon for Chakra UI
The npm package @chakra-ui/storybook-addon receives a total of 55,155 weekly downloads. As such, @chakra-ui/storybook-addon popularity was classified as popular.
We found that @chakra-ui/storybook-addon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.