@trackunit/react-table-base-components 0.0.158 → 0.0.160

package/index.cjs.js

@@ -162,6 +162,74 @@ const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge(["absolute", "cursor-
     },
 });
 
+const cvaSiteCellWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "items-center", "gap-2", "overflow-hidden"]);
+const cvaSiteCellTooltip = cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+
+const cvaSiteIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "rounded-full", "p-[2px]"], {
+    variants: {
+        type: {
+            AREA: "bg-site-AREA",
+            CONSTRUCTION_SITE: "bg-site-CONSTRUCTION_SITE",
+            DEPOT: "bg-site-DEPOT",
+            WORK_PLACE: "bg-site-WORK_PLACE",
+            CLASSIC_POI: "bg-site-CLASSIC_POI",
+            CLASSIC_ZONE: "bg-site-CLASSIC_ZONE",
+            UNKNOWN: "bg-site-UNKNOWN",
+        },
+        shape: {
+            round: "rounded-full",
+            square: "rounded-md",
+        },
+    },
+    defaultVariants: {
+        type: "UNKNOWN",
+        shape: "square",
+    },
+});
+
+/**
+ * The `<SiteIcon>` component is used for displaying the site icon with a tooltip for the type.
+ *
+ * @param {SiteIconProps} props - The props for the SiteCell component
+ * @returns {JSX.Element} SiteCell component
+ */
+const SiteIcon = ({ size = "medium", type, shape, className, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaSiteIconContainer({ type, shape, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(type), size: size, color: "white" }) }));
+};
+const getIconName = (type) => {
+    switch (type) {
+        case "CONSTRUCTION_SITE":
+            return "ConstructionCone";
+        case "WORK_PLACE":
+            return "Home";
+        case "DEPOT":
+            return "BuildingOffice";
+        case "AREA":
+            return "Map";
+        case "CLASSIC_ZONE":
+        case "CLASSIC_POI":
+            return "Zone";
+        default:
+            return "QuestionMarkCircle";
+    }
+};
+
+/**
+ * The `<SiteCell>` component is used for displaying the sites in a table cell.
+ * The site name is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {SiteCellProps} props - The props for the SiteCell component
+ * @returns {JSX.Element} SiteCell component
+ */
+const SiteCell = ({ count, sites, dataTestId, className }) => {
+    var _a, _b, _c, _d, _e;
+    const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return count > 0 ? (jsxRuntime.jsxs("div", { className: cvaSiteCellWrapper({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(SiteIcon, { size: "small", type: (_a = sites[0]) === null || _a === void 0 ? void 0 : _a.type }), jsxRuntime.jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaSiteCellTooltip(), children: jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: (_c = (_b = sites[0]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : "", placement: "bottom", className: "inline", children: (_e = (_d = sites[0]) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : "" }) }), jsxRuntime.jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
+};
+
 /**
  * The SortIndicator is used in the table header to indicate the current sort order of the column.
  * This is a visual only component and does not handle the sorting logic.
@@ -388,6 +456,8 @@ exports.IndicatorCell = IndicatorCell;
 exports.LinkCell = LinkCell;
 exports.NumberCell = NumberCell;
 exports.ResizeHandle = ResizeHandle;
+exports.SiteCell = SiteCell;
+exports.SiteIcon = SiteIcon;
 exports.SortIndicator = SortIndicator;
 exports.TableRoot = TableRoot;
 exports.TagsCell = TagsCell;

package/index.esm.js

@@ -2,7 +2,7 @@ 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 { Indicator, ExternalLink, Tag, Tooltip } from '@trackunit/react-components';
+import { Indicator, ExternalLink, Icon, Tooltip, Tag } from '@trackunit/react-components';
 import { useState } from 'react';
 
 const cvaCheckboxCell = cvaMerge([""]);
@@ -158,6 +158,74 @@ const cvaResizeHandel = cvaMerge(["absolute", "cursor-col-resize", "right-0", "t
     },
 });
 
+const cvaSiteCellWrapper = cvaMerge(["flex", "flex-row", "items-center", "gap-2", "overflow-hidden"]);
+const cvaSiteCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+
+const cvaSiteIconContainer = cvaMerge(["flex", "rounded-full", "p-[2px]"], {
+    variants: {
+        type: {
+            AREA: "bg-site-AREA",
+            CONSTRUCTION_SITE: "bg-site-CONSTRUCTION_SITE",
+            DEPOT: "bg-site-DEPOT",
+            WORK_PLACE: "bg-site-WORK_PLACE",
+            CLASSIC_POI: "bg-site-CLASSIC_POI",
+            CLASSIC_ZONE: "bg-site-CLASSIC_ZONE",
+            UNKNOWN: "bg-site-UNKNOWN",
+        },
+        shape: {
+            round: "rounded-full",
+            square: "rounded-md",
+        },
+    },
+    defaultVariants: {
+        type: "UNKNOWN",
+        shape: "square",
+    },
+});
+
+/**
+ * The `<SiteIcon>` component is used for displaying the site icon with a tooltip for the type.
+ *
+ * @param {SiteIconProps} props - The props for the SiteCell component
+ * @returns {JSX.Element} SiteCell component
+ */
+const SiteIcon = ({ size = "medium", type, shape, className, dataTestId }) => {
+    return (jsx("div", { className: cvaSiteIconContainer({ type, shape, className }), "data-testid": dataTestId, children: jsx(Icon, { name: getIconName(type), size: size, color: "white" }) }));
+};
+const getIconName = (type) => {
+    switch (type) {
+        case "CONSTRUCTION_SITE":
+            return "ConstructionCone";
+        case "WORK_PLACE":
+            return "Home";
+        case "DEPOT":
+            return "BuildingOffice";
+        case "AREA":
+            return "Map";
+        case "CLASSIC_ZONE":
+        case "CLASSIC_POI":
+            return "Zone";
+        default:
+            return "QuestionMarkCircle";
+    }
+};
+
+/**
+ * The `<SiteCell>` component is used for displaying the sites in a table cell.
+ * The site name is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {SiteCellProps} props - The props for the SiteCell component
+ * @returns {JSX.Element} SiteCell component
+ */
+const SiteCell = ({ count, sites, dataTestId, className }) => {
+    var _a, _b, _c, _d, _e;
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return count > 0 ? (jsxs("div", { className: cvaSiteCellWrapper({ className }), "data-testid": dataTestId, children: [jsx(SiteIcon, { size: "small", type: (_a = sites[0]) === null || _a === void 0 ? void 0 : _a.type }), jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaSiteCellTooltip(), children: jsx(Tooltip, { disabled: !isTooltipVisible, label: (_c = (_b = sites[0]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : "", placement: "bottom", className: "inline", children: (_e = (_d = sites[0]) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : "" }) }), jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
+};
+
 /**
  * The SortIndicator is used in the table header to indicate the current sort order of the column.
  * This is a visual only component and does not handle the sorting logic.
@@ -377,4 +445,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, NumberCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, DateTimeCell, ImageCell, IndicatorCell, LinkCell, NumberCell, ResizeHandle, SiteCell, SiteIcon, 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.158",
+  "version": "0.0.160",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/SiteCell/SiteCell.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export type CellSiteType = "AREA" | "CLASSIC_POI" | "CLASSIC_ZONE" | "CONSTRUCTION_SITE" | "DEPOT" | "WORK_PLACE";
+type CellSite = {
+    name?: string | null;
+    type?: CellSiteType;
+};
+export interface SiteCellProps extends CommonProps {
+    sites: CellSite[];
+    count: number;
+}
+/**
+ * The `<SiteCell>` component is used for displaying the sites in a table cell.
+ * The site name is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {SiteCellProps} props - The props for the SiteCell component
+ * @returns {JSX.Element} SiteCell component
+ */
+export declare const SiteCell: ({ count, sites, dataTestId, className }: SiteCellProps) => JSX.Element | null;
+export {};

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

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

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

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

package/src/components/SiteCell/SiteIcon/SiteIcon.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { CommonProps, Size } from "@trackunit/react-components";
+import { CellSiteType } from "../SiteCell";
+type SiteType = CellSiteType;
+type Shape = "round" | "square";
+export interface SiteIconProps extends CommonProps {
+    type?: SiteType;
+    size?: Size;
+    shape?: Shape;
+}
+/**
+ * The `<SiteIcon>` component is used for displaying the site icon with a tooltip for the type.
+ *
+ * @param {SiteIconProps} props - The props for the SiteCell component
+ * @returns {JSX.Element} SiteCell component
+ */
+export declare const SiteIcon: ({ size, type, shape, className, dataTestId }: SiteIconProps) => JSX.Element;
+export {};

package/src/components/SiteCell/SiteIcon/SiteIcon.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaSiteIconContainer: (props?: ({
+    type?: "AREA" | "CONSTRUCTION_SITE" | "DEPOT" | "WORK_PLACE" | "CLASSIC_POI" | "CLASSIC_ZONE" | "UNKNOWN" | null | undefined;
+    shape?: "round" | "square" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/index.d.ts

@@ -5,6 +5,8 @@ export * from "./components/IndicatorCell/IndicatorCell";
 export * from "./components/LinkCell/LinkCell";
 export * from "./components/NumberCell/NumberCell";
 export * from "./components/ResizeHandle";
+export * from "./components/SiteCell/SiteCell";
+export * from "./components/SiteCell/SiteIcon/SiteIcon";
 export * from "./components/SortIndicator";
 export * from "./components/TableRoot";
 export * from "./components/TagsCell/TagsCell";