@agilant/toga-blox 1.0.32 → 1.0.33

package/dist/components/TableRow/TableRow.stories.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TableRow from "./TableRow";
+// Sample data for testing
+const sampleData = {
+    uuid: "12345",
+    name: "John Doe",
+    age: 30,
+    address: "123 Main St, Springfield, IL, 62701, United States of America",
+    email: "john.doe@example.com",
+    phone: "+1 555-123-4567",
+    status: "Active",
+};
+// Mock row data
+const mockRow = {
+    index: 0,
+    rowUuid: sampleData.uuid,
+    cells: [
+        {
+            value: sampleData.name,
+            render: (type) => type === "Cell" ? sampleData.name : null,
+            getCellProps: () => ({}),
+        },
+        {
+            value: sampleData.age,
+            render: (type) => type === "Cell" ? sampleData.age.toString() : null,
+            getCellProps: () => ({}),
+        },
+        {
+            value: sampleData.address,
+            render: (type) => type === "Cell" ? sampleData.address : null,
+            getCellProps: () => ({}),
+        },
+        {
+            value: sampleData.email,
+            render: (type) => type === "Cell" ? sampleData.email : null,
+            getCellProps: () => ({}),
+        },
+        {
+            value: sampleData.phone,
+            render: (type) => type === "Cell" ? sampleData.phone : null,
+            getCellProps: () => ({}),
+        },
+        {
+            value: sampleData.status,
+            render: (type) => type === "Cell" ? (_jsx("span", { className: "text-green-500", children: sampleData.status })) : null,
+            getCellProps: () => ({}),
+        },
+    ],
+    getRowProps: () => ({}),
+};
+// Mock prepareRow function
+const prepareRow = (row) => { };
+const meta = {
+    title: "Table/TableRow",
+    component: TableRow,
+    argTypes: {
+        row: {
+            control: "object",
+            description: "The row data to be displayed.",
+        },
+        prepareRow: {
+            control: "function",
+            description: "A function to prepare the row for rendering.",
+        },
+        globalTrimActive: {
+            control: "boolean",
+            description: "Toggle to enable or disable text trimming for long strings.",
+        },
+        rowUuid: {
+            control: "text",
+            description: "Unique identifier for the row.",
+        },
+        columnInputs: {
+            control: "object",
+            description: "Array of column inputs (if any).",
+        },
+        rowHoverClasses: {
+            control: "text",
+            description: "CSS classes to apply when the row is hovered. Defaults to `hover:bg-navy-100 hover:cursor-pointer`.",
+        },
+        onRowClick: {
+            control: "function",
+            description: "A callback function triggered when the row is clicked. It receives the row index, row UUID, and the click event as arguments.",
+        },
+        activeIndex: {
+            control: "number",
+            description: "The index of the currently active row. If the row's index matches this value, the row will be highlighted.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A table row component that renders a row of data with optional hover effects, active states, and click handlers. It supports text trimming and custom rendering for individual cells.",
+            },
+        },
+    },
+};
+export default meta;
+// Template for the story
+const Template = (args) => (_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { ...args }) }) }));
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+    row: mockRow,
+    prepareRow,
+    globalTrimActive: true,
+    rowUuid: sampleData.uuid,
+    columnInputs: [],
+    rowHoverClasses: "hover:bg-red-100 hover:cursor-pointer",
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: "Default table row with text trimming enabled. Long text will be truncated to 30 characters.",
+        },
+    },
+};
+// Story with active row
+export const ActiveRow = Template.bind({});
+ActiveRow.args = {
+    ...Default.args,
+    activeIndex: 0,
+};
+ActiveRow.parameters = {
+    docs: {
+        description: {
+            story: "Table row with an active state. The active row is highlighted to indicate selection.",
+        },
+    },
+};
+// Story with custom row click handler
+export const WithRowClickHandler = Template.bind({});
+WithRowClickHandler.args = {
+    ...Default.args,
+    onRowClick: (index, rowUuid, event) => {
+        alert(`Row clicked!\nIndex: ${index}\nRow UUID: ${rowUuid}`);
+        console.log("Row clicked:", index, rowUuid, event);
+    },
+};
+WithRowClickHandler.parameters = {
+    docs: {
+        description: {
+            story: "Table row with a custom click handler. The `onRowClick` prop is used to handle row click events. In this example, an alert is shown when the row is clicked.",
+        },
+    },
+};
+// Story with disabled text trimming
+export const NoTrimming = Template.bind({});
+NoTrimming.args = {
+    ...Default.args,
+    globalTrimActive: false, // Disable text trimming
+};
+NoTrimming.parameters = {
+    docs: {
+        description: {
+            story: "Table row with text trimming disabled. The full text is displayed for each cell.",
+        },
+    },
+};
+// Story with custom cell rendering
+export const CustomCellRendering = Template.bind({});
+CustomCellRendering.args = {
+    ...Default.args,
+    row: {
+        ...mockRow,
+        cells: [
+            {
+                value: sampleData.name,
+                id: "name",
+                render: (type) => type === "Cell" ? _jsx("strong", { children: sampleData.name }) : null,
+                getCellProps: () => ({}),
+            },
+            {
+                value: sampleData.age,
+                id: "age",
+                render: (type) => type === "Cell" ? (_jsx("span", { className: "text-blue-500", children: sampleData.age })) : null,
+                getCellProps: () => ({}),
+            },
+            {
+                value: sampleData.address,
+                render: (type) => type === "Cell" ? sampleData.address : null,
+                getCellProps: () => ({}),
+            },
+        ],
+    },
+};
+CustomCellRendering.parameters = {
+    docs: {
+        description: {
+            story: "Table row with custom rendering for individual cells. The `render` function is used to customize the appearance of cell content (e.g., bold text, colored text).",
+        },
+    },
+};

