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