ivoreis/shared-components

Shared components monorepo example

Shared Components

Example monorepo project with minimal setup for shared components

Styleguide available in gh-pages. https://ivoreis.github.io/shared-components/

Goals

• Minimal configuration
• Easy local development / testing experience
• Packages include:
  • ESNext - Unstranspiled code
  • Types - Typescript declaration files
  • ESM - ECMAScript Modules (esm)
• Packages should run in all evergreen browsers. IE 11 excluded. If anyone consuming these packages need to provide support for IE11 or other older browsers they need to include these packages in their transpilation process
• Minimum dependencies (You can use tools like bundlephobia to check package size before adding to the library). No ramda. No moment :)

Example output:

  // package.json
  "esnext": "dist-src/index.js",
  "types": "dist-types/index.d.ts",
  "module": "dist-web/index.js",

// Publish-ready pkg folder
pkg
├── dist-src
│   └── index.js
├── dist-types
│   └── index.d.ts
├── dist-web
│   ├── index.js
│   └── index.js.map
└── package.json

Todo

• Add github actions
  • Build alpha packages when PRs merged into Master
  • Build documentation and publish packages on releases
• Add snapshot testing
• Add eslint
  • Prettier integration
  • A11y integration
• Add react-axe to packages
• Add react-axe to documentation

Using

• Docz
• Lerna
• Conventional-commits
• Commitizen
• Pika (More info)
• Parcel (local dev)
• Theme UI (Design System)

Commands

Install

  npm i // install local dependencies

Bootstrap

  npm run bootstrap // the same as lerna bootstrap (install all dependencies)

Build

  npm run build // build all the packages (excludes documentation)

  npm run docz:build // build documentation

Extra

  npm run nuke // removes all node_modules and force install of new packages

Development

For documentation:

  npm i // install local dependencies
  npm run bootstrap // the same as lerna bootstrap (install all dependencies)
  npm run docz:dev // runs docz in local development

For components:

  npm i // install local dependencies
  npm run bootstrap // the same as lerna bootstrap (install all dependencies)
  cd packages/... // go to your project
  npm run dev // runs the code in localhost for quick prototyping

Publishing

  npm run version // bump version of packages changed since the last release (using conventional-commits / Semver)
  npm run version:prerelease // release current changes as prerelease versions
  npm run version:graduate // graduate prerelease versioned packages to stable versions
  npm run publish -- --registry=REGISTRY_URL // publishes the packages to `REGISTRY_URL`