@trackunit/react-table-base-components 0.0.1-alpha-b0920fa0dd.0 → 0.0.1

package/index.cjs.js

@@ -3,7 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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');
+
+const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
+
+/**
+ * CheckboxCell is used for render a checkbox in a table cell-
+ * The checkbox is not editable.
+ *
+ * @param {CheckboxCellProps} props - The props for the CheckboxCell component
+ * @returns {JSX.Element} CheckboxCell component
+ */
+const CheckboxCell = ({ checked, className, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { readOnly: true, checked: checked }) }));
+};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -32,6 +47,21 @@ function __rest(s, e) {
     return t;
 }
 
+/**
+ * The LinkCell is used for render a list of tags in a table cell
+ *
+ * @param {LinkCellProps} props - The props for the LinkCell component
+ * @returns {JSX.Element} LinkCell component
+ */
+const LinkCell = (_a) => {
+    var { link, type } = _a, rest = __rest(_a, ["link", "type"]);
+    const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
+    const handleClick = (event) => {
+        event.stopPropagation();
+    };
+    return (jsxRuntime.jsx(reactComponents.ExternalLink, Object.assign({ href: `${linkPrefix}${link}` }, rest, { onClick: handleClick, children: link })));
+};
+
 /**
  * Component for a resizable handle element.
  *
@@ -125,6 +155,18 @@ const TableRoot = (_a) => {
 };
 const cvaTableRoot = cssClassVarianceUtilities.cvaMerge(["border-spacing-0", "min-w-full"]);
 
+const cvaTagsCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
+
+/**
+ * The TagsCell is used for render a list of tags in a table cell
+ *
+ * @param {TagsCellProps} props - The props for the TagsCell component
+ * @returns {JSX.Element} TagsCell component
+ */
+const TagsCell = ({ className, tags, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, children: tags.map((tag, index) => (jsxRuntime.jsx(reactComponents.Tag, { color: "primary", dataTestId: `${dataTestId}-${index}`, children: tag }, index))) }));
+};
+
 /**
  * The Tbody is a wrapper for the tbody html element.
  * It is used to render a table, and adds some default styling.
@@ -247,9 +289,12 @@ const cvaTr = cssClassVarianceUtilities.cvaMerge(["border-b", "border-neutral-30
     },
 });
 
+exports.CheckboxCell = CheckboxCell;
+exports.LinkCell = LinkCell;
 exports.ResizeHandel = ResizeHandel;
 exports.SortIndicator = SortIndicator;
 exports.TableRoot = TableRoot;
+exports.TagsCell = TagsCell;
 exports.Tbody = Tbody;
 exports.Td = Td;
 exports.Tfoot = Tfoot;

package/index.esm.js

@@ -1,5 +1,20 @@
 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';
+
+const cvaCheckboxCell = cvaMerge([""]);
+
+/**
+ * CheckboxCell is used for render a checkbox in a table cell-
+ * The checkbox is not editable.
+ *
+ * @param {CheckboxCellProps} props - The props for the CheckboxCell component
+ * @returns {JSX.Element} CheckboxCell component
+ */
+const CheckboxCell = ({ checked, className, dataTestId }) => {
+    return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, { readOnly: true, checked: checked }) }));
+};
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -28,6 +43,21 @@ function __rest(s, e) {
     return t;
 }
 
