Lenses docs (#1153)

* Add initial documentation for lenses

* Add documentation and links for `useLens` component in ApiGallery and MenuLinks

* Enhance `uselens.mdx` documentation with detailed examples for basic usage, addressing common challenges in managing complex forms in React. Updated sections include type-safe field access, component reusability, and prop drilling issues.

* Refactor `uselens.mdx` documentation by improving section headings and removing outdated examples. Added clarity to the motivation and core operations sections, while optimizing the structure for better readability.

* Enhance `uselens.mdx` documentation by adding comprehensive sections on core types, hooks, and lens operations. Included detailed examples for `useLens`, `reflect`, and `interop` methods, improving clarity and usability for developers working with React Hook Form integration.

* Refine `uselens.mdx` documentation by enhancing clarity and consistency in examples. Updated sections on core types, hooks, and lens operations, ensuring type-safe usage and improved readability for developers integrating with React Hook Form.

* Add badges for NPM version, downloads, and GitHub stars in `uselens.mdx` documentation to enhance visibility and provide quick access to package metrics.

* Revise `uselens.mdx` documentation to clarify challenges in managing complex forms with React Hook Form. Updated sections on type safety, component reusability, and error-prone string-based field paths, enhancing overall readability and developer guidance.

* Update ApiGallery component description to provide a clearer explanation of `useLens` functionality, emphasizing type-safe lenses for reusable form components and composability.

* Refine `uselens.mdx` documentation and `ApiGallery` component description for improved clarity. Updated language to emphasize type-safe manipulation of data structures and streamlined explanations of core functionalities, enhancing overall readability for developers.

* Fix formatting issues in `uselens.mdx` documentation by removing unnecessary semicolons and streamlining component examples for improved clarity and consistency.

* Fix minor formatting issue in `uselens.mdx` by removing an unnecessary semicolon in the `SharedComponent` example for improved code clarity.

* Remove NPM badges from `uselens.mdx` documentation to streamline content and focus on the core functionalities of the `useLens` hook.

* Enhance `uselens.mdx` documentation by adding detailed sections on the `useLens` hook, including props, dependency array usage, and core operations. Improved clarity with examples and performance optimization tips, ensuring better guidance for developers working with complex forms in React Hook Form.

---------

Co-authored-by: Beier (Bill) <[email protected]>

Author: aspirisen

src/components/ApiGallery.tsx

@@ -162,6 +162,20 @@ export default function ApiGallery() {
               </Link>
             </div>
           </li>
+          <li>
+            <div>
+              <h3>
+                <code>{`</>`}</code>useLens
+              </h3>
+              <p>
+                Type-safe lenses for building reusable and shareable form
+                components with precise focus on form fields.
+              </p>
+              <Link href="/docs/uselens" aria-label="read more about useLens">
+                Read More ▸
+              </Link>
+            </div>
+          </li>
           <li>
             <div>
               <h3>

src/components/Menu/MenuLinks.ts

@@ -160,6 +160,10 @@ export const apiLinks: Pages = [
     pathname: "/docs/usefieldarray",
     name: "useFieldArray",
   },
+  {
+    pathname: "/docs/uselens",
+    name: "useLens",
+  },
   {
     pathname: "/docs/createFormControl",
     name: "createFormControl",