From 519afdbb35346ca88c9420c86cc83ef0a621cefa Mon Sep 17 00:00:00 2001 From: WK Wong Date: Fri, 15 Nov 2024 20:43:39 +0800 Subject: [PATCH 1/2] refactor(docs): tab dx --- .../content/components/tabs/colors.raw.jsx | 17 +++ apps/docs/content/components/tabs/colors.ts | 25 +--- .../components/tabs/controlled.raw.jsx | 38 +++++ .../content/components/tabs/controlled.ts | 38 +---- .../components/tabs/custom-styles.raw.jsx | 125 ++++++++++++++++ .../content/components/tabs/custom-styles.ts | 108 +------------- .../components/tabs/disabled-item.raw.jsx | 36 +++++ .../content/components/tabs/disabled-item.ts | 32 +--- .../content/components/tabs/disabled.raw.jsx | 36 +++++ apps/docs/content/components/tabs/disabled.ts | 32 +--- .../content/components/tabs/dynamic.raw.jsx | 38 +++++ apps/docs/content/components/tabs/dynamic.ts | 38 +---- .../docs/content/components/tabs/form.raw.jsx | 67 +++++++++ .../docs/content/components/tabs/form.raw.tsx | 68 +++++++++ apps/docs/content/components/tabs/form.ts | 137 +----------------- .../content/components/tabs/icons.raw.jsx | 106 ++++++++++++++ apps/docs/content/components/tabs/icons.ts | 95 +----------- .../content/components/tabs/placement.raw.jsx | 51 +++++++ .../docs/content/components/tabs/placement.ts | 46 +----- .../content/components/tabs/radius.raw.jsx | 17 +++ apps/docs/content/components/tabs/radius.ts | 24 +-- .../content/components/tabs/sizes.raw.jsx | 17 +++ apps/docs/content/components/tabs/sizes.ts | 22 +-- .../content/components/tabs/usage.raw.jsx | 36 +++++ apps/docs/content/components/tabs/usage.ts | 32 +--- .../content/components/tabs/variants.raw.jsx | 17 +++ apps/docs/content/components/tabs/variants.ts | 23 +-- .../content/components/tabs/vertical.raw.jsx | 43 ++++++ apps/docs/content/components/tabs/vertical.ts | 38 +---- 29 files changed, 727 insertions(+), 675 deletions(-) create mode 100644 apps/docs/content/components/tabs/colors.raw.jsx create mode 100644 apps/docs/content/components/tabs/controlled.raw.jsx create mode 100644 apps/docs/content/components/tabs/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/tabs/disabled-item.raw.jsx create mode 100644 apps/docs/content/components/tabs/disabled.raw.jsx create mode 100644 apps/docs/content/components/tabs/dynamic.raw.jsx create mode 100644 apps/docs/content/components/tabs/form.raw.jsx create mode 100644 apps/docs/content/components/tabs/form.raw.tsx create mode 100644 apps/docs/content/components/tabs/icons.raw.jsx create mode 100644 apps/docs/content/components/tabs/placement.raw.jsx create mode 100644 apps/docs/content/components/tabs/radius.raw.jsx create mode 100644 apps/docs/content/components/tabs/sizes.raw.jsx create mode 100644 apps/docs/content/components/tabs/usage.raw.jsx create mode 100644 apps/docs/content/components/tabs/variants.raw.jsx create mode 100644 apps/docs/content/components/tabs/vertical.raw.jsx diff --git a/apps/docs/content/components/tabs/colors.raw.jsx b/apps/docs/content/components/tabs/colors.raw.jsx new file mode 100644 index 0000000000..38163ff07a --- /dev/null +++ b/apps/docs/content/components/tabs/colors.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/colors.ts b/apps/docs/content/components/tabs/colors.ts index ff9140ba8b..d5bef810aa 100644 --- a/apps/docs/content/components/tabs/colors.ts +++ b/apps/docs/content/components/tabs/colors.ts @@ -1,27 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger" - ]; - - return ( -
- {colors.map((color) => ( - - - - - - ))} -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/controlled.raw.jsx b/apps/docs/content/components/tabs/controlled.raw.jsx new file mode 100644 index 0000000000..9038268ef4 --- /dev/null +++ b/apps/docs/content/components/tabs/controlled.raw.jsx @@ -0,0 +1,38 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("photos"); + + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/controlled.ts b/apps/docs/content/components/tabs/controlled.ts index 54ae1ee402..2c3f0cacb4 100644 --- a/apps/docs/content/components/tabs/controlled.ts +++ b/apps/docs/content/components/tabs/controlled.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("photos"); - - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/custom-styles.raw.jsx b/apps/docs/content/components/tabs/custom-styles.raw.jsx new file mode 100644 index 0000000000..d0cdf054d8 --- /dev/null +++ b/apps/docs/content/components/tabs/custom-styles.raw.jsx @@ -0,0 +1,125 @@ +import {Tabs, Tab, Chip} from "@nextui-org/react"; + +export const GalleryIcon = (props) => ( + +); + +export const MusicIcon = (props) => ( + +); + +export const VideoIcon = (props) => ( + +); + +export default function App() { + return ( +
+ + + + Photos + + 9 + +
+ } + /> + + + Music + + 3 + + + } + /> + + + Videos + + 1 + + + } + /> + + + ); +} diff --git a/apps/docs/content/components/tabs/custom-styles.ts b/apps/docs/content/components/tabs/custom-styles.ts index ff197991d6..da3ea9093a 100644 --- a/apps/docs/content/components/tabs/custom-styles.ts +++ b/apps/docs/content/components/tabs/custom-styles.ts @@ -1,113 +1,7 @@ -const GalleryIcon = `export const GalleryIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const VideoIcon = `export const VideoIcon = (props) => ( - -);`; - -const App = `import {Tabs, Tab, Chip} from "@nextui-org/react"; -import {GalleryIcon} from "./GalleryIcon"; -import {MusicIcon} from "./MusicIcon"; -import {VideoIcon} from "./VideoIcon"; - -export default function App() { - return ( -
- - - - Photos - 9 -
- } - /> - - - Music - 3 - - } - /> - - - Videos - 1 - - } - /> - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/GalleryIcon.jsx": GalleryIcon, - "/MusicIcon.jsx": MusicIcon, - "/VideoIcon.jsx": VideoIcon, }; export default { diff --git a/apps/docs/content/components/tabs/disabled-item.raw.jsx b/apps/docs/content/components/tabs/disabled-item.raw.jsx new file mode 100644 index 0000000000..36b3b20580 --- /dev/null +++ b/apps/docs/content/components/tabs/disabled-item.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/disabled-item.ts b/apps/docs/content/components/tabs/disabled-item.ts index 9106c67548..90d0beb6b7 100644 --- a/apps/docs/content/components/tabs/disabled-item.ts +++ b/apps/docs/content/components/tabs/disabled-item.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./disabled-item.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/disabled.raw.jsx b/apps/docs/content/components/tabs/disabled.raw.jsx new file mode 100644 index 0000000000..d37812b165 --- /dev/null +++ b/apps/docs/content/components/tabs/disabled.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/disabled.ts b/apps/docs/content/components/tabs/disabled.ts index 4e5449d763..1a215cc91f 100644 --- a/apps/docs/content/components/tabs/disabled.ts +++ b/apps/docs/content/components/tabs/disabled.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/dynamic.raw.jsx b/apps/docs/content/components/tabs/dynamic.raw.jsx new file mode 100644 index 0000000000..53570bebfe --- /dev/null +++ b/apps/docs/content/components/tabs/dynamic.raw.jsx @@ -0,0 +1,38 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + let tabs = [ + { + id: "photos", + label: "Photos", + content: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + }, + { + id: "music", + label: "Music", + content: + "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + }, + { + id: "videos", + label: "Videos", + content: + "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", + }, + ]; + + return ( +
+ + {(item) => ( + + + {item.content} + + + )} + +
+ ); +} diff --git a/apps/docs/content/components/tabs/dynamic.ts b/apps/docs/content/components/tabs/dynamic.ts index 3e13d8eab0..5d3c97bb9a 100644 --- a/apps/docs/content/components/tabs/dynamic.ts +++ b/apps/docs/content/components/tabs/dynamic.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - let tabs = [ - { - id: "photos", - label: "Photos", - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." - }, - { - id: "music", - label: "Music", - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." - }, - { - id: "videos", - label: "Videos", - content: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." - } - ]; - - return ( -
- - {(item) => ( - - - - {item.content} - - - - )} - -
- ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/form.raw.jsx b/apps/docs/content/components/tabs/form.raw.jsx new file mode 100644 index 0000000000..61422dd9fa --- /dev/null +++ b/apps/docs/content/components/tabs/form.raw.jsx @@ -0,0 +1,67 @@ +import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("login"); + + return ( +
+ + + + +
+ + +

+ Need to create an account?{" "} + setSelected("sign-up")}> + Sign up + +

+
+ +
+
+ + +
+ + + +

+ Already have an account?{" "} + setSelected("login")}> + Login + +

+
+ +
+
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/form.raw.tsx b/apps/docs/content/components/tabs/form.raw.tsx new file mode 100644 index 0000000000..1e3e7f4c79 --- /dev/null +++ b/apps/docs/content/components/tabs/form.raw.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("login"); + + return ( +
+ + + + +
+ + +

+ Need to create an account?{" "} + setSelected("sign-up")}> + Sign up + +

+
+ +
+
+ + +
+ + + +

+ Already have an account?{" "} + setSelected("login")}> + Login + +

