🐉 Storyless

Storyless is a UI DevTool that lets you build and test components in isolation inside of your app.

For when design system powerhouses like Storybook is just too much.

Direct interoperability with your app and main build tools means hard-to-integrate features like authentication, fetching, state management, themes, etc. will just work when you need them.

👉 LIVE DEMO

🚀 Get Started

📖 Storyless (React)

Complimentary tools, on the house:

🦩 Feasy – Feature Toogles
🦘 JSON Switcheroo – CLI Tool
🥷 Figma to SVG – CLI Tool

🚀 Get Started (for Contributors)

Note that all installs may require restarting the terminal – and in some cases a complete reboot – to work properly

Clone this repo to your development environment

Install node >=20.0.0 <21.0.0*

*Alternatively, you can use Node Version Manager with the included .nvmrc file

nvm use

Install bun >=1.0.13

Install dependencies:

bun i

Start developing:

bun dev

Unless you're a veteran, it is highly recommended to read through the 🤯 Problems During Development? section before starting development.

What's inside?

This Turborepo includes the following packages & apps:

Apps and Packages

• 📂 apps
  • 📖 docs - Storyless docs (Next.js)
  • 🦩 feasy - Feasy Feature Toggling Service (Next.js)
  • 🦩 feasy-api - Unused backend prototype for Feasy
  • ▲ nextjs-app-router - Next.js app (app router) for testing
  • ▲ nextjs-pages-router - Next.js app (pages router) for testing
• 📂 packages
  • 📖 react-storyless - React (and Next.js) library for Storyless
  • 🦩 feasy-drizzle - Library to do Feasy Database operations
  • 🥷 figma-to-svg - CLI tool to convert Figma designs to SVGs
  • 🎨 ui - Shared UI components for the monorepo
  • 🧙‍♂️ scripts - Monorepo scripts
  • 🧙‍♂️ tsconfig - Reusable TypeScript configurations
  • 🧙‍♂️ eslint-config-storyless - Reusable ESLint configurations

📦 Publish

Note: You need to be a member of the @storyless npm organization to publish packages

npm login
bun publish-packages

Useful TurboRepo Links

Learn more about the power of Turborepo:

• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

🤯 Problems During Development?

Below are ways to solve them.

As of now we only support VSCode running on MacOS, Linux and WSL.

You are free to use anything else, but we can't guarantee that it will work.
Please document your findings if you try something else <3

Generally

Restart your IDE (VSCode) and/or terminal

Restart your computer

Permission errors when running commands (MacOS/Linux)

Prefix the command with sudo, e.g.:

sudo whatever you were trying to run

Pulling changes from the repository

Always check for and install new dependecies when you pull changes from the repository:

bun i

Wrong version of Node

• Check your version with

  node -v

• Install the correct version according to engines in package.json

Wrong version of bun

Check your version with

bun -v

Install the correct version according to engines in package.json

Using 32-bit version of Node (Windows)

Getting error Command failed with exit code 3221225477 or something similar?

Check if you're using 32-bit Node.js:

node -p "process.arch"

If so, ensure you're running on a 64-bit system, then install the 64-bit version instead.

Divergent git branches

git config pull.rebase false

Ports already in use

Kill the processes running on relevant ports:

bun run killports

Weird TypeScript or ESLint errors

First, make sure you're running the workspace version of TypeScript and ESLint:

Open up any TypeScript file in the project and press...

• ⌘ + Shift + P on Mac
• Ctrl + Shift + P on Windows

Then ask VSCode to use the workspace TypeScript version:

> TypeScript: Select TypeScript Version

Then restart the TypeScript server:

> TypeScript: Restart TS server

Same for ESLint:

> ESLint: Restart ESLint server