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.
Addons extend stories with features and integrations that are not built into the core. In a future release, we will introduce a signin addon that can help developers explore Microsoft Graph with their own tenant and data.
The docs section provides all available attributes, properties, and events to each component.
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.stories.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 recommend adding a story so the use case can be easily viewed by the community.
Each component, at minimum, should have the following stories:
- Simple usage
- Stories that cover all attributes/properties
- Stories that cover all events
- Stories that cover all css custom properties
- Stories that cover all templates
- Theming
If you would like to learn more about writing stories, you can read about it here.