# data[].attributes.body
Optimize
• Finding components
• Configuring components
• Downstream errors from UI changes
• UI change review process

# data[].attributes.body
1. Compared Styleguidist vs Storybook
2. Compared compiled vs vue components
3. Export as npm package, import and use (only OzInput and OzSwitch)
4. Configured storybook loaders for postcss, scss, tailwindcss, typescript,

# data[].attributes.body
1. Add more orizuru components to component library
2. Configure fonts + any other parts of frontend stack misssing.
3. Add more parent components to allow regression testing.

# data[].attributes.body
https://61490a8a212953003a71f675-rbjdjtnqhu.chromatic.com/?path=/docs/example-ozbutton--normal

# data[].attributes.body
.storybook/main.js
package.json
config.js & config.json files

# data[].attributes.body
Show how component behaves with
- Different parameters
- Different devices

Information on component
- custom parameters
- light vs dark
- dimensions (padding, size etc)

# data[].attributes.body
Component documentation
- description of properties, ability to see effects & copy code
- types  of component, each with preset parameters

# data[].attributes.body
https://www.chromatic.com/pullrequest?appId=61490a8a212953003a71f675&number=7151&view=changes

# data[].attributes.body
Why? Changes to components
How? Run npx chromatic on seperate branch

# data[].attributes.body
Snapshot of each component - changes

For each pixel of each seperate story

# data[].attributes.body
1:50 onwards of https://www.youtube.com/watch?v=9o6uB1X-LZ8&t=130s&ab_channel=Chromatic