StoryLite v0.x usage

[jrson83]

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.

[itsjavi]

Hey there, the project is still very experimental, and I still need to figure out how to bundle it properly for npm, but I will give it a try in the next days :)

contributions will be also very helpful

[jrson83]

I cloned the repo and checked the dashboard, looks really great so far, can't wait to use it!

Currently I tested multiple bundlers with my react components. I ended up using pkgroll today, since it is very easy to setup, uses rollup and produces clean bundles.

I tested rollup bundlers: rollup & vite, and esbuild bundlers: esbuild, unbuild, tsup, ptsup.

Have a look at my react and react-hooks packages for the setup, I can just recommend.

[itsjavi]

@jrson83 thank you, in the last hours I've rewritten many parts of the project to be able to publish it (@storylite/storylite now released as v0.1.1) and integrate with other projects.

Now it's bundled with tsup, and it's more a drop-in plugin for Vite + a React app on top.

You can check how to integrate it in this React example setup https://github.com/itsjavi/storylite/tree/main/packages/examples/react

I am going to start using it actively in one of my projects soon, so I hope to make it more stable.

[jrson83]

@itsjavi awesome, thanks! I gonna try replace ladle with storylite in my monorepo.

[itsjavi]

@jrson83 v0.1.x was not working properly,
I released v0.2.0 which now resolves stories and virtual modules properly,
more info: https://github.com/itsjavi/storylite/blob/main/packages/storylite/CHANGELOG.md#breaking-changes

Now the UI can work with other frameworks, not only Vite

[jrson83]

@itsjavi thanks, I gonna check it out!

Will it also be compatible with Preact?

[jrson83]

@itsjavi I read the changelog and tried to use it in my monorepo. I checked the react example, but I can't make use of it in the current state, because it is using @storylite/vite-plugin as devDependencies and import storylitePlugin from '@storylite/vite-plugin' in the vite.config,ts. So the example works inside your monorepo, but not for me, since you did not release @storylite/vite-plugin.

I see on my installed @storylite/storylite dist folder, it is somehow merged with the vite-plugin, so includes plugins.d.ts and virtual-modules.d.ts. To get the correct storylitePlugin I used the following settings as workaround, since index.d.ts does not export storylitePlugin .

// vite.config.ts
import { storylitePlugin } from '@storylite/storylite/dist/plugins'

Using types with @storylite/storylite/dist/virtual-modules.d.ts breaks my tsconfig cause:

Cannot find type definition file for '@storylite/storylite/dist/virtual-modules.d.ts'.

As workaround I used this config to get the named storylitePlugin import working:

// tsconfig.json
{
  "types": ["node", "react", "react-dom", "@storylite/storylite"]
}

But when I try import stories from 'virtual:storylite-stories' in storylite.tsx I get:

Cannot find module 'virtual:storylite-stories' or its corresponding type declarations.ts(2307)

Could you update the react example to work without @storylite/vite-plugin or what am I doing wrong?

[itsjavi]

Thanks for your infos, what's on main is not stable, I plan to separate the vite plugin but is not yet released (I will have time this weekend)

[itsjavi]

meanwhile please check the examples in some commit previous to separating the plugin

[jrson83]

Thanks for your infos, what's on main is not stable, I plan to separate the vite plugin but is not yet released (I will have time this weekend)

Oh okay, I did not realize there was another branch.

[itsjavi]

released 0.3.0 together with @storylite/vite-plugin

[jrson83]

released 0.3.0 together with @storylite/vite-plugin

Thanks, I will try again.

[jrson83]

@itsjavi thanks, now installation and setup took just a minute in a new vite react-ts project.

[jrson83]

@itsjavi I'm having problems migrating my ladle stories.

I like to have a Sidebar Category Components, which holds all components from src folder.

Can you take a look here?

https://github.com/jrson83/shrtcss/blob/main/packages/react/src/divider/divider.stories.tsx

[itsjavi]

