template-esm-react

Quickly setup ESM React repositories with preconfigured functionality.

Installation

1. Run npm init and answer the required prompts
2. Run npm install

Usage

Remove/replace the sample source files in src & stories with your own.

When adding source files, remember to add the build output file details to the files & exports fields of package.json and .gitignore.

🛠️ Build

npm run prepare runs all preparation clean & build scripts:

• npm run prepare:clean removes any files as specified in the files fields of package.json
• npm run prepare:css compiles SCSS files from src into CSS files in the root directory with PostCSS & Sass
• npm run prepare:js compiles JavaScript source files into the root directory files with Babel

Note: the "prepare" Life Cycle Script runs automatically during publish, pack and on local install.

🚀 Deployments

The GitHub action release.yml is used to automatically deploy a release to the NPM package registry. The action requires the NPM_TOKEN secrets to be set.

📕 Storybook

• npm run storybook will run Storybook for local use
• npm run storybook:build will build Storybook to ./storybook-static for deployment use

🧪 Testing

Code linting tests

The GitHub action node-tests.yml is used to run the code linting tests on pull requests and commit pushes into the main branch. The action requires the NPM_TOKEN secrets to be set.

npm run test runs the code linting tests:

• npm run test:eslint runs the ESLint JavaScript linting checks
• npm run test:prettier runs the Prettier code formatting checks

Storybook CI tests

The GitHub action storybook-tests.yml is used to run the Storybook CI tests on pull requests and commit pushes into the main branch. The action requires the following secrets to be set:

• NETLIFY_SITE_ID
• NETLIFY_TOKEN
• NPM_TOKEN

These Storybook CI tests can also be run while running Storybook locally:

• npm run test:storybook uses Storybook Test Runner to run Test Coverage, User Interaction, DOM & Image Snapshot tests.
• npm run test:storybook:update will update the Test Coverage results and any failing DOM & Image Snapshot snapshots

🕵️ Code linting

Husky & lint-staged are used to automatically run code linting checks on each file of a commit.

You can manually run linting error fixes with:

• npm run eslint fixes JavaScript linting issues with ESLint
• npm run prettier fixes code formatting issues with Prettier

Custom dev tooling

npm init

• Automatically resets name with --scope arg (if given) and directory name (lowercased)
• Automatically resets version to 0.0.0
• Automatically sets repository, bugs & homepage from .git/config
• Prompts user for description (required)
• Prompts user for keywords, license & author (optional)

postprepare

npm run postprepare runs the following formatting:

• Updates package.json:
  • Formats repository & bugs to shorthand urls
  • Sorts the order of keys - see KEYS_ORDER
  • Sorts the order of sub-keys alphabetically
  • Sorts the order of dependencies, devDependencies & peerDependencies fields to the end
• Updates the README.md:
  • Uses the package name for the main title
  • Uses the package description for the first paragraph after the main title
  • Keeps anything from the second title and below

Note: the "postprepare" Life Cycle Script runs automatically on install.