@opentripplanner/geocoder NPM

OTP-UI React Component Library

Description

React component library, which can be used to build trip planner webapps. See https://github.com/opentripplanner/otp-react-redux for a reference implementation of otp-ui (IMPORTANT: WIP / TBD...on using otp-ui in otp-rr). See https://www.npmjs.com/org/opentripplanner for current releases.

Getting Started

 git checkout
 yarn install
 yarn build
 yarn dev

Storybook Demo

see https://ibi-group.github.io/otp-ui

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 build - 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.

Lerna

lerna changed - Show which packages have changed.
lerna diff - Show specifically what files have cause the packages to change.
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 npm:

 npm login
 npm config set access public
 npx lerna publish

Linking

When linking inside of the Monorepo, everything works as expected. If you are trying to consume packages from this Monorepo in a different application locally, using npm link or yarn link does not work as expected. However, we have a workaround for the time being.

Run yarn build
Run yarn dev
Change the package.json of the consumer from $YOUR_PACKAGE_NAME (which lives inside the monorepo) to file:./../monorepo/packages/$YOUR_PACKAGE_NAME
Run rm -rf node_modules && yarn in the consumer
🎉

Contributing

All formatting and linting should be taken care of for you using stylelint, ESLint, and Prettier. You should also consider installing an extension for CSS syntax highlighting.