feat: add select example with grouping of option

Author: bishalshrestha013

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

@@ -529,6 +529,68 @@ const [selectedValue, setSelectedValue] = useState<string>("");
         />
       </Section>
 
+      <Section title={t("select.usage.group")}>
+        <Select
+          label={t("select.label")}
+          name="select"
+          options={[
+            {
+              label: t("europe"),
+              options: [
+                { label: t("germany"), value: "DE" },
+                { label: t("france"), value: "FR" },
+                { disabled: true, label: t("belgium"), value: "BE" },
+              ],
+            },
+            {
+              label: t("asia"),
+              options: [
+                { label: t("nepal"), value: "NP" },
+                { label: t("india"), value: "IN" },
+              ],
+            },
+          ]}
+          value={singleSelectValue}
+          onChange={(value: string) => setSingleSelectValue(value)}
+          placeholder={t("select.placeholder")}
+        />
+        <CodeBlock
+          exampleCode='
+const [singleSelectValue, setSingleSelectValue] = useState<string>("");
+
+<Select
+  label={t("select.label")}
+  name="select"
+  options={[
+    {
+      label: t("europe"),
+      options: [
+        { label: t("germany"), value: "DE" },
+        { label: t("france"), value: "FR" },
+        { disabled: true, label: t("belgium"), value: "BE" },
+      ],
+    },
+    {
+      label: t("asia"),
+      options: [
+        { label: t("nepal"), value: "NP" },
+        { label: t("india"), value: "IN" },
+      ],
+    },
+  ]}
+  value={singleSelectValue}
+  onChange={(value: string) => setSingleSelectValue(value)}
+  placeholder={t("select.placeholder")}
+/>'
+        />
+        <p>
+          <Trans
+            i18nKey={"ui:select.autoSortOptionsInfo"}
+            components={{ code: <code /> }}
+          ></Trans>
+        </p>
+      </Section>
+
       <Section title="Type">
         <CodeBlock
           exampleCode="

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

@@ -341,6 +341,7 @@
     "usage": {
       "basic": "Basic",
       "disabled": "Disabled",
+      "group": "With grouping",
       "invalid": "Invalid",
       "key": "With label and value keys",
       "multiple": "Multiple select",

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

@@ -341,6 +341,7 @@
     "usage": {
       "basic": "Basic",
       "disabled": "Disabled (fr)",
+      "group": "With grouping (fr)",
       "invalid": "Invalid (fr)",
       "key": "With label and value keys (fr)",
       "multiple": "Multiple select (fr)",