+/**
+ * The LinkCell is used for render a list of tags in a table cell
+ *
+ * @param {LinkCellProps} props - The props for the LinkCell component
+ * @returns {JSX.Element} LinkCell component
+ */
+const LinkCell = (_a) => {
+    var { link, type } = _a, rest = __rest(_a, ["link", "type"]);
+    const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
+    const handleClick = (event) => {
+        event.stopPropagation();
+    };
+    return (jsx(ExternalLink, Object.assign({ href: `${linkPrefix}${link}` }, rest, { onClick: handleClick, children: link })));
+};
+
 /**
  * Component for a resizable handle element.
  *
@@ -121,6 +151,18 @@ const TableRoot = (_a) => {
 };
 const cvaTableRoot = cvaMerge(["border-spacing-0", "min-w-full"]);
 
+const cvaTagsCell = cvaMerge(["flex", "gap-2"]);
+
+/**
+ * The TagsCell is used for render a list of tags in a table cell
+ *
+ * @param {TagsCellProps} props - The props for the TagsCell component
+ * @returns {JSX.Element} TagsCell component
+ */
+const TagsCell = ({ className, tags, dataTestId }) => {
+    return (jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, children: tags.map((tag, index) => (jsx(Tag, { color: "primary", dataTestId: `${dataTestId}-${index}`, children: tag }, index))) }));
+};
+
 /**
  * The Tbody is a wrapper for the tbody html element.
  * It is used to render a table, and adds some default styling.
@@ -243,4 +285,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { ResizeHandel, SortIndicator, TableRoot, Tbody, Td, Tfoot, Th, Thead, Tr };
+export { CheckboxCell, LinkCell, ResizeHandel, SortIndicator, TableRoot, TagsCell, Tbody, Td, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "0.0.1-alpha-b0920fa0dd.0",
+  "version": "0.0.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "0.0.13-alpha-b0920fa0dd.0",
-    "@trackunit/react-components": "0.1.151-alpha-b0920fa0dd.0",
+    "@trackunit/css-class-variance-utilities": "0.0.12",
+    "@trackunit/react-components": "0.1.152",
+    "@trackunit/react-form-components": "0.0.130",
     "react": "18.2.0"
   },
   "module": "./index.esm.js",

package/src/components/CheckboxCell/CheckboxCell.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export interface CheckboxCellProps extends CommonProps {
+    checked: boolean;
+}
+/**
+ * CheckboxCell is used for render a checkbox in a table cell-
+ * The checkbox is not editable.
+ *
+ * @param {CheckboxCellProps} props - The props for the CheckboxCell component
+ * @returns {JSX.Element} CheckboxCell component
+ */
+export declare const CheckboxCell: ({ checked, className, dataTestId }: CheckboxCellProps) => JSX.Element;

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

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

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

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

package/src/components/LinkCell/LinkCell.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export interface LinkCellProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Type of link to render
+     */
+    type: "LINK" | "PHONE" | "EMAIL";
+    /**
+     * The link to render
+     */
+    link: string;
+}
+/**
+ * The LinkCell is used for render a list of tags in a table cell
+ *
+ * @param {LinkCellProps} props - The props for the LinkCell component
+ * @returns {JSX.Element} LinkCell component
+ */
+export declare const LinkCell: ({ link, type, ...rest }: LinkCellProps) => JSX.Element;

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

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

package/src/components/TagsCell/TagsCell.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export interface TagsCellProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * A id that can be used in tests to get the component
+     */
+    dataTestId?: string;
+    /**
+     * Custom classNames that will be merged with the default classNames.
+     */
+    className?: string;
+    /**
+     * Array of tags that the component should show.
+     */
+    tags: string[];
+}
+/**
+ * The TagsCell is used for render a list of tags in a table cell
+ *
+ * @param {TagsCellProps} props - The props for the TagsCell component
+ * @returns {JSX.Element} TagsCell component
+ */
+export declare const TagsCell: ({ className, tags, dataTestId }: TagsCellProps) => JSX.Element;

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

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

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

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

package/src/index.d.ts

@@ -1,6 +1,9 @@
+export * from "./components/CheckboxCell/CheckboxCell";
+export * from "./components/LinkCell/LinkCell";
 export * from "./components/ResizeHandel";
 export * from "./components/SortIndicator";
 export * from "./components/TableRoot";
+export * from "./components/TagsCell/TagsCell";
 export * from "./components/Tbody";
 export * from "./components/Td";
 export * from "./components/Tfoot";