@trackunit/react-table-base-components 0.0.29 → 0.0.32

package/index.cjs.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var reactFormComponents = require('@trackunit/react-form-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var reactComponents = require('@trackunit/react-components');
 var react = require('react');
 
@@ -21,6 +22,33 @@ const CheckboxCell = ({ checked, className, dataTestId }) => {
     return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { readOnly: true, checked: checked }) }));
 };
 
+const cvaDateTimeCell = cssClassVarianceUtilities.cvaMerge([""]);
+const cvaDateTime = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-sm", "text-ellipsis"]);
+
+/**
+ * DateTimeCell is used for render a date and or time in a table cell.
+ *
+ * @param {DateTimeCellProps} props - The props for the DateTimeCell component
+ * @returns {JSX.Element} DateTimeCell component
+ */
+const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, dataTestId, }) => {
+    if (!date) {
+        return null;
+    }
+    const formattedDate = dateAndTimeUtils.formatDateUtil(date, format, timeZone, locale);
+    return (jsxRuntime.jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withTimeSince ? jsxRuntime.jsx(TimeSince, { date: date, timeZone: timeZone, locale: locale }) : null] }));
+};
+const TimeSince = ({ date, timeZone, locale }) => {
+    try {
+        const timeSince = dateAndTimeUtils.timeSinceAuto(date, new Date(Date.now()), timeZone, locale);
+        return jsxRuntime.jsx("p", { className: cvaDateTimeSince(), children: timeSince });
+    }
+    catch (_a) {
+        return null;
+    }
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -48,6 +76,28 @@ function __rest(s, e) {
     return t;
 }
 
+/**
+ * The `<ImageCell>` component is used for displaying images in a table cell.
+ *
+ * @param {object} props - The props for the Image component.
+ * @returns {JSX.Element} The Image component.
+ */
+const ImageCell = (_a) => {
+    var { imageUrl, alt = "", width = 100, height = 100, dataTestId } = _a, rest = __rest(_a, ["imageUrl", "alt", "width", "height", "dataTestId"]);
+    return jsxRuntime.jsx("img", Object.assign({ width: width, height: height, src: imageUrl, alt: alt, "data-testid": dataTestId }, rest));
+};
+
+/**
+ * The IndicatorCell is used for render an indicator in a table cell
+ *
+ * @param {IndicatorCellProps} props - The props for the LinkCell component
+ * @returns {JSX.Element} LinkCell component
+ */
+const IndicatorCell = (_a) => {
+    var rest = __rest(_a, []);
+    return jsxRuntime.jsx(reactComponents.Indicator, Object.assign({}, rest));
+};
+
 /**
  * The LinkCell is used for render a list of tags in a table cell
  *
@@ -63,6 +113,25 @@ const LinkCell = (_a) => {
     return (jsxRuntime.jsx(reactComponents.ExternalLink, Object.assign({ href: `${linkPrefix}${link}` }, rest, { onClick: handleClick, children: link })));
 };
 
+const cvaNumberCell = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "gap-1",
+    "slashed-zero",
+    "text-neutral-700",
+    "text-sm",
+    "text-ellipsis",
+]);
+
+/**
+ * The `<NumberCell>` component is used for displaying numbers with units in a table cell.
+ *
+ * @param props - The props for the NumberCell component.
+ * @returns {JSX.Element} A React JSX element representing the NumberCell component.
+ */
+const NumberCell = ({ value = "", unit, className, dataTestId }) => {
+    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, className: cvaNumberCell({ className }), children: [jsxRuntime.jsx("span", { children: value }), unit ? jsxRuntime.jsx("span", { children: unit }) : null] }));
+};
+
 /**
  * Component for a resizable handle element.
  *
@@ -316,7 +385,11 @@ const cvaTr = cssClassVarianceUtilities.cvaMerge(["border-b", "border-neutral-30
 });
 
 exports.CheckboxCell = CheckboxCell;
+exports.DateTimeCell = DateTimeCell;
+exports.ImageCell = ImageCell;
+exports.IndicatorCell = IndicatorCell;
 exports.LinkCell = LinkCell;
+exports.NumberCell = NumberCell;
 exports.ResizeHandle = ResizeHandle;
 exports.SortIndicator = SortIndicator;
 exports.TableRoot = TableRoot;

package/index.esm.js

@@ -1,7 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { ExternalLink, Tag, Tooltip } from '@trackunit/react-components';
+import { formatDateUtil, timeSinceAuto } from '@trackunit/date-and-time-utils';
+import { Indicator, ExternalLink, Tag, Tooltip } from '@trackunit/react-components';
 import { useState } from 'react';
 
 const cvaCheckboxCell = cvaMerge([""]);
@@ -17,6 +18,33 @@ const CheckboxCell = ({ checked, className, dataTestId }) => {
     return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, { readOnly: true, checked: checked }) }));
 };
 
+const cvaDateTimeCell = cvaMerge([""]);
+const cvaDateTime = cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince = cvaMerge(["slashed-zero", "text-neutral-500", "text-sm", "text-ellipsis"]);
+
+/**
+ * DateTimeCell is used for render a date and or time in a table cell.
+ *
+ * @param {DateTimeCellProps} props - The props for the DateTimeCell component
+ * @returns {JSX.Element} DateTimeCell component
+ */
+const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, dataTestId, }) => {
+    if (!date) {
+        return null;
+    }
+    const formattedDate = formatDateUtil(date, format, timeZone, locale);
+    return (jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withTimeSince ? jsx(TimeSince, { date: date, timeZone: timeZone, locale: locale }) : null] }));
+};
+const TimeSince = ({ date, timeZone, locale }) => {
+    try {
+        const timeSince = timeSinceAuto(date, new Date(Date.now()), timeZone, locale);
+        return jsx("p", { className: cvaDateTimeSince(), children: timeSince });
+    }
+    catch (_a) {
+        return null;
+    }
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -44,6 +72,28 @@ function __rest(s, e) {
     return t;
 }
 
+/**
+ * The `<ImageCell>` component is used for displaying images in a table cell.
+ *
+ * @param {object} props - The props for the Image component.
+ * @returns {JSX.Element} The Image component.
+ */
+const ImageCell = (_a) => {
+    var { imageUrl, alt = "", width = 100, height = 100, dataTestId } = _a, rest = __rest(_a, ["imageUrl", "alt", "width", "height", "dataTestId"]);
+    return jsx("img", Object.assign({ width: width, height: height, src: imageUrl, alt: alt, "data-testid": dataTestId }, rest));
+};
+
+/**
+ * The IndicatorCell is used for render an indicator in a table cell
+ *
+ * @param {IndicatorCellProps} props - The props for the LinkCell component
+ * @returns {JSX.Element} LinkCell component
+ */
+const IndicatorCell = (_a) => {
+    var rest = __rest(_a, []);
+    return jsx(Indicator, Object.assign({}, rest));
+};
+
 /**
  * The LinkCell is used for render a list of tags in a table cell
  *
@@ -59,6 +109,25 @@ const LinkCell = (_a) => {
     return (jsx(ExternalLink, Object.assign({ href: `${linkPrefix}${link}` }, rest, { onClick: handleClick, children: link })));
 };
 
+const cvaNumberCell = cvaMerge([
+    "flex",
+    "gap-1",
+    "slashed-zero",
+    "text-neutral-700",
+    "text-sm",
+    "text-ellipsis",
+]);
+
+/**
+ * The `<NumberCell>` component is used for displaying numbers with units in a table cell.
+ *
+ * @param props - The props for the NumberCell component.
+ * @returns {JSX.Element} A React JSX element representing the NumberCell component.
+ */
+const NumberCell = ({ value = "", unit, className, dataTestId }) => {
+    return (jsxs("div", { "data-testid": dataTestId, className: cvaNumberCell({ className }), children: [jsx("span", { children: value }), unit ? jsx("span", { children: unit }) : null] }));
+};
+
 /**
  * Component for a resizable handle element.
  *
@@ -311,4 +380,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { CheckboxCell, LinkCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, NumberCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "0.0.29",
+  "version": "0.0.32",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,8 +9,9 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.14",
     "@trackunit/date-and-time-utils": "0.0.1",
-    "@trackunit/react-components": "0.1.166",
-    "@trackunit/react-form-components": "0.0.156",
+    "@trackunit/iris-app-api": "0.0.118",
+    "@trackunit/react-components": "0.1.167",
+    "@trackunit/react-form-components": "0.0.158",
     "@trackunit/ui-design-tokens": "0.0.77",
     "react": "18.2.0"
   },

package/src/components/ImageCell/ImageCell.d.ts

@@ -1,21 +1,30 @@
 import { CommonProps } from "@trackunit/react-components";
 export interface ImageCellProps extends CommonProps {
+    /**
+     * The URL of the image to be displayed.
+     */
     imageUrl: string;
+    /**
+     * An optional text description for the image.
+     */
     alt?: string;
+    /**
+     * The width of the image in pixels.
+     */
     width?: number;
+    /**
+     * The height of the image in pixels.
+     */
     height?: number;
+    /**
+     * A custom data-testid attribute for testing purposes.
+     */
     dataTestId?: string;
 }
 /**
  * The `<ImageCell>` component is used for displaying images in a table cell.
  *
  * @param {object} props - The props for the Image component.
- * @param {string} props.imageUrl - The URL of the image to be displayed.
- * @param {string} [props.alt=""] - The alternative text for the image.
- * @param {number} [props.width=100] - The width of the image in pixels.
- * @param {number} [props.height=100] - The height of the image in pixels.
- * @param {string} [props.dataTestId] - An optional data-testid for testing purposes.
- * @param {...any} [rest] - Additional props that can be applied to the underlying <img> element.
  * @returns {JSX.Element} The Image component.
  */
 export declare const ImageCell: ({ imageUrl, alt, width, height, dataTestId, ...rest }: ImageCellProps) => JSX.Element;

