Times Components showcases its UI components using storybook:
Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
Each package has one or more my-component.stories.js
file. The
.stories.js
file name is the hook that the CLI uses to load
these stories into storybook.
import { showcaseConverter } from "@times-components/storybook";
import showcase from "./my-component.showcase";
showcaseConverter(module, showcase);
This package introduces the concepts of showcases, rather than stories.
Showcases provide a consistent and simple API for a developer to create stories.
The idea behind introducing the showcase concept was to help decouple Times
Components from storybook. Storybook version bumps in particular were playing
havoc with our CI, and managing these across storybook
,
storybook/addon-actions
and storybook/addon-knobs
was becoming painful. Each
package has a my-component.showcase.js
file which exports a showcase object.
- name - a "/" delineated string describing the location of the showcase in the component library. Each "/" moves the showcase one level deeper in the component library tree
- children - an array of objects containing showcases
- type: string: story | decorator
- name: string
- platform: string: web
- component: function: The method can take optional arguments
knobs
anddecorators
export default {
name: "Primitives/MyComponent",
children: [
{
type: "story",
name: "The name of my showcase",
platform: "web",
component: (knobs, decorators) => (
<MyComponent />
)
}
]
};
storybook/addon-knobs
provides methods that allow users of the component library to amend props
.
This reduces the number of stories, and introduces a level of interactivity that
allows users to fiddle with UI and test various aspects of components for
themselves.
The showcase package provides some custom decorators:
- CenteredDecorator - centres the wrapped component
- BarSpacingDecorator - provides some padding above the wrapped component
- LateralSpacingDecorator - provides some padding on the left and right of the wrapped component
- WhiteBgColorDecorator - puts the wrapped component on a white background for easier visual representation
Please read CONTRIBUTING.md before contributing to this package
Please see our main README.md to get the project running locally
The code can be formatted and linted in accordance with the agreed standards.
yarn fmt
yarn lint
This package uses yarn (latest) to run unit tests on each platform with jest.
yarn test:web