极速赛车开奖官网开奖记录168官方网站 Storybook is a frontend workshop for building 极速赛车官网开奖记录查询结果-结果开奖官网直播168记录历史查询 UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.
Implement components and pages without needing to fuss with data, APIs, or business logic.
Why build UIs in isolation?Render components in key states that are tricky to reproduce in an app. Then save those states as stories to revisit during development, testing, and QA.
How to write a storyAddons extend and customize your UI development workflow. There are hundreds of addons that help you build UI faster, document component libraries, and integrate with other tools.
Once you finish developing UI components in isolation, drop them into your app. You'll have confidence that the components are hardened to support every possible edge case.
Storybook is incrementally adoptable and integrates with industry-standard tools. That means your team doesn't have to change their workflow.
Browse integrations“Storybook is a powerful frontend workshop environment tool that allows teams to design, build, and organize UI components (and even full screens!) without getting tripped up over business logic and plumbing.”
Stories capture the “known good” states of UI components. They're a pragmatic, reproducible way to keep track of UI edge cases. Reuse stories to power automated tests
“The tool we use for editing UI is Storybook. It is the perfect place to make sure your work aligns with designs to the pixel across breakpoints.”
Storybook brings together UI, examples, and documentation in one place. That helps your team adopt existing UI patterns.
“Storybook has made developing components more streamlined by allowing us to easily include technical documentation within our design system!”
Stories show how UIs actually work not just a static design of how they're supposed to work. That keeps everyone aligned on what's currently in production.
Publish Storybook as a website for stakeholders to reference. Your team can check that the UI looks right without touching code.
Publish StorybookEmbed stories to showcase your work to teammates and the developer community. Works with the oEmbed standard.
Embed storiesStories are a portable standard based on ES6 modules. Write stories once and import them into any JavaScript library.
Reuse stories in tests and librariesimport React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
import { composeStories } from '@storybook/testing-react';
import * as stories from './UserCard.stories';
// Compile the "MissingProfileImage" story
const { MissingProfileImage } = composeStories(stories);
let container = null;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
unmountComponentAtNode(container);
container.remove();
container = null;
});
it('renders a fallback profile image', () => {
// Render the story
act(() => {
render(<MissingProfileImage />, container);
});
// Verify the DOM structure
expect(container.querySelector('img').getAttribute('src'))
.toEqual(
'/images/user-fallback.png'
);
});
“Storybook is my go-to when starting a new design system. It makes getting something in place quick and easy for both design and engineering.”
Add Storybook as a CI step to automate the UI development workflow. That helps you and your team ship faster with less manual work.
The top frontend engineering teams rely on Storybook to ship world-changing products. Join our open source community to learn new techniques and get support.