chore: setup versioned docs with docusaurus (#5001)

Author: satya164

.github/workflows/deploy-docs.yml

@@ -24,10 +24,15 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
 
       - name: Setup
         uses: ./.github/actions/setup
 
+      - name: Generate 5.x component docs
+        run: node scripts/generate-component-docs.ts origin/5.0 docs/src/data/componentDocs5x.json
+
       - name: Build docs
         run: yarn --cwd docs build
 

docs/component-docs-plugin/useDocs.tsx

@@ -1,7 +1,10 @@
+import { useActiveDocContext } from '@docusaurus/plugin-content-docs/client';
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import { usePluginData } from '@docusaurus/useGlobalData';
 
+import componentDocs5x from '../src/data/componentDocs5x.json';
+
 const pluginName = 'component-docs-plugin';
 
 export interface ComponentDocsPluginData {
@@ -27,19 +30,29 @@ export interface Data {
 
 export interface Prop {
   required: boolean;
-  tsType: {
+  tsType?: {
     name: string;
     raw?: string;
-  };
+  } | null;
   description: string;
-  defaultValue: {
+  defaultValue?: {
     value: string;
-  };
+  } | null;
 }
 
+const versionedDocs: { [versionName: string]: ComponentDocsPluginData } = {
+  '5.x': componentDocs5x,
+};
+
 function useDoc(withPath: string) {
+  const activeDocContext = useActiveDocContext(undefined);
   const pluginData = usePluginData(pluginName) as ComponentDocsPluginData;
-  return pluginData?.docs?.[withPath];
+  const versionName = activeDocContext.activeVersion?.name;
+  const versionedDoc = versionName
+    ? versionedDocs[versionName]?.docs?.[withPath]
+    : undefined;
+
+  return versionedDoc ?? pluginData?.docs?.[withPath];
 }
 
 export default useDoc;

docs/docs/guides/07-contributing.mdx

@@ -60,7 +60,12 @@ const config = {
     [
       './component-docs-plugin',
       {
-        docsRootDir: path.join(__dirname, 'docs', 'components'),
+        docsRootDir: path.join(
+          __dirname,
+          'versioned_docs',
+          'version-6.x',
+          'components'
+        ),
         libsRootDir: path.join(__dirname, '..', 'src', 'components'),
         pages: {
           ActivityIndicator: 'ActivityIndicator',
@@ -195,12 +200,24 @@ const config = {
       ({
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
+          includeCurrentVersion: false,
+          lastVersion: '5.x',
+          versions: {
+            '6.x': {
+              label: '6.x',
+              banner: 'unreleased',
+            },
+            '5.x': {
+              label: '5.x',
+              banner: 'none',
+            },
+          },
           editUrl: (params) => {
             const urlToMain =
               'https://github.com/callstack/react-native-paper/tree/main';
 
             if (params.docPath.includes('guides')) {
-              return `${urlToMain}/docs/docs/${params.docPath}`;
+              return `${urlToMain}/docs/${params.versionDocsDirPath}/${params.docPath}`;
             }
 
             const customUrls = {
@@ -260,24 +277,23 @@ const config = {
             label: 'Showcase',
           },
           {
-            type: 'dropdown',
-            label: 'v5.x',
+            type: 'docsVersionDropdown',
             position: 'right',
-            items: [
+            dropdownItemsAfter: [
               {
-                label: 'v4.x',
+                label: '4.x',
                 href: `${publicUrl}4.0/`,
               },
               {
-                label: 'v3.x',
+                label: '3.x',
                 href: `${publicUrl}3.0/`,
               },
               {
-                label: 'v2.x',
+                label: '2.x',
                 href: `${publicUrl}2.0/`,
               },
               {
-                label: 'v1.x',
+                label: '1.x',
                 href: `${publicUrl}1.0/`,
               },
             ],