## Genesis

[![Netlify Status](https://api.netlify.com/api/v1/badges/f1b034c3-6534-461b-a018-1f0db20b7db5/deploy-status)](https://app.netlify.com/sites/devfolio-genesis/deploys)

[Demo](https://devfolio-genesis.netlify.com) | [Source](https://github.com/devfolioco/genesis/tree/master/src/components)

### Usage

Make sure you have `react` and `styled-components` installed in your project and then run:

```
yarn add @devfolioco/genesis
```

Basic Example:

```javascript
import React, { Component } from 'react';
import { Button, ThemeProvider } from '@devfolioco/genesis';

export default class App extends Component {
  render() {
    return (
      <div>
        <ThemeProvider>
          <Button appearance="primary">Devfolio!</Button>
        </ThemeProvider>
      </div>
    );
  }
}
```

It's required to import ThemeProvider and wrap all components in it, as it provides the colors and typography.

### Development

Make sure you have all the dependencies installed:

```
yarn
```

We use [React Storybook](https://github.com/storybooks/react-storybook) for component development.

Start the server using:

```
yarn start
```

> Write stories for the components in the respective folders as `component-name.stories.js`.

To build the storybook run:

```
yarn build-storybook
```

> This generates a static Storybook in the "storybook-static" directory.

### Adding Icons

We rely on the `generateIcons.js` script to dynamically create the icon components!

> For e.g., Adding an asset named `devfolio.svg` to `src/assests/icons` creates and exports an icon component named `Devfolio` from `AllIcons.tsx`.