# Levi' Repo Brain Dump

## Dev Process

1. Check Fluent design spec in Figma
1. Check research to Open UI
1. Design does this as well, this is a double check.
1. Note any conflicts, consider when proposing API, raise to design.
1. Open UI should take the lead on API decisions. End goal for Fluent UI would be to drop custom components in favor of platform compoonents.
1. Understand v7 and v0 component, docs, issues
1. Propose React API for each Figma example
1. Gather questions and issues as you go, save them for review later
1. Determine if slots will be custom parts of the component or reuse existing top-level components (ie Button's loader)
1. Most likely create a custom-tailored part. Using a top-level component means you are going to bundle all it's features and dependencies, which are likely not needed.
1. Consider reusing state, styles, or accessibility hooks as necessary to create the custom part.
1. If reusinig styes, separate the declaration of the styles and invoke makeStyles in your component and the original component with the shared declaration. Do not import a makeStyles call.
5. Scaffold React component (react-*)
1. Add conformance test, get it to pass
1. Write doc example, get component to render
1. Implement one prop at a time
3. Open up WIP PR to save your work and collaborate
4. Add unit tests for unique functionality not covered in coformance tests
5. Add styles to achieve Figma design spec
1. Use makeStyles, not legacy v7 or v0 sytems.
6. Tokenize styles to enable product theme expression
1. Take token names and values from the design spec. Design should have ensured sufficient token names and values to output all office product themes.

## Deficits (TODO)

- Tokens should be documented top-level somewhere. Docs need better token documentation.

## Example of Converging Button

TODO: use flow above to get Button "done"
- [ ] makeStyles into react-button PR #???
- [ ] update slot component and 'as' support PR #???
- [ ] Fix conformance tests https://github.com/microsoft/fluentui/pull/16482
- [ ] Put together scope of work for collaborating converged on converged and HVC development around MS:
- [ ] DEFERRED: create "empty" v0 docs package
- [x] Investigate Storybook and Chromatic: https://hackmd.io/lSrlT7hUTei-uWpEiYgMsw

## How to document converged components NOW

- Use v0 docs as-is without improvements, since there is baggage we don't want to bring into the future. This is to preserve existing testing and gates within CI, GitHub, and repo workflow.
- Component example code must be vanilla and have no dependency on any other system (including the docs)
- Using the docs should not require changes to converged component code
- @Elizabeth: provide insight on example app base and it's potential for us and parters
- Things to consider:
- Alice is building public web site
- Brigette and UX team redesigned UI Builder and is working on v0 docs clean up. They are holding off on some v0 doc clean in expectation of a "new" doc experience for converged.