Storybook
Microsoft Graph Toolkit playground utilizes a well-supported open source community project Storybook to showcase components and examples.
yarn start:storybookThis script will launch storybook, the local version of mgt.dev. It will also watch for any changes to the source files and reload the story as you are working.
Left navigation bar provides a list of stories. In the 'components' section are stories of each components that describe all the "interesting" states a component can support. The 'samples' section contains stories that are combinations of multiple components, or meaningful setups that do not pertain to only one component.
The main section in the middle left shows how UI will render based on the stories.
The code editor on the right side of the main section shows corresponding HTML, JavaScript, and CSS that describe the stories.
All component stories live in ./stories/components directory.
Each component's stories are defined in a story file. For example, mgt-agenda component has corresponding agenda.*.js in the stories directory. Generally, we use stories to showcase unique functionalities or configurations. These stories serve as mini samples ready to be copied and utilized by others. When you create new features for mgt components, we require adding a story so the use case can be easily viewed by the community.
Each component, at minimum, should have the following stories:
- Basic usage
- Stories that cover all attributes/properties/methods
- Stories that cover all events
- Stories that cover all templates
- Stories that cover all css custom properties
- Theming
- RTL (right to left)
- Localization
If you would like to learn more about writing stories, you can read about it here.