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"
/>
