@storybook/ui
Advanced tools
The @storybook/ui package is a part of the Storybook ecosystem, which is an open-source tool for developing UI components in isolation for React, Vue, Angular, and many other frameworks. It provides the UI for Storybook, allowing developers to browse a component library, view the different states of each component, and interactively develop and test components.
Customizable UI
This feature allows developers to customize the Storybook UI according to their preferences or branding requirements by applying a custom theme.
import { addons } from '@storybook/addons';
import yourTheme from './yourTheme';
addons.setConfig({
theme: yourTheme,
});Navigation and Layout
Developers can configure the layout and navigation of the Storybook UI, including fullscreen mode, visibility of navigation and panels, panel positioning, sidebar animations, and keyboard shortcuts.
import { addons } from '@storybook/addons';
addons.setConfig({
isFullscreen: false,
showNav: true,
showPanel: true,
panelPosition: 'bottom',
sidebarAnimations: true,
enableShortcuts: true,
});Toolbar and Tool Configuration
This allows for the configuration of the toolbar and tools within the Storybook UI, including setting a default panel and applying a theme from the Storybook theming package.
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
addons.setConfig({
selectedPanel: 'storybook/actions/panel',
theme: themes.dark,
});Docz leverages MDX files to help you document your components easily. Unlike @storybook/ui, Docz focuses more on documentation aspects, providing a simpler setup for projects that primarily need documentation with live code examples.
Storybook UI the core UI of Storybook. It's a React based UI which you can initialize with a function. You can configure it by providing a provider API.
First you need to install @storybook/ui into your app.
yarn add @storybook/ui --dev
Then you need to create a Provider class like this:
import React from 'react';
import { Provider } from '@storybook/ui';
export default class MyProvider extends Provider {
getElements(type) {
return {};
}
renderPreview() {
return <p>This is the Preview</p>;
}
handleAPI(api) {
// no need to do anything for now.
}
}
Then you need to initialize the UI like this:
import global from 'global';
import { renderStorybookUI } from '@storybook/ui';
import Provider from './provider';
const { document } = global;
const roolEl = document.getElementById('root');
renderStorybookUI(roolEl, new Provider());
import { Provider } from '@storybook/ui';
class ReactProvider extends Provider {
handleAPI(api) {
api.setOptions({
// see available options in
// https://storybook.js.org/docs/react/configure/features-and-behavior
});
}
}
This API is used to pass thekind and stories list to storybook-ui.
import { Provider } from '@storybook/ui';
class ReactProvider extends Provider {
handleAPI(api) {
api.setStories([
{
kind: 'Component 1',
stories: ['State 1', 'State 2'],
},
{
kind: 'Component 2',
stories: ['State a', 'State b'],
},
]);
}
}
You can use to listen to the story change and update the preview.
import { Provider } from '@storybook/ui';
class ReactProvider extends Provider {
handleAPI(api) {
api.onStory((kind, story) => {
this.globalState.emit('change', kind, story);
});
}
}
If you like to add features to the Storybook UI or fix bugs, this is the guide you need to follow.
First of all, familiarize yourself with code used. Check the source folder for the source code.
This is a Redux app written based on the Mantra architecture.
It's a set of modules. You can see those modules at src/modules directory.
If you like to change the appearance of the UI, you need to look at the ui module. Change components at the components directory for UI tweaks.
You can also change containers(which are written with react-komposer) to add more data from the redux state.
The UI is mounted in the src/modules/ui/routes.js. Inside that, we have injected dependencies as well. Refer mantra-core for that.
We've injected the context and actions.
App context is the app which application context you initialize when creating the UI. It is initialized in the src/index.js file. It's a non serializable state. You can access the app context from containers and basically most of the place in the app.
So, that's the place to put app wide configurations and objects which won't changed after initialized. Our redux store is also stayed inside the app context.
Actions are the place we implement app logic in a Mantra app. Each module has a set of actions and they are globally accessible. These actions are located at <module>/actions directory.
They got injected into the app(when mounting) and you can access them via containers. If you are familiar with redux, this is exactly action creators. But they are not only limited to do redux stuff. Actions has the access to the app context, so literally it can do anything.
Core API (which is passed to the Provider with handleAPI method) is implemented in the api module. We put the provider passed by the user in the app context. Then api module access it and use it as needed.
Keyboard shortcuts are implemented in a bit different way. The final state of keyboard shortcuts is managed by the shortcuts module. But they are implemented in the ui module with src/modules/ui/configs/handle_routing.js
These shortcuts also can be called from main API using the handleShortcut method. Check the example app for the usage. That's implemented as an action in the shortcuts module.
The above action(or the handleShortcut method) accepts events as a constant defined by this module. They are defined in the src/libs/key_events.js. This is basically to serialize these events.
In react-storybook we need to pass these events from the preview iframe to the main app. That's the core reason for this.
TODO: state we use reach/router customized to query params
Stories are sorted in the order in which they were imported. This can be overridden by adding storySort to the Parameters for the stories in .storybook/preview.js:
addParameters({
options: {
storySort: (a, b) => a[1].id.localeCompare(b[1].id),
},
});
7.0.0-alpha.35 (October 5, 2022)
within & args updating in decorators #19207FAQs
Core Storybook UI
The npm package @storybook/ui receives a total of 609,360 weekly downloads. As such, @storybook/ui popularity was classified as popular.
We found that @storybook/ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 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
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.