Skip to main content

Getting Started (Ex Nihilo)

captain America

There's a few necessary things we should go over first.

Environment Setup#

Clone the repo

git clone git@github.com:BreezeChMS/mainsail-ui.git

Install the depenedencies

Mainsail-UI requires node 14 to be installed on your system.

cd mainsail-ui
yarn install

Start Storybook

yarn start

You should now have storybook running with a message in your terminal similar to:

╭───────────────────────────────────────────────────╮│                                                   ││   Storybook 6.2.5 started                         ││   9.03 s for preview                              ││                                                   ││    Local:            http://localhost:6006/       ││    On your network:  http://192.168.1.36:6006/    ││                                                   ││   Read full changelog: https://git.io/fhFYe       ││                                                   │╰───────────────────────────────────────────────────╯

Project Overview#

There are two primary portions of the Mainsail-UI dev environment.

  1. Storybook - internally bundled by Webpack
  2. React Component development - bundled by Rollup

What's in the src folder?#

The majority of the development of components will take place in the src folder.

src├─ assets|  ├─ fonts (for use locally in storybook - not bundled)|  └─ icons (original source svgs - has icon build process)├─ components├─ docs (for storybook documentation only)├─ styles (global scss files)|  ├─ Colors.scss   (color-related configurations)|  ├─ Layout.scss   (utility classes for spacing/layout)|  ├─ Reset.scss    (a reset used in storybook rendering)|  ├─ Text.scss     (text-related configurations)|  ├─ Utility.scss  (mixins used throughout scss)|  └─ Variables.scss(all global scss variables)

Configure Your Editor#

The next big step requires its own section and comes highly recommended if you want the best development experience.

See Configuring Your Editor

Note: Currently only VS Code instructions exist. If plugins exist for your preferred editor, please submit a PR to update these docs.

Review Some Project Design Decisions#

Before you start contributing any new code, review our conventions.

See Coding Style Guide