@trackunit/react-table-base-components 0.0.19 → 0.0.21

package/index.cjs.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactFormComponents = require('@trackunit/react-form-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
+var react = require('react');
 
 const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
 
@@ -205,6 +206,24 @@ const Td = (_a) => {
 };
 const cvaTd = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
 
+const cvaTextCell = cssClassVarianceUtilities.cvaMerge(["truncate"]);
+const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
+
+/**
+ * The `<TextCell>` component is used for displaying text in a table cell.
+ * The text is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {TextCellProps} props - The props for the TextCell component
+ * @returns {JSX.Element} TextCell component
+ */
+const TextCell = ({ content = "", className, dataTestId }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content, className: cvaTextCellTooltip(), children: jsxRuntime.jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaTextCell({ className }), "data-testid": dataTestId, children: content }) }));
+};
+
 /**
  * The Tfoot is a wrapper for the tfoot html element.
  * It is used to render a table, and adds some default styling.
@@ -304,6 +323,7 @@ exports.TableRoot = TableRoot;
 exports.TagsCell = TagsCell;
 exports.Tbody = Tbody;
 exports.Td = Td;
+exports.TextCell = TextCell;
 exports.Tfoot = Tfoot;
 exports.Th = Th;
 exports.Thead = Thead;

package/index.esm.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import { ExternalLink, Tag } from '@trackunit/react-components';
+import { ExternalLink, Tag, Tooltip } from '@trackunit/react-components';
+import { useState } from 'react';
 
 const cvaCheckboxCell = cvaMerge([""]);
 
@@ -201,6 +202,24 @@ const Td = (_a) => {
 };
 const cvaTd = cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
 
+const cvaTextCell = cvaMerge(["truncate"]);
+const cvaTextCellTooltip = cvaMerge(["grid"]);
+
+/**
+ * The `<TextCell>` component is used for displaying text in a table cell.
+ * The text is not editable and will be truncated if the cell is too narrow.
+ *
+ * @param {TextCellProps} props - The props for the TextCell component
+ * @returns {JSX.Element} TextCell component
+ */
+const TextCell = ({ content = "", className, dataTestId }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const updateTooltipVisibility = (element) => {
+        setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
+    };
+    return (jsx(Tooltip, { disabled: !isTooltipVisible, label: content, className: cvaTextCellTooltip(), children: jsx("span", { ref: elementRef => updateTooltipVisibility(elementRef), className: cvaTextCell({ className }), "data-testid": dataTestId, children: content }) }));
+};
+
 /**
  * The Tfoot is a wrapper for the tfoot html element.
  * It is used to render a table, and adds some default styling.
@@ -292,4 +311,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { CheckboxCell, LinkCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, LinkCell, 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.19",
+  "version": "0.0.21",
   "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.161",
-    "@trackunit/react-form-components": "0.0.147",
+    "@trackunit/react-components": "0.1.162",
+    "@trackunit/react-form-components": "0.0.148",
+    "@trackunit/ui-design-tokens": "0.0.77",
     "react": "18.2.0"
   },
   "module": "./index.esm.js",

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

@@ -0,0 +1,21 @@
+import { CommonProps } from "@trackunit/react-components";
+export interface ImageCellProps extends CommonProps {
+    imageUrl: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    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/ImageCell/ImageCell.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from "@storybook/react";
+type Story = StoryObj<typeof Image>;
+declare const meta: Meta<typeof Image>;
+export default meta;
+export declare const Default: Story;

package/src/components/IndicatorCell/IndicatorCell.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { IndicatorProps } from "@trackunit/react-components";
+import { ThemeColors } from "@trackunit/ui-design-tokens";
+export interface IndicatorCellProps extends IndicatorProps, React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * The icon to be rendered inside the indicator component
+     */
+    icon: JSX.Element;
+    /**
+     * A color token used to style the icon and the icon background
+     */
+    color?: ThemeColors;
+    /**
+     * A text label to be displayed next to the indicator
+     */
+    label?: string;
+    /**
+     * A boolean parameter to display or hide icon background, default value is true
+     */
+    withBackground?: boolean;
+    /**
+     * A boolean parameter to display or hide label and instead show as html title on hover, default value is true
+     */
+    withLabel?: boolean;
+    /**
+     * A boolean parameter to make the indicator ping thus drawing more attention, default value is false
+     */
+    ping?: boolean;
+}
+/**
+ * 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
+ */
+export declare const IndicatorCell: ({ ...rest }: IndicatorCellProps) => JSX.Element;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { IndicatorCell } from "./IndicatorCell";
+type Story = StoryObj<typeof IndicatorCell>;
+declare const meta: Meta<typeof IndicatorCell>;
+export default meta;
+export declare const Default: Story;

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

@@ -0,0 +1,16 @@
+import { CommonProps } from "@trackunit/react-components";
+export interface NumberCellProps extends CommonProps {
+    value: string | number;
+    unit?: string | undefined;
+}
+/**
+ * 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/components/NumberCell/NumberCell.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { NumberCell } from "./NumberCell";
+import "./NumberCell.variants";
+type Story = StoryObj<typeof NumberCell>;
+declare const meta: Meta<typeof NumberCell>;
+export default meta;
+export declare const Default: Story;

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

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

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

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

package/src/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/TableRoot";
 export * from "./components/TagsCell/TagsCell";
 export * from "./components/Tbody";
 export * from "./components/Td";
+export * from "./components/TextCell/TextCell";
 export * from "./components/Tfoot";
 export * from "./components/Th";
 export * from "./components/Thead";