@agilant/toga-blox 1.0.92 → 1.0.94

package/dist/components/BaseInput/components/DropDownIndicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ArrowDownIcon = ({ className }) => (_jsx("div", { className: "pr-2", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "8", viewBox: "0 0 14 8", fill: "none", className: className, children: _jsx("path", { d: "M1.41469 1.03648L1.41467 1.0365L1.41749 1.03925L6.76749 6.26425L7.0015 6.4928L7.23442 6.26314L12.5844 0.988141L12.5844 0.988147L12.5861 0.986484C12.6809 0.891658 12.8199 0.891659 12.9147 0.986483C13.0092 1.08103 13.0095 1.21943 12.9155 1.31424C12.9152 1.31452 12.915 1.3148 12.9147 1.31508L7.16676 6.96302L7.16676 6.96301L7.16469 6.96508C7.06838 7.06139 7.02352 7.06745 7.00039 7.06745C6.94147 7.06745 6.89042 7.05301 6.82064 6.99988L1.08526 1.36425C0.991268 1.26944 0.991545 1.13103 1.08609 1.03648C1.18092 0.941658 1.31986 0.941658 1.41469 1.03648Z", fill: "currentColor" // Use currentColor to apply the color from the class
+            , stroke: "currentColor" // Use currentColor to apply the color from the class
+            , strokeWidth: "0.666667" }) }) }));
+export default ArrowDownIcon;

package/dist/components/BaseInput/components/MultiValueRemove.d.ts

@@ -0,0 +1,4 @@
+import { MultiValueProps } from "react-select";
+import { OptionType } from "../BaseInput.types";
+declare const MultiValueRemove: (props: MultiValueProps<OptionType>) => import("react/jsx-runtime").JSX.Element;
+export default MultiValueRemove;

package/dist/components/BaseInput/components/MultiValueRemove.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components as defaultComponents } from "react-select";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+const MultiValueRemove = (props) => {
+    return (_jsx(defaultComponents.MultiValueRemove, { ...props, children: _jsx("div", { className: "flex text-white text-xs pl-2 items-center", children: getFontAwesomeIcon("xmark", "regular") }) }));
+};
+export default MultiValueRemove;

package/dist/components/BaseInput/components/Option.d.ts

@@ -0,0 +1,2 @@
+declare const Option: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default Option;

package/dist/components/BaseInput/components/Option.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
+const Option = (props) => {
+    if (props.isMulti) {
+        return (_jsx(components.Option, { ...props, children: _jsxs("div", { className: "py-1 border-b border-slate-200 hover:bg-supply-blue-50", children: [_jsx("input", { type: "checkbox", checked: props.isSelected, className: "sr-only", id: `checkbox-${props.data.name}`, onChange: () => null }), _jsxs("label", { className: "pl-2 flex items-center", htmlFor: `checkbox-${props.data.name}`, children: [_jsx("span", { className: `rounded border text-xs ${props.isSelected
+                                    ? "bg-supply-blue-400"
+                                    : "bg-white"} w-5 h-5 inline-block mr-2 relative p-0`, children: props.isSelected && (_jsx("div", { className: "absolute w-3 h-3 fill-current text-white top-[3px] left-[3px]", children: getFontAwesomeIcon("check", "solid") })) }), props.data.name] })] }) }));
+    }
+    else if (Array.isArray(props.data.name)) {
+        let firstValue = props.data.name[0];
+        let secondValue = props.data.name[1];
+        return (_jsx(components.Option, { ...props, children: _jsxs("div", { className: "border-b border-slate-200 hover:bg-supply-blue-50", children: [_jsx("input", { type: "", checked: props.isSelected, className: "sr-only", id: `${props.value}`, onChange: () => null }), props.isSelected ? (_jsxs("label", { className: "flex items-center py-1 px-2", htmlFor: `${props.value}`, children: [_jsx("div", { className: "flex items-start pr-2.5", children: _jsx("div", { className: "w-3 h-3 fill-current text-supply-blue-400", children: getFontAwesomeIcon("check", "solid") }) }), _jsxs("div", { className: "flex flex-col py-1", children: [_jsx("div", { className: "", children: firstValue }), _jsx("div", { className: "text-navy-350", children: secondValue })] })] })) : (_jsx("label", { className: "pl-2 flex items-center py-1 px-4", htmlFor: `${props.value}`, children: _jsxs("div", { className: "flex flex-col py-1", children: [_jsx("div", { className: "", children: firstValue }), _jsx("div", { className: "text-navy-350", children: secondValue })] }) }))] }) }));
+    }
+    else {
+        return (_jsx(components.Option, { ...props, children: _jsxs("div", { className: "border-b border-slate-200 hover:bg-supply-blue-50", children: [_jsx("input", { type: "", checked: props.isSelected, className: "sr-only", id: `${props.value}`, onChange: () => null }), props.isSelected ? (_jsxs("label", { className: "relative pl-8 flex items-center py-1 px-4", htmlFor: `${props.value}`, children: [_jsx("div", { className: "absolute w-3 h-3 fill-current text-supply-blue-400 top-[5px] left-[5px]", children: getFontAwesomeIcon("check", "solid") }), props.label] })) : (_jsx("label", { className: "pl-2 flex items-center py-1 px-4", htmlFor: `${props.value}`, children: props.label }))] }) }));
+    }
+};
+export default Option;