package/dist/components/TableRow/TableRow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TableRow/TableRow.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import TableRow from "./TableRow";
+describe("TableRow - Branch Coverage Tests", () => {
+    const mockPrepareRow = vi.fn();
+    // Basic row object
+    const baseMockRow = {
+        index: 0,
+        getRowProps: vi.fn(() => ({})),
+        cells: [
+            {
+                getCellProps: vi.fn(() => ({ key: "cell-0" })),
+                render: vi.fn(() => "Cell 0"),
+            },
+        ],
+    };
+    it("covers isActive = true (row is active)", () => {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 5 }, prepareRow: mockPrepareRow, activeIndex: 5 }) }) }));
+        expect(screen.getByTestId("table-row")).toHaveClass("activeRow");
+    });
+    it("covers isActive = false (row is NOT active)", () => {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 2 }, prepareRow: mockPrepareRow, activeIndex: 5 }) }) }));
+        expect(screen.getByTestId("table-row")).not.toHaveClass("activeRow");
+    });
+    it("covers onRowClick = defined + rowUuid = provided", () => {
+        const mockOnRowClick = vi.fn();
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, rowUuid: "some-uuid" }) }) }));
+        fireEvent.click(screen.getByTestId("table-row"));
+        // Because rowUuid is defined, we expect 'some-uuid'
+        expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, "some-uuid", expect.anything() // Synthetic event
+        );
+    });
+    it("covers onRowClick = defined + rowUuid = undefined (so calls empty string)", () => {
+        const mockOnRowClick = vi.fn();
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick }) }) }));
+        fireEvent.click(screen.getByTestId("table-row"));
+        expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, "", expect.anything());
+    });
+    it("covers onRowClick = NOT defined", () => {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow }) }) }));
+        fireEvent.click(screen.getByTestId("table-row"));
+    });
+});

package/dist/components/TableRow/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TableRow";
+export * from "./types";

package/dist/components/TableRow/index.js

@@ -0,0 +1,2 @@
+export { default } from "./TableRow";
+export * from "./types";

package/dist/components/TableRow/types.d.ts

@@ -0,0 +1,11 @@
+import { Row } from "react-table";
+export interface TableRowProps<T extends object> {
+    row: Row<T>;
+    prepareRow: (row: Row<T>) => void;
+    globalTrimActive: boolean;
+    rowUuid?: string;
+    activeIndex: number;
+    columnInputs?: string[];
+    rowHoverClasses?: string;
+    addRowToClickedRows?: (rowUuid: string) => void;
+}

