opentripplanner / otp-ui

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 Development You can chat with the main OTP-RR developers in our Gitter chat. Support is not guaranteed, but we may be able to answer questions and assist people wishing to make contributions. Some packages in otp-ui depend on sibling packages (e.g., is used by many of its siblings). Internal dependencies are handled with the version, which is a notation provided by pnpm. This allows us to always reference the current internal dependency version. Therefore, before the storybook can be run, it's necessary to run so that all internal packages are built. If the Storybook addon bar (a bar of controls at the bottom of the story) does not appear, you may need to clear localStorage by opening the browser console and typing . Storyshot testing This repo utilizes the Storyshot Storybook addon to perform snapshot tests of every story in this monorepo. Whenever the script 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 . Stack > A Monorepo with multiple packages and a shared build, test, and release process. • 🐉 Lerna  - The Monorepo manager • 📦 PNPM 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 • - This starts Storybook for viewing all the components locally. • - This installs all of the packages and links dependent packages together. • - This babelfies all of the packages and creates and folders for each one. • - Run jest unit tests. • - Shows jest unit coverage. • - Deletes all files in the gitignore (note: this can delete local editor settings) • - Creates tarball packages for all non-private packages and displays their locations. • - Show which packages have changed. • - Show specifically what files have cause the packages to change. • - 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. Local Testing Internal package dependencies are referenced using the protocol provided by pnpm. This allows us to depend on our internal packages without keeping versions up to date, but these versions must be replaced with the actual version numbers prior to release. pnpm handles this when publishing automatically. However, if you wish to rely on an otp-ui package in a local filesystem project using the protocol, you need to use to create a tarball of the package, then reference that tarball in the other project's package.json. For example, to depend on core-utils locally, you can run from within the . Next, in the other project, use a line like this to reference the resulting tarball. Package Tarball Creation The command creates tarball packages for all non-private packages in the monorepo and displays their locations. This is useful for testing packages locally in another project. When executed, this command runs for each non-private package and outputs the path to the generated tarball file. You can then reference these tarballs directly in other projects using the file protocol in your other project's package.json. 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 | | ------------------------- | -------------------------------------- | | | 2 | | | 7 | | | 1 | | | 4 | | | 1 | | | 1 | | | 1 | | | 4 | | | 2 | | | 2 | | | 1 | | | 3 | | | 1 | | | 1 | Internationalization OTP-UI uses from the library for internationalization. Both and take advantage of native internationalization features provided by web browsers. Language-specific content is located in YML files under the folder of packages that have internationalizable content (e.g. for American English, for generic French, etc.). Note: Do not add comments to these YML files! Comments are removed by during pre-commit. Instead, comments for other developers should be placed in the corresponding js/jsx/ts/tsx file. Comments for translators should be entered into Weblate (see Contributing Translations) To use the YML files in your react-intl application: • Merge the content of this file into the messages object that has your other localized strings, • Flatten the ids, i.e. convert a structure such as into • Pass the resulting object to the messages prop of . See for an example of how to initialize localized messages with . Using internationalized content in the code Acces…