Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
Contents:
First, install the addon.
$ yarn add --dev storybook-design-token
Add the addon to your storybook addon list inside .storybook/main.js
:
module.exports = {
addons: ['storybook-design-token']
};
Next, add the addon configuration to your .storybook/preview.js
file. The addon works by parsing your stylesheets and svg files (token files) and extracting design token information. Therefore you need to tell the addon where your token files are located. The example below should work for most project setups. It assumes that your token files are located somewhere under a src
directory, and use the default file extensions (.css, .less, .scss, .svg).
const tokenContext = require.context(
'!!raw-loader!../src',
true,
/.\.(css|less|scss|svg)$/
);
const tokenFiles = tokenContext.keys().map(function (filename) {
return { filename: filename, content: tokenContext(filename).default };
});
export const parameters = {
designToken: {
files: tokenFiles
}
};
The last step is to annotate your design tokens with a category name and a presenter. You can do this by adding special comment blocks to your stylesheets. Below is an example of a css stylesheet defining three categories ("Animations", "Colors", "Others"). It works the same way for scss and less files.
:root {
/**
* @tokens Animations
* @presenter Animation
*/
--animation-rotate: rotate 1.2s infinite cubic-bezier(0.55, 0, 0.1, 1);
/**
* @tokens Colors
* @presenter Color
*/
--b100: hsl(240, 100%, 90%); /* Token Description Example @presenter Color */
--b200: hsl(240, 100%, 80%);
--b300: hsl(240, 100%, 70%);
/**
* @tokens Others
*/
--border-normal: 3px dashed red; /* Token Description Example @presenter BorderRadius */
}
The presenter controls how your token previews are rendered. See the next section for a complete list of available presenters. You can omit the presenter definition if you don't want to render a preview or no presenter works with your token.
To list your svg icons, the addon parses your svg files searching for svg elements. Important: Only svg elements with an id
or data-token-name
attribute are added to the token list.
Please check the demo to see the presenters in action.
You can specify the default tab shown in the addon panel. Set it to the corresponding category name.
export const parameters = {
designToken: {
defaultTab: 'Colors',
files: tokenFiles
}
};
To inject styles needed by your design token documentation, use the styleInjection
parameter. A typical usecase are web fonts needed by your font family tokens. Please note that the styleInjection parameter only works with valid css.
export const parameters = {
designToken: {
files: tokenFiles,
styleInjection:
'@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");'
}
};
This addon comes with a custom Storybook Doc Block allowing you to display your design token documentation inside docs pages.
// colors.stories.mdx
import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';
<DesignTokenDocBlock categoryName="Colors" viewType="card" />;
The categoryName
parameter references your token category name (the part after @tokens
in your stylesheet annotations). The viewType
parameter can be set to card
or table
to switch between both presentations.Check the demo file for usage examples.
GumGum Design System Under Construction Future home of GumGum Design System 2.0 [aka Concrete] GitHub package.json version (branch) As part of the GumGum 2020 rebranding, this design system will
官方的: Integrations | Storybook: Frontend workshop for UI development storybook/ADDONS_SUPPORT.md at master · storybookjs/storybook · GitHub 我所推荐的的三个: yarn add -D @storybook/addon-docs @storybook/addon
Storybook 是 UI 组件的开发环境,它允许开发者浏览组件库,查看每个组件的不同状态,以及交互地开发和测试组件。 Storybook 在 app 之外运行,这允许开发者独立地开发 UI 组件,这可以提高组件的重用性、可测试性和开发速度。所以可以快速构建,而不必担心应用程序特定的依赖关系。 特点: 附带了许多组件设计、文档、测试、交互性等内容 易于使用的 API 使它易于配置和扩展,甚至被扩展到支持移动的本地开发
ember-cli-storybook �� Ember storybook adapter Compatibility Ember.js v3.16 or above Ember CLI v2.13 or above Node.js v10 or above Installation ember install @storybook/ember-cli-storybook Usage This
Apollo Storybook Decorator Wrap your React Storybook stories with Apollo Client. Supports React React Native Vue Angular Apollo Client V2 Coming Soon Apollo Client V1 X X X The Gist Provide GraphQL ty
错误提示如下: storybook 版本
Background Blockchain technology has been evolving very quickly since the introduction of Bitcoin in 2008. Over the past nine years, many Blockchain techniques have been explored to try out various id
1. Web MVC Framwork: SpringMVC3.0 Restful 的风格终于回归了MVC框架的简单本质,对比之下 Struts2 概念太复杂更新又太懒了。 Template:JSP2.0 且尽量使用 JSP EL 而不是 taglib,万一要写 taglib 也用纯 JSP 来编写,一向是 SpringSide 的推荐,Freemarker 们始终有点小众, 而Thymeleaf