@trackunit/react-table-base-components 1.3.39 → 1.3.40

package/index.cjs.js

@@ -59,6 +59,52 @@ const TimeSince = ({ date, timeZone, locale }) => {
     }
 };
 
+const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm"], {
+    variants: {
+        hasThumbnail: {
+            true: "grid-cols-[min-content_1fr]",
+            false: "grid-cols-[1fr]",
+        },
+        density: {
+            default: "gap-2",
+            compact: "gap-2",
+        },
+    },
+    defaultVariants: {
+        density: "default",
+    },
+});
+const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "gap-2", "text-sm"], {
+    variants: {
+        density: {
+            default: "grid-rows-[min-content_auto]",
+            compact: "grid-cols-[min-content_auto]",
+        },
+    },
+    defaultVariants: {
+        density: "default",
+    },
+});
+const cvaIdentityCellDetails = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-500"], {
+    variants: {
+        density: {
+            default: "pt-0",
+            compact: "pt-1",
+        },
+    },
+});
+const cvaIdentityCellDetailsItem = cssClassVarianceUtilities.cvaMerge(["last:truncate"]);
+
+/**
+ * The IdentityCell is used for render an identity in a table cell
+ *
+ * @param {IdentityCellProps} props - The props for the LinkCell component
+ * @returns {ReactElement} LinkCell component
+ */
+const IdentityCell = ({ className, dataTestId = "identity-cell", density = "default", title, details = [], thumbnail, }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center pr-2", children: thumbnail }) : null, jsxRuntime.jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsxRuntime.jsx("div", { className: "flex w-full min-w-0 truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate", dataTestId: `${dataTestId}-name`, variant: "tertiary", children: title }) }), details.length > 0 && (jsxRuntime.jsx("div", { className: cvaIdentityCellDetails({ className, density }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaIdentityCellDetailsItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(reactComponents.Icon, { className: "w-4 text-neutral-200", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }))] })] }));
+};
+
 /**
  * The `<ImageCell>` component is used for displaying images in a table cell.
  *
@@ -432,6 +478,7 @@ const cvaTr = cssClassVarianceUtilities.cvaMerge(["border-b", "border-neutral-30
 exports.ButtonCell = ButtonCell;
 exports.CheckboxCell = CheckboxCell;
 exports.DateTimeCell = DateTimeCell;
+exports.IdentityCell = IdentityCell;
 exports.ImageCell = ImageCell;
 exports.IndicatorCell = IndicatorCell;
 exports.LinkCell = LinkCell;

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Icon, Indicator, ExternalLink, Tooltip, Tag, Notice } from '@trackunit/react-components';
+import { Button, Icon, Heading, Indicator, ExternalLink, Tooltip, Tag, Notice } from '@trackunit/react-components';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto, timeSinceInDays } from '@trackunit/date-and-time-utils';
-import { useState, useEffect } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 import { Temporal } from '@js-temporal/polyfill';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
@@ -57,6 +57,52 @@ const TimeSince = ({ date, timeZone, locale }) => {
     }
 };
 
+const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm"], {
+    variants: {
+        hasThumbnail: {
+            true: "grid-cols-[min-content_1fr]",
+            false: "grid-cols-[1fr]",
+        },
+        density: {
+            default: "gap-2",
+            compact: "gap-2",
+        },
+    },
+    defaultVariants: {
+        density: "default",
+    },
+});
+const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "gap-2", "text-sm"], {
+    variants: {
+        density: {
+            default: "grid-rows-[min-content_auto]",
+            compact: "grid-cols-[min-content_auto]",
+        },
+    },
+    defaultVariants: {
+        density: "default",
+    },
+});
+const cvaIdentityCellDetails = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-500"], {
+    variants: {
+        density: {
+            default: "pt-0",
+            compact: "pt-1",
+        },
+    },
+});
+const cvaIdentityCellDetailsItem = cvaMerge(["last:truncate"]);
+
+/**
+ * The IdentityCell is used for render an identity in a table cell
+ *
+ * @param {IdentityCellProps} props - The props for the LinkCell component
+ * @returns {ReactElement} LinkCell component
+ */
+const IdentityCell = ({ className, dataTestId = "identity-cell", density = "default", title, details = [], thumbnail, }) => {
+    return (jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? jsx("div", { className: "flex h-8 w-8 items-center justify-center pr-2", children: thumbnail }) : null, jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsx("div", { className: "flex w-full min-w-0 truncate text-sm", children: jsx(Heading, { className: "truncate", dataTestId: `${dataTestId}-name`, variant: "tertiary", children: title }) }), details.length > 0 && (jsx("div", { className: cvaIdentityCellDetails({ className, density }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaIdentityCellDetailsItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-200", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }))] })] }));
+};
+
 /**
  * The `<ImageCell>` component is used for displaying images in a table cell.
  *
@@ -427,4 +473,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { ButtonCell, CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { ButtonCell, CheckboxCell, DateTimeCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, MultiRowTableCell, 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": "1.3.39",
+  "version": "1.3.40",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,12 +9,12 @@
   "dependencies": {
     "react": "19.0.0",
     "@js-temporal/polyfill": "^0.4.4",
-    "@trackunit/react-components": "1.4.33",
-    "@trackunit/ui-icons": "1.3.32",
-    "@trackunit/react-form-components": "1.3.39",
-    "@trackunit/css-class-variance-utilities": "1.3.32",
-    "@trackunit/date-and-time-utils": "1.3.32",
-    "@trackunit/shared-utils": "1.5.32"
+    "@trackunit/react-components": "1.4.34",
+    "@trackunit/ui-icons": "1.3.33",
+    "@trackunit/react-form-components": "1.3.40",
+    "@trackunit/css-class-variance-utilities": "1.3.33",
+    "@trackunit/date-and-time-utils": "1.3.33",
+    "@trackunit/shared-utils": "1.5.33"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/IdentityCell/IdentityCell.d.ts

@@ -0,0 +1,17 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactElement, ReactNode } from "react";
+export interface IdentityCellProps extends CommonProps {
+    className?: string;
+    dataTestId?: string;
+    density?: "compact" | "default";
+    title?: string;
+    details?: string[];
+    thumbnail?: ReactNode;
+}
+/**
+ * The IdentityCell is used for render an identity in a table cell
+ *
+ * @param {IdentityCellProps} props - The props for the LinkCell component
+ * @returns {ReactElement} LinkCell component
+ */
+export declare const IdentityCell: ({ className, dataTestId, density, title, details, thumbnail, }: IdentityCellProps) => ReactElement;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { IdentityCell } from "./IdentityCell";
+type Story = StoryObj<typeof IdentityCell>;
+declare const meta: Meta<typeof IdentityCell>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: Story;

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

@@ -0,0 +1,11 @@
+export declare const cvaIdentityCell: (props?: ({
+    hasThumbnail?: boolean | null | undefined;
+    density?: "default" | "compact" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaIdentityCellLayout: (props?: ({
+    density?: "default" | "compact" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaIdentityCellDetails: (props?: ({
+    density?: "default" | "compact" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaIdentityCellDetailsItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/ButtonCell/ButtonCell";
 export * from "./components/CheckboxCell/CheckboxCell";
 export * from "./components/DateTimeCell/DateTimeCell";
+export * from "./components/IdentityCell/IdentityCell";
 export * from "./components/ImageCell/ImageCell";
 export * from "./components/IndicatorCell/IndicatorCell";
 export * from "./components/LinkCell/LinkCell";