particle

A pattern library for building dscout user interfaces with React.

Install particle using yarn or npm:

$ yarn add @dscout/particle
$ npm install --save @dscout/particle

Visit the demo site to see example code of the components. Everything is a named export on the namespace "@dscout/particle," for example:

import React from 'react'
import { Container, ContainerInner } from '@dscout/particle'

export default function Announcement() {
  return (
    <Container>
      <ContainerInner>
        <h2>Important!</h2>
        <p>Make sure to eat your vegetables.</p>
      </ContainerInner>
    </Container>
  )
}

Stylesheets

Stylesheets are included in two formats: css and scss.

Pre-compiled stylesheets are located in the lib directory of the build output. To import into a plain CSS file:

@import 'node_modules/@dscout/particle/lib/stylesheets/particle.css';
@import 'node_modules/@dscout/particle/lib/stylesheets/particle.min.css';

The source scss file is located in the styles directory. You can import it into your own scss file like so:

@import '~@dscout/particle/styles/particle.scss';

Developing with Storybook

Particle uses asdf to manage the node dependencies. To develop locally first install asdf with:

$ brew install asdf

Then in order to install nodejs, you must first install its dependencies:

$ brew install coreutils
$ brew install gpg

Import the Node.js release team's OpenPGP keys to main keystring:

$ bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring

Install asdf dependencies

$ asdf install

Install dependencies with yarn:

$ yarn install

Storybook

Storybook provides a neat approach to developing UI components. Start up the development server with yarn start and open your browser to http://localhost:6006.

Styleguide

A PostCSS plugin automatically generates a basic styleguide site from comments in the CSS. Run the styleguide locally with yarn styleguide and open your browser to http://localhost:9090.

Scripts

A variety of scripts are provided for running common tasks.

Lint with ESLint:

$ yarn lint

Watch the tests with Karma:

$ yarn test

Lint, then run the test suite:

$ yarn ci

Remove and re-create the lib directory:

$ yarn clean

Create a build (outputs to the lib directory):

$ yarn build

Minify the CSS build:

$ yarn nano

Create a release with a minified CSS build:

$ yarn release

Generate the documentation website (output to the docs directory):

$ yarn build-docs

Releasing a new version

Instructions for preparing a new release and submitting it to npm can be found here.