Fix(#5): import and install errors

esbuild.config.js

@@ -36,7 +36,13 @@ const options = {
 
 build({
   ...options,
-  outfile: "./dist/index.js"
+  outfile: "./dist/index.mjs"
+});
+
+build({
+  ...options,
+  format: "cjs",
+  outfile: "./dist/index.cjs"
 });
 
 build({

package.json

@@ -2,13 +2,21 @@
   "name": "@mezh-hq/react-seat-toolkit",
   "version": "1.3.1",
   "description": "React UI library to design and render seat layouts",
-  "browser": "dist/index.js",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "private": false,
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "require": "./dist/index.cjs"
+      }
+    },
     "./slim": "./dist/index.slim.js",
     "./styles": "./dist/index.css",
     "./raw-styles": "./dist/styles/index.css",
@@ -24,7 +32,6 @@
     "storybook": "NODE_ENV=storybook storybook dev -p 6006",
     "build-storybook": "storybook build",
     "postbuild": "bun build:types && bun build:css",
-    "postinstall": "patch-package",
     "prepare": "lefthook install",
     "release": "bunx github:akalanka47000/bunpublish --tag=${TAG:=latest} --provenance",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -104,7 +111,6 @@
     "install": "0.13.0",
     "lefthook": "1.4.3",
     "npm": "10.8.1",
-    "patch-package": "8.0.0",
     "postcss": "8.4.31",
     "prettier": "2.8.8",
     "sonner": "1.5.0",
@@ -118,5 +124,8 @@
   "overrides": {
     "jsondiffpatch": "^0.5.0",
     "use-sync-external-store": "1.2.0"
+  },
+  "patchedDependencies": {
+    "[email protected]": "patches/[email protected]"
   }
 }

patches/use-sync-external-store+1.2.0.patch → patches/use-sync-external-store@1.2.0.patch

@@ -1,7 +1,7 @@
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
+diff --git a/cjs/use-sync-external-store-shim.development.js b/cjs/use-sync-external-store-shim.development.js
 index c849ab8..348baaa 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
+--- a/cjs/use-sync-external-store-shim.development.js
++++ b/cjs/use-sync-external-store-shim.development.js
 @@ -10,6 +10,8 @@
 
  'use strict';
@@ -19,10 +19,10 @@ index c849ab8..348baaa 100644
 
  var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js
+diff --git a/cjs/use-sync-external-store-shim.native.development.js b/cjs/use-sync-external-store-shim.native.development.js
 index 5e2bebc..ae1e46d 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.development.js
+--- a/cjs/use-sync-external-store-shim.native.development.js
++++ b/cjs/use-sync-external-store-shim.native.development.js
 @@ -10,6 +10,8 @@
 
  'use strict';
@@ -40,10 +40,10 @@ index 5e2bebc..ae1e46d 100644
 
  var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.production.min.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.production.min.js
+diff --git a/cjs/use-sync-external-store-shim.native.production.min.js b/cjs/use-sync-external-store-shim.native.production.min.js
 index 0e7f3dc..ac8e426 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.production.min.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.native.production.min.js
+--- a/cjs/use-sync-external-store-shim.native.production.min.js
++++ b/cjs/use-sync-external-store-shim.native.production.min.js
 @@ -7,5 +7,7 @@
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
@@ -53,10 +53,10 @@ index 0e7f3dc..ac8e426 100644
 +import e from "react";
 +function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
  function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:q;
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js
+diff --git a/cjs/use-sync-external-store-shim.production.min.js b/cjs/use-sync-external-store-shim.production.min.js
 index 0ca00c7..e457d83 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.min.js
+--- a/cjs/use-sync-external-store-shim.production.min.js
++++ b/cjs/use-sync-external-store-shim.production.min.js
 @@ -7,5 +7,7 @@
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
@@ -66,10 +66,10 @@ index 0ca00c7..e457d83 100644
 +import e from "react";
 +function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
  function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
+diff --git a/cjs/use-sync-external-store-shim/with-selector.development.js b/cjs/use-sync-external-store-shim/with-selector.development.js
 index 3c875ea..e7ec965 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
+--- a/cjs/use-sync-external-store-shim/with-selector.development.js
++++ b/cjs/use-sync-external-store-shim/with-selector.development.js
 @@ -10,6 +10,9 @@
 
  'use strict';
@@ -89,10 +89,10 @@ index 3c875ea..e7ec965 100644
 
  /**
   * inlined Object.is polyfill to avoid requiring consumers ship their own
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js
+diff --git a/cjs/use-sync-external-store-shim/with-selector.production.min.js b/cjs/use-sync-external-store-shim/with-selector.production.min.js
 index 84485da..201748b 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.min.js
+--- a/cjs/use-sync-external-store-shim/with-selector.production.min.js
++++ b/cjs/use-sync-external-store-shim/with-selector.production.min.js
 @@ -7,6 +7,9 @@
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
@@ -104,10 +104,10 @@ index 84485da..201748b 100644
 +function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
  exports.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return[function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
  u(function(){f.hasValue=!0;f.value=d},[d]);w(d);return d};
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.development.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.development.js
+diff --git a/cjs/use-sync-external-store-with-selector.development.js b/cjs/use-sync-external-store-with-selector.development.js
 index eacc4be..d99209e 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.development.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.development.js
+--- a/cjs/use-sync-external-store-with-selector.development.js
++++ b/cjs/use-sync-external-store-with-selector.development.js
 @@ -10,6 +10,8 @@
 
  'use strict';
@@ -125,10 +125,10 @@ index eacc4be..d99209e 100644
 
  /**
   * inlined Object.is polyfill to avoid requiring consumers ship their own
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.production.min.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.production.min.js
+diff --git a/cjs/use-sync-external-store-with-selector.production.min.js b/cjs/use-sync-external-store-with-selector.production.min.js
 index 06bad1a..7ea7656 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.production.min.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store-with-selector.production.min.js
+--- a/cjs/use-sync-external-store-with-selector.production.min.js
++++ b/cjs/use-sync-external-store-with-selector.production.min.js
 @@ -7,6 +7,10 @@
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
@@ -143,10 +143,10 @@ index 06bad1a..7ea7656 100644
 +    var c = r(null); if (null === c.current) { var f = { hasValue: !1, value: null }; c.current = f } else f = c.current; c = u(function () { function a(a) { if (!c) { c = !0; d = a; a = l(a); if (void 0 !== h && f.hasValue) { var b = f.value; if (h(b, a)) return k = b } return k = a } b = k; if (p(d, a)) return b; var e = l(a); if (void 0 !== h && h(b, e)) return b; d = a; return k = e } var c = !1, d, k, m = void 0 === e ? null : e; return [function () { return a(b()) }, null === m ? void 0 : function () { return a(m()) }] }, [b, e, l, h]); var d = q(a, c[0], c[1]);
 +    t(function () { f.hasValue = !0; f.value = d }, [d]); v(d); return d
 +};
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store.development.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store.development.js
+diff --git a/cjs/use-sync-external-store.development.js b/cjs/use-sync-external-store.development.js
 index 82368bc..7d6ddb3 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store.development.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store.development.js
+--- a/cjs/use-sync-external-store.development.js
++++ b/cjs/use-sync-external-store.development.js
 @@ -10,6 +10,8 @@
 
  'use strict';
@@ -164,10 +164,10 @@ index 82368bc..7d6ddb3 100644
 
  var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-diff --git a/node_modules/use-sync-external-store/cjs/use-sync-external-store.production.min.js b/node_modules/use-sync-external-store/cjs/use-sync-external-store.production.min.js
+diff --git a/cjs/use-sync-external-store.production.min.js b/cjs/use-sync-external-store.production.min.js
 index 8d684a6..927067e 100644
---- a/node_modules/use-sync-external-store/cjs/use-sync-external-store.production.min.js
-+++ b/node_modules/use-sync-external-store/cjs/use-sync-external-store.production.min.js
+--- a/cjs/use-sync-external-store.production.min.js
++++ b/cjs/use-sync-external-store.production.min.js
 @@ -7,4 +7,8 @@
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.

src/components/index.tsx

@@ -16,7 +16,7 @@ const Designer: React.FC<ISTKProps> = (props) => {
     <>
       <div
         className={twMerge(
-          "bg-white h-full min-h-[85vh] flex flex-col overflow-x-hidden",
+          "bg-white text-black h-full min-h-[calc(100vh-32px)] flex flex-col overflow-x-hidden",
           props.styles?.root?.className
         )}
         style={props?.styles?.root?.properties}
@@ -41,7 +41,10 @@ const User: React.FC<ISTKProps> = (props) => {
   useUserEvents(props);
   return (
     <div
-      className={twMerge("bg-white h-full min-h-[85vh] flex flex-col relative", props.styles?.root?.className)}
+      className={twMerge(
+        "bg-white text-black h-full min-h-screen flex flex-col relative",
+        props.styles?.root?.className
+      )}
       style={props?.styles?.root?.properties}
     >
       <Workspace {...props} />

src/components/workspace/index.tsx

@@ -59,7 +59,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
     <div
       id={ids.workspaceContainer}
       className={twMerge(
-        "w-full h-full flex flex-col flex-1 relative border border-b-0 border-black transition-all",
+        "w-full flex flex-col flex-1 relative border border-b-0 border-black transition-all",
         initialized ? "opacity-100" : "opacity-0",
         props.styles?.workspace?.root?.className
       )}