Storybook
Microsoft Graph Toolkit utilizes a well-supported open source community project Storybook to showcase components and examples.
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.