chore: Added vite builder to storybook, added ESM build

.babelrc.es

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env", {
+        "loose": true,
+        "modules": false
+      }
+    ],
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "react"
+      }
+    ]
+  ]
+}

.storybook/main.js

@@ -1,14 +1,32 @@
 module.exports = {
-  "stories": [
+  stories: [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app",
     "@storybook/addon-a11y",
     "@storybook/addon-measure",
     "storybook-addon-outline",
-  ]
+  ],
+  // only use vite builder for development
+  ...(process.env.NODE_ENV !== 'production' ?
+    {
+      core: {
+        builder: "storybook-builder-vite"
+      },
+      async viteFinal(config) {
+        // customize the Vite config here
+        config.esbuild = {
+          jsxFactory: "jsx",
+          jsxInject: 'import { jsx } from "theme-ui"',
+        }
+
+        // return the customized config
+        return config;
+      }
+    }
+  :{})
 }

.storybook/preview.js → .storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ThemeWrapper from '../src/theme/ThemeWrapper';
+import ThemeWrapper from "../src/theme/ThemeWrapper"
 import "normalize.css"
 import "./global.css"
 
@@ -9,24 +9,24 @@ export const decorators = [
       <Story />
     </ThemeWrapper>
   ),
-];
+]
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   backgrounds: {
-    default: 'white',
+    default: "white",
     values: [
       {
-        name: 'light',
-        value: '#f8f8f8'
+        name: "light",
+        value: "#f8f8f8"
       },
       {
-        name: 'dark',
-        value: '#333333'
+        name: "dark",
+        value: "#333333"
       },
       {
-        name: 'white',
-        value: '#fff'
+        name: "white",
+        value: "#fff"
       },
     ]
   }

package.json

@@ -2,11 +2,12 @@
   "name": "@micromed/herz-ui",
   "version": "0.9.1",
   "description": "Herz UI (/hɛrʦ/ - Hérts) is a design system containing a styleguide(colors, grid, icons, typography) and library of UI components",
-  "main": "./lib/components/index.js",
-  "typings": "./lib/components/index.d.ts",
+  "main": "./lib/cjs/components/index.js",
+  "typings": "./lib/types/components/index.d.ts",
   "files": [
-    "lib/"
+    "lib"
   ],
+  "module": "./lib/es/components/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/micromed-dev/herz-ui.git"
@@ -43,21 +44,15 @@
   "resolutions": {
     "babel-loader": "8.1.0"
   },
-  "watch": {
-    "compile": {
-      "patterns": [
-        "src"
-      ],
-      "extensions": "ts"
-    }
-  },
   "scripts": {
-    "dev": "FAST_REFRESH=false styleguidist server & npm-watch compile",
+    "dev": "styleguidist server",
     "build": "yarn compile && npx styleguidist build",
     "test": "react-scripts test",
-    "compile:src": "BABEL_ENV=production babel src --out-dir ./lib --extensions \".ts,.tsx\" --ignore '@types,*.md'",
+    "compile:src": "yarn compile:src:cjs && yarn compile:src:es",
+    "compile:src:cjs": "BABEL_ENV=production babel src --out-dir ./lib/cjs --extensions \".ts,.tsx\" --ignore '@types,*.md'",
+    "compile:src:es": "BABEL_ENV=production babel src --no-babelrc --out-dir ./lib/es --extensions \".ts,.tsx\" --ignore '@types,*.md' --config-file ./.babelrc.es",
     "build:types": "tsc --emitDeclarationOnly --noEmit false",
-    "compile": "yarn compile:src && yarn build:types",
+    "compile": "rm -rf ./lib && yarn compile:src && yarn build:types",
     "release": "yarn compile && dotenv release-it --",
     "changelog": "changelog",
     "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
@@ -77,12 +72,6 @@
       "git add"
     ]
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -133,6 +122,7 @@
     "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "@typescript-eslint/parser": "^4.26.1",
+    "@vitejs/plugin-react-refresh": "^1.3.5",
     "chromatic": "^5.9.0",
     "dotenv-cli": "^4.0.0",
     "eslint-config-prettier": "^8.3.0",
@@ -146,7 +136,6 @@
     "jest-axe": "^5.0.1",
     "lint-staged": "^10.5.4",
     "lodash": "^4.17.21",
-    "npm-watch": "^0.9.0",
     "prettier": "^2.3.1",
     "puppeteer": "^10.0.0",
     "react": "^17.0.2",
@@ -156,6 +145,8 @@
     "react-styleguidist": "^11.1.7",
     "release-it": "^14.8.0",
     "storybook-addon-outline": "^1.4.1",
-    "typescript": "^4.1.3"
+    "storybook-builder-vite": "^0.0.10",
+    "typescript": "^4.1.3",
+    "vite": "^2.4.1"
   }
 }

src/components/index.ts

@@ -1,3 +1,6 @@
+export { default as Accordion } from "./Accordion/Accordion"
+export type { AccordionProps } from "./Accordion/Accordion"
+
 export { default as Autocomplete } from "./Autocomplete/Autocomplete"
 export type { AutocompleteProps } from "./Autocomplete/Autocomplete"
 

tsconfig.json

@@ -19,7 +19,7 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "declaration": true,
-    "declarationDir": "./lib",
+    "declarationDir": "./lib/types",
     "noEmit": true
   },
   "include": [

vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite"
+import reactRefresh from "@vitejs/plugin-react-refresh"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh()],
+  esbuild: {
+    jsxFactory: "jsx",
+    jsxInject: `import { jsx } from "theme-ui"`,
+  },
+})