Genesis

Demo | Source

Usage

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

yarn add @devfolioco/genesis

Basic Example:

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 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.