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.
- Update the version number in package.json
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.