https://github.com/storybookjs/require-context.macro

🖇 A Babel macro needed for some advanced Storybook setups. Used to mock webpack's context function in test environments.
https://github.com/storybookjs/require-context.macro

babel babel-macros webpack

Last synced: 3 months ago
JSON representation

🖇 A Babel macro needed for some advanced Storybook setups. Used to mock webpack's context function in test environments.

• Host: GitHub
• URL: https://github.com/storybookjs/require-context.macro
• Owner: storybookjs
• License: mit
• Archived: true
• Created: 2018-12-15T19:56:53.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-16T16:03:48.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T12:07:37.478Z (7 months ago)
• Topics: babel, babel-macros, webpack
• Language: JavaScript
• Homepage:
• Size: 620 KB
• Stars: 48
• Watchers: 7
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# require-context.macro

A macro needed for some advanced Storybook@4 and Storybook@3 setups

[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-plugin-macros)

Credit to [the original plugin](https://github.com/smrq/babel-plugin-require-context-hook/).

## Usage

Ensure you have `babel-plugin-macros` installed within your project.

`yarn add -D babel-plugin-macros`

Then install this specific macro

`yarn add -D require-context.macro`

Afterwards, simply import this function and call it in place of `require.context()` inside

`.storybook/config.js`.

```javascript

// .storybook/config.js

import { configure } from '@storybook/react';

import requireContext from 'require-context.macro';

import '../src/index.css';

const req = requireContext('../src/components', true, /\.stories\.js$/);

function loadStories() {

  req.keys().forEach((filename) => req(filename));

}

configure(loadStories, module);

```

You may also need to make Storybook aware of the fact that you're using Babel macros! You can do

this by declaring `macros` as one of the options in your array of plugins within your babel config.

One example, with a `.babelrc` at the root-level of your repository:

```json

{

  "plugins": ["macros"]

}

```