React Components Library

Library of reusable components

Version

The canonical version number for this package is set in config/manifest.yaml (NOT in package.json). This is so the CI can automatically create releases for new versions.

Changelog

This package keeps a changelog in CHANGELOG.​md. Please update this file whenever you update the version number. Please include a short description of the change and reference the Jira ticket number when applicable.

Getting Started

1. To install dependencies:

   yarn install (yarn is recommended)

2. To fetch latest schema:

   yarn gql-schema

   The GraphQL Schema is used to generate types for connected components. This schema currently comes from the Tickets cheetah (https://dogfood.zipcar.io/tickets-graphql by default).

   To generate types from your namespace run:

   yarn zql -p https://{namespace}.dev.zipcar.io/tickets-graphql.

3. To generate types from latest schema:

   yarn gql-types

4. To start Storybook on port 6006:

   yarn start [namespace]

   namespace defaults to dogfood

5. Publishing SNAPSHOTS

• Get artifactory api key from http://artifactory.zipcar.com/artifactory/webapp/#/profile
• Fetch auth info: curl -i -u<USERNAME>:<API_KEY> http://artifactory.zipcar.com/artifactory/api/npm/auth
• Put response in ~/.nmprc (see example /.npmrc.example)
• Update the package.json version major.minor.patch-SNAPSHOT.increment (e.g. 3.59.0-SNAPSHOT.1)
• Finally run yarn publish-snapshot

More Info...

1. To translate components into an 'importable' format:

   yarn build - translates Typescript and ES6. Outputs to zipcar-react-components-{VERSION_NUMBER}.tgz.

2. To output to a custom directory (Automatic):

   Try using WML. (https://www.npmjs.com/package/wml) wml uses watchman to copy a directory into another directory. Download watchman if you don't have it brew update && brew install watchman. Download wml, npm install -g wml. Link the library to another npm project (or a test directory if you want to see how it works): wml add <source-directory> <output-directory>. To see your current links, do wml ls. you can remove them with wml rm <link-id>. To start wml, do wml start. If you get an error such as "directory is unwatched" you need to do watchman watch <source-directory>. Now you need to remember to compile your tsc - I usually use a tsc watch in vscode by hitting CMD + SHIFT + B in vscode and doing a tsc build, then a tsc watch.

3. To output to a custom directory (Manual):

   yarn build will output zipcar-react-components-{VERSION_NUMBER}.tgz. Replace the contents of the zipcar-react-components folder in your applications /node_modules with the contents of that .tgz file.

4. To add a new component, util, etc.

   • Create a new folder for a component, or add a new file under /util
   • Make sure to export the new component in src/index.ts
   • For utils, const make sure to export the new file in src/util/index.ts or src/const/index.ts

Tutorials