@geotab/zenith 2.0.0-beta.1 → 2.0.0

package/README.md

@@ -42,7 +42,41 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ### 2.0.0
 
- * Add support for EcmaScript modules
+We're excited to announce that **Zenith now supports EcmaScript Modules** (ESM)! This major release brings modern JavaScript module support to help you build better, more efficient applications.
+
+**Why ESM Support Matters**
+
+ESM is the modern standard for JavaScript modules in frontend development, bringing significant advantages:
+ * Superior tree-shaking: ESM's static structure enables bundlers to analyze your imports at build time and eliminate unused code more effectively, resulting in smaller bundle sizes
+ * Future-proof: ESM is the JavaScript standard moving forward, ensuring long-term compatibility
+
+#### Important migration notes
+
+While this major release does not include any API changes, there's a critical configuration requirement:
+
+**Avoid Mixing Module Systems**
+
+Your bundler must import all JavaScript files from either dist (CommonJS) or esm (ESM) — never both. Mixing imports can cause issues with React context and other shared state. Problematic example:
+```
+import { Button } from '@geotab/zenith';           // May use ESM
+import { Card } from '@geotab/zenith/dist/Card';   // Uses CommonJS
+// ❌ This mixing can break React context!
+```
+
+Good example:
+```
+import { Button } from '@geotab/zenith';           // May use ESM
+import { Card } from '@geotab/zenith/esm/Card';    // Uses ESM as well
+```
+
+#### Recommended Approach
+
+Since many modern bundlers prioritize ESM by default, we recommend one of these strategies:
+
+ * **Use ESM** (recommended): ensure your bundler configuration prioritizes the esm directory
+ * **Use CommonJS** (for compatibility): configure your bundler to prioritize CommonJS and ensure all imports use consistent paths
+
+Upgrade today to take advantage of modern JavaScript module support and improved tree-shaking capabilities!
 
 ### 1.26.6
 

package/dist/cards/cardsRow.d.ts

@@ -1,5 +1,4 @@
-import { FC } from "react";
 import { ICards } from "./cards";
 export interface ICardsRow extends Omit<ICards, "direction"> {
 }
-export declare const CardsRow: FC<Omit<ICards, "direction">>;
+export declare const CardsRow: ({ children, wrap, gap, className, paddingX, paddingY, fullHeight }: Omit<ICards, "direction">) => import("react/jsx-runtime").JSX.Element;

package/dist/cards/cardsRow.js

@@ -1,21 +1,7 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardsRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const cards_1 = require("./cards");
-const CardsRow = (_a) => {
-    var { children } = _a, args = __rest(_a, ["children"]);
-    return (0, jsx_runtime_1.jsx)(cards_1.Cards, Object.assign({}, args, { direction: "row", children: children }));
-};
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const CardsRow = ({ children, wrap = true, gap = 16, className = "", paddingX = 0, paddingY = 0, fullHeight = false }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-cards", className, fullHeight ? "zen-cards--full-height" : ""]), style: { flexWrap: wrap ? "wrap" : "nowrap", flexDirection: "row", gap, padding: `${paddingY}px ${paddingX}px` }, children: children });
 exports.CardsRow = CardsRow;

package/esm/cards/cardsRow.d.ts

@@ -1,5 +1,4 @@
-import { FC } from "react";
 import { ICards } from "./cards";
 export interface ICardsRow extends Omit<ICards, "direction"> {
 }
-export declare const CardsRow: FC<Omit<ICards, "direction">>;
+export declare const CardsRow: ({ children, wrap, gap, className, paddingX, paddingY, fullHeight }: Omit<ICards, "direction">) => import("react/jsx-runtime").JSX.Element;

package/esm/cards/cardsRow.js

@@ -1,17 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Cards } from "./cards";
-export const CardsRow = (_a) => {
-    var { children } = _a, args = __rest(_a, ["children"]);
-    return _jsx(Cards, Object.assign({}, args, { direction: "row", children: children }));
-};
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const CardsRow = ({ children, wrap = true, gap = 16, className = "", paddingX = 0, paddingY = 0, fullHeight = false }) => _jsx("div", { className: classNames(["zen-cards", className, fullHeight ? "zen-cards--full-height" : ""]), style: { flexWrap: wrap ? "wrap" : "nowrap", flexDirection: "row", gap, padding: `${paddingY}px ${paddingX}px` }, children: children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
@@ -11,9 +11,6 @@
     "**/react-chartjs/dateAdapter.ts",
     "**/react-chartjs/dateAdapter.js"
   ],
-  "publishConfig": {
-     "access": "public"
-   },
   "scripts": {
     "test": "npm run clean && npm run test-build && jest",
     "start": "npm run storybook --loglevel verbose",
@@ -45,6 +42,7 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
+    "@storybook/addon-docs": "^9.1.15",
     "@storybook/addon-links": "^9.1.15",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/react-webpack5": "^9.1.15",
@@ -71,8 +69,7 @@
     "style-loader": "^4.0.0",
     "typescript": "^5.4.3",
     "webpack": "^5.96.1",
-    "xml2js": "^0.6.0",
-    "@storybook/addon-docs": "^9.1.15"
+    "xml2js": "^0.6.0"
   },
   "dependencies": {
     "chart.js": "^4.4.6",
@@ -99,5 +96,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }