OTP-UI React Component Library

Description

React component library, which can be used to build trip planner webapps.

See:

• Examples and docs (via Storybook)
• Current npm releases
• A reference implementation of otp-ui -- IMPORTANT NOTE: otp-ui use in otp-rr is a WIP / TBD

Getting Started

 git checkout https://github.com/opentripplanner/otp-ui.git
 yarn install
 yarn dev # (opens storybook to running component library on localhost:5555)

Development

Some packages in otp-ui depend on sibling packages (e.g., @opentripplanner/core-utils is used by many of its siblings). In order to test a package with local changes you have made to its sibling, you can run the following find/replace operations to make sure you're depending on your latest work (and not the released version):

1. In the package.json files for packages in which you want to test the sibling, find and replace (package-to-test being the package with local changes -- make sure these are committed to first to avoid the find/replace operations below polluting your work):

   "@opentripplanner/package-to-test": "current-version"

   with

   "@opentripplanner/package-to-test": "file:../package-to-test"

2. In your source files, find and replace:

   opentripplanner/package-to-test/lib/types

   with

   opentripplanner/package-to-test/src/types

3. Run: yarn && yarn dev

Stack

A Monorepo with multiple packages and a shared build, test, and release process.

• 🐉 Lerna  - The Monorepo manager
• 📦 Yarn Workspaces  -  Sane multi-package management
• 🚀 React  -  JavaScript library for user interfaces
• 💅 styled-components  -  CSS in JS elegance
• 🛠 Babel  -  Compiles next-gen JavaScript
• 📖 Storybook - UI Component Environment
• 🃏 Jest  -  Unit/Snapshot Testing

Usage

• yarn dev - This starts Storybook for viewing all the components locally.
• yarn bootstrap - This installs all of the packages and links dependent packages together.
• yarn preppublish - This babelfies all of the packages and creates /lib folders for each one.
• yarn unit - Run jest unit tests.
• yarn coverage - Shows jest unit coverage.
• npx lerna changed - Show which packages have changed.
• npx lerna diff - Show specifically what files have cause the packages to change.
• npx lerna create <packageName> - Creates new package and walks through setting up package.json

Lerna Publish to NPM

Some commands you might need to execute for lerna to publish to npm:

 npm whoami
 (if whomai comes back null, then: npm login; npm config set access public)
 npx lerna changed
 npx lerna publish  # option 1: default publish
 npx lerna publish 0.0.21 --force-publish=*  # option 2: publish all components to version X
 yarn deploy-storybook