---
robots: nofollow, noindex
tags: convergence
---
# Converged Docs & Dev Loop

We need docs for converged components. Here are the requirements and thoughts on various approaches.

## Problems with current v0/v7 docs
* Hard to contribute to (lack of documentation, proprietary workflow and APIs, cumbersome file structure)
* Only works for Fluent, not usable by partners
* Large payload, historical baggage
* Live reload is broken
* Docs tightly coupled to components and repo structure, can't be made into a shareable package easily

## Requirements

Things that will strictly make Fluent a success or failure.

**Required**
* Metadata capability
* Visual regression tests
* Performance tests
* Accessibility testing
* Unit testing
* Theme switching / testing
* RTL switching/ testing
* Includes converged Provider and tokens
* Reusable, works for Fluent and partners, enforcing consistent theme and interfaces
* Accessible (correct DOM structure, headings, regions, understandable keyboard and screen reader interactions)

**Strongly Recommeded**
* Pages for general copy (MDX, etc would do)
* Able to aggregate components from multiple repos around MS to one place

**Optional**
* Codesandbox / Live code editing
* Design token explorer
* Maximized view
* Knobs
* Accessible code editor (preferably pure `<textarea>` as alternative to feature rich editors like monaco)

## Solutions

- [Storybook](#storybook)
- [Styleguidist](#styleguidist)
- [Docz](#docz)

### Storybook

We also have `yarn start` for each react-* package, however, we need a single experience that hosts all components.

Paul has already stubbed this storybook which is suitable: https://aka.ms/fluentui-converged.

[Storybook "Docs Page"](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)

#### TODO:
- [ ] Port/create converged examples
- [ ] Create decorator for converged provider(s)
- [ ] Create custom addon for design tokens
- [ ] Share/test with converged HVCs developmemnt envs
- [ ] Teams "Nova" Components (needs a Storybook)
- [ ] OWA AppLauncher and AppBar (their own Storybook)
- [ ] Add common addons for our [Requirements](#requirements) above
- [ ] Port v0 examples
- [ ] Port v7 examples
- [ ] Try other common addons that may be useful

### Styleguidist TODO @hotell
https://react-styleguidist.js.org/

### Docz TODO @hotell
https://www.docz.site/