📚 Compose storybooks for an overview.

Related tags

React storybook
Overview

logo

"Put all the books in the bookcase."
Compose storybooks for an overview.

English | 简体中文

📢 CLI bookcase-builder as bb.

Background

In the monorepo project, usually we will have a storybook for each package, and use CI to deploy them to the server.

packages
    |--- packages-1
            |--- .storybook
            |--- public
    |--- packages-2
            |--- .storybook
            |--- public
    |--- packages-3
            |--- .storybook
            |--- public
    |--- ...

But each project deployment link is independent.

https://localhost:3000/packages-1
https://localhost:3000/packages-2
https://localhost:3000/packages-3

Storybook provides ref attribute, which allows us to compose them together, and access them via an address.

https://localhost:3000/overview
    |- https://localhost:3000/packages-1
    |- https://localhost:3000/packages-2
    |- https://localhost:3000/packages-3

But it's not easy to compose them together. We need to modify a lot of packaging configurations, and create a package for this, and these configurations only need to be used when building overview. It's too complicated, so that's where this tool comes in, and it can do it all in one command.

The chromatic tool was officially recommended, and it made it easy for us to do this, but we couldn't use it to complete the build and privatize the deployment.

Installation

npm i bookcase-builder -D

Configurations

// package.json

{
  "bookcase-builder": {
    /*
    * [ 📌 Required ]
    * Where to find Packages.
    */
    "workspaces": [
      "packages/*"
    ],
    /*
    * [ 📌 Required ]
    * Directory where to store built files.
    */
    "output": "./public",
    /*
    * Rename the current package name, default to package directory name.
    * e.g.
    * [root]/packages/packageA => http://localhost:3000/packageA
    * Set basename to "packageB", it will be http://localhost:3000/packageB
    */
    "basename": "packageB",
    /*
    * Basename of URL.
    * e.g.
    * [root]/packages/packageA => http://localhost:3000/packageA
    * Set publicURL to "/PREFIX_URL/", it will be http://localhost:3000/PREFIX_URL/packageA
    */
    "publicURL": "/PREFIX_URL/",
    /*
    * [ 📌 Required ]
    * Which package manager is used.
    * 'yarn' | 'npm' | 'pnpm'
    */
    "packageManager": "yarn",
    "storybook": {
      // Storybook directory, default to ".storybook"
      "configDir": "./.otherStorybookDir"
    }
  }
}

Usage

  1. Config
// package.json of package root directory.

{
  "bookcase-builder": {
    "workspaces": [
      // Tell BB where to find the packages to be built
      "packages/*"
    ],
    // Let BB where to store the built files
    "output": "./public",
    // What package manager is used.
    "packageManager": "pnpm"
  }
}
// package.json in the workspace directory.
// Here you can configure the project to be built. For example specify the storybook configuration directory.
// If you want to use the default configuration, you can set it to "{}". And if haven't configured it, BB will't build it.
{
  "bookcase-builder": {
    // Rename the current package name, default to package directory name.
    "basename": "other name",
    "storybook": {
      // Storybook configuration directory, default to ".storybook"
      "configDir": "./.otherStorybookDir"
    }
  }
}
// .storybook/main.[js/ts] of the project to be built in the workspace.
import { withOverview } from 'bookcase-builder';

// Let BB know where to find the project to be built, And send original config to the withOverview function.
export default withOverview(__dirname)({
  // Original config.
  ...,
});
  1. Build
$ bookcase-builder or bb

Tips

$ bb --help

Sponsors

License

MIT License © 2022 Dohooo

You might also like...

A dock for the Gnome Shell. This extension moves the dash out of the overview transforming it in a dock for an easier launching of applications and a faster switching between windows and desktops. Features modifications for tauOS.

A dock for the Gnome Shell. This extension moves the dash out of the overview transforming it in a dock for an easier launching of applications and a faster switching between windows and desktops. Features modifications for tauOS.

Dash to Dock A dock for the GNOME Shell This extension enhances the dash moving it out of the overview and transforming it in a dock for an easier lau

Jul 10, 2022

docsQL - Getting an overview over your Markdown file in your Jamstack site

docsQL - Getting an overview over your Markdown file in your Jamstack site

docsQL Getting an overview of your Jamstack Markdown files. Demo Play with: https://peterbe.github.io/docsql/ You're supposed to run docsQL with your

Jan 3, 2023

A visual, interactive outline map that combines the clarity of the outline with the intuitive overview of the minimap. Alternative Minimap.

A visual, interactive outline map that combines the clarity of the outline with the intuitive overview of the minimap. Alternative Minimap.

Outline Map EN | 中文 A visual, interactive outline map that combines the clarity of the outline with the intuitive overview of the minimap. Alternative

Dec 21, 2022

Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.

"Keo" is the Vietnamese translation for glue. Plain functions for a more functional Deku approach to creating stateless React components, with functio

