feat: set up development environment for emotion

packages/common-components/.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -9,6 +9,16 @@ module.exports = {
   core: {
     builder: '@storybook/builder-webpack5'
   },
+  typescript: {
+    check: true
+  },
+  features: {
+    babelModeV7: true
+  },
+  babel: (config) => {
+    config.presets.push(require.resolve('@emotion/babel-preset-css-prop'))
+    return config
+  },
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.(ts|tsx)$/,

packages/common-components/babel.config.json

@@ -1,16 +1,21 @@
 {
+  "presets": [
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "@emotion/react" }
+    ],
+    ["@babel/env", { "shippedProposals": true }],
+
+    ["@babel/preset-typescript", { "onlyRemoveTypeImports": true }]
+  ],
   "plugins": [
+    "@emotion/babel-plugin",
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-react-jsx",
-    "@emotion"
-  ],
-  "presets": [
-    ["@babel/env", { "shippedProposals": true }],
     [
-      "@babel/react",
+      "@babel/plugin-transform-react-jsx",
       { "runtime": "automatic", "importSource": "@emotion/react" }
     ],
-    ["@babel/typescript", { "onlyRemoveTypeImports": true }]
+    "react-require"
   ]
 }

packages/common-components/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@emotion/react",
+    "composite": true,
+    "baseUrl": ".",
+    "plugins": [
+      {
+        "name": "typescript-styled-plugin",
+        "tags": ["styled", "css"]
+      }
+    ]
+  },
+  "include": ["src/**/*", ".storybook/*", "utils/**/*"]
+}

packages/common-components/webpack.config.js

@@ -18,6 +18,9 @@ module.exports = {
       }
     ]
   },
+  externals: {
+    react: 'React'
+  },
   output: {
     filename: 'components.bundle.min.js',
     library: 'playgroundComponents',

tsconfig.json

@@ -1,7 +1,5 @@
 {
   "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "@emotion/react",
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "Node",
     "resolveJsonModule": true,
@@ -15,18 +13,21 @@
     "module": "esnext",
     "isolatedModules": true
   },
-  /*
-    "references": [
-      {
-        "path": "packages/common-components"
-      },
-      {
-        "path": "packages/common-styles"
-      },
+
+  "references": [
+    {
+      "path": "packages/common-components"
+    },
+    {
+      "path": "packages/common-styles"
+    }
+
+    /*
       {
         "path": "packages/common-utils"
       },
-    ],
-    */
+      */
+  ],
+
   "exclude": ["packages/**/dist/**"]
 }