Boilerplate UI Component Library

Recipe components built on React Storybook

Demo

Tools & Frameworks

1. React Storybook for UI components

2. TypeScript for type-safety

3. Rollup for bundling the package

4. Husky for performing pre-push checks

5. Concurrently for running pre-push checks in parallel

Features

1. Automatic lint fixes using EsLint

2. Storybook Story snippet

3. Story interaction test example

4. @storybook/addon-links for linking from one story to another

5. Auto-deploy Storybook to GitHub pages (demo above)

Getting started

Run the app

Option 1: Using local environment:

nvm use # Switches to Node version defined in .nvmrc
npm ci
npm run dev

Option 2: Running in Docker:

npm run dev:docker

View the component library

open http://127.0.0.1:6006

How to use

1. Register the GitHub Package Registry in your .npmrc file (additional docs):

# .npmrc
@olivercaine:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<YOUR_GITHUB_TOKEN>

2. Install the package:

npm install @olivercaine/ui-component-library-recipes@latest

or

yarn install @olivercaine/ui-component-library-recipes@latest

Older versions can be found in the packages page.

3. Import the package into your app:

import { Ingredients } from '@olivercaine/ui-component-library-recipes'
import { recipes } from '@olivercaine/recipe-data'
import * as React from 'react'

export const MyComponent = () =>
  <>
    {/* Your custom code */}
   <Ingredients recipe={recipe}/>
  </>

4. Example recipe data can be installed from olivercaine/recipe-data

How to run locally

1. npm ci
2. npm run dev

Credits

1. https://tailblocks.cc for providing helpful pre-built components

Troubleshooting

Not allowed to write organization package

Error message:

Permission installation not allowed to Write organization package

Cause:

You may be trying to publish to an NPM repositoryw which doesn't belong to you

Solution:

Make sure that the name in package.json starts with @[GitHub username]/

Write package permission denied

Error message:

Permission permission_denied: write_package

Cause:

GitHub Actions does not have permission to publish the package

Solution:

Enable [GitHub Repo] > Settings > Actions > General > "Read and write permissions"

Todo

1. Placeholder images    
   1. Rename Placeholders.stories-disabled.tsx to enable it
   2. Fix import of placeholder images
2. Gracefully handle missing images
3. Change main logo