import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';
import {
  StoryPreview,
  StoryPreviewSet,
} from '../../utils/storybook/docs-support';

<Meta title="Manual/Welcome" />

# Welcome to Patchwork

Patchwork is Wealthsimple's UI Component library for React applications.

It aims to provide a first class DSL for building user interfaces that can:

- Reduce the amount of DOM and CSS you have to write,
- Help ensure that all your UI is themeable,
- Help ensure that all your UI is accessible.

## Using Patchwork Accessibly

Patchwork is built with accessibility in mind. Read our tips on <LinkTo kind="Manual/Accessibility" story="page">how to use Patchwork accessibly</LinkTo>

## Design System

Patchwork is based on a design system that provides an opinionated approach to colors and layout. Take a few minutes to read our docs:

- <LinkTo kind="Design System/Layout/Overview">Layout Manager</LinkTo>
- <LinkTo kind="Design System/Colors">Color Palette</LinkTo>

## Visual Index of Components

Here's a quick summary of the components offered by Patchwork. Click a component to go to its docs page for usage examples and options.

### Actions

Actions are buttons or links - things that go somewhere or perform an action when clicked.

<StoryPreviewSet>
  <StoryPreview
    name="Back Button"
    kind="components-actions-back-button"
    previewStory="normal"
  />
  <StoryPreview
    name="NextButton"
    kind="components-actions-next-button"
    previewStory="default"
  />
  <StoryPreview
    name="Button"
    kind="components-actions-primary-button"
    previewStory="as-button"
  />
  <StoryPreview
    name="SecondaryButton"
    kind="components-actions-secondary-button"
    previewStory="as-button"
  />
  <StoryPreview
    name="TertiaryButton"
    kind="components-actions-tertiary-button"
    previewStory="as-button"
  />
  <StoryPreview
    name="TextButtonWithIcon"
    kind="components-actions-text-button-with-icon"
    previewStory="right-icon-with-on-click"
  />
</StoryPreviewSet>

### Feedback

Feedback components tell the user something is happening or represent a status.

<StoryPreviewSet>
  <StoryPreview
    name="CircularProgressBar"
    kind="components-feedback-circular-progress-bar"
    previewStory="default"
  />
  <StoryPreview
    name="LoadingIndicator"
    kind="components-feedback-loading-indicator"
    previewStory="default"
    basis={200}
  />
  <StoryPreview
    name="Message"
    kind="components-feedback-message"
    previewStory="success"
    linkToStory="default"
  />
  <StoryPreview
    name="ProgressBar"
    kind="components-feedback-progress-bar"
    previewStory="incomplete"
    basis={200}
  />
  <StoryPreview
    name="Spinner"
    kind="components-feedback-spinner"
    previewStory="default"
  />
  <StoryPreview
    name="Tag"
    kind="components-feedback-tag"
    previewStory="default"
  />
</StoryPreviewSet>

### Inputs

Input components collect information from the user.

<StoryPreviewSet>
  <StoryPreview
    name="CheckBox"
    kind="components-inputs-checkbox"
    previewStory="selected"
  />
  <StoryPreview
    name="Radio"
    kind="components-inputs-radio"
    previewStory="selected"
  />
  <StoryPreview
    name="Range"
    kind="components-inputs-range"
    previewStory="demo"
  />
</StoryPreviewSet>

<StoryPreviewSet>
  <StoryPreview
    name="TextInput"
    kind="components-inputs-textinput"
    previewStory="preview"
    basis={250}
  />
  <StoryPreview
    name="SearchInput"
    kind="components-inputs-searchinput"
    previewStory="default"
    basis={250}
  />
  <StoryPreview
    name="Select"
    kind="components-inputs-select"
    previewStory="preview"
    linkToStory="default"
    basis={250}
  />
  <StoryPreview
    name="Datepicker"
    kind="components-inputs-datepicker"
    previewStory="normal"
    basis={350}
  />
  <StoryPreview
    name="DateRangePicker"
    kind="components-inputs-daterangepicker"
    previewStory="normal"
  />
</StoryPreviewSet>

