@trackunit/react-form-components 1.8.91 → 1.8.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.91",
+  "version": "1.8.93",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,23 +8,24 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "usehooks-ts": "^3.1.0",
     "react-select": "^5.10.0",
+    "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "@testing-library/react": "16.2.0",
     "jest-fetch-mock": "^3.0.3",
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.7.59",
-    "@trackunit/react-components": "1.10.27",
-    "@trackunit/ui-icons": "1.7.60",
-    "@trackunit/shared-utils": "1.9.59",
-    "@trackunit/ui-design-tokens": "1.7.59",
-    "@trackunit/i18n-library-translation": "1.7.71",
+    "@trackunit/css-class-variance-utilities": "1.7.60",
+    "@trackunit/react-components": "1.10.28",
+    "@trackunit/ui-icons": "1.7.61",
+    "@trackunit/shared-utils": "1.9.60",
+    "@trackunit/ui-design-tokens": "1.7.60",
+    "@trackunit/i18n-library-translation": "1.7.72",
     "string-ts": "^2.0.0",
-    "@trackunit/react-test-setup": "1.4.59",
-    "@js-temporal/polyfill": "^0.5.1"
+    "@trackunit/react-test-setup": "1.4.60",
+    "@js-temporal/polyfill": "^0.5.1",
+    "@storybook/react-webpack5": "9.1.13"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/storybook-utils/sharedArgTypes.d.ts

