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

4. Publishing SNAPSHOTS

- Get artifactory api key from http://artifactory.zipcar.com/artifactory/webapp/#/profile
- Fetch auth info: curl -i -u: 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.

1. 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 . To see your current links, do wml ls. you can remove them with wml rm . To start wml, do wml start. If you get an error such as "directory is unwatched" you need to do watchman watch . 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.

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

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