New input component

apps/gitness/src/pages-v2/repo/repo-list.tsx

@@ -104,17 +104,22 @@ export default function ReposListPage() {
   }, [importRepoIdentifier, setImportRepoIdentifier])
 
   return (
-    <SandboxRepoListPage
-      useRepoStore={useRepoStore}
-      useTranslationStore={useTranslationStore}
-      isLoading={isFetching}
-      isError={isError}
-      errorMessage={error?.message}
-      searchQuery={query}
-      setSearchQuery={setQuery}
-      toRepository={(repo: RepositoryType) => routes.toRepoSummary({ spaceId, repoId: repo.name })}
-      toCreateRepo={() => routes.toCreateRepo({ spaceId })}
-      toImportRepo={() => routes.toImportRepo({ spaceId })}
-    />
+    <>
+      <SandboxRepoListPage
+        useRepoStore={useRepoStore}
+        useTranslationStore={useTranslationStore}
+        isLoading={isFetching}
+        isError={isError}
+        errorMessage={error?.message}
+        searchQuery={query}
+        setSearchQuery={setQuery}
+        toRepository={(repo: RepositoryType) => routes.toRepoSummary({ spaceId, repoId: repo.name })}
+        toCreateRepo={() => routes.toCreateRepo({ spaceId })}
+        toImportRepo={() => routes.toImportRepo({ spaceId })}
+        toImportMultipleRepos={() => routes.toImportMultipleRepos({ spaceId })}
+      />
+    </>
   )
 }
+
+ReposListPage.displayName = 'ReposListPage'

apps/portal/src/components/samples/SearchInputDoc.tsx

@@ -0,0 +1,23 @@
+import { SearchInput } from "@harnessio/ui/components";
+import { useState } from "react";
+
+export default function SearchInputDoc() {
+  // Using useState hook to track search value
+  const [searchValue, setSearchValue] = useState("");
+
+  return (
+    <>
+      <div className="mb-2 w-full font-bold">Search with State:</div>
+      <SearchInput
+        placeholder="Type to search..."
+        onChange={(value) => setSearchValue(value)}
+      />
+      <div className="rounded-md border p-3">
+        <div className="text-sm font-medium underline underline-offset-2">
+          Current Search Value:
+        </div>
+        <p className="mt-1 font-mono text-sm">{searchValue || "(empty)"}</p>
+      </div>
+    </>
+  );
+}

apps/portal/src/content/docs/components/form.mdx

@@ -0,0 +1,71 @@
+---
+title: Form
+description: Form component
+---
+
+The `Form` component is a container for form elements, providing a structured layout and validation capabilities.
+
+import { DocsPage } from "@/components/docs-page";
+import SearchInputDoc from "@/components/samples/SearchInputDoc";
+import React from "react";
+
+```tsx
+import { useForm } from "react-hook-form";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+//...
+
+// Define the validation schema with zod
+const formSchema = z.object({
+  inputField: z.string().min(3, "Input must be at least 3 characters"),
+});
+
+// Infer the type from the schema
+type FormValues = z.infer<typeof formSchema>;
+
+export const ExampleFormComponent = () => {
+  const [submittedValue, setSubmittedValue] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // Initialize react-hook-form with zod resolver
+  const formMethods = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      inputField: "some text",
+    },
+  });
+
+  const { register, handleSubmit } = formMethods;
+
+  // Handle form submission
+  const onSubmit = (data: FormValues) => {
+    setSubmittedValue(data.inputField);
+  };
+
+  return (
+    <div className="w-full max-w-md">
+      {/* ‼️ It is mandatory to pass all return values from useForm to FormWrapper  */}
+      <FormWrapper {...formMethods} onSubmit={handleSubmit(onSubmit)}>
+        <FormInput.Text
+          ref={inputRef}
+          label="Input Field"
+          placeholder="Enter at least 3 characters"
+          {...register("inputField")}
+        />
+
+        <Button type="submit" disabled={methods.formState.isSubmitting}>
+          {formMethods.formState.isSubmitting ? "Submitting..." : "Submit"}
+        </Button>
+
+        {submittedValue && (
+          <div className="mt-4 p-3 bg-green-50 text-green-800 rounded">
+            Submitted value: {submittedValue}
+          </div>
+        )}
+      </FormWrapper>
+    </div>
+  );
+};
+```