@@ -0,0 +1,323 @@
+/**
+ * Common argTypes shared across Select component stories
+ * Essential controls for Select components
+ */
+export declare const selectMostImportantArgTypes: {
+    readonly options: {
+        readonly description: "Array of options to display in the select menu.";
+    };
+    readonly value: {
+        readonly table: {};
+    };
+    readonly defaultValue: {
+        readonly table: {};
+    };
+    readonly onChange: {
+        readonly table: {};
+    };
+    readonly placeholder: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Text to display when no value is selected.";
+    };
+    readonly disabled: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Whether the select is disabled.";
+    };
+    readonly readOnly: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Whether the select is read-only.";
+    };
+    readonly isLoading: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Display a loading indicator.";
+    };
+    readonly isClearable: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Allow the user to clear the selected value. Displays a an × icon in the select field.";
+    };
+    readonly isSearchable: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Allow the user to search/filter options by typing.";
+    };
+    readonly fieldSize: {
+        readonly control: {
+            readonly type: "radio";
+        };
+        readonly options: readonly ["small", "medium", "large"];
+        readonly description: "Size of the select field.";
+    };
+    readonly label: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Label text for the select field.";
+    };
+    readonly hasError: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Whether the select has a validation error. Puts a red border around the select field.";
+    };
+    readonly errorMessage: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Error message to display when hasError is true.";
+    };
+    readonly helpText: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Help text to display below the select.";
+    };
+    readonly onMenuOpen: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "() => void";
+            };
+        };
+        readonly description: "Callback fired when the menu is opened.";
+    };
+    readonly getOptionLabel: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => string";
+            };
+        };
+        readonly description: "Resolves option data to a string to be displayed as the label for that option.";
+    };
+    readonly getOptionValue: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => string";
+            };
+        };
+        readonly description: "Resolves option data to a string to compare options and specify value attributes";
+    };
+    readonly getOptionLabelDescription: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => string | undefined";
+            };
+        };
+        readonly description: "Resolves option data to a string to be displayed as a description for that option. The option description is only shown in the the menu list, not in the selected value.";
+    };
+    readonly getOptionPrefix: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => ReactNode";
+            };
+        };
+        readonly description: "Resolves option data to a an element to be displayed as a prefix for that option.";
+    };
+    readonly prefix: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "ReactNode";
+            };
+        };
+        readonly description: "Element to render before the text in the select (typically an icon).";
+    };
+};
+/**
+ * Combined argTypes object for Select components
+ */
+export declare const selectArgTypes: {
+    readonly options: {
+        readonly description: "Array of options to display in the select menu.";
+    };
+    readonly value: {
+        readonly table: {};
+    };
+    readonly defaultValue: {
+        readonly table: {};
+    };
+    readonly onChange: {
+        readonly table: {};
+    };
+    readonly placeholder: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Text to display when no value is selected.";
+    };
+    readonly disabled: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Whether the select is disabled.";
+    };
+    readonly readOnly: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Whether the select is read-only.";
+    };
+    readonly isLoading: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Display a loading indicator.";
+    };
+    readonly isClearable: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Allow the user to clear the selected value. Displays a an × icon in the select field.";
+    };
+    readonly isSearchable: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Allow the user to search/filter options by typing.";
+    };
+    readonly fieldSize: {
+        readonly control: {
+            readonly type: "radio";
+        };
+        readonly options: readonly ["small", "medium", "large"];
+        readonly description: "Size of the select field.";
+    };
+    readonly label: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Label text for the select field.";
+    };
+    readonly hasError: {
+        readonly control: {
+            readonly type: "boolean";
+        };
+        readonly description: "Whether the select has a validation error. Puts a red border around the select field.";
+    };
+    readonly errorMessage: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Error message to display when hasError is true.";
+    };
+    readonly helpText: {
+        readonly control: {
+            readonly type: "text";
+        };
+        readonly description: "Help text to display below the select.";
+    };
+    readonly onMenuOpen: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "() => void";
+            };
+        };
+        readonly description: "Callback fired when the menu is opened.";
+    };
+    readonly getOptionLabel: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => string";
+            };
+        };
+        readonly description: "Resolves option data to a string to be displayed as the label for that option.";
+    };
+    readonly getOptionValue: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => string";
+            };
+        };
+        readonly description: "Resolves option data to a string to compare options and specify value attributes";
+    };
+    readonly getOptionLabelDescription: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => string | undefined";
+            };
+        };
+        readonly description: "Resolves option data to a string to be displayed as a description for that option. The option description is only shown in the the menu list, not in the selected value.";
+    };
+    readonly getOptionPrefix: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "(option: Option) => ReactNode";
+            };
+        };
+        readonly description: "Resolves option data to a an element to be displayed as a prefix for that option.";
+    };
+    readonly prefix: {
+        readonly control: false;
+        readonly table: {
+            readonly type: {
+                readonly summary: "ReactNode";
+            };
+        };
+        readonly description: "Element to render before the text in the select (typically an icon).";
+    };
+};
+/**
+ * Legacy individual argTypes for backward compatibility
+ */
+export declare const fieldSizeArgType: {
+    readonly control: {
+        readonly type: "radio";
+    };
+    readonly options: readonly ["small", "medium", "large"];
+    readonly description: "Size of the select field.";
+};
+export declare const getOptionLabelArgType: {
+    readonly control: false;
+    readonly table: {
+        readonly type: {
+            readonly summary: "(option: Option) => string";
+        };
+    };
+    readonly description: "Resolves option data to a string to be displayed as the label for that option.";
+};
+export declare const getOptionValueArgType: {
+    readonly control: false;
+    readonly table: {
+        readonly type: {
+            readonly summary: "(option: Option) => string";
+        };
+    };
+    readonly description: "Resolves option data to a string to compare options and specify value attributes";
+};
+export declare const getOptionLabelDescriptionArgType: {
+    readonly control: false;
+    readonly table: {
+        readonly type: {
+            readonly summary: "(option: Option) => string | undefined";
+        };
+    };
+    readonly description: "Resolves option data to a string to be displayed as a description for that option. The option description is only shown in the the menu list, not in the selected value.";
+};
+export declare const getOptionPrefixArgType: {
+    readonly control: false;
+    readonly table: {
+        readonly type: {
+            readonly summary: "(option: Option) => ReactNode";
+        };
+    };
+    readonly description: "Resolves option data to a an element to be displayed as a prefix for that option.";
+};