---
# System prepended metadata

title: Product Documentation

---

# Product Documentation

This doc is tracking our thoughts and immediate TODOs.

## Goals and Problems
* Products need to be able to see eachother's components (fluentui for now)
* Orgs have disparate solutions to their individual needs as far as components go
* Unify component architecture

## Solutions
* Create a solution for documentation aggregation
* Create solution that allows for inter-op between orgs on the component level
* Create direct links and flow of information between orgs

## Debt
* Remove old getComponentInfo
* Replace with `react-docs` version of `getComponentInfo`
    * Use local linking via yarn

## Current
* Research `yargs`
* Use node to create CLI to dump JSON componentInfo Files
    * Two args `srcDir` -> `outputDir`
    * `fui-docs build "./src/components/**/*" "./dist/componentInfo/**/*.json"`



## TODO NOW

`@fluentui/react-docs`
 - getComponentInfo()

- [ ] Use `yargs` to create fui-react-docs cli
- [ ] Add a config file
- [ ] Ensure CLI args override config file
- [ ] add `build <src> -o` command for info files in src to output dir
- [ ] Add CLI to `bin` in react-docs package.json
- [ ] Get exsting getComponentInfo PR merged
- [ ] Delete getComponentInfo from `fluentui/docs` & Take dep in `fluentui/docs` on `fluentui/react-docs` getComponentInfo

## TODO NEXT
- [ ] add `start` command
    - for local dev
    - runs getComponentInfo on all components
    - build docs in memory
    - start dev server

MVP:
- Generates JSON files from CLI in `react-docs`
- Iterate component info files in a left menu
- For selected component, render example files in iframes on the right




Webpack/Runtimes
^
|   React
|   ^
|   |      Example
|   |      ^
|---|------|
<iframe src='button-bundle.com' />
<iframe src='button-bundle.com' />
<iframe src='button-bundle.com' />

<iframe>
  <Button />
</iframe>



