Рассказ об относительном пути рассказа - PullRequest
Новая
       11

Рассказ об относительном пути рассказа

0 голосов
/ 07 апреля 2019

Я пытаюсь сделать так, чтобы мои 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 Ответ

0 голосов
/ 07 апреля 2019

Я закончил тем, что делал в своих историях компонентов, используя переменную __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;
};
...