故事书相对路径故事

Posted 2023-02-19

【中文标题】故事书相对路径故事

【英文标题】：Storybook relative path stories

【发布时间】：2019-08-28 11:51:32

【问题描述】：

我正在尝试使我的 ui-components 故事和代码在层次结构中匹配。例如，如果我添加另一个子按钮组件，我希望它反映在故事书中的Buttons 下。每个组件都有一个独立的故事，并被导入到一个故事 (stories/index.stories.js) 中，如下所示：

const req = require.context("../ui-components", true, /.stories\.js$/);
function loadStories() 
  req.keys().forEach(filename => req(filename));


configure(loadStories, module);

这是我的文件夹结构

- ui-components
-- Button
--- Nested_Button
---- index.js
---- stories.js
-- index.js
-- stories.js
....
- stories
-- index.stories.js

故事名称将使用斜线嵌套，那么有没有办法可以像这样编写我的组件故事？

const ButtonStories = storiesOf(`$THIS_MODULE_PATH_RELATIVE_TO_UI_COMPONENTS_DIR`, module).add(
  "A basic button",
  () => <Button>Basic Button</Button>
);

【参考方案1】：

我最终做的是在我的组件故事中使用 __dirname 变量作为故事名称。

由于 Storybook 使用默认配置，这之前无法正常工作，因此我添加了自定义 webpack.config.js 以获取正确的路径。

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = async ( config, mode ) => 
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.node = 
    __dirname: true,
    __filename: true
  ;

  // Return the altered config
  return config;
;