itsjavi / storylite

A lightweight alternative to StoryBook for React, built on top of Vite⚡️, compatible with CSF 3.0

Hi there, it's Javi 👋

• 💻 Senior Full Stack Developer
• 🌈 Wide range of dev languages including: PHP, JS, TypeScript, Python, Golang & C#
• 🧩 Frameworks: Symfony, React, NextJS, Remix
• ⚙️ Comfortable with different JS runtimes and enviroments: Browser, Node, Electron, Vercel Edge, Bun
• ☁️ Cloud Platforms (Serverless): Vercel, AWS, Cloudflare
• 🔁 Agile, with a DevOps mindset.
• 🔀 Familiar configuring CI/CD pipelines, and automation processes.
• 🧱 DDD & Clean Architecture advocate.
• 📚 I embrace modern Web standards as much as possible.
• 🔬 I have a curious mind and I like to keep learning.
• 🌎 Can speak in Spanish, Catalan, English, Italian and some basic German.
• 🐱 Hobbies include Cooking, Singing, Hiking, Paddle surf, Sci-Fi, Pokémon games and good Pizza
• 📝 I occassionaly write about software engineering on my dev blog blog.itsjavi.com

Side Projects

Some of my side projects include:

• a Next.js Pokémon community called SuperEffective.gg. Currently migrating it to App Router and RSC.
• StoryLite: a very lightweight alternative to StoryBook for React. Currently paused, but I will get back to it next.
• a CSS Grid Playground
• a photo library classifier and organizer called Mediatidy using Python and Tensorflow (but I also wrote a Go version).
• A (WIP) framework called Pizza
• ... and many more!

Creating a Full-Stack Framework

I am not very happy about the current state of the frontend in the last years (2021-2024), so I am also interested in creating a full-stack framework that could make Next.js blush, heavily relying on modern web standards (rather than reinventing or ovewritting them), supporting SSG, SSR, Pre-rendering and HTML streaming, and also supporting any cloud platform (CloudFlare, AWS, Vercel, Azure, etc.) so devs don't get vendor-locked/trapped.

I am currently in a research phase, studying the techniques others are using (Next, Astro, Remix, Vike, Lume, Honox), but I will be happy to join efforts with other devs, specially those with experience in meta framework internals and Rust (or similar).

More coming soon in https://github.com/pizzajsdev

Open for Hiring

🚀 Looking for a great dev? Reach out!

While I am not actively looking for a change at the moment, I am always open to hear what the world has to offer to me.

Specially interested in EU-based full remote positions, in a creativity-related business (fintech and e-commerce is not my thing anymore).

storylite's Issues

[bug] sidebar menu items line-height too small in firefox

Describe the bug

Source

It appears Firefox has a default line-height of 1.1, but Chrome has a default line-height of 1.2.

In Firefox the line-height from the menu items is too small and chars like g getting cut off.

Environment

• OS with version: Windows 11
• Browser with version: Firefox 117.0
• JS Runtime with version: NodeJS v20.2.0

[docs] Provide more useful initial documentation

• Write more useful docs in the packages/docs stories. Now that it supports MDX, it should be easier.

Should include:

• Installation
• Configuration (explaining all options)
• How to write stories (JSX, TSX, MDX)
• Addons system

[bug] non-optional component properties not satisfied by `SLFunctionComponent<{}>`

Describe the bug

Taking the docs package as example, when changing a property of the LinkableBtnProps interface to required e.g. primary:

export type LinkableBtnProps = {
  isActive?: boolean
  href?: string
  target?: string
  hoverable?: boolean
  primary: boolean // non-optional
} & HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>

IDE is throwing two type errors:

---

First error:

Related to tsconfig.json the strictFunctionTypes option is set to true:

type StoryType = Story<typeof LinkableBtn> // typeof LinkableBtn error

Type '({ className, isActive, primary, hoverable, children, href, target, ...rest }: LinkableBtnProps) => Element' does not satisfy the constraint 'SLFunctionComponent<{}>'.
  Types of parameters '__0' and 'props' are incompatible.
    Type '{}' is not assignable to type 'LinkableBtnProps'.
      Property 'primary' is missing in type '{}' but required in type '{ isActive?: boolean | undefined; href?: string | undefined; target?: string | undefined; hoverable?: boolean | undefined; primary: boolean; }'.ts(2344)
LinkableBtn.tsx(8, 3): 'primary' is declared here.

---

Second error:

<Story {...context?.args} /> // Story error

