@pie-api/pie-element-extensions

pie-element-extensions

This is a set of Custom Elements and ES Modules that extend the capabilties of @pie-framework/elements in the context of pie-api service. They are intended to be deployed for use in a browser with ES imports.

Initially, the Elements will include:

Cell - an element to render a user response in a small form factor that can be displayed in a table/spreadsheet cell

Response - an element to rendder more complete user response, in a larger form factor than Cell but without necessarily rendering the actual question

Future Elements:

Aggregate - display a PIE with aggreate information about a set of responses

Modules:

This lib may also export modules & functions that are not Custom Elements. e.g.: aggregateResponses([session]) - do a map reduce to get aggregate data about user responses.

Under R&D:

pie-api will support extending the capabilities of 'installed' pies with these extensions through a definition that defines the module urls for the extension's modules. See src/multiple-choice/pie.config.js

Installation

yarn add @pie-api/pie-element-extensions/

npm i @pie-api/pie-element-extensions/

Usage

<script type="module">
  import '@pie-api/pie-element-extensions/pie-element-extensions.js';
</script>
<!-- use one of the elements exported by the above import-->
<multiple-choice-cell></multiple-choice-cell>

Development

Quick Start

npm  install
npm run test

Adding new Elements

• Add element source in src/pie-name directory.
• Export a class that extends LitElement from the element module file. Also export this as default.
• Add jsdoc @element tag-name in comments for the element class
• Add jsdoc @prop {Type} name - description in coments for the element class
• Add tests in src/pie-name/test
• Add stories in stories/element-name/[pie-name].stories.js

Testing

To run the suite of karma tests, run

npm run test

To run the tests in watch mode (for TDD, for example), run

npm run test:watch

And open the URL that will be logged to consoleon test-server-start

Demoing with Storybook

To run a local instance of Storybook for the components, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Linting with ESLint, Prettier

To scan the project for linting errors, run

npm run lint

You can lint with ESLint and Prettier individually as well

npm run lint:eslint

npm run lint:prettier

To automatically fix many linting errors, run

npm run format

You can format using ESLint and Prettier individually as well

npm run format:eslint

npm run format:prettier

Local Demo with es-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html