Integrating storybook the correct way as a /config package?

[Jarrodsz]

I was trying to integrate storybook into the mono repro but got really stuck at it.

Do you have any interest in integrating it ( or perhaps a more lean solution, i tried cosmo-react but it had react 17 deps so for now stick with storybook)

the idea would be each package could contain a /stories folder that gets readup by storybook.
I think one wants to implement this mono repro wide with a package for storybook in /config to follow your existing mono repro structure?

I got as far looking at an example ui library im using that implements storybook in the root folder of the mono repro in a ./storybook/main.msj file with

import { mergeConfig } from 'vite'
const toPath = (_path) => path.join(process.cwd(), _path)
export default {
    stories: [
        '../../ui/src/stories/*.stories.tsx',
    ],
    addons: [
        '@storybook/addon-a11y',
        '@storybook/addon-toolbars',
        '@storybook/addon-storysource',
        '@storybook/addon-viewport',
        '@saas-ui/storybook-addon',
    ],
    features: {
        buildStoriesJson: true,
    },
    staticDirs: ['./static'],
    typescript: {
        reactDocgen: false,
    },
    refs: (config, { configType }) => {
        const refs = {
            '@chakra-ui/react': {
                disable: true, // Make sure Chakra gets loaded last
            },

            chakra: {
                title: 'Chakra UI',
                url: 'https://storybook.chakra-ui.com',
            },
        }
        if (configType === 'DEVELOPMENT') {
            return {
                '@saas-ui/pro': {
                    title: 'Saas UI Pro',
                    url: 'http://localhost:6007',
                },
                ...refs,
            }
        }
        return {
            '@saas-ui/pro': {
                title: 'Saas UI Pro',
                url: 'https://storybook.saas-ui.pro',
            },
            ...refs,
        }
    },
    async viteFinal(config) {
        // Merge custom configuration into the default config
        return mergeConfig(config, {
            // Add storybook-specific dependencies to pre-optimization
            // optimizeDeps: {
            //   include: ['storybook-addon-designs'],
            // },
            resolve: {
                alias: [
                    {
                        find: /(\@saas-ui\/[a-z-\/]+)$/,
                        replacement: '$1/src',
                    },
                ],
            },
        })
    },
    framework: {
        name: '@storybook/react-vite',
    },
    docs: {
        autodocs: true,
    },
}

How would you approach this some pointers would be good I can PR but probably my skillset here is lacking a bit getting confused by several configs i saw that implement storybook differently.

I assume the best practice is to include a storybook subfolder here

and then call it inside /apps/myapp/package.json like

    "@core/storybook: "workspace:*",```

But not sure on the main root ./package.json which would then include all the storybooks deps and a pnpm task to run storybook and search all packges for /stories folder?

Would love to hear if my thoughts are correct and how you would approach this?

[Jarrodsz]

In /config/storybook i added
main.ts

    stories: [
        '../packages/ui/*/src/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: [
        '@storybook/addon-essentials',
        '@storybook/addon-actions',
        '@storybook/addon-links',
    ],
};

and package.json:

{
  "name": "@core/storybook-config",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@storybook/addon-a11y": "^7.0.20",
    "@storybook/addon-storysource": "^7.0.20",
    "@storybook/addon-toolbars": "^7.0.20",
    "@storybook/addon-viewport": "^7.0.20",
    "@storybook/addons": "^7.0.20",
    "@storybook/cli": "^7.0.20",
    "@storybook/client-api": "^7.0.20",
    "@storybook/client-logger": "7.0.20",
    "@storybook/preview-api": "7.0.20",
    "@storybook/preview-web": "^7.0.20",
    "@storybook/react": "^7.0.20",
    "@storybook/react-vite": "^7.0.20",
    "@storybook/testing-react": "^2.0.1",
    "@storybook/types": "^7.0.20",
    "@swc/core": "^1.3.59",
    "framer-motion": "^10.12.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.0.4",
    "vite": "^4.3.9"
  },
  "publishConfig": {
    "access": "public"
  }
}

But the problem seems with installing storybook in the main /package.json I added:

scripts {
   ...
    "storybook": "storybook -p 6006 -c config/storybook"

  and 
  ...
  "dependencies": {
    "@core/storybook-config": "workspace:*"
 }

pnpm clean
pnpm clean:node_modules
then pnpm run storybook

but got a > storybook -p 6006 -c config/storybook

sh: storybook: command not found

[PhilDL]

Hello, unfortunately, I don't have any examples for Storybook, I had problems 1 year ago mocking remix API so I gave up and didn't come back to it recently.

But my design was to put it directly in the UI package not in it's own package. Since it is testing the UI components I think it makes sense to live there.

[chiptus]

@Jarrodsz would love to see how you implement it. I've been struggling with it on and off for the last few weeks and it fails at the first step of pnpm dlx sb init --skip-install:

Error: Cannot find @storybook/react/package.json, Error: Cannot find module '@storybook/react/package.json'
Require stack:
- /home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js
- /home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/bin/index.js
- /home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/sb/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.resolve (node:internal/modules/cjs/helpers:127:19)
    at getRendererDir (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:11:13408)
    at templatePath (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:22:1800)
    at copyTemplateFiles (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:22:2994)
    at async baseGenerator (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:89:789)
    at async generator3 (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:93:4879)
    at async installStorybook (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:109:7242)
    at async doInitiate (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:128:845)
    at async withTelemetry (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/core-server/dist/index.js:65:3948)

Error: Command failed with exit code 1: npm config get registry
npm ERR! code ENOWORKSPACES
npm ERR! This command does not support workspaces.

npm ERR! A complete log of this run can be found in: /home/user/.npm/_logs/2023-12-05T18_38_02_522Z-debug-0.log

any ideas?

[Jarrodsz]

I ended up not integrating it and dishing the mono repro ( for now ) since it put an enourmous burden and other issues on me

[chiptus]

I can relate, still not sure the monorepo actually helps instead of adding problems

[chiptus]

I created a pr: #96

[chiptus]

so weird, applying the same steps on my repo I get:

/home/path/node_modules/@storybook/cli/bin/index.js:23
  throw error;
  ^

TypeError: callback is not a function
    at /home/path/node_modules/fs-extra/node_modules/jsonfile/index.js:43:5
    at /home/path/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

[PhilDL]

@Jarrodsz would love to see how you implement it. I've been struggling with it on and off for the last few weeks and it fails at the first step of pnpm dlx sb init --skip-install:

Error: Cannot find @storybook/react/package.json, Error: Cannot find module '@storybook/react/package.json'
Require stack:
- /home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js
- /home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/bin/index.js
- /home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/sb/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.resolve (node:internal/modules/cjs/helpers:127:19)
    at getRendererDir (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:11:13408)
    at templatePath (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:22:1800)
    at copyTemplateFiles (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:22:2994)
    at async baseGenerator (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:89:789)
    at async generator3 (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:93:4879)
    at async installStorybook (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:109:7242)
    at async doInitiate (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/cli/dist/generate.js:128:845)
    at async withTelemetry (/home/user/.local/share/pnpm/store/v3/tmp/dlx-3129656/node_modules/@storybook/core-server/dist/index.js:65:3948)

Error: Command failed with exit code 1: npm config get registry
npm ERR! code ENOWORKSPACES
npm ERR! This command does not support workspaces.

npm ERR! A complete log of this run can be found in: /home/user/.npm/_logs/2023-12-05T18_38_02_522Z-debug-0.log

any ideas?

I had the same problem, fixed it by using pnpm install --save-dev @storybook/cli from the UI package BEFORE pnpm dlx sb init --skip-install (contrary to what is said on the turborepo docs).

[chiptus]

I get the same issue.

[PhilDL]

Can you give me a repo for reproduction?

To clarify the actions of my previous message:

• update the .npmrc to have

node-linker=hoisted
strict-peer-dependencies=false
auto-install-peers=true
legacy-peer-deps=true

• It was from a "vite" package (storybook will detect the vite config).
• The @storybook/cli was installed first
• If .storybook folders were already preset, delete it
• then use the sb init

[chiptus]

I can't reproduce it on your repo (as I succeeded in adding sb to your repo) so I don't know how to reproduce it. the repo is private and it's really hard to track which changes I don't have from your repo

[chiptus]

crazy, I copied my files onto your repo, and everything works, also storybook. I guess it's something with a dependency, but can't figure what

[PhilDL]

Sorry I really don't know how to help you, I don't even know which error we are talking about anymore. If you could isolate your problematic package in a public monorepo, removing all your company code from it, we could maybe work on it.