Recipe components built on React Storybook
-
React Storybook for UI components
-
TypeScript for type-safety
-
Rollup for bundling the package
-
Husky for performing pre-push checks
-
Concurrently for running pre-push checks in parallel
-
Automatic lint fixes using EsLint
-
@storybook/addon-links for linking from one story to another
-
Auto-deploy Storybook to GitHub pages (demo above)
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
open http://127.0.0.1:6006
- 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>
- 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.
- 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}/>
</>
- Example recipe data can be installed from olivercaine/recipe-data
npm ci
npm run dev
- https://tailblocks.cc for providing helpful pre-built components
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]/
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"
- Placeholder images
- Rename Placeholders.stories-disabled.tsx to enable it
- Fix import of placeholder images
- Gracefully handle missing images
- Change main logo