package/dist/components/TableRow/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ToggleProps } from "./ToggleButton.types";
+declare const ToggleButton: React.FC<ToggleProps>;
+export default ToggleButton;

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from "../Text/Text";
+const textPositionMap = {
+    left: "flex items-center",
+    right: "flex items-center flex-row-reverse",
+    top: "flex flex-col items-start",
+    bottom: "flex flex-col-reverse items-start",
+};
+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 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) {
+        // small toggle with border style
+        case smallToggle && borderStyle:
+            return `${baseClasses} h-[1.25rem] w-[2rem] ${status ? activeColorBorder : inactiveColorBorder} ${borderToggleClasses} ${status ? borderToggleCircleClasses : ""} `;
+        // small toggle with background style
+        case smallToggle && !borderStyle:
+            return `${baseClasses} h-[1.25rem] w-[2rem] ${status ? activeColorBackground : inactiveColorBackground} ${smallBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""}`;
+        // large toggle with background style
+        case !smallToggle && !borderStyle:
+            return `${baseClasses} h-7 w-11 ${status ? activeColorBackground : inactiveColorBackground} ${largeBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""}`;
+        default:
+            return `${baseClasses}  h-7 w-11  ${status ? activeColorBorder : inactiveColorBorder} ${status ? activeColorBackground : inactiveColorBackground} ${largeBackgroundToggleClasses} ${status ? "peer-checked:after:translate-x-full " : ""}`;
+    }
+};
+const ToggleButton = ({ initialStatus, onClick, id, textPosition, textSize, activeColorBackground, inactiveColorBackground, activeColorBorder, inactiveColorBorder, activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor, inactiveTextColor, smallToggle, pillHeight, borderStyle, }) => {
+    const handleToggle = () => {
+        const newValue = !initialStatus;
+        onClick(newValue);
+    };
+    const textColor = initialStatus === true ? activeTextColor : inactiveTextColor;
+    const textPositionClasses = textPositionMap[textPosition];
+    const toggleClasses = getToggleClasses(initialStatus, smallToggle, borderStyle, activeColorBorder, inactiveColorBorder, activeColorBackground, inactiveColorBackground);
+    return (_jsx("div", { className: `flex justify-center ${hasDivider && textPosition === "right"
+            ? "border-r-1 border-navy-200 pr-2"
+            : ""} mr-2 ${pillHeight}`, children: hasDisabledStatus ? (_jsx("div", { className: `${pillHeight}`, children: _jsx(Text, { fontFamily: fontFamily, size: textSize, color: textColor, text: initialStatus ? activeLabel : inactiveLabel }) })) : (_jsxs("div", { className: `justify-between w-full ${textPositionClasses} ${textSize} ${textColor} ${additionalClasses} `, children: [_jsx("label", { htmlFor: id, "data-testid": "inactive-label", className: `flex justify-center ${smallToggle ? " min-w-10" : "min-w-20"}`, children: initialStatus ? activeLabel : inactiveLabel }), _jsxs("label", { className: "relative inline-flex cursor-pointer items-center", children: [_jsx("input", { id: id, type: "checkbox", className: "peer sr-only", checked: initialStatus, onChange: handleToggle }), _jsx("div", { className: toggleClasses })] })] })) }));
+};
+export default ToggleButton;

package/dist/components/ToggleButton/ToggleButton.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const SmallToggle: any;
+export declare const DisabledStatus: any;
+export declare const CustomColorsAndBorder: any;
+export declare const TextPositionLeft: any;
+export declare const TextPositionTop: any;
+export declare const TextPositionBottom: any;
+export declare const NoLabels: any;

