zipcar-react-components v3.105.23-SNAPSHOT
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
To install dependencies:
yarn install
(yarn is recommended)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
.To generate types from latest schema:
yarn gql-types
To start Storybook on port 6006:
yarn start [namespace]
namespace defaults to dogfood
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...
To translate components into an 'importable' format:
yarn build
- translates Typescript and ES6. Outputs tozipcar-react-components-{VERSION_NUMBER}.tgz
.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, dowml ls
. you can remove them withwml rm <link-id>
. To start wml, dowml start
. If you get an error such as "directory is unwatched" you need to dowatchman watch <source-directory>
. Now you need to remember to compile your tsc - I usually use a tsc watch in vscode by hittingCMD + SHIFT + B
in vscode and doing a tsc build, then a tsc watch.To output to a custom directory (Manual):
yarn build
will outputzipcar-react-components-{VERSION_NUMBER}.tgz
. Replace the contents of thezipcar-react-components
folder in your applications /node_modules with the contents of that .tgz file.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
orsrc/const/index.ts
- Create a new folder for a component, or add a new file under
Tutorials
3 months ago