package/dist/components/BaseInput/components/SingleValue.d.ts

@@ -0,0 +1,4 @@
+import { SingleValueProps } from "react-select";
+import { OptionType } from "../BaseInput.types";
+declare const SingleValue: (props: SingleValueProps<OptionType, false>) => import("react/jsx-runtime").JSX.Element;
+export default SingleValue;

package/dist/components/BaseInput/components/SingleValue.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { components } from "react-select";
+const SingleValue = (props) => {
+    const { data } = props;
+    if (Array.isArray(data.name)) {
+        let firstValue = data.name[0];
+        let secondValue = data.name[1];
+        return (_jsx(components.SingleValue, { ...props, children: _jsxs("div", { className: "flex flex-col py-1", children: [_jsx("div", { className: "max-w-14", children: firstValue }), data.name.length > 1 && (_jsx("div", { className: "text-navy-350", children: secondValue }))] }) }));
+    }
+    else {
+        return (_jsx(components.SingleValue, { ...props, children: _jsx("div", { className: "flex items-center py-1", children: data.name }) }));
+    }
+};
+export default SingleValue;

package/dist/components/SearchInput/SearchInput.js

@@ -19,13 +19,13 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
                 case "text":
                     return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily, 
                         //will remove the filter options from the badge shown in the input
-                        removePattern: removePattern }));
+                        removePattern: removePattern, textHighlight: textHighlight }));
                 case "number":
                     return (_jsx(SearchNumberInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor }));
                 case "multiSelect":
                     return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean }));
                 case "date":
-                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern }));
+                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp }));
                 default:
                     return null;
             }

package/dist/components/SearchInput/SearchInput.stories.js

@@ -39,10 +39,6 @@ export default {
     },
     parameters: { layout: "centered" },
 };
