Feat/create routes v2

apps/docs/components/version-switcher.jsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { usePathname, useRouter } from 'next/navigation';
+
+const versions = [
+'v1','v2'
+];
+
+export default function VersionSwitcher() {
+  const pathname = usePathname(); 
+  const router = useRouter();
+
+  const currentVersion = pathname.split('/')[2] || 'v2';
+
+  const handleChange = (e) => {
+    const newVersion = e.target.value; 
+    router.push(`/docs/${newVersion}/getting-started`);
+  };
+
+  return (
+    <select
+      value={currentVersion}
+      onChange={handleChange}
+      style={{ borderWidth:1, paddingLeft: 8, paddingRight:8, paddingTop:4, paddingBottom:4, alignItems:'center' }}
+    >
+      {versions.map((version) => (
+        <option key={version} value={version}>
+          {version}
+        </option>
+      ))}
+    </select>
+  );
+}

apps/docs/next.config.mjs

@@ -59,12 +59,12 @@ export default withNextra({
     },
     {
       source: '/docs.([a-zA-Z-]+)',
-      destination: '/docs/getting-started',
+      destination: '/docs/v2/getting-started',
       statusCode: 302,
     },
     {
       source: '/docs',
-      destination: '/docs/getting-started',
+      destination: '/docs/v2/getting-started',
       statusCode: 302,
     },
   ],

apps/docs/pages/docs/v2/_meta.en-US.json

@@ -0,0 +1,3 @@
+{
+  "getting-started": "Getting Started"
+}

apps/docs/pages/docs/v2/getting-started.en-US.mdx

@@ -0,0 +1,63 @@
+---
+searchable: true
+---
+
+import { Link } from 'nextra-theme-docs';
+import { Callout, FileTree } from 'nextra/components';
+
+# Get started
+
+## Requirements
+
+<Callout type="warning" emoji="⚠️">
+  This library now needs `react-native-gesture-handler` to be installed inside the React Native project.
+  If you use Expo Go then you have nothing to do as Gesture Handler is integrated inside Expo SDK.
+  But if you use a Bare React Native project, please follow those instructions in first : https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/
+</Callout>
+
+## Installation
+
+With pnpm :
+
+```sh
+pnpm add react-native-ficus-ui
+```
+
+With npm :
+
+```sh
+npm install react-native-ficus-ui
+```
+
+With yarn :
+
+```sh
+yarn add react-native-ficus-ui
+```
+
+Then, install the pods for iOS :
+
+```sh
+cd ios && pod install
+```
+
+## Usage
+
+You need to wrap your root component inside ThemeProvider component from react-native-ficus-ui.
+
+```js
+import { AppRegistry } from 'react-native';
+import { ThemeProvider } from 'react-native-ficus-ui';
+
+import App from './src/App';
+
+export default function Main() {
+  return (
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  );
+}
+
+AppRegistry.registerComponent('main', () => Main);
+```

apps/docs/pages/index.en-US.mdx

@@ -23,7 +23,7 @@ import Image from 'next/image';
 
   <div className="flex justify-center mt-8">
     <div className="flex space-x-3">
-      <a href="/docs/getting-started">
+      <a href="/docs/v2/getting-started">
         <button className="bg-brand-500 text-white px-6 py-3 text-lg flex items-center rounded-lg shadow hover:bg-brand-600">
           Get started
 

apps/docs/theme.config.tsx

@@ -5,6 +5,7 @@ import type { DocsThemeConfig } from 'nextra-theme-docs';
 import { LocaleSwitch, useConfig, useTheme } from 'nextra-theme-docs';
 import type { ComponentProps, ReactElement } from 'react';
 import { Badge } from 'react-native-ficus-ui';
+import VersionSwitcher from '@components/version-switcher';
 
 export const FicusLogo = (props: ComponentProps<'svg'>): ReactElement => (
   <svg viewBox="0 0 200 250" width="30" xmlns="http://www.w3.org/2000/svg">
@@ -57,6 +58,7 @@ const FOOTER_LINK_TEXT_DARK = {
   ),
 };
 
+
 const config: DocsThemeConfig = {
   darkMode: true,
   docsRepositoryBase:
@@ -133,7 +135,12 @@ const config: DocsThemeConfig = {
     );
   },
   navbar: {
-    extraContent: LocaleSwitch,
+    extraContent: (
+      <>
+        <VersionSwitcher />
+        <LocaleSwitch />
+      </>
+    ),
   },
   nextThemes: {
     defaultTheme: 'light',
@@ -145,17 +152,21 @@ const config: DocsThemeConfig = {
   sidebar: {
     autoCollapse: true,
     defaultMenuCollapseLevel: 1,
-    titleComponent: ({ title, type }) =>
-      type === 'separator' ? (
+    titleComponent: ({ title, type }) => {
+      return type === 'separator' ? (
         <div className="flex items-center gap-2">
           <FicusLogo className="h-1.5 shrink-0" />
           {title}
         </div>
       ) : (
         <div className="flex flex-1 justify-between align-middle">
-          <span>{title}</span> {(title === 'Avatar' || title === 'Badge' || title === 'PinInput' || title === 'Responsive' || title === 'Slider' || title === 'Tabs' || title === 'IconButton' || title === 'DraggableModal') && <Badge colorScheme="purple" fontSize="sm" alignSelf="center">New</Badge>}
+          <span>{title}</span> 
+          {(title === 'Avatar' || title === 'Badge' || title === 'PinInput' || title === 'Responsive' || title === 'Slider' || title === 'Tabs' || title === 'IconButton' || title === 'DraggableModal') && (
+            <Badge colorScheme="purple" fontSize="sm" alignSelf="center">New</Badge>
+          )}
         </div>
-      ),
+      );
+    },
     toggleButton: true,
   },
   toc: {