sample-design-system v0.1.19

Available Scripts

In the project directory, you can run:

npm run build

Builds the package for production to the lib folder.

npm start

Storybook should start, on a 9000 port in dev-mode.

npm run build-storybook

This will build the storybook configured in the Storybook directory into a static web app and place it inside the storybook-static directory. Now you can deploy the content in the storybook-static directory wherever you want.

Style Guide Architecture

These are a collection of architectural styles to follow when building Style Guide by following Atomic Structure principles.

Components File and Folder Structure

Should follow this basic file and folder structure:

src/components/atoms:

.
├── stories.js
├── tests.js
├── styles.js
└── index.js

How to style components

Use Styled-Components and Why?

To avoid classname clashes, to provide scope to styles and lot more advantages.

Publish

npm login
npm publish

How to use Style Guide

Installation

Install it via npm.

npm i sample-design-system

Usage

import React from 'react';
import { Button } from 'sample-design-system';

class MySampleComponent extends React.Component {
   render() {
    return (
      <Button primary btnName={Primary Button} />
    );
  }
}