Property 'primary' is missing in type '{}' but required in type '{ isActive?: boolean | undefined; href?: string | undefined; target?: string | undefined; hoverable?: boolean | undefined; primary: boolean; }'.ts(2741)
LinkableBtn.tsx(8, 3): 'primary' is declared here.

⚠ Error (TS2741)  | 
Property 'primary'   is missing in type {} but required in type:
.
(parameter) Story: ({ className, isActive, primary, hoverable, children, href, target, ...rest }: LinkableBtnProps) => JSX.Element

Reproduction

1. Clone the repo
2. Run pnpm i
3. Change LinkableBtnProps primary property to required
4. Open buttons.stories.tsx and see the error

Environment

• OS with version: Windows 11
• Browser with version: Firefox 117.0.1
• JS Runtime with version: NodeJS v20.2.0

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update dependency @types/node to v20.4.9

Detected dependencies

github-actions

.github/workflows/quality.yml

• actions/checkout v3
• pnpm/action-setup v2
• actions/setup-node v3
• codecov/codecov-action v3

npm

package.json

• @changesets/changelog-github ^0.4.8
• @changesets/cli ^2.26.2
• @commitlint/cli ^17.6.7
• @commitlint/config-conventional ^17.6.7
• @r1stack/coding-style ^0.1.0
• @swc/core ^1.3.75
• @swc/jest ^0.2.28
• @testing-library/jest-dom ^5.17.0
• @testing-library/react ^14.0.0
• @types/jest ^29.5.3
• @types/node ^20.4.8
• eslint ^8.46.0
• husky ^8.0.3
• jest ^29.6.2
• jest-environment-jsdom ^29.6.2
• lint-staged ^13.2.3
• prettier ^3.0.1
• turbo ^1.10.12
• typescript ^5.1.6
• node >=18.5.0
• pnpm 8.6.12

packages/storylite/package.json

• @r1stack/coding-style ^0.1.0
• glob ^10.3.3
• lucide-react ^0.265.0
• react ^18.2.0
• react-dom ^18.2.0
• react-router-dom ^6.14.2
• vite ^4.4.9
• @types/node ^20.4.8
• @types/react ^18.2.19
• @types/react-dom ^18.2.7
• publint ^0.2.0
• tsup ^7.2.0
• typescript ^5.1.6

---

• Check this box to trigger a request for Renovate to run again on this repository

@r1stack/coding-style in dependencies

Describe the bug

Is there any reason @r1stack/coding-style is included in the dependencies of package @storylite/storylite? I was thinking holy *** when I run install.

[bug] repaint & srolling performance issues

Describe the bug

When enabling paint flashing and scrolling performance issues in dev tools and checking the iframe, it rerenders on scroll.

This is happening on both storylite app and story in new tab.

The issue for Story in new Tab is caused by overflow-x: hidden; applied to html, body, #root in storylite-iframe.css.
Removing the attribute, which is not necessary fixes the scrolling and repaint issue.

Update:
The issue for Story in new Tab is already fixed by #63.

For the app iframe, the issue is caused either by storylite-canvas-root or transition on iframe & canvas elements.
I'm still investigating. If I found the cause I will create a PR to fix repaint issues.

Update:
Since it is very hard to hunt down the cause of repaint, I hope this will be fixed by #65. Applying property will-change as workaround is not a good choice, instead better fix the real cause. It is really interessting that applying various height to elements can cause repaints.

Reproduction

• Enable Paint flashing & Scrolling performance issues in chrome dev tools
• Open the new story With Scrollbar
• See the issue on the app iframe
• Open story in new Tab with Toolbar
• See the issue on the app id element

Environment

• OS with version: Windows 11
• Browser with version Chrome canary
• JS Runtime with version: NodeJS v20.2.0

[bug] history.back() is inconsistent

Describe the bug

After navigation to many routes, when we use the browser's back button, sometimes the UI is not refreshed even if the URL changed.

** Actions **

• Cover the router with tests
  • Consider adding e2e Playwright tests
• Debug and fix this particular case

Environment

• OS with version: macOS 13.4.1
• Browser with version: Brave 1.57.57
• JS Runtime with version: NodeJS 18

Release date?

Description

I found the repo when looking for a lightweight storybook/ladle alternative. It looks great so far but it seems you didn't release on npm yet? Are you planing to release soon? I would love to see storylite in action and maybe help contributing.

refactor: replace @r1stack/core with classix

Description

We could replace @r1stack/core with classix as devDependencies and include it in the bundle. It is 142 bytes minified & gzipped.