package/dist/components/ToggleButton/ToggleButton.stories.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import ToggleButton from "./ToggleButton";
+export default {
+    title: "Components/ToggleButton",
+    component: ToggleButton,
+    tags: ["autodocs"],
+    argTypes: {
+        initialStatus: { control: "boolean" },
+        textPosition: {
+            control: "select",
+            options: ["left", "right", "top", "bottom"],
+        },
+        textSize: {
+            control: "text",
+        },
+        activeColorBackground: { control: "color" },
+        inactiveColorBackground: { control: "color" },
+        activeColorBorder: { control: "color" },
+        inactiveColorBorder: { control: "color" },
+        activeTextColor: { control: "color" },
+        inactiveTextColor: { control: "color" },
+        smallToggle: { control: "boolean" },
+        hasDisabledStatus: { control: "boolean" },
+        hasDivider: { control: "boolean" },
+        additionalClasses: { control: "text" },
+        pillHeight: { control: "text" },
+        borderStyle: { control: "boolean" },
+    },
+    parameters: { layout: "centered" },
+};
+// Template with State Management
+const Template = (args) => {
+    const [toggleStatus, setToggleStatus] = useState(args.initialStatus);
+    return (_jsx(ToggleButton, { ...args, initialStatus: toggleStatus, onClick: (newStatus) => {
+            setToggleStatus(newStatus); // Update state when clicked
+            console.log(`Toggled to: ${newStatus}`); // Log the new state
+        } }));
+};
+// Default Story
+export const Default = Template.bind({});
+Default.args = {
+    initialStatus: false,
+    onClick: (status) => console.log(`Toggled to: ${status}`),
+    textPosition: "right",
+    textSize: "text-sm",
+    activeColorBackground: "bg-green-500",
+    inactiveColorBackground: "bg-gray-300",
+    activeColorBorder: "border-green-500",
+    inactiveColorBorder: "border-gray-300",
+    activeTextColor: "text-green-500",
+    inactiveTextColor: "text-gray-500",
+    activeLabel: "Active",
+    inactiveLabel: "Inactive",
+    smallToggle: false,
+    hasDisabledStatus: false,
+    hasDivider: false,
+    additionalClasses: "flex items-center",
+    pillHeight: "h-8",
+    borderStyle: false,
+};
+// Small Toggle
+export const SmallToggle = Template.bind({});
+SmallToggle.args = {
+    ...Default.args,
+    smallToggle: true,
+    activeLabel: "ON",
+    inactiveLabel: "OFF",
+    pillHeight: "h-6",
+};
+// Disabled Status
+export const DisabledStatus = Template.bind({});
+DisabledStatus.args = {
+    ...Default.args,
+    hasDisabledStatus: true,
+};
+// Custom Colors
+export const CustomColorsAndBorder = Template.bind({});
+CustomColorsAndBorder.args = {
+    ...Default.args,
+    borderStyle: true,
+    activeColorBackground: "bg-blue-500",
+    inactiveColorBackground: "bg-red-500",
+    activeTextColor: "text-blue-500",
+    inactiveTextColor: "text-red-500",
+    activeColorBorder: "border-black",
+    inactiveColorBorder: "border-black",
+};
+// Text Position Variations
+export const TextPositionLeft = Template.bind({});
+TextPositionLeft.args = {
+    ...Default.args,
+    textPosition: "left",
+};
+export const TextPositionTop = Template.bind({});
+TextPositionTop.args = {
+    ...Default.args,
+    textPosition: "top",
+};
+export const TextPositionBottom = Template.bind({});
+TextPositionBottom.args = {
+    ...Default.args,
+    textPosition: "bottom",
+};
+// No Text Labels
+export const NoLabels = Template.bind({});
+NoLabels.args = {
+    ...Default.args,
+    activeLabel: "",
+    inactiveLabel: "",
+};

package/dist/components/ToggleButton/ToggleButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ToggleButton/ToggleButton.test.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent, waitFor, } from "@testing-library/react";
+import { describe, expect, beforeEach, test, vi } from "vitest";
+import ToggleButton from "./ToggleButton";
+describe("<ToggleButton />", () => {
+    const defaultProps = {
+        initialStatus: false,
+        onClick: vi.fn(),
+        textPosition: "right",
+        textSize: "text-sm",
+        activeColorBackground: "bg-green-500",
+        inactiveColorBackground: "bg-gray-300",
+        activeColorBorder: "border-green-500",
+        inactiveColorBorder: "border-gray-300",
+        activeTextColor: "text-green-500",
+        inactiveTextColor: "text-gray-500",
+        activeLabel: "Active",
+        inactiveLabel: "Inactive",
+        smallToggle: false,
+        hasDisabledStatus: false,
+        hasDivider: false,
+        additionalClasses: "flex items-center",
+        pillHeight: "h-8",
+        borderStyle: false,
+        id: "toggle-button",
+    };
+    beforeEach(() => {
+        render(_jsx(ToggleButton, { ...defaultProps }));
+    });
+    // test("renders correct element for divider", () => {
+    // 	const { container } = render(
+    // 		<ToggleButton
+    // 			{...defaultProps}
+    // 			hasDivider={true}
+    // 			textPosition="right"
+    // 		/>
+    // 	);
+    // 	expect(container.firstChild).toHaveClass("border-r-1");
+    // 	expect(container.firstChild).toHaveClass("pr-2");
+    // });
+    test("renders ToggleButton component", () => {
+        expect(screen.getByLabelText("Inactive")).toBeInTheDocument();
+    });
+    test("renders with the correct initial status", () => {
+        const toggleInput = screen.getByLabelText("Inactive");
+        expect(toggleInput).toBeInTheDocument();
+        expect(toggleInput).not.toBeChecked();
+    });
+    test("renders the correct labels", () => {
+        expect(screen.getByText("Inactive")).toBeInTheDocument();
+    });
+    test("renders correct text position", () => {
+        const container = screen.getByLabelText("Inactive").closest("div");
+        expect(container).toHaveClass("flex items-center flex-row-reverse");
+    });
+    test("applies correct text size", () => {
+        const container = screen.getByText("Inactive");
+        expect(container.closest("div")).toHaveClass("text-sm");
+    });
+    test("applies correct colors based on status", () => {
+        const toggleButton = screen.getByLabelText("Inactive")
+            .nextSibling;
+        expect(toggleButton.className).toContain("bg-gray-300");
+    });
+    test("toggles status on click", () => {
+        const toggleInput = screen.getByLabelText("Inactive");
+        fireEvent.click(toggleInput);
+        expect(defaultProps.onClick).toHaveBeenCalledWith(true);
+    });
+    test("renders correct classes for small toggle", () => {
+        render(_jsx(ToggleButton, { ...defaultProps, smallToggle: true }));
+        const toggleButton = screen.getByLabelText("Inactive")
+            .nextSibling;
+        expect(toggleButton.className).toContain("h-7");
+        expect(toggleButton.className).toContain("w-11");
+    });
+    test("renders correct disabled state", () => {
+        render(_jsx(ToggleButton, { ...defaultProps, hasDisabledStatus: true }));
+        const disabledText = screen.getAllByText("Inactive")[1]; // Target the specific occurrence
+        expect(disabledText).toBeInTheDocument();
+    });
+    test("renders correct element for divider", async () => {
+        render(_jsx(ToggleButton, { ...defaultProps, hasDivider: true, textPosition: "right" }));
+        const toggleContainer = screen
+            .getByLabelText("Inactive")
+            .closest("div");
+        const parentDiv = toggleContainer?.parentElement;
+        // Wait for styles to be applied
+        await waitFor(() => {
+            expect(parentDiv?.className).toContain("mr-2");
+            // expect(parentDiv?.className).toContain("border-navy-200");
+        }, { timeout: 2000 });
+    });
+    test("handles custom text size class", () => {
+        render(_jsx(ToggleButton, { ...defaultProps, textSize: "2xl" }));
+        // Use `getByText` with a more specific query
+        const inactiveLabel = screen
+            .getAllByText("Inactive")
+            .find((label) => label.closest("div")?.classList.contains("text-2xl"));
+        // Assert that the desired element is found
+        expect(inactiveLabel).not.toBeNull();
+        const container = inactiveLabel?.closest("div");
+        // Assert the desired class is applied
+        expect(container).toHaveClass("text-2xl");
+    });
+});

