Support Storybook?

[kentcdodds]

I had someone helping me with my website and they started out using storybook, but eventually they gave up on it and here's what they said:

Well, it would be nice to use it. I think that allows for better component separation and easier to see if there already is something that can be reused. But the energy it took to keep working there, didn't outweigh the annoyances from Remix.

I don't expect a fix, just a FYI.

• hot reload is REALLY nice when working on frontend. The refresh can be mildly annoying sometimes because it doesn't always scroll back to position, and because the element is deselected in the inspector. Also, comparing slight changes with or without a refresh is a world of difference. (think a change in 1 shade of gray, or small padding offsets)

• more annoying, but I can live with it. The tailwind stylesheet doesn't always update properly. Requiring me to run npm run css:build manually. So that triggers 2 refreshes by Remix. Once, because it updated when I saved the jsx. Second time because I needed to rebuild the css manually.
  I think that second one is possible to get fixed. But seriously, don't directly dive in to spend (much) time on it. Probably not worth it at this stage.
  I don't think it's worth to get storybook fixed for this project. But I do think it would be a great selling point if Ryan would (be able to) provide a mock package, so that most components that depend on Remix, would just be able to run in storybook without changes.

Just thought I'd share to see whether it's something y'all would consider supporting.

[sergiodxa]

This would also make testing in Jest better, if you can have a way to mock features like useRouteData you could write Jest tests for specific components depending on Remix features

[rzmz]

React-cosmos works (kinda) out of the box.

I got it working with the following steps:

1. Create cosmos.tsx under app/routes:

export default function Cosmos() {
    return null;
}

2. Add cosmos.config.json in your project root directory:

{
    "staticPath": "public",
    "watchDirs": ["app"],
    "userDepsFilePath": "app/cosmos.userdeps.js",
    "experimentalRendererUrl": "http://localhost:3000/cosmos"
}

3. Change your entry.client.tsx accordingly:

import { mountDomRenderer } from "react-cosmos/dom";
import { hydrate } from "react-dom";
import { RemixBrowser } from "remix";

import { decorators, fixtures, rendererConfig } from "./cosmos.userdeps.js";

if (
    process.env.NODE_ENV === "development" &&
    window.location.pathname.includes("cosmos")
) {
    mountDomRenderer({ rendererConfig, decorators, fixtures });
} else {
    hydrate(<RemixBrowser />, document);
}

You might need to add // @ts-ignore in the beginning of this file if using Typescript (you should).

4. Of course, add react-cosmos as a dev dependency:

$ npm i -D react-cosmos

5. Add the following in your package.json scripts section:

        "cosmos": "cosmos",
        "cosmos:export": "cosmos-export"

6. Start the remix dev server:

$ npm run dev

7. Start cosmos server in another terminal window>

$ npm run cosmos

[rzmz]

I wrote a short tutorial about pairing React Cosmos with Remix if anyone is interested: https://dev.to/rzmz/react-cosmos-with-remix-7go

[machour]

A conversation was started by Ryan for Storybook support: #2481

[kentcdodds]

Let's defer to that. We prefer to focus on discussions and PRs and keep issues to a minimum 👍

[vixalien]

@rzmz here is my expansion on your remix + cosmos setup

[Alvacampos]

@rzmz here is my expansion on your remix + cosmos setup

Hi, I'm following your instructions and I have an issue. After adding all the files you specified I get the following.

Looks like it can't find any fixture but the userdeps can find the paths for the files>

This is the decorator, now sure if why by CustomApp is imported but never used.

import { CustomApp } from "~/root";
import { MemoryRouter } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { createTransitionManager } from '@remix-run/react/dist/transition';
import { LiveReload, Scripts, ScrollRestoration } from '@remix-run/react';
import { RemixEntryContext } from '@remix-run/react/dist/components';

const clientRoutes = [
  {
    id: 'idk',
    path: 'idk',
    hasLoader: true,
    element: '',
    module: '',
    action: () => null,
  },
];

let context = {
  routeModules: { idk: { default: () => null } },
  manifest: {
    routes: {
      idk: {
        hasLoader: true,
        hasAction: false,
        hasCatchBoundary: false,
        hasErrorBoundary: false,
        id: 'idk',
        module: 'idk',
      },
    },
    entry: { imports: [], module: '' },
    url: '',
    version: '',
  },
  matches: [],
  clientRoutes,
  routeData: {},
  appState: {},
  transitionManager: createTransitionManager({
    routes: clientRoutes,
    location: {
      key: 'default',
      hash: '#hello',
      pathname: '/',
      search: '?a=b',
      state: {},
    },
    loaderData: {},
    onRedirect(to, state) {
      console.log('redirected');
    },
  }),
};

const Decorator = ({ children }) => {
  const [result, setResult] = useState(null);

  useEffect(() => {
    /// @ts-expect-error i swear to God importing is allowed
    import(
      /// @ts-expect-error Node expects CommonJS, but we're giving him ESM
      '@remix-run/react/dist/esm/components'
    ).then(() => {
      setResult(
        <RemixEntryContext.Provider value={context}>
          <MemoryRouter>
            {children}
            <ScrollRestoration />
            <Scripts />
            <LiveReload />
          </MemoryRouter>
        </RemixEntryContext.Provider>
      );
    });
  }, []);

  if (!result) return <>Loading...</>;

  if (result) return result;
};
export default Decorator;

[Alvacampos]

We also have some weird errors, in the remix app we get a constant request (http://localhost:8788/socket.io/?EIO=3&transport=polling&t=OCUekNV) and in the cosmos app (localhost:5000) we get a CORS error:

not sure if they are related issues.

[machour]

@Alvacampos Please don't comment on closed issues asking for support. Create a new discussion instead 🙏🏼

[vixalien]

@Alvacampos I havent figured about the constant poll. are you sure you whitelisted "localhost:5000" in app/routes/cosmos ? No fixture is selected is valid and ok

[Alvacampos]

@vixalien lets continue here please #4167