Scripps News Component Library

A collection of React components in Storybook for use with local and national news related applications. The library can be viewed at Chromatic - News Component Library. The NPM package can be found here: Scripps News Component Library.

Getting Started

• clone this repository to a local folder and navigate to that folder

• make sure you are using Node version 18.14.0 or higher (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 development versions for QA testing

• 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 the suffix -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

  • this can be accomplished by running npm version prerelsease --preid=dev

• 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

• when you are ready to publish this version make sure you're latest updates are merged and request that this branch be published

• once the version is published it can be used in a project by using the version number you created (i.e. "@scrippsproduct/scripps-news-component-library": "~0.1.1-dev.0")

• if after being QA'd there are further updates, you will need to change the version number in the package.json file. It is recommended to update by adding a number after the -dev

  • 0.1.1-dev => 0.1.1-dev.1 (this is neccessay because NPM will not allow a package to be published with the same version number)
    • this can be accomplished by running npm version prerelease --preid=dev

• once the updates are completed push your updates and make a new request to publish the branch

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

Publishing a new version

• create a new branch from master and name it with the new version number (i.e. v0.1.2)

• update the version number in the main package.json file ("version": "0.1.2")

• merge all updates to the new branch (this can contain multiple updates)

• 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

~~Using this library in a local project~~

This currently doesn't not work

~~- 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/scripps-news-component-library": "file:../scripps-news-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