# @epilot/base-elements

General purpose React components for epilot UI elements.

[base-elements.dev.epilot.io](https://base-elements.dev.epilot.io/)

Based on [Material UI](https://material-ui.com/)

## Quick start

```bash
yarn
yarn start
```

## Storybook

```bash
yarn run storybook
yarn run build-storybook
```

## Run locally on `http://localhost:5500/bundle.js`

## Contributing MDX (markdown documentation)

Add a `.stories.mdx` file alongside the story (example: [stories/Progress.design.stories.mdx](stories/Progress.design.stories.mdx))

Add a `<Meta>` tag as follows:

```jsx
import { Meta } from '@storybook/addon-docs';
import { Progress } from '../src';

<Meta title='Elements/Feedback/Progress/Design' component={Progress} />;
```

Pass the `component` you're documenting, as well as a `title` according to where you want your story to show up in navigation:

![Example navigation](public/img/navi-example.png)

You can then add your documentation with markdown, embedded stories and images, as shown in this [full example](stories/Progress.design.stories.mdx):

```jsx
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Progress } from '../src'

<Meta
  title="Elements/Feedback/Progress/Design"
  component={Progress}
/>

# Progress Indicator

Embedded story
<Canvas>
  <Story id="elements-feedback-progress--circular-progress-indeterminade-story" />
</Canvas>

Here is an image using Markdown:

![My image](/img/progress-image-demo.png)

Here is an image using MDX:

<img src="/img/progress-image-demo.png" alt="My image" />
```