fix: try tsdx as a build tool

.gitignore

@@ -16,6 +16,7 @@ sidebar.json
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

package.json

@@ -4,12 +4,11 @@
   "license": "Apache-2.0",
   "version": "0.0.1",
   "source": "src/lib/index.ts",
-  "main": "build/index.js",
-  "module": "build/index.es.js",
-  "umd": "build/index.umd.js",
-  "types": "build/index.d.ts",
+  "main": "dist/ui.js",
+  "module": "dist/ui.es.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "build",
+    "dist",
     "src/lib"
   ],
   "sideEffects": false,
@@ -24,10 +23,11 @@
     "access": "public"
   },
   "scripts": {
-    "build": "microbundle build --jsx React.createElement --entry src/lib/index.ts --jsxFragment React.Fragment --tsconfig tsconfig.lib.json --compress",
-    "start": "microbundle watch --jsx React.createElement --entry src/lib/index.ts --jsxFragment React.Fragment --tsconfig tsconfig.lib.json --format modern --no-compress",
+    "build": "tsdx build --entry src/lib/index.ts --tsconfig tsconfig.lib.json",
+    "start": "tsdx watch --entry src/lib/index.ts --tsconfig tsconfig.lib.json",
     "dev": "yarn run dokz:dev",
-    "lint": "eslint src",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "eslint src --fix",
     "typecheck": "tsc --noEmit",
     "dokz:dev": "next dev -p 3001",
     "dokz:build": "next build",
@@ -46,7 +46,7 @@
     "@chakra-ui/core": "^0.8.0",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
-    "@types/jest": "^26.0.17",
+    "@types/jest": "^26.0.18",
     "@types/node": "^14.14.11",
     "@types/react": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
@@ -64,27 +64,33 @@
     "eslint-plugin-simple-import-sort": "^6.0.1",
     "husky": "^4.3.5",
     "jest": "^26.6.3",
-    "microbundle": "^0.12.4",
     "next": "^10.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.0.3",
     "typescript": "^4.1.2"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
+  "prettier": {
+    "singleQuote": true,
+    "printWidth": 120,
+    "quoteProps": "consistent"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --pattern \"lib/**/*.*\" --staged && run-p lint typecheck"
     }
   },
   "resolutions": {
     "typescript": "^4.1.2",
-    "rollup-plugin-typescript2": "^0.29.0"
+    "prettier": "^2.2.1"
   }
 }

src/lib/ComboBox/ComboBox.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback,useEffect, useMemo, useRef, useState } from 'react';
-import { uid,useUIDSeed } from 'react-uid';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { uid, useUIDSeed } from 'react-uid';
 
 import { List as ListBox } from '../ListBox/ListBox';
 import Popover from '../Popover';
@@ -96,14 +96,14 @@ const ComboBoxInner: React.FC<Props> = ({
     allowNewElement
       ? undefined
       : () => {
-        if (textValue === '') {
-          onChange(null);
-        } else if (innerValue) {
-          setTextValue(allItems[innerValue]?.label);
-        } else {
-          setTextValue('');
+          if (textValue === '') {
+            onChange(null);
+          } else if (innerValue) {
+            setTextValue(allItems[innerValue]?.label);
+          } else {
+            setTextValue('');
+          }
         }
-      }
   );
 
   const handleSelect = useAllHandlers<void>(() => {

src/lib/ComboBox/Input.tsx

@@ -21,8 +21,7 @@ const InputWrapper = styled('div', {
   variants: {
     validity: validityVariant,
   },
-})
-
+});
 
 const Input = styled(InteractiveBox, {
   variants: {
@@ -31,10 +30,10 @@ const Input = styled(InteractiveBox, {
         pr: '$18',
       },
       false: {
-        pr: '$10'
-      }
-    }
-  }
+        pr: '$10',
+      },
+    },
+  },
 });
 
 type InputProps = StitchesProps<typeof InteractiveBox>;
@@ -83,7 +82,7 @@ const ComboBoxInput = React.forwardRef<HTMLDivElement, Props>(
     const { open, close } = useOpenStateControls();
 
     const handleChange = useAllHandlers((e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e.currentTarget.value)
+      onChange?.(e.currentTarget.value);
     }, open);
 
     const handleSelect = useAllHandlers(onSelect, close);
@@ -112,7 +111,7 @@ const ComboBoxInput = React.forwardRef<HTMLDivElement, Props>(
     });
 
     const handleKeyDown = useAllHandlers(keydownControls, props.onKeyDown);
