72 lines
2.0 KiB
Plaintext
72 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 mx-auto block w-40"
|
|
/>
|
|
|
|
### 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"
|
|
/>
|