Set of reusable components to be used inside Console UI and other Invopop Microfrontends.

Everything inside src/lib is part of the library, everything else will be omitted on the NPM package.

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development storybook server:

npm run storybook

The following command will compile a file called dist/invopop-web-components.js that can be imported on any external project.

npm run build-web-components

A test HTML file using this script can be found at src/wbc-preview/index.html

To build the Svelte library:

npm run package

To create a production version of the showcase app:

npm run build

You can preview the production build with npm run preview.

To deploy the app, you may need to install an adapter for your target environment.

To publish the library to npm:

npm publish

To build the Web Components library:

npm run build-web-components

This will generate a /dist/index.js file that you can include on any HTML to test. There is a ready-to-use HTML file with an example of any of the components located in /src/wbc-preview/index.html

To publish the Web Components library to npm:

npm publish-wbc

Include the CDN script in your HTML file

<script src="https://cdn.jsdelivr.net/npm/@invopop/web-components@0.0.1/index.js" defer></script>

Use any of the components available

<ui-button>Default Button</ui-button>

You can pass props and listen to events

<ui-button onClick="alert('button click')" type="primary">Primary Button</ui-button>

NOTE: Due to web component limitations booleans need to be passed as strings ie: "true", other structures like objects or arrays need to be passed as JSON.stringify()