Scripps ORION Component Library

A collection of React components in Storybook for use with ORION related applications. The library can be viewed at Chormatic - ORION Component Libray. The NPM package can be found here: ORION Component Library.

Getting Started

• clone this repository to a local folder and navigate to that folder
• make sure you are using a Node version between 18.14.0 and 19.9.0 (it is recommended to use NVM for node version management)
• install dependencies (run npm install)
• run the project (npm run storybook) - this will start a local server on port 6006
  • the script will automatically open the project in a browser tab at https://localhost:6006
  • 6006 is the default port, the script may ask to open on a differnet port if it detects 6006 is already in use

Publishing prerelease versions for testing or review

• create a new brach off of the master branch
  • name this branch by incrementing the patch version number by 1 and prefixing with a v and followed by a prerelease id of -dev
    • current version 0.1.0 => v0.1.1-dev
• update the version number of the main package.json file to reflect the number used to create the branch (i.e. "version": "0.1.1-dev.0") and commit this update to the branch
• you may merge any branches that contain updates for this version, or create your updates directly on this branch
• push your changes to this branch
• to publish this version run npm distribute and then npm publish
  • note that if you use an authenticator app as your method of 2FA you can add the code directly in the command line by using the otp option: npm publish --otp={code from app}
• once the version is published it can be used in a project by using the version number you created (i.e. "@scrippsproduct/orion-component-library": "~0.1.1-dev.0")
• if after review futher revisions are required, you will need to change the version number in the package.json file.
  • 0.1.1-dev.0 => 0.1.1-dev.1 (this is neccessay because NPM will not allow a package to be published with the same version number)
  • if all of your changes have been commited this may also be accomplished by running npm run version prerelease --preid=dev
• then publish as described previously

Publishing a new patch, minor or major version

• create a new branch from master and name it with the new version number (i.e. a new patch version v0.1.2)
• merge all updates to be included in the new version to this new branch
• update the version number in the main package.json file ("version": "0.1.2")
• commit the changes & push the new branch
• make a merge request to have this branch merged with master and published
  • in your merge request include a list of the changes from the previous version

Publishing the library to Chromatic for reviewers

• run the chromatic script (npm run chromatic)
  • this will create a new build on Chromatic from the current active branch
• if you run into visual discrepencies those will need to be approved prior to reviewers being able to view the new build
• once the build has passed approval direct reviewers to the project on Chromatic by using your branch name in this URL: https://{branch name here}--.chromatic.com (i.e. https://v0.1.1-dev--.chromatic.com)
  • note that since this is a URL if you use a forward slash in your branch (i.e. feature/something) the forward slash will need to be a dash (-) in the URL (https://feature-something--.chromatic.com)

Using this library in a local project

This isn't working currently

• ~~run the distribute script (npm run distribute)~~
• ~~in the package.json of your project link your library dependency to the root folder of this library (i.e. "@scrippsproduct/brightspot-component-library": "file:../brightspot-component-library")~~
• ~~re-install the dependencies in the local project~~
• ~~you can now import components from the local library into your project~~

Available Scripts

• storybook: compiles and runs the project locally on localhost:6006
• distribute: will transpile all component files within the scr folder to a dist folder at the root of the project
  • the dist folder is the only folder that is included in the published package
• chromatic: will create a new build version on Chromatic
  • this process will run a visual test of all components, if there are any discrepancies they will have to be approved before the new version will be available
• build-storybook: builds a production ready version of the project for hosting the library on a server
  • this can be useful for debugging build errors while trying to build to Chromatic