Skip to content

Project starter template that can be extended to quickly build a Storybook.js React UI component library in TypeScript. This template includes the ability to deploy to GitHub Pages, publish npm package to GitHub packages or the npm registry, and deploy pull-request preview environments in Chromatic.

Notifications You must be signed in to change notification settings

AVu120/typescript-react-storybook-template

Repository files navigation

Typescript React Storybook Project Template

About

This is a starter template that can be extended to quickly build a Storybook React UI component library in TypeScript. This template includes the ability to:

View Storybook

Access live QA environment deployed on GitHub Pages.

Contribute to Storybook.

Publish to GitHub Package

  1. Include
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },

in the package.json.

  1. In package.json, change value of the "name" field to @<GitHub-account-that-owns-repo>/typescript-react-storybook-template. In the case of my repo, that would be
  "name": "@AVu120/typescript-react-storybook-template",
  1. Enable GitHub Actions workflow: .github\workflows\publish_github_package.yml (read comments in that file for instructions on how to enable it).
  2. Disable .github\workflows\publish_to_npm_registry.yml.

Publish to NPM Registry

  1. Exclude
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },

from package.json.

  1. In package.json, change value of "name" field to @<npm-account-username>/typescript-react-storybook-template. In the case of my profile in which I want to publish to https://www.npmjs.com/package/@anthonyhienvu/typescript-react-storybook-template, that would be
"name": "@anthonyhienvu/typescript-react-storybook-template"
  1. Enable GitHub Actions workflow: .github\workflows\publish_to_npm_registry.yml (read comments in that file for instructions on how to enable it).

  2. Disable .github\workflows\publish_github_package.yml.

  3. Increment the semantic versioning in the package.json file to reflect the changes you have made.

  4. Create a pull-request (PR) to merge your feature branch into the main branch.

  5. Have relevant stakeholders inspect code/DOM/component/visual/story changes in the Chromatic PR preview environment. You can access this PR preview environment by going to the pull-request page:

  • Click on the 'Details' link.

    image

  • Click on one of the links below to see the full updated Storybook or only the PR changes deployed in Chromatic.

    image

  • If you open the build details on Chromatic, you'll see a summary of the changes in the PR:

image

  • Click on the 'Review changes' button to drill-down into each change.

image

  1. After all the changes have been accepted in Chromatic & the PR has been approved on GitHub by relevant stakeholders, merge & squash the PR into main.

Update Live QA Environment

On completion of step 8, the updated Storybook will be automatically deployed to the live QA environment (if .github\workflows\deploy_to_qa_env.yml is enabled).

Consume from Storybook

GitHub Package

  1. Create a .npmrc file in the root of your project directory if it doesn't already exist.
  2. Add this to your .npmrc file:
@<Github-account-that-owns-repo-hosting-the-GitHub-Package>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=

E.g. for this template repo, this would be

@avu120:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=
  1. Generate a GitHub personal access token with repo, read:packages, write:packages permissions.
  2. Add that token into the .npmrc file as follows (fake token used as example)
@avu120:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=ghp_hCL59WDSY2fj1SbJOiwA5hpA7Hao2w4mak29
  1. Go to the repo home page.
  2. Click on the typescript-react-storybook-template package link:

image

  1. Follow the displayed instructions to import the package into your project.

NPM Registry Package

  1. Go to https://www.npmjs.com/package/@anthonyhienvu/typescript-react-storybook-template
  2. Follow the instructions to import the package into your project.

Author Contact Details

About

Project starter template that can be extended to quickly build a Storybook.js React UI component library in TypeScript. This template includes the ability to deploy to GitHub Pages, publish npm package to GitHub packages or the npm registry, and deploy pull-request preview environments in Chromatic.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages