[Feature Request]:

[AndreiSoroka]

Is your feature request related to a problem? Please describe

I'm always frustrated when in a project I have 100500 dependencies, and of course when they have collisions. And of course, when any library has warnings or npm audit problems

Describe the solution you'd like

I want the storybook to be able to work from outside the project or from a subfolder. Like a separate project.
And i want to find this setting when installing storybook

npx storybook init

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

limited, but yes, I can

Additional context

I can provide my solution

Vite:

• storybook/.eslintrc.cjs

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  overrides: [
    {
      files: [
        '**/*.stories.[jt]s',
      ],
      extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/eslint-config-typescript",
        "@vue/eslint-config-prettier",
        "plugin:storybook/recommended",
      ],
      parserOptions: {
        ecmaVersion: "latest",
      },
      rules: {
        'import/no-extraneous-dependencies': 'off',
      },
    },
  ],
};

and need only connect this file in a root project to extends

• storybook/package.json

{
  "name": "project-storybook",
  "version": "0.0.0",
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/builder-vite": "^0.2.5",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/vue3": "^6.5.13",
    "babel-loader": "^8.3.0",
    "eslint-plugin-storybook": "^0.6.7",
    "vue-loader": "^16.8.3"
  }
}

and need to add in a root package.json

{
//...
  scripts: {
    //...
    "storybook": "npm run storybook --prefix ./storybook",
    "build-storybook": "npm run build-storybook --prefix ./storybook"
  }
//...
}

• storybook/.storybook/main.js

const {mergeConfig} = require('vite');
const path = require("path");
const {fileURLToPath, URL} = require("node:url");

module.exports = {
  stories: [
    '../../src/**/*.stories.mdx',
    '../../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // '@storybook/addon-a11y',
    // '@storybook/addon-interactions',
    // 'storybook-addon-designs',
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    "storyStoreV7": true
  },
  async viteFinal(config, {configType}) {
    return mergeConfig(config, {
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "../../src",),
        },
      },
    });
  },
}

With typescript I didn't find best solution (microsoft/TypeScript#33407 (comment))

• tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue"
  ],
  "exclude": [
    "src/**/__tests__/*",
    "src/**/*.stories.ts" // add
  ],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

• tsconfig.storybook.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "src/**/*"
  ],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ],
      "*": [
        "./storybook/node_modules/*" // add external node_modules
      ]
    }
  }
}

• tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.config.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    },
    {
      "path": "./tsconfig.storybook.json" // connect
    }
  ]
}

[AndreiSoroka]

For webpack my solutions was:

storybook/.storybook/main.js

const path = require('path');

module.exports = {
  stories: [
    '../../src/**/*.stories.mdx',
    '../../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    'storybook-addon-designs',
  ],
  framework: '@storybook/vue3',
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config) => {
    config.resolve = {
      alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
      },
      modules: [
        path.resolve(__dirname, '../../node_modules'),
        path.resolve(__dirname, '../node_modules')
      ],
    };
    config.module.rules.push(
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, '../../'),
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    );

    // support import ts files
    if (config.resolve.extensions) {
      config.resolve.extensions.push('.ts');
    } else {
      config.resolve.extensions = [
        '.ts',
        '.mjs',
        '.js',
        '.jsx',
        '.vue',
        '.json',
        '.wasm',
      ]
    }
    // support alias @
    config.resolve.alias['@'] = path.resolve(__dirname, '../../src');

    return config;
  },
}