feat(app/type-ahead): add prop table to type-ahead

apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, Page, Typeahead } from "@prefabs.tech/react-ui";
+import { Button, Page, Typeahead, TDataTable } from "@prefabs.tech/react-ui";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -104,6 +104,142 @@ export const TypeaheadDemo = () => {
     );
   };
 
+  const propertiesData = [
+    {
+      default: '""',
+      description: t("typeahead.propertiesDescription.className"),
+      id: 1,
+      prop: "className",
+      type: "string",
+    },
+    {
+      default: "[]",
+      description: t("typeahead.propertiesDescription.data"),
+      id: 2,
+      prop: "data",
+      type: "T[]",
+    },
+    {
+      default: "300",
+      description: t("typeahead.propertiesDescription.debounceTime"),
+      id: 3,
+      prop: "debounceTime",
+      type: "number",
+    },
+    {
+      default: "false",
+      description: t("typeahead.propertiesDescription.disabled"),
+      id: 4,
+      prop: "disabled",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.emptyMessage"),
+      id: 5,
+      prop: "emptyMessage",
+      type: "string",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.errorMessage"),
+      id: 6,
+      prop: "errorMessage",
+      type: "string",
+    },
+    {
+      default: "true",
+      description: t("typeahead.propertiesDescription.forceSelect"),
+      id: 7,
+      prop: "forceSelect",
+      type: "boolean",
+    },
+    {
+      default: "false",
+      description: t("typeahead.propertiesDescription.hasError"),
+      id: 8,
+      prop: "hasError",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.helperText"),
+      id: 9,
+      prop: "helperText",
+      type: "string",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.label"),
+      id: 10,
+      prop: "label",
+      type: "string | React.ReactNode",
+    },
+    {
+      default: "false",
+      description: t("typeahead.propertiesDescription.loading"),
+      id: 11,
+      prop: "loading",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.name"),
+      id: 12,
+      prop: "name",
+      type: "string",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.onChange"),
+      id: 13,
+      prop: "onChange",
+      type: "(value?: T) => void",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.onSearch"),
+      id: 14,
+      prop: "onSearch",
+      type: "(value: string | number | readonly string[]) => void",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.placeholder"),
+      id: 15,
+      prop: "placeholder",
+      type: "string",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.renderSuggestion"),
+      id: 16,
+      prop: "renderSuggestion",
+      type: "(suggestion: T) => React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("typeahead.propertiesDescription.suggestionLabel"),
+      id: 17,
+      prop: "suggestionLabel",
+      type: "keyof T",
+    },
+    {
+      default: '"text"',
+      description: t("typeahead.propertiesDescription.type"),
+      id: 18,
+      prop: "type",
+      type: "string",
+    },
+    {
+      default: '""',
+      description: t("typeahead.propertiesDescription.value"),
+      id: 19,
+      prop: "value",
+      type: "string | number | readonly string[]",
+    },
+  ];
+
   return (
     <Page
       title={t("typeahead.title")}
@@ -171,6 +307,35 @@ export const TypeaheadDemo = () => {
           emptyMessage={t("typeahead.message.emptyMessage")}
         />
       </Section>
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "Typeahead",
+        })}
+      >
+        <TDataTable
+          columns={[
+            {
+              accessorKey: "prop",
+              header: "Properties",
+            },
+            {
+              accessorKey: "type",
+              header: "Type",
+            },
+            {
+              accessorKey: "default",
+              header: "Default",
+            },
+            {
+              accessorKey: "description",
+              header: "Description",
+            },
+          ]}
+          data={propertiesData}
+          paginated={false}
+          persistState={false}
+        />
+      </Section>
     </Page>
   );
 };

apps/demo/src/locales/en/ui.json

