@trackunit/react-table-base-components 0.0.351 → 0.0.353

package/index.cjs.js

@@ -8,6 +8,8 @@ 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');
+var polyfill = require('@js-temporal/polyfill');
+var sharedUtils = require('@trackunit/shared-utils');
 
 const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
 
@@ -23,8 +25,8 @@ const CheckboxCell = ({ checked, className, dataTestId }) => {
 };
 
 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"]);
+const cvaDateTime$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince$1 = 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.
@@ -37,12 +39,12 @@ const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, cl
         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, locale: locale, timeZone: timeZone }) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("p", { className: cvaDateTime$1(), children: formattedDate }), withTimeSince ? jsxRuntime.jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : 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 });
+        return jsxRuntime.jsx("p", { className: cvaDateTimeSince$1(), children: timeSince });
     }
     catch (_a) {
         return null;
@@ -166,6 +168,33 @@ const NumberCell = ({ value = "", unit, className, dataTestId }) => {
     return (jsxRuntime.jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("span", { children: value }), value && unit ? jsxRuntime.jsx("span", { children: unit }) : null] }));
 };
 
+const cvaPlainDateCell = 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"]);
+
+/**
+ * PlainDateCell is used for render a date and or time in a table cell.
+ *
+ * @param {PlainDateCellProps} props - The props for the PlainDateCell component
+ * @returns {JSX.Element} PlainDateCell component
+ */
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, dataTestId }) => {
+    if (!date) {
+        return null;
+    }
+    const formattedDate = dateAndTimeUtils.formatDateUtil(date.toZonedDateTime("UTC"), sharedUtils.DateTimeFormat.DATE_SHORT, "UTC", locale);
+    return (jsxRuntime.jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsxRuntime.jsx(DaysSince, { date: date, locale: locale }) : null] }));
+};
+const DaysSince = ({ date, locale }) => {
+    try {
+        const timeSince = dateAndTimeUtils.timeSinceInDays(date.toZonedDateTime("UTC"), polyfill.Temporal.Now.instant().toZonedDateTimeISO("UTC"), "UTC", locale);
+        return jsxRuntime.jsx("p", { className: cvaDateTimeSince(), children: timeSince });
+    }
+    catch (_a) {
+        return null;
+    }
+};
+
 /**
  * Component for a resizable handle element.
  *
@@ -430,6 +459,7 @@ exports.LinkCell = LinkCell;
 exports.MultiValueTextCell = MultiValueTextCell;
 exports.NoticeCell = NoticeCell;
 exports.NumberCell = NumberCell;
+exports.PlainDateCell = PlainDateCell;
 exports.ResizeHandle = ResizeHandle;
 exports.SortIndicator = SortIndicator;
 exports.TableRoot = TableRoot;

package/index.esm.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { formatDateUtil, timeSinceAuto } from '@trackunit/date-and-time-utils';
+import { formatDateUtil, timeSinceAuto, timeSinceInDays } from '@trackunit/date-and-time-utils';
 import { Indicator, ExternalLink, Tooltip, Notice, Tag } from '@trackunit/react-components';
 import { useState, useEffect } from 'react';
+import { Temporal } from '@js-temporal/polyfill';
+import { DateTimeFormat } from '@trackunit/shared-utils';
 
 const cvaCheckboxCell = cvaMerge([""]);
 
@@ -19,8 +21,8 @@ const CheckboxCell = ({ checked, className, dataTestId }) => {
 };
 
 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"]);
+const cvaDateTime$1 = cvaMerge(["slashed-zero", "text-neutral-700", "text-sm", "text-ellipsis"]);
+const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-sm", "text-ellipsis"]);
 
 /**
  * DateTimeCell is used for render a date and or time in a table cell.
@@ -33,12 +35,12 @@ const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, cl
         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, locale: locale, timeZone: timeZone }) : null] }));
+    return (jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsx("p", { className: cvaDateTime$1(), children: formattedDate }), withTimeSince ? jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : null] }));
 };
 const TimeSince = ({ date, timeZone, locale }) => {
     try {
         const timeSince = timeSinceAuto(date, new Date(Date.now()), timeZone, locale);
-        return jsx("p", { className: cvaDateTimeSince(), children: timeSince });
+        return jsx("p", { className: cvaDateTimeSince$1(), children: timeSince });
     }
     catch (_a) {
         return null;
@@ -162,6 +164,33 @@ const NumberCell = ({ value = "", unit, className, dataTestId }) => {
     return (jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsx("span", { children: value }), value && unit ? jsx("span", { children: unit }) : null] }));
 };
 
+const cvaPlainDateCell = 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"]);
+
+/**
+ * PlainDateCell is used for render a date and or time in a table cell.
+ *
+ * @param {PlainDateCellProps} props - The props for the PlainDateCell component
+ * @returns {JSX.Element} PlainDateCell component
+ */
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, dataTestId }) => {
+    if (!date) {
+        return null;
+    }
+    const formattedDate = formatDateUtil(date.toZonedDateTime("UTC"), DateTimeFormat.DATE_SHORT, "UTC", locale);
+    return (jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsx(DaysSince, { date: date, locale: locale }) : null] }));
+};
+const DaysSince = ({ date, locale }) => {
+    try {
+        const timeSince = timeSinceInDays(date.toZonedDateTime("UTC"), Temporal.Now.instant().toZonedDateTimeISO("UTC"), "UTC", locale);
+        return jsx("p", { className: cvaDateTimeSince(), children: timeSince });
+    }
+    catch (_a) {
+        return null;
+    }
+};
+
 /**
  * Component for a resizable handle element.
  *
@@ -418,4 +447,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, MultiValueTextCell, NoticeCell, NumberCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, 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.351",
+  "version": "0.0.353",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,7 +11,9 @@
     "@trackunit/react-form-components": "*",
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/date-and-time-utils": "*",
-    "react": "^18.2.0"
+    "@trackunit/shared-utils": "*",
+    "react": "^18.2.0",
+    "@js-temporal/polyfill": "^0.4.4"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/components/PlainDateCell/PlainDateCell.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { Temporal } from "@js-temporal/polyfill";
+import { CommonProps } from "@trackunit/react-components";
+export interface PlainDateCellProps extends CommonProps {
+    /**
+     * The PlainDate to render.
+     * If not provided, the component will not render.
+     */
+    date?: Temporal.PlainDate;
+    /**
+     * If true, the component will render the time since the date.
+     * This is rendered on a separate line.
+     *
+     * @default true
+     */
+    withDaysSince?: boolean;
+    /**
+     * The locale to use for the date.
+     * See the formatDateUtil function for more information.
+     */
+    locale?: string;
+}
+/**
+ * PlainDateCell is used for render a date and or time in a table cell.
+ *
+ * @param {PlainDateCellProps} props - The props for the PlainDateCell component
+ * @returns {JSX.Element} PlainDateCell component
+ */
+export declare const PlainDateCell: ({ locale, date, withDaysSince, className, dataTestId }: PlainDateCellProps) => JSX.Element | null;
+export interface DaysSinceProps extends Pick<PlainDateCellProps, "date" | "locale"> {
+    date: Temporal.PlainDate;
+}

package/src/components/PlainDateCell/PlainDateCell.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Meta, StoryObj } from "@storybook/react";
+import { PlainDateCell } from "./PlainDateCell";
+import "./PlainDateCell.variants";
+type Story = StoryObj<typeof PlainDateCell>;
+declare const meta: Meta<typeof PlainDateCell>;
+export default meta;
+export declare const packageName: () => JSX.Element;
+export declare const Default: Story;
+export declare const Variants: () => JSX.Element;

package/src/components/PlainDateCell/PlainDateCell.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaPlainDateCell: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaDateTime: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaDateTimeSince: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/LinkCell/LinkCell";
 export * from "./components/MultiValueTextCell/MultiValueTextCell";
 export * from "./components/NoticeCell/NoticeCell";
 export * from "./components/NumberCell/NumberCell";
+export * from "./components/PlainDateCell/PlainDateCell";
 export * from "./components/ResizeHandle";
 export * from "./components/SortIndicator";
 export * from "./components/TableRoot";