@intelligentgrowthsolutions/eco

eco design system

This is a design system/component library for using across IGS web projects. It's built using Stencil and documented using Storybook.

Using eco

Using eco in your project is fairly easy. It's an npm package and once you integrate with your framework of choice it should be as simple as using <eco-button></eco-button> where you want.

Running eco locally

npm install

# To run Stencil - compiling, creating and testing
npm start

# To run Storybook
npm run storybook

Note: You may/will probably want to run both of those at once.

Storybook doesn't support hot reloading with web-components so you do need to refresh the page after changes to *.stories.js files.

If you're having issues...

You need to run the following to copy the css and assets to the storybook directory so that it's available locally.

npm run build-storybook
npm run copy-dist-files

Making changes to eco

Get Stencil running:

npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Documenting stories in Storybook

Refer to the storybook docs and/or copy and adjust one of the existing ones.

Testing eco components locally before publishing

Using npm link we can use the local version of eco rather than the published module. To link eco to the angular front end:

cd PATH_TO_DIR/Web/angular
npm link PATH_TO_DIR/eco

You will need to update PATH_TO_DIR/Web/angular/src/main.ts from

import {defineCustomElements} from '@intelligentgrowthsolutions/eco';

to

import {defineCustomElements} from 'PATH_TO_DIR/eco';`

You'll also need to run npm run build in the eco root directory. Running npm start will not rebuild the dist folder for Angular to grab. Don't push the updated version of package.json - it should always point to the published version of eco.

Updating eco

Once everything is fine and dandy you'll probably want to update the version of eco so that it can actually be used. Following the npm guide is the way to go here.

npm version patch
npm publish

You'll only be able to publish if you're part of the npm org.