Setup for Storybook in NX monorepo library

[ddanielcruzz]

Hey there!

Basically what the title says, is there any guide for that? I tried following this example but when I add the .babelrc to the .storybook directory I don't get any stories displayed. Without the .babelrc I get my stories, but with no styling.

For my Nx lib I followed this tutorial and I was able to successfully make twin.macro work when importing my components in other apps inside the monorepo, but not inside stories.

Thanks!

[ben-rogerson]

Heya,

I recently setup emotion with @storybook/[email protected] using a different method.
Instead of adding a .babelrc file, add the babel config in your .storybook/main.js file.

// .storybook/main.js

const path = require('path');
const fs = require('fs');

function getPackageDir(filepath) {
    let currDir = path.dirname(require.resolve(filepath));
    while (true) {
        if (fs.existsSync(path.join(currDir, 'package.json'))) {
            return currDir;
        }
        const { dir, root } = path.parse(currDir);
        if (dir === root) {
            throw new Error(
                `Could not find package.json in the parent directories starting from ${filepath}.`
            );
        }
        currDir = dir;
    }
}

module.exports = {
    stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-essentials'],
    babel: async (options) => {
        options.presets.push(require.resolve('@emotion/babel-preset-css-prop'));
        return options;
    },
    webpackFinal: async (config) => {
        config.resolve.alias = {
            '@emotion/core': getPackageDir('@emotion/react'),
            '@emotion/styled': getPackageDir('@emotion/styled'),
            'emotion-theming': getPackageDir('@emotion/react'),
        };
        return config;
    },
};

Depending on your project, you may also need to install these packages or to avoid some strange console errors:
npm i -D dotenv-webpack html-webpack-plugin

Let me know if this helps at all.

[ddanielcruzz]

Didn't work :(

This is my babel config outside of Storybook

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic",
        "useBuiltIns": "usage",
        "importSource": "@emotion/react"
      }
    ]
  ],
  "plugins": [
    "babel-plugin-macros",
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__cssprop",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__cssprop",
        "pragmaFrag": "React.Fragment"
      }
    ],
    "@emotion/babel-plugin"
  ]
}

And the .storybook/main.js file generated by NX had this

const rootMain = require('../../../.storybook/main');
// Use the following syntax to add addons!
// rootMain.addons.push('');
rootMain.stories.push(
  ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)']
);

So adjusted your example like this

const rootMain = require('../../../.storybook/main');
const path = require('path');
const fs = require('fs');

function getPackageDir(filepath) {
  let currDir = path.dirname(require.resolve(filepath));
  while (true) {
    if (fs.existsSync(path.join(currDir, 'package.json'))) {
      return currDir;
    }
    const { dir, root } = path.parse(currDir);
    if (dir === root) {
      throw new Error(
        `Could not find package.json in the parent directories starting from ${filepath}.`
      );
    }
    currDir = dir;
  }
}

// Use the following syntax to add addons!
// rootMain.addons.push('');
rootMain.stories.push(
  ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)']
);

rootMain.babel = async (options) => {
  options.presets.push([
    '@nrwl/react/babel',
    {
      runtime: 'automatic',
      useBuiltIns: 'usage',
      importSource: '@emotion/react',
    },
  ]);
  options.plugins.push(
    'babel-plugin-macros',
    [
      '@emotion/babel-plugin-jsx-pragmatic',
      {
        export: 'jsx',
        import: '__cssprop',
        module: '@emotion/react',
      },
    ],
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: '__cssprop',
        pragmaFrag: 'React.Fragment',
      },
    ],
    '@emotion/babel-plugin'
  );
  return options;
};

rootMain.webpackFinal = async (config) => {
  config.resolve.alias = {
    '@emotion/core': getPackageDir('@emotion/react'),
    '@emotion/styled': getPackageDir('@emotion/styled'),
    'emotion-theming': getPackageDir('@emotion/react'),
  };
  return config;
};

module.exports = rootMain;

But again I got the stories and no twin.macro styles. Any ideas?

[ddanielcruzz]

Go it working!

This is how my files ended

// .storybook/main.js

const rootMain = require('../../../.storybook/main');
const path = require('path');
const fs = require('fs');

function getPackageDir(filepath) {
  let currDir = path.dirname(require.resolve(filepath));
  // eslint-disable-next-line no-constant-condition
  while (true) {
    if (fs.existsSync(path.join(currDir, 'package.json'))) {
      return currDir;
    }
    const { dir, root } = path.parse(currDir);
    if (dir === root) {
      throw new Error(
        `Could not find package.json in the parent directories starting from ${filepath}.`
      );
    }
    currDir = dir;
  }
}

rootMain.stories.push(
  ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)']
);

rootMain.webpackFinal = async (config) => {
  config.resolve.alias = {
    '@emotion/core': getPackageDir('@emotion/react'),
    '@emotion/styled': getPackageDir('@emotion/styled'),
    'emotion-theming': getPackageDir('@emotion/react'),
  };
  return config;
};

module.exports = rootMain

My .babelrc didn't change. I removed the .babelrc inside my storybook directory as I realized that Storybook uses the root one for the config.

The thing that made it work was the webpackFinal config as I was getting

Module not found: Error: Can’t resolve '@emotion/styled/base' in '...'

Thanks a lot @ben-rogerson for the quick response!