import { Meta, Story, Preview, Source } from '@storybook/addon-docs/blocks';
import { Monterey, View, Text, theme } from '@tedconf/monterey';
import { Link } from '../.storybook/preview';
import { providerSource } from './index.story.tsx';

<Meta title="Readme|Welcome" />

# The Monterey Design System™️

### toward a common way of building

<br />
<br />
<br />

## Learn the concepts and techniques employed by Monterey.

After reading and following this guide, you will be able to use Monterey to
build apps that are consistently TED. From colors and text styles to spacing,
we’ll cover the essentials of getting ahead while remaining polished.

## Install

Installing Monterey into your React app requires a few steps:

- install the node module:
  <Source code={`yarn add @tedconf/monterey`} />
- install its peer dependencies:
  <Source code={`npx install-peerdeps @tedconf/monterey`} />
- wrap your app in the Theme Provider
  <Source code={providerSource} />

## Use

You've come to a fork in the road. Choose your path:

- <Link kind="Readme" story="emotion user">I've used `emotion` or `styled-components` before</Link>.
- [This is all new to me](https://emotion.sh/docs/introduction).