@@ -598,18 +598,39 @@
     "subtitle": "The SwitchInput component is a customizable checkbox switch for toggling states. It supports additional properties such as error handling and labeling."
   },
   "typeahead": {
-    "message": {
-      "emptyMessage": "No results found"
-    },
-    "title": "Typeahead",
     "label": {
       "client": "Client side typeahead",
       "customSuggestion": "Custom suggestion typeahead",
       "disabled": "Disabled",
       "emptyMessage": "Empty message typeahead",
-      "server": "Server side typeahead",
-      "invalid": "Invalid"
+      "invalid": "Invalid",
+      "server": "Server side typeahead"
+    },
+    "message": {
+      "emptyMessage": "No results found"
+    },
+    "placeholder": "Search...",
+    "propertiesDescription": {
+      "className": "Style class of the component.",
+      "data": "An array of suggestions to display.",
+      "debounceTime": "Delay in milliseconds before the search triggers.",
+      "disabled": "When present, it specifies that the component should be disabled.",
+      "emptyMessage": "Message to display when no results are found.",
+      "errorMessage": "Message to display when there is an error.",
+      "forceSelect": "When enabled, clears the input if the value is not selected from the suggestions.",
+      "hasError": "Specifies if the input has an invalid state.",
+      "helperText": "Helper text to display below the input.",
+      "label": "Label of the component.",
+      "loading": "Displays a loading icon when true.",
+      "name": "Name attribute of the input element.",
+      "onChange": "Callback function invoked when a suggestion is selected.",
+      "onSearch": "Callback function invoked when the input value changes.",
+      "placeholder": "Placeholder text for the input.",
+      "renderSuggestion": "Function to customize the rendering of each suggestion.",
+      "suggestionLabel": "Property name to use as the display label when data items are objects.",
+      "type": "Type of the input element (e.g., text).",
+      "value": "Value of the component."
     },
-    "placeholder": "Search..."
+    "title": "Typeahead"
   }
 }

apps/demo/src/locales/fr/ui.json

@@ -114,7 +114,7 @@
     "label": "Label (fr)",
     "locale": "Locales support (fr)",
     "notFound": "Missing country code (fr)",
-      "positions": {
+    "positions": {
       "left": "Left (default) (fr)",
       "right": "Right (fr)",
       "rightEdge": "Right edge (fr)"
@@ -165,7 +165,7 @@
       "single": "Select a country... (fr)"
     },
     "propertiesDescription": {
-      "autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)",
+      "autoSortOptions": "By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)",
       "data": "Custom country data to overwrite existing entries or add new ones. (fr)",
       "exclude": "An array of country codes to remove from the list. (fr)",
       "fallbackLocale": "Locale used when active locale translation is missing. (fr)",
@@ -598,18 +598,39 @@
     "subtitle": "The SwitchInput component is a customizable checkbox switch for toggling states. It supports additional properties such as error handling and labeling. (fr)"
   },
   "typeahead": {
-    "message": {
-      "emptyMessage": "No results found (fr)"
-    },
-    "title": "Typeahead (fr)",
     "label": {
       "client": "Client side typeahead (fr)",
       "customSuggestion": "Custom suggestion typeahead (fr)",
       "disabled": "Disabled (fr)",
       "emptyMessage": "Empty message typeahead (fr)",
-      "server": "Server side typeahead (fr)",
-      "invalid": "Invalid (fr)"
+      "invalid": "Invalid (fr)",
+      "server": "Server side typeahead (fr)"
+    },
+    "message": {
+      "emptyMessage": "No results found (fr)"
+    },
+    "placeholder": "Search... (fr)",
+    "propertiesDescription": {
+      "className": "Style class of the component. (fr)",
+      "data": "An array of suggestions to display. (fr)",
+      "debounceTime": "Delay in milliseconds before the search triggers. (fr)",
+      "disabled": "When present, it specifies that the component should be disabled. (fr)",
+      "emptyMessage": "Message to display when no results are found. (fr)",
+      "errorMessage": "Message to display when there is an error. (fr)",
+      "forceSelect": "When enabled, clears the input if the value is not selected from the suggestions. (fr)",
+      "hasError": "Specifies if the input has an invalid state. (fr)",
+      "helperText": "Helper text to display below the input. (fr)",
+      "label": "Label of the component. (fr)",
+      "loading": "Displays a loading icon when true. (fr)",
+      "name": "Name attribute of the input element. (fr)",
+      "onChange": "Callback function invoked when a suggestion is selected. (fr)",
+      "onSearch": "Callback function invoked when the input value changes. (fr)",
+      "placeholder": "Placeholder text for the input. (fr)",
+      "renderSuggestion": "Function to customize the rendering of each suggestion. (fr)",
+      "suggestionLabel": "Property name to use as the display label when data items are objects. (fr)",
+      "type": "Type of the input element (e.g., text). (fr)",
+      "value": "Value of the component. (fr)"
     },
-    "placeholder": "Search... (fr)"
+    "title": "Typeahead (fr)"
   }
 }