package/dist/components/ToggleButton/ToggleButton.types.d.ts

@@ -0,0 +1,22 @@
+export interface ToggleProps {
+    initialStatus?: boolean;
+    onClick: (value: boolean) => void;
+    textPosition: "left" | "right" | "top" | "bottom" | "none";
+    activeColorBackground?: string;
+    inactiveColorBackground?: string;
+    activeColorBorder?: string;
+    inactiveColorBorder?: string;
+    textSize?: string;
+    additionalClasses?: string;
+    hasDisabledStatus?: boolean;
+    hasDivider?: boolean;
+    fontFamily?: string;
+    activeLabel: string;
+    inactiveLabel: string;
+    activeTextColor?: string;
+    inactiveTextColor?: string;
+    id?: string;
+    smallToggle: boolean;
+    pillHeight?: string;
+    borderStyle: boolean;
+}

package/dist/components/ToggleButton/ToggleButton.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.32",
+	"version": "1.0.33",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -32,7 +32,11 @@
 		"nouislider": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-multi-select-component": "^4.3.4",
 		"react-router-dom": "^6.16.0",
+		"react-select": "^5.10.0",
+		"react-table": "^7.8.0",
+		"react-table-sticky": "^1.1.3",
 		"storybook-addon-react-router-v6": "^2.0.15",
 		"tslib": "^2.3.0"
 	},
@@ -48,10 +52,11 @@
 		"@storybook/react": "^7.6.6",
 		"@storybook/react-vite": "^7.6.6",
 		"@storybook/test": "^7.6.6",
-		"@testing-library/jest-dom": "^6.4.6",
-		"@testing-library/react": "^14.3.1",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.5.2",
 		"@types/react-router-dom": "^5.3.3",
+		"@types/react-table": "^7.7.14",
 		"@vitejs/plugin-react": "^4.2.1",
 		"@vitest/coverage-istanbul": "^1.2.1",
 		"@vitest/coverage-v8": "^1.2.1",
@@ -59,6 +64,7 @@
 		"jsdom": "^23.2.0",
 		"nodemon": "^3.0.2",
 		"postcss": "^8.4.32",
+		"react-hook-form": "^7.43.9",
 		"react-router-dom": "^6.16.0",
 		"storybook": "^7.6.6",
 		"tailwindcss": "^3.4.0",
@@ -71,6 +77,7 @@
 		"@fortawesome/fontawesome-svg-core": "^1.2.35",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
+		"react-hook-form": "^7.43.9",
 		"react-router-dom": "^6.16.0"
 	}
 }