5c8ee7f906
* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems * fix: storybook webpack config * feat: add more stories * feat: add more stories * feat: add more stories * feat: fix logo and babel runtime error * feat: move to mdx docs for ui * feat: enhanced mdx for header and styles * feat: Add button usecases * feat: Add buttonGroup docs * feat: Add docs and use case to cine and contex menu * feat: fix decorators * feat: add header and dropdown docs * feat: add Icon and input docs * feat: add more docs * feat: add more stories * fix: feedback section * feat: Add doc page * feat: Add typography and color stories * yarn lock * add analytics to v3-ui * new banner image * new viewport component * update review comments
63 lines
2.0 KiB
Plaintext
63 lines
2.0 KiB
Plaintext
import { Meta } from '@storybook/addon-docs';
|
|
import { WithImage } from './components';
|
|
import { WelcomeHeader } from './header/header';
|
|
|
|
import ComponentTree from './assets/component-tree.png';
|
|
import Button from './assets/button.png';
|
|
import Sandbox from './assets/sandbox.png';
|
|
import Code from './assets/code.png';
|
|
|
|
<Meta title="Welcome" />
|
|
|
|
<WelcomeHeader />
|
|
|
|
## Introduction
|
|
|
|
OHIF-v3 UI component library is a collection of components and utilities that
|
|
power OHIF's zero-footprint DICOM viewer ([demo](https://v3-demo.ohif.org/)). We maintain them as a separate
|
|
component library to:
|
|
|
|
- Decouple presentation from business logic
|
|
- Test and develop components isolation
|
|
- Provide well documented, reusable components
|
|
- Aid rapid application development for context specific viewers
|
|
|
|
<br />
|
|
|
|
## Storybook Introduction
|
|
|
|
We use [Storybook](https://storybook.js.org/) to document and showcase our
|
|
components. On the left side of the screen, you'll see the component tree
|
|
categorized into different sections.
|
|
|
|
<WithImage image={ComponentTree} alt="Component tree" className="my-8" />
|
|
|
|
### Getting Started
|
|
|
|
Each component folder contains examples of the component variants, its state and
|
|
a playground to test it. Note: we are actively working on the component variants
|
|
and their state and we are adding more examples as we go. Feel free to open a
|
|
pull request to add more examples.
|
|
|
|
<WithImage
|
|
image={Button}
|
|
alt="Button Component"
|
|
className="my-8 w-40 block mx-auto"
|
|
/>
|
|
|
|
### Sandbox
|
|
|
|
The Sandbox (Playground) section of each story is a live preview of the
|
|
component. You can test it by clicking on the component name in the component
|
|
tree. This section allows you to interact with the component and change its
|
|
properties.
|
|
|
|
<WithImage image={Sandbox} alt="Sandbox" className="my-8" />
|
|
|
|
### Code
|
|
|
|
Finally we have the code section. This section contains the source code of the
|
|
illustrated component. You can copy and paste the code to your own project.
|
|
|
|
<WithImage image={Code} alt="Code" className="my-8" />
|