<StoryPreviewSet>
  <StoryPreview
    name="TextArea"
    kind="components-inputs-textarea"
    previewStory="default"
  />
  <StoryPreview
    name="ClickableList"
    kind="components-inputs-clickablelist"
    previewStory="simple"
    linkToStory="default"
  />
  <StoryPreview
    name="FileUploader"
    kind="components-inputs-fileuploader"
    previewStory="without-files"
  />
  <StoryPreview
    name="ListSelector"
    kind="components-inputs-listselector"
    previewStory="single"
  />
</StoryPreviewSet>

### Layout Containers

Layout containers are used for laying out other components; either according to the built-in layout system (e.g. `Box`) or with specialized styling (e.g. `Card`, `FormList`).

<StoryPreviewSet>
  <StoryPreview
    name="Box"
    kind="components-layout-containers-box"
    previewStory="preview"
    linkToStory="background-color"
  />
  <StoryPreview
    name="Card"
    kind="components-layout-containers-card"
    previewStory="default"
  />
  <StoryPreview
    name="ControllableExpander"
    kind="components-layout-containers-controllable-expander"
    previewStory="basic-interactive"
  />
  <StoryPreview
    name="FormList"
    kind="components-layout-containers-formlist"
    previewStory="default"
  />
</StoryPreviewSet>

### Navigation

Navigation components let users move around to different parts of the app.

<StoryPreviewSet>
  <StoryPreview
    name="SecondaryNavigation"
    kind="components-navigation-secondarynavigation"
    previewStory="default"
  />
  <StoryPreview
    name="SegmentedControl"
    kind="components-navigation-segmentedcontrol"
    previewStory="default"
  />
  <StoryPreview
    name="TabSet"
    kind="components-navigation-tab-set"
    previewStory="default"
    basis={300}
  />
  <StoryPreview
    name="TimeRangeSelector"
    kind="components-navigation-timerangeselector"
    previewStory="normal"
    basis={500}
  />
</StoryPreviewSet>

### Overlays

Overlays are components that show UI on top of the main screen.

<StoryPreviewSet>
  <StoryPreview
    name="Menu"
    kind="components-overlays-menu"
    linkToStory="interactive-basic"
  />
  <StoryPreview
    name="Toast"
    kind="components-overlays-toastcentre"
    linkToStory="default"
  />
  <StoryPreview
    name="Tooltip"
    kind="components-overlays-tooltip"
    linkToStory="default"
  />
  <StoryPreview
    name="Modal"
    kind="components-overlays-modal"
    linkToStory="default"
  />
</StoryPreviewSet>

### Typography

Fonts, semantic header elements.

<StoryPreviewSet>
  <StoryPreview
    name="CurrencyFormatter"
    kind="components-typography-currencyformatter"
    previewStory="normal"
  />
  <StoryPreview
    name="PercentFormatter"
    kind="components-typography-percentformatter"
    previewStory="normal"
  />
  <StoryPreview
    name="Head"
    kind="components-typography-head"
    previewStory="default"
  />
  <StoryPreview
    name="InlineStyledText"
    kind="components-typography-inlinestyledtext-🔬"
    previewStory="default"
  />
  <StoryPreview
    name="PageTitle"
    kind="components-typography-page-title"
    previewStory="default"
  />
  <StoryPreview
    name="SectionHeader"
    kind="components-typography-section-header"
    previewStory="default"
  />
  <StoryPreview
    name="Span"
    kind="components-typography-span"
    previewStory="default"
  />
  <StoryPreview
    name="Text"
    kind="components-typography-text"
    previewStory="formatting"
    linkToStory="scale"
  />
</StoryPreviewSet>

### Icons

Patchwork's library of themable, resizable SVG icons.

<StoryPreview
  name="Icons"
  kind="components-typography-icons"
  previewStory="all-icons"
/>

### Organisms

Organisms are more complex pieces of UI that are frequently used many parts of our products. As UI elements move up the atomic design scale, they become more special-purpose and thus both less reusable and more subject to change. Use these organisms with caution.

<StoryPreviewSet>
  <StoryPreview
    name="ListItem - checklist"
    kind="organisms-listitem"
    previewStory="checklist"
  />
  <StoryPreview
    name="ListItem - numbered list"
    kind="organisms-listitem"
    previewStory="numbered-list"
  />
  <StoryPreview
    name="PlaceholderCard"
    kind="organisms-placeholdercard"
    previewStory="default"
  />
  <StoryPreview name="Sidebar" kind="organisms-sidebar" previewStory="normal" />
</StoryPreviewSet>