Generic Data View Web Component for KIT DM applications

Development

How to run with Storybook

Execute both commands in parallel

npm run build-watch

and

npm run storybook

Only run Stencil without Storybook

npm start

Publishing

To publish the Web Component, simply run npm publish in the root directory. This will automatically run the prepare script which builds the component before publishing.

The React Wrapper Library should also always be published at the same time, with the same package version (not for a technical reason, rather to facilitate understanding). The generated files (react-library/lib/*) get generated when the build script is executed in the root directory, since React is one of the output targets.

• Enter the react-library directory cd react-library
• Run npm publish. Just like in the root, the prepare script will be called and will compile the Typescript.

Installation

React App

To use this Web Component in a React App, it is recommended to use the React Wrapper Library. This allows for correct Event Propagation and passing Object & Arrays directly as Props, aswell as allowing Intellisense for the props.

• Run npm install data-card-react
• Use as any other React Component

Script tag

• Put a script tag <script type='module' src='https://unpkg.com/[email protected]/dist/data-view-web-component/data-view-web-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install data-view-web-component --save
• Put a script tag <script type='module' src='node_modules/data-view-web-component/data-view-web-component/data-view-web-component.esm.js'></script> in the head of your index.html
• OR load the element at the start of the App:

import { applyPolyfills, defineCustomElements } from 'data-view-web-component/loader';

applyPolyfills().then(() => {
    defineCustomElements();
});

• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install data-view-web-component --save
• Add an import to the npm packages import data-view-web-component;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Icons

All Icons from this list can be used: https://icon-sets.iconify.design/

Props

Props & Types