@agilant/toga-blox 1.0.47 → 1.0.49

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SearchInput from "./SearchInput";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import { useState } from "react";
 export default {
     title: "Components/SearchInput",
@@ -13,10 +12,6 @@ export default {
                 options: ["text", "number", "boolean", "date", "multiSelect"],
             },
         },
-        closeOutSearch: { control: "none", table: { disable: true } },
-        setResetSearch: { control: "none", table: { disable: true } },
-        column: { control: "none", table: { disable: true } },
-        setEditingHeader: { control: "none", table: { disable: true } },
         dropdownIconProp: {
             control: "object",
             description: "Icon configuration for dropdown",
@@ -56,6 +51,10 @@ const Template = (args) => {
     const [minValue, setMinValue] = useState();
     const [maxValue, setMaxValue] = useState();
     const [selectedValue, setSelectedValue] = useState(args.selectedValue || []);
+    // NEW: State for date control
+    const [selectedDate, setSelectedDate] = useState(args.selectedDate);
+    const [selectedStartDate, setSelectedStartDate] = useState(args.selectedStartDate);
+    const [selectedEndDate, setSelectedEndDate] = useState(args.selectedEndDate);
     // Handle onChange from the multi-select
     const handleOnChange = (newSelected) => {
         setSelectedValue(newSelected);
@@ -63,23 +62,25 @@ const Template = (args) => {
         args.onChange?.(newSelected);
         console.log("Selected items:", newSelected);
     };
-    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue }));
+    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate }));
 };
 export const Default = Template.bind({});
 Default.args = {
     inputType: "text",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
+    dropdownOptions: [
+        "Starts with",
+        "Ends with",
+        "Exactly",
+        "Includes",
+        "Excludes",
+    ],
+    selectedDropdownOption: "Starts with",
 };
 export const TextInput = Template.bind({});
 TextInput.args = {
     inputType: "text",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     pillColor: "bg-sky-500",
     textHighlight: "text-sky-500",
     dropdownIconProp: {
@@ -99,10 +100,7 @@ TextInput.args = {
 export const NumberInput = Template.bind({});
 NumberInput.args = {
     inputType: "number",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     dropdownIconProp: {
         iconClasses: "text-sky-500",
         name: "chevronDown",
@@ -114,67 +112,48 @@ NumberInput.args = {
 export const DropdownInput = Template.bind({});
 DropdownInput.args = {
     inputType: "multiSelect",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     placeholder: "Search",
     dropdownOptions: [
         { uuid: "1", name: "Option 1", value: "option1" },
         { uuid: "2", name: "Option 2", value: "option2" },
         { uuid: "3", name: "Option 3", value: "option3" },
     ],
-    /** For multi-select, `value` is typically an array */
     selectedValue: [],
-    // onChange: (selected: OptionType[]) => {
-    // 	console.log("Selected items:", selected);
-    // },
-    /** Additional props you might want to set */
     isSearchable: true,
     hasSelectAll: true,
     disabled: false,
     isLoading: false,
     type: "multiSelect",
-    // etc...
 };
 export const BooleanInput = Template.bind({});
 BooleanInput.args = {
     inputType: "multiSelect",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     placeholder: "Search",
     dropdownOptions: [
         { uuid: "1", name: "True", value: "true" },
         { uuid: "2", name: "False", value: "false" },
     ],
     selectedValue: [],
-    // onChange: (selected: OptionType[]) => {
-    // 	console.log("Selected items:", selected);
-    // },
     isSearchable: true,
     hasSelectAll: true,
     disabled: false,
     isLoading: false,
     type: "multiSelect",
-    // etc...
 };
-export const DisabledInput = Template.bind({});
-DisabledInput.args = {
-    inputType: "text",
-    inputName: "disabledInput",
-    hasPlaceholder: true,
-    placeholder: "Disabled...",
-    inputTextSize: "text-sm",
-    inputShape: "rounded",
-    backgroundColor: "bg-gray-200",
-    inputWidth: "w-72",
-    inputBorderClasses: "border border-gray-400 cursor-not-allowed",
-    buttonText: _jsx("span", { children: "Disabled" }),
-    buttonClasses: "bg-gray-500 text-gray-300 px-4 py-2 rounded",
-    buttonIcon: getFontAwesomeIcon("ban"),
-    buttonIconClasses: "text-gray-400",
-    containerClasses: "flex items-center",
-    onButtonClick: () => alert("Button is disabled."),
+export const DatePickerInput = Template.bind({});
+DatePickerInput.args = {
+    inputType: "date",
+    handleFilter: () => console.log(`Filter applied`),
+    textHighlight: "text-sky-500",
+    dropdownOptions: ["Exactly", "Before", "After"],
+    selectedDropdownOption: "Exactly",
+    onDropdownOptionSelect: (option) => console.log(`Option selected: ${option}`),
+    searchItems: [],
+    setSearchItems: () => { },
+    toggleStatus: false,
+    setToggleStatus: () => { },
+    themeBgColor: "bg-sky-500",
+    lightThemeBg: "bg-sky-100",
 };

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

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