GDP UI Toolkit Starter (Stencil)

This repository provides a simple boilerplate for builing Web Components with Stencil to be used within the GDP environment.

This starter has:

• A Stencil Web Component example
• A sample GDP environment
• Unit and End-to-End (e2e) testing/coverage tools*
• Development, build and linting configurations
• Automatic docs generation
• Integration with Storybook

(*) For unit (spec) tests only. More info...

Getting started

To start a new project, clone this repo to a new directory and run:

npm install

then run:

npm start

To build the app for production, run:

npm run build

To run the unit tests once, run:

npm test

To run the unit tests and watch for file changes during development, run:

npm run test.watch

Project structure

Inside the src folder you'll find the following:

Directories

• components

  The source code for your component(s). Each component you create should follow the same file structure as the sample gdp-ui-component.

• data

  A folder containing any necessary data for testing your components. It comes with an example config file settings.json, which represents the sample gdp-ui-component as an available widget.

• global

  Where the global styles and scripts are stored. Please refer to the official Stencil docs on the global files.

Files

• components.d.ts

  An automatically generated typings declaration file. You should never edit this file.

• index.html

• index.ts

  Sample index files. These are meant for testing your component(s) integration within a GDP application during development.