-    const hasNewBadge = !selectedItemValue && !!value && allowNewElement
+    const hasNewBadge = !selectedItemValue && !!value && allowNewElement;
 
     return (
       <FormField
@@ -166,8 +165,8 @@ const ButtonContainer = styled(Flex, {
   position: 'absolute',
   right: 0,
   top: 0,
-  height: '100%'
-})
+  height: '100%',
+});
 
 const ButtonStyled = styled(Button, {
   zIndex: 2,
@@ -178,7 +177,7 @@ const ButtonStyled = styled(Button, {
 const ComboBoxButton = React.memo(({ hasNewBadge }: { hasNewBadge: boolean }) => {
   const isOpen = useOpenState();
   const { open } = useOpenStateControls();
-  const { inputRef,  } = useComboBox();
+  const { inputRef } = useComboBox();
 
   return (
     <ButtonContainer flow="row" cross="center">

src/lib/Dialog/utils.ts

@@ -8,7 +8,7 @@ const dialogContext = createContext<DialogContext>({
 export interface DialogContext {
   seed: ReturnType<typeof useUIDSeed>;
   render: (close: () => void) => React.ReactNode;
-};
+}
 
 export function useDialog() {
   return useContext(dialogContext);

src/lib/Portal/Portal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect,useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import ThemeProvider from '../ThemeProvider';

src/lib/Spinner/Spinner.tsx

@@ -1,7 +1,7 @@
 import { StitchesProps } from '@stitches/react';
 import React from 'react';
 
-import { css,styled } from '../stitches.config';
+import { css, styled } from '../stitches.config';
 import { createVariant } from '../theme/variants';
 
 const rotate = css.keyframes({

src/lib/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { styled } from '../stitches.config';
-import { font,textSize } from '../theme/variants';
+import { font, textSize } from '../theme/variants';
 
 const Text = styled('span', {
   p: 0,

src/lib/ThemeProvider/ThemeProvider.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useMemo } from 'react';
 
 import Box from '../Box';
 import { css, styled } from '../stitches.config';
-import { ColorName,Swatch } from '../theme/colors';
+import { ColorName, Swatch } from '../theme/colors';
 import { themes } from '../theme/themes';
 
 type Props = {

src/lib/index.ts

@@ -15,7 +15,7 @@ export { default as MenuList } from './MenuList';
 export { default as Picker } from './Picker';
 export { default as Section } from './Section';
 export { default as Spinner } from './Spinner';
-export { css,styled, theme } from './stitches.config';
+export { css, styled, theme } from './stitches.config';
 export { default as Switch } from './Switch';
 export { default as Tag } from './Tag';
 export { default as Text } from './Text';

src/lib/utils/OpenStateProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, useState } from 'react';
 
 const menuStateContext = createContext(false);
-const menuStateControlsContext = createContext<ReturnType<typeof useTogglesState>[1]>({} as any);
+const menuStateControlsContext = createContext<MenuControlFunctions>({} as MenuControlFunctions);
 
 export const OpenStateProvider: React.FC<{ defaultOpen?: boolean }> = ({ defaultOpen, children }) => {
   const [isOpen, controls] = useTogglesState(defaultOpen);
@@ -33,7 +33,7 @@ interface MenuControlFunctions {
   open: () => void;
   close: () => void;
   toggle: () => void;
-};
+}
 
 function useTogglesState(defaultOpen = false): [isOpen: boolean, controls: MenuControlFunctions] {
   const [isOpen, setOpen] = useState(defaultOpen);

src/lib/utils/types.ts

@@ -1,5 +1,5 @@
-import type { TCss,TCssProperties } from '@stitches/core';
-import type { BreakPointsKeys,TCssProp, TCssWithBreakpoints } from '@stitches/react';
+import type { TCss, TCssProperties } from '@stitches/core';
+import type { BreakPointsKeys, TCssProp, TCssWithBreakpoints } from '@stitches/react';
 
 import { css } from '../stitches.config';
 

tsconfig.json

@@ -13,7 +13,7 @@
     "noEmit": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "importHelpers": true,
     "jsx": "preserve",
     "baseUrl": ".",
     "paths": {

tsconfig.lib.json

@@ -1,11 +1,10 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "ESNext",
-    "target": "ESNext",
+    "module": "esnext",
+    "target": "esnext",
     "declaration": true,
     "strictFunctionTypes": true
   },
-  "include": ["src/lib/**/*"],
-  "exclude": ["node_modules"]
+  "include": ["src/lib/**/*"]
 }