@trackunit/react-table-base-components 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,8 +8,10 @@
   },
   "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/ui-design-tokens": "0.0.77",
     "react": "18.2.0"
   },
   "module": "./index.esm.js",

package/src/components/DateTimeCell/DateTimeCell.d.ts

@@ -0,0 +1,42 @@
+import { TemporalFormat } from "@trackunit/date-and-time-utils";
+import { CommonProps } from "@trackunit/react-components";
+export interface DateTimeCellProps extends CommonProps {
+    /**
+     * The date to render.
+     * If not provided, the component will not render.
+     */
+    date?: Date;
+    /**
+     * If true, the component will render the time since the date.
+     * This is rendered on a separate line.
+     *
+     * @default true
+     */
+    withTimeSince?: boolean;
+    /**
+     * The format to use for the date.
+     * If not provided, the component will use the default format.
+     * See the formatDateUtil function for more information.
+     */
+    format?: TemporalFormat;
+    /**
+     * The time zone to use for the date.
+     * See the formatDateUtil function for more information.
+     */
+    timeZone?: string;
+    /**
+     * The locale to use for the date.
+     * See the formatDateUtil function for more information.
+     */
+    locale?: string;
+}
+/**
+ * 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
+ */
+export declare const DateTimeCell: ({ format, timeZone, locale, date, withTimeSince, className, dataTestId, }: DateTimeCellProps) => JSX.Element | null;
+export interface TimeSinceProps extends Pick<DateTimeCellProps, "date" | "timeZone" | "locale"> {
+    date: Date;
+}

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

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

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

@@ -0,0 +1,3 @@
+export declare const cvaDateTimeCell: (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/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;