limio-components/component-playground/.storybook/main.js at 38191fab5491e74949d6bbaf0b03964e053de81c · innovate42/limio-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import path, { join, dirname } from "path";
/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, "package.json")));
}

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@chromatic-com/storybook"),
    getAbsolutePath("@storybook/addon-interactions"),
    {
      name: "@storybook/addon-styling-webpack",
      options: {
        rules: [
          {
            test: /\.css$/,
            sideEffects: true,
            use: [
              require.resolve("style-loader"),
              {
                loader: require.resolve("css-loader"),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve("postcss-loader"),
                options: {
                  implementation: require.resolve("postcss"),
                },
              },
            ],
          },
        ],
      },
    },
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-webpack5"),
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  webpackFinal: async config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "react-native": "react-native-web",
      "@limio/design-system": path.resolve(
        __dirname,
        path.join("..", "packages", "design-system", "default")
      ),
      "@limio/currency": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "currency")
      ),
      "@limio/resources": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "resources")
      ),
      "@limio/sdk": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "sdk")
      ),
      "@limio/sdk/components": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "sdk", "src", "components")
      ),
      "@limio/internal-checkout-sdk": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "internal-checkout-sdk")
      ),
      "@limio/shop": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "shop")
      ),
      "@limio/utils": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "utils")
      ),
      "@limio/ui": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "ui")
      ),
      "@limio/crypto": path.resolve(
        __dirname,
        path.join("..", "packages", "limio", "crypto")
      ),
    };

    return config;
  },
};

export default config;