mainstack-design-system v0.7.25

Storybook Documentation

To view the design system documentation, visit this link.

Usage

Install the design system

yarn add mainstack-design-system

Add the Design system provider to your root file

import { MainstackProvider } from "mainstack-design-system";

 <MainstackProvider>
  <App/>
</MainstackProvider>

Components

Components can be used by importing from the 'mainstack-design-system directory. For example:

import { Button } from 'mainstack-design-system';

Icons

Icons are imported from the 'mainstack-design-system directory. For example:

import { ArrowRightIcon } from 'mainstack-design-system';

Colors

Colors are imported from the mainstack-design-system directory. For example:

 import {Colors} from "mainstack-design-system";

 <Text color={Colors.black300}>Hello World</Text>

Contributing

Installing the application (as a developer) is simple in the following steps:

• Access and Clone this repository

git clone git clone https://github.com/The-Mainstack/mainstack-design-system.git && cd [repo-name]

• Make your forked repo the remote upstream (at origin)

git remote add origin https://github.com/The-Mainstack/mainstack-design-system.git

• Navigate into the cloned directory and install dependencies with Yarn

yarn add

• Make a duplicate of the env file and update its content accordingly. Most times, this is just fine with no update.

cp .env.sample .env

• Run the app in the development mode. Open http://localhost:[port] to view it in the browser and start developing.

yarn dev

To run storybook, run the following command:

yarn storybook

To Publish to NPM, run the following command:

 npm publish --access public