Network Canvas UI

Installation

Install with npm or link to git in package.json:

npm install --save @codaco/ui

// in package.json
{
  "dependencies": {
    "@codaco/ui": "git+https://[email protected]/complexdatacollective/Network-Canvas-UI.git"
  }
}

Deployment

This is an org package hosted on npmjs.

1. Update the version number in package.json
2. npm run publish

Development (using Storybook)

Run: npm run storybook

A browser window will open with a live-updating view of components.

This is a new feature so not all components are defined.

Development (using Network Canvas)

# In UI
$ npm link

# In consuming app
$ npm link @codaco/ui

# After each change (in UI):
$ npm install
$ npm run build
$ npm install --only=production # potentially also rm -rf node_modules

To revert in consuming app: npm install

Components

// in LocalComponent.js

import { ExampleComponent } from '@codaco/ui';

// To directly link to a component use:
// `import ComponentName from '@codaco/ui/lib/components/ComponentName'`;

const LocalComponent = props => (
  <div className="local-component">
    <ExampleComponent />
  </div>
);

Styles

You can include all styles in your main stylesheet:

// in main.scss
@import '~@codaco/ui/lib/styles/all';

Importing styles for only certain components may work but is not supported at this time.

Icons

Colors

To add a new color or palette, you can add a new css variable to the root selector:

:root {
  --my-new-color: blue;
}

What's included

Component List

• List of components goes here.

Versioning

This project uses semantic versioning:

AA.BB.CC

• AA version when you make incompatible API changes,
• BB version when you add functionality in a backwards-compatible manner, and
• CC version when you make backwards-compatible bug fixes.