zinnia v1.1.18

Live Style Guide

Setup

git clone git@github.com:iunullc/zinnia.git
npm install
npm link

move to your local luna-web directory and run:

npm link zinnia

The above npm-link commands simply generate a symlink in your global node_modules pointing at zinnia and added a pointer in your local luna-web node_modules.

Usage

zinnia is included as a dependency to luna-web and is used like any other package. To use a component from zinnia just import it as named import.

import { Foo } from 'zinnia';

Development

New components

New components should be added in /src/components/<COMPONENT_NAME>/ and should have an associated test and styles file.

/lib
|
+--/src
  |
  +--/components
    |
    +--/<ATOMIC_CATEGORY>   i.e. /molecules
      |
      +--/<ATOMIC_CATEGORY_GROUPING>   i.e. /forms
        |
        +--/<SOME_COMPONENT>   i.e. /search
          |
          +--index.jsx
          |
          +--test.js
          |
          +--styles.scss

Dependencies

Use the -D flag when installing packages/dependencies so they will be added as devDependencies. We do not want to have anything saved to the dependencies block in the package.json as that would duplicate the dep in the app using this library.

If the package you are adding is be used for build tools, like webpack, or is only used in the demo app, like react-syntax-highlighter, then you are done. However if the dep is a requirement for one of the exported components of the lib then that dep also needs to be included in peerDependencies in the package.json to trigger warnings in Luna Web should that dep not already be included.

Building

To see live changes you will need to rebuild after making changes and restart the server:

npm run build
npm start

Deployment

Live Demo

Before you push your changes to github, make sure to build the demo as github pages pulls from /docs/bundle.js.

npm run build:demo

npm Package

Prior to publishing changes to zinnia you will want to makesure to update the version inside of the package.json file according to semver. Once the version has been updated, run the following commands.

npm run build
npm publish

We will need to make sure we have the proper semantic versioning in luna-web.

To-Dos