@jrson83 if you only export one component, it is not grouped.

maybe that's a not an obvious behaviour. it would be ok for me to change it.
That's here:

storylite/packages/storylite/src/components/Sidebar.tsx

Line 78 in f0e64a2

if (exports.length === 1) {

[itsjavi]

right now, if you define the same default export title in different story files, they will duplicated instead of merged:

It would be nice if it works similar to Storybook or Ladle in this sense.

Then the Sidebar would need a refactoring, and probably decouple a lot of module-related logic into separated functions, outside the component, to make everything more testable.

One of my goals is to have a simplified stories API compatible with Storybook/Ladle, like a subset of features that would work if you later decide to move your StoryLite stories to some of these frameworks.

[jrson83]

Then the Sidebar would need a refactoring, and probably decouple a lot of module-related logic into separated functions, outside the component, to make everything more testable.

If I can help anyhow, let me know.

simplified stories API

Yes, I was thinking, if storylite should support multiple frameworks, one way to archieve that would be to have a core package (kind of adapter) with framework unrelated code. It then can be used to create framework related packages, @storylite/react, @storylite/preact etc. build on the core package.

Preact example

It is possible to use ladle with preact, it has just currently an open PR to add a feature to disable @vite/pugin-react injection. Following the react example I tried to create an example for integrating storylite with preact, but I'm stuck at this error, since I can't get the storylite package to work with preact/compat. I don't know if this is related to the exports or the storylite package or my tsconfig or vite alias setup.
For sure it must be possible some how, since ladle can do it, so I checked the code, but no success yet.

storylite-examples-preact:build: [vite:load-fallback] Could not load preact/compat (imported by ../../storylite/dist/index.js): ENOENT: no such file or directory, open 'D:\___projects\_storylight\story-preact\packages\examples\preact\preact\compat'
storylite-examples-preact:build: error during build:
storylite-examples-preact:build: Error: Could not load preact/compat (imported by ../../storylite/dist/index.js): ENOENT: no such file or directory, open 'D:\___projects\_storylight\story-preact\packages\examples\preact\preact\compat'
storylite-examples-preact:build:  ELIFECYCLE  Command failed with exit code 1.
storylite-examples-preact:build: ERROR: command finished with error: command (D:\___projects\_storylight\story-preact\packages\examples\preact) pnpm run build exited (1)

[itsjavi]

So far I didn't try with other frameworks but is something I want to do at some point. Preact would be the easiest I guess.

I want to investigate more how they do it in projects like Vite, Astro and Storybook, to support multiple frameworks.

About the compatible stories API, maybe you could help me (since you seem to have more experience with Ladle and SB) by listing the basic features you would like to see when creating stories and how the exports should look like

[jrson83]

I do not have much experience with storybook, but read the docs when comparing with ladle to use with my react/preact component library.

I will create an issue for the export stuff.

What I would like to see in addition is an easy implementation of overwriting storylite default css color variables for dark/light theme. So when I have my own color palette, I can easy make the whole storylite app use my color palette for bg etc.
Maybe there is something in allready, but not just yet in the docs.

[itsjavi]

I've done a big refactoring in the UI to improve UX, and avoiding the iframe to contain any styles if desired.
you can also override the defaults like in the example https://github.com/itsjavi/storylite/blob/main/packages/examples/react/src/styles/storylite-overrides.css

you can actually override all colors of the whole UI

there are also new options in the app component to pass props to the iframe, and to turn off its default styles

all this is now on v0.5 https://github.com/itsjavi/storylite/releases/tag/v0.5.0

[itsjavi]

on 0.6.0 I rewrote the addon system completely so now you can also provide your own or turn off default ones.
also the UI looks much better, specially on mobile

scrnli_26_08_2023_06-39-24.mp4

[jrson83]

Great job! Will directly update deps and test.

[jrson83]

@itsjavi I can help out with custom router. You want to add me at discord jrson83?