Update documentation structure

[Moshyfawn]

A general issue to keep track of docs structure related points and feedback.

[ricci2511]

I could provide some help if you tell me what type of changes are planned or if there is any sort of roadmap

[aranlucas]

I think there's a bunch to learn from https://github.com/reactjs/react.dev in terms of documentation.

I have some ideas that would be interesting after https://github.com/react-hook-form/documentation/pull/940 gets merged. (Since they are using NextJS too)

Some ideas in no particular order:

1. Using MDX for maintaining content. example: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/index.md. (much easier to maintain compared to https://github.com/react-hook-form/documentation/blob/7815667bd1664e4d32b526a2dc1779e833e581cb/src/components/UseForm.tsx)
2. Adding a "Learn" section that could go through the pains of forms in react. Controlled inputs -> Uncontrolled inputs -> Using RHF. Could also incorporate the current form builder
3. Moving TS as default examples (This could remove entire TS tab).
4. Updating documentation from JSDoc extraction. Source code seems to be well documented https://github.com/react-hook-form/react-hook-form/blob/5b41f16cc03c63d816a0120fce51215adc7998b6/src/useController.ts#L48 so might be useful to only need to write once. For example, Form component is nowhere to be found in docs although its pretty cool https://github.com/react-hook-form/react-hook-form/blob/5b41f16cc03c63d816a0120fce51215adc7998b6/src/form.tsx (even in beta stage)

[bluebill1049]

@aranlucas those ideas are amazing and would love to pursue them.

[aranlucas]

Last few PR's have allowed me to do some cool stuff.

Since most of the content is now in MDX, using content layer + app directory has allowed me use Tailwind prose for styling https://tailwindcss.com/docs/typography-plugin and using alot of shadcn components. (button, scrollArea, etc)

Curious if this is too much off brand, and what are some thoughts before going in super deep.

https://github.com/aranlucas/documentation/tree/tailwind/src/app/v2/%5B...slug%5D

[aranlucas]

To elaborate on why I'm using the app directory to make this change.

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

Basically, you need to create a whole new app to do this (clean slate). This means that I started without importing the global "layout.css". Right now, I have all of my changes under a /v2/* route and so they can both co-exist. They can both mostly use the same components, but some of the new components will have a "use client" at the top. However, if some of the shared components are using tailwind styling, that may need to be added to "layout.css"

If you wanted to make a large change, this would be the best time since you don't need to worry about breaking the "v1" routes (since they don't really share any global logic).

If you wanted to use both app and pages, they may need to share more common layout. Or they can be kept separate until all of the details in v2 are complete. Both are valid strategies

They both rely on the same content (mdx files) so the information should be the same