-/**
- * Our 'Template' sets up local state for everything,
- * so the SearchInput can function (adding/removing badges, toggling date range, etc.)
- */
 const Template = (args) => {
     const [selectedOption, setSelectedOption] = useState(args.selectedDropdownOption);
     const [searchItems, setSearchItems] = useState([]);

package/dist/components/ToggleButton/ToggleButton.js

@@ -8,8 +8,8 @@ const textPositionMap = {
 };
 const getToggleClasses = (status, smallToggle, borderStyle, activeColorBorder, inactiveColorBorder, activeColorBackground, inactiveColorBackground) => {
     const baseClasses = "peer rounded-full border";
-    const borderToggleClasses = "after:absolute after:left-[4px] after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-navy-300 after:transition-all after:content-['']";
-    const borderToggleCircleClasses = "peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-supply-blue-500";
+    const borderToggleClasses = "after:absolute after:left-[4px] after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-blue-300 after:transition-all after:content-['']";
+    const borderToggleCircleClasses = "peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-blue-500";
     const smallBackgroundToggleClasses = "after:absolute after:left-[4px] after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-navy-300 after:transition-all after:content-['']";
     const largeBackgroundToggleClasses = "after:absolute after:left-[3px] after:top-[4.5px] after:h-[19px] after:w-[19px] after:rounded-full after:bg-white after:transition-all after:content-['']";
     switch (true) {

package/dist/utils/formatePhoneNumber.d.ts

@@ -0,0 +1,2 @@
+declare const formatPhoneNumber: (value: string) => string;
+export default formatPhoneNumber;

package/dist/utils/formatePhoneNumber.js

@@ -0,0 +1,14 @@
+// This function is used to update phone number format to (xxx) xxx-xxxx during onChange of input field
+const formatPhoneNumber = (value) => {
+    if (!value)
+        return value;
+    const phoneNumber = value.replace(/[^\d]/g, "");
+    const phoneNumberLength = phoneNumber.length;
+    if (phoneNumberLength < 4)
+        return phoneNumber;
+    if (phoneNumberLength < 7) {
+        return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
+    }
+    return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 10)}`;
+};
+export default formatPhoneNumber;

package/dist/utils/fromatTableData.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { CellProps } from "react-table";
+/** Config each column might have */
+export interface SharedColumnConfig {
+    key: string;
+    type?: string;
+    linkClasses?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    leftImage?: string;
+    rightImage?: string;
+    transform?: (value: any) => any;
+}
+/** Minimally typed shape for returned React Table columns */
+export interface TableColumn {
+    Header: string | (() => JSX.Element);
+    accessor: string;
+    Cell: (props: CellProps<{
+        [key: string]: string | React.ReactElement;
+    }, string | React.ReactElement>) => JSX.Element;
+    sticky?: "left" | "right";
+}
+/**
+ * Callbacks for each app to provide their own "implementation details":
+ * - e.g. how to render icons, how to handle images, etc.
+ */
+export interface Renderers {
+    renderIcon?: (iconName: string, style?: "solid" | "regular") => JSX.Element;
+    renderImage?: (props: {
+        imageUrl: string;
+        altText: string;
+        className?: string;
+        width?: number;
+        height?: number;
+    }) => JSX.Element;
+    renderStatus?: (value: string, extra?: any) => JSX.Element;
+    renderCurrency?: (value: string) => string;
+}
+/**
+ * A generic table formatter you can reuse in both apps.
+ * This version delegates certain rendering details to the `renderers`.
+ */
+export declare function formatTableData(columnTitles: string[], accessors: string[], columnConfigs: SharedColumnConfig[], renderers?: Renderers): TableColumn[];
+/** Simple helper to generate the default "col1", "col2", ... accessors */
+export declare function generateAccessors(columnTitles: string[]): string[];

package/dist/utils/fromatTableData.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A generic table formatter you can reuse in both apps.
+ * This version delegates certain rendering details to the `renderers`.
+ */
+export function formatTableData(columnTitles, accessors, columnConfigs, renderers = {}) {
+    function renderCellContent(config) {
+        return ({ value }) => {
+            // 1. Check leftIcon, rightIcon, leftImage, rightImage, etc.
+            if (config.leftIcon && renderers.renderIcon) {
+                const icon = (_jsx("div", { className: "pr-2", children: renderers.renderIcon(config.leftIcon, "solid") }));
+                return renderContent(config, value, icon, "left");
+            }
+            if (config.rightIcon && renderers.renderIcon) {
+                const icon = (_jsx("div", { className: "pl-2", children: renderers.renderIcon(config.rightIcon, "solid") }));
+                return renderContent(config, value, icon, "right");
+            }
+            if (config.leftImage && renderers.renderImage) {
+                const image = (_jsx("div", { className: "pr-2", children: renderers.renderImage({
+                        imageUrl: config.leftImage,
+                        altText: "Image",
+                        width: 30,
+                        height: 30,
+                    }) }));
+                return renderContent(config, value, image, "left");
+            }
+            if (config.rightImage && renderers.renderImage) {
+                const image = (_jsx("div", { className: "pl-2", children: renderers.renderImage({
+                        imageUrl: config.rightImage,
+                        altText: "Image",
+                        width: 30,
+                        height: 30,
+                    }) }));
+                return renderContent(config, value, image, "right");
+            }
+            // 2. Check type (CURRENCY, STATUS, etc.)
+            switch (config.type) {
+                case "STATUS":
+                    if (renderers.renderStatus && typeof value === "string") {
+                        return renderContent(config, value, renderers.renderStatus(value));
+                    }
+                    break;
+                case "CURRENCY":
+                    if (renderers.renderCurrency && typeof value === "string") {
+                        const formatted = renderers.renderCurrency(value);
+                        return renderContent(config, formatted);
+                    }
+                    break;
+                // Add other type cases (BOOLEAN, NUMBER, DATE, etc.) as you see fit
+            }
+            // 3. If we get here, just render raw text
+            return (_jsx("div", { style: { display: "flex", alignItems: "center" }, children: typeof value === "string" ? _jsx("p", { children: value }) : value }));
+        };
+    }
+    function renderContent(config, value, content, position) {
+        return (_jsx("div", { style: { display: "flex", alignItems: "center" }, className: "flex w-full", children: config.linkClasses ? (_jsxs("a", { href: "#", className: `flex ${config.linkClasses}`, onClick: (e) => e.stopPropagation(), children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) : (_jsxs(_Fragment, { children: [position === "left" && content, typeof value === "string" ? _jsx("p", { children: value }) : value, position === "right" && content] })) }));
+    }
+    // Map each title to a column definition
+    const columns = columnTitles.map((title, i) => {
+        const accessor = accessors[i];
+        const key = `col${i + 1}`;
+        const config = columnConfigs.find((c) => c.key === key) ||
+            {
+                key,
+                type: "DEFAULT",
+            };
+        return {
+            Header: title,
+            accessor,
+            Cell: ({ value }) => renderCellContent(config)({ value }),
+        };
+    });
+    // Return the final array of columns.
+    // (Apps can push a custom "sticky" col onto this if they want.)
+    return columns;
+}
+/** Simple helper to generate the default "col1", "col2", ... accessors */
+export function generateAccessors(columnTitles) {
+    return columnTitles.map((_, index) => `col${index + 1}`);
+}

package/dist/utils/getColSPanClass.d.ts

@@ -0,0 +1,2 @@
+declare const getColSpanClass: (colSpan: string) => "" | "col-span-1" | "col-span-2" | "col-span-3" | "col-span-4";
+export default getColSpanClass;

package/dist/utils/getColSPanClass.js

@@ -0,0 +1,15 @@
+const getColSpanClass = (colSpan) => {
+    switch (colSpan) {
+        case "col-span-1":
+            return "col-span-1";
+        case "col-span-2":
+            return "col-span-2";
+        case "col-span-3":
+            return "col-span-3";
+        case "col-span-4":
+            return "col-span-4";
+        default:
+            return "";
+    }
+};
+export default getColSpanClass;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.92",
+	"version": "1.0.94",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -30,6 +30,7 @@
 		"@storybook/addon-viewport": "^7.6.10",
 		"@tanstack/react-virtual": "^3.1.3",
 		"@tanstack/virtual-core": "^3.1.3",
+		"classnames": "^2.5.1",
 		"esbuild-wasm": "^0.23.0",
 		"framer-motion": "^11.0.8",
 		"nouislider": "^15.8.1",