package/src/components/NumberCell/NumberCell.d.ts

@@ -1,16 +1,28 @@
+import { UnitSi, UnitUs } from "@trackunit/iris-app-api";
 import { CommonProps } from "@trackunit/react-components";
 export interface NumberCellProps extends CommonProps {
-    value: string | number;
-    unit?: string | undefined;
+    /**
+     * The numeric value to be displayed.
+     * This can be either a string or a number.
+     */
+    value?: string | number | null;
+    /**
+     * An optional unit to display alongside the numeric value.
+     */
+    unit?: UnitSi | UnitUs | null;
+    /**
+     * An optional CSS class name to apply to the NumberCell component.
+     */
+    className?: string;
+    /**
+     * A custom data-testid attribute for testing purposes.
+     */
+    dataTestId?: string;
 }
 /**
  * The `<NumberCell>` component is used for displaying numbers with units in a table cell.
  *
  * @param props - The props for the NumberCell component.
- * @param {string} [props.value] - The numeric value to be displayed.
- * @param {string} [props.unit] - The optional unit to be displayed alongside the value.
- * @param {string} [props.className] - Additional CSS classes to apply to the component.
- * @param {string} [props.dataTestId] - The data-testid attribute for testing purposes.
  * @returns {JSX.Element} A React JSX element representing the NumberCell component.
  */
 export declare const NumberCell: ({ value, unit, className, dataTestId }: NumberCellProps) => JSX.Element;

package/src/index.d.ts

@@ -1,5 +1,9 @@
 export * from "./components/CheckboxCell/CheckboxCell";
+export * from "./components/DateTimeCell/DateTimeCell";
+export * from "./components/ImageCell/ImageCell";
+export * from "./components/IndicatorCell/IndicatorCell";
 export * from "./components/LinkCell/LinkCell";
+export * from "./components/NumberCell/NumberCell";
 export * from "./components/ResizeHandle";
 export * from "./components/SortIndicator";
 export * from "./components/TableRoot";