❯ npx howfat -r table classix
[email protected] (7.32kb, 6 files, ©MIT)

❯ npx howfat -r table @r1stack/core
@r1stack/[email protected] (1 dep, 729.16kb, 56 files, ©MIT)
╭────────────┬──────────────┬──────────┬───────┬───────────┬─────────┬───────────╮
│ Name       │ Dependencies │     Size │ Files │ Native    │ License │ Deprec    │
├────────────┼──────────────┼──────────┼───────┼───────────┼─────────┼───────────┤
│ [email protected] │              │ 601.61kb │    46 │           │ MIT     │           │
╰────────────┴──────────────┴──────────┴───────┴───────────┴─────────┴───────────╯

Cannot find module 'virtual:storylite-stories' or its corresponding type declarations

Describe the bug

In your monorepo you can include the virtual-module declaration:

"types": [
  "@storylite/vite-plugin/dist/virtual-modules.d.ts"
]

But as user I can't do that, since package vite-plugin does not export those types.

Reproduction

Stackblitz

Environment

• OS with version: Windows 11
• Browser with version Firefox 116.03
• JS Runtime with version: NodeJS v20.2.0

I'll create a PR to fix the exports.

[bug] exporting `Default` from a story with atleast one more export breaks sidebar `active` items

Describe the bug

If you export const Default from a story where at least one other story is exported, the active item status in the sidebar is displayed incorrectly when you click on the Default story. The active CSS class is not only applied to the clicked link, but all items of the sidebar.

Reproduction

1. Clone the repo
2. Run pnpm i
3. Open buttons.stories.tsx in the docs package
4. On line 37 rename WithComponentProps to Default
5. Run pnpm dev
6. See the issue on the sidebar

Environment

• OS with version: Windows 11
• Browser with version: Firefox 117.0.1 & Chrome 119.0.6023.0 canary
• JS Runtime with version: NodeJS v20.2.0

[bug] vscode `jestCommandLine` windows path incompatibility

Describe the bug

//.vscode/settings.json
"jest.jestCommandLine": "node_modules/.bin/jest",

The slash / is incompatible on Windows. When launching vscode Jest process throws an error:

The command "node_modules" is either misspelled or
could not be found.

[error] failed to retrieve test file list. TestExplorer might show incomplete test items

Jest process "watch-tests" ended unexpectedly
- Source: Jest (Extension)

Fix

Changing slash / to \\ will work for Windows, but the issue will instead occour on Linux/MAC.

Fix for the issue, to work on all platforms (tested on Windows & MAC):

"jest.jestCommandLine": "npx jest",

Reproduction

On a Windows terminal/cmd:

1. Clone the repo
2. run pnpm install
3. launche code .
4. Install all recommended extensions
5. Restart vscode
6. It should throw the error

Environment

• OS with version: Windows 11
• Browser with version: Firefox 117.0
• JS Runtime with version: NodeJS v20.2.0

[feat]: add MD support to prepend documentation

Add simple Markdown support, to prepend documentation to each story file.

It can be done via: https://www.npmjs.com/package/@mdx-js/rollup

E.g. if button.stories.tsx has a button.stories.md or mdx, it will be parsed and prepended to the stories.

Or.. we can investigate if we can provide a docs option in the Story object, that can be a mdx import, like:

import variant1Docs from './docs/button/variant1.mdx';

export const buttonVariant1: Story = {
  // ...
  docs: variant1Docs,
  // ...
}

[bug] Typescript support for components using `forwardRef`

Describe the bug

It might be just not integrated yet. When using forwardRef on a component and assigning args, IDE throws a type error. This happens when exporting a default function, but also when exporting default const Button. Or maybe my typings are wrong.

Reproduction

Example simplified component:

// button.tsx
import { type ComponentPropsWithRef, forwardRef } from 'react'

export type ButtonProps = Omit<ComponentPropsWithRef<'button'>, 'onClick'> & {
  /** Button color from theme */
  color?: string
  onClick?: (data: unknown) => void
}

export default forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, className = 'btn', color, type = 'button', ...rest }, ref) => {
    return (
      <button type={type} ref={ref} {...rest}>
        {children}
      </button>
    )
  }
)

// button.stories.tsx
import { Story } from '@storylite/storylite'
import Button from './button'

type StoryType = Story<typeof Button>

export default {
  title: 'Button',
  component: Button,
  args: {
    color: undefined, // error
    children: 'Default',
  },
  decorators: [
    (Story, context) => {
      return (
        <div className="example-wrapper">
          <Story {...context?.args} />
        </div>
      )
    },
  ],
} satisfies StoryType

export const Main: StoryType = {
  name: 'Default',
}

Environment

• OS with version: Windows 11
• Browser with version Firefox 117.0
• JS Runtime with version: NodeJS v20.2.0

[refactor] use only the necessary lucide icons and reduce package size

Actual package size with dependencies goes up to more than 550KB when using Lucide icons (476 KB).

The idea is to have the SVG icons the UI needs in the src/assets folder, and load them from there.

Extra vite plugins/loaders might be needed in order to import SVG directly.

https://bundlephobia.com/package/@storylite/storylite

[feat] replace eslint & prettier with biome

Description

Replace eslint & prettier with biome.

• Remove dependencies & recommended extensions
• Add biome & recommended extension
• Configure biome with current eslint & prettier config (as close as possible)
• Replace package.json scripts
• Run linter check & formatter check
• Fix any lint errors manually if necessary
• Ensure build, test etc. working

Additional context

@itsjavi can you please take care of this task, before I create a draft PR:

• Extract @r1stack/coding-style/jest-preset into a own package, so it does not include any deps. Or alternatively create a one file config, so the root stays clean.
• Configure lint rules

---

Current limitations

Since currently the biome extends option is not extending, it is not possible to share multiple configuration files.

[bug] `args` defined in exports are not inherited by other stories without defining `decorators`

Describe the bug

When defining args in a *.stories.tsx default export, but not defining decorators, the args are not applied to the default export and are not inherited by other stories in the file.

When defining args in any stories export, but not defining any decorators, either in default export, or the stories export, the args are not applied to the exported story itself.

Reproduction

1. Clone the repo
2. Run pnpm i
3. Open buttons.stories.tsx in the docs package
4. Remove all decorators defined in all stories
5. Run pnpm dev
6. See the default args children are not passed to the component story

Environment

• OS with version: Windows 11
• Browser with version: Firefox 117.0.1 & Chrome 119.0.6023.0 canary
• JS Runtime with version: NodeJS v20.2.0

[feat]: add global story options (decorators, etc)

Description

It would be nice to be able to specify global story options from the top-level configuration.

Desired Behaviour

To be able to configure the following, from the StoryLite app:

const appOptions = {
 // ...
  storyOptions: {
        parameters: [
            // ...
        ],
        decorators: [
            // ...
        ],
        render: [
            // ...
        ],
        renderFrame: 'root', // or 'iframe',
        // ... etc
    },
}

• Parameters will be merged. If stories redefine them, they will be overriden.
• Decorators will be appended when stories define new ones. Kind of "inheritance". That's the behavior in Storybook AFAIK.
• Render and renderFrame will be overriden when redefined in stories.

Considered Alternatives

The user will have otherwise to keep a file with all common options and merge them on every story. That's a lot of boilerplate code.

[bug] cannot import ts/tsx files in mdx

Describe the bug

You cannot import TS/TSX files in your MDXs

It is possible to fix the issue in two ways:

1. Create mdx.d.ts and include it in tsconfig.json

declare module '*.mdx' {
  let MDXComponent: (props: Record<string, unknown>) => JSX.Element
  export default MDXComponent
}

2. npm install @types/mdx --save-dev

@itsjavi which do you prefer to integrate in the docs example?

[bug] the iframe bottom gets trimmed when is larger than 100vh

maybe it has to do with the css max/min heights of some level in the parent(s), but when the content of the iframe is larger than the viewport height, it gets trimmed at the end.

[bug]: localStorageKey option has no effect

Describe the bug

When setting the localStorageKey, to a different value than the default, the UI options are not persisted and the default key is still used in the local storage.

Reproduction

1. Set it in the story lite config:

const config: Partial<SLAppComponentProps> = {
  localStorageKey: 'my-custom-key',
}

2. Launch the UI, try to change something in the toolbar and refresh the page. The toolbar option is reset.

[bug] sidebar not visible when canvas fills the height

Tested on iOS 16 and iPhone 12 mini screen

Example:

https://itsjavi.com/supereffective-dextracker/

[feat] add a props/args panel, similar to SB's Controls

It would be nice to be able to change the component props via the UI like in SB:

https://storybook.js.org/docs/react/essentials/controls

We can auto-generate argTypes for React using docgen https://github.com/styleguidist/react-docgen-typescript,
and maybe we can shoot 2 things at the same time by generating docs/snippets as well!