@dickssportinggoods/common NPM

Common

This is a common module that only contains .scss and .ts files with common code that can be shared between component libraries of different frameworks.

The .ts and .scss files are not processed when building, they are just copied and it is expected that component library will be able to handle them. The reason is because this package is an internal package used by the different frameworks we have component libraries for.

The purpose is to expose variables, immutable spacing utilities, and common component CSS classes. This also centralizes every design token in this package, ensuring consistency across component libraries of different frameworks (i.e. Angular, React).

In short, this package will contain JS + d.ts files along with SCSS.

Installing

See onboarding file for more information.

Building

The build output directory is dist.

yarn build: wipes the dist directory and rebuilds everything from scratch.

yarn build:watch keeps an eye on .scss and .ts files and update the dist folder automatically.

The build command is composed of multiple build commands, they are overloaded to provide commands with specific additional parameters. Basically there are three base build commands: scss, ts, package.json.

SCSS

The scss files are both copied and compiled to the dist folder. The majority of foreseen use cases are consuming the scss variables, token, and utilities. However, there is a global file that is generated and can be used in case needed.

Typescript

All typescript files are compiled into the dist folder with their corresponding .d.ts files.

`package.json`

When publishing the contents of the dist folder, a package requires a package.json file that describes it. Several properties are not useful in the final package.json, so we only copy the properties that are relevant by utilizing a tool called copy-pkg.

Testing

Jest is the library used to write tests.

yarn executes all tests. yarn test:ci runs jest on CI mode, useful for prepush hooks and pipeline. yarn test:watch useful for developers to have a watcher mode on, re-executing affected tests when changes happen.

Lint

yarn lint lints all files. yarn lint:fix fix all linting errors.

Creating Component Essences

Essences are the agnostic part of a component that exists in the component library. This common part consists of Typescript code, SCSS files, and a README.md file that helps explain abstractly how this component should be builtd in any given framework.

Obviously the abstract structure isn't 100% applicable to all frameworks, for instance Angular enforces host elements for components, and that may change where and how the CSS is applied.