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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,6 +11,7 @@
     "@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/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;