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 dev # (installs packages, transpiles files, 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. Run: yarn && yarn dev

Storyshot testing

This repo utilizes the Storyshot Storybook addon to perform snapshot tests of every story in this monorepo. Whenever the script yarn unit is ran, the Storyshot addon will be included along with all the other tests. It will compare the initial output of every story to the saved snapshot of that story. This provides a quick way to make sure nothing drastic has changed and that every single story is able to initially render without an error. Storyshot doesn't snapshot all possible changes that can be done while interacting with story components. Often times these snapshots will need to be updated and that can be accomplished by running yarn unit -u.

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

Releasing

This project uses semantic-release to create releases to NPM. It is expect that contributors create Conventional Commit messages. These are then parsed by semantic-release which will automatically create an appropriate release for each package whenever a branch is merged to master.

Sometimes when creating new releases, it will be necessary to update numerous packages within this repo at once to a newer internal package version. For this purpose there is the update-internal-dependencies script. This should be ran manually as needed. By default, yarn update-internal-dependencies will update all dependencies with the @opentripplanner scope in all packages within this project. To only update specific dependencies, it is possible to run something like yarn update-internal-dependencies core-utils base-map. This would update all dependencies on either the @opentripplanner/base-map or the @opentripplanner/core-utils in all packages in this project.

Raster Tile Versions

As of Fall 2022, the otp-ui map layers have migrated from Leaflet to MapLibreGL. This migration was a breaking change, so existing uses of otp-ui should be unaffected. If you wish to migrate to the latest version, please see the Migration Guide.

We understand not all will want to upgrade to vector tiles right away, and so will be maintaining the raster tile versions of all relevant packages for the foreseeable future.

The following table lists the last major version of each package which uses raster tiles. These major versions will receive fresh minor versions as updates are needed.

Package	Latest Major Version with Raster Tiles
base-map	2
core-utils	7
endpoints-overlay	1
itinerary-body	4
park-and-ride-overlay	1
route-viewer-overlay	1
stop-viewer-overlay	1
stops-overlay	4
transit-vehicle-overlay	2
transitive-overlay	2
trip-viewer-overlay	1
types	3
vehicle-rental-overlay	1
zoom-based-markers	1