# 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
```bash
yarn add @pie-api/pie-element-extensions/
```
```bash
npm i @pie-api/pie-element-extensions/
```

## Usage
```html
<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

```bash
yarn  
yarn 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
```bash
yarn test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
yarn 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
```bash
yarn storybook
```

To build a production version of Storybook, run
```bash
yarn storybook:build
```



## Linting with ESLint, Prettier
To scan the project for linting errors, run
```bash
yarn lint
```

You can lint with ESLint and Prettier individually as well
```bash
yarn lint:eslint
```
```bash
yarn lint:prettier
```

To automatically fix many linting errors, run
```bash
yarn format
```

You can format using ESLint and Prettier individually as well
```bash
yarn format:eslint
```
```bash
yarn format:prettier
```


## Local Demo with `es-dev-server`
```bash
yarn start
```
To run a local development server that serves the basic demo located in `demo/index.html`