@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 should be fairly easy. It will be 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

git clone [e-mail]:v3/IGS-Agri/Agri/eco

cd eco
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.

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

Assuming a folder structure of:

/code
    /fms
    /eco

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

cd fms/src/Web/angular
npm link ../../../../eco

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

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

to

import {defineCustomElements} from '../../../../../eco/loader';`

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.