GroupBy Elements View

GroupBy Elements View SDK containing pre-built web components for for creating e-commerce application interfaces.

Installation

To clone this repo with submodules run:

git clone --recursive https://github.com/groupby/elements-view

or if the repo is already cloned and you want to install submodules only, run:

git submodule update --init

Setup

Run the ./scripts/setup.sh script to build all of the Elements-View packages.

  ./scripts/setup.sh

Demoing

To demo all components and their interaction with the Logic Layer, open demo/demo.html in a browser. Note that Beacons functionality will only work if the demo is served with an HTTP server such as http-server.

Commands

The following commands are run in the context of an individual package contained within the Elements-View monorepo. The individual Web component packages can be found within the packages/web-components/@groupby directory.

Building packages

To build an individual package, run the following command:

yarn build

To build an individual package in response to changes within the src directory, run the following command:

yarn dev

Testing

Tests are run with Mocha, Chai, and Sinon with the Karma test runner in a browser environment. The following browsers are currently tested:

• Chrome

To run the tests for all web component packages together, run the following command:

yarn test

To run unit tests for a specific web component package, navigate to its directory and use one of the following commands based on the desired testing flow:

• To run the unit tests for a specific package once:

yarn test

• To run the unit tests for a specific package and watch the src and test directories to rerun the tests after any changes:

yarn tdd

• To run the interaction tests for a specific package once:

yarn test:interaction

• To run the interaction tests for a specific package and watch the src and test directories to rerun the tests after any changes:

yarn tdd:interaction

• To run both the unit and interaction tests for a specific package once:

yarn test:all

Test coverage is also provided using Istanbul.

When starting a new component, create new setup.ts and utils.ts files in its new tests directory. These files will make the same files from the root test-tools directory available through imports and exports.

Ex.

• utils.ts

export * from '../../../../../test-tools/utils';

• setup.ts

import '../../../../../test-tools/setup';

Keywords from the testing frameworks can then be imported to your test files from utils.ts.

Functional end-to-end testing

Functional tests are run with Testcafe, which run in each browser environment configured. The following browsers are currently tested:

• Chrome
• Firefox

To run the tests for all browsers together, run the following command in the root directory:

yarn test:functional:all

• To run the tests for Chrome only:

yarn test:functional:chrome

• To run the tests for Firefox only:

yarn test:functional:firefox

Themes

Styled themes are available for components in the ./themes folder. These can be viewed and developed by using Storybook and by running two active terminal processes:

yarn storybook
yarn dev:themes

These will run Storybook and watch the ./themes directory for all changes to .scss files. Themes can be toggled in the CSS Resources addon tab.

Linting

This project ships with an ESLint configuration to enforce a consistent code style across *.ts files.

Package-specific linting

The following commands are run in the context of an individual package contained within the Elements-View monorepo. The individual web component packages can be found within the packages/web-components/@groupby directory.

To lint files for an individual package, navigate to its directory and use one of the following commands.

• To lint the files under the src directory for an individual package:

yarn lint:scripts

• To lint the files under the stories directory for an individual package:

yarn lint:stories

• To lint the files under the test directory for an individual package:

yarn lint:tests

To run the automated lint fixes for an individual package, navigate to its directory and use one of the following commands.

• To run automated lint fixes on the files under the src directory for an individual package:

yarn lint:scripts:fix

• To run automated lint fixes on the files under the stories directory for an individual package:

yarn lint:stories:fix

• To run automated lint fixes on the files under the test directory for an individual package:

yarn lint:tests:fix

Project-wide linting

To lint all the Elements-View packages at once, run the following commands at the root of the monorepo:

• To lint all files within each package's src and stories directories:

yarn lint:scripts

• To lint all files within each package's test directory:

yarn lint:tests

• To run automated lint fixes on all files within each package's src and stories directories:

yarn lint:script:fix

• To run automated lint fixes on all files within each package's test directory:

yarn lint:tests:fix

Documentation

The following command will generate documentation for each module in the packages directory. It uses TypeDoc and outputs to the docs directory.

yarn docs

Bundling

To bundle the Elements-View packages, run the following command at the root of the monorepo:

yarn bundle

The resulting bundles can be found within the dist directory at the root of the repo.

Storybook

The command to run the storybook application is:

yarn storybook

To create a new story, in the component directory create a new directory called stories/ and in that directory write the stories in index.ts.

/packages/web-components/@groupby/
|-- component
|   |-- src
|   |   |-- index.ts
|   |-- stories
|   |   |-- index.ts

Storybook reference links:

• Writing Stories
• Using Knobs

* One note about using knobs is that you have to use the text method for defining array or object properties for lit-element.