docs: migrate docs site to rspress

.github/workflows/deploy-docs.yml

@@ -31,7 +31,7 @@ jobs:
         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
+        run: node scripts/generate-component-docs.js origin/5.0 docs/src/data/componentDocs5x.json
 
       - name: Build docs
         run: yarn --cwd docs build

docs/.gitignore

@@ -3,10 +3,14 @@
 
 # Production
 /build
+/test-results
+/visual/output
 
 # Generated files
 .docusaurus
 .cache-loader
+/public/llms.txt
+/public/react-native-paper
 
 # Misc
 .DS_Store

docs/5.x/_nav.json

@@ -0,0 +1,17 @@
+[
+  {
+    "text": "Guides",
+    "link": "/docs/guides/getting-started",
+    "activeMatch": "^/docs/guides/"
+  },
+  {
+    "text": "Components",
+    "link": "/docs/components/ActivityIndicator",
+    "activeMatch": "^/docs/components/"
+  },
+  {
+    "text": "Showcase",
+    "link": "/docs/showcase",
+    "activeMatch": "^/docs/showcase$"
+  }
+]

docs/5.x/docs/_meta.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "dir-section-header",
+    "name": "guides",
+    "label": "Guides"
+  },
+  {
+    "type": "dir-section-header",
+    "name": "components",
+    "label": "Components"
+  },
+  {
+    "type": "file",
+    "name": "showcase",
+    "label": "Showcase"
+  }
+]

docs/5.x/docs/components/ActivityIndicator.mdx

@@ -0,0 +1,96 @@
+---
+title: ActivityIndicator
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+Activity indicator is used to present progress of some activity in the app.
+It can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.
+
+
+
+
+  <ScreenshotTabs screenshotData={"screenshots/activity-indicator.gif"} baseUrl="/react-native-paper/"/>
+
+
+## Usage
+```js
+import * as React from 'react';
+import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+
+const MyComponent = () => (
+  <ActivityIndicator animating={true} color={MD2Colors.red800} />
+);
+
+export default MyComponent;
+```
+
+
+  ## Props
+  <span />
+
+
+
+<div>
+
+### animating  
+
+</div>
+
+  <PropTable componentLink="ActivityIndicator" prop="animating" version="5.x" />
+
+<div>
+
+### color  
+
+</div>
+
+  <PropTable componentLink="ActivityIndicator" prop="color" version="5.x" />
+
+<div>
+
+### size  
+
+</div>
+
+  <PropTable componentLink="ActivityIndicator" prop="size" version="5.x" />
+
+<div>
+
+### hidesWhenStopped  
+
+</div>
+
+  <PropTable componentLink="ActivityIndicator" prop="hidesWhenStopped" version="5.x" />
+
+<div>
+
+### style  
+
+</div>
+
+  <PropTable componentLink="ActivityIndicator" prop="style" version="5.x" />
+
+<div>
+
+### theme  
+
+</div>
+
+  <PropTable componentLink="ActivityIndicator" prop="theme" version="5.x" />
+
+
+
+<span />
+
+
+  ## Theme colors
+
+  <ThemeColorsTable themeColorsData={{"-":{"borderColor":"theme.colors.primary"}}} componentName="ActivityIndicator" />
+
+
+<span />

docs/5.x/docs/components/Appbar/Appbar.mdx

@@ -0,0 +1,174 @@
+---
+title: Appbar
+---
+
+import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@site/src/components/ExtendedExample.tsx';
+
+A component to display action items in a bar. It can be placed at the top or bottom.
+The top bar usually contains the screen title, controls such as navigation buttons, menu button etc.
+The bottom bar usually provides access to a drawer and up to four actions.
+
+By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
+See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations
+
+
+
+
+  <ScreenshotTabs screenshotData={"screenshots/appbar.png"} baseUrl="/react-native-paper/"/>
+
+
+## Usage
+### Top bar
+```js
+import * as React from 'react';
+import { Appbar } from 'react-native-paper';
+
+const MyComponent = () => (
+  <Appbar.Header>
+    <Appbar.BackAction onPress={() => {}} />
+    <Appbar.Content title="Title" />
+    <Appbar.Action icon="calendar" onPress={() => {}} />
+    <Appbar.Action icon="magnify" onPress={() => {}} />
+  </Appbar.Header>
+);
+
+export default MyComponent;
+```
+
+### Bottom bar
+```js
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { Appbar, FAB, useTheme } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const BOTTOM_APPBAR_HEIGHT = 80;
+const MEDIUM_FAB_HEIGHT = 56;
+
+const MyComponent = () => {
+  const { bottom } = useSafeAreaInsets();
+  const theme = useTheme();
+
+  return (
+    <Appbar
+      style={[
+        styles.bottom,
+        {
+          height: BOTTOM_APPBAR_HEIGHT + bottom,
+          backgroundColor: theme.colors.elevation.level2,
+        },
+      ]}
+      safeAreaInsets={{ bottom }}
+    >
+      <Appbar.Action icon="archive" onPress={() => {}} />
+      <Appbar.Action icon="email" onPress={() => {}} />
+      <Appbar.Action icon="label" onPress={() => {}} />
+      <Appbar.Action icon="delete" onPress={() => {}} />
+      <FAB
+        mode="flat"
+        size="medium"
+        icon="plus"
+        onPress={() => {}}
+        style={[
+          styles.fab,
+          { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },
+        ]}
+      />
+    </Appbar>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottom: {
+    backgroundColor: 'aquamarine',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  fab: {
+    position: 'absolute',
+    right: 16,
+  },
+});
+
+export default MyComponent;
+```
+
+
+  ## Props
+  <span />
+
+
+
+<div>
+
+### dark  
+
+</div>
+
+  <PropTable componentLink="Appbar/Appbar" prop="dark" version="5.x" />
+
+<div>
+
+### children (required) 
+
+</div>
+
+  <PropTable componentLink="Appbar/Appbar" prop="children" version="5.x" />
+
+<div>
+
+### mode  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
+
+</div>
+
+  <PropTable componentLink="Appbar/Appbar" prop="mode" version="5.x" />
+
+<div>
+
+### elevated  <span class="badge badge-supported "><span class="badge-text">Available in v5.x with theme version 3</span></span>
+
+</div>
+
+  <PropTable componentLink="Appbar/Appbar" prop="elevated" version="5.x" />
+
+<div>
+
+### safeAreaInsets  
+
+</div>
+
+  <PropTable componentLink="Appbar/Appbar" prop="safeAreaInsets" version="5.x" />
+
+<div>
+
+### theme  
+
+</div>
+
+  <PropTable componentLink="Appbar/Appbar" prop="theme" version="5.x" />
+
+<div>
+
+### style  
+
+</div>
+
+  <PropTable componentLink="Appbar/Appbar" prop="style" version="5.x" />
+
+
+
+<span />
+
+
+  ## Theme colors
+
+  <ThemeColorsTable themeColorsData={{"default":{"backgroundColor":"theme.colors.surface"},"elevated":{"backgroundColor":"theme.colors.elevation.level2"}}} componentName="Appbar" />
+
+
+<span />