@trackunit/react-compound-components 1.6.92 → 1.7.4

package/index.cjs.js

@@ -250,6 +250,122 @@ const ImageCollection = (props) => {
                 }, ref: fileInputRef, type: "file" })] }));
 };
 
+const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge(["rounded-lg", "border", "border-neutral-200", "bg-white", "w-full"], {
+    variants: {
+        disabled: {
+            true: [],
+            false: "",
+        },
+        clickable: {
+            true: ["cursor-pointer"],
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: true,
+            clickable: true,
+            class: "cursor-not-allowed",
+        },
+        {
+            disabled: false,
+            clickable: true,
+            class: "focus:ring-primary-600 focus:border-primary-600 focus:outline-none focus:ring-1",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        clickable: false,
+    },
+});
+const cvaInputCard = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "p-4"], {
+    variants: {
+        disabled: {
+            true: "bg-neutral-50",
+            false: "",
+        },
+        checked: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: true,
+            class: "bg-primary-50",
+        },
+        {
+            disabled: false,
+            checked: false,
+            class: "bg-neutral-50",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});
+const cvaTitleCard = cssClassVarianceUtilities.cvaMerge(["min-w-0", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
+    variants: {
+        disabled: {
+            true: "text-neutral-400",
+            false: "text-neutral-900",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+const cvaDescriptionCard = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        disabled: {
+            true: "text-neutral-400",
+            false: "text-neutral-600",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+const cvaIconBackground = cssClassVarianceUtilities.cvaMerge(["flex", "h-8", "w-8", "items-center", "justify-center", "rounded-md"], {
+    variants: {
+        disabled: {
+            true: "bg-neutral-200",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+
+/**
+ * PreferenceCard is a flexible component for displaying add-ons or settings configuration options
+ * with various states and visual treatments.
+ * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
+ */
+const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag, disabled = false, loading = false, className, dataTestId, children, onClick, }) => {
+    const handleCardClick = react.useCallback(() => {
+        if (!disabled && !loading) {
+            if (onClick) {
+                onClick();
+            }
+            else if (input && (input.type === "checkbox" || input.type === "toggle")) {
+                input.handleInputChange(!input.checked);
+            }
+        }
+    }, [disabled, loading, onClick, input]);
+    const handleInputClick = react.useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge(cvaPreferenceCard({
+            className,
+            disabled,
+            clickable: !!(onClick || input),
+        }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxRuntime.jsxs("div", { className: "flex items-stretch divide-x divide-gray-200", children: [input ? (jsxRuntime.jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked) })) : null, input.type === "radio" ? jsxRuntime.jsx(reactFormComponents.RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxRuntime.jsxs("div", { className: "flex grow px-4 py-3", children: [loading ? (jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [11, 12], lines: 2, margin: "4px 0", width: [128, 152] }) })] })) : (jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", children: [icon ? (jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsxRuntime.jsx(reactComponents.Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx(reactComponents.Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] })), secondTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
+};
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -262,6 +378,7 @@ setupLibraryTranslations();
 exports.ConfirmationDialogContextProvider = ConfirmationDialogContextProvider;
 exports.IMAGE_ENDPOINT = IMAGE_ENDPOINT;
 exports.ImageCollection = ImageCollection;
+exports.PreferenceCard = PreferenceCard;
 exports.createOriginalUrl = createOriginalUrl;
 exports.createSrcSet = createSrcSet;
 exports.createThumbnailUrl = createThumbnailUrl;

package/index.esm.js

@@ -3,12 +3,12 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { ConfirmationDialogProvider } from '@trackunit/react-core-hooks';
 import { Modal, useModal } from '@trackunit/react-modal';
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { CardHeader, CardBody, CardFooter, Button, useViewportBreakpoints, Icon, Spinner } from '@trackunit/react-components';
+import { CardHeader, CardBody, CardFooter, Button, useViewportBreakpoints, Icon, Spinner, Tooltip, SkeletonLines, Text, Tag } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import ImageGallery from 'react-image-gallery';
 import { twMerge } from 'tailwind-merge';
 import { formatDateUtil } from '@trackunit/date-and-time-utils';
-import { DropZone } from '@trackunit/react-form-components';
+import { DropZone, Checkbox, RadioItem, ToggleSwitch } from '@trackunit/react-form-components';
 
 var defaultTranslations = {
 	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
@@ -248,6 +248,122 @@ const ImageCollection = (props) => {
                 }, ref: fileInputRef, type: "file" })] }));
 };
 
+const cvaPreferenceCard = cvaMerge(["rounded-lg", "border", "border-neutral-200", "bg-white", "w-full"], {
+    variants: {
+        disabled: {
+            true: [],
+            false: "",
+        },
+        clickable: {
+            true: ["cursor-pointer"],
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: true,
+            clickable: true,
+            class: "cursor-not-allowed",
+        },
+        {
+            disabled: false,
+            clickable: true,
+            class: "focus:ring-primary-600 focus:border-primary-600 focus:outline-none focus:ring-1",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        clickable: false,
+    },
+});
+const cvaInputCard = cvaMerge(["flex", "items-center", "p-4"], {
+    variants: {
+        disabled: {
+            true: "bg-neutral-50",
+            false: "",
+        },
+        checked: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: true,
+            class: "bg-primary-50",
+        },
+        {
+            disabled: false,
+            checked: false,
+            class: "bg-neutral-50",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});
+const cvaTitleCard = cvaMerge(["min-w-0", "overflow-hidden", "text-ellipsis", "whitespace-nowrap"], {
+    variants: {
+        disabled: {
+            true: "text-neutral-400",
+            false: "text-neutral-900",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+const cvaDescriptionCard = cvaMerge([], {
+    variants: {
+        disabled: {
+            true: "text-neutral-400",
+            false: "text-neutral-600",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+const cvaIconBackground = cvaMerge(["flex", "h-8", "w-8", "items-center", "justify-center", "rounded-md"], {
+    variants: {
+        disabled: {
+            true: "bg-neutral-200",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+
+/**
+ * PreferenceCard is a flexible component for displaying add-ons or settings configuration options
+ * with various states and visual treatments.
+ * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
+ */
+const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag, disabled = false, loading = false, className, dataTestId, children, onClick, }) => {
+    const handleCardClick = useCallback(() => {
+        if (!disabled && !loading) {
+            if (onClick) {
+                onClick();
+            }
+            else if (input && (input.type === "checkbox" || input.type === "toggle")) {
+                input.handleInputChange(!input.checked);
+            }
+        }
+    }, [disabled, loading, onClick, input]);
+    const handleInputClick = useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    return (jsxs("div", { className: twMerge(cvaPreferenceCard({
+            className,
+            disabled,
+            clickable: !!(onClick || input),
+        }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxs("div", { className: "flex items-stretch divide-x divide-gray-200", children: [input ? (jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, children: jsxs(Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsx(Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked) })) : null, input.type === "radio" ? jsx(RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsx(ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxs("div", { className: "flex grow px-4 py-3", children: [loading ? (jsxs("div", { className: "flex grow items-center gap-3", children: [jsx("div", { className: "flex-shrink-0", children: jsx(SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsx("div", { className: "min-w-0 flex-1", children: jsx(SkeletonLines, { height: [11, 12], lines: 2, margin: "4px 0", width: [128, 152] }) })] })) : (jsxs("div", { className: "flex grow items-center gap-3", children: [icon ? (jsx("div", { className: "flex-shrink-0", children: jsx("div", { className: twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsx(Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsx(Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] })), secondTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
+};
+
 /*
  * ----------------------------
  * | SETUP TRANSLATIONS START |
@@ -257,4 +373,4 @@ const ImageCollection = (props) => {
  */
 setupLibraryTranslations();
 
-export { ConfirmationDialogContextProvider, IMAGE_ENDPOINT, ImageCollection, createOriginalUrl, createSrcSet, createThumbnailUrl };
+export { ConfirmationDialogContextProvider, IMAGE_ENDPOINT, ImageCollection, PreferenceCard, createOriginalUrl, createSrcSet, createThumbnailUrl };

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@trackunit/react-compound-components",
-  "version": "1.6.92",
+  "version": "1.7.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
     "react": "19.0.0",
     "tailwind-merge": "^2.0.0",
     "react-image-gallery": "1.3.0",
-    "@trackunit/react-core-contexts-api": "1.7.64",
-    "@trackunit/react-core-hooks": "1.6.66",
-    "@trackunit/react-components": "1.8.41",
-    "@trackunit/react-modal": "1.7.24",
-    "@trackunit/css-class-variance-utilities": "1.6.62",
-    "@trackunit/date-and-time-utils": "1.6.62",
-    "@trackunit/react-form-components": "1.7.57",
-    "@trackunit/i18n-library-translation": "1.6.67",
-    "@trackunit/react-test-setup": "1.3.62"
+    "@trackunit/react-core-contexts-api": "1.8.4",
+    "@trackunit/react-core-hooks": "1.7.4",
+    "@trackunit/react-components": "1.9.4",
+    "@trackunit/react-modal": "1.8.4",
+    "@trackunit/css-class-variance-utilities": "1.7.4",
+    "@trackunit/date-and-time-utils": "1.7.4",
+    "@trackunit/react-form-components": "1.8.4",
+    "@trackunit/i18n-library-translation": "1.7.4",
+    "@trackunit/react-test-setup": "1.4.4",
+    "@trackunit/shared-utils": "1.9.4",
+    "@trackunit/ui-icons": "1.7.4"
   },
   "engines": {
     "node": ">=22.x",

package/src/PreferenceCard/PreferenceCard.d.ts

@@ -0,0 +1,72 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { CommonProps, TagProps } from "@trackunit/react-components";
+import { MappedOmit } from "@trackunit/shared-utils";
+import { IconName } from "@trackunit/ui-icons";
+import { ReactNode } from "react";
+import { cvaPreferenceCard } from "./PreferenceCard.variants";
+export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProps<typeof cvaPreferenceCard>, "className"> {
+    /**
+     * The title of the preference card
+     */
+    title: string;
+    /**
+     * The description text for the preference card
+     */
+    description: string;
+    /**
+     * The icon details to display in the card
+     */
+    icon?: {
+        name: IconName;
+        backgroundColor: string;
+    };
+    /**
+     * Input component to display in the card
+     */
+    input?: {
+        type: "checkbox" | "toggle";
+        checked: boolean;
+        handleInputChange: (checked: boolean) => void;
+        tooltipText?: string;
+    } | {
+        type: "radio";
+        checked: boolean;
+        tooltipText?: string;
+    };
+    /**
+     * First tag text next to the title - if provided, shows the tag component
+     */
+    firstTag?: {
+        title: string;
+        color: TagProps["color"];
+    };
+    /**
+     * Second tag text at the right end of the title - if provided, shows the tag component
+     */
+    secondTag?: {
+        title: string;
+        color: TagProps["color"];
+    };
+    /**
+     * Whether the card is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the card is loading
+     */
+    loading?: boolean;
+    /**
+     * Extra content to display at the bottom of the card
+     */
+    children?: ReactNode;
+    /**
+     * Click handler for the entire card
+     */
+    onClick?: () => void;
+}
+/**
+ * PreferenceCard is a flexible component for displaying add-ons or settings configuration options
+ * with various states and visual treatments.
+ * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
+ */
+export declare const PreferenceCard: ({ title, description, icon, input, firstTag, secondTag, disabled, loading, className, dataTestId, children, onClick, }: PreferenceCardProps) => ReactNode;

package/src/PreferenceCard/PreferenceCard.stories.d.ts

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

package/src/PreferenceCard/PreferenceCard.variants.d.ts

@@ -0,0 +1,17 @@
+export declare const cvaPreferenceCard: (props?: ({
+    disabled?: boolean | null | undefined;
+    clickable?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaInputCard: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaTitleCard: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaDescriptionCard: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaIconBackground: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/PreferenceCard/PreferenceCardGroup.d.ts

@@ -0,0 +1,37 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+import { PreferenceCardProps } from "./PreferenceCard";
+export interface PreferenceCardGroupProps extends CommonProps {
+    /**
+     * Loading state for when the data is loading
+     */
+    loading?: boolean;
+    /**
+     * Include your card data here to showcase multiple PreferenceCard components
+     */
+    cards: Array<PreferenceCardProps>;
+    /**
+     * The currently selected value(s)
+     */
+    selectedValue: string | Array<string>;
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange: (value: string | Array<string>) => void;
+    /**
+     * The ID for the group
+     */
+    groupId: string;
+    /**
+     * Selection mode - determines if the behavior of the group is radio, allowing one selection, or multiple for other selection types
+     */
+    isRadioMode?: boolean;
+    /**
+     * Whether the group is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * PreferenceCardGroup allows multiple PreferenceCards to work together as a group.
+ */
+export declare const PreferenceCardGroup: ({ cards, selectedValue, onSelectionChange, groupId, isRadioMode, disabled, loading, dataTestId, }: PreferenceCardGroupProps) => ReactNode;

package/src/PreferenceCard/index.d.ts

@@ -0,0 +1 @@
+export * from "./PreferenceCard";

package/src/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./ConfirmationDialog/ConfirmationDialogContextProvider";
 export * from "./ImageCollection";
+export * from "./PreferenceCard";