docs(Pagination): add basic content

shervinchen · May 9, 2024 · ddd782e · ddd782e
1 parent 42b04f2
commit ddd782e
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 5 deletions.
diff --git a/data/sidebars.ts b/data/sidebars.ts
@@ -101,6 +101,15 @@ export const SIDEBARS = [
           },
         ],
       },
+      {
+        name: 'Navigation',
+        children: [
+          {
+            name: 'Pagination',
+            url: '/components/pagination',
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/demo/pagination/index.tsx b/demo/pagination/index.tsx
@@ -1,10 +1,41 @@
+import { useState } from 'react';
 import Unit from '../Unit';
 import { Pagination } from '@/packages';
 
 export function DemoPaginationDefault() {
   return (
     <Unit layout="row">
-      <Pagination defaultPage={1} count={124} limit={10} />
+      <Pagination defaultPage={1} count={100} />
+    </Unit>
+  );
+}
+
+export function DemoPaginationDefaultPage() {
+  return (
+    <Unit layout="row">
+      <Pagination defaultPage={3} count={100} />
+    </Unit>
+  );
+}
+
+export function DemoPaginationControlled() {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      page={page}
+      count={100}
+      onChange={(value) => {
+        setPage(value);
+      }}
+    />
+  );
+}
+
+export function DemoPaginationLimit() {
+  return (
+    <Unit layout="row">
+      <Pagination defaultPage={1} count={100} limit={20} />
     </Unit>
   );
 }
diff --git a/src/app/(article)/components/checkbox/checkbox.mdx b/src/app/(article)/components/checkbox/checkbox.mdx
@@ -226,7 +226,7 @@ import { Checkbox } from 'raw-ui';
 | Prop           | Description                                 | Type                                                   | Default |
 | -------------- | ------------------------------------------- | ------------------------------------------------------ | ------- |
 | defaultChecked | checked or not by default (uncontrolled)    | boolean                                                | false   |
-| checked        | checked or not (controlled)                 | boolean                                                | false   |
+| checked        | checked or not (controlled)                 | boolean                                                | -       |
 | value          | unique identification value (only in group) | string \| number                                       | -       |
 | indeterminate  | Partially checked                           | boolean                                                | false   |
 | disabled       | disable current checkbox                    | boolean                                                | false   |

diff --git a/src/app/(article)/components/input/input.mdx b/src/app/(article)/components/input/input.mdx
@@ -212,7 +212,7 @@ import { Input } from 'raw-ui';
 | width        | input width                  | string                                                      | 'md'      |
 | disabled     | disable input                | boolean                                                     | false     |
 | readOnly     | read only input              | boolean                                                     | false     |
-| defaultValue | default value (uncontrolled) | string                                                      | -         |
+| defaultValue | default value (uncontrolled) | string                                                      | ''        |
 | value        | input value (controlled)     | string                                                      | -         |
 | onChange     | change event handler         | (event: React.ChangeEvent\<HTMLInputElement\>) => void      | -         |
 | ...          | native props                 | React.InputHTMLAttributes                                   | -         |
diff --git a/src/app/(article)/components/pagination/mdx-content.tsx b/src/app/(article)/components/pagination/mdx-content.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import MDX from './pagination.mdx';
+
+export default function MDXContent() {
+  return <MDX />;
+}
diff --git a/src/app/(article)/components/pagination/page.tsx b/src/app/(article)/components/pagination/page.tsx
@@ -0,0 +1,10 @@
+import { Metadata } from 'next';
+import MDXContent from './mdx-content';
+
+export const metadata: Metadata = {
+  title: 'Pagination - Raw UI',
+};
+
+export default function Page() {
+  return <MDXContent />;
+}
diff --git a/src/app/(article)/components/pagination/pagination.mdx b/src/app/(article)/components/pagination/pagination.mdx
@@ -0,0 +1,62 @@
+import Unit from '@/demo/Unit';
+import { Pagination } from '@/packages';
+import Playground from '@/src/app/components/playground';
+
+# Pagination
+
+Navigation between multiple pages.
+
+## Import
+
+```tsx
+import { Pagination } from 'raw-ui';
+```
+
+## Default Page
+
+<Playground
+  scope={{ Unit, Pagination }}
+  code={`
+<Pagination defaultPage={3} count={100} />
+`}
+/>
+
+## Controlled
+
+<Playground
+  scope={{ Unit, Pagination }}
+  code={`
+() => {
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <Pagination
+      page={page}
+      count={100}
+      onChange={(value) => {
+        setPage(value);
+      }}
+    />
+  );
+}
+`}
+/>
+
+## Limit
+
+<Playground
+  scope={{ Unit, Pagination }}
+  code={`
+<Pagination defaultPage={1} count={100} limit={20} />
+`}
+/>
+
+## API
+
+| Prop        | Description                          | Type                   | Default |
+| ----------- | ------------------------------------ | ---------------------- | ------- |
+| defaultPage | default selected page (uncontrolled) | number                 | 1       |
+| page        | current page (controlled)            | number                 | -       |
+| count       | total count of pages                 | number                 | 1       |
+| limit       | limit count of data items per page   | number                 | 10      |
+| onChange    | change event handler                 | (page: number) => void | -       |
diff --git a/src/app/(article)/components/radio/radio.mdx b/src/app/(article)/components/radio/radio.mdx
@@ -150,7 +150,7 @@ import { Radio } from 'raw-ui';
 | Prop           | Description                                 | Type                                                   | Default |
 | -------------- | ------------------------------------------- | ------------------------------------------------------ | ------- |
 | defaultChecked | selected or not by default (uncontrolled)   | boolean                                                | false   |
-| checked        | selected or not (controlled)                | boolean                                                | false   |
+| checked        | selected or not (controlled)                | boolean                                                | -       |
 | value          | unique identification value (only in group) | string \| number                                       | -       |
 | disabled       | disable current radio                       | boolean                                                | false   |
 | onChange       | change event handler                        | (event: React.ChangeEvent\<HTMLInputElement\>) => void | -       |

diff --git a/src/app/(article)/components/toggle/toggle.mdx b/src/app/(article)/components/toggle/toggle.mdx
@@ -69,7 +69,7 @@ import { Toggle } from 'raw-ui';
 | Prop           | Description                              | Type                                                   | Default |
 | -------------- | ---------------------------------------- | ------------------------------------------------------ | ------- |
 | defaultChecked | checked or not by default (uncontrolled) | boolean                                                | false   |
-| checked        | checked or not (controlled)              | boolean                                                | false   |
+| checked        | checked or not (controlled)              | boolean                                                | -       |
 | disabled       | disable toggle                           | boolean                                                | false   |
 | onChange       | change event handler                     | (event: React.ChangeEvent\<HTMLInputElement\>) => void | -       |
 | ...            | native props                             | React.LabelHTMLAttributes                              | -       |