Skip to content

Latest commit

 

History

History
102 lines (68 loc) · 3.12 KB

README.md

File metadata and controls

102 lines (68 loc) · 3.12 KB
Raw

📚 Storybox

Storybook-Tailwind distribution for Styleguide projects

If you're just too lazy to read the README 😏👉 bun x frontend-storybox@latest

Currently provides:

👉 Live Demo

🔢 Want to upgrade your current project?

🎉 New Styleguide

First you need to kick off the generator:

$ mkdir new-styleguide && cd new-styleguide
$ bun x frontend-storybox@latest

If you want a good ESLint/Prettier/Cypress/Jest config, you can use the Antistatique Frontend Development Configuration as so:

⚠️ Make sure everything has been added/commited before doing this

$ bun x antistatique-frontend@latest # Uncheck storybook and check stylelint, obviously
$ git checkout tsconfig.json

🔧 Installation

You need to have the following tools installed globally on your environment:

To install the project:

bun install -y

🏁 Run the Project

Start the following commands in parallel (with nicer output):

$ bun run tailwind:start
$ bun run storybook:start

OR (with uglier output)

$ bun run start

And here are all the available commands:

  • bun run clean: Purge build packages cache
  • bun run tailwind:build: Build Production Tailwind project
  • bun run tailwind:start: Start Tailwind development mode
  • bun run storybook:start: Start Storybook
  • bun run storybook:build: Build Storybook static deliverable
  • bun run modules:start: Build modules and watch for changes
  • bun run modules:build: Build modules
  • bun run start: Start all development processes
  • bun run build: Build all deliverables
  • bun run build:assets: Build all deliverables
  • bun run build:styleguide: Build styleguide for deployment
  • bun run generate: Generate new component (select Blank for ease)
  • bun run icons:build : Build the icons sprite
  • bun run images:build : Build the placeholders images using ImageMagick

📦 Deliver Styleguide

To deliver your styleguide, simply hit the following command:

$ bun run build

In ./public, it will output you a CSS folder that includes a styles.css with your custom CSS and the *purged Tailwind utilities.

It will also take all the modules available in ./src/modules/ and create independent bundles (without React and ReactDOM) that can be used as widgets. Check the ./src/modules/test-module.tsx example.

*⚠️ Always use complete utility name (even in variables), otherwise the purge will skip your “composed” classNames.

🚀 Deploy Styleguide

You can easily (and freely) deploy your styleguide on Netlify.

Choose the following options:

  • Build command: bun run build:styleguide
  • Publish directory: storybook-static/