+
+ +
+
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/form.ts b/apps/docs/content/components/tabs/form.ts index 679964350b..2f8c0d8490 100644 --- a/apps/docs/content/components/tabs/form.ts +++ b/apps/docs/content/components/tabs/form.ts @@ -1,138 +1,5 @@ -const App = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("login"); - - return ( -
- - - - -
- - -

- Need to create an account?{" "} - setSelected("sign-up")}> - Sign up - -

-
- -
-
- - -
- - - -

- Already have an account?{" "} - setSelected("login")}> - Login - -

-
- -
-
- - - - -
- ); -}`; - -const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("login"); - - return ( -
- - - - -
- - -

- Need to create an account?{" "} - setSelected("sign-up")}> - Sign up - -

-
- -
-
- - -
- - - -

- Already have an account?{" "} - setSelected("login")}> - Login - -

-
- -
-
- - - - -
- ); -}`; +import App from "./form.raw.jsx?raw"; +import AppTs from "./form.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/icons.raw.jsx b/apps/docs/content/components/tabs/icons.raw.jsx new file mode 100644 index 0000000000..1375a6c1d1 --- /dev/null +++ b/apps/docs/content/components/tabs/icons.raw.jsx @@ -0,0 +1,106 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export const GalleryIcon = (props) => ( + +); + +export const MusicIcon = (props) => ( + +); + +export const VideoIcon = (props) => ( + +); + +export default function App() { + return ( +
+ + + + Photos +
+ } + /> + + + Music + + } + /> + + + Videos + + } + /> + + + ); +} diff --git a/apps/docs/content/components/tabs/icons.ts b/apps/docs/content/components/tabs/icons.ts index b272ee4257..22a410c88f 100644 --- a/apps/docs/content/components/tabs/icons.ts +++ b/apps/docs/content/components/tabs/icons.ts @@ -1,100 +1,7 @@ -const GalleryIcon = `export const GalleryIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const VideoIcon = `export const VideoIcon = (props) => ( - -);`; - -const App = `import {Tabs, Tab} from "@nextui-org/react"; -import {GalleryIcon} from "./GalleryIcon"; -import {MusicIcon} from "./MusicIcon"; -import {VideoIcon} from "./VideoIcon"; - -export default function App() { - return ( -
- - - - Photos -
- } - /> - - - Music - - } - /> - - - Videos - - } - /> - - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/GalleryIcon.jsx": GalleryIcon, - "/MusicIcon.jsx": MusicIcon, - "/VideoIcon.jsx": VideoIcon, }; export default { diff --git a/apps/docs/content/components/tabs/placement.raw.jsx b/apps/docs/content/components/tabs/placement.raw.jsx new file mode 100644 index 0000000000..2fdc1e7578 --- /dev/null +++ b/apps/docs/content/components/tabs/placement.raw.jsx @@ -0,0 +1,51 @@ +import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + const [placement, setPlacement] = React.useState("top"); + + return ( +
+ setPlacement(value)} + > + top + bottom + start + end + +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+
+ ); +} diff --git a/apps/docs/content/components/tabs/placement.ts b/apps/docs/content/components/tabs/placement.ts index 558a4bbdb5..eee2244366 100644 --- a/apps/docs/content/components/tabs/placement.ts +++ b/apps/docs/content/components/tabs/placement.ts @@ -1,48 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [placement, setPlacement] = React.useState("top"); - return ( -
- setPlacement(value)} - > - top - bottom - start - end - -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
-
- ); -}`; +import App from "./placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/radius.raw.jsx b/apps/docs/content/components/tabs/radius.raw.jsx new file mode 100644 index 0000000000..0959a31088 --- /dev/null +++ b/apps/docs/content/components/tabs/radius.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const radiusList = ["full", "lg", "md", "sm", "none"]; + + return ( +
+ {radiusList.map((radius) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/radius.ts b/apps/docs/content/components/tabs/radius.ts index 75c39db1d7..7b78db1ce0 100644 --- a/apps/docs/content/components/tabs/radius.ts +++ b/apps/docs/content/components/tabs/radius.ts @@ -1,26 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const radiusList = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
- {radiusList.map((radius) => ( - - - - - - ))} -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/sizes.raw.jsx b/apps/docs/content/components/tabs/sizes.raw.jsx new file mode 100644 index 0000000000..589d1a18a8 --- /dev/null +++ b/apps/docs/content/components/tabs/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/sizes.ts b/apps/docs/content/components/tabs/sizes.ts index 9e20158653..85a2f5b30b 100644 --- a/apps/docs/content/components/tabs/sizes.ts +++ b/apps/docs/content/components/tabs/sizes.ts @@ -1,24 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const sizes = [ - "sm", - "md", - "lg", - ]; - - return ( -
- {sizes.map((size) => ( - - - - - - ))} -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/usage.raw.jsx b/apps/docs/content/components/tabs/usage.raw.jsx new file mode 100644 index 0000000000..54c7a54cce --- /dev/null +++ b/apps/docs/content/components/tabs/usage.raw.jsx @@ -0,0 +1,36 @@ +import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+ ); +} diff --git a/apps/docs/content/components/tabs/usage.ts b/apps/docs/content/components/tabs/usage.ts index 552e09828a..1118304c37 100644 --- a/apps/docs/content/components/tabs/usage.ts +++ b/apps/docs/content/components/tabs/usage.ts @@ -1,34 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/variants.raw.jsx b/apps/docs/content/components/tabs/variants.raw.jsx new file mode 100644 index 0000000000..d63d01a387 --- /dev/null +++ b/apps/docs/content/components/tabs/variants.raw.jsx @@ -0,0 +1,17 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export default function App() { + const variants = ["solid", "underlined", "bordered", "light"]; + + return ( +
+ {variants.map((variant) => ( + + + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tabs/variants.ts b/apps/docs/content/components/tabs/variants.ts index 53c80deb2b..ddea95fb2e 100644 --- a/apps/docs/content/components/tabs/variants.ts +++ b/apps/docs/content/components/tabs/variants.ts @@ -1,25 +1,4 @@ -const App = `import {Tabs, Tab} from "@nextui-org/react"; - -export default function App() { - const variants = [ - "solid", - "underlined", - "bordered", - "light", - ]; - - return ( -
- {variants.map((variant) => ( - - - - - - ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tabs/vertical.raw.jsx b/apps/docs/content/components/tabs/vertical.raw.jsx new file mode 100644 index 0000000000..b1229a8965 --- /dev/null +++ b/apps/docs/content/components/tabs/vertical.raw.jsx @@ -0,0 +1,43 @@ +import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react"; + +export default function App() { + const [isVertical, setIsVertical] = React.useState(true); + + return ( +
+ + Vertical + +
+ + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + + + + + + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + + + +
+
+ ); +} diff --git a/apps/docs/content/components/tabs/vertical.ts b/apps/docs/content/components/tabs/vertical.ts index 7487c22bb1..697ac10343 100644 --- a/apps/docs/content/components/tabs/vertical.ts +++ b/apps/docs/content/components/tabs/vertical.ts @@ -1,40 +1,4 @@ -const App = `import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react"; - -export default function App() { - const [isVertical, setIsVertical] = React.useState(true); - return ( -
- - Vertical - -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - - - - - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - - - -
-
- ); -}`; +import App from "./vertical.raw.jsx?raw"; const react = { "/App.jsx": App, From 329e997eccc1f6c4dcaed0dfdf121e164000b2f3 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Mon, 18 Nov 2024 11:14:35 +0800 Subject: [PATCH 2/2] refactor(docs): tabs dx --- .../components/tabs/custom-styles.raw.jsx | 138 +++++++++--------- .../content/components/tabs/icons.raw.jsx | 138 +++++++++--------- 2 files changed, 144 insertions(+), 132 deletions(-) diff --git a/apps/docs/content/components/tabs/custom-styles.raw.jsx b/apps/docs/content/components/tabs/custom-styles.raw.jsx index d0cdf054d8..d245ce75df 100644 --- a/apps/docs/content/components/tabs/custom-styles.raw.jsx +++ b/apps/docs/content/components/tabs/custom-styles.raw.jsx @@ -1,73 +1,79 @@ import {Tabs, Tab, Chip} from "@nextui-org/react"; -export const GalleryIcon = (props) => ( - -); +export const GalleryIcon = (props) => { + return ( + + ); +}; -export const MusicIcon = (props) => ( - -); +export const MusicIcon = (props) => { + return ( + + ); +}; -export const VideoIcon = (props) => ( - -); +export const VideoIcon = (props) => { + return ( + + ); +}; export default function App() { return ( diff --git a/apps/docs/content/components/tabs/icons.raw.jsx b/apps/docs/content/components/tabs/icons.raw.jsx index 1375a6c1d1..17bca089e6 100644 --- a/apps/docs/content/components/tabs/icons.raw.jsx +++ b/apps/docs/content/components/tabs/icons.raw.jsx @@ -1,73 +1,79 @@ import {Tabs, Tab} from "@nextui-org/react"; -export const GalleryIcon = (props) => ( - -); +export const GalleryIcon = (props) => { + return ( + + ); +}; -export const MusicIcon = (props) => ( - -); +export const MusicIcon = (props) => { + return ( + + ); +}; -export const VideoIcon = (props) => ( - -); +export const VideoIcon = (props) => { + return ( + + ); +}; export default function App() { return (