Sep 24, 2022

Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Jan 3, 2023

egg.js(jwt) + mysql(sequelize) + redis + docker + docker-compose + nginx + vue + element-ui 全栈获取省市区数据(统计局数据)【工具】项目,实现在docker环境中一键部署

Egg-spider Preview 线上预览地址 (https://ronaldoxzb.com/) admin admin Project description [后端]egg.js(jwt) + mysql(sequelize) + redis + docker + docker-compo

Sep 29, 2022

A Gmail Clone which built with ReactJS and Redux. You can sign in with your Google Account, compose a new e-mail and send realtime emails to the project.

Gmail Clone with ReactJS A Gmail Clone that you can sign in with your Google Account, compose a new e-mail and send realtime emails to the project. Cl

Nov 14, 2022

Starter Project for Nuxt3 project with full tailwind3 implementation and also docker & docker-compose supprt

Nuxt 3 & Tailwind 3 Starter Including tailwindConfig and Tailwind Config Viewer! Be patient, this is just a Beta version of Nuxt3. For Nuxt3 Installat

Nov 10, 2022

A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose

A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose

Turborepo + Strapi + Next.js + Docker A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose. ⚠️ Prerequisit

Dec 29, 2022

Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose.

spa-store Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose. Contributing Feedback Roadmap Releases Check

Jul 4, 2022

trying nest.js with docker-compose

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest framework TypeScript starter repository

Dec 27, 2022

local docker-compose environment to deploy and configure backoffice

backoffice-local local docker-compose environment to deploy and configure backoffice How to install To install the repo dependencies yarn install be s

Dec 15, 2022

Transform and compose data for HTTP transactions.

Transform and compose data for HTTP transactions.

Fragments Fragments is a platform to compose and manage custom data objects for HTTP transactions. Simply put, you can write simple jinja templates to

Sep 6, 2022

Easily compose images together without messing around with canvas

Easily compose images together without messing around with canvas

merge-images Easily compose images together without messing around with canvas Canvas can be kind of a pain to work with sometimes, especially if you

Dec 30, 2022

Single function to create, manage, compose variants, for any CSS-in-JS libraries.

Build-variants Single function to create, manage, compose variants, for any CSS-in-JS libraries. Motivation Before diving into the implementation deta

Jan 2, 2023

Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose.

Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose.

Atlan CLI Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose. What is A

Aug 17, 2022

The app's backend is written in Python (Flask) and for search it uses Elasticsearch. I used this app as candidate application for learning out how to build, run and deploy a multi-container environment (docker-compose).

foodtrucks-app-docker-compose The app's backend is written in Python (Flask) and for search it uses Elasticsearch. I used this app as candidate applic

Oct 24, 2022

A FARM stack app automated with docker-compose

A FARM stack app automated with docker-compose

Expense-Tracker An expense tracker built with FARM stack (FastAPI,React,MongoDB) Requirements Docker Docker-Compose Install and Run To install and run

Oct 10, 2022

An example T3 app containerized with Docker, Docker Compose, and deployed on Railway

Create T3 App This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack. What's next? How do I make an app with this? W

Dec 19, 2022
Releases(v0.0.11)
Owner
赵東澔
Developers who develop anything.
赵東澔
Single function to create, manage, compose variants, for any CSS-in-JS libraries.

Build-variants Single function to create, manage, compose variants, for any CSS-in-JS libraries. Motivation Before diving into the implementation deta

Alexis Mineaud 3 Jan 2, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Overview of ECMAScript 6 features

ECMAScript 6 git.io/es6features Introduction ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a s

Luke Hoban 29.1k Jan 4, 2023
ECMAScript 6: Feature Overview & Comparison

es6-features.org ECMAScript 6: Feature Overview & Comparison Copyright (c) 2015-2017 Ralf S. Engelschall <[email protected]> <@engelschall> Partiall

Dr. Ralf S. Engelschall 6.2k Dec 27, 2022
A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart

Gatsby Starter Shopify Kick off your next Shopify project with this boilerplate. This starter creates a store with a custom landing page, individual f

Brent Jackson 12 May 12, 2021
project overview tool, used to analyze the amount of code, the number of files, code statistics and so on.

pot z-pot is a project overview tool, used to analyze the amount of code, the number of files, code statistics and so on. 项目概述工具,用于分析代码量、文件数、代码统计等。 快速

zhangchi 18 Aug 10, 2022
Tunes overview UI of the gnome 40 a bit

Gnome 40 Overview UI Tune Simple gnome-shell (v40.0) extension that tunes overview UI to make it more usable. Changes Search textbox is hidden by defa

Alexey Manukhin 68 Nov 28, 2022
A visual overview of Kubernetes architecture and Prometheus metrics

A visual overview of Kubernetes architecture and Prometheus metrics. Structure Navigate through the structures page to easily see your control planes

OSLabs Beta 213 Oct 11, 2022