Fixed storybook according to new build system

.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
     browser: true,
     jest: true,
   },
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaVersion: 8,
     ecmaFeatures: {

.storybook/main.js

@@ -56,7 +56,14 @@ module.exports = {
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
       exclude: /node_modules/,
-      use: ['ts-loader'],
+      use: [
+        {
+          loader: 'ts-loader',
+          options: {
+            configFile: 'tsconfig.node.json',
+          },
+        },
+      ],
     });
     config.resolve.extensions.push('.ts', '.tsx');
     // Alternately, for an alias:

jest.config.ts

@@ -1,7 +1,5 @@
-import type {Config} from 'jest';
-
 const config: Config = {
   verbose: true,
 };
 
-export default config;
+export default config;

package.json

@@ -2,13 +2,16 @@
   "name": "@g-loot/react-tournament-brackets",
   "version": "1.0.0",
   "description": "A react component to visualize bracket leaderboards",
-  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "rimraf dist && tsc && tsc-alias",
+    "build-cjs": "tsc -p ./tsconfig.node.json && tsc-alias -p ./tsconfig.node.json",
+    "build-esm": "tsc -p ./tsconfig.browser.json && tsc-alias -p ./tsconfig.browser.json",
+    "build": "rimraf dist & npm run build-cjs && npm run build-esm",
     "dev": "start-storybook -p 4442",
     "start": "start-storybook -p $PORT -h 0.0.0.0",
     "build-storybook": "build-storybook -o devapp-build",
@@ -29,7 +32,8 @@
     "deepmerge": "^4.2.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-typescript": "^7.14.5",
     "@storybook/addon-actions": "^6.5.9",
@@ -46,7 +50,7 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.6.0",
-    "eslint": "^8.34.0",
+    "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-alias": "^1.1.2",

scripts/aliases.js

@@ -1,6 +1,6 @@
 const {
   compilerOptions: { paths: unprocessAliases },
-} = require(`../tsconfig.json`);
+} = require(`../tsconfig.node.json`);
 
 const aliases = Object.keys(unprocessAliases).reduce((obj, alias) => {
   const key = alias.match(/[a-zA-Z0-9]+/g);

scripts/webpack.config.js

@@ -21,7 +21,14 @@ module.exports = {
       {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
-        use: ['ts-loader'],
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: 'tsconfig.node.json',
+            },
+          },
+        ],
       },
       {
         test: /\.css$/,
@@ -54,7 +61,7 @@ module.exports = {
     filename: 'bundle.js',
     library: '@g-loot/react-tournament-brackets',
     libraryTarget: 'umd',
-    globalObject: 'this'
+    globalObject: 'this',
   },
   externals: {
     'styled-components': {

tsconfig.browser.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.node",
+  "compilerOptions": {
+    "outDir": "./dist/esm/",
+    "module": "esnext"
+  }
+}

tsconfig.json → tsconfig.node.json

@@ -7,15 +7,19 @@
     "**/*.stories.jsx",
     "**/*.stories.tsx",
     "**/*.stories.js",
-    "**/*.stories.ts"
+    "**/*.stories.ts",
+    "**/*.spec.jsx",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.ts"
   ],
   "compilerOptions": {
+    "outDir": "./dist/cjs/",
+    "module": "commonjs",
     "baseUrl": "src",
     "moduleResolution": "node",
     "target": "es2017",
-    "module": "commonjs",
     "sourceMap": true,
-    "outDir": "./dist",
     "removeComments": true,
     "strict": true,
     "allowJs": true,