diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json index f2f02770e5..bf12dab1cd 100644 --- a/apps/docs/.eslintrc.json +++ b/apps/docs/.eslintrc.json @@ -22,10 +22,6 @@ { "files": ["*.ts", "*.tsx"], "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} } ] } diff --git a/apps/docs/components/docs/components/code-demo/utils.ts b/apps/docs/components/docs/components/code-demo/utils.ts index 6072975ef6..49caef306b 100644 --- a/apps/docs/components/docs/components/code-demo/utils.ts +++ b/apps/docs/components/docs/components/code-demo/utils.ts @@ -1,6 +1,6 @@ import {FileCode} from "./types"; -const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm; +const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm; const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/; @@ -31,7 +31,7 @@ export const transformCode = ( // replace match with const Name = () => ( return `const ${compName} = () => {`; }) - .replace("export", ""); + .replace(/export/g, ""); // add render() to cleanedCode if has const App = () => { if (cleanedCode.includes(`const App = () => {`)) { diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx index 4e946c99c4..57bd680f7e 100644 --- a/apps/docs/components/docs/components/codeblock.tsx +++ b/apps/docs/components/docs/components/codeblock.tsx @@ -1,7 +1,13 @@ +import type {Language, PrismTheme} from "prism-react-renderer"; +import type {TransformTokensTypes} from "./helper"; + import React, {forwardRef, useEffect} from "react"; import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils"; import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer"; import {debounce, omit} from "@nextui-org/shared-utils"; +import {cn} from "@nextui-org/react"; + +import {transformTokens} from "./helper"; import defaultTheme from "@/libs/prism-theme"; @@ -142,21 +148,36 @@ const Codeblock = forwardRef( {...props} > {({className, style, tokens, getLineProps, getTokenProps}) => ( -
- 
-              {tokens.map((line, i) => {
+                "overflow-x-scroll scrollbar-hide": hideScrollBar,
+              },
+            )}
+            data-language={language}
+            style={style}
+          >
+            {transformTokens(tokens).map((line) => {
+              const folderLine = line[0] as TransformTokensTypes;
+
+              const isFolder = folderLine.types?.includes("folderStart");
+
+              const renderLine = (
+                line: TransformTokensTypes[],
+                i: number,
+                as: "div" | "span" = "div",
+              ) => {
+                const Tag = as;
                 const lineProps = getLineProps({line, key: i});
 
                 return (
-                  
(
                         "px-2": showLines,
                       },
                       {
-                        "before:content-[''] before:w-full before:h-full before:absolute before:z-0 before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background":
-                          shouldHighlightLine(i),
+                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-['']":
+                          isFolder ? false : shouldHighlightLine(i),
                       },
                     )}
                     data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
                     data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
                   >
                     {showLines && (
-                      {i + 1}
+                      = 10 ? "mr-4" : "",
+                          i + 1 >= 100 ? "mr-2" : "",
+                          i + 1 >= 1000 ? "mr-0" : "",
+                        )}
+                      >
+                        {i + 1}
+                      
                     )}
+
                     {line.map((token, key) => {
-                      // Bun has no color style by default in the code block, so hack add in here
                       const props = getTokenProps({token, key}) || {};
-
-                      return (
+                      const isCopy = token.types.includes("copy");
+
+                      return isCopy ? (
+                        
+                          {token.folderContent?.map((folderTokens) => {
+                            return folderTokens.map((token, index) => {
+                              // Hack for wrap line
+                              return token.content === "" ? (
+                                

+                              ) : (
+                                {token.content}
+                              );
+                            });
+                          })}
+                        
+                      ) : (
                          {
@@ -201,11 +245,29 @@ const Codeblock = forwardRef(
                         />
                       );
                     })}
-                  

+                  
                 );
-              })}
-
-
+ }; + const renderFolderTokens = (tokens: TransformTokensTypes[][]) => { + return tokens.map((token, key) => { + const index = key + folderLine.index! + 1; + + return renderLine(token, index); + }); + }; + + return isFolder ? ( +
+ + {renderLine(folderLine.summaryContent as any, folderLine.index!, "span")} + + {renderFolderTokens(folderLine.folderContent as any)} +
+ ) : ( + renderLine(line, folderLine.index!) + ); + })} + )} ); diff --git a/apps/docs/components/docs/components/helper.ts b/apps/docs/components/docs/components/helper.ts new file mode 100644 index 0000000000..451c106139 --- /dev/null +++ b/apps/docs/components/docs/components/helper.ts @@ -0,0 +1,189 @@ +import type Highlight from "prism-react-renderer"; + +export type TransformTokens = Parameters[0]["tokens"]; + +export type TransformTokensTypes = TransformTokens[0][0] & { + folderContent?: TransformTokens; + summaryContent?: TransformTokens[0]; + class?: string; + index?: number; + open?: boolean; +}; + +const startFlag = ["{", "["]; +const endFlag = ["}", "]"]; +const specialStartFlag = ["("]; +const specialEndFlag = [")"]; +const defaultFoldFlagList = ["cn", "HTMLAttributes"]; +const defaultShowFlagList = ["Component", "forwardRef", "App"]; + +/** + * Transform tokens from `prism-react-renderer` to wrap them in folder structure + * + * @example + * transformTokens(tokens) -> wrap tokens in folder structure + */ +export function transformTokens(tokens: TransformTokens, folderLine = 10) { + const result: TransformTokens = []; + let lastIndex = 0; + let isShowFolder = false; + let fold = false; + + tokens.forEach((token, index) => { + if (index < lastIndex) { + return; + } + + let startToken: TransformTokens[0][0] = null as any; + let mergedStartFlagList = [...startFlag]; + + token.forEach((t) => { + if (defaultFoldFlagList.some((text) => t.content.includes(text))) { + // If cn then need to judge whether it is import token + if (t.content.includes("cn") && token.some((t) => t.content === "import")) { + return; + } + + // If HTMLAttributes then need to judge whether it have start flag + if ( + t.content.includes("HTMLAttributes") && + !token.some((t) => startFlag.includes(t.content)) + ) { + return; + } + + fold = true; + mergedStartFlagList.push(...specialStartFlag); + } + + if (mergedStartFlagList.includes(t.content)) { + startToken = t; + } + + if (defaultShowFlagList.some((text) => t.content.includes(text))) { + isShowFolder = true; + } + }); + + const mergedOptions = fold + ? { + specialEndFlag, + specialStartFlag, + } + : undefined; + const isFolder = checkIsFolder(token, mergedOptions); + + if (isFolder && startToken) { + const endIndex = findEndIndex(tokens, index + 1, mergedOptions); + + // Greater than or equal to folderLine then will folder otherwise it will show directly + if (endIndex !== -1 && (endIndex - index >= folderLine || isShowFolder || fold)) { + lastIndex = endIndex; + const folder = tokens.slice(index + 1, endIndex); + const endToken = tokens[endIndex]; + const ellipsisToken: TransformTokensTypes = { + types: ["ellipsis"], + content: "", + class: "custom-folder ellipsis-token", + }; + const copyContent: TransformTokensTypes = { + types: ["copy"], + content: "", + folderContent: folder, + class: "custom-folder copy-token", + }; + + endToken.forEach((t, _, arr) => { + let className = ""; + + className += "custom-folder"; + if (t.content.trim() === "" && (arr.length === 3 || arr.length === 4)) { + // Add length check to sure it's added to } token + className += " empty-token"; + } + (t as TransformTokensTypes).class = className; + }); + + startToken.types = ["folderStart"]; + (startToken as TransformTokensTypes).folderContent = folder; + (startToken as TransformTokensTypes).summaryContent = [ + ...token, + ellipsisToken, + copyContent, + ...endToken, + ]; + (startToken as TransformTokensTypes).index = index; + if (isShowFolder && !fold) { + (startToken as TransformTokensTypes).open = true; + } + + result.push([startToken]); + + isShowFolder = false; + fold = false; + + return; + } + } + token.forEach((t) => { + (t as TransformTokensTypes).index = index; + }); + result.push(token); + }); + + return result; +} + +interface SpecialOptions { + specialStartFlag?: string[]; + specialEndFlag?: string[]; +} + +function checkIsFolder( + token: TransformTokens[0], + {specialStartFlag, specialEndFlag}: SpecialOptions = {}, +) { + const stack: string[] = []; + const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag; + const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag; + + for (const t of token) { + if (mergedStartFlagList.includes(t.content)) { + stack.push(t.content); + } else if (mergedEndFlagList.includes(t.content)) { + stack.pop(); + } + } + + return stack.length !== 0; +} + +function findEndIndex( + tokens: TransformTokens, + startIndex: number, + {specialStartFlag, specialEndFlag}: SpecialOptions = {}, +) { + const stack: string[] = ["flag"]; + const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag; + const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag; + + for (let i = startIndex; i < tokens.length; i++) { + const token = tokens[i]; + + for (const line of token) { + const transformLine = line.content.replace(/\$/g, ""); + + if (mergedStartFlagList.includes(transformLine)) { + stack.push("flag"); + } else if (mergedEndFlagList.includes(transformLine)) { + stack.pop(); + } + + if (stack.length === 0) { + return i; + } + } + } + + return -1; +} diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx index b9a3c43cfc..78663d4673 100644 --- a/apps/docs/components/mdx-components.tsx +++ b/apps/docs/components/mdx-components.tsx @@ -153,7 +153,12 @@ const Code = ({ }); }} > - + ); }; diff --git a/apps/docs/content/components/accordion/custom-styles.raw.jsx b/apps/docs/content/components/accordion/custom-styles.raw.jsx index 76d135b8af..4d2a83d07f 100644 --- a/apps/docs/content/components/accordion/custom-styles.raw.jsx +++ b/apps/docs/content/components/accordion/custom-styles.raw.jsx @@ -1,188 +1,196 @@ import {Accordion, AccordionItem} from "@nextui-org/react"; -const MonitorMobileIcon = (props) => ( - -); +const MonitorMobileIcon = (props) => { + return ( + + ); +}; -const ShieldSecurityIcon = (props) => ( - -); +const ShieldSecurityIcon = (props) => { + return ( + + ); +}; -const InfoIcon = (props) => ( - -); +const InfoIcon = (props) => { + return ( + + ); +}; -const InvalidCardIcon = (props) => ( - -); +const InvalidCardIcon = (props) => { + return ( + + ); +}; export default function App() { const itemClasses = { diff --git a/apps/docs/content/components/accordion/indicator-function.raw.jsx b/apps/docs/content/components/accordion/indicator-function.raw.jsx index 1027b23804..9ab180735f 100644 --- a/apps/docs/content/components/accordion/indicator-function.raw.jsx +++ b/apps/docs/content/components/accordion/indicator-function.raw.jsx @@ -1,77 +1,83 @@ import {Accordion, AccordionItem} from "@nextui-org/react"; -const AnchorIcon = (props) => ( - -); +const AnchorIcon = (props) => { + return ( + + ); +}; -const MoonIcon = (props) => ( - -); +const MoonIcon = (props) => { + return ( + + ); +}; -const SunIcon = (props) => ( - -); +const SunIcon = (props) => { + return ( + + ); +}; export default function App() { const defaultContent = diff --git a/apps/docs/content/components/accordion/indicator.raw.jsx b/apps/docs/content/components/accordion/indicator.raw.jsx index 85d5b70dd3..1be61502b8 100644 --- a/apps/docs/content/components/accordion/indicator.raw.jsx +++ b/apps/docs/content/components/accordion/indicator.raw.jsx @@ -1,77 +1,83 @@ import {Accordion, AccordionItem} from "@nextui-org/react"; -const AnchorIcon = (props) => ( - -); +const AnchorIcon = (props) => { + return ( + + ); +}; -const MoonIcon = (props) => ( - -); +const MoonIcon = (props) => { + return ( + + ); +}; -const SunIcon = (props) => ( - -); +const SunIcon = (props) => { + return ( + + ); +}; export default function App() { const defaultContent = diff --git a/apps/docs/content/components/alert/colors.raw.jsx b/apps/docs/content/components/alert/colors.raw.jsx new file mode 100644 index 0000000000..a4d123eae5 --- /dev/null +++ b/apps/docs/content/components/alert/colors.raw.jsx @@ -0,0 +1,15 @@ +import {Alert} from "@nextui-org/react"; + +export default function App() { + return ( +
+
+ {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => ( +
+ +
+ ))} +
+
+ ); +} diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts index 8e88d2ef12..d5bef810aa 100644 --- a/apps/docs/content/components/alert/colors.ts +++ b/apps/docs/content/components/alert/colors.ts @@ -1,21 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -export default function App() { - return ( -
-
- {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => ( -
- -
- ))} -
-
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/controlled.raw.jsx b/apps/docs/content/components/alert/controlled.raw.jsx new file mode 100644 index 0000000000..59444db376 --- /dev/null +++ b/apps/docs/content/components/alert/controlled.raw.jsx @@ -0,0 +1,28 @@ +import {Alert, Button} from "@nextui-org/react"; + +export default function App() { + const [isVisible, setIsVisible] = React.useState(true); + + const title = "Success Notification"; + const description = + "Your action has been completed successfully. We'll notify you when updates are available."; + + return ( +
+ {isVisible ? ( + setIsVisible(false)} + /> + ) : ( + + )} +
+ ); +} diff --git a/apps/docs/content/components/alert/controlled.ts b/apps/docs/content/components/alert/controlled.ts index 33af02947f..2c3f0cacb4 100644 --- a/apps/docs/content/components/alert/controlled.ts +++ b/apps/docs/content/components/alert/controlled.ts @@ -1,33 +1,4 @@ -const App = `import {Alert, Button} from "@nextui-org/react"; - -export default function App() { - const [isVisible, setIsVisible] = React.useState(true); - - const title = "Success Notification"; - const description = "Your action has been completed successfully. We'll notify you when updates are available."; - - return ( -
- {isVisible ? ( - setIsVisible(false)} - /> - ) : ( - - )} -
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/custom-impl.raw.jsx b/apps/docs/content/components/alert/custom-impl.raw.jsx new file mode 100644 index 0000000000..a541c7481d --- /dev/null +++ b/apps/docs/content/components/alert/custom-impl.raw.jsx @@ -0,0 +1,124 @@ +import React, {forwardRef, useMemo} from "react"; +import {useAlert} from "@nextui-org/react"; + +export const InfoCircleIcon = (props) => { + return ( + + + + ); +}; + +export const CloseIcon = (props) => { + return ( + + ); +}; + +const styles = { + base: [ + "bg-slate-100", + "border", + "shadow", + "hover:bg-slate-200", + "focus-within:!bg-slate-100", + "dark:bg-slate-900", + "dark:hover:bg-slate-800", + "dark:border-slate-800", + "dark:focus-within:!bg-slate-900", + "cursor-pointer", + ], + title: ["text-base", "text-slate-500", "font-bold"], + description: ["text-base", "text-slate-500"], +}; + +const MyAlert = forwardRef((props, ref) => { + const { + title, + description, + isClosable, + domRef, + handleClose, + getBaseProps, + getMainWrapperProps, + getDescriptionProps, + getTitleProps, + getCloseButtonProps, + color, + isVisible, + onClose, + getAlertIconProps, + } = useAlert({ + ...props, + ref, + // this is just for the example, the props bellow should be passed by the parent component + title: "Email Sent!!", + description: "You will get a reply soon", + // custom styles + classNames: { + ...styles, + }, + }); + + const mainWrapper = useMemo(() => { + return ( +
+ {title &&
{title}
} +
{description}
+
+ ); + }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]); + + const baseWrapper = useMemo(() => { + return isVisible ? ( +
+ + {mainWrapper} + {(isClosable || onClose) && ( + + )} +
+ ) : null; + }, [ + mainWrapper, + isClosable, + getCloseButtonProps, + isVisible, + domRef, + getBaseProps, + handleClose, + color, + onClose, + getAlertIconProps, + ]); + + return <>{baseWrapper}; +}); + +MyAlert.displayName = "MyAlert"; + +export default MyAlert; diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts index 9f5a2c70a2..ab37512cec 100644 --- a/apps/docs/content/components/alert/custom-impl.ts +++ b/apps/docs/content/components/alert/custom-impl.ts @@ -1,140 +1,7 @@ -const InfoCircleIcon = `export const InfoCircleIcon = (props) => ( - - - -);`; - -const CloseIcon = `export const CloseIcon = (props) => ( - -);`; - -const App = `import React, {forwardRef, useMemo} from "react"; -import {useAlert} from "@nextui-org/react"; -import {InfoCircleIcon} from "./InfoCircleIcon"; -import {CloseIcon} from "./CloseIcon" - -const styles = { - base: [ - "bg-slate-100", - "border", - "shadow", - "hover:bg-slate-200", - "focus-within:!bg-slate-100", - "dark:bg-slate-900", - "dark:hover:bg-slate-800", - "dark:border-slate-800", - "dark:focus-within:!bg-slate-900", - "cursor-pointer" - ], - title: [ - "text-base", - "text-slate-500", - "font-bold" - ], - description: [ - "text-base", - "text-slate-500", - ], -} - -const MyAlert = forwardRef((props, ref) => { - const { - title, - description, - isClosable, - domRef, - handleClose, - getBaseProps, - getMainWrapperProps, - getDescriptionProps, - getTitleProps, - getCloseButtonProps, - color, - isVisible, - onClose, - getCloseIconProps, - getAlertIconProps, - } = useAlert({ - ...props, - ref, - // this is just for the example, the props bellow should be passed by the parent component - title: "Email Sent!!", - description: "You will get a reply soon", - // custom styles - classNames: { - ...styles, - }, - }); - - const mainWrapper = useMemo(() => { - return ( -
- {title &&
{title}
} -
{description}
-
- ); - }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]); - - const baseWrapper = useMemo(() => { - return isVisible ? ( -
- - {mainWrapper} - {(isClosable || onClose) && ( - - )} -
- ) : null; - }, [ - mainWrapper, - isClosable, - getCloseButtonProps, - isVisible, - domRef, - getBaseProps, - handleClose, - color, - onClose, - getAlertIconProps, - ]); - - return <>{baseWrapper}; -}); - -MyAlert.displayName = "MyAlert"; - -export default MyAlert;`; +import App from "./custom-impl.raw.jsx?raw"; const react = { "/App.jsx": App, - "/InfoCircleIcon": InfoCircleIcon, - "/CloseIcon": CloseIcon, }; export default { diff --git a/apps/docs/content/components/alert/custom-styles.raw.jsx b/apps/docs/content/components/alert/custom-styles.raw.jsx new file mode 100644 index 0000000000..8291720ae1 --- /dev/null +++ b/apps/docs/content/components/alert/custom-styles.raw.jsx @@ -0,0 +1,91 @@ +import {Alert, Button} from "@nextui-org/react"; + +const CustomAlert = React.forwardRef( + ( + {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props}, + ref, + ) => { + const colorClass = React.useMemo(() => { + switch (color) { + case "default": + return "before:bg-default-300"; + case "primary": + return "before:bg-primary"; + case "secondary": + return "before:bg-secondary"; + case "success": + return "before:bg-success"; + case "warning": + return "before:bg-warning"; + case "danger": + return "before:bg-danger"; + default: + return "before:bg-default-200"; + } + }, []); + + return ( + + {children} + + ); + }, +); + +CustomAlert.displayName = "CustomAlert"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + +
+ + +
+ + ))} +
+ ); +} diff --git a/apps/docs/content/components/alert/custom-styles.raw.tsx b/apps/docs/content/components/alert/custom-styles.raw.tsx new file mode 100644 index 0000000000..9056bf91c8 --- /dev/null +++ b/apps/docs/content/components/alert/custom-styles.raw.tsx @@ -0,0 +1,94 @@ +import type {AlertProps} from "@nextui-org/react"; + +import React from "react"; +import {Alert, Button, cn} from "@nextui-org/react"; + +const CustomAlert = React.forwardRef( + ( + {title, children, variant = "faded", color = "secondary", className, classNames, ...props}, + ref, + ) => { + const colorClass = React.useMemo(() => { + switch (color) { + case "default": + return "before:bg-default-300"; + case "primary": + return "before:bg-primary"; + case "secondary": + return "before:bg-secondary"; + case "success": + return "before:bg-success"; + case "warning": + return "before:bg-warning"; + case "danger": + return "before:bg-danger"; + default: + return "before:bg-default-200"; + } + }, []); + + return ( + + {children} + + ); + }, +); + +CustomAlert.displayName = "CustomAlert"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + +
+ + +
+ + ))} +
+ ); +} diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts index 437c8f35ee..29cf5fd0ee 100644 --- a/apps/docs/content/components/alert/custom-styles.ts +++ b/apps/docs/content/components/alert/custom-styles.ts @@ -1,192 +1,15 @@ -const AppTs = `import {Alert, Button} from "@nextui-org/react"; - -const CustomAlert = React.forwardRef( - ( - {title, children, variant = "faded", color = "secondary", className, classNames, ...props}, - ref, - ) => { - const colorClass = React.useMemo(() => { - switch (color) { - case "default": - return "before:bg-default-300"; - case "primary": - return "before:bg-primary"; - case "secondary": - return "before:bg-secondary"; - case "success": - return "before:bg-success"; - case "warning": - return "before:bg-warning"; - case "danger": - return "before:bg-danger"; - default: - return "before:bg-default-200"; - } - }, []); - - return ( - - {children} - - ); - }, -); - -CustomAlert.displayName = "CustomAlert"; - -export default function App() { - const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - - return ( -
- {colors.map((color) => ( - -
- - -
- - ))} -
- ); -}`; - -const App = `import {Alert, Button} from "@nextui-org/react"; - -const CustomAlert = React.forwardRef( - ( - {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props}, - ref, - ) => { - const colorClass = React.useMemo(() => { - switch (color) { - case "default": - return "before:bg-default-300"; - case "primary": - return "before:bg-primary"; - case "secondary": - return "before:bg-secondary"; - case "success": - return "before:bg-success"; - case "warning": - return "before:bg-warning"; - case "danger": - return "before:bg-danger"; - default: - return "before:bg-default-200"; - } - }, []); - - return ( - - {children} - - ); - }, -); - -CustomAlert.displayName = "CustomAlert"; - -export default function App() { - const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - - return ( -
- {colors.map((color) => ( - -
- - -
- - ))} -
- ); -}`; +import App from "./custom-styles.raw.jsx?raw"; +import AppTs from "./custom-styles.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/alert/radius.raw.jsx b/apps/docs/content/components/alert/radius.raw.jsx new file mode 100644 index 0000000000..07b2f9c5a8 --- /dev/null +++ b/apps/docs/content/components/alert/radius.raw.jsx @@ -0,0 +1,15 @@ +import {Alert} from "@nextui-org/react"; + +export default function App() { + return ( +
+
+ {["none", "sm", "md", "lg", "full"].map((radius) => ( +
+ +
+ ))} +
+
+ ); +} diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts index abbf3f5f52..7b78db1ce0 100644 --- a/apps/docs/content/components/alert/radius.ts +++ b/apps/docs/content/components/alert/radius.ts @@ -1,21 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -export default function App() { - return ( -
-
- {["none", "sm", "md", "lg", "full"].map((radius) => ( -
- -
- ))} -
-
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/usage.raw.jsx b/apps/docs/content/components/alert/usage.raw.jsx new file mode 100644 index 0000000000..3b5a727e9b --- /dev/null +++ b/apps/docs/content/components/alert/usage.raw.jsx @@ -0,0 +1,12 @@ +import {Alert} from "@nextui-org/react"; + +export default function App() { + const title = "This is an alert"; + const description = "Thanks for subscribing to our newsletter!"; + + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts index 6543526891..1118304c37 100644 --- a/apps/docs/content/components/alert/usage.ts +++ b/apps/docs/content/components/alert/usage.ts @@ -1,15 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -export default function App() { - const title = "This is an alert"; - const description = "Thanks for subscribing to our newsletter!"; - - return ( -
- -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/variants.raw.jsx b/apps/docs/content/components/alert/variants.raw.jsx new file mode 100644 index 0000000000..1bb83af6b3 --- /dev/null +++ b/apps/docs/content/components/alert/variants.raw.jsx @@ -0,0 +1,16 @@ +import {Alert} from "@nextui-org/react"; + +export default function App() { + return ( +
+ {["solid", "bordered", "flat", "faded"].map((variant) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/alert/variants.ts b/apps/docs/content/components/alert/variants.ts index 07238ee96f..ddea95fb2e 100644 --- a/apps/docs/content/components/alert/variants.ts +++ b/apps/docs/content/components/alert/variants.ts @@ -1,14 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -export default function App() { - return ( -
- {["solid", "bordered", "flat", "faded"].map((variant) => ( - - ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/with-action.raw.jsx b/apps/docs/content/components/alert/with-action.raw.jsx new file mode 100644 index 0000000000..8e4ee60a88 --- /dev/null +++ b/apps/docs/content/components/alert/with-action.raw.jsx @@ -0,0 +1,19 @@ +import {Alert, Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Upgrade + + } + title="You have no credits left" + variant="faded" + /> +
+ ); +} diff --git a/apps/docs/content/components/alert/with-action.ts b/apps/docs/content/components/alert/with-action.ts index b4f9665f62..1bb611e21b 100644 --- a/apps/docs/content/components/alert/with-action.ts +++ b/apps/docs/content/components/alert/with-action.ts @@ -1,24 +1,4 @@ -const App = `import {Alert, Button} from "@nextui-org/react"; - -export default function App() { - const [isVisible, setIsVisible] = React.useState(true); - - return ( -
- - Upgrade - - } - title="You have no credits left" - variant="faded" - /> -
- ); -}`; +import App from "./with-action.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/with-icon.raw.jsx b/apps/docs/content/components/alert/with-icon.raw.jsx new file mode 100644 index 0000000000..831e78982f --- /dev/null +++ b/apps/docs/content/components/alert/with-icon.raw.jsx @@ -0,0 +1,33 @@ +import {Alert} from "@nextui-org/react"; + +const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + + + ); +}; + +export default function App() { + return }>An alert with a custom icon; +} diff --git a/apps/docs/content/components/alert/with-icon.ts b/apps/docs/content/components/alert/with-icon.ts index dd722fe63d..ca7c79da7b 100644 --- a/apps/docs/content/components/alert/with-icon.ts +++ b/apps/docs/content/components/alert/with-icon.ts @@ -1,49 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -const UserIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - - - - ); -}; - -export default function App() { - return ( - }>An alert with a custom icon - ); -}`; +import App from "./with-icon.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/alert/without-icon.raw.jsx b/apps/docs/content/components/alert/without-icon.raw.jsx new file mode 100644 index 0000000000..bd25d413ed --- /dev/null +++ b/apps/docs/content/components/alert/without-icon.raw.jsx @@ -0,0 +1,12 @@ +import {Alert} from "@nextui-org/react"; + +export default function App() { + const title = "This is an alert"; + const description = "Thanks for subscribing to our newsletter!"; + + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/alert/without-icon.ts b/apps/docs/content/components/alert/without-icon.ts index b3432e6802..3c177c66b3 100644 --- a/apps/docs/content/components/alert/without-icon.ts +++ b/apps/docs/content/components/alert/without-icon.ts @@ -1,21 +1,4 @@ -const App = `import {Alert} from "@nextui-org/react"; - -export default function App() { - const title = "This is an alert"; - const description = "Thanks for subscribing to our newsletter!"; - - return ( -
- -
- ); -}`; +import App from "./without-icon.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.jsx b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx new file mode 100644 index 0000000000..2e25aaa5b4 --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx @@ -0,0 +1,34 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + let list = useAsyncList({ + async load({signal, filterText}) { + let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal}); + let json = await res.json(); + + return { + items: json.results, + }; + }, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.tsx b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx new file mode 100644 index 0000000000..8f88d88bc6 --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx @@ -0,0 +1,41 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +type SWCharacter = { + name: string; + height: string; + mass: string; + birth_year: string; +}; + +export default function App() { + let list = useAsyncList({ + async load({signal, filterText}) { + let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal}); + let json = await res.json(); + + return { + items: json.results, + }; + }, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-filtering.ts b/apps/docs/content/components/autocomplete/async-filtering.ts index 308bc843b2..6bcbb952f0 100644 --- a/apps/docs/content/components/autocomplete/async-filtering.ts +++ b/apps/docs/content/components/autocomplete/async-filtering.ts @@ -1,79 +1,5 @@ -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - let list = useAsyncList({ - async load({signal, filterText}) { - let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal}); - let json = await res.json(); - - return { - items: json.results, - }; - }, - }); - - return ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -type SWCharacter = { - name: string; - height: string; - mass: string; - birth_year: string; -}; - -export default function App() { - let list = useAsyncList({ - async load({signal, filterText}) { - let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal}); - let json = await res.json(); - - return { - items: json.results, - }; - }, - }); - - return ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; +import App from "./async-filtering.raw.jsx?raw"; +import AppTs from "./async-filtering.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx new file mode 100644 index 0000000000..f7d810e3ea --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx @@ -0,0 +1,99 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; + +export function usePokemonList({fetchDelay = 0} = {}) { + const [items, setItems] = React.useState([]); + const [hasMore, setHasMore] = React.useState(true); + const [isLoading, setIsLoading] = React.useState(false); + const [offset, setOffset] = React.useState(0); + const limit = 10; // Number of items per page, adjust as necessary + + const loadPokemon = async (currentOffset) => { + const controller = new AbortController(); + const {signal} = controller; + + try { + setIsLoading(true); + + if (offset > 0) { + // Delay to simulate network latency + await new Promise((resolve) => setTimeout(resolve, fetchDelay)); + } + + const res = await fetch( + `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`, + {signal}, + ); + + if (!res.ok) { + throw new Error("Network response was not ok"); + } + + let json = await res.json(); + + setHasMore(json.next !== null); + // Append new results to existing ones + setItems((prevItems) => [...prevItems, ...json.results]); + } catch (error) { + if (error.name === "AbortError") { + // eslint-disable-next-line no-console + console.log("Fetch aborted"); + } else { + // eslint-disable-next-line no-console + console.error("There was an error with the fetch operation:", error); + } + } finally { + setIsLoading(false); + } + }; + + React.useEffect(() => { + loadPokemon(offset); + }, []); + + const onLoadMore = () => { + const newOffset = offset + limit; + + setOffset(newOffset); + loadPokemon(newOffset); + }; + + return { + items, + hasMore, + isLoading, + onLoadMore, + }; +} + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); + + const [, scrollerRef] = useInfiniteScroll({ + hasMore, + isEnabled: isOpen, + shouldUseLoader: false, // We don't want to show the loader at the bottom of the list + onLoadMore, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx new file mode 100644 index 0000000000..355ba841b3 --- /dev/null +++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx @@ -0,0 +1,107 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; + +export type Pokemon = { + name: string; + url: string; +}; + +export type UsePokemonListProps = { + /** Delay to wait before fetching more items */ + fetchDelay?: number; +}; + +export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) { + const [items, setItems] = React.useState([]); + const [hasMore, setHasMore] = React.useState(true); + const [isLoading, setIsLoading] = React.useState(false); + const [offset, setOffset] = React.useState(0); + const limit = 10; // Number of items per page, adjust as necessary + + const loadPokemon = async (currentOffset: number) => { + const controller = new AbortController(); + const {signal} = controller; + + try { + setIsLoading(true); + + if (offset > 0) { + // Delay to simulate network latency + await new Promise((resolve) => setTimeout(resolve, fetchDelay)); + } + + let res = await fetch( + `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`, + {signal}, + ); + + if (!res.ok) { + throw new Error("Network response was not ok"); + } + + let json = await res.json(); + + setHasMore(json.next !== null); + // Append new results to existing ones + setItems((prevItems) => [...prevItems, ...json.results]); + } catch (error) { + if (error.name === "AbortError") { + console.log("Fetch aborted"); + } else { + console.error("There was an error with the fetch operation:", error); + } + } finally { + setIsLoading(false); + } + }; + + React.useEffect(() => { + loadPokemon(offset); + }, []); + + const onLoadMore = () => { + const newOffset = offset + limit; + + setOffset(newOffset); + loadPokemon(newOffset); + }; + + return { + items, + hasMore, + isLoading, + onLoadMore, + }; +} + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); + + const [, scrollerRef] = useInfiniteScroll({ + hasMore, + isEnabled: isOpen, + shouldUseLoader: false, // We don't want to show the loader at the bottom of the list + onLoadMore, + }); + + return ( + + {(item) => ( + + {item.name} + + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/async-loading-items.ts b/apps/docs/content/components/autocomplete/async-loading-items.ts index 495c845ebf..a69188c565 100644 --- a/apps/docs/content/components/autocomplete/async-loading-items.ts +++ b/apps/docs/content/components/autocomplete/async-loading-items.ts @@ -1,185 +1,12 @@ -const usePokemonListTs = `export type Pokemon = { - name: string; - url: string; -}; - -export type UsePokemonListProps = { - /** Delay to wait before fetching more items */ - fetchDelay?: number; -}; - -export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) { - const [items, setItems] = React.useState([]); - const [hasMore, setHasMore] = React.useState(true); - const [isLoading, setIsLoading] = React.useState(false); - const [offset, setOffset] = React.useState(0); - const limit = 10; // Number of items per page, adjust as necessary - - const loadPokemon = async (currentOffset: number) => { - const controller = new AbortController(); - const {signal} = controller; - - try { - setIsLoading(true); - - if (offset > 0) { - // Delay to simulate network latency - await new Promise((resolve) => setTimeout(resolve, fetchDelay)); - } - - let res = await fetch( - \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, - {signal}, - ); - - if (!res.ok) { - throw new Error("Network response was not ok"); - } - - let json = await res.json(); - - setHasMore(json.next !== null); - // Append new results to existing ones - setItems((prevItems) => [...prevItems, ...json.results]); - } catch (error) { - if (error.name === "AbortError") { - console.log("Fetch aborted"); - } else { - console.error("There was an error with the fetch operation:", error); - } - } finally { - setIsLoading(false); - } - }; - - React.useEffect(() => { - loadPokemon(offset); - }, []); - - const onLoadMore = () => { - const newOffset = offset + limit; - - setOffset(newOffset); - loadPokemon(newOffset); - }; - - return { - items, - hasMore, - isLoading, - onLoadMore, - }; -} - -`; - -const usePokemonList = `export function usePokemonList({fetchDelay = 0} = {}) { - const [items, setItems] = React.useState([]); - const [hasMore, setHasMore] = React.useState(true); - const [isLoading, setIsLoading] = React.useState(false); - const [offset, setOffset] = React.useState(0); - const limit = 10; // Number of items per page, adjust as necessary - - const loadPokemon = async (currentOffset) => { - const controller = new AbortController(); - const {signal} = controller; - - try { - setIsLoading(true); - - if (offset > 0) { - // Delay to simulate network latency - await new Promise((resolve) => setTimeout(resolve, fetchDelay)); - } - - let res = await fetch( - \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, - {signal}, - ); - - if (!res.ok) { - throw new Error("Network response was not ok"); - } - - let json = await res.json(); - - setHasMore(json.next !== null); - // Append new results to existing ones - setItems((prevItems) => [...prevItems, ...json.results]); - } catch (error) { - if (error.name === "AbortError") { - console.log("Fetch aborted"); - } else { - console.error("There was an error with the fetch operation:", error); - } - } finally { - setIsLoading(false); - } - }; - - React.useEffect(() => { - loadPokemon(offset); - }, []); - - const onLoadMore = () => { - const newOffset = offset + limit; - - setOffset(newOffset); - loadPokemon(newOffset); - }; - - return { - items, - hasMore, - isLoading, - onLoadMore, - }; -};`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; -import {usePokemonList} from "./usePokemonList"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); - - const [, scrollerRef] = useInfiniteScroll({ - hasMore, - isEnabled: isOpen, - shouldUseLoader: false, // We don't want to show the loader at the bottom of the list - onLoadMore, - }); - - return ( - - {(item) => ( - - {item.name} - - )} - - ); -}`; +import App from "./async-loading-items.raw.jsx?raw"; +import AppTs from "./async-loading-items.raw.tsx?raw"; const react = { "/App.jsx": App, - "/usePokemonList.js": usePokemonList, }; const reactTs = { - "/App.tsx": App, - "/usePokemonList.ts": usePokemonListTs, + "/App.tsx": AppTs, }; export default { diff --git a/apps/docs/content/components/autocomplete/colors.raw.jsx b/apps/docs/content/components/autocomplete/colors.raw.jsx new file mode 100644 index 0000000000..084f46d6cd --- /dev/null +++ b/apps/docs/content/components/autocomplete/colors.raw.jsx @@ -0,0 +1,51 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + {(item) => {item.label}} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/colors.ts b/apps/docs/content/components/autocomplete/colors.ts index 1ac3ba0075..d5bef810aa 100644 --- a/apps/docs/content/components/autocomplete/colors.ts +++ b/apps/docs/content/components/autocomplete/colors.ts @@ -1,66 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger", - ]; - - return ( -
- {colors.map((color) => ( - - {(item) => {item.label}} - - ))} -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/controlled.raw.jsx b/apps/docs/content/components/autocomplete/controlled.raw.jsx new file mode 100644 index 0000000000..084f46d6cd --- /dev/null +++ b/apps/docs/content/components/autocomplete/controlled.raw.jsx @@ -0,0 +1,51 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + {(item) => {item.label}} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/controlled.raw.tsx b/apps/docs/content/components/autocomplete/controlled.raw.tsx new file mode 100644 index 0000000000..ac696fb0ff --- /dev/null +++ b/apps/docs/content/components/autocomplete/controlled.raw.tsx @@ -0,0 +1,51 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const [key, setValue] = React.useState("cat"); + + return ( +
+ + {(item) => {item.label}} + +

Selected: {key}

+
+ ); +} diff --git a/apps/docs/content/components/autocomplete/controlled.ts b/apps/docs/content/components/autocomplete/controlled.ts index f8a35ea4aa..1f1a363363 100644 --- a/apps/docs/content/components/autocomplete/controlled.ts +++ b/apps/docs/content/components/autocomplete/controlled.ts @@ -1,87 +1,12 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState("cat"); - - return ( -
- - {(item) => {item.label}} - -

Selected: {value}

-
- ); -}`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState("cat"); - - return ( -
- - {(item) => {item.label}} - -

Selected: {value}

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx new file mode 100644 index 0000000000..822f4838cc --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx @@ -0,0 +1,47 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( +
+ + {(item) => {item.label}} + +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts index 7e7e27dcc1..b88aaeea2a 100644 --- a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts @@ -1,55 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( -
- - {(item) => {item.label}} - -
- ); -}`; +import App from "./custom-empty-content-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx new file mode 100644 index 0000000000..afb0782618 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx @@ -0,0 +1,57 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const myFilter = (textValue, inputValue) => { + if (inputValue.length === 0) { + return true; + } + + // Normalize both strings so we can slice safely + // take into account the ignorePunctuation option as well... + textValue = textValue.normalize("NFC").toLocaleLowerCase(); + inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); + + return textValue.slice(0, inputValue.length) === inputValue; + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx new file mode 100644 index 0000000000..38b444f84e --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx @@ -0,0 +1,57 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const myFilter = (textValue: string, inputValue: string) => { + if (inputValue.length === 0) { + return true; + } + + // Normalize both strings so we can slice safely + // take into account the ignorePunctuation option as well... + textValue = textValue.normalize("NFC").toLocaleLowerCase(); + inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); + + return textValue.slice(0, inputValue.length) === inputValue; + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-filtering.ts b/apps/docs/content/components/autocomplete/custom-filtering.ts index 5ebcd8336f..22640a1882 100644 --- a/apps/docs/content/components/autocomplete/custom-filtering.ts +++ b/apps/docs/content/components/autocomplete/custom-filtering.ts @@ -1,95 +1,8 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const myFilter = (textValue, inputValue) => { - if (inputValue.length === 0) { - return true; - } - - // Normalize both strings so we can slice safely - // take into account the ignorePunctuation option as well... - textValue = textValue.normalize("NFC").toLocaleLowerCase(); - inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); - - return textValue.slice(0, inputValue.length) === inputValue; - }; - - return ( - - {(item) => {item.label}} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const myFilter = (textValue: string, inputValue: string) => { - if (inputValue.length === 0) { - return true; - } - - // Normalize both strings so we can slice safely - // take into account the ignorePunctuation option as well... - textValue = textValue.normalize("NFC").toLocaleLowerCase(); - inputValue = inputValue.normalize("NFC").toLocaleLowerCase(); - - return textValue.slice(0, inputValue.length) === inputValue; - }; - - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./custom-filtering.raw.jsx?raw"; +import AppTs from "./custom-filtering.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { diff --git a/apps/docs/content/components/autocomplete/custom-items.raw.jsx b/apps/docs/content/components/autocomplete/custom-items.raw.jsx new file mode 100644 index 0000000000..2f2b27f9e4 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-items.raw.jsx @@ -0,0 +1,229 @@ +import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + {(user) => ( + +
+ +
+ {user.name} + {user.email} +
+
+ + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-items.ts b/apps/docs/content/components/autocomplete/custom-items.ts index 205ead3a5c..26a1e0f9ac 100644 --- a/apps/docs/content/components/autocomplete/custom-items.ts +++ b/apps/docs/content/components/autocomplete/custom-items.ts @@ -1,237 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - {(user) => ( - -
- -
- {user.name} - {user.email} -
-
- - )} - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx new file mode 100644 index 0000000000..7d4f300b08 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx @@ -0,0 +1,49 @@ +import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; + +export default function App() { + const headingClasses = + "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; + + return ( + + + Lion + Tiger + Elephant + Kangaroo + Panda + Giraffe + Zebra + Cheetah + + + Eagle + Parrot + Penguin + Ostrich + Peacock + Swan + Falcon + Flamingo + + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.ts b/apps/docs/content/components/autocomplete/custom-sections-style.ts index 13770de8a4..9ba8a6cd9c 100644 --- a/apps/docs/content/components/autocomplete/custom-sections-style.ts +++ b/apps/docs/content/components/autocomplete/custom-sections-style.ts @@ -1,51 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; - -export default function App() { - const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; - - return ( - - - Lion - Tiger - Elephant - Kangaroo - Panda - Giraffe - Zebra - Cheetah - - - Eagle - Parrot - Penguin - Ostrich - Peacock - Swan - Falcon - Flamingo - - - ); -}`; +import App from "./custom-sections-style.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx new file mode 100644 index 0000000000..21620cb3f2 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx @@ -0,0 +1,68 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const SelectorIcon = (props) => { + return ( + + ); +}; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + } + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.ts b/apps/docs/content/components/autocomplete/custom-selector-icon.ts index 2fc1f523b4..ee2c7d9a8b 100644 --- a/apps/docs/content/components/autocomplete/custom-selector-icon.ts +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.ts @@ -1,76 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const SelectorIcon = `export const SelectorIcon = (props) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {SelectorIcon} from "./SelectorIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - } - > - {(item) => {item.label}} - - ); -}`; +import App from "./custom-selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-styles.raw.jsx b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx new file mode 100644 index 0000000000..2727c2a259 --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx @@ -0,0 +1,303 @@ +import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react"; + +const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => { + return ( + + ); +}; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + } + variant="bordered" + > + {(item) => ( + +
+
+ +
+ {item.name} + {item.team} +
+
+ +
+ + )} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-styles.ts b/apps/docs/content/components/autocomplete/custom-styles.ts index 8782766986..da3ea9093a 100644 --- a/apps/docs/content/components/autocomplete/custom-styles.ts +++ b/apps/docs/content/components/autocomplete/custom-styles.ts @@ -1,317 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const SearchIcon = `export const SearchIcon = ({ - size = 24, - strokeWidth = 1.5, - width, - height, - ...props -}) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react"; -import {SearchIcon} from "./SearchIcon"; -import {users} from "./data"; - -export default function App() { - return ( - } - radius="full" - variant="bordered" - > - {(item) => ( - -
-
- -
- {item.name} - {item.team} -
-
- -
- - )} - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SearchIcon.jsx": SearchIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/custom-value.raw.jsx b/apps/docs/content/components/autocomplete/custom-value.raw.jsx new file mode 100644 index 0000000000..ec46f43f0c --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-value.raw.jsx @@ -0,0 +1,43 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/custom-value.ts b/apps/docs/content/components/autocomplete/custom-value.ts index ef17993ac6..a3d01f165d 100644 --- a/apps/docs/content/components/autocomplete/custom-value.ts +++ b/apps/docs/content/components/autocomplete/custom-value.ts @@ -1,51 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./custom-value.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/description.raw.jsx b/apps/docs/content/components/autocomplete/description.raw.jsx new file mode 100644 index 0000000000..d8f7e5bbaa --- /dev/null +++ b/apps/docs/content/components/autocomplete/description.raw.jsx @@ -0,0 +1,44 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/description.ts b/apps/docs/content/components/autocomplete/description.ts index 17947b2824..aeb6340b6b 100644 --- a/apps/docs/content/components/autocomplete/description.ts +++ b/apps/docs/content/components/autocomplete/description.ts @@ -1,52 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx new file mode 100644 index 0000000000..8b90a1f045 --- /dev/null +++ b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx @@ -0,0 +1,43 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/disabled-items.ts b/apps/docs/content/components/autocomplete/disabled-items.ts index caa7c63254..4ff907eed2 100644 --- a/apps/docs/content/components/autocomplete/disabled-items.ts +++ b/apps/docs/content/components/autocomplete/disabled-items.ts @@ -1,51 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./disabled-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/disabled.raw.jsx b/apps/docs/content/components/autocomplete/disabled.raw.jsx new file mode 100644 index 0000000000..5524c3850a --- /dev/null +++ b/apps/docs/content/components/autocomplete/disabled.raw.jsx @@ -0,0 +1,44 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/disabled.ts b/apps/docs/content/components/autocomplete/disabled.ts index 4642caaa37..1a215cc91f 100644 --- a/apps/docs/content/components/autocomplete/disabled.ts +++ b/apps/docs/content/components/autocomplete/disabled.ts @@ -1,52 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/dynamic.raw.jsx b/apps/docs/content/components/autocomplete/dynamic.raw.jsx new file mode 100644 index 0000000000..02d854ca30 --- /dev/null +++ b/apps/docs/content/components/autocomplete/dynamic.raw.jsx @@ -0,0 +1,42 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(animal) => {animal.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/dynamic.ts b/apps/docs/content/components/autocomplete/dynamic.ts index d24de783be..5d3c97bb9a 100644 --- a/apps/docs/content/components/autocomplete/dynamic.ts +++ b/apps/docs/content/components/autocomplete/dynamic.ts @@ -1,50 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(animal) => {animal.label}} - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/error-message.raw.jsx b/apps/docs/content/components/autocomplete/error-message.raw.jsx new file mode 100644 index 0000000000..fa9082e486 --- /dev/null +++ b/apps/docs/content/components/autocomplete/error-message.raw.jsx @@ -0,0 +1,54 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const [key, setValue] = React.useState(""); + const [touched, setTouched] = React.useState(false); + + const isValid = key === "cat"; + + return ( + setTouched(true)} + onSelectionChange={setValue} + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/error-message.ts b/apps/docs/content/components/autocomplete/error-message.ts index 4f703637d8..fb8101b132 100644 --- a/apps/docs/content/components/autocomplete/error-message.ts +++ b/apps/docs/content/components/autocomplete/error-message.ts @@ -1,62 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(""); - const [touched, setTouched] = React.useState(false); - - const isValid = value === "cat"; - - return ( - setTouched(true)} - > - {(item) => {item.label}} - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/events.raw.jsx b/apps/docs/content/components/autocomplete/events.raw.jsx new file mode 100644 index 0000000000..b54015518c --- /dev/null +++ b/apps/docs/content/components/autocomplete/events.raw.jsx @@ -0,0 +1,60 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + const [selectedKey, setSelectedKey] = React.useState(null); + + const onSelectionChange = (id) => { + setSelectedKey(id); + }; + + const onInputChange = (value) => { + setValue(value); + }; + + return ( +
+ + {(item) => {item.label}} + +

Current selected animal: {selectedKey}

+

Current input text: {value}

+
+ ); +} diff --git a/apps/docs/content/components/autocomplete/events.raw.tsx b/apps/docs/content/components/autocomplete/events.raw.tsx new file mode 100644 index 0000000000..4e0c01fd53 --- /dev/null +++ b/apps/docs/content/components/autocomplete/events.raw.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + const [selectedKey, setSelectedKey] = React.useState(null); + + const onSelectionChange = (key: React.Key | null) => { + setSelectedKey(key); + }; + + const onInputChange = (value: string) => { + setValue(value); + }; + + return ( +
+ + {(item) => {item.label}} + +

Current selected animal: {selectedKey}

+

Current input text: {value}

+
+ ); +} diff --git a/apps/docs/content/components/autocomplete/events.ts b/apps/docs/content/components/autocomplete/events.ts index 1983ff3fa4..eec42f6942 100644 --- a/apps/docs/content/components/autocomplete/events.ts +++ b/apps/docs/content/components/autocomplete/events.ts @@ -1,110 +1,11 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - - -export default function App() { - const [value, setValue] = React.useState(''); - const [selectedKey, setSelectedKey] = React.useState(null); - - const onSelectionChange = (id) => { - setSelectedKey(id); - }; - - const onInputChange = (value) => { - setValue(value) - }; - - return ( -
- - {(item) => {item.label}} - -

Current selected animal: {selectedKey}

-

Current input text: {value}

-
- ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(''); - const [selectedKey, setSelectedKey] = React.useState(null); - - const onSelectionChange = (key: React.Key) => { - setSelectedKey(key); - }; - - const onInputChange = (value: string) => { - setValue(value) - }; - - return ( -
- - {(item) => {item.label}} - -

Current selected animal: {selectedKey}

-

Current input text: {value}

-
- ); -}`; +import App from "./events.raw.jsx?raw"; +import AppTs from "./events.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, -}; - -const reactTs = { "/App.tsx": AppTs, }; export default { ...react, - ...reactTs, }; diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx new file mode 100644 index 0000000000..6b0049e68d --- /dev/null +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx @@ -0,0 +1,96 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; +import {useFilter} from "@react-aria/i18n"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + // Store Autocomplete input value, selected option, open state, and items + // in a state tracker + const [fieldState, setFieldState] = React.useState({ + selectedKey: "", + inputValue: "", + items: animals, + }); + + // Implement custom filtering logic and control what items are + // available to the Autocomplete. + const {startsWith} = useFilter({sensitivity: "base"}); + + // Specify how each of the Autocomplete values should change when an + // option is selected from the list box + const onSelectionChange = (key) => { + setFieldState((prevState) => { + let selectedItem = prevState.items.find((option) => option.value === key); + + return { + inputValue: selectedItem?.label || "", + selectedKey: key, + items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), + }; + }); + }; + + // Specify how each of the Autocomplete values should change when the input + // field is altered by the user + const onInputChange = (value) => { + setFieldState((prevState) => ({ + inputValue: value, + selectedKey: value === "" ? null : prevState.selectedKey, + items: animals.filter((item) => startsWith(item.label, value)), + })); + }; + + // Show entire list if user opens the menu manually + const onOpenChange = (isOpen, menuTrigger) => { + if (menuTrigger === "manual" && isOpen) { + setFieldState((prevState) => ({ + inputValue: prevState.inputValue, + selectedKey: prevState.selectedKey, + items: animals, + })); + } + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx new file mode 100644 index 0000000000..b71890a48f --- /dev/null +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx @@ -0,0 +1,103 @@ +import React from "react"; +import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react"; +import {useFilter} from "@react-aria/i18n"; + +export type FieldState = { + selectedKey: React.Key | null; + inputValue: string; + items: typeof animals; +}; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + // Store Autocomplete input value, selected option, open state, and items + // in a state tracker + const [fieldState, setFieldState] = React.useState({ + selectedKey: "", + inputValue: "", + items: animals, + }); + + // Implement custom filtering logic and control what items are + // available to the Autocomplete. + const {startsWith} = useFilter({sensitivity: "base"}); + + // Specify how each of the Autocomplete values should change when an + // option is selected from the list box + const onSelectionChange = (key: React.Key | null) => { + setFieldState((prevState) => { + let selectedItem = prevState.items.find((option) => option.value === key); + + return { + inputValue: selectedItem?.label || "", + selectedKey: key, + items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), + }; + }); + }; + + // Specify how each of the Autocomplete values should change when the input + // field is altered by the user + const onInputChange = (value: string) => { + setFieldState((prevState) => ({ + inputValue: value, + selectedKey: value === "" ? null : prevState.selectedKey, + items: animals.filter((item) => startsWith(item.label, value)), + })); + }; + + // Show entire list if user opens the menu manually + const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => { + if (menuTrigger === "manual" && isOpen) { + setFieldState((prevState) => ({ + inputValue: prevState.inputValue, + selectedKey: prevState.selectedKey, + items: animals, + })); + } + }; + + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/fully-controlled.ts b/apps/docs/content/components/autocomplete/fully-controlled.ts index 9b969ba31c..a32d212100 100644 --- a/apps/docs/content/components/autocomplete/fully-controlled.ts +++ b/apps/docs/content/components/autocomplete/fully-controlled.ts @@ -1,187 +1,11 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {useFilter} from "@react-aria/i18n"; -import {animals} from "./data"; - -export default function App() { - // Store Autocomplete input value, selected option, open state, and items - // in a state tracker - const [fieldState, setFieldState] = React.useState({ - selectedKey: "", - inputValue: "", - items: animals, - }); - - // Implement custom filtering logic and control what items are - // available to the Autocomplete. - const {startsWith} = useFilter({sensitivity: "base"}); - - // Specify how each of the Autocomplete values should change when an - // option is selected from the list box - const onSelectionChange = (key) => { - setFieldState((prevState) => { - let selectedItem = prevState.items.find((option) => option.value === key); - - return { - inputValue: selectedItem?.label || "", - selectedKey: key, - items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), - }; - }); - }; - - // Specify how each of the Autocomplete values should change when the input - // field is altered by the user - const onInputChange = (value) => { - setFieldState((prevState) => ({ - inputValue: value, - selectedKey: value === "" ? null : prevState.selectedKey, - items: animals.filter((item) => startsWith(item.label, value)), - })); - }; - - // Show entire list if user opens the menu manually - const onOpenChange = (isOpen, menuTrigger) => { - if (menuTrigger === "manual" && isOpen) { - setFieldState((prevState) => ({ - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey, - items: animals, - })); - } - }; - - return ( - - {(item) => {item.label}} - - ); -}`; - -const AppTs = `import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react"; -import {useFilter} from "@react-aria/i18n"; -import {animals} from "./data"; - -type FieldState = { - selectedKey: React.Key | null; - inputValue: string; - items: typeof animals; -}; - -export default function App() { - // Store Autocomplete input value, selected option, open state, and items - // in a state tracker - const [fieldState, setFieldState] = React.useState({ - selectedKey: "", - inputValue: "", - items: animals, - }); - - // Implement custom filtering logic and control what items are - // available to the Autocomplete. - const {startsWith} = useFilter({sensitivity: "base"}); - - // Specify how each of the Autocomplete values should change when an - // option is selected from the list box - const onSelectionChange = (key: React.Key) => { - setFieldState((prevState) => { - let selectedItem = prevState.items.find((option) => option.value === key); - - return { - inputValue: selectedItem?.label || "", - selectedKey: key, - items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")), - }; - }); - }; - - // Specify how each of the Autocomplete values should change when the input - // field is altered by the user - const onInputChange = (value: string) => { - setFieldState((prevState) => ({ - inputValue: value, - selectedKey: value === "" ? null : prevState.selectedKey, - items: animals.filter((item) => startsWith(item.label, value)), - })); - }; - - // Show entire list if user opens the menu manually - const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => { - if (menuTrigger === "manual" && isOpen) { - setFieldState((prevState) => ({ - inputValue: prevState.inputValue, - selectedKey: prevState.selectedKey, - items: animals, - })); - } - }; - - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./fully-controlled.raw.tsx?raw"; +import AppTs from "./fully-controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, -}; - -const reactTs = { "/App.tsx": AppTs, }; export default { ...react, - ...reactTs, }; diff --git a/apps/docs/content/components/autocomplete/item-start-content.raw.jsx b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx new file mode 100644 index 0000000000..70468dd7bd --- /dev/null +++ b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx @@ -0,0 +1,68 @@ +import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( + + + } + > + Argentina + + + } + > + Venezuela + + } + > + Brazil + + + } + > + Switzerland + + } + > + Germany + + } + > + Spain + + } + > + France + + } + > + Italy + + } + > + Mexico + + + ); +} diff --git a/apps/docs/content/components/autocomplete/item-start-content.ts b/apps/docs/content/components/autocomplete/item-start-content.ts index 02a9e14bd1..294a22e6b2 100644 --- a/apps/docs/content/components/autocomplete/item-start-content.ts +++ b/apps/docs/content/components/autocomplete/item-start-content.ts @@ -1,70 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( - - } - > - Argentina - - } - > - Venezuela - - } - > - Brazil - - - } - > - Switzerland - - } - > - Germany - - } - > - Spain - - } - > - France - - } - > - Italy - - } - > - Mexico - - - ); -}`; +import App from "./item-start-content.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/label-placements.raw.jsx b/apps/docs/content/components/autocomplete/label-placements.raw.jsx new file mode 100644 index 0000000000..bc019062b4 --- /dev/null +++ b/apps/docs/content/components/autocomplete/label-placements.raw.jsx @@ -0,0 +1,72 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
+
+

Without placeholder

+
+ {placements.map((placement) => ( + + {(item) => {item.label}} + + ))} +
+
+
+

With placeholder

+
+ {placements.map((placement) => ( + + {animals.map((animal) => ( + {animal.label} + ))} + + ))} +
+
+
+ ); +} diff --git a/apps/docs/content/components/autocomplete/label-placements.ts b/apps/docs/content/components/autocomplete/label-placements.ts index 391dba7ed9..cd2a65d352 100644 --- a/apps/docs/content/components/autocomplete/label-placements.ts +++ b/apps/docs/content/components/autocomplete/label-placements.ts @@ -1,84 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
-
-

Without placeholder

-
- {placements.map((placement) => ( - - {(item) => {item.label}} - - ))} -
-
-
-

With placeholder

-
- {placements.map((placement) => ( - - {animals.map((animal) => ( - - {animal.label} - - ))} - - ))} -
-
-
- ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/read-only.raw.jsx b/apps/docs/content/components/autocomplete/read-only.raw.jsx new file mode 100644 index 0000000000..2801df8aba --- /dev/null +++ b/apps/docs/content/components/autocomplete/read-only.raw.jsx @@ -0,0 +1,44 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/read-only.ts b/apps/docs/content/components/autocomplete/read-only.ts index 006d69b118..caf4be10cf 100644 --- a/apps/docs/content/components/autocomplete/read-only.ts +++ b/apps/docs/content/components/autocomplete/read-only.ts @@ -1,52 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./read-only.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/required.raw.jsx b/apps/docs/content/components/autocomplete/required.raw.jsx new file mode 100644 index 0000000000..5fa999c6e4 --- /dev/null +++ b/apps/docs/content/components/autocomplete/required.raw.jsx @@ -0,0 +1,44 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/required.ts b/apps/docs/content/components/autocomplete/required.ts index d30e1b0547..b50b781e6f 100644 --- a/apps/docs/content/components/autocomplete/required.ts +++ b/apps/docs/content/components/autocomplete/required.ts @@ -1,52 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/sections.raw.jsx b/apps/docs/content/components/autocomplete/sections.raw.jsx new file mode 100644 index 0000000000..f78b068927 --- /dev/null +++ b/apps/docs/content/components/autocomplete/sections.raw.jsx @@ -0,0 +1,28 @@ +import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; + +export default function App() { + return ( + + + Lion + Tiger + Elephant + Kangaroo + Panda + Giraffe + Zebra + Cheetah + + + Eagle + Parrot + Penguin + Ostrich + Peacock + Swan + Falcon + Flamingo + + + ); +} diff --git a/apps/docs/content/components/autocomplete/sections.ts b/apps/docs/content/components/autocomplete/sections.ts index 09219558dc..17cd360ea3 100644 --- a/apps/docs/content/components/autocomplete/sections.ts +++ b/apps/docs/content/components/autocomplete/sections.ts @@ -1,35 +1,4 @@ -const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react"; - -export default function App() { - return ( - - - Lion - Tiger - Elephant - Kangaroo - Panda - Giraffe - Zebra - Cheetah - - - Eagle - Parrot - Penguin - Ostrich - Peacock - Swan - Falcon - Flamingo - - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/autocomplete/sizes.raw.jsx b/apps/docs/content/components/autocomplete/sizes.raw.jsx new file mode 100644 index 0000000000..31906647eb --- /dev/null +++ b/apps/docs/content/components/autocomplete/sizes.raw.jsx @@ -0,0 +1,59 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( +
+ + {(item) => {item.label}} + + + {(item) => {item.label}} + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/sizes.ts b/apps/docs/content/components/autocomplete/sizes.ts index 06acaf7e0a..85a2f5b30b 100644 --- a/apps/docs/content/components/autocomplete/sizes.ts +++ b/apps/docs/content/components/autocomplete/sizes.ts @@ -1,67 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const sizes = ["sm", "md", "lg"]; - - return ( -
- {sizes.map((size) => ( -
- - {(item) => {item.label}} - - - {(item) => {item.label}} - -
- ))} -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/start-content.raw.jsx b/apps/docs/content/components/autocomplete/start-content.raw.jsx new file mode 100644 index 0000000000..58e526aaac --- /dev/null +++ b/apps/docs/content/components/autocomplete/start-content.raw.jsx @@ -0,0 +1,81 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const PetIcon = (props) => { + return ( + + ); +}; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + } + variant="bordered" + > + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/start-content.ts b/apps/docs/content/components/autocomplete/start-content.ts index 90ee37634d..59191d72a7 100644 --- a/apps/docs/content/components/autocomplete/start-content.ts +++ b/apps/docs/content/components/autocomplete/start-content.ts @@ -1,89 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const PetIcon = `export const PetIcon = (props) => ( - -);`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {PetIcon} from "./PetIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - } - defaultSelectedKey="cat" - className="max-w-xs" - > - {(item) => {item.label}} - - ); -}`; +import App from "./start-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/PetIcon.jsx": PetIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/usage.raw.jsx b/apps/docs/content/components/autocomplete/usage.raw.jsx new file mode 100644 index 0000000000..f95a67897f --- /dev/null +++ b/apps/docs/content/components/autocomplete/usage.raw.jsx @@ -0,0 +1,49 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( +
+ + {animals.map((animal) => ( + {animal.label} + ))} + + + {(item) => {item.label}} + +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/usage.ts b/apps/docs/content/components/autocomplete/usage.ts index ee0831fa26..1118304c37 100644 --- a/apps/docs/content/components/autocomplete/usage.ts +++ b/apps/docs/content/components/autocomplete/usage.ts @@ -1,62 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( -
- - {animals.map((animal) => ( - - {animal.label} - - ))} - - - {(item) => {item.label}} - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/variants.raw.jsx b/apps/docs/content/components/autocomplete/variants.raw.jsx new file mode 100644 index 0000000000..a222f3afaf --- /dev/null +++ b/apps/docs/content/components/autocomplete/variants.raw.jsx @@ -0,0 +1,60 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
+ {variants.map((variant) => ( +
+ + {(item) => {item.label}} + + + {animals.map((animal) => ( + {animal.label} + ))} + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/autocomplete/variants.ts b/apps/docs/content/components/autocomplete/variants.ts index f0c5c12101..ddea95fb2e 100644 --- a/apps/docs/content/components/autocomplete/variants.ts +++ b/apps/docs/content/components/autocomplete/variants.ts @@ -1,70 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
- {variants.map((variant) => ( -
- - {(item) => {item.label}} - - - {animals.map((animal) => ( - - {animal.label} - - ))} - -
- ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx new file mode 100644 index 0000000000..56e0385b12 --- /dev/null +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx @@ -0,0 +1,46 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +export const animals = [ + {label: "Cat", key: "cat", description: "The second most popular pet in the world"}, + {label: "Dog", key: "dog", description: "The most popular pet in the world"}, + {label: "Elephant", key: "elephant", description: "The largest land animal"}, + {label: "Lion", key: "lion", description: "The king of the jungle"}, + {label: "Tiger", key: "tiger", description: "The largest cat species"}, + {label: "Giraffe", key: "giraffe", description: "The tallest land animal"}, + { + label: "Dolphin", + key: "dolphin", + description: "A widely distributed and diverse group of aquatic mammals", + }, + {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, + { + label: "Shark", + key: "shark", + description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", + }, + { + label: "Whale", + key: "whale", + description: "Diverse group of fully aquatic placental marine mammals", + }, + {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, + {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"}, +]; + +export default function App() { + return ( + + {(item) => {item.label}} + + ); +} diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts index 43123ca2d1..1cfe3080fa 100644 --- a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts @@ -1,54 +1,7 @@ -const data = `export const animals = [ - {label: "Cat", value: "cat", description: "The second most popular pet in the world"}, - {label: "Dog", value: "dog", description: "The most popular pet in the world"}, - {label: "Elephant", value: "elephant", description: "The largest land animal"}, - {label: "Lion", value: "lion", description: "The king of the jungle"}, - {label: "Tiger", value: "tiger", description: "The largest cat species"}, - {label: "Giraffe", value: "giraffe", description: "The tallest land animal"}, - { - label: "Dolphin", - value: "dolphin", - description: "A widely distributed and diverse group of aquatic mammals", - }, - {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"}, - {label: "Zebra", value: "zebra", description: "A several species of African equids"}, - { - label: "Shark", - value: "shark", - description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", - }, - { - label: "Whale", - value: "whale", - description: "Diverse group of fully aquatic placental marine mammals", - }, - {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"}, - {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"}, -];`; - -const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - {(item) => {item.label}} - - ); -}`; +import App from "./without-scroll-shadow.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/avatar/bordered.raw.jsx b/apps/docs/content/components/avatar/bordered.raw.jsx new file mode 100644 index 0000000000..4c39afe103 --- /dev/null +++ b/apps/docs/content/components/avatar/bordered.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/bordered.ts b/apps/docs/content/components/avatar/bordered.ts index 0a6a75f976..4e025375c3 100644 --- a/apps/docs/content/components/avatar/bordered.ts +++ b/apps/docs/content/components/avatar/bordered.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./bordered.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/colors.raw.jsx b/apps/docs/content/components/avatar/colors.raw.jsx new file mode 100644 index 0000000000..8f64bc1413 --- /dev/null +++ b/apps/docs/content/components/avatar/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/colors.ts b/apps/docs/content/components/avatar/colors.ts index d4bd93f4b9..d5bef810aa 100644 --- a/apps/docs/content/components/avatar/colors.ts +++ b/apps/docs/content/components/avatar/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/custom-fallback.raw.jsx b/apps/docs/content/components/avatar/custom-fallback.raw.jsx new file mode 100644 index 0000000000..e9d7a19272 --- /dev/null +++ b/apps/docs/content/components/avatar/custom-fallback.raw.jsx @@ -0,0 +1,41 @@ +import {Avatar} from "@nextui-org/react"; + +export const CameraIcon = ({fill, size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
+ + } + src="https://images.unsplash.com/broken" + /> + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/custom-fallback.ts b/apps/docs/content/components/avatar/custom-fallback.ts index 171ee43b4f..24a9b3e8e2 100644 --- a/apps/docs/content/components/avatar/custom-fallback.ts +++ b/apps/docs/content/components/avatar/custom-fallback.ts @@ -1,41 +1,7 @@ -const CameraIcon = `export const CameraIcon = ({fill, size, height, width, ...props}) => { - return ( - - - - ); -};`; - -const App = `import {Avatar} from "@nextui-org/react"; -import {CameraIcon} from './CameraIcon'; - -export default function App() { - return ( -
- - } /> - - -
- ); -}`; +import App from "./custom-fallback.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CameraIcon.jsx": CameraIcon, }; export default { diff --git a/apps/docs/content/components/avatar/custom-impl.raw.jsx b/apps/docs/content/components/avatar/custom-impl.raw.jsx new file mode 100644 index 0000000000..af2b0ab084 --- /dev/null +++ b/apps/docs/content/components/avatar/custom-impl.raw.jsx @@ -0,0 +1,60 @@ +import {forwardRef, useMemo} from "react"; +import {AvatarIcon, useAvatar} from "@nextui-org/react"; + +const MyAvatar = forwardRef((props, ref) => { + const { + src, + icon = , + alt, + classNames, + slots, + name, + showFallback, + fallback: fallbackComponent, + getInitials, + getAvatarProps, + getImageProps, + } = useAvatar({ + ref, + ...props, + }); + + const fallback = useMemo(() => { + if (!showFallback && src) return null; + + const ariaLabel = alt || name || "avatar"; + + if (fallbackComponent) { + return ( +
+ {fallbackComponent} +
+ ); + } + + return name ? ( + + {getInitials(name)} + + ) : ( + + {icon} + + ); + }, [showFallback, src, fallbackComponent, name, classNames]); + + return ( +
+ {src && {alt}} + {fallback} +
+ ); +}); + +MyAvatar.displayName = "MyAvatar"; + +export default MyAvatar; diff --git a/apps/docs/content/components/avatar/custom-impl.raw.tsx b/apps/docs/content/components/avatar/custom-impl.raw.tsx new file mode 100644 index 0000000000..9cd0db925f --- /dev/null +++ b/apps/docs/content/components/avatar/custom-impl.raw.tsx @@ -0,0 +1,62 @@ +import {forwardRef, useMemo} from "react"; +import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react"; + +export interface AvatarProps extends BaseAvatarProps {} + +const MyAvatar = forwardRef((props, ref) => { + const { + src, + icon = , + alt, + classNames, + slots, + name, + showFallback, + fallback: fallbackComponent, + getInitials, + getAvatarProps, + getImageProps, + } = useAvatar({ + ref, + ...props, + }); + + const fallback = useMemo(() => { + if (!showFallback && src) return null; + + const ariaLabel = alt || name || "avatar"; + + if (fallbackComponent) { + return ( +
+ {fallbackComponent} +
+ ); + } + + return name ? ( + + {getInitials(name)} + + ) : ( + + {icon} + + ); + }, [showFallback, src, fallbackComponent, name, classNames]); + + return ( +
+ {src && {alt}} + {fallback} +
+ ); +}); + +MyAvatar.displayName = "MyAvatar"; + +export default MyAvatar; diff --git a/apps/docs/content/components/avatar/custom-impl.ts b/apps/docs/content/components/avatar/custom-impl.ts index 5a0c2e9caf..ef0d8ef531 100644 --- a/apps/docs/content/components/avatar/custom-impl.ts +++ b/apps/docs/content/components/avatar/custom-impl.ts @@ -1,129 +1,5 @@ -const App = `import {forwardRef} from "react"; -import {useMemo} from "react"; - -import {AvatarIcon, useAvatar} from "@nextui-org/react"; - -const MyAvatar = forwardRef((props, ref) => { - const { - src, - icon = , - alt, - classNames, - slots, - name, - showFallback, - fallback: fallbackComponent, - getInitials, - getAvatarProps, - getImageProps, - } = useAvatar({ - ref, - ...props, - }); - - const fallback = useMemo(() => { - if (!showFallback && src) return null; - - const ariaLabel = alt || name || "avatar"; - - if (fallbackComponent) { - return ( -
- {fallbackComponent} -
- ); - } - - return name ? ( - - {getInitials(name)} - - ) : ( - - {icon} - - ); - }, [showFallback, src, fallbackComponent, name, classNames]); - - return ( -
- {src && {alt}} - {fallback} -
- ); -}); - -MyAvatar.displayName = "MyAvatar"; - -export default MyAvatar;`; - -const AppTs = `import {forwardRef, useMemo} from "react"; - -import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react"; - -export interface AvatarProps extends BaseAvatarProps {} - -const MyAvatar = forwardRef((props, ref) => { - const { - src, - icon = , - alt, - classNames, - slots, - name, - showFallback, - fallback: fallbackComponent, - getInitials, - getAvatarProps, - getImageProps, - } = useAvatar({ - ref, - ...props, - }); - - const fallback = useMemo(() => { - if (!showFallback && src) return null; - - const ariaLabel = alt || name || "avatar"; - - if (fallbackComponent) { - return ( -
- {fallbackComponent} -
- ); - } - - return name ? ( - - {getInitials(name)} - - ) : ( - - {icon} - - ); - }, [showFallback, src, fallbackComponent, name, classNames]); - - return ( -
- {src && {alt}} - {fallback} -
- ); -}); - -Avatar.displayName = "MyAvatar"; - -export default MyAvatar;`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/custom.raw.jsx b/apps/docs/content/components/avatar/custom.raw.jsx new file mode 100644 index 0000000000..fb19aa1dc2 --- /dev/null +++ b/apps/docs/content/components/avatar/custom.raw.jsx @@ -0,0 +1,15 @@ +import {Avatar, AvatarIcon} from "@nextui-org/react"; + +export default function App() { + return ( +
+ } + /> +
+ ); +} diff --git a/apps/docs/content/components/avatar/custom.ts b/apps/docs/content/components/avatar/custom.ts index 022b950d9b..f6791778a9 100644 --- a/apps/docs/content/components/avatar/custom.ts +++ b/apps/docs/content/components/avatar/custom.ts @@ -1,18 +1,4 @@ -const App = `import {Avatar, AvatarIcon} from "@nextui-org/react"; - -export default function App() { - return ( -
- } - classNames={{ - base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]", - icon: "text-black/80", - }} - /> -
- ); -}`; +import App from "./custom.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/disabled.raw.jsx b/apps/docs/content/components/avatar/disabled.raw.jsx new file mode 100644 index 0000000000..99061379d4 --- /dev/null +++ b/apps/docs/content/components/avatar/disabled.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/disabled.ts b/apps/docs/content/components/avatar/disabled.ts index 7449d40174..1a215cc91f 100644 --- a/apps/docs/content/components/avatar/disabled.ts +++ b/apps/docs/content/components/avatar/disabled.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/fallbacks.raw.jsx b/apps/docs/content/components/avatar/fallbacks.raw.jsx new file mode 100644 index 0000000000..dbde19d7f7 --- /dev/null +++ b/apps/docs/content/components/avatar/fallbacks.raw.jsx @@ -0,0 +1,11 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/fallbacks.ts b/apps/docs/content/components/avatar/fallbacks.ts index 6af995a0ab..4abe22969c 100644 --- a/apps/docs/content/components/avatar/fallbacks.ts +++ b/apps/docs/content/components/avatar/fallbacks.ts @@ -1,14 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./fallbacks.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-custom-count.raw.jsx b/apps/docs/content/components/avatar/group-custom-count.raw.jsx new file mode 100644 index 0000000000..a436fc951a --- /dev/null +++ b/apps/docs/content/components/avatar/group-custom-count.raw.jsx @@ -0,0 +1,21 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + ( +

+{count} others

+ )} + total={10} + > + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-custom-count.ts b/apps/docs/content/components/avatar/group-custom-count.ts index a9ffab8b16..814b7842a4 100644 --- a/apps/docs/content/components/avatar/group-custom-count.ts +++ b/apps/docs/content/components/avatar/group-custom-count.ts @@ -1,24 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - ( -

+{count} others

- )} - > - - - - - - - - ); -}`; +import App from "./group-custom-count.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.jsx b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx new file mode 100644 index 0000000000..59945aafb1 --- /dev/null +++ b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx @@ -0,0 +1,29 @@ +import {forwardRef} from "react"; +import {Avatar, useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react"; + +const AvatarGroup = forwardRef((props, ref) => { + const { + Component, + clones, + context, + remainingCount, + renderCount = (count) => , + getAvatarGroupProps, + } = useAvatarGroup({ + ref, + ...props, + }); + + return ( + + + {clones} + {remainingCount > 0 && renderCount(remainingCount)} + + + ); +}); + +AvatarGroup.displayName = "AvatarGroup"; + +export default AvatarGroup; diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.tsx b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx new file mode 100644 index 0000000000..8535a023f8 --- /dev/null +++ b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx @@ -0,0 +1,36 @@ +import {forwardRef} from "react"; +import { + Avatar, + useAvatarGroup, + AvatarGroupProvider, + AvatarGroupProps as BaseAvatarGroupProps, +} from "@nextui-org/react"; + +export interface AvatarGroupProps extends BaseAvatarGroupProps {} + +const AvatarGroup = forwardRef((props, ref) => { + const { + Component, + clones, + context, + remainingCount, + renderCount = (count) => , + getAvatarGroupProps, + } = useAvatarGroup({ + ref, + ...props, + }); + + return ( + + + {clones} + {remainingCount > 0 && renderCount(remainingCount)} + + + ); +}); + +AvatarGroup.displayName = "AvatarGroup"; + +export default AvatarGroup; diff --git a/apps/docs/content/components/avatar/group-custom-impl.ts b/apps/docs/content/components/avatar/group-custom-impl.ts index dbacff25dd..16dbee71c5 100644 --- a/apps/docs/content/components/avatar/group-custom-impl.ts +++ b/apps/docs/content/components/avatar/group-custom-impl.ts @@ -1,68 +1,5 @@ -const App = `import {forwardRef} from "react"; - -import {useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react"; -import Avatar from "./avatar"; // your custom avatar or nextui avatar - -const AvatarGroup = forwardRef((props, ref) => { - const { - Component, - clones, - context, - remainingCount, - renderCount = (count) => , - getAvatarGroupProps, - } = useAvatarGroup({ - ref, - ...props, - }); - - return ( - - - {clones} - {remainingCount > 0 && renderCount(remainingCount)} - - - ); -}); - -AvatarGroup.displayName = "AvatarGroup"; - -export default AvatarGroup;`; - -const AppTs = `import {forwardRef} from "react"; - -import {useAvatarGroup, AvatarGroupProvider, AvatarGroupProps as BaseAvatarGroupProps} from "@nextui-org/react"; -import Avatar from "./avatar"; // your custom avatar or nextui avatar - -export interface AvatarGroupProps extends BaseAvatarGroupProps {} - -const AvatarGroup = forwardRef((props, ref) => { - const { - Component, - clones, - context, - remainingCount, - renderCount = (count) => , - getAvatarGroupProps, - } = useAvatarGroup({ - ref, - ...props, - }); - - return ( - - - {clones} - {remainingCount > 0 && renderCount(remainingCount)} - - - ); -}); - -AvatarGroup.displayName = "AvatarGroup"; - -export default AvatarGroup;`; +import App from "./group-custom-impl.raw.jsx?raw"; +import AppTs from "./group-custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-disabled.raw.jsx b/apps/docs/content/components/avatar/group-disabled.raw.jsx new file mode 100644 index 0000000000..da8721dc3d --- /dev/null +++ b/apps/docs/content/components/avatar/group-disabled.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-disabled.ts b/apps/docs/content/components/avatar/group-disabled.ts index ba703b89df..a0fb219d26 100644 --- a/apps/docs/content/components/avatar/group-disabled.ts +++ b/apps/docs/content/components/avatar/group-disabled.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group-disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-grid.raw.jsx b/apps/docs/content/components/avatar/group-grid.raw.jsx new file mode 100644 index 0000000000..eebe242a18 --- /dev/null +++ b/apps/docs/content/components/avatar/group-grid.raw.jsx @@ -0,0 +1,17 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-grid.ts b/apps/docs/content/components/avatar/group-grid.ts index abd2a74431..1c768c94c1 100644 --- a/apps/docs/content/components/avatar/group-grid.ts +++ b/apps/docs/content/components/avatar/group-grid.ts @@ -1,20 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - - - - ); -}`; +import App from "./group-grid.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-max.raw.jsx b/apps/docs/content/components/avatar/group-max.raw.jsx new file mode 100644 index 0000000000..b1109cff3c --- /dev/null +++ b/apps/docs/content/components/avatar/group-max.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-max.ts b/apps/docs/content/components/avatar/group-max.ts index 5bc76a002b..c2515e86cb 100644 --- a/apps/docs/content/components/avatar/group-max.ts +++ b/apps/docs/content/components/avatar/group-max.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group-max.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group-total.raw.jsx b/apps/docs/content/components/avatar/group-total.raw.jsx new file mode 100644 index 0000000000..d1ce696618 --- /dev/null +++ b/apps/docs/content/components/avatar/group-total.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group-total.ts b/apps/docs/content/components/avatar/group-total.ts index 463073b931..3545b036f1 100644 --- a/apps/docs/content/components/avatar/group-total.ts +++ b/apps/docs/content/components/avatar/group-total.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group-total.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/group.raw.jsx b/apps/docs/content/components/avatar/group.raw.jsx new file mode 100644 index 0000000000..827de4ca2f --- /dev/null +++ b/apps/docs/content/components/avatar/group.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar, AvatarGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/avatar/group.ts b/apps/docs/content/components/avatar/group.ts index b22b13adce..0660a894cd 100644 --- a/apps/docs/content/components/avatar/group.ts +++ b/apps/docs/content/components/avatar/group.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./group.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/radius.raw.jsx b/apps/docs/content/components/avatar/radius.raw.jsx new file mode 100644 index 0000000000..94da5df6b8 --- /dev/null +++ b/apps/docs/content/components/avatar/radius.raw.jsx @@ -0,0 +1,12 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/radius.ts b/apps/docs/content/components/avatar/radius.ts index 066a399d59..7b78db1ce0 100644 --- a/apps/docs/content/components/avatar/radius.ts +++ b/apps/docs/content/components/avatar/radius.ts @@ -1,15 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/sizes.raw.jsx b/apps/docs/content/components/avatar/sizes.raw.jsx new file mode 100644 index 0000000000..6e3f73560f --- /dev/null +++ b/apps/docs/content/components/avatar/sizes.raw.jsx @@ -0,0 +1,16 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/sizes.ts b/apps/docs/content/components/avatar/sizes.ts index 993396e524..85a2f5b30b 100644 --- a/apps/docs/content/components/avatar/sizes.ts +++ b/apps/docs/content/components/avatar/sizes.ts @@ -1,16 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/avatar/usage.raw.jsx b/apps/docs/content/components/avatar/usage.raw.jsx new file mode 100644 index 0000000000..37b9b49dc4 --- /dev/null +++ b/apps/docs/content/components/avatar/usage.raw.jsx @@ -0,0 +1,14 @@ +import {Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/avatar/usage.ts b/apps/docs/content/components/avatar/usage.ts index f55f584c8e..1118304c37 100644 --- a/apps/docs/content/components/avatar/usage.ts +++ b/apps/docs/content/components/avatar/usage.ts @@ -1,17 +1,4 @@ -const App = `import {Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/a11y.raw.jsx b/apps/docs/content/components/badge/a11y.raw.jsx new file mode 100644 index 0000000000..6e8fe17155 --- /dev/null +++ b/apps/docs/content/components/badge/a11y.raw.jsx @@ -0,0 +1,31 @@ +import {Badge, Button} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/badge/a11y.ts b/apps/docs/content/components/badge/a11y.ts index ede5ba5ed3..e53640d68b 100644 --- a/apps/docs/content/components/badge/a11y.ts +++ b/apps/docs/content/components/badge/a11y.ts @@ -1,44 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -const App = `import {Badge, Button} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./a11y.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, }; export default { diff --git a/apps/docs/content/components/badge/colors.raw.jsx b/apps/docs/content/components/badge/colors.raw.jsx new file mode 100644 index 0000000000..b7358bee7e --- /dev/null +++ b/apps/docs/content/components/badge/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/apps/docs/content/components/badge/colors.ts b/apps/docs/content/components/badge/colors.ts index 1a79742830..d5bef810aa 100644 --- a/apps/docs/content/components/badge/colors.ts +++ b/apps/docs/content/components/badge/colors.ts @@ -1,47 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - - - - - - - - - - - - - -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/content-examples.raw.jsx b/apps/docs/content/components/badge/content-examples.raw.jsx new file mode 100644 index 0000000000..0850c9000d --- /dev/null +++ b/apps/docs/content/components/badge/content-examples.raw.jsx @@ -0,0 +1,80 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CheckIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
+ + + + + + + + + + } placement="bottom-right"> + + + } + placement="top-right" + shape="circle" + > + + +
+ ); +} diff --git a/apps/docs/content/components/badge/content-examples.ts b/apps/docs/content/components/badge/content-examples.ts index e5a43ff2a2..f21e28ce52 100644 --- a/apps/docs/content/components/badge/content-examples.ts +++ b/apps/docs/content/components/badge/content-examples.ts @@ -1,110 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -export const CheckIcon = `export const CheckIcon = ({ - size, - height, - width, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Badge, Avatar} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; -import {CheckIcon} from "./CheckIcon"; - -export default function App() { - return ( -
- - - - - - - - - - } - color="success" - placement="bottom-right" - > - - - } - color="danger" - shape="circle" - placement="top-right" - > - - -
- ); -}`; +import App from "./content-examples.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/badge/placements.raw.jsx b/apps/docs/content/components/badge/placements.raw.jsx new file mode 100644 index 0000000000..749e64888f --- /dev/null +++ b/apps/docs/content/components/badge/placements.raw.jsx @@ -0,0 +1,20 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + + + + + + + +
+ ); +} diff --git a/apps/docs/content/components/badge/placements.ts b/apps/docs/content/components/badge/placements.ts index 6a4af7b820..dc67908b7e 100644 --- a/apps/docs/content/components/badge/placements.ts +++ b/apps/docs/content/components/badge/placements.ts @@ -1,39 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - - - - - - - -
- ); -}`; +import App from "./placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/shapes.raw.jsx b/apps/docs/content/components/badge/shapes.raw.jsx new file mode 100644 index 0000000000..59777647f1 --- /dev/null +++ b/apps/docs/content/components/badge/shapes.raw.jsx @@ -0,0 +1,14 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/badge/shapes.ts b/apps/docs/content/components/badge/shapes.ts index 8f6370503f..75524eae1f 100644 --- a/apps/docs/content/components/badge/shapes.ts +++ b/apps/docs/content/components/badge/shapes.ts @@ -1,25 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./shapes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/show-outline.raw.jsx b/apps/docs/content/components/badge/show-outline.raw.jsx new file mode 100644 index 0000000000..960ab3f524 --- /dev/null +++ b/apps/docs/content/components/badge/show-outline.raw.jsx @@ -0,0 +1,14 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/badge/show-outline.ts b/apps/docs/content/components/badge/show-outline.ts index d11a8860bf..83f4e660d3 100644 --- a/apps/docs/content/components/badge/show-outline.ts +++ b/apps/docs/content/components/badge/show-outline.ts @@ -1,25 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./show-outline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/sizes.raw.jsx b/apps/docs/content/components/badge/sizes.raw.jsx new file mode 100644 index 0000000000..cdf37c6067 --- /dev/null +++ b/apps/docs/content/components/badge/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/apps/docs/content/components/badge/sizes.ts b/apps/docs/content/components/badge/sizes.ts index c212de05ea..85a2f5b30b 100644 --- a/apps/docs/content/components/badge/sizes.ts +++ b/apps/docs/content/components/badge/sizes.ts @@ -1,29 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - - - - -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/usage.raw.jsx b/apps/docs/content/components/badge/usage.raw.jsx new file mode 100644 index 0000000000..1599fc5a23 --- /dev/null +++ b/apps/docs/content/components/badge/usage.raw.jsx @@ -0,0 +1,9 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/badge/usage.ts b/apps/docs/content/components/badge/usage.ts index a4ca4998a3..1118304c37 100644 --- a/apps/docs/content/components/badge/usage.ts +++ b/apps/docs/content/components/badge/usage.ts @@ -1,16 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/variants.raw.jsx b/apps/docs/content/components/badge/variants.raw.jsx new file mode 100644 index 0000000000..ab7ef5a02c --- /dev/null +++ b/apps/docs/content/components/badge/variants.raw.jsx @@ -0,0 +1,20 @@ +import {Badge, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + + + + + + + +
+ ); +} diff --git a/apps/docs/content/components/badge/variants.ts b/apps/docs/content/components/badge/variants.ts index cc466b3b71..ddea95fb2e 100644 --- a/apps/docs/content/components/badge/variants.ts +++ b/apps/docs/content/components/badge/variants.ts @@ -1,35 +1,4 @@ -const App = `import {Badge, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - - - - - - - -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/badge/visibility.raw.jsx b/apps/docs/content/components/badge/visibility.raw.jsx new file mode 100644 index 0000000000..c22ce8b40b --- /dev/null +++ b/apps/docs/content/components/badge/visibility.raw.jsx @@ -0,0 +1,71 @@ +import {Badge, Switch} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CartIcon = ({size, height, width, ...props}) => { + return ( + + + + + + + ); +}; + +export default function App() { + const [isInvisible, setIsInvisible] = React.useState(false); + + return ( +
+
+ + + + + + +
+ setIsInvisible(!value)}> + Show badge + +
+ ); +} diff --git a/apps/docs/content/components/badge/visibility.ts b/apps/docs/content/components/badge/visibility.ts index 3729cfaaef..8cc2818a7b 100644 --- a/apps/docs/content/components/badge/visibility.ts +++ b/apps/docs/content/components/badge/visibility.ts @@ -1,81 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -export const CartIcon = `export const CartIcon = ({ size, height, width, ...props }) => { - return ( - - - - - - - ); -};`; - -const App = `import {Badge, Avatar, Switch} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; -import {CartIcon} from "./CartIcon"; - -export default function App() { - const [isInvisible, setIsInvisible] = React.useState(false); - - return ( -
-
- - - - - - -
- setIsInvisible(!value)}> - Show badge - -
- ); -}`; +import App from "./visibility.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, - "/CartIcon.jsx": CartIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx b/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx new file mode 100644 index 0000000000..e846b8195a --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/collapsing-items.ts b/apps/docs/content/components/breadcrumbs/collapsing-items.ts index 0f953921ca..47fadf4847 100644 --- a/apps/docs/content/components/breadcrumbs/collapsing-items.ts +++ b/apps/docs/content/components/breadcrumbs/collapsing-items.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./collapsing-items.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/colors.raw.jsx b/apps/docs/content/components/breadcrumbs/colors.raw.jsx new file mode 100644 index 0000000000..3ede2cb357 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/colors.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + Home + Music + Artist + Album + Song + + ))} +
+ ); +} diff --git a/apps/docs/content/components/breadcrumbs/colors.ts b/apps/docs/content/components/breadcrumbs/colors.ts index f5abd4a4ea..d5bef810aa 100644 --- a/apps/docs/content/components/breadcrumbs/colors.ts +++ b/apps/docs/content/components/breadcrumbs/colors.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"]; - - return ( -
- {colors.map((color) => ( - - Home - Music - Artist - Album - Song - - ))} -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/controlled.raw.jsx b/apps/docs/content/components/breadcrumbs/controlled.raw.jsx new file mode 100644 index 0000000000..151338a9b1 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/controlled.raw.jsx @@ -0,0 +1,25 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("song"); + + return ( + setCurrentPage(key)}> + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/controlled.raw.tsx b/apps/docs/content/components/breadcrumbs/controlled.raw.tsx new file mode 100644 index 0000000000..f7890a9765 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/controlled.raw.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("song"); + + return ( + setCurrentPage(key)}> + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/controlled.ts b/apps/docs/content/components/breadcrumbs/controlled.ts index 45ed66b150..1f1a363363 100644 --- a/apps/docs/content/components/breadcrumbs/controlled.ts +++ b/apps/docs/content/components/breadcrumbs/controlled.ts @@ -1,54 +1,5 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("song"); - - return ( - setCurrentPage(key)}> - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; - -const AppTs = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("song"); - - return ( - setCurrentPage(key)}> - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx b/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx new file mode 100644 index 0000000000..b6cd996cee --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx @@ -0,0 +1,70 @@ +import { + Breadcrumbs, + BreadcrumbItem, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, +} from "@nextui-org/react"; + +export const ChevronDownIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + Home + Music + Artist + Album + + + + + + + Song 1 + Song 2 + Song 3 + + + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/custom-items.ts b/apps/docs/content/components/breadcrumbs/custom-items.ts index 3e323265b3..26a1e0f9ac 100644 --- a/apps/docs/content/components/breadcrumbs/custom-items.ts +++ b/apps/docs/content/components/breadcrumbs/custom-items.ts @@ -1,74 +1,7 @@ -const ChevronDownIcon = `export const ChevronDownIcon = (props) => ( - -);`; - -const App = `import {Breadcrumbs, BreadcrumbItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; -import {ChevronDownIcon} from "./ChevronDownIcon"; - -export default function App() { - return ( - - Home - Music - Artist - Album - - - - - - - - Song 1 - - - Song 2 - - - Song 3 - - - - - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ChevronDownIcon.jsx": ChevronDownIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx new file mode 100644 index 0000000000..ffd11a01ba --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx @@ -0,0 +1,56 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export const ShoppingCartIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + + + + Checkout + Payment + Delivery Address + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/custom-styles.ts b/apps/docs/content/components/breadcrumbs/custom-styles.ts index 5dd7816a34..da3ea9093a 100644 --- a/apps/docs/content/components/breadcrumbs/custom-styles.ts +++ b/apps/docs/content/components/breadcrumbs/custom-styles.ts @@ -1,62 +1,7 @@ -const ShoppingCartIcon = `export const ShoppingCartIcon = (props) => ( - -);`; - -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; -import {ShoppingCartIcon} from "./ShoppingCartIcon"; - -export default function App() { - return ( - - - - - Checkout - Payment - Delivery Address - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ShoppingCartIcon.jsx": ShoppingCartIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx new file mode 100644 index 0000000000..66222ed468 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx @@ -0,0 +1,45 @@ +import { + Breadcrumbs, + BreadcrumbItem, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, +} from "@nextui-org/react"; + +export default function App() { + return ( + ( +
+ + + + + + {items.map((item, index) => ( + + {item.children} + + ))} + + + {separator} +
+ )} + > + Home + Music + Artist + Album + Featured + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts index e76ab23afc..bb104d6404 100644 --- a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts +++ b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts @@ -1,45 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - ( -
- - - - - - {items.map((item, index) => ( - - {item.children} - - ))} - - - {separator} -
- )} - > - Home - Music - Artist - Album - Featured - Song - - ); -}`; +import App from "./customizing-ellipsis.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/disabled.raw.jsx b/apps/docs/content/components/breadcrumbs/disabled.raw.jsx new file mode 100644 index 0000000000..5eb03e55ff --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/disabled.ts b/apps/docs/content/components/breadcrumbs/disabled.ts index 4e750c6d48..1a215cc91f 100644 --- a/apps/docs/content/components/breadcrumbs/disabled.ts +++ b/apps/docs/content/components/breadcrumbs/disabled.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx b/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx new file mode 100644 index 0000000000..f34576245b --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx @@ -0,0 +1,39 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("music"); + + return ( + setCurrentPage(key)} + > + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx b/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx new file mode 100644 index 0000000000..15cecac700 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState("music"); + + return ( + setCurrentPage(key)} + > + + Home + + + Music + + + Artist + + + Album + + + Song + + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/menu-type.ts b/apps/docs/content/components/breadcrumbs/menu-type.ts index 56ad50cc11..db610ba249 100644 --- a/apps/docs/content/components/breadcrumbs/menu-type.ts +++ b/apps/docs/content/components/breadcrumbs/menu-type.ts @@ -1,81 +1,5 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("music"); - - return ( - setCurrentPage(key)} - classNames={{ - list: "gap-2", - }} - itemClasses={{ - item: [ - "px-2 py-0.5 border-small border-default-400 rounded-small", - "data-[current=true]:border-foreground data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors", - "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100", - ], - separator: "hidden", - }} - > - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; - -const AppTs = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState("music"); - - return ( - setCurrentPage(key)} - classNames={{ - list: "gap-2", - }} - itemClasses={{ - item: [ - "px-2 py-0.5 border-small border-default-400 rounded-small", - "data-[current=true]:border-default-800 data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors", - "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100", - ], - }} - > - - Home - - - Music - - - Artist - - - Album - - - Song - - - ); -}`; +import App from "./menu-type.raw.jsx?raw"; +import AppTs from "./menu-type.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/radius.raw.jsx b/apps/docs/content/components/breadcrumbs/radius.raw.jsx new file mode 100644 index 0000000000..042d5aed7e --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/radius.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
+ {radius.map((r) => ( + + Home + Music + Artist + Album + Song + + ))} +
+ ); +} diff --git a/apps/docs/content/components/breadcrumbs/radius.ts b/apps/docs/content/components/breadcrumbs/radius.ts index fb6968d60e..7b78db1ce0 100644 --- a/apps/docs/content/components/breadcrumbs/radius.ts +++ b/apps/docs/content/components/breadcrumbs/radius.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const radius = [ "full", "lg", "md", "sm", "none"]; - - return ( -
- {radius.map((r) => ( - - Home - Music - Artist - Album - Song - - ))} -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/routing.raw.jsx b/apps/docs/content/components/breadcrumbs/routing.raw.jsx new file mode 100644 index 0000000000..2da60a4b44 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/routing.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Button + Breadcrumbs + Card + Checkbox + Code + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/routing.ts b/apps/docs/content/components/breadcrumbs/routing.ts index 62b48c9055..df25d14fe0 100644 --- a/apps/docs/content/components/breadcrumbs/routing.ts +++ b/apps/docs/content/components/breadcrumbs/routing.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Button - Breadcrumbs - Card - Checkbox - Code - - ); -}`; +import App from "./routing.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/separator.raw.jsx b/apps/docs/content/components/breadcrumbs/separator.raw.jsx new file mode 100644 index 0000000000..70a96554d5 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/separator.raw.jsx @@ -0,0 +1,18 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/separator.ts b/apps/docs/content/components/breadcrumbs/separator.ts index 15cc273761..db13815942 100644 --- a/apps/docs/content/components/breadcrumbs/separator.ts +++ b/apps/docs/content/components/breadcrumbs/separator.ts @@ -1,21 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./separator.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/sizes.raw.jsx b/apps/docs/content/components/breadcrumbs/sizes.raw.jsx new file mode 100644 index 0000000000..c7b794da72 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/sizes.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( + + Home + Music + Artist + Album + Song + + ))} +
+ ); +} diff --git a/apps/docs/content/components/breadcrumbs/sizes.ts b/apps/docs/content/components/breadcrumbs/sizes.ts index f90e7ca355..85a2f5b30b 100644 --- a/apps/docs/content/components/breadcrumbs/sizes.ts +++ b/apps/docs/content/components/breadcrumbs/sizes.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const sizes = ["sm", "md", "lg"]; - - return ( -
- {sizes.map((size) => ( - - Home - Music - Artist - Album - Song - - ))} -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx b/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx new file mode 100644 index 0000000000..30cee189d2 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx @@ -0,0 +1,137 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export const HomeIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const ArtistIcon = (props) => { + return ( + + ); +}; + +export const AlbumIcon = (props) => { + return ( + + ); +}; + +export const SongIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + }>Home + }>Music + }>Artist + }>Album + }>Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/start-end-content.ts b/apps/docs/content/components/breadcrumbs/start-end-content.ts index 144fb3a539..e99c7e5997 100644 --- a/apps/docs/content/components/breadcrumbs/start-end-content.ts +++ b/apps/docs/content/components/breadcrumbs/start-end-content.ts @@ -1,110 +1,7 @@ -const HomeIcon = `export const HomeIcon = (props) => ( - -);`; - -const MusicIcon = `export const MusicIcon = (props) => ( - -);`; - -const ArtistIcon = `export const ArtistIcon = (props) => ( - -);`; - -const AlbumIcon = `export const AlbumIcon = (props) => ( - -);`; - -const SongIcon = `export const SongIcon = (props) => ( - -);`; - -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; -import {HomeIcon} from "./HomeIcon"; -import {MusicIcon} from "./MusicIcon"; -import {ArtistIcon} from "./ArtistIcon"; -import {AlbumIcon} from "./AlbumIcon"; -import {SongIcon} from "./SongIcon"; - -export default function App() { - return ( - - }>Home - }>Music - }>Artist - }>Album - }>Song - - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HomeIcon.jsx": HomeIcon, - "/MusicIcon.jsx": MusicIcon, - "/ArtistIcon.jsx": ArtistIcon, - "/AlbumIcon.jsx": AlbumIcon, - "/SongIcon.jsx": SongIcon, }; export default { diff --git a/apps/docs/content/components/breadcrumbs/underlines.raw.jsx b/apps/docs/content/components/breadcrumbs/underlines.raw.jsx new file mode 100644 index 0000000000..479afcecf9 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/underlines.raw.jsx @@ -0,0 +1,31 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const underlines = ["none", "hover", "always", "active", "focus"]; + const descriptions = { + none: "No underline", + hover: "Underline on hover", + always: "Always underline", + active: "Underline on active", + focus: "Underline on focus", + }; + + return ( +
+ {underlines.map((u) => ( +
+

+ {descriptions[u]} ({u}) +

+ + Home + Music + Artist + Album + Song + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/breadcrumbs/underlines.ts b/apps/docs/content/components/breadcrumbs/underlines.ts index 990ea97b10..962a9b7364 100644 --- a/apps/docs/content/components/breadcrumbs/underlines.ts +++ b/apps/docs/content/components/breadcrumbs/underlines.ts @@ -1,34 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const underlines = ["none", "hover", "always", "active", "focus"]; - const descriptions = { - none: "No underline", - hover: "Underline on hover", - always: "Always underline", - active: "Underline on active", - focus: "Underline on focus", - } - - return ( -
- {underlines.map((u) => ( -
-

- {descriptions[u]} ({u}) -

- - Home - Music - Artist - Album - Song - -
- ))} -
- ); -}`; +import App from "./underlines.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/usage.raw.jsx b/apps/docs/content/components/breadcrumbs/usage.raw.jsx new file mode 100644 index 0000000000..53cddf3bfb --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/usage.raw.jsx @@ -0,0 +1,13 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + return ( + + Home + Music + Artist + Album + Song + + ); +} diff --git a/apps/docs/content/components/breadcrumbs/usage.ts b/apps/docs/content/components/breadcrumbs/usage.ts index df213fce9b..1118304c37 100644 --- a/apps/docs/content/components/breadcrumbs/usage.ts +++ b/apps/docs/content/components/breadcrumbs/usage.ts @@ -1,16 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - return ( - - Home - Music - Artist - Album - Song - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/breadcrumbs/variants.raw.jsx b/apps/docs/content/components/breadcrumbs/variants.raw.jsx new file mode 100644 index 0000000000..f51df29307 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/variants.raw.jsx @@ -0,0 +1,19 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export default function App() { + const variants = ["solid", "bordered", "light"]; + + return ( +
+ {variants.map((variant) => ( + + Home + Music + Artist + Album + Song + + ))} +
+ ); +} diff --git a/apps/docs/content/components/breadcrumbs/variants.ts b/apps/docs/content/components/breadcrumbs/variants.ts index 45406cb580..ddea95fb2e 100644 --- a/apps/docs/content/components/breadcrumbs/variants.ts +++ b/apps/docs/content/components/breadcrumbs/variants.ts @@ -1,22 +1,4 @@ -const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; - -export default function App() { - const variants = ["solid", "bordered", "light"]; - - return ( -
- {variants.map((variant) => ( - - Home - Music - Artist - Album - Song - - ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/colors.raw.jsx b/apps/docs/content/components/button/colors.raw.jsx new file mode 100644 index 0000000000..07f8cb6aa4 --- /dev/null +++ b/apps/docs/content/components/button/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/button/colors.ts b/apps/docs/content/components/button/colors.ts index b0bf1c1527..d5bef810aa 100644 --- a/apps/docs/content/components/button/colors.ts +++ b/apps/docs/content/components/button/colors.ts @@ -1,29 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/custom-impl.raw.jsx b/apps/docs/content/components/button/custom-impl.raw.jsx new file mode 100644 index 0000000000..f1ec13ac21 --- /dev/null +++ b/apps/docs/content/components/button/custom-impl.raw.jsx @@ -0,0 +1,38 @@ +import {forwardRef} from "react"; +import {useButton, Ripple, Spinner} from "@nextui-org/react"; + +const MyButton = forwardRef((props, ref) => { + const { + domRef, + children, + spinnerSize, + spinner = , + spinnerPlacement, + startContent, + endContent, + isLoading, + disableRipple, + getButtonProps, + getRippleProps, + } = useButton({ + ref, + ...props, + }); + + const {ripples, onClear} = getRippleProps(); + + return ( + + ); +}); + +MyButton.displayName = "MyButton"; + +export default MyButton; diff --git a/apps/docs/content/components/button/custom-impl.raw.tsx b/apps/docs/content/components/button/custom-impl.raw.tsx new file mode 100644 index 0000000000..e297b601f9 --- /dev/null +++ b/apps/docs/content/components/button/custom-impl.raw.tsx @@ -0,0 +1,40 @@ +import {forwardRef} from "react"; +import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react"; + +export interface ButtonProps extends BaseButtonProps {} + +const MyButton = forwardRef((props, ref) => { + const { + domRef, + children, + spinnerSize, + spinner = , + spinnerPlacement, + startContent, + endContent, + isLoading, + disableRipple, + getButtonProps, + getRippleProps, + } = useButton({ + ref, + ...props, + }); + + const {ripples, onClear} = getRippleProps(); + + return ( + + ); +}); + +MyButton.displayName = "MyButton"; + +export default MyButton; diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts index a7ad847c51..ef0d8ef531 100644 --- a/apps/docs/content/components/button/custom-impl.ts +++ b/apps/docs/content/components/button/custom-impl.ts @@ -1,83 +1,5 @@ -const App = `import {forwardRef} from "react"; -import {useButton, Ripple, Spinner} from "@nextui-org/react"; - - -const MyButton = forwardRef((props, ref) => { - const { - domRef, - children, - spinnerSize, - spinner = , - spinnerPlacement, - startContent, - endContent, - isLoading, - disableRipple, - getButtonProps, - getRippleProps, - } = useButton({ - ref, - ...props, - }); - - const {ripples, onClear} = getRippleProps(); - - return ( - - ); -}); - -MyButton.displayName = "MyButton"; - -export default MyButton;`; - -const AppTs = `import {forwardRef} from "react"; -import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react"; - -export interface ButtonProps extends BaseButtonProps {} - -const MyButton = forwardRef((props, ref) => { - const { - domRef, - children, - spinnerSize, - spinner = , - spinnerPlacement, - startContent, - endContent, - isLoading, - disableRipple, - getButtonProps, - getRippleProps, - } = useButton({ - ref, - ...props, - }); - - const {ripples, onClear} = getRippleProps(); - - return ( - - ); -}); - -MyButton.displayName = "MyButton"; - -export default MyButton;`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/custom-styles.raw.jsx b/apps/docs/content/components/button/custom-styles.raw.jsx new file mode 100644 index 0000000000..cd999fa238 --- /dev/null +++ b/apps/docs/content/components/button/custom-styles.raw.jsx @@ -0,0 +1,12 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/custom-styles.ts b/apps/docs/content/components/button/custom-styles.ts index b2136ec09f..da3ea9093a 100644 --- a/apps/docs/content/components/button/custom-styles.ts +++ b/apps/docs/content/components/button/custom-styles.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/disabled.raw.jsx b/apps/docs/content/components/button/disabled.raw.jsx new file mode 100644 index 0000000000..9d59145f8c --- /dev/null +++ b/apps/docs/content/components/button/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/disabled.ts b/apps/docs/content/components/button/disabled.ts index 57dbe8b255..1a215cc91f 100644 --- a/apps/docs/content/components/button/disabled.ts +++ b/apps/docs/content/components/button/disabled.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/group-disabled.raw.jsx b/apps/docs/content/components/button/group-disabled.raw.jsx new file mode 100644 index 0000000000..f42ab62dff --- /dev/null +++ b/apps/docs/content/components/button/group-disabled.raw.jsx @@ -0,0 +1,11 @@ +import {Button, ButtonGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + ); +} diff --git a/apps/docs/content/components/button/group-disabled.ts b/apps/docs/content/components/button/group-disabled.ts index 55b5281bc2..a0fb219d26 100644 --- a/apps/docs/content/components/button/group-disabled.ts +++ b/apps/docs/content/components/button/group-disabled.ts @@ -1,14 +1,4 @@ -const App = `import {Button, ButtonGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - ); -}`; +import App from "./group-disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/group-use-case.raw.jsx b/apps/docs/content/components/button/group-use-case.raw.jsx new file mode 100644 index 0000000000..5685c46f6f --- /dev/null +++ b/apps/docs/content/components/button/group-use-case.raw.jsx @@ -0,0 +1,71 @@ +import { + Button, + ButtonGroup, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, +} from "@nextui-org/react"; + +export const ChevronDownIcon = () => { + return ( + + + + ); +}; + +export default function App() { + const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"])); + + const descriptionsMap = { + merge: + "All commits from the source branch are added to the destination branch via a merge commit.", + squash: + "All commits from the source branch are added to the destination branch as a single commit.", + rebase: "All commits from the source branch are added to the destination branch individually.", + }; + + const labelsMap = { + merge: "Create a merge commit", + squash: "Squash and merge", + rebase: "Rebase and merge", + }; + + // Convert the Set to an Array and get the first value. + const selectedOptionValue = Array.from(selectedOption)[0]; + + return ( + + + + + + + + + {labelsMap["merge"]} + + + {labelsMap["squash"]} + + + {labelsMap["rebase"]} + + + + + ); +} diff --git a/apps/docs/content/components/button/group-use-case.ts b/apps/docs/content/components/button/group-use-case.ts index d1220f5371..d563f87977 100644 --- a/apps/docs/content/components/button/group-use-case.ts +++ b/apps/docs/content/components/button/group-use-case.ts @@ -1,67 +1,7 @@ -const ChevronDownIcon = `export const ChevronDownIcon = () => ( - - - -);`; - -const App = `import {Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem} from "@nextui-org/react"; -import {ChevronDownIcon} from './ChevronDownIcon'; - -export default function App() { - const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"])); - - const descriptionsMap = { - merge: - "All commits from the source branch are added to the destination branch via a merge commit.", - squash: - "All commits from the source branch are added to the destination branch as a single commit.", - rebase: "All commits from the source branch are added to the destination branch individually.", - }; - - const labelsMap = { - merge: "Create a merge commit", - squash: "Squash and merge", - rebase: "Rebase and merge", - } - - // Convert the Set to an Array and get the first value. - const selectedOptionValue = Array.from(selectedOption)[0]; - - return ( - - - - - - - - - {labelsMap["merge"]} - - - {labelsMap["squash"]} - - - {labelsMap["rebase"]} - - - - - ); -}`; +import App from "./group-use-case.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ChevronDownIcon.jsx": ChevronDownIcon, }; export default { diff --git a/apps/docs/content/components/button/group.raw.jsx b/apps/docs/content/components/button/group.raw.jsx new file mode 100644 index 0000000000..4c3273f823 --- /dev/null +++ b/apps/docs/content/components/button/group.raw.jsx @@ -0,0 +1,11 @@ +import {Button, ButtonGroup} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + ); +} diff --git a/apps/docs/content/components/button/group.ts b/apps/docs/content/components/button/group.ts index ec5d6678da..0660a894cd 100644 --- a/apps/docs/content/components/button/group.ts +++ b/apps/docs/content/components/button/group.ts @@ -1,14 +1,4 @@ -const App = `import {Button, ButtonGroup} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - ); -}`; +import App from "./group.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/icon-only.raw.jsx b/apps/docs/content/components/button/icon-only.raw.jsx new file mode 100644 index 0000000000..ccb38b1424 --- /dev/null +++ b/apps/docs/content/components/button/icon-only.raw.jsx @@ -0,0 +1,55 @@ +import {Button} from "@nextui-org/react"; + +export const HeartIcon = ({fill = "currentColor", filled, size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CameraIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/button/icon-only.ts b/apps/docs/content/components/button/icon-only.ts index b438e283f2..7709cd3f67 100644 --- a/apps/docs/content/components/button/icon-only.ts +++ b/apps/docs/content/components/button/icon-only.ts @@ -1,82 +1,7 @@ -const HeartIcon = `export const HeartIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - ); -}; -`; - -const CameraIcon = `export const CameraIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Button} from "@nextui-org/react"; -import {HeartIcon} from './HeartIcon'; -import {CameraIcon} from './CameraIcon'; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./icon-only.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HeartIcon.jsx": HeartIcon, - "/CameraIcon.jsx": CameraIcon, }; export default { diff --git a/apps/docs/content/components/button/icons.raw.jsx b/apps/docs/content/components/button/icons.raw.jsx new file mode 100644 index 0000000000..2e1634bba0 --- /dev/null +++ b/apps/docs/content/components/button/icons.raw.jsx @@ -0,0 +1,62 @@ +import {Button} from "@nextui-org/react"; + +export const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + + + ); +}; + +export const CameraIcon = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/button/icons.ts b/apps/docs/content/components/button/icons.ts index 783ae43bd1..22a410c88f 100644 --- a/apps/docs/content/components/button/icons.ts +++ b/apps/docs/content/components/button/icons.ts @@ -1,91 +1,7 @@ -const UserIcon = `export const UserIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - - - - ); -};`; - -const CameraIcon = `export const CameraIcon = ({ - fill = 'currentColor', - filled, - size, - height, - width, - label, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Button} from "@nextui-org/react"; -import {UserIcon} from './UserIcon'; -import {CameraIcon} from './CameraIcon'; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/UserIcon.jsx": UserIcon, - "/CameraIcon.jsx": CameraIcon, }; export default { diff --git a/apps/docs/content/components/button/loading-custom.raw.jsx b/apps/docs/content/components/button/loading-custom.raw.jsx new file mode 100644 index 0000000000..50979e32b5 --- /dev/null +++ b/apps/docs/content/components/button/loading-custom.raw.jsx @@ -0,0 +1,34 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/loading-custom.ts b/apps/docs/content/components/button/loading-custom.ts index 7dbe0d78f5..b0036de8da 100644 --- a/apps/docs/content/components/button/loading-custom.ts +++ b/apps/docs/content/components/button/loading-custom.ts @@ -1,37 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./loading-custom.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/loading.raw.jsx b/apps/docs/content/components/button/loading.raw.jsx new file mode 100644 index 0000000000..6b75c489d4 --- /dev/null +++ b/apps/docs/content/components/button/loading.raw.jsx @@ -0,0 +1,9 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/button/loading.ts b/apps/docs/content/components/button/loading.ts index 830d52eea4..0c8fea5a5f 100644 --- a/apps/docs/content/components/button/loading.ts +++ b/apps/docs/content/components/button/loading.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./loading.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/radius.raw.jsx b/apps/docs/content/components/button/radius.raw.jsx new file mode 100644 index 0000000000..c91268e560 --- /dev/null +++ b/apps/docs/content/components/button/radius.raw.jsx @@ -0,0 +1,13 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + +
+ ); +} diff --git a/apps/docs/content/components/button/radius.ts b/apps/docs/content/components/button/radius.ts index 739ca0f5b8..7b78db1ce0 100644 --- a/apps/docs/content/components/button/radius.ts +++ b/apps/docs/content/components/button/radius.ts @@ -1,26 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/sizes.raw.jsx b/apps/docs/content/components/button/sizes.raw.jsx new file mode 100644 index 0000000000..4880e203fd --- /dev/null +++ b/apps/docs/content/components/button/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/button/sizes.ts b/apps/docs/content/components/button/sizes.ts index 06b90c1ffd..85a2f5b30b 100644 --- a/apps/docs/content/components/button/sizes.ts +++ b/apps/docs/content/components/button/sizes.ts @@ -1,20 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/usage.raw.jsx b/apps/docs/content/components/button/usage.raw.jsx new file mode 100644 index 0000000000..fcb138b916 --- /dev/null +++ b/apps/docs/content/components/button/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/button/usage.ts b/apps/docs/content/components/button/usage.ts index f80f3914ca..1118304c37 100644 --- a/apps/docs/content/components/button/usage.ts +++ b/apps/docs/content/components/button/usage.ts @@ -1,12 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/button/variants.raw.jsx b/apps/docs/content/components/button/variants.raw.jsx new file mode 100644 index 0000000000..7a7eaff52d --- /dev/null +++ b/apps/docs/content/components/button/variants.raw.jsx @@ -0,0 +1,29 @@ +import {Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + + +
+ ); +} diff --git a/apps/docs/content/components/button/variants.ts b/apps/docs/content/components/button/variants.ts index fe6067aed7..ddea95fb2e 100644 --- a/apps/docs/content/components/button/variants.ts +++ b/apps/docs/content/components/button/variants.ts @@ -1,32 +1,4 @@ -const App = `import {Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - - -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx new file mode 100644 index 0000000000..edce75b871 --- /dev/null +++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx @@ -0,0 +1,16 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [focusedDate, setFocusedDate] = React.useState(defaultDate); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx new file mode 100644 index 0000000000..00f2666b84 --- /dev/null +++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx @@ -0,0 +1,19 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [focusedDate, setFocusedDate] = React.useState(defaultDate); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/controlled-focused-value.ts b/apps/docs/content/components/calendar/controlled-focused-value.ts index a405da5060..100bf01c43 100644 --- a/apps/docs/content/components/calendar/controlled-focused-value.ts +++ b/apps/docs/content/components/calendar/controlled-focused-value.ts @@ -1,43 +1,15 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [focusedDate, setFocusedDate] = React.useState(defaultDate); - - return ( - - ); -}`; - -const AppTs = `import {Calendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [focusedDate, setFocusedDate] = React.useState(defaultDate); - - return ( - - ); -}`; +import App from "./controlled-focused-value.raw.jsx?raw"; +import AppTs from "./controlled-focused-value.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/controlled.raw.jsx b/apps/docs/content/components/calendar/controlled.raw.jsx new file mode 100644 index 0000000000..54d418f9f8 --- /dev/null +++ b/apps/docs/content/components/calendar/controlled.raw.jsx @@ -0,0 +1,8 @@ +import {Calendar} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState(parseDate("2024-03-07")); + + return ; +} diff --git a/apps/docs/content/components/calendar/controlled.raw.tsx b/apps/docs/content/components/calendar/controlled.raw.tsx new file mode 100644 index 0000000000..80c8b2dd2f --- /dev/null +++ b/apps/docs/content/components/calendar/controlled.raw.tsx @@ -0,0 +1,11 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState(parseDate("2024-03-07")); + + return ; +} diff --git a/apps/docs/content/components/calendar/controlled.ts b/apps/docs/content/components/calendar/controlled.ts index 4a1166231c..1f1a363363 100644 --- a/apps/docs/content/components/calendar/controlled.ts +++ b/apps/docs/content/components/calendar/controlled.ts @@ -1,39 +1,15 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState(parseDate("2024-03-07")); - - return ( - - ); -}`; - -const AppTs = `import {Calendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState(parseDate("2024-03-07")); - - return ( - - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/disabled.raw.jsx b/apps/docs/content/components/calendar/disabled.raw.jsx new file mode 100644 index 0000000000..1d08bd6492 --- /dev/null +++ b/apps/docs/content/components/calendar/disabled.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/disabled.ts b/apps/docs/content/components/calendar/disabled.ts index d82f742067..1a215cc91f 100644 --- a/apps/docs/content/components/calendar/disabled.ts +++ b/apps/docs/content/components/calendar/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/international-calendars.raw.jsx b/apps/docs/content/components/calendar/international-calendars.raw.jsx new file mode 100644 index 0000000000..22d4a824ab --- /dev/null +++ b/apps/docs/content/components/calendar/international-calendars.raw.jsx @@ -0,0 +1,10 @@ +import {Calendar} from "@nextui-org/react"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/calendar/international-calendars.ts b/apps/docs/content/components/calendar/international-calendars.ts index bda32d3a4a..98bb8449e6 100644 --- a/apps/docs/content/components/calendar/international-calendars.ts +++ b/apps/docs/content/components/calendar/international-calendars.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./international-calendars.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/invalid-date.raw.jsx b/apps/docs/content/components/calendar/invalid-date.raw.jsx new file mode 100644 index 0000000000..372034725b --- /dev/null +++ b/apps/docs/content/components/calendar/invalid-date.raw.jsx @@ -0,0 +1,19 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(today(getLocalTimeZone())); + let {locale} = useLocale(); + let isInvalid = isWeekend(date, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/invalid-date.raw.tsx b/apps/docs/content/components/calendar/invalid-date.raw.tsx new file mode 100644 index 0000000000..d9276c52e6 --- /dev/null +++ b/apps/docs/content/components/calendar/invalid-date.raw.tsx @@ -0,0 +1,22 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(today(getLocalTimeZone())); + let {locale} = useLocale(); + let isInvalid = isWeekend(date, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/invalid-date.ts b/apps/docs/content/components/calendar/invalid-date.ts index 6a8354c74c..e373a04e5b 100644 --- a/apps/docs/content/components/calendar/invalid-date.ts +++ b/apps/docs/content/components/calendar/invalid-date.ts @@ -1,51 +1,15 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState(today(getLocalTimeZone())); - let {locale} = useLocale(); - let isInvalid = isWeekend(date, locale); - - return ( - - ); -}`; - -const AppTs = `import {Calendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState(today(getLocalTimeZone())); - let {locale} = useLocale(); - let isInvalid = isWeekend(date, locale); - - return ( - - ); -}`; +import App from "./invalid-date.raw.jsx?raw"; +import AppTs from "./invalid-date.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/max-date-value.raw.jsx b/apps/docs/content/components/calendar/max-date-value.raw.jsx new file mode 100644 index 0000000000..3edacc1909 --- /dev/null +++ b/apps/docs/content/components/calendar/max-date-value.raw.jsx @@ -0,0 +1,12 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/max-date-value.ts b/apps/docs/content/components/calendar/max-date-value.ts index 9c60a5e910..6a82913361 100644 --- a/apps/docs/content/components/calendar/max-date-value.ts +++ b/apps/docs/content/components/calendar/max-date-value.ts @@ -1,15 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./max-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/min-date-value.raw.jsx b/apps/docs/content/components/calendar/min-date-value.raw.jsx new file mode 100644 index 0000000000..c7d7ab70b1 --- /dev/null +++ b/apps/docs/content/components/calendar/min-date-value.raw.jsx @@ -0,0 +1,12 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/calendar/min-date-value.ts b/apps/docs/content/components/calendar/min-date-value.ts index 9ddbabbdb7..4e86e82613 100644 --- a/apps/docs/content/components/calendar/min-date-value.ts +++ b/apps/docs/content/components/calendar/min-date-value.ts @@ -1,15 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./min-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/page-behaviour.raw.jsx b/apps/docs/content/components/calendar/page-behaviour.raw.jsx new file mode 100644 index 0000000000..e28c53f652 --- /dev/null +++ b/apps/docs/content/components/calendar/page-behaviour.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/page-behaviour.ts b/apps/docs/content/components/calendar/page-behaviour.ts index cd4fd33d27..ef31c845d8 100644 --- a/apps/docs/content/components/calendar/page-behaviour.ts +++ b/apps/docs/content/components/calendar/page-behaviour.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./page-behaviour.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/presets.raw.jsx b/apps/docs/content/components/calendar/presets.raw.jsx new file mode 100644 index 0000000000..bf703ff297 --- /dev/null +++ b/apps/docs/content/components/calendar/presets.raw.jsx @@ -0,0 +1,87 @@ +import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [value, setValue] = React.useState(defaultDate); + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
+ + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + classNames={{ + content: "w-full", + }} + focusedValue={value} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setValue} + /> +
+ ); +} diff --git a/apps/docs/content/components/calendar/presets.raw.tsx b/apps/docs/content/components/calendar/presets.raw.tsx new file mode 100644 index 0000000000..496f8e37b3 --- /dev/null +++ b/apps/docs/content/components/calendar/presets.raw.tsx @@ -0,0 +1,90 @@ +import type {DateValue} from "@react-types/calendar"; + +import React from "react"; +import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [value, setValue] = React.useState(defaultDate); + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
+ + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + classNames={{ + content: "w-full", + }} + focusedValue={value} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setValue} + /> +
+ ); +} diff --git a/apps/docs/content/components/calendar/presets.ts b/apps/docs/content/components/calendar/presets.ts index f6e9d85919..334d59a763 100644 --- a/apps/docs/content/components/calendar/presets.ts +++ b/apps/docs/content/components/calendar/presets.ts @@ -1,185 +1,15 @@ -const App = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [value, setValue] = React.useState(defaultDate); - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
- - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - classNames={{ - content: "w-full", - }} - focusedValue={value} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setValue} - /> -
- ); -}`; - -const AppTs = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [value, setValue] = React.useState(defaultDate); - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
- - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - classNames={{ - content: "w-full", - }} - focusedValue={value} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setValue} - /> -
- ); -}`; +import App from "./presets.raw.jsx?raw"; +import AppTs from "./presets.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/calendar/read-only.raw.jsx b/apps/docs/content/components/calendar/read-only.raw.jsx new file mode 100644 index 0000000000..ff58e4fbb8 --- /dev/null +++ b/apps/docs/content/components/calendar/read-only.raw.jsx @@ -0,0 +1,6 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/read-only.ts b/apps/docs/content/components/calendar/read-only.ts index 6fffcd20a6..caf4be10cf 100644 --- a/apps/docs/content/components/calendar/read-only.ts +++ b/apps/docs/content/components/calendar/read-only.ts @@ -1,15 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./read-only.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/unavailable-dates.raw.jsx b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx new file mode 100644 index 0000000000..b08a78b9da --- /dev/null +++ b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx @@ -0,0 +1,23 @@ +import {Calendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + let {locale} = useLocale(); + + let isDateUnavailable = (date) => + isWeekend(date, locale) || + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ); + + return ; +} diff --git a/apps/docs/content/components/calendar/unavailable-dates.ts b/apps/docs/content/components/calendar/unavailable-dates.ts index 9a884fb2a9..b4e1f4df1a 100644 --- a/apps/docs/content/components/calendar/unavailable-dates.ts +++ b/apps/docs/content/components/calendar/unavailable-dates.ts @@ -1,32 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - let {locale} = useLocale(); - - let isDateUnavailable = (date) => - isWeekend(date, locale) || - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ); - - return ( - - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/usage.raw.jsx b/apps/docs/content/components/calendar/usage.raw.jsx new file mode 100644 index 0000000000..5d2d03dd0b --- /dev/null +++ b/apps/docs/content/components/calendar/usage.raw.jsx @@ -0,0 +1,11 @@ +import {Calendar} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/calendar/usage.ts b/apps/docs/content/components/calendar/usage.ts index 0a97b863cd..1118304c37 100644 --- a/apps/docs/content/components/calendar/usage.ts +++ b/apps/docs/content/components/calendar/usage.ts @@ -1,14 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; -import {parseDate} from '@internationalized/date'; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/visible-months.raw.jsx b/apps/docs/content/components/calendar/visible-months.raw.jsx new file mode 100644 index 0000000000..bf0c6aff77 --- /dev/null +++ b/apps/docs/content/components/calendar/visible-months.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/visible-months.ts b/apps/docs/content/components/calendar/visible-months.ts index 796fc6d9b8..38c2db8f01 100644 --- a/apps/docs/content/components/calendar/visible-months.ts +++ b/apps/docs/content/components/calendar/visible-months.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./visible-months.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx new file mode 100644 index 0000000000..a6a3c56866 --- /dev/null +++ b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx @@ -0,0 +1,5 @@ +import {Calendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.ts b/apps/docs/content/components/calendar/with-month-and-year-picker.ts index 1774984501..53df2d1367 100644 --- a/apps/docs/content/components/calendar/with-month-and-year-picker.ts +++ b/apps/docs/content/components/calendar/with-month-and-year-picker.ts @@ -1,13 +1,4 @@ -const App = `import {Calendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./with-month-and-year-picker.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/blurred-footer.raw.jsx b/apps/docs/content/components/card/blurred-footer.raw.jsx new file mode 100644 index 0000000000..5d3be92b5b --- /dev/null +++ b/apps/docs/content/components/card/blurred-footer.raw.jsx @@ -0,0 +1,27 @@ +import {Card, CardFooter, Image, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + Woman listing to music + +

Available soon.

+ + + + ); +} diff --git a/apps/docs/content/components/card/blurred-footer.ts b/apps/docs/content/components/card/blurred-footer.ts index ba3e83bd87..a3fd650d04 100644 --- a/apps/docs/content/components/card/blurred-footer.ts +++ b/apps/docs/content/components/card/blurred-footer.ts @@ -1,28 +1,4 @@ -const App = `import {Card, CardFooter, Image, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - Woman listing to music - -

Available soon.

- - - - ); -}`; +import App from "./blurred-footer.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/blurred.raw.jsx b/apps/docs/content/components/card/blurred.raw.jsx new file mode 100644 index 0000000000..bdf580ae9d --- /dev/null +++ b/apps/docs/content/components/card/blurred.raw.jsx @@ -0,0 +1,264 @@ +import {Card, CardBody, Image, Button, Slider} from "@nextui-org/react"; + +export const HeartIcon = ({ + size = 24, + width, + height, + strokeWidth = 1.5, + fill = "none", + ...props +}) => { + return ( + + ); +}; + +export const PauseCircleIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const NextIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const PreviousIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const RepeatOneIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const ShuffleIcon = ({size = 24, width, height, ...props}) => { + reutrn( + , + ); +}; + +export default function App() { + const [liked, setLiked] = React.useState(false); + + return ( + + +
+
+ Album cover +
+ +
+
+
+

Daily Mix

+

12 Tracks

+

Frontend Radio

+
+ +
+ +
+ +
+

1:23

+

4:32

+
+
+ +
+ + + + + +
+
+
+ + + ); +} diff --git a/apps/docs/content/components/card/blurred.ts b/apps/docs/content/components/card/blurred.ts index 8ba66a5acc..0c08e28f90 100644 --- a/apps/docs/content/components/card/blurred.ts +++ b/apps/docs/content/components/card/blurred.ts @@ -1,270 +1,7 @@ -const HearIcon = `export const HeartIcon = ({ - size = 24, - width, - height, - strokeWidth = 1.5, - fill = "none", - ...props -}) => ( - -);`; - -const PauseCircleIcon = `export const PauseCircleIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const NextIcon = `export const NextIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const PreviousIcon = `export const PreviousIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const RepeatOneIcon = `export const RepeatOneIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const ShuffleIcon = `export const ShuffleIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const App = `import {Card, CardBody, Image, Button, Slider} from "@nextui-org/react"; -import {HeartIcon} from "./HeartIcon"; -import {PauseCircleIcon} from "./PauseCircleIcon"; -import {NextIcon} from "./NextIcon"; -import {PreviousIcon} from "./PreviousIcon"; -import {RepeatOneIcon} from "./RepeatOneIcon"; -import {ShuffleIcon} from "./ShuffleIcon"; - -export default function App() { - const [liked, setLiked] = React.useState(false); - - return ( - - -
-
- Album cover -
- -
-
-
-

Daily Mix

-

12 Tracks

-

Frontend Radio

-
- -
- -
- -
-

1:23

-

4:32

-
-
- -
- - - - - -
-
-
- - - ); -}`; +import App from "./blurred.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HeartIcon.jsx": HearIcon, - "/PauseCircleIcon.jsx": PauseCircleIcon, - "/NextIcon.jsx": NextIcon, - "/PreviousIcon.jsx": PreviousIcon, - "/RepeatOneIcon.jsx": RepeatOneIcon, - "/ShuffleIcon.jsx": ShuffleIcon, }; export default { diff --git a/apps/docs/content/components/card/composition.raw.jsx b/apps/docs/content/components/card/composition.raw.jsx new file mode 100644 index 0000000000..0cfc1e93eb --- /dev/null +++ b/apps/docs/content/components/card/composition.raw.jsx @@ -0,0 +1,53 @@ +import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react"; + +export default function App() { + const [isFollowed, setIsFollowed] = React.useState(false); + + return ( + + +
+ +
+

Zoey Lang

+
@zoeylang
+
+
+ + + +

Frontend developer and UI/UX enthusiast. Join me on this coding adventure!

+ + #FrontendWithZoey + + 💻 + + + + +
+

4

+

Following

+
+
+

97.1K

+

Followers

+
+ + + ); +} diff --git a/apps/docs/content/components/card/composition.ts b/apps/docs/content/components/card/composition.ts index 821d5a8bf8..82a0d549f3 100644 --- a/apps/docs/content/components/card/composition.ts +++ b/apps/docs/content/components/card/composition.ts @@ -1,53 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react"; - -export default function App() { - const [isFollowed, setIsFollowed] = React.useState(false); - - return ( - - -
- -
-

Zoey Lang

-
@zoeylang
-
-
- - - -

- Frontend developer and UI/UX enthusiast. Join me on this coding adventure! -

- - #FrontendWithZoey - - 💻 - - - - -
-

4

-

Following

-
-
-

97.1K

-

Followers

-
- - - ); -}`; +import App from "./composition.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/cover-image.raw.jsx b/apps/docs/content/components/card/cover-image.raw.jsx new file mode 100644 index 0000000000..e50eccf2c6 --- /dev/null +++ b/apps/docs/content/components/card/cover-image.raw.jsx @@ -0,0 +1,93 @@ +import {Card, CardHeader, CardFooter, Image, Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + +

What to watch

+

Stream the Acme event

+ + Card background + + + +

Plant a tree

+

Contribute to the planet

+ + Card background + + + +

Supercharged

+

Creates beauty like a beast

+ + Card background + + + +

New

+

Acme camera

+ + Card example background + +
+

Available soon.

+

Get notified.

+
+ + + + + +

Your day your way

+

Your checklist for better sleep

+ + Relaxing app background + +
+ Breathing app icon +
+

Breathing App

+

Get a good night's sleep.

+
+
+ + + +
+ ); +} diff --git a/apps/docs/content/components/card/cover-image.ts b/apps/docs/content/components/card/cover-image.ts index 795f955142..80517c8549 100644 --- a/apps/docs/content/components/card/cover-image.ts +++ b/apps/docs/content/components/card/cover-image.ts @@ -1,94 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, CardFooter, Image, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - -

What to watch

-

Stream the Acme event

- - Card background - - - -

Plant a tree

-

Contribute to the planet

- - Card background - - - -

Supercharged

-

Creates beauty like a beast

- - Card background - - - -

New

-

Acme camera

- - Card example background - -
-

Available soon.

-

Get notified.

-
- - - - - -

Your day your way

-

Your checklist for better sleep

- - Relaxing app background - -
- Breathing app icon -
-

Breathing App

-

Get a good night's sleep.

-
-
- - - -
- ); -}`; +import App from "./cover-image.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/divider.raw.jsx b/apps/docs/content/components/card/divider.raw.jsx new file mode 100644 index 0000000000..09c8a0d90a --- /dev/null +++ b/apps/docs/content/components/card/divider.raw.jsx @@ -0,0 +1,31 @@ +import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react"; + +export default function App() { + return ( + + + nextui logo +
+

NextUI

+

nextui.org

+
+ + + +

Make beautiful websites regardless of your design experience.

+ + + + + Visit source code on GitHub. + + + + ); +} diff --git a/apps/docs/content/components/card/divider.ts b/apps/docs/content/components/card/divider.ts index b482a6acb0..b6500e8d63 100644 --- a/apps/docs/content/components/card/divider.ts +++ b/apps/docs/content/components/card/divider.ts @@ -1,38 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react"; - -export default function App() { - return ( - - - nextui logo -
-

NextUI

-

nextui.org

-
- - - -

Make beautiful websites regardless of your design experience.

- - - - - Visit source code on GitHub. - - - - ); -}`; +import App from "./divider.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/image.raw.jsx b/apps/docs/content/components/card/image.raw.jsx new file mode 100644 index 0000000000..54be0bbb40 --- /dev/null +++ b/apps/docs/content/components/card/image.raw.jsx @@ -0,0 +1,21 @@ +import {Card, CardHeader, CardBody, Image} from "@nextui-org/react"; + +export default function App() { + return ( + + +

Daily Mix

+ 12 Tracks +

Frontend Radio

+ + + Card background + + + ); +} diff --git a/apps/docs/content/components/card/image.ts b/apps/docs/content/components/card/image.ts index 08e2d16c15..30e67acb4f 100644 --- a/apps/docs/content/components/card/image.ts +++ b/apps/docs/content/components/card/image.ts @@ -1,24 +1,4 @@ -const App = `import {Card, CardHeader, CardBody, Image} from "@nextui-org/react"; - -export default function App() { - return ( - - -

Daily Mix

- 12 Tracks -

Frontend Radio

- - - Card background - - - ); -}`; +import App from "./image.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/primary-action.raw.jsx b/apps/docs/content/components/card/primary-action.raw.jsx new file mode 100644 index 0000000000..ce62f8b388 --- /dev/null +++ b/apps/docs/content/components/card/primary-action.raw.jsx @@ -0,0 +1,70 @@ +import {Card, CardBody, CardFooter, Image} from "@nextui-org/react"; + +export default function App() { + const list = [ + { + title: "Orange", + img: "/images/fruit-1.jpeg", + price: "$5.50", + }, + { + title: "Tangerine", + img: "/images/fruit-2.jpeg", + price: "$3.00", + }, + { + title: "Raspberry", + img: "/images/fruit-3.jpeg", + price: "$10.00", + }, + { + title: "Lemon", + img: "/images/fruit-4.jpeg", + price: "$5.30", + }, + { + title: "Avocado", + img: "/images/fruit-5.jpeg", + price: "$15.70", + }, + { + title: "Lemon 2", + img: "/images/fruit-6.jpeg", + price: "$8.00", + }, + { + title: "Banana", + img: "/images/fruit-7.jpeg", + price: "$7.50", + }, + { + title: "Watermelon", + img: "/images/fruit-8.jpeg", + price: "$12.20", + }, + ]; + + return ( +
+ {list.map((item, index) => ( + /* eslint-disable no-console */ + console.log("item pressed")}> + + {item.title} + + + {item.title} +

{item.price}

+ + + ))} +
+ ); +} diff --git a/apps/docs/content/components/card/primary-action.ts b/apps/docs/content/components/card/primary-action.ts index 0d36aef25a..78338d94af 100644 --- a/apps/docs/content/components/card/primary-action.ts +++ b/apps/docs/content/components/card/primary-action.ts @@ -1,72 +1,4 @@ -const App = `import {Card, CardBody, CardFooter, Image} from "@nextui-org/react"; - -export default function App() { - const list = [ - { - title: "Orange", - img: "/images/fruit-1.jpeg", - price: "$5.50", - }, - { - title: "Tangerine", - img: "/images/fruit-2.jpeg", - price: "$3.00", - }, - { - title: "Raspberry", - img: "/images/fruit-3.jpeg", - price: "$10.00", - }, - { - title: "Lemon", - img: "/images/fruit-4.jpeg", - price: "$5.30", - }, - { - title: "Avocado", - img: "/images/fruit-5.jpeg", - price: "$15.70", - }, - { - title: "Lemon 2", - img: "/images/fruit-6.jpeg", - price: "$8.00", - }, - { - title: "Banana", - img: "/images/fruit-7.jpeg", - price: "$7.50", - }, - { - title: "Watermelon", - img: "/images/fruit-8.jpeg", - price: "$12.20", - }, - ]; - - return ( -
- {list.map((item, index) => ( - console.log("item pressed")}> - - {item.title} - - - {item.title} -

{item.price}

- - - ))} -
- ); -}`; +import App from "./primary-action.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/card/usage.raw.jsx b/apps/docs/content/components/card/usage.raw.jsx new file mode 100644 index 0000000000..34167f151a --- /dev/null +++ b/apps/docs/content/components/card/usage.raw.jsx @@ -0,0 +1,11 @@ +import {Card, CardBody} from "@nextui-org/react"; + +export default function App() { + return ( + + +

Make beautiful websites regardless of your design experience.

+ + + ); +} diff --git a/apps/docs/content/components/card/usage.ts b/apps/docs/content/components/card/usage.ts index 5ad425b264..1118304c37 100644 --- a/apps/docs/content/components/card/usage.ts +++ b/apps/docs/content/components/card/usage.ts @@ -1,14 +1,4 @@ -const App = `import {Card, CardBody} from "@nextui-org/react"; - -export default function App() { - return ( - - -

Make beautiful websites regardless of your design experience.

- - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/controlled.raw.jsx b/apps/docs/content/components/checkbox-group/controlled.raw.jsx new file mode 100644 index 0000000000..c316983534 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/controlled.raw.jsx @@ -0,0 +1,21 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]); + + return ( +
+ + Buenos Aires + Sydney + San Francisco + +

Selected: {selected.join(", ")}

+
+ ); +} diff --git a/apps/docs/content/components/checkbox-group/controlled.ts b/apps/docs/content/components/checkbox-group/controlled.ts index 708b214cbb..2c3f0cacb4 100644 --- a/apps/docs/content/components/checkbox-group/controlled.ts +++ b/apps/docs/content/components/checkbox-group/controlled.ts @@ -1,24 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]); - - return ( -
- - Buenos Aires - Sydney - San Francisco - -

Selected: {selected.join(", ")}

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx new file mode 100644 index 0000000000..fe4324f756 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx @@ -0,0 +1,94 @@ +import {useCheckbox, CheckboxGroup, Chip, VisuallyHidden, tv} from "@nextui-org/react"; + +const checkbox = tv({ + slots: { + base: "border-default hover:bg-default-200", + content: "text-default-500", + }, + variants: { + isSelected: { + true: { + base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", + content: "text-primary-foreground pl-1", + }, + }, + isFocusVisible: { + true: { + base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", + }, + }, + }, +}); + +export const CustomCheckbox = (props) => { + const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} = + useCheckbox({ + ...props, + }); + + const styles = checkbox({isSelected, isFocusVisible}); + + return ( + + ); +}; + +export const CheckIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [groupSelected, setGroupSelected] = React.useState([]); + + return ( +
+ + Wifi + TV + Kitchen + Parking + Pool + Gym + +

Selected: {groupSelected.join(", ")}

+
+ ); +} diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.ts b/apps/docs/content/components/checkbox-group/custom-implementation.ts index 7a50848086..cf79f4d84e 100644 --- a/apps/docs/content/components/checkbox-group/custom-implementation.ts +++ b/apps/docs/content/components/checkbox-group/custom-implementation.ts @@ -1,113 +1,7 @@ -const CheckIcon = `export const CheckIcon = (props) => - ( - - );`; - -const CustomCheckbox = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react"; -import {CheckIcon} from './CheckIcon.jsx' - -const checkbox = tv({ - slots: { - base: "border-default hover:bg-default-200", - content: "text-default-500" - }, - variants: { - isSelected: { - true: { - base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", - content: "text-primary-foreground pl-1" - } - }, - isFocusVisible: { - true: { - base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", - } - } - } -}) - -export const CustomCheckbox = (props) => { - const { - children, - isSelected, - isFocusVisible, - getBaseProps, - getLabelProps, - getInputProps, - } = useCheckbox({ - ...props - }) - - const styles = checkbox({ isSelected, isFocusVisible }) - - return ( - - ); -}`; - -const App = `import {CheckboxGroup} from "@nextui-org/react"; -import {CustomCheckbox} from "./CustomCheckbox"; - -export default function App() { - const [groupSelected, setGroupSelected] = React.useState([]); - - return ( -
- - Wifi - TV - Kitchen - Parking - Pool - Gym - -

- Selected: {groupSelected.join(", ")} -

-
- ); -}`; +import App from "./custom-implementation.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CustomCheckbox.jsx": CustomCheckbox, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx b/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx new file mode 100644 index 0000000000..94ae0969ba --- /dev/null +++ b/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx @@ -0,0 +1,104 @@ +import {Checkbox, CheckboxGroup, Link, User, Chip, cn} from "@nextui-org/react"; + +export const CustomCheckbox = ({user, statusColor, value}) => { + return ( + +
+ + @{user.username} + + } + name={user.name} + /> +
+ {user.role} + + {user.status} + +
+
+ + ); +}; + +export default function App() { + const [groupSelected, setGroupSelected] = React.useState([]); + + return ( +
+ + + + + + +

Selected: {groupSelected.join(", ")}

+
+ ); +} diff --git a/apps/docs/content/components/checkbox-group/custom-styles.ts b/apps/docs/content/components/checkbox-group/custom-styles.ts index e1b0be4474..da3ea9093a 100644 --- a/apps/docs/content/components/checkbox-group/custom-styles.ts +++ b/apps/docs/content/components/checkbox-group/custom-styles.ts @@ -1,116 +1,7 @@ -const CustomCheckbox = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react"; - -export const CustomCheckbox = ({ user, statusColor, value }) => { - return ( - -
- - @{user.username} - - } - name={user.name} - /> -
- {user.role} - - {user.status} - -
-
- - ); -};`; - -const App = `import {CheckboxGroup} from "@nextui-org/react"; -import {CustomCheckbox} from "./CustomCheckbox"; - -export default function App() { - const [groupSelected, setGroupSelected] = React.useState([]); - - return ( -
- - - - - - -

- Selected: {groupSelected.join(", ")} -

-
- ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CustomCheckbox.jsx": CustomCheckbox, }; export default { diff --git a/apps/docs/content/components/checkbox-group/disabled.raw.jsx b/apps/docs/content/components/checkbox-group/disabled.raw.jsx new file mode 100644 index 0000000000..9f71a07c1f --- /dev/null +++ b/apps/docs/content/components/checkbox-group/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/disabled.ts b/apps/docs/content/components/checkbox-group/disabled.ts index 6ae54731a6..1a215cc91f 100644 --- a/apps/docs/content/components/checkbox-group/disabled.ts +++ b/apps/docs/content/components/checkbox-group/disabled.ts @@ -1,20 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/horizontal.raw.jsx b/apps/docs/content/components/checkbox-group/horizontal.raw.jsx new file mode 100644 index 0000000000..4555eb346f --- /dev/null +++ b/apps/docs/content/components/checkbox-group/horizontal.raw.jsx @@ -0,0 +1,18 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/horizontal.ts b/apps/docs/content/components/checkbox-group/horizontal.ts index b5083f40af..60be4b4077 100644 --- a/apps/docs/content/components/checkbox-group/horizontal.ts +++ b/apps/docs/content/components/checkbox-group/horizontal.ts @@ -1,21 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./horizontal.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/invalid.raw.jsx b/apps/docs/content/components/checkbox-group/invalid.raw.jsx new file mode 100644 index 0000000000..a587998c56 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/invalid.raw.jsx @@ -0,0 +1,23 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + const [isInvalid, setIsInvalid] = React.useState(true); + + return ( + { + setIsInvalid(value.length < 1); + }} + > + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/invalid.ts b/apps/docs/content/components/checkbox-group/invalid.ts index 60dffaff8f..a02a8fe9c1 100644 --- a/apps/docs/content/components/checkbox-group/invalid.ts +++ b/apps/docs/content/components/checkbox-group/invalid.ts @@ -1,26 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - const [isInvalid, setIsInvalid] = React.useState(true); - - return ( - { - setIsInvalid(value.length < 1); - }} - > - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./invalid.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox-group/usage.raw.jsx b/apps/docs/content/components/checkbox-group/usage.raw.jsx new file mode 100644 index 0000000000..7909467770 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/usage.raw.jsx @@ -0,0 +1,13 @@ +import {CheckboxGroup, Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/checkbox-group/usage.ts b/apps/docs/content/components/checkbox-group/usage.ts index 8867a1d86e..1118304c37 100644 --- a/apps/docs/content/components/checkbox-group/usage.ts +++ b/apps/docs/content/components/checkbox-group/usage.ts @@ -1,19 +1,4 @@ -const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/colors.raw.jsx b/apps/docs/content/components/checkbox/colors.raw.jsx new file mode 100644 index 0000000000..1444356a3b --- /dev/null +++ b/apps/docs/content/components/checkbox/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Default + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
+ ); +} diff --git a/apps/docs/content/components/checkbox/colors.ts b/apps/docs/content/components/checkbox/colors.ts index a7d318f734..d5bef810aa 100644 --- a/apps/docs/content/components/checkbox/colors.ts +++ b/apps/docs/content/components/checkbox/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
- Default - Primary - Secondary - Success - Warning - Danger -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/controlled.raw.jsx b/apps/docs/content/components/checkbox/controlled.raw.jsx new file mode 100644 index 0000000000..4d81052b0e --- /dev/null +++ b/apps/docs/content/components/checkbox/controlled.raw.jsx @@ -0,0 +1,14 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + const [isSelected, setIsSelected] = React.useState(false); + + return ( +
+ + Subscribe (controlled) + +

Selected: {isSelected ? "true" : "false"}

+
+ ); +} diff --git a/apps/docs/content/components/checkbox/controlled.ts b/apps/docs/content/components/checkbox/controlled.ts index 61c09eb3ae..2c3f0cacb4 100644 --- a/apps/docs/content/components/checkbox/controlled.ts +++ b/apps/docs/content/components/checkbox/controlled.ts @@ -1,19 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - const [isSelected, setIsSelected] = React.useState(false); - - return ( -
- - Subscribe (controlled) - -

- Selected: {isSelected ? "true" : "false"} -

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx new file mode 100644 index 0000000000..bea37878e1 --- /dev/null +++ b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx @@ -0,0 +1,68 @@ +import {Checkbox} from "@nextui-org/react"; + +export const HeartIcon = ({size, height, width, ...props}) => { + // avoid passing non-DOM attributes to svg + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; + + return ( + + + + ); +}; + +export const PlusIcon = ({size, height, width, ...props}) => { + // avoid passing non-DOM attributes to svg + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; + + return ( + + + + + ); +}; + +export default function App() { + return ( +
+ }> + Option + + }> + Option + +
+ ); +} diff --git a/apps/docs/content/components/checkbox/custom-check-icon.ts b/apps/docs/content/components/checkbox/custom-check-icon.ts index 5bd83fa324..6f2bd3d139 100644 --- a/apps/docs/content/components/checkbox/custom-check-icon.ts +++ b/apps/docs/content/components/checkbox/custom-check-icon.ts @@ -1,73 +1,7 @@ -const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => { - // avoid passing non-DOM attributes to svg - const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; - - return ( - - - - ); -}; -`; - -const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => { - // avoid passing non-DOM attributes to svg - const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props; - - return ( - - - - - ); -};`; - -const App = `import {Checkbox} from "@nextui-org/react"; -import {HeartIcon} from './HeartIcon.jsx'; -import {PlusIcon} from './PlusIcon.jsx'; - -export default function App() { - return ( -
- }>Option - } color="warning">Option -
- ); -}`; +import App from "./custom-check-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/HeartIcon.jsx": HeartIcon, - "/PlusIcon.jsx": PlusIcon, }; export default { diff --git a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx new file mode 100644 index 0000000000..0d7e501710 --- /dev/null +++ b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx @@ -0,0 +1,70 @@ +import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react"; + +export const CheckIcon = (props) => { + return ( + + ); +}; + +const checkbox = tv({ + slots: { + base: "border-default hover:bg-default-200", + content: "text-default-500", + }, + variants: { + isSelected: { + true: { + base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", + content: "text-primary-foreground pl-1", + }, + }, + isFocusVisible: { + true: { + base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", + }, + }, + }, +}); + +export default function App() { + const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} = + useCheckbox({ + defaultSelected: true, + }); + + const styles = checkbox({isSelected, isFocusVisible}); + + return ( + + ); +} diff --git a/apps/docs/content/components/checkbox/custom-implementation.ts b/apps/docs/content/components/checkbox/custom-implementation.ts index 6c73006698..cf79f4d84e 100644 --- a/apps/docs/content/components/checkbox/custom-implementation.ts +++ b/apps/docs/content/components/checkbox/custom-implementation.ts @@ -1,83 +1,7 @@ -const CheckIcon = `export const CheckIcon = (props) => - ( - - );`; - -const App = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react"; -import {CheckIcon} from './CheckIcon.jsx' - -const checkbox = tv({ - slots: { - base: "border-default hover:bg-default-200", - content: "text-default-500" - }, - variants: { - isSelected: { - true: { - base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500", - content: "text-primary-foreground pl-1" - } - }, - isFocusVisible: { - true: { - base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background", - } - } - } -}) - -export default function App() { - const { - children, - isSelected, - isFocusVisible, - getBaseProps, - getLabelProps, - getInputProps, - } = useCheckbox({ - defaultSelected: true, - }) - - const styles = checkbox({ isSelected, isFocusVisible }) - - return ( - - ); -}`; +import App from "./custom-implementation.raw.jsx?raw"; const react = { "/App.jsx": App, - "./CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/checkbox/custom-styles.raw.jsx b/apps/docs/content/components/checkbox/custom-styles.raw.jsx new file mode 100644 index 0000000000..d3e98200e4 --- /dev/null +++ b/apps/docs/content/components/checkbox/custom-styles.raw.jsx @@ -0,0 +1,49 @@ +import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react"; + +export default function App() { + const [isSelected, setIsSelected] = React.useState(false); + + const user = { + name: "Junior Garcia", + avatar: "https://avatars.githubusercontent.com/u/30373425?v=4", + username: "jrgarciadev", + url: "https://x.com/jrgarciadev", + role: "Software Developer", + status: "Active", + }; + + return ( + +
+ + @{user.username} + + } + name={user.name} + /> +
+ {user.role} + + {user.status} + +
+
+ + ); +} diff --git a/apps/docs/content/components/checkbox/custom-styles.ts b/apps/docs/content/components/checkbox/custom-styles.ts index 7484b1c453..da3ea9093a 100644 --- a/apps/docs/content/components/checkbox/custom-styles.ts +++ b/apps/docs/content/components/checkbox/custom-styles.ts @@ -1,52 +1,4 @@ -const App = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react"; - -export default function App() { - const [isSelected, setIsSelected] = React.useState(false); - - const user = { - name: "Junior Garcia", - avatar: "https://avatars.githubusercontent.com/u/30373425?v=4", - username: "jrgarciadev", - url: "https://x.com/jrgarciadev", - role: "Software Developer", - status: "Active", - } - - return ( - -
- - @{user.username} - - } - name={user.name} - /> -
- {user.role} - - {user.status} - -
-
- - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/disabled.raw.jsx b/apps/docs/content/components/checkbox/disabled.raw.jsx new file mode 100644 index 0000000000..c92dd3711e --- /dev/null +++ b/apps/docs/content/components/checkbox/disabled.raw.jsx @@ -0,0 +1,12 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
+ Option + + Option + +
+ ); +} diff --git a/apps/docs/content/components/checkbox/disabled.ts b/apps/docs/content/components/checkbox/disabled.ts index 23f637e682..1a215cc91f 100644 --- a/apps/docs/content/components/checkbox/disabled.ts +++ b/apps/docs/content/components/checkbox/disabled.ts @@ -1,13 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
- Option - Option -
- ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/indeterminate.raw.jsx b/apps/docs/content/components/checkbox/indeterminate.raw.jsx new file mode 100644 index 0000000000..0bc1851041 --- /dev/null +++ b/apps/docs/content/components/checkbox/indeterminate.raw.jsx @@ -0,0 +1,5 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return Option; +} diff --git a/apps/docs/content/components/checkbox/indeterminate.ts b/apps/docs/content/components/checkbox/indeterminate.ts index bc9ad778aa..7094e42950 100644 --- a/apps/docs/content/components/checkbox/indeterminate.ts +++ b/apps/docs/content/components/checkbox/indeterminate.ts @@ -1,10 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - Option - ); -}`; +import App from "./indeterminate.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/line-through.raw.jsx b/apps/docs/content/components/checkbox/line-through.raw.jsx new file mode 100644 index 0000000000..4e4408c213 --- /dev/null +++ b/apps/docs/content/components/checkbox/line-through.raw.jsx @@ -0,0 +1,9 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( + + Option + + ); +} diff --git a/apps/docs/content/components/checkbox/line-through.ts b/apps/docs/content/components/checkbox/line-through.ts index ce5f7e3d22..f4c8aaa857 100644 --- a/apps/docs/content/components/checkbox/line-through.ts +++ b/apps/docs/content/components/checkbox/line-through.ts @@ -1,10 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - Option - ); -}`; +import App from "./line-through.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/radius.raw.jsx b/apps/docs/content/components/checkbox/radius.raw.jsx new file mode 100644 index 0000000000..cabb65bcde --- /dev/null +++ b/apps/docs/content/components/checkbox/radius.raw.jsx @@ -0,0 +1,23 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Full + + + Large + + + Medium + + + Small + + + None + +
+ ); +} diff --git a/apps/docs/content/components/checkbox/radius.ts b/apps/docs/content/components/checkbox/radius.ts index a8446ab909..7b78db1ce0 100644 --- a/apps/docs/content/components/checkbox/radius.ts +++ b/apps/docs/content/components/checkbox/radius.ts @@ -1,16 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
- Full - Large - Medium - Small - None -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/sizes.raw.jsx b/apps/docs/content/components/checkbox/sizes.raw.jsx new file mode 100644 index 0000000000..3e3c51a9e2 --- /dev/null +++ b/apps/docs/content/components/checkbox/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Small + + + Medium + + + Large + +
+ ); +} diff --git a/apps/docs/content/components/checkbox/sizes.ts b/apps/docs/content/components/checkbox/sizes.ts index 7dc596b4ec..85a2f5b30b 100644 --- a/apps/docs/content/components/checkbox/sizes.ts +++ b/apps/docs/content/components/checkbox/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( -
- Small - Medium - Large -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/checkbox/usage.raw.jsx b/apps/docs/content/components/checkbox/usage.raw.jsx new file mode 100644 index 0000000000..050e56a5a7 --- /dev/null +++ b/apps/docs/content/components/checkbox/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Checkbox} from "@nextui-org/react"; + +export default function App() { + return Option; +} diff --git a/apps/docs/content/components/checkbox/usage.ts b/apps/docs/content/components/checkbox/usage.ts index e7b4a84d96..1118304c37 100644 --- a/apps/docs/content/components/checkbox/usage.ts +++ b/apps/docs/content/components/checkbox/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Checkbox} from "@nextui-org/react"; - -export default function App() { - return ( - Option - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/avatar.raw.jsx b/apps/docs/content/components/chip/avatar.raw.jsx new file mode 100644 index 0000000000..1eef36faa2 --- /dev/null +++ b/apps/docs/content/components/chip/avatar.raw.jsx @@ -0,0 +1,20 @@ +import {Chip, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( +
+ } + variant="flat" + > + Avatar + + name.charAt(0)} name="JW" size="sm" />} + variant="flat" + > + Avatar + +
+ ); +} diff --git a/apps/docs/content/components/chip/avatar.ts b/apps/docs/content/components/chip/avatar.ts index d0a767543d..4d86784b87 100644 --- a/apps/docs/content/components/chip/avatar.ts +++ b/apps/docs/content/components/chip/avatar.ts @@ -1,30 +1,4 @@ -const App = `import {Chip, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( -
- - } - > - Avatar - - name.charAt(0)} /> - } - > - Avatar - -
- ); -}`; +import App from "./avatar.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/close-button.raw.jsx b/apps/docs/content/components/chip/close-button.raw.jsx new file mode 100644 index 0000000000..5e55351dda --- /dev/null +++ b/apps/docs/content/components/chip/close-button.raw.jsx @@ -0,0 +1,14 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
+ {/* eslint-disable no-console */} + console.log("close")}>Chip + {/* eslint-disable no-console */} + console.log("close")}> + Chip + +
+ ); +} diff --git a/apps/docs/content/components/chip/close-button.ts b/apps/docs/content/components/chip/close-button.ts index 096eeba7dc..f0fdaba6b9 100644 --- a/apps/docs/content/components/chip/close-button.ts +++ b/apps/docs/content/components/chip/close-button.ts @@ -1,15 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
- console.log("close")}>Chip - console.log("close")} variant="bordered"> - Chip - -
- ); -}`; +import App from "./close-button.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/colors.raw.jsx b/apps/docs/content/components/chip/colors.raw.jsx new file mode 100644 index 0000000000..c61777b169 --- /dev/null +++ b/apps/docs/content/components/chip/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
+ Default + Primary + Secondary + Success + Warning + Danger +
+ ); +} diff --git a/apps/docs/content/components/chip/colors.ts b/apps/docs/content/components/chip/colors.ts index ac0f61f8f5..d5bef810aa 100644 --- a/apps/docs/content/components/chip/colors.ts +++ b/apps/docs/content/components/chip/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
- Default - Primary - Secondary - Success - Warning - Danger -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/custom-styles.raw.jsx b/apps/docs/content/components/chip/custom-styles.raw.jsx new file mode 100644 index 0000000000..61979d0db2 --- /dev/null +++ b/apps/docs/content/components/chip/custom-styles.raw.jsx @@ -0,0 +1,15 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( + + New + + ); +} diff --git a/apps/docs/content/components/chip/custom-styles.ts b/apps/docs/content/components/chip/custom-styles.ts index df78467892..da3ea9093a 100644 --- a/apps/docs/content/components/chip/custom-styles.ts +++ b/apps/docs/content/components/chip/custom-styles.ts @@ -1,18 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( - - New - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/disabled.raw.jsx b/apps/docs/content/components/chip/disabled.raw.jsx new file mode 100644 index 0000000000..28ac8dfe82 --- /dev/null +++ b/apps/docs/content/components/chip/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( + + Chip + + ); +} diff --git a/apps/docs/content/components/chip/disabled.ts b/apps/docs/content/components/chip/disabled.ts index 15a8dd3a21..1a215cc91f 100644 --- a/apps/docs/content/components/chip/disabled.ts +++ b/apps/docs/content/components/chip/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( - Chip - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/list.raw.jsx b/apps/docs/content/components/chip/list.raw.jsx new file mode 100644 index 0000000000..32757cd873 --- /dev/null +++ b/apps/docs/content/components/chip/list.raw.jsx @@ -0,0 +1,24 @@ +import {Chip} from "@nextui-org/react"; + +const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]; + +export default function App() { + const [fruits, setFruits] = React.useState(initialFruits); + + const handleClose = (fruitToRemove) => { + setFruits(fruits.filter((fruit) => fruit !== fruitToRemove)); + if (fruits.length === 1) { + setFruits(initialFruits); + } + }; + + return ( +
+ {fruits.map((fruit, index) => ( + handleClose(fruit)}> + {fruit} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/chip/list.ts b/apps/docs/content/components/chip/list.ts index 8676a06015..2caeebc928 100644 --- a/apps/docs/content/components/chip/list.ts +++ b/apps/docs/content/components/chip/list.ts @@ -1,27 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"] - -export default function App() { - const [fruits, setFruits] = React.useState(initialFruits); - - const handleClose = (fruitToRemove) => { - setFruits(fruits.filter(fruit => fruit !== fruitToRemove)); - if (fruits.length === 1) { - setFruits(initialFruits); - } - }; - - return ( -
- {fruits.map((fruit, index) => ( - handleClose(fruit)} variant="flat"> - {fruit} - - ))} -
- ); -}`; +import App from "./list.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/radius.raw.jsx b/apps/docs/content/components/chip/radius.raw.jsx new file mode 100644 index 0000000000..2f320071ac --- /dev/null +++ b/apps/docs/content/components/chip/radius.raw.jsx @@ -0,0 +1,12 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
+ Full + Large + Medium + Small +
+ ); +} diff --git a/apps/docs/content/components/chip/radius.ts b/apps/docs/content/components/chip/radius.ts index e53280621d..7b78db1ce0 100644 --- a/apps/docs/content/components/chip/radius.ts +++ b/apps/docs/content/components/chip/radius.ts @@ -1,15 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
- Full - Large - Medium - Small -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/sizes.raw.jsx b/apps/docs/content/components/chip/sizes.raw.jsx new file mode 100644 index 0000000000..c02511ab8f --- /dev/null +++ b/apps/docs/content/components/chip/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
+ Small + Medium + Large +
+ ); +} diff --git a/apps/docs/content/components/chip/sizes.ts b/apps/docs/content/components/chip/sizes.ts index 72db218534..85a2f5b30b 100644 --- a/apps/docs/content/components/chip/sizes.ts +++ b/apps/docs/content/components/chip/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
- Small - Medium - Large -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/start-end-content.raw.jsx b/apps/docs/content/components/chip/start-end-content.raw.jsx new file mode 100644 index 0000000000..f901308ecc --- /dev/null +++ b/apps/docs/content/components/chip/start-end-content.raw.jsx @@ -0,0 +1,52 @@ +import {Chip} from "@nextui-org/react"; + +export const NotificationIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CheckIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( +
+ } variant="faded"> + Chip + + } variant="flat"> + Chip + +
+ ); +} diff --git a/apps/docs/content/components/chip/start-end-content.ts b/apps/docs/content/components/chip/start-end-content.ts index 415216b802..e99c7e5997 100644 --- a/apps/docs/content/components/chip/start-end-content.ts +++ b/apps/docs/content/components/chip/start-end-content.ts @@ -1,72 +1,7 @@ -export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => { - return ( - - - - ); -};`; - -export const CheckIcon = `export const CheckIcon = ({ - size, - height, - width, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Chip} from "@nextui-org/react"; -import {NotificationIcon} from "./NotificationIcon"; -import {CheckIcon} from "./CheckIcon"; - -export default function App() { - return ( -
- } - variant="faded" - color="success" - > - Chip - - } - variant="flat" - color="secondary" - > - Chip - -
- ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/NotificationIcon.jsx": NotificationIcon, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/chip/usage.raw.jsx b/apps/docs/content/components/chip/usage.raw.jsx new file mode 100644 index 0000000000..0a4eda3a36 --- /dev/null +++ b/apps/docs/content/components/chip/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return Chip; +} diff --git a/apps/docs/content/components/chip/usage.ts b/apps/docs/content/components/chip/usage.ts index d8e05d0a6f..1118304c37 100644 --- a/apps/docs/content/components/chip/usage.ts +++ b/apps/docs/content/components/chip/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( - Chip - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/chip/variants.raw.jsx b/apps/docs/content/components/chip/variants.raw.jsx new file mode 100644 index 0000000000..ad79cf0878 --- /dev/null +++ b/apps/docs/content/components/chip/variants.raw.jsx @@ -0,0 +1,29 @@ +import {Chip} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Solid + + + Bordered + + + Light + + + Flat + + + Faded + + + Shadow + + + Dot + +
+ ); +} diff --git a/apps/docs/content/components/chip/variants.ts b/apps/docs/content/components/chip/variants.ts index 7893976585..ddea95fb2e 100644 --- a/apps/docs/content/components/chip/variants.ts +++ b/apps/docs/content/components/chip/variants.ts @@ -1,18 +1,4 @@ -const App = `import {Chip} from "@nextui-org/react"; - -export default function App() { - return ( -
- Solid - Bordered - Light - Flat - Faded - Shadow - Dot -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/colors.raw.jsx b/apps/docs/content/components/circular-progress/colors.raw.jsx new file mode 100644 index 0000000000..09e7cc6aa1 --- /dev/null +++ b/apps/docs/content/components/circular-progress/colors.raw.jsx @@ -0,0 +1,14 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/circular-progress/colors.ts b/apps/docs/content/components/circular-progress/colors.ts index 2a8fff62a5..d5bef810aa 100644 --- a/apps/docs/content/components/circular-progress/colors.ts +++ b/apps/docs/content/components/circular-progress/colors.ts @@ -1,17 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/custom-styles.raw.jsx b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx new file mode 100644 index 0000000000..8e2f2d9e64 --- /dev/null +++ b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx @@ -0,0 +1,32 @@ +import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + 2800 Data points + + + + ); +} diff --git a/apps/docs/content/components/circular-progress/custom-styles.ts b/apps/docs/content/components/circular-progress/custom-styles.ts index 53b74c16c2..da3ea9093a 100644 --- a/apps/docs/content/components/circular-progress/custom-styles.ts +++ b/apps/docs/content/components/circular-progress/custom-styles.ts @@ -1,35 +1,4 @@ -const App = `import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - - 2800 Data points - - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/label.raw.jsx b/apps/docs/content/components/circular-progress/label.raw.jsx new file mode 100644 index 0000000000..7767e1e4f8 --- /dev/null +++ b/apps/docs/content/components/circular-progress/label.raw.jsx @@ -0,0 +1,5 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/circular-progress/label.ts b/apps/docs/content/components/circular-progress/label.ts index e9bd60e770..254b95afb8 100644 --- a/apps/docs/content/components/circular-progress/label.ts +++ b/apps/docs/content/components/circular-progress/label.ts @@ -1,10 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/sizes.raw.jsx b/apps/docs/content/components/circular-progress/sizes.raw.jsx new file mode 100644 index 0000000000..cdf5cdb24f --- /dev/null +++ b/apps/docs/content/components/circular-progress/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/circular-progress/sizes.ts b/apps/docs/content/components/circular-progress/sizes.ts index ef5050c7a3..85a2f5b30b 100644 --- a/apps/docs/content/components/circular-progress/sizes.ts +++ b/apps/docs/content/components/circular-progress/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/usage.raw.jsx b/apps/docs/content/components/circular-progress/usage.raw.jsx new file mode 100644 index 0000000000..fb6ac8e2ac --- /dev/null +++ b/apps/docs/content/components/circular-progress/usage.raw.jsx @@ -0,0 +1,5 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/circular-progress/usage.ts b/apps/docs/content/components/circular-progress/usage.ts index ab4db2bbda..1118304c37 100644 --- a/apps/docs/content/components/circular-progress/usage.ts +++ b/apps/docs/content/components/circular-progress/usage.ts @@ -1,10 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/value-formatting.raw.jsx b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx new file mode 100644 index 0000000000..81112502da --- /dev/null +++ b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx @@ -0,0 +1,14 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/circular-progress/value-formatting.ts b/apps/docs/content/components/circular-progress/value-formatting.ts index 498c16ff29..0cd558d45d 100644 --- a/apps/docs/content/components/circular-progress/value-formatting.ts +++ b/apps/docs/content/components/circular-progress/value-formatting.ts @@ -1,17 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./value-formatting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/circular-progress/value.raw.jsx b/apps/docs/content/components/circular-progress/value.raw.jsx new file mode 100644 index 0000000000..fc075f67ac --- /dev/null +++ b/apps/docs/content/components/circular-progress/value.raw.jsx @@ -0,0 +1,23 @@ +import {CircularProgress} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0); + + React.useEffect(() => { + const interval = setInterval(() => { + setValue((v) => (v >= 100 ? 0 : v + 10)); + }, 500); + + return () => clearInterval(interval); + }, []); + + return ( + + ); +} diff --git a/apps/docs/content/components/circular-progress/value.ts b/apps/docs/content/components/circular-progress/value.ts index 1915a88907..e2de0e9024 100644 --- a/apps/docs/content/components/circular-progress/value.ts +++ b/apps/docs/content/components/circular-progress/value.ts @@ -1,26 +1,4 @@ -const App = `import {CircularProgress} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0); - - React.useEffect(() => { - const interval = setInterval(() => { - setValue((v) => (v >= 100 ? 0 : v + 10)); - }, 500); - - return () => clearInterval(interval); - }, []); - - return ( - - ); -}`; +import App from "./value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/code/colors.raw.jsx b/apps/docs/content/components/code/colors.raw.jsx new file mode 100644 index 0000000000..f80c81779f --- /dev/null +++ b/apps/docs/content/components/code/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Code} from "@nextui-org/react"; + +export default function App() { + return ( +
+ npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
+ ); +} diff --git a/apps/docs/content/components/code/colors.ts b/apps/docs/content/components/code/colors.ts index 7c2641f200..d5bef810aa 100644 --- a/apps/docs/content/components/code/colors.ts +++ b/apps/docs/content/components/code/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Code} from "@nextui-org/react"; - -export default function App() { - return ( -
- npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/code/sizes.raw.jsx b/apps/docs/content/components/code/sizes.raw.jsx new file mode 100644 index 0000000000..51a27c7dee --- /dev/null +++ b/apps/docs/content/components/code/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Code} from "@nextui-org/react"; + +export default function App() { + return ( +
+ npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
+ ); +} diff --git a/apps/docs/content/components/code/sizes.ts b/apps/docs/content/components/code/sizes.ts index 9d13253761..85a2f5b30b 100644 --- a/apps/docs/content/components/code/sizes.ts +++ b/apps/docs/content/components/code/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Code} from "@nextui-org/react"; - -export default function App() { - return ( -
- npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/code/usage.raw.jsx b/apps/docs/content/components/code/usage.raw.jsx new file mode 100644 index 0000000000..d2adf43cb4 --- /dev/null +++ b/apps/docs/content/components/code/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Code} from "@nextui-org/react"; + +export default function App() { + return npm install @nextui-org/react; +} diff --git a/apps/docs/content/components/code/usage.ts b/apps/docs/content/components/code/usage.ts index b5a5a2895b..1118304c37 100644 --- a/apps/docs/content/components/code/usage.ts +++ b/apps/docs/content/components/code/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Code} from "@nextui-org/react"; - -export default function App() { - return ( - npm install @nextui-org/react - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/controlled.raw.jsx b/apps/docs/content/components/date-input/controlled.raw.jsx new file mode 100644 index 0000000000..b56cc09e3a --- /dev/null +++ b/apps/docs/content/components/date-input/controlled.raw.jsx @@ -0,0 +1,20 @@ +import {DateInput} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
+
+ +

+ Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

+
+
+ ); +} diff --git a/apps/docs/content/components/date-input/controlled.raw.tsx b/apps/docs/content/components/date-input/controlled.raw.tsx new file mode 100644 index 0000000000..bb4fae7fab --- /dev/null +++ b/apps/docs/content/components/date-input/controlled.raw.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import {DateInput} from "@nextui-org/react"; +import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
+
+ +

+ Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

+
+
+ ); +} diff --git a/apps/docs/content/components/date-input/controlled.ts b/apps/docs/content/components/date-input/controlled.ts index cc8ce5a7b1..1f1a363363 100644 --- a/apps/docs/content/components/date-input/controlled.ts +++ b/apps/docs/content/components/date-input/controlled.ts @@ -1,50 +1,15 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
-
- -

- Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

-
-
- ); -}`; - -const AppTs = `import {DateInput} from "@nextui-org/react"; -import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
-
- -

- Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

-
-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-input/description.raw.jsx b/apps/docs/content/components/date-input/description.raw.jsx new file mode 100644 index 0000000000..8a43b6fa59 --- /dev/null +++ b/apps/docs/content/components/date-input/description.raw.jsx @@ -0,0 +1,14 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/description.ts b/apps/docs/content/components/date-input/description.ts index 344087e325..aeb6340b6b 100644 --- a/apps/docs/content/components/date-input/description.ts +++ b/apps/docs/content/components/date-input/description.ts @@ -1,17 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/disabled.raw.jsx b/apps/docs/content/components/date-input/disabled.raw.jsx new file mode 100644 index 0000000000..e674aeb93e --- /dev/null +++ b/apps/docs/content/components/date-input/disabled.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/disabled.ts b/apps/docs/content/components/date-input/disabled.ts index b61e928461..1a215cc91f 100644 --- a/apps/docs/content/components/date-input/disabled.ts +++ b/apps/docs/content/components/date-input/disabled.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/error-message-function.raw.jsx b/apps/docs/content/components/date-input/error-message-function.raw.jsx new file mode 100644 index 0000000000..085aaa3254 --- /dev/null +++ b/apps/docs/content/components/date-input/error-message-function.raw.jsx @@ -0,0 +1,22 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ { + if (value.isInvalid) { + return "Please enter a valid date."; + } + }} + label={"Birth date"} + placeholderValue={new CalendarDate(1995, 11, 6)} + /> +
+ ); +} diff --git a/apps/docs/content/components/date-input/error-message-function.ts b/apps/docs/content/components/date-input/error-message-function.ts index 35371af420..1af0006141 100644 --- a/apps/docs/content/components/date-input/error-message-function.ts +++ b/apps/docs/content/components/date-input/error-message-function.ts @@ -1,25 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
- { - if (value.isInvalid) { - return "Please enter a valid date."; - } - }} - className="max-w-xs" - /> -
- ); -}`; +import App from "./error-message-function.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/error-message.raw.jsx b/apps/docs/content/components/date-input/error-message.raw.jsx new file mode 100644 index 0000000000..2f73e9d0d1 --- /dev/null +++ b/apps/docs/content/components/date-input/error-message.raw.jsx @@ -0,0 +1,18 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/error-message.ts b/apps/docs/content/components/date-input/error-message.ts index d9e58d6950..fb8101b132 100644 --- a/apps/docs/content/components/date-input/error-message.ts +++ b/apps/docs/content/components/date-input/error-message.ts @@ -1,21 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/granularity.raw.jsx b/apps/docs/content/components/date-input/granularity.raw.jsx new file mode 100644 index 0000000000..712b58eebe --- /dev/null +++ b/apps/docs/content/components/date-input/granularity.raw.jsx @@ -0,0 +1,19 @@ +import {DateInput} from "@nextui-org/react"; +import {now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/date-input/granularity.raw.tsx b/apps/docs/content/components/date-input/granularity.raw.tsx new file mode 100644 index 0000000000..d186cfdb91 --- /dev/null +++ b/apps/docs/content/components/date-input/granularity.raw.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import {DateInput} from "@nextui-org/react"; +import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/date-input/granularity.ts b/apps/docs/content/components/date-input/granularity.ts index 936bcddffa..6196832da6 100644 --- a/apps/docs/content/components/date-input/granularity.ts +++ b/apps/docs/content/components/date-input/granularity.ts @@ -1,60 +1,15 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {now, parseAbsoluteToLocal} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
- - - - -
- ); -}`; - -const AppTs = `import {DateInput} from "@nextui-org/react"; -import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
- - - - -
- ); -}`; +import App from "./granularity.raw.jsx?raw"; +import AppTs from "./granularity.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-input/hide-timezone.raw.jsx b/apps/docs/content/components/date-input/hide-timezone.raw.jsx new file mode 100644 index 0000000000..0629cf8eb7 --- /dev/null +++ b/apps/docs/content/components/date-input/hide-timezone.raw.jsx @@ -0,0 +1,14 @@ +import {DateInput} from "@nextui-org/react"; +import {parseZonedDateTime} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/hide-timezone.ts b/apps/docs/content/components/date-input/hide-timezone.ts index cde093363e..225f731355 100644 --- a/apps/docs/content/components/date-input/hide-timezone.ts +++ b/apps/docs/content/components/date-input/hide-timezone.ts @@ -1,17 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseZonedDateTime} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./hide-timezone.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/hourly-cycle.raw.jsx b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx new file mode 100644 index 0000000000..cd1be2e6a8 --- /dev/null +++ b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {parseZonedDateTime} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/hourly-cycle.ts b/apps/docs/content/components/date-input/hourly-cycle.ts index 0336f7ea19..21381611a1 100644 --- a/apps/docs/content/components/date-input/hourly-cycle.ts +++ b/apps/docs/content/components/date-input/hourly-cycle.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseZonedDateTime} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./hourly-cycle.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/international-calendar.raw.jsx b/apps/docs/content/components/date-input/international-calendar.raw.jsx new file mode 100644 index 0000000000..cc0ee60556 --- /dev/null +++ b/apps/docs/content/components/date-input/international-calendar.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/date-input/international-calendar.raw.tsx b/apps/docs/content/components/date-input/international-calendar.raw.tsx new file mode 100644 index 0000000000..5f088ad832 --- /dev/null +++ b/apps/docs/content/components/date-input/international-calendar.raw.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import {DateInput} from "@nextui-org/react"; +import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/date-input/international-calendar.ts b/apps/docs/content/components/date-input/international-calendar.ts index 20f9064feb..a8707fd093 100644 --- a/apps/docs/content/components/date-input/international-calendar.ts +++ b/apps/docs/content/components/date-input/international-calendar.ts @@ -1,40 +1,15 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
- - - -
- ); -}`; - -const AppTs = `import {DateInput} from "@nextui-org/react"; -import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
- - - -
- ); -}`; +import App from "./international-calendar.raw.jsx?raw"; +import AppTs from "./international-calendar.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-input/label-placements.raw.jsx b/apps/docs/content/components/date-input/label-placements.raw.jsx new file mode 100644 index 0000000000..112edbdeb6 --- /dev/null +++ b/apps/docs/content/components/date-input/label-placements.raw.jsx @@ -0,0 +1,20 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
+ {placements.map((placement) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/date-input/label-placements.ts b/apps/docs/content/components/date-input/label-placements.ts index df3d59c5ff..cd2a65d352 100644 --- a/apps/docs/content/components/date-input/label-placements.ts +++ b/apps/docs/content/components/date-input/label-placements.ts @@ -1,26 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
- {placements.map((placement) => ( - - ))} -
- ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/min-and-max-date.raw.jsx b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx new file mode 100644 index 0000000000..ba54d4dc99 --- /dev/null +++ b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx @@ -0,0 +1,25 @@ +import {DateInput} from "@nextui-org/react"; +import {getLocalTimeZone, today} from "@internationalized/date"; + +export default function App() { + return ( +
+
+

Min date

+ +
+
+

Max date

+ +
+
+ ); +} diff --git a/apps/docs/content/components/date-input/min-and-max-date.ts b/apps/docs/content/components/date-input/min-and-max-date.ts index 5d59cb9f4a..be9af0fc43 100644 --- a/apps/docs/content/components/date-input/min-and-max-date.ts +++ b/apps/docs/content/components/date-input/min-and-max-date.ts @@ -1,28 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {getLocalTimeZone, parseDate, today} from "@internationalized/date"; - -export default function App() { - return ( -
-
-

Min date

- -
-
-

Max date

- -
-
- ); -}`; +import App from "./min-and-max-date.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/readonly.raw.jsx b/apps/docs/content/components/date-input/readonly.raw.jsx new file mode 100644 index 0000000000..46aedeed30 --- /dev/null +++ b/apps/docs/content/components/date-input/readonly.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/readonly.ts b/apps/docs/content/components/date-input/readonly.ts index ddd06f00bb..fabd05ba36 100644 --- a/apps/docs/content/components/date-input/readonly.ts +++ b/apps/docs/content/components/date-input/readonly.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/required.raw.jsx b/apps/docs/content/components/date-input/required.raw.jsx new file mode 100644 index 0000000000..909e91a0fe --- /dev/null +++ b/apps/docs/content/components/date-input/required.raw.jsx @@ -0,0 +1,15 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/required.ts b/apps/docs/content/components/date-input/required.ts index 7e064fec4b..b50b781e6f 100644 --- a/apps/docs/content/components/date-input/required.ts +++ b/apps/docs/content/components/date-input/required.ts @@ -1,18 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/start-end-content.raw.jsx b/apps/docs/content/components/date-input/start-end-content.raw.jsx new file mode 100644 index 0000000000..ad70c51ed3 --- /dev/null +++ b/apps/docs/content/components/date-input/start-end-content.raw.jsx @@ -0,0 +1,55 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate, parseDate} from "@internationalized/date"; + +export const CalendarIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
+
+ + } + /> + + } + label="Date Input" + labelPlacement="outside" + placeholderValue={new CalendarDate(1995, 11, 6)} + /> +
+
+ ); +} diff --git a/apps/docs/content/components/date-input/start-end-content.ts b/apps/docs/content/components/date-input/start-end-content.ts index 182305c868..e99c7e5997 100644 --- a/apps/docs/content/components/date-input/start-end-content.ts +++ b/apps/docs/content/components/date-input/start-end-content.ts @@ -1,61 +1,7 @@ -const CalendarIcon = `export const CalendarIcon = (props) => ( - -);`; - -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate, parseDate} from "@internationalized/date"; -import {CalendarIcon} from './CalendarIcon'; - -export default function App() { - return ( -
-
- - } - /> - - } - /> -
-
- ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CalendarIcon.jsx": CalendarIcon, }; export default { diff --git a/apps/docs/content/components/date-input/time-zones.raw.jsx b/apps/docs/content/components/date-input/time-zones.raw.jsx new file mode 100644 index 0000000000..cd28b8ef1c --- /dev/null +++ b/apps/docs/content/components/date-input/time-zones.raw.jsx @@ -0,0 +1,19 @@ +import {DateInput} from "@nextui-org/react"; +import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/date-input/time-zones.ts b/apps/docs/content/components/date-input/time-zones.ts index 65b11c09c1..803b4ec768 100644 --- a/apps/docs/content/components/date-input/time-zones.ts +++ b/apps/docs/content/components/date-input/time-zones.ts @@ -1,22 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./time-zones.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/usage.raw.jsx b/apps/docs/content/components/date-input/usage.raw.jsx new file mode 100644 index 0000000000..bbc6bdd82d --- /dev/null +++ b/apps/docs/content/components/date-input/usage.raw.jsx @@ -0,0 +1,14 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-input/usage.ts b/apps/docs/content/components/date-input/usage.ts index eed0992112..1118304c37 100644 --- a/apps/docs/content/components/date-input/usage.ts +++ b/apps/docs/content/components/date-input/usage.ts @@ -1,13 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-input/variants.raw.jsx b/apps/docs/content/components/date-input/variants.raw.jsx new file mode 100644 index 0000000000..9549261715 --- /dev/null +++ b/apps/docs/content/components/date-input/variants.raw.jsx @@ -0,0 +1,20 @@ +import {DateInput} from "@nextui-org/react"; +import {CalendarDate} from "@internationalized/date"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
+ {variants.map((variant) => ( +
+ +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/date-input/variants.ts b/apps/docs/content/components/date-input/variants.ts index 5d37e4d194..ddea95fb2e 100644 --- a/apps/docs/content/components/date-input/variants.ts +++ b/apps/docs/content/components/date-input/variants.ts @@ -1,19 +1,4 @@ -const App = `import {DateInput} from "@nextui-org/react"; -import {CalendarDate} from "@internationalized/date"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
- {variants.map((variant) => ( -
- -
- ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/controlled.raw.jsx b/apps/docs/content/components/date-picker/controlled.raw.jsx new file mode 100644 index 0000000000..f831b0792d --- /dev/null +++ b/apps/docs/content/components/date-picker/controlled.raw.jsx @@ -0,0 +1,30 @@ +import {DatePicker} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
+
+ +

+ Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

+
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/controlled.raw.tsx b/apps/docs/content/components/date-picker/controlled.raw.tsx new file mode 100644 index 0000000000..389bfa5323 --- /dev/null +++ b/apps/docs/content/components/date-picker/controlled.raw.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import {DatePicker} from "@nextui-org/react"; +import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState(parseDate("2024-04-04")); + + let formatter = useDateFormatter({dateStyle: "full"}); + + return ( +
+
+ +

+ Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

+
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/controlled.ts b/apps/docs/content/components/date-picker/controlled.ts index fdbcded26b..1f1a363363 100644 --- a/apps/docs/content/components/date-picker/controlled.ts +++ b/apps/docs/content/components/date-picker/controlled.ts @@ -1,52 +1,15 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
-
- -

- Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

-
- -
- ); -}`; - -const AppTs = `import {DatePicker} from "@nextui-org/react"; -import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState(parseDate("2024-04-04")); - - let formatter = useDateFormatter({dateStyle: "full"}); - - return ( -
-
- -

- Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

-
- -
- ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-picker/description.raw.jsx b/apps/docs/content/components/date-picker/description.raw.jsx new file mode 100644 index 0000000000..ee4547c976 --- /dev/null +++ b/apps/docs/content/components/date-picker/description.raw.jsx @@ -0,0 +1,13 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/description.ts b/apps/docs/content/components/date-picker/description.ts index 83fc27d071..aeb6340b6b 100644 --- a/apps/docs/content/components/date-picker/description.ts +++ b/apps/docs/content/components/date-picker/description.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/disabled.raw.jsx b/apps/docs/content/components/date-picker/disabled.raw.jsx new file mode 100644 index 0000000000..96f50a7a62 --- /dev/null +++ b/apps/docs/content/components/date-picker/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/disabled.ts b/apps/docs/content/components/date-picker/disabled.ts index d6c59845d6..1a215cc91f 100644 --- a/apps/docs/content/components/date-picker/disabled.ts +++ b/apps/docs/content/components/date-picker/disabled.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-picker/error-message-function.raw.jsx new file mode 100644 index 0000000000..68272a7093 --- /dev/null +++ b/apps/docs/content/components/date-picker/error-message-function.raw.jsx @@ -0,0 +1,18 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ { + if (value.isInvalid) { + return "Please enter a valid date."; + } + }} + label="Birth date" + /> +
+ ); +} diff --git a/apps/docs/content/components/date-picker/error-message-function.ts b/apps/docs/content/components/date-picker/error-message-function.ts index 2b473c9f5d..1af0006141 100644 --- a/apps/docs/content/components/date-picker/error-message-function.ts +++ b/apps/docs/content/components/date-picker/error-message-function.ts @@ -1,21 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- { - if (value.isInvalid) { - return "Please enter a valid date."; - } - }} - /> -
- ); -}`; +import App from "./error-message-function.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/error-message.raw.jsx b/apps/docs/content/components/date-picker/error-message.raw.jsx new file mode 100644 index 0000000000..b367b03746 --- /dev/null +++ b/apps/docs/content/components/date-picker/error-message.raw.jsx @@ -0,0 +1,14 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/error-message.ts b/apps/docs/content/components/date-picker/error-message.ts index d1c85629ae..fb8101b132 100644 --- a/apps/docs/content/components/date-picker/error-message.ts +++ b/apps/docs/content/components/date-picker/error-message.ts @@ -1,17 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/granularity.raw.jsx b/apps/docs/content/components/date-picker/granularity.raw.jsx new file mode 100644 index 0000000000..b1edba5b99 --- /dev/null +++ b/apps/docs/content/components/date-picker/granularity.raw.jsx @@ -0,0 +1,32 @@ +import {DatePicker} from "@nextui-org/react"; +import {now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/date-picker/granularity.raw.tsx b/apps/docs/content/components/date-picker/granularity.raw.tsx new file mode 100644 index 0000000000..47db9bc44e --- /dev/null +++ b/apps/docs/content/components/date-picker/granularity.raw.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import {DatePicker} from "@nextui-org/react"; +import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + + +
+ ); +} diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-picker/international-calendar.raw.jsx new file mode 100644 index 0000000000..02f132c4fd --- /dev/null +++ b/apps/docs/content/components/date-picker/international-calendar.raw.jsx @@ -0,0 +1,22 @@ +import {DatePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-picker/international-calendar.raw.tsx new file mode 100644 index 0000000000..8b9e570dd8 --- /dev/null +++ b/apps/docs/content/components/date-picker/international-calendar.raw.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import {DatePicker} from "@nextui-org/react"; +import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); + + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/date-picker/international-calendar.ts b/apps/docs/content/components/date-picker/international-calendar.ts index ba86ec20fd..a8707fd093 100644 --- a/apps/docs/content/components/date-picker/international-calendar.ts +++ b/apps/docs/content/components/date-picker/international-calendar.ts @@ -1,54 +1,15 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
- - - -
- ); -}`; - -const AppTs = `import {DatePicker} from "@nextui-org/react"; -import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z")); - - return ( -
- - - -
- ); -}`; +import App from "./international-calendar.raw.jsx?raw"; +import AppTs from "./international-calendar.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-picker/label-placements.raw.jsx b/apps/docs/content/components/date-picker/label-placements.raw.jsx new file mode 100644 index 0000000000..551c5d6a00 --- /dev/null +++ b/apps/docs/content/components/date-picker/label-placements.raw.jsx @@ -0,0 +1,23 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
+
+
+ {placements.map((placement) => ( + + ))} +
+
+
+ ); +} diff --git a/apps/docs/content/components/date-picker/label-placements.ts b/apps/docs/content/components/date-picker/label-placements.ts index abd21541dd..cd2a65d352 100644 --- a/apps/docs/content/components/date-picker/label-placements.ts +++ b/apps/docs/content/components/date-picker/label-placements.ts @@ -1,29 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
-
-
- {placements.map((placement) => ( - - ))} -
-
-
- ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx new file mode 100644 index 0000000000..06f92bb8f1 --- /dev/null +++ b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx @@ -0,0 +1,25 @@ +import {DatePicker} from "@nextui-org/react"; +import {getLocalTimeZone, today} from "@internationalized/date"; + +export default function App() { + return ( +
+
+

Min date

+ +
+
+

Max date

+ +
+
+ ); +} diff --git a/apps/docs/content/components/date-picker/min-and-max-date.ts b/apps/docs/content/components/date-picker/min-and-max-date.ts index bdd9992138..be9af0fc43 100644 --- a/apps/docs/content/components/date-picker/min-and-max-date.ts +++ b/apps/docs/content/components/date-picker/min-and-max-date.ts @@ -1,28 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {getLocalTimeZone, today} from "@internationalized/date"; - -export default function App() { - return ( -
-
-

Min date

- -
-
-

Max date

- -
-
- ); -}`; +import App from "./min-and-max-date.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-picker/page-behavior.raw.jsx new file mode 100644 index 0000000000..5c5833cd1f --- /dev/null +++ b/apps/docs/content/components/date-picker/page-behavior.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/page-behavior.ts b/apps/docs/content/components/date-picker/page-behavior.ts index dda732673a..70c2ebfd2f 100644 --- a/apps/docs/content/components/date-picker/page-behavior.ts +++ b/apps/docs/content/components/date-picker/page-behavior.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./page-behavior.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/preset.raw.jsx b/apps/docs/content/components/date-picker/preset.raw.jsx new file mode 100644 index 0000000000..d93f2e6a32 --- /dev/null +++ b/apps/docs/content/components/date-picker/preset.raw.jsx @@ -0,0 +1,92 @@ +import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; +import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date"; +import {useLocale, useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + + const [value, setValue] = React.useState(defaultDate); + + let {locale} = useLocale(); + let formatter = useDateFormatter({dateStyle: "full"}); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
+ + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + CalendarTopContent={ + + + + + + } + calendarProps={{ + focusedValue: value, + onFocusChange: setValue, + nextButtonProps: { + variant: "bordered", + }, + prevButtonProps: { + variant: "bordered", + }, + }} + label="Event date" + value={value} + onChange={setValue} + /> +

+ Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

+
+ ); +} diff --git a/apps/docs/content/components/date-picker/preset.raw.tsx b/apps/docs/content/components/date-picker/preset.raw.tsx new file mode 100644 index 0000000000..de9dd853d6 --- /dev/null +++ b/apps/docs/content/components/date-picker/preset.raw.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; +import { + DateValue, + startOfWeek, + startOfMonth, + getLocalTimeZone, + today, +} from "@internationalized/date"; +import {useLocale, useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + + const [value, setValue] = React.useState(defaultDate); + + let {locale} = useLocale(); + let formatter = useDateFormatter({dateStyle: "full"}); + + let now = today(getLocalTimeZone()); + let nextWeek = startOfWeek(now.add({weeks: 1}), locale); + let nextMonth = startOfMonth(now.add({months: 1})); + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
+ + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + CalendarTopContent={ + + + + + + } + calendarProps={{ + focusedValue: value, + onFocusChange: setValue, + nextButtonProps: { + variant: "bordered", + }, + prevButtonProps: { + variant: "bordered", + }, + }} + label="Event date" + value={value} + onChange={setValue} + /> +

+ Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} +

+
+ ); +} diff --git a/apps/docs/content/components/date-picker/preset.ts b/apps/docs/content/components/date-picker/preset.ts index 884ffbd063..ae3ac37b4f 100644 --- a/apps/docs/content/components/date-picker/preset.ts +++ b/apps/docs/content/components/date-picker/preset.ts @@ -1,194 +1,15 @@ -const App = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; -import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date"; -import {useLocale, useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - - const [value, setValue] = React.useState(defaultDate); - - let {locale} = useLocale(); - let formatter = useDateFormatter({dateStyle: "full"}); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
- - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - CalendarTopContent={ - - - - - - } - calendarProps={{ - focusedValue: value, - onFocusChange: setValue, - nextButtonProps: { - variant: "bordered", - }, - prevButtonProps: { - variant: "bordered", - }, - }} - value={value} - onChange={setValue} - label="Event date" - /> -

- Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

-
- ); -}`; - -const AppTs = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react"; -import {DateValue, startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date"; -import {useLocale, useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - - const [value, setValue] = React.useState(defaultDate); - - let {locale} = useLocale(); - let formatter = useDateFormatter({dateStyle: "full"}); - - let now = today(getLocalTimeZone()); - let nextWeek = startOfWeek(now.add({weeks: 1}), locale); - let nextMonth = startOfMonth(now.add({months: 1})); - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
- - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - CalendarTopContent={ - - - - - - } - calendarProps={{ - focusedValue: value, - onFocusChange: setValue, - nextButtonProps: { - variant: "bordered", - }, - prevButtonProps: { - variant: "bordered", - }, - }} - value={value} - onChange={setValue} - label="Event date" - /> -

- Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"} -

-
- ); -}`; +import App from "./preset.raw.jsx?raw"; +import AppTs from "./preset.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-picker/readonly.raw.jsx b/apps/docs/content/components/date-picker/readonly.raw.jsx new file mode 100644 index 0000000000..26698bb916 --- /dev/null +++ b/apps/docs/content/components/date-picker/readonly.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/readonly.ts b/apps/docs/content/components/date-picker/readonly.ts index 35ac2d8809..fabd05ba36 100644 --- a/apps/docs/content/components/date-picker/readonly.ts +++ b/apps/docs/content/components/date-picker/readonly.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/required.raw.jsx b/apps/docs/content/components/date-picker/required.raw.jsx new file mode 100644 index 0000000000..745bc44be6 --- /dev/null +++ b/apps/docs/content/components/date-picker/required.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/required.ts b/apps/docs/content/components/date-picker/required.ts index c5746bef43..b50b781e6f 100644 --- a/apps/docs/content/components/date-picker/required.ts +++ b/apps/docs/content/components/date-picker/required.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx new file mode 100644 index 0000000000..20372e750f --- /dev/null +++ b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx @@ -0,0 +1,10 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/date-picker/selector-button-placement.ts b/apps/docs/content/components/date-picker/selector-button-placement.ts index 923d92384d..2d69e80fe8 100644 --- a/apps/docs/content/components/date-picker/selector-button-placement.ts +++ b/apps/docs/content/components/date-picker/selector-button-placement.ts @@ -1,19 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./selector-button-placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-picker/selector-icon.raw.jsx new file mode 100644 index 0000000000..87c2819f91 --- /dev/null +++ b/apps/docs/content/components/date-picker/selector-icon.raw.jsx @@ -0,0 +1,27 @@ +import {DatePicker} from "@nextui-org/react"; + +export const SelectorIcon = () => { + return ( + + + + + + + + ); +}; + +export default function App() { + return ( +
+ } /> +
+ ); +} diff --git a/apps/docs/content/components/date-picker/selector-icon.ts b/apps/docs/content/components/date-picker/selector-icon.ts index b7fd8509eb..9997d508de 100644 --- a/apps/docs/content/components/date-picker/selector-icon.ts +++ b/apps/docs/content/components/date-picker/selector-icon.ts @@ -1,36 +1,7 @@ -const SelectorIcon = `export const SelectorIcon = () => ( - - - - - - - -);`; - -const App = `import {DatePicker} from "@nextui-org/react"; -import {SelectorIcon} from './SelectorIcon'; - -export default function App() { - return ( -
- } - /> -
- ); -}`; +import App from "./selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/date-picker/time-zones.raw.jsx b/apps/docs/content/components/date-picker/time-zones.raw.jsx new file mode 100644 index 0000000000..f2986331dd --- /dev/null +++ b/apps/docs/content/components/date-picker/time-zones.raw.jsx @@ -0,0 +1,21 @@ +import {DatePicker} from "@nextui-org/react"; +import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/date-picker/time-zones.ts b/apps/docs/content/components/date-picker/time-zones.ts index 85c1d3c554..803b4ec768 100644 --- a/apps/docs/content/components/date-picker/time-zones.ts +++ b/apps/docs/content/components/date-picker/time-zones.ts @@ -1,24 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./time-zones.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx new file mode 100644 index 0000000000..fc8e72798e --- /dev/null +++ b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx @@ -0,0 +1,30 @@ +import {DatePicker} from "@nextui-org/react"; +import {today, isWeekend, getLocalTimeZone} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + let {locale} = useLocale(); + + let isDateUnavailable = (date) => + isWeekend(date, locale) || + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ); + + return ( + + ); +} diff --git a/apps/docs/content/components/date-picker/unavailable-dates.ts b/apps/docs/content/components/date-picker/unavailable-dates.ts index 93e0606772..b4e1f4df1a 100644 --- a/apps/docs/content/components/date-picker/unavailable-dates.ts +++ b/apps/docs/content/components/date-picker/unavailable-dates.ts @@ -1,33 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {today, isWeekend, getLocalTimeZone} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - let {locale} = useLocale(); - - let isDateUnavailable = (date) => - isWeekend(date, locale) || - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ); - - return ( - - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/usage.raw.jsx b/apps/docs/content/components/date-picker/usage.raw.jsx new file mode 100644 index 0000000000..d007f1291a --- /dev/null +++ b/apps/docs/content/components/date-picker/usage.raw.jsx @@ -0,0 +1,5 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/date-picker/usage.ts b/apps/docs/content/components/date-picker/usage.ts index 2f3a5d5ca4..1118304c37 100644 --- a/apps/docs/content/components/date-picker/usage.ts +++ b/apps/docs/content/components/date-picker/usage.ts @@ -1,10 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/variants.raw.jsx b/apps/docs/content/components/date-picker/variants.raw.jsx new file mode 100644 index 0000000000..8111333b5a --- /dev/null +++ b/apps/docs/content/components/date-picker/variants.raw.jsx @@ -0,0 +1,15 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
+ {variants.map((variant) => ( +
+ +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/date-picker/variants.ts b/apps/docs/content/components/date-picker/variants.ts index b31ec23aeb..ddea95fb2e 100644 --- a/apps/docs/content/components/date-picker/variants.ts +++ b/apps/docs/content/components/date-picker/variants.ts @@ -1,18 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
- {variants.map((variant) => ( -
- -
- ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/visible-month.raw.jsx b/apps/docs/content/components/date-picker/visible-month.raw.jsx new file mode 100644 index 0000000000..0143d03c4f --- /dev/null +++ b/apps/docs/content/components/date-picker/visible-month.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/visible-month.ts b/apps/docs/content/components/date-picker/visible-month.ts index 2e9f01b039..7c3a2abe6a 100644 --- a/apps/docs/content/components/date-picker/visible-month.ts +++ b/apps/docs/content/components/date-picker/visible-month.ts @@ -1,15 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./visible-month.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx new file mode 100644 index 0000000000..5047a454ea --- /dev/null +++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx @@ -0,0 +1,9 @@ +import {DatePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts index eeb8ae32a1..5e5431496b 100644 --- a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts +++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts @@ -1,16 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./with-month-and-year-pickers.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-picker/with-time-field.raw.jsx new file mode 100644 index 0000000000..b6784d7ca8 --- /dev/null +++ b/apps/docs/content/components/date-picker/with-time-field.raw.jsx @@ -0,0 +1,16 @@ +import {DatePicker} from "@nextui-org/react"; +import {now, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-picker/with-time-field.ts b/apps/docs/content/components/date-picker/with-time-field.ts index 54d597e371..8df135a004 100644 --- a/apps/docs/content/components/date-picker/with-time-field.ts +++ b/apps/docs/content/components/date-picker/with-time-field.ts @@ -1,19 +1,4 @@ -const App = `import {DatePicker} from "@nextui-org/react"; -import {now, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./with-time-field.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.jsx b/apps/docs/content/components/date-range-picker/controlled.raw.jsx new file mode 100644 index 0000000000..fd7b3063f3 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/controlled.raw.jsx @@ -0,0 +1,36 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState({ + start: parseDate("2024-04-01"), + end: parseDate("2024-04-08"), + }); + + let formatter = useDateFormatter({dateStyle: "long"}); + + return ( +
+
+ +

+ Selected date:{" "} + {value + ? formatter.formatRange( + value.start.toDate(getLocalTimeZone()), + value.end.toDate(getLocalTimeZone()), + ) + : "--"} +

+
+ +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.tsx b/apps/docs/content/components/date-range-picker/controlled.raw.tsx new file mode 100644 index 0000000000..868b5440f2 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/controlled.raw.tsx @@ -0,0 +1,40 @@ +import type {RangeValue} from "@react-types/shared"; +import type {DateValue} from "@react-types/datepicker"; + +import React from "react"; +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate, getLocalTimeZone} from "@internationalized/date"; +import {useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + const [value, setValue] = React.useState>({ + start: parseDate("2024-04-01"), + end: parseDate("2024-04-08"), + }); + + let formatter = useDateFormatter({dateStyle: "long"}); + + return ( +
+
+ +

+ Selected date:{" "} + {value + ? formatter.formatRange( + value.start.toDate(getLocalTimeZone()), + value.end.toDate(getLocalTimeZone()), + ) + : "--"} +

+
+ +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/controlled.ts b/apps/docs/content/components/date-range-picker/controlled.ts index 12f5e4d8ae..1f1a363363 100644 --- a/apps/docs/content/components/date-range-picker/controlled.ts +++ b/apps/docs/content/components/date-range-picker/controlled.ts @@ -1,86 +1,5 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - const [value, setValue] = React.useState({ - start: parseDate("2024-04-01"), - end: parseDate("2024-04-08"), - }); - - let formatter = useDateFormatter({dateStyle: "long"}); - - return ( -
-
- -

- Selected date:{" "} - {value - ? formatter.formatRange( - value.start.toDate(getLocalTimeZone()), - value.end.toDate(getLocalTimeZone()), - ) - : "--"} -

-
- -
- ); -}`; - -const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate, getLocalTimeZone} from "@internationalized/date"; -import {useDateFormatter} from "@react-aria/i18n"; -import {RangeValue} from "@react-types/shared"; -import {DateValue} from "@react-types/datepicker"; - -export default function App() { - const [value, setValue] = React.useState>({ - start: parseDate("2024-04-01"), - end: parseDate("2024-04-08"), - }); - - let formatter = useDateFormatter({dateStyle: "long"}); - - return ( -
-
- -

- Selected date:{" "} - {value - ? formatter.formatRange( - value.start.toDate(getLocalTimeZone()), - value.end.toDate(getLocalTimeZone()), - ) - : "--"} -

-
- -
- ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx new file mode 100644 index 0000000000..17a676327c --- /dev/null +++ b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx @@ -0,0 +1,33 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/custom-styles.ts b/apps/docs/content/components/date-range-picker/custom-styles.ts index 6c11daf883..da3ea9093a 100644 --- a/apps/docs/content/components/date-range-picker/custom-styles.ts +++ b/apps/docs/content/components/date-range-picker/custom-styles.ts @@ -1,36 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/description.raw.jsx b/apps/docs/content/components/date-range-picker/description.raw.jsx new file mode 100644 index 0000000000..0300812373 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/description.raw.jsx @@ -0,0 +1,11 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/description.ts b/apps/docs/content/components/date-range-picker/description.ts index a81889d1bd..aeb6340b6b 100644 --- a/apps/docs/content/components/date-range-picker/description.ts +++ b/apps/docs/content/components/date-range-picker/description.ts @@ -1,14 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/disabled.raw.jsx b/apps/docs/content/components/date-range-picker/disabled.raw.jsx new file mode 100644 index 0000000000..c1ac55a525 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/disabled.raw.jsx @@ -0,0 +1,16 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/disabled.ts b/apps/docs/content/components/date-range-picker/disabled.ts index ea2ff51167..1a215cc91f 100644 --- a/apps/docs/content/components/date-range-picker/disabled.ts +++ b/apps/docs/content/components/date-range-picker/disabled.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx new file mode 100644 index 0000000000..db1263f550 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx @@ -0,0 +1,22 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + { + if (value.isInvalid) { + return "Please enter your stay duration"; + } + }} + label="Stay duration" + variant="bordered" + /> + ); +} diff --git a/apps/docs/content/components/date-range-picker/error-message-function.ts b/apps/docs/content/components/date-range-picker/error-message-function.ts index 9e8cb16eab..1af0006141 100644 --- a/apps/docs/content/components/date-range-picker/error-message-function.ts +++ b/apps/docs/content/components/date-range-picker/error-message-function.ts @@ -1,25 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - { - if (value.isInvalid) { - return "Please enter your stay duration"; - } - }} - defaultValue={{ - start: parseDate("2024-04-01"), - end: parseDate("2024-04-08"), - }} - className="max-w-xs" - /> - ); -}`; +import App from "./error-message-function.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/error-message.raw.jsx b/apps/docs/content/components/date-range-picker/error-message.raw.jsx new file mode 100644 index 0000000000..fe6d92e392 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/error-message.raw.jsx @@ -0,0 +1,18 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/error-message.ts b/apps/docs/content/components/date-range-picker/error-message.ts index ed0abd8ab5..fb8101b132 100644 --- a/apps/docs/content/components/date-range-picker/error-message.ts +++ b/apps/docs/content/components/date-range-picker/error-message.ts @@ -1,21 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.jsx b/apps/docs/content/components/date-range-picker/granularity.raw.jsx new file mode 100644 index 0000000000..46d82da6ac --- /dev/null +++ b/apps/docs/content/components/date-range-picker/granularity.raw.jsx @@ -0,0 +1,28 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState({ + start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), + }); + + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.tsx b/apps/docs/content/components/date-range-picker/granularity.raw.tsx new file mode 100644 index 0000000000..e1ec7fb919 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/granularity.raw.tsx @@ -0,0 +1,32 @@ +import type {RangeValue} from "@react-types/shared"; +import type {DateValue} from "@react-types/datepicker"; + +import React from "react"; +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + let [date, setDate] = React.useState>({ + start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), + }); + + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/granularity.ts b/apps/docs/content/components/date-range-picker/granularity.ts index 10094d839a..6196832da6 100644 --- a/apps/docs/content/components/date-range-picker/granularity.ts +++ b/apps/docs/content/components/date-range-picker/granularity.ts @@ -1,67 +1,15 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - let [date, setDate] = React.useState({ - start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), - }); - - return ( -
- - -
- ); -}`; - -const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; -import {RangeValue} from "@react-types/shared"; - -export default function App() { - let [date, setDate] = React.useState>({ - start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"), - }); - - return ( -
- - -
- ); -}`; +import App from "./granularity.raw.jsx?raw"; +import AppTs from "./granularity.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx new file mode 100644 index 0000000000..75e82363c9 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx @@ -0,0 +1,18 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState({ + start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), + }); + + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx new file mode 100644 index 0000000000..c6eca23922 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx @@ -0,0 +1,22 @@ +import type {RangeValue} from "@react-types/shared"; +import type {DateValue} from "@react-types/datepicker"; + +import React from "react"; +import {DateRangePicker} from "@nextui-org/react"; +import {parseAbsoluteToLocal} from "@internationalized/date"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState>({ + start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), + end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), + }); + + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/international-calendar.ts b/apps/docs/content/components/date-range-picker/international-calendar.ts index e28d31e8ea..a8707fd093 100644 --- a/apps/docs/content/components/date-range-picker/international-calendar.ts +++ b/apps/docs/content/components/date-range-picker/international-calendar.ts @@ -1,47 +1,15 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseAbsoluteToLocal} from "@internationalized/date"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState({ - start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), - }); - - return ( -
- - - -
- ); -}`; - -const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -import {DateValue, parseAbsoluteToLocal} from "@internationalized/date"; -import {RangeValue} from "@react-types/shared"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - let [date, setDate] = React.useState>({ - start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"), - end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"), - }); - - return ( -
- - - -
- ); -}`; +import App from "./international-calendar.raw.jsx?raw"; +import AppTs from "./international-calendar.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/date-range-picker/label-placements.raw.jsx b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx new file mode 100644 index 0000000000..1f5b70d378 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx @@ -0,0 +1,20 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
+
+ {placements.map((placement) => ( + + ))} +
+
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/label-placements.ts b/apps/docs/content/components/date-range-picker/label-placements.ts index ae0d8f4c5b..cd2a65d352 100644 --- a/apps/docs/content/components/date-range-picker/label-placements.ts +++ b/apps/docs/content/components/date-range-picker/label-placements.ts @@ -1,27 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
-
- {placements.map((placement) => ( - - ))} -
-
- ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx new file mode 100644 index 0000000000..b3557e1621 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx @@ -0,0 +1,31 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {getLocalTimeZone, parseDate, today} from "@internationalized/date"; + +export default function App() { + return ( +
+
+

Min date

+ +
+
+

Max date

+ +
+
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.ts b/apps/docs/content/components/date-range-picker/min-and-max-date.ts index a1db8afe8f..be9af0fc43 100644 --- a/apps/docs/content/components/date-range-picker/min-and-max-date.ts +++ b/apps/docs/content/components/date-range-picker/min-and-max-date.ts @@ -1,34 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {getLocalTimeZone, parseDate, today} from "@internationalized/date"; - -export default function App() { - return ( -
-
-

Min date

- -
-
-

Max date

- -
-
- ); -}`; +import App from "./min-and-max-date.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx new file mode 100644 index 0000000000..ea418e7815 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx @@ -0,0 +1,17 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {isWeekend, today, getLocalTimeZone} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let {locale} = useLocale(); + + return ( + isWeekend(date, locale)} + label="Time off request" + minValue={today(getLocalTimeZone())} + visibleMonths={2} + /> + ); +} diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.ts b/apps/docs/content/components/date-range-picker/non-contiguous.ts index a85e7f570e..1d0c412e68 100644 --- a/apps/docs/content/components/date-range-picker/non-contiguous.ts +++ b/apps/docs/content/components/date-range-picker/non-contiguous.ts @@ -1,20 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {isWeekend, today, getLocalTimeZone} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let {locale} = useLocale(); - - return ( - isWeekend(date, locale)} - label="Time off request" - minValue={today(getLocalTimeZone())} - visibleMonths={2} - /> - ); -}`; +import App from "./non-contiguous.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx new file mode 100644 index 0000000000..a7493015c9 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx @@ -0,0 +1,9 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/page-behavior.ts b/apps/docs/content/components/date-range-picker/page-behavior.ts index 49d92881d7..70c2ebfd2f 100644 --- a/apps/docs/content/components/date-range-picker/page-behavior.ts +++ b/apps/docs/content/components/date-range-picker/page-behavior.ts @@ -1,16 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./page-behavior.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/presets.raw.jsx b/apps/docs/content/components/date-range-picker/presets.raw.jsx new file mode 100644 index 0000000000..6a14eaf429 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/presets.raw.jsx @@ -0,0 +1,122 @@ +import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import { + today, + startOfWeek, + startOfMonth, + endOfWeek, + endOfMonth, + getLocalTimeZone, +} from "@internationalized/date"; +import {useLocale, useDateFormatter} from "@react-aria/i18n"; + +export default function App() { + let defaultDate = { + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({days: 7}), + }; + let [value, setValue] = React.useState(defaultDate); + + let {locale} = useLocale(); + let formatter = useDateFormatter({dateStyle: "full"}); + let now = today(getLocalTimeZone()); + let nextWeek = { + start: startOfWeek(now.add({weeks: 1}), locale), + end: endOfWeek(now.add({weeks: 1}), locale), + }; + let nextMonth = { + start: startOfMonth(now.add({months: 1})), + end: endOfMonth(now.add({months: 1})), + }; + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
+ + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + CalendarTopContent={ + + + + + + } + calendarProps={{ + focusedValue: value.start, + onFocusChange: (val) => setValue({...value, start: val}), + nextButtonProps: { + variant: "bordered", + }, + prevButtonProps: { + variant: "bordered", + }, + }} + label="Event date" + value={value} + onChange={setValue} + /> +

+ Selected date:{" "} + {value + ? formatter.formatRange( + value.start.toDate(getLocalTimeZone()), + value.end.toDate(getLocalTimeZone()), + ) + : "--"} +

+
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/presets.ts b/apps/docs/content/components/date-range-picker/presets.ts index 6bf954195b..a73828a679 100644 --- a/apps/docs/content/components/date-range-picker/presets.ts +++ b/apps/docs/content/components/date-range-picker/presets.ts @@ -1,241 +1,7 @@ -const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date"; -import {useLocale, useDateFormatter} from "@react-aria/i18n"; - -export default function App() { - let defaultDate = { - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({days: 7}), - }; - let [value, setValue] = React.useState(defaultDate); - - let {locale} = useLocale(); - let formatter = useDateFormatter({dateStyle: "full"}); - let now = today(getLocalTimeZone()); - let nextWeek = { - start: startOfWeek(now.add({weeks: 1}), locale), - end: endOfWeek(now.add({weeks: 1}), locale), - }; - let nextMonth = { - start: startOfMonth(now.add({months: 1})), - end: endOfMonth(now.add({months: 1})), - }; - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
- - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - CalendarTopContent={ - - - - - - } - calendarProps={{ - focusedValue: value?.start, - onFocusChange: (val) => setValue({...value, start: val}), - nextButtonProps: { - variant: "bordered", - }, - prevButtonProps: { - variant: "bordered", - }, - }} - value={value} - onChange={setValue} - label="Event date" - /> -

- Selected date:{" "} - {value - ? formatter.formatRange( - value.start.toDate(getLocalTimeZone()), - value.end.toDate(getLocalTimeZone()), - ) - : "--"} -

-
- ); -}`; - -// const AppTs = `import {DateRangePicker} from "@nextui-org/react"; -// import {now, today, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date"; -// import {useLocale} from "@react-aria/i18n"; -// import {RangeValue} from "@react-types/shared"; - -// export default function App() { -// let defaultDate = { -// start: today(getLocalTimeZone()), -// end: today(getLocalTimeZone()).add({days: 7}), -// }; - -// const [value, setValue] = React.useState>(defaultDate); - -// let {locale} = useLocale(); -// let formatter = useDateFormatter({dateStyle: "full"}); - -// let now = today(getLocalTimeZone()); -// let nextWeek = { -// start: startOfWeek(now.add({weeks: 1}), locale), -// end: endOfWeek(now.add({weeks: 1}), locale), -// }; -// let nextMonth = { -// start: startOfMonth(now.add({months: 1})), -// end: endOfMonth(now.add({months: 1})), -// }; - -// const CustomRadio = (props) => { -// const {children, ...otherProps} = props; - -// return ( -// -// {children} -// -// ); -// }; - -// return ( -//
-// -// Exact dates -// 1 day -// 2 days -// 3 days -// 7 days -// 14 days -// -// } -// CalendarTopContent={ -// -// -// -// -// -// } -// calendarProps={{ -// focusedValue: value.start, -// onFocusChange: (val) => setValue({...value, start: val}), -// nextButtonProps: { -// variant: "bordered", -// }, -// prevButtonProps: { -// variant: "bordered", -// }, -// }} -// value={value} -// onChange={setValue} -// label="Event date" -// /> -//

-// Selected date:{" "} -// {value -// ? formatter.formatRange( -// value.start.toDate(getLocalTimeZone()), -// value.end.toDate(getLocalTimeZone()), -// ) -// : "--"} -//

-//
-// ); -// }`; +import App from "./presets.raw.jsx?raw"; const react = { "/App.jsx": App, - // "/App.tsx": AppTs, }; export default { diff --git a/apps/docs/content/components/date-range-picker/readonly.raw.jsx b/apps/docs/content/components/date-range-picker/readonly.raw.jsx new file mode 100644 index 0000000000..11e281d0a9 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/readonly.raw.jsx @@ -0,0 +1,16 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/readonly.ts b/apps/docs/content/components/date-range-picker/readonly.ts index 4ac98ed8b4..fabd05ba36 100644 --- a/apps/docs/content/components/date-range-picker/readonly.ts +++ b/apps/docs/content/components/date-range-picker/readonly.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/required.raw.jsx b/apps/docs/content/components/date-range-picker/required.raw.jsx new file mode 100644 index 0000000000..8076e8e767 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/required.raw.jsx @@ -0,0 +1,16 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseDate} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/date-range-picker/required.ts b/apps/docs/content/components/date-range-picker/required.ts index c3c9e0bbd1..b50b781e6f 100644 --- a/apps/docs/content/components/date-range-picker/required.ts +++ b/apps/docs/content/components/date-range-picker/required.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseDate} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx new file mode 100644 index 0000000000..f8f253caf7 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx @@ -0,0 +1,10 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.ts b/apps/docs/content/components/date-range-picker/selector-button-placement.ts index f36752737f..2d69e80fe8 100644 --- a/apps/docs/content/components/date-range-picker/selector-button-placement.ts +++ b/apps/docs/content/components/date-range-picker/selector-button-placement.ts @@ -1,19 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./selector-button-placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx new file mode 100644 index 0000000000..0df488b234 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx @@ -0,0 +1,27 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export const SelectorIcon = (props) => { + return ( + + + + + + + + ); +}; + +export default function App() { + return ( +
+ } /> +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/selector-icon.ts b/apps/docs/content/components/date-range-picker/selector-icon.ts index 10e4eeb89d..9997d508de 100644 --- a/apps/docs/content/components/date-range-picker/selector-icon.ts +++ b/apps/docs/content/components/date-range-picker/selector-icon.ts @@ -1,35 +1,7 @@ -const SelectorIcon = `export const SelectorIcon = (props) => ( - - - - - - - -);`; - -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {SelectorIcon} from './SelectorIcon'; -export default function App() { - return ( -
- } - /> -
- ); -}`; +import App from "./selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/date-range-picker/time-zones.raw.jsx b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx new file mode 100644 index 0000000000..b353f82593 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx @@ -0,0 +1,25 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/time-zones.ts b/apps/docs/content/components/date-range-picker/time-zones.ts index ac08becc56..803b4ec768 100644 --- a/apps/docs/content/components/date-range-picker/time-zones.ts +++ b/apps/docs/content/components/date-range-picker/time-zones.ts @@ -1,28 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date"; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./time-zones.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx new file mode 100644 index 0000000000..3e2324f44d --- /dev/null +++ b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx @@ -0,0 +1,33 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + return ( + + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ) + } + label="Stay duration" + minValue={today(getLocalTimeZone())} + validate={(value) => + disabledRanges.some( + (interval) => + value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0, + ) + ? "Selected date range may not include unavailable dates." + : null + } + validationBehavior="native" + /> + ); +} diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.ts b/apps/docs/content/components/date-range-picker/unavailable-dates.ts index c300b5fc5b..b4e1f4df1a 100644 --- a/apps/docs/content/components/date-range-picker/unavailable-dates.ts +++ b/apps/docs/content/components/date-range-picker/unavailable-dates.ts @@ -1,36 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - return ( - - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ) - } - minValue={today(getLocalTimeZone())} - validate={(value) => - disabledRanges.some( - (interval) => - value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0, - ) - ? "Selected date range may not include unavailable dates." - : null - } - validationBehavior="native" - /> - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/usage.raw.jsx b/apps/docs/content/components/date-range-picker/usage.raw.jsx new file mode 100644 index 0000000000..0eacc56b4e --- /dev/null +++ b/apps/docs/content/components/date-range-picker/usage.raw.jsx @@ -0,0 +1,5 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/date-range-picker/usage.ts b/apps/docs/content/components/date-range-picker/usage.ts index b83666a5cb..1118304c37 100644 --- a/apps/docs/content/components/date-range-picker/usage.ts +++ b/apps/docs/content/components/date-range-picker/usage.ts @@ -1,13 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/variants.raw.jsx b/apps/docs/content/components/date-range-picker/variants.raw.jsx new file mode 100644 index 0000000000..5f20d0946b --- /dev/null +++ b/apps/docs/content/components/date-range-picker/variants.raw.jsx @@ -0,0 +1,15 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
+ {variants.map((variant) => ( +
+ +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/variants.ts b/apps/docs/content/components/date-range-picker/variants.ts index 668f9c83fe..ddea95fb2e 100644 --- a/apps/docs/content/components/date-range-picker/variants.ts +++ b/apps/docs/content/components/date-range-picker/variants.ts @@ -1,22 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
- {variants.map((variant) => ( -
- -
- ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/visible-month.raw.jsx b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx new file mode 100644 index 0000000000..a45041c3da --- /dev/null +++ b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx @@ -0,0 +1,9 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/visible-month.ts b/apps/docs/content/components/date-range-picker/visible-month.ts index 0f30be2412..7c3a2abe6a 100644 --- a/apps/docs/content/components/date-range-picker/visible-month.ts +++ b/apps/docs/content/components/date-range-picker/visible-month.ts @@ -1,15 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./visible-month.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx new file mode 100644 index 0000000000..3107c1c489 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx @@ -0,0 +1,9 @@ +import {DateRangePicker} from "@nextui-org/react"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts index 5e5d03a2fd..5e5431496b 100644 --- a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts +++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts @@ -1,16 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./with-month-and-year-pickers.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx new file mode 100644 index 0000000000..e988e95839 --- /dev/null +++ b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx @@ -0,0 +1,18 @@ +import {DateRangePicker} from "@nextui-org/react"; +import {parseZonedDateTime} from "@internationalized/date"; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/apps/docs/content/components/date-range-picker/with-time-field.ts b/apps/docs/content/components/date-range-picker/with-time-field.ts index 318f9f3770..8df135a004 100644 --- a/apps/docs/content/components/date-range-picker/with-time-field.ts +++ b/apps/docs/content/components/date-range-picker/with-time-field.ts @@ -1,21 +1,4 @@ -const App = `import {DateRangePicker} from "@nextui-org/react"; -import {parseZonedDateTime} from "@internationalized/date"; - -export default function App() { - return ( -
- -
- ); -}`; +import App from "./with-time-field.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/divider/usage.raw.jsx b/apps/docs/content/components/divider/usage.raw.jsx new file mode 100644 index 0000000000..580e85126f --- /dev/null +++ b/apps/docs/content/components/divider/usage.raw.jsx @@ -0,0 +1,20 @@ +import {Divider} from "@nextui-org/react"; + +export default function App() { + return ( +
+
+

NextUI Components

+

Beautiful, fast and modern React UI library.

+
+ +
+
Blog
+ +
Docs
+ +
Source
+
+
+ ); +} diff --git a/apps/docs/content/components/divider/usage.ts b/apps/docs/content/components/divider/usage.ts index d3509c6414..1118304c37 100644 --- a/apps/docs/content/components/divider/usage.ts +++ b/apps/docs/content/components/divider/usage.ts @@ -1,23 +1,4 @@ -const App = `import {Divider} from "@nextui-org/react"; - -export default function App() { - return ( -
-
-

NextUI Components

-

Beautiful, fast and modern React UI library.

-
- -
-
Blog
- -
Docs
- -
Source
-
-
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/backdrop.raw.jsx b/apps/docs/content/components/drawer/backdrop.raw.jsx new file mode 100644 index 0000000000..2985ae2612 --- /dev/null +++ b/apps/docs/content/components/drawer/backdrop.raw.jsx @@ -0,0 +1,134 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, + Input, + Checkbox, + Link, +} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export const LockIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [backdrop, setBackdrop] = React.useState("opaque"); + + const backdrops = ["opaque", "blur", "transparent"]; + + const handleBackdropChange = (backdrop) => { + setBackdrop(backdrop); + onOpen(); + }; + + return ( + <> +
+ {backdrops.map((backdrop) => ( + + ))} +
+ + + {(onClose) => ( + <> + Log in + + + } + label="Email" + placeholder="Enter your email" + variant="bordered" + /> + + } + label="Password" + placeholder="Enter your password" + type="password" + variant="bordered" + /> +
+ + Remember me + + + Forgot password? + +
+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/backdrop.ts b/apps/docs/content/components/drawer/backdrop.ts index 83f53e0f75..53412b0f5b 100644 --- a/apps/docs/content/components/drawer/backdrop.ts +++ b/apps/docs/content/components/drawer/backdrop.ts @@ -1,130 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -);`; - -const LockIcon = `export const LockIcon = (props) => ( - -);`; - -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react"; -import {MailIcon} from "./MailIcon"; -import {LockIcon} from "./LockIcon"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [backdrop, setBackdrop] = React.useState("opaque"); - - const backdrops = ["opaque", "blur", "transparent"]; - - const handleBackdropChange = (backdrop) => { - setBackdrop(backdrop); - onOpen(); - }; - - return ( - <> -
- {backdrops.map((backdrop) => ( - - ))} -
- - - {(onClose) => ( - <> - Log in - - - } - label="Email" - placeholder="Enter your email" - variant="bordered" - /> - - } - label="Password" - placeholder="Enter your password" - type="password" - variant="bordered" - /> -
- - Remember me - - - Forgot password? - -
- - - - - - - )} - - - - ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, - "/LockIcon.jsx": LockIcon, }; export default { diff --git a/apps/docs/content/components/drawer/custom-motion.raw.jsx b/apps/docs/content/components/drawer/custom-motion.raw.jsx new file mode 100644 index 0000000000..6baf7f42f4 --- /dev/null +++ b/apps/docs/content/components/drawer/custom-motion.raw.jsx @@ -0,0 +1,61 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Custom Motion Drawer + +

This drawer has custom enter/exit animations.

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/custom-motion.ts b/apps/docs/content/components/drawer/custom-motion.ts index 62140e8e5d..389f462ddd 100644 --- a/apps/docs/content/components/drawer/custom-motion.ts +++ b/apps/docs/content/components/drawer/custom-motion.ts @@ -1,58 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Custom Motion Drawer - -

- This drawer has custom enter/exit animations. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

- - - - - - - )} - - - - ); -}`; +import App from "./custom-motion.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/custom-styles.raw.jsx b/apps/docs/content/components/drawer/custom-styles.raw.jsx new file mode 100644 index 0000000000..1953d9962e --- /dev/null +++ b/apps/docs/content/components/drawer/custom-styles.raw.jsx @@ -0,0 +1,342 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, + Image, + Link, + Tooltip, + Avatar, + AvatarGroup, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + + + + +
+ + +
+
+ + + + + + +
+ + +
+ Event image +
+
+

SF Bay Area Meetup in November

+

+ 555 California St, San Francisco, CA 94103 +

+
+
+
+
Nov
+
+ 19 +
+
+
+

+ Tuesday, November 19 +

+

5:00 PM - 9:00 PM PST

+
+
+
+
+ + + + + + +
+
+ + + + } + className="group gap-x-0.5 text-medium text-foreground font-medium" + href="https://www.google.com/maps/place/555+California+St,+San+Francisco,+CA+94103" + rel="noreferrer noopener" + > + 555 California St suite 500 + +

San Francisco, California

+
+
+
+ About the event +
+

+ Hey Bay Area! We are excited to announce our next meetup on Tuesday, + November 19th. +

+

+ Join us for an evening of insightful discussions and hands-on workshops + focused on the latest developments in web development and design. Our + featured speakers will share their experiences with modern frontend + frameworks, responsive design patterns, and emerging web technologies. + You'll have the opportunity to network with fellow developers and + designers while enjoying refreshments and snacks. +

+

+ During the main session, we'll dive deep into practical examples of + building scalable applications, exploring best practices for component + architecture, and understanding advanced state management techniques. Our + interactive workshop portion will let you apply these concepts directly, + with experienced mentors available to provide guidance and answer your + questions. Whether you're a seasoned developer or just starting your + journey, you'll find valuable takeaways from this session. +

+ +

+ Brought to you by the{" "} + + NextUI team + + . +

+
+
+
+ Hosted By +
+ + NextUI Team +
+
+
+ 105 Going +
+ + + + + + + + + + + + + + +
+
+
+
+ + + + Contact the host + + + Report event + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/custom-styles.ts b/apps/docs/content/components/drawer/custom-styles.ts index 68f5939550..da3ea9093a 100644 --- a/apps/docs/content/components/drawer/custom-styles.ts +++ b/apps/docs/content/components/drawer/custom-styles.ts @@ -1,332 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Image, Link, Tooltip, Avatar, AvatarGroup} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - - - - -
- - -
-
- - - - - - -
- - -
- Event image -
-
-

SF Bay Area Meetup in November

-

- 555 California St, San Francisco, CA 94103 -

-
-
-
-
Nov
-
- 19 -
-
-
-

- Tuesday, November 19 -

-

5:00 PM - 9:00 PM PST

-
-
-
-
- - - - - - -
-
- - - - } - className="group gap-x-0.5 text-medium text-foreground font-medium" - href="https://www.google.com/maps/place/555+California+St,+San+Francisco,+CA+94103" - rel="noreferrer noopener" - > - 555 California St suite 500 - -

San Francisco, California

-
-
-
- About the event -
-

- Hey Bay Area! We are excited to announce our next meetup on Tuesday, - November 19th. -

-

- Join us for an evening of insightful discussions and hands-on workshops - focused on the latest developments in web development and design. Our - featured speakers will share their experiences with modern frontend - frameworks, responsive design patterns, and emerging web technologies. - You'll have the opportunity to network with fellow developers and - designers while enjoying refreshments and snacks. -

-

- During the main session, we'll dive deep into practical examples of - building scalable applications, exploring best practices for component - architecture, and understanding advanced state management techniques. Our - interactive workshop portion will let you apply these concepts directly, - with experienced mentors available to provide guidance and answer your - questions. Whether you're a seasoned developer or just starting your - journey, you'll find valuable takeaways from this session. -

- -

- Brought to you by the{" "} - - NextUI team - - . -

-
-
-
- Hosted By -
- - NextUI Team -
-
-
- 105 Going -
- - - - - - - - - - - - - - -
-
-
-
- - - - Contact the host - - - Report event - - - - )} - - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/form.raw.jsx b/apps/docs/content/components/drawer/form.raw.jsx new file mode 100644 index 0000000000..9198594672 --- /dev/null +++ b/apps/docs/content/components/drawer/form.raw.jsx @@ -0,0 +1,116 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, + Input, + Checkbox, + Link, +} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export const LockIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Log in + + + } + label="Email" + placeholder="Enter your email" + variant="bordered" + /> + + } + label="Password" + placeholder="Enter your password" + type="password" + variant="bordered" + /> +
+ + Remember me + + + Forgot password? + +
+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/form.ts b/apps/docs/content/components/drawer/form.ts index f087d8de00..c9bad48bd2 100644 --- a/apps/docs/content/components/drawer/form.ts +++ b/apps/docs/content/components/drawer/form.ts @@ -1,113 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -); -`; - -const LockIcon = `export const LockIcon = (props) => ( - -);`; - -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure, Input, Checkbox, Link} from "@nextui-org/react"; -import {MailIcon} from "./MailIcon"; -import {LockIcon} from "./LockIcon"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Log in - - - } - label="Email" - placeholder="Enter your email" - variant="bordered" - /> - - } - label="Password" - placeholder="Enter your password" - type="password" - variant="bordered" - /> -
- - Remember me - - - Forgot password? - -
- - - - - - - )} - - - - ); -}`; +import App from "./form.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, - "/LockIcon.jsx": LockIcon, }; export default { diff --git a/apps/docs/content/components/drawer/non-dismissable.raw.jsx b/apps/docs/content/components/drawer/non-dismissable.raw.jsx new file mode 100644 index 0000000000..6e91e64682 --- /dev/null +++ b/apps/docs/content/components/drawer/non-dismissable.raw.jsx @@ -0,0 +1,52 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Non Dismissable Drawer + +

+ Click the close button or action button to close the drawer. Clicking outside or + pressing the escape key won't close it. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/non-dismissable.ts b/apps/docs/content/components/drawer/non-dismissable.ts index fc9f1ded22..a1281cb23a 100644 --- a/apps/docs/content/components/drawer/non-dismissable.ts +++ b/apps/docs/content/components/drawer/non-dismissable.ts @@ -1,47 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Non Dismissable Drawer - -

- Click the close button or action button to close the drawer. - Clicking outside or pressing the escape key won't close it. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

- - - - - - - )} - - - - ); -}`; +import App from "./non-dismissable.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/placement.raw.jsx b/apps/docs/content/components/drawer/placement.raw.jsx new file mode 100644 index 0000000000..d91526dd87 --- /dev/null +++ b/apps/docs/content/components/drawer/placement.raw.jsx @@ -0,0 +1,60 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [placement, setPlacement] = React.useState("left"); + + const handleOpen = (placement) => { + setPlacement(placement); + onOpen(); + }; + + return ( + <> +
+ {["left", "right", "top", "bottom"].map((placement) => ( + + ))} +
+ + + {(onClose) => ( + <> + Drawer Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/placement.ts b/apps/docs/content/components/drawer/placement.ts index bd66a29bab..eee2244366 100644 --- a/apps/docs/content/components/drawer/placement.ts +++ b/apps/docs/content/components/drawer/placement.ts @@ -1,63 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [placement, setPlacement] = React.useState("left") - - const handleOpen = (placement) => { - setPlacement(placement) - onOpen(); - } - - return ( - <> -
- {["left", "right", "top", "bottom"].map((placement) => ( - - ))} -
- - - {(onClose) => ( - <> - Drawer Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. -

- - - - - - - )} - - - - ); -}`; +import App from "./placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/sizes.raw.jsx b/apps/docs/content/components/drawer/sizes.raw.jsx new file mode 100644 index 0000000000..a61da6eade --- /dev/null +++ b/apps/docs/content/components/drawer/sizes.raw.jsx @@ -0,0 +1,62 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onClose} = useDisclosure(); + const [size, setSize] = React.useState("md"); + + const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; + + const handleOpen = (size) => { + setSize(size); + onOpen(); + }; + + return ( + <> +
+ {sizes.map((size) => ( + + ))} +
+ + + {(onClose) => ( + <> + Drawer Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/sizes.ts b/apps/docs/content/components/drawer/sizes.ts index 6fa5d5589e..85a2f5b30b 100644 --- a/apps/docs/content/components/drawer/sizes.ts +++ b/apps/docs/content/components/drawer/sizes.ts @@ -1,59 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onClose} = useDisclosure(); - const [size, setSize] = React.useState('md') - - const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; - - const handleOpen = (size) => { - setSize(size) - onOpen(); - } - - return ( - <> -
- {sizes.map((size) => ( - - ))} -
- - - {(onClose) => ( - <> - Drawer Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. -

- - - - - - - )} - - - - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/drawer/usage.raw.jsx b/apps/docs/content/components/drawer/usage.raw.jsx new file mode 100644 index 0000000000..9b878ad52b --- /dev/null +++ b/apps/docs/content/components/drawer/usage.raw.jsx @@ -0,0 +1,55 @@ +import { + Drawer, + DrawerContent, + DrawerHeader, + DrawerBody, + DrawerFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Drawer Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/drawer/usage.ts b/apps/docs/content/components/drawer/usage.ts index e4de7c5f51..1118304c37 100644 --- a/apps/docs/content/components/drawer/usage.ts +++ b/apps/docs/content/components/drawer/usage.ts @@ -1,50 +1,4 @@ -const App = `import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Drawer Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

- - - - - - - )} - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/action.raw.jsx b/apps/docs/content/components/dropdown/action.raw.jsx new file mode 100644 index 0000000000..281521b426 --- /dev/null +++ b/apps/docs/content/components/dropdown/action.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + alert(key)}> + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/action.ts b/apps/docs/content/components/dropdown/action.ts index 21a6a4109c..3f0f8e8a41 100644 --- a/apps/docs/content/components/dropdown/action.ts +++ b/apps/docs/content/components/dropdown/action.ts @@ -1,29 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - alert(key)} - > - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./action.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/backdrop.raw.jsx b/apps/docs/content/components/dropdown/backdrop.raw.jsx new file mode 100644 index 0000000000..c96bc3d0cd --- /dev/null +++ b/apps/docs/content/components/dropdown/backdrop.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/backdrop.ts b/apps/docs/content/components/dropdown/backdrop.ts index e5acaa6714..53412b0f5b 100644 --- a/apps/docs/content/components/dropdown/backdrop.ts +++ b/apps/docs/content/components/dropdown/backdrop.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx new file mode 100644 index 0000000000..24e4b8af8b --- /dev/null +++ b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx @@ -0,0 +1,123 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownSection, + DropdownItem, + Button, + User, +} from "@nextui-org/react"; + +export const PlusIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + + + + + + + + + Dashboard + Settings + }> + New Project + + + + + + Quick search + + + + + + + } + > + Theme + + + + + Help & Feedback + Log Out + + + + ); +} diff --git a/apps/docs/content/components/dropdown/custom-items-styles.ts b/apps/docs/content/components/dropdown/custom-items-styles.ts index 15127eb7cd..7589406d71 100644 --- a/apps/docs/content/components/dropdown/custom-items-styles.ts +++ b/apps/docs/content/components/dropdown/custom-items-styles.ts @@ -1,129 +1,7 @@ -const PlusIcon = `export const PlusIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, User} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon.jsx"; -export default function App() { - return ( - - - - - - - - - - - Dashboard - - Settings - } - > - New Project - - - - - - Quick search - - - - - - - } - > - Theme - - - - - - Help & Feedback - - Log Out - - - - ); -}`; +import App from "./custom-items-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/PlusIcon.jsx": PlusIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx new file mode 100644 index 0000000000..83eefe76d2 --- /dev/null +++ b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx @@ -0,0 +1,178 @@ +import { + Dropdown, + DropdownSection, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, + cn, +} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + + + } + > + Delete file + + + + + ); +} diff --git a/apps/docs/content/components/dropdown/custom-popover-styles.ts b/apps/docs/content/components/dropdown/custom-popover-styles.ts index b93aee09cb..348d838d21 100644 --- a/apps/docs/content/components/dropdown/custom-popover-styles.ts +++ b/apps/docs/content/components/dropdown/custom-popover-styles.ts @@ -1,179 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - - - } - > - Delete file - - - - - ); -}`; +import App from "./custom-popover-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/custom-trigger.raw.jsx b/apps/docs/content/components/dropdown/custom-trigger.raw.jsx new file mode 100644 index 0000000000..f610f72c70 --- /dev/null +++ b/apps/docs/content/components/dropdown/custom-trigger.raw.jsx @@ -0,0 +1,69 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Avatar, + User, +} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +

Signed in as

+

zoey@example.com

+ + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + + + + + + + + + +

Signed in as

+

@tonyreichert

+ + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + + + +
+ ); +} diff --git a/apps/docs/content/components/dropdown/custom-trigger.ts b/apps/docs/content/components/dropdown/custom-trigger.ts index 7f08714582..dcc6b44a07 100644 --- a/apps/docs/content/components/dropdown/custom-trigger.ts +++ b/apps/docs/content/components/dropdown/custom-trigger.ts @@ -1,77 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar, User} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -

Signed in as

-

zoey@example.com

- - - My Settings - - Team Settings - - Analytics - - System - Configurations - - Help & Feedback - - - Log Out - - - - - - - - - -

Signed in as

-

@tonyreichert

- - - My Settings - - Team Settings - - Analytics - - System - Configurations - - Help & Feedback - - - Log Out - - - -
- ); -}`; +import App from "./custom-trigger.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/description.raw.jsx b/apps/docs/content/components/dropdown/description.raw.jsx new file mode 100644 index 0000000000..734cf9ebb0 --- /dev/null +++ b/apps/docs/content/components/dropdown/description.raw.jsx @@ -0,0 +1,160 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/description.ts b/apps/docs/content/components/dropdown/description.ts index f5dbd0138b..aeb6340b6b 100644 --- a/apps/docs/content/components/dropdown/description.ts +++ b/apps/docs/content/components/dropdown/description.ts @@ -1,170 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/disabled-keys.raw.jsx b/apps/docs/content/components/dropdown/disabled-keys.raw.jsx new file mode 100644 index 0000000000..00e1fa7965 --- /dev/null +++ b/apps/docs/content/components/dropdown/disabled-keys.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/disabled-keys.ts b/apps/docs/content/components/dropdown/disabled-keys.ts index f37a8f3394..b179b7cb75 100644 --- a/apps/docs/content/components/dropdown/disabled-keys.ts +++ b/apps/docs/content/components/dropdown/disabled-keys.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./disabled-keys.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/dynamic.raw.jsx b/apps/docs/content/components/dropdown/dynamic.raw.jsx new file mode 100644 index 0000000000..885ee88b93 --- /dev/null +++ b/apps/docs/content/components/dropdown/dynamic.raw.jsx @@ -0,0 +1,41 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const items = [ + { + key: "new", + label: "New file", + }, + { + key: "copy", + label: "Copy link", + }, + { + key: "edit", + label: "Edit file", + }, + { + key: "delete", + label: "Delete file", + }, + ]; + + return ( + + + + + + {(item) => ( + + {item.label} + + )} + + + ); +} diff --git a/apps/docs/content/components/dropdown/dynamic.ts b/apps/docs/content/components/dropdown/dynamic.ts index d3e672ca5e..5d3c97bb9a 100644 --- a/apps/docs/content/components/dropdown/dynamic.ts +++ b/apps/docs/content/components/dropdown/dynamic.ts @@ -1,48 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - const items = [ - { - key: "new", - label: "New file", - }, - { - key: "copy", - label: "Copy link", - }, - { - key: "edit", - label: "Edit file", - }, - { - key: "delete", - label: "Delete file", - } - ]; - - return ( - - - - - - {(item) => ( - - {item.label} - - )} - - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/icons.raw.jsx b/apps/docs/content/components/dropdown/icons.raw.jsx new file mode 100644 index 0000000000..ea47c662e2 --- /dev/null +++ b/apps/docs/content/components/dropdown/icons.raw.jsx @@ -0,0 +1,155 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/icons.ts b/apps/docs/content/components/dropdown/icons.ts index 0b9d01ada6..22a410c88f 100644 --- a/apps/docs/content/components/dropdown/icons.ts +++ b/apps/docs/content/components/dropdown/icons.ts @@ -1,165 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/multiple-selection.raw.jsx b/apps/docs/content/components/dropdown/multiple-selection.raw.jsx new file mode 100644 index 0000000000..a631230d99 --- /dev/null +++ b/apps/docs/content/components/dropdown/multiple-selection.raw.jsx @@ -0,0 +1,35 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/multiple-selection.raw.tsx b/apps/docs/content/components/dropdown/multiple-selection.raw.tsx new file mode 100644 index 0000000000..1deb785283 --- /dev/null +++ b/apps/docs/content/components/dropdown/multiple-selection.raw.tsx @@ -0,0 +1,38 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replace(/_/g, ""), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/multiple-selection.ts b/apps/docs/content/components/dropdown/multiple-selection.ts index 9d439aa553..033f4a3524 100644 --- a/apps/docs/content/components/dropdown/multiple-selection.ts +++ b/apps/docs/content/components/dropdown/multiple-selection.ts @@ -1,87 +1,15 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; - -const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; -import type { Selection } from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; +import App from "./multiple-selection.raw.jsx?raw"; +import AppTs from "./multiple-selection.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/dropdown/sections.raw.jsx b/apps/docs/content/components/dropdown/sections.raw.jsx new file mode 100644 index 0000000000..1d8e2e22fe --- /dev/null +++ b/apps/docs/content/components/dropdown/sections.raw.jsx @@ -0,0 +1,171 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownSection, + DropdownItem, + Button, + cn, +} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + + + } + > + Delete file + + + + + ); +} diff --git a/apps/docs/content/components/dropdown/sections.ts b/apps/docs/content/components/dropdown/sections.ts index d66ebc8a05..17cd360ea3 100644 --- a/apps/docs/content/components/dropdown/sections.ts +++ b/apps/docs/content/components/dropdown/sections.ts @@ -1,173 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, cn} from "@nextui-org/react"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - - - } - > - Delete file - - - - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/dropdown/shortcut.raw.jsx b/apps/docs/content/components/dropdown/shortcut.raw.jsx new file mode 100644 index 0000000000..012ce48069 --- /dev/null +++ b/apps/docs/content/components/dropdown/shortcut.raw.jsx @@ -0,0 +1,25 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + + New file + + + Copy link + + + Edit file + + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/shortcut.ts b/apps/docs/content/components/dropdown/shortcut.ts index 26a2c65265..a02522a1b9 100644 --- a/apps/docs/content/components/dropdown/shortcut.ts +++ b/apps/docs/content/components/dropdown/shortcut.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./shortcut.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/single-selection.raw.jsx b/apps/docs/content/components/dropdown/single-selection.raw.jsx new file mode 100644 index 0000000000..80ad30b87f --- /dev/null +++ b/apps/docs/content/components/dropdown/single-selection.raw.jsx @@ -0,0 +1,34 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replace(/_/g, ""), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/single-selection.raw.tsx b/apps/docs/content/components/dropdown/single-selection.raw.tsx new file mode 100644 index 0000000000..4c2edfa60b --- /dev/null +++ b/apps/docs/content/components/dropdown/single-selection.raw.tsx @@ -0,0 +1,37 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo( + () => Array.from(selectedKeys).join(", ").replace(/_/g, ""), + [selectedKeys], + ); + + return ( + + + + + + Text + Number + Date + Single Date + Iteration + + + ); +} diff --git a/apps/docs/content/components/dropdown/single-selection.ts b/apps/docs/content/components/dropdown/single-selection.ts index 8bf8911fff..8c6c97a329 100644 --- a/apps/docs/content/components/dropdown/single-selection.ts +++ b/apps/docs/content/components/dropdown/single-selection.ts @@ -1,85 +1,15 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; - -const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; -import type { Selection } from "@nextui-org/react"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", ").replaceAll("_", " "), - [selectedKeys] - ); - - return ( - - - - - - Text - Number - Date - Single Date - Iteration - - - ); -}`; +import App from "./single-selection.raw.jsx?raw"; +import AppTs from "./single-selection.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/dropdown/usage.raw.jsx b/apps/docs/content/components/dropdown/usage.raw.jsx new file mode 100644 index 0000000000..e8d76aeb4e --- /dev/null +++ b/apps/docs/content/components/dropdown/usage.raw.jsx @@ -0,0 +1,19 @@ +import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/dropdown/usage.ts b/apps/docs/content/components/dropdown/usage.ts index 214d0ff561..1118304c37 100644 --- a/apps/docs/content/components/dropdown/usage.ts +++ b/apps/docs/content/components/dropdown/usage.ts @@ -1,26 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/dropdown/variants.raw.jsx b/apps/docs/content/components/dropdown/variants.raw.jsx new file mode 100644 index 0000000000..22fbd2a6c3 --- /dev/null +++ b/apps/docs/content/components/dropdown/variants.raw.jsx @@ -0,0 +1,55 @@ +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; + + const DropdownContent = ({variant, color}) => ( + + + + + + New file + Copy link + Edit file + + Delete file + + + + ); + + return ( +
+ {variants.map((variant) => ( + + ))} + + Default + Primary + Secondary + Success + Warning + Danger + +
+ ); +} diff --git a/apps/docs/content/components/dropdown/variants.ts b/apps/docs/content/components/dropdown/variants.ts index f2c577d712..ddea95fb2e 100644 --- a/apps/docs/content/components/dropdown/variants.ts +++ b/apps/docs/content/components/dropdown/variants.ts @@ -1,58 +1,4 @@ -const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default") - - const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; - - const DropdownContent = ({variant, color}) => ( - - - - - - New file - Copy link - Edit file - - Delete file - - - - ) - - return ( -
- {variants.map((variant) => ( - - ))} - - Default - Primary - Secondary - Success - Warning - Danger - -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/blurred.raw.jsx b/apps/docs/content/components/image/blurred.raw.jsx new file mode 100644 index 0000000000..c1bcc75e14 --- /dev/null +++ b/apps/docs/content/components/image/blurred.raw.jsx @@ -0,0 +1,13 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI Album Cover + ); +} diff --git a/apps/docs/content/components/image/blurred.ts b/apps/docs/content/components/image/blurred.ts index 379e433c7a..0c08e28f90 100644 --- a/apps/docs/content/components/image/blurred.ts +++ b/apps/docs/content/components/image/blurred.ts @@ -1,16 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI Album Cover - ); -}`; +import App from "./blurred.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/fallback.raw.jsx b/apps/docs/content/components/image/fallback.raw.jsx new file mode 100644 index 0000000000..dba0cca441 --- /dev/null +++ b/apps/docs/content/components/image/fallback.raw.jsx @@ -0,0 +1,13 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI Image with fallback + ); +} diff --git a/apps/docs/content/components/image/fallback.ts b/apps/docs/content/components/image/fallback.ts index 165089d80a..20854071f7 100644 --- a/apps/docs/content/components/image/fallback.ts +++ b/apps/docs/content/components/image/fallback.ts @@ -1,16 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI Image with fallback - ); -}`; +import App from "./fallback.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/loading.raw.jsx b/apps/docs/content/components/image/loading.raw.jsx new file mode 100644 index 0000000000..3ad1b17619 --- /dev/null +++ b/apps/docs/content/components/image/loading.raw.jsx @@ -0,0 +1,12 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI hero Image with delay + ); +} diff --git a/apps/docs/content/components/image/loading.ts b/apps/docs/content/components/image/loading.ts index e2d70af02f..0c8fea5a5f 100644 --- a/apps/docs/content/components/image/loading.ts +++ b/apps/docs/content/components/image/loading.ts @@ -1,15 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI hero Image with delay - ); -}`; +import App from "./loading.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/nextjs.raw.jsx b/apps/docs/content/components/image/nextjs.raw.jsx new file mode 100644 index 0000000000..deee4e2121 --- /dev/null +++ b/apps/docs/content/components/image/nextjs.raw.jsx @@ -0,0 +1,14 @@ +import {Image} from "@nextui-org/react"; +import NextImage from "next/image"; + +export default function App() { + return ( + NextUI hero Image + ); +} diff --git a/apps/docs/content/components/image/nextjs.ts b/apps/docs/content/components/image/nextjs.ts index ff6a18e14e..1d69196630 100644 --- a/apps/docs/content/components/image/nextjs.ts +++ b/apps/docs/content/components/image/nextjs.ts @@ -1,17 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; -import NextImage from "next/image"; - -export default function App() { - return ( - NextUI hero Image - ); -}`; +import App from "./nextjs.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/usage.raw.jsx b/apps/docs/content/components/image/usage.raw.jsx new file mode 100644 index 0000000000..f7be019c8d --- /dev/null +++ b/apps/docs/content/components/image/usage.raw.jsx @@ -0,0 +1,11 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI hero Image + ); +} diff --git a/apps/docs/content/components/image/usage.ts b/apps/docs/content/components/image/usage.ts index 7041554fed..1118304c37 100644 --- a/apps/docs/content/components/image/usage.ts +++ b/apps/docs/content/components/image/usage.ts @@ -1,14 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI hero Image - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/image/zoomed.raw.jsx b/apps/docs/content/components/image/zoomed.raw.jsx new file mode 100644 index 0000000000..8e05d6217b --- /dev/null +++ b/apps/docs/content/components/image/zoomed.raw.jsx @@ -0,0 +1,12 @@ +import {Image} from "@nextui-org/react"; + +export default function App() { + return ( + NextUI Fruit Image with Zoom + ); +} diff --git a/apps/docs/content/components/image/zoomed.ts b/apps/docs/content/components/image/zoomed.ts index 2aaa13b28f..19b1fbb781 100644 --- a/apps/docs/content/components/image/zoomed.ts +++ b/apps/docs/content/components/image/zoomed.ts @@ -1,15 +1,4 @@ -const App = `import {Image} from "@nextui-org/react"; - -export default function App() { - return ( - NextUI Fruit Image with Zoom - ); -}`; +import App from "./zoomed.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/clear-button.raw.jsx b/apps/docs/content/components/input/clear-button.raw.jsx new file mode 100644 index 0000000000..c2fea3d79b --- /dev/null +++ b/apps/docs/content/components/input/clear-button.raw.jsx @@ -0,0 +1,17 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + console.log("input cleared")} + /> + ); +} diff --git a/apps/docs/content/components/input/clear-button.ts b/apps/docs/content/components/input/clear-button.ts index 892ea1dd45..f84fe2f74e 100644 --- a/apps/docs/content/components/input/clear-button.ts +++ b/apps/docs/content/components/input/clear-button.ts @@ -1,19 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - console.log("input cleared")} - className="max-w-xs" - /> - ); -}`; +import App from "./clear-button.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/colors.raw.jsx b/apps/docs/content/components/input/colors.raw.jsx new file mode 100644 index 0000000000..f1dd7e6e5b --- /dev/null +++ b/apps/docs/content/components/input/colors.raw.jsx @@ -0,0 +1,21 @@ +import {Input} 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/input/colors.ts b/apps/docs/content/components/input/colors.ts index 40885df2c1..d5bef810aa 100644 --- a/apps/docs/content/components/input/colors.ts +++ b/apps/docs/content/components/input/colors.ts @@ -1,31 +1,4 @@ -const App = `import {Input} 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/input/controlled.raw.jsx b/apps/docs/content/components/input/controlled.raw.jsx new file mode 100644 index 0000000000..7cb97a37be --- /dev/null +++ b/apps/docs/content/components/input/controlled.raw.jsx @@ -0,0 +1,12 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(""); + + return ( +
+ +

Input value: {value}

+
+ ); +} diff --git a/apps/docs/content/components/input/controlled.ts b/apps/docs/content/components/input/controlled.ts index 7c923292b9..2c3f0cacb4 100644 --- a/apps/docs/content/components/input/controlled.ts +++ b/apps/docs/content/components/input/controlled.ts @@ -1,20 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(""); - - return ( -
- -

Input value: {value}

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/custom-impl.raw.jsx b/apps/docs/content/components/input/custom-impl.raw.jsx new file mode 100644 index 0000000000..9a75192076 --- /dev/null +++ b/apps/docs/content/components/input/custom-impl.raw.jsx @@ -0,0 +1,162 @@ +import React, {forwardRef} from "react"; +import {useInput} from "@nextui-org/react"; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export const CloseFilledIcon = (props) => { + return ( + + ); +}; + +const styles = { + label: "text-black/50 dark:text-white/90", + input: [ + "bg-transparent", + "text-black/90 dark:text-white/90", + "placeholder:text-default-700/50 dark:placeholder:text-white/60", + ], + innerWrapper: "bg-transparent", + inputWrapper: [ + "shadow-xl", + "bg-default-200/50", + "dark:bg-default/60", + "backdrop-blur-xl", + "backdrop-saturate-200", + "hover:bg-default-200/70", + "focus-within:!bg-default-200/50", + "dark:hover:bg-default/70", + "dark:focus-within:!bg-default/60", + "!cursor-text", + ], +}; + +const MyInput = forwardRef((props, ref) => { + const { + Component, + label, + domRef, + description, + isClearable, + startContent, + endContent, + shouldLabelBeOutside, + shouldLabelBeInside, + errorMessage, + getBaseProps, + getLabelProps, + getInputProps, + getInnerWrapperProps, + getInputWrapperProps, + getDescriptionProps, + getErrorMessageProps, + getClearButtonProps, + } = useInput({ + ...props, + ref, + // this is just for the example, the props bellow should be passed by the parent component + label: "Search", + type: "search", + placeholder: "Type to search...", + startContent: ( + + ), + // custom styles + classNames: { + ...styles, + }, + }); + + const labelContent = ; + + const end = React.useMemo(() => { + if (isClearable) { + return {endContent || }; + } + + return endContent; + }, [isClearable, getClearButtonProps]); + + const innerWrapper = React.useMemo(() => { + if (startContent || end) { + return ( +
+ {startContent} + + {end} +
+ ); + } + + return ; + }, [startContent, end, getInputProps, getInnerWrapperProps]); + + return ( +
+ + {shouldLabelBeOutside ? labelContent : null} +
{ + domRef.current?.focus(); + }} + onKeyDown={() => { + domRef.current?.focus(); + }} + > + {shouldLabelBeInside ? labelContent : null} + {innerWrapper} +
+ {description &&
{description}
} + {errorMessage &&
{errorMessage}
} + +
+ ); +}); + +MyInput.displayName = "MyInput"; + +export default MyInput; diff --git a/apps/docs/content/components/input/custom-impl.ts b/apps/docs/content/components/input/custom-impl.ts index 8fb99cecdb..ab37512cec 100644 --- a/apps/docs/content/components/input/custom-impl.ts +++ b/apps/docs/content/components/input/custom-impl.ts @@ -1,164 +1,7 @@ -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const CloseFilledIcon = `export const CloseFilledIcon = (props) => ( - -);`; - -const App = `import React, {forwardRef} from "react"; -import {useInput} from "@nextui-org/react"; -import {SearchIcon} from "./SearchIcon"; -import {CloseFilledIcon} from "./CloseFilledIcon"; - -const styles = { - label: "text-black/50 dark:text-white/90", - input: [ - "bg-transparent", - "text-black/90 dark:text-white/90", - "placeholder:text-default-700/50 dark:placeholder:text-white/60", - ], - innerWrapper: "bg-transparent", - inputWrapper: [ - "shadow-xl", - "bg-default-200/50", - "dark:bg-default/60", - "backdrop-blur-xl", - "backdrop-saturate-200", - "hover:bg-default-200/70", - "focus-within:!bg-default-200/50", - "dark:hover:bg-default/70", - "dark:focus-within:!bg-default/60", - "!cursor-text", - ], -}; - -const MyInput = forwardRef((props, ref) => { - const { - Component, - label, - domRef, - description, - isClearable, - startContent, - endContent, - shouldLabelBeOutside, - shouldLabelBeInside, - errorMessage, - getBaseProps, - getLabelProps, - getInputProps, - getInnerWrapperProps, - getInputWrapperProps, - getDescriptionProps, - getErrorMessageProps, - getClearButtonProps, - } = useInput({ - ...props, - ref, - // this is just for the example, the props bellow should be passed by the parent component - label: "Search", - type: "search", - placeholder: "Type to search...", - startContent: ( - - ), - // custom styles - classNames: { - ...styles, - }, - }); - - const labelContent = ; - - const end = React.useMemo(() => { - if (isClearable) { - return {endContent || }; - } - - return endContent; - }, [isClearable, getClearButtonProps]); - - const innerWrapper = React.useMemo(() => { - if (startContent || end) { - return ( -
- {startContent} - - {end} -
- ); - } - - return ; - }, [startContent, end, getInputProps, getInnerWrapperProps]); - - return ( -
- - {shouldLabelBeOutside ? labelContent : null} -
{ - domRef.current?.focus(); - }} - > - {shouldLabelBeInside ? labelContent : null} - {innerWrapper} -
- {description &&
{description}
} - {errorMessage &&
{errorMessage}
} - -
- ); -}); - -MyInput.displayName = "MyInput"; - -export default MyInput;`; +import App from "./custom-impl.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SearchIcon.jsx": SearchIcon, - "/CloseFilledIcon.jsx": CloseFilledIcon, }; export default { diff --git a/apps/docs/content/components/input/custom-styles.raw.jsx b/apps/docs/content/components/input/custom-styles.raw.jsx new file mode 100644 index 0000000000..98c11c99bb --- /dev/null +++ b/apps/docs/content/components/input/custom-styles.raw.jsx @@ -0,0 +1,68 @@ +import {Input} from "@nextui-org/react"; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
+ + } + /> +
+ ); +} diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts index 3908b17561..da3ea9093a 100644 --- a/apps/docs/content/components/input/custom-styles.ts +++ b/apps/docs/content/components/input/custom-styles.ts @@ -1,74 +1,7 @@ -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const App = `import {Input} from "@nextui-org/react"; -import {SearchIcon} from "./SearchIcon"; - -export default function App() { - return ( -
- - } - /> -
- ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/SearchIcon.jsx": SearchIcon, }; export default { diff --git a/apps/docs/content/components/input/description.raw.jsx b/apps/docs/content/components/input/description.raw.jsx new file mode 100644 index 0000000000..3362ef3dcd --- /dev/null +++ b/apps/docs/content/components/input/description.raw.jsx @@ -0,0 +1,13 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/description.ts b/apps/docs/content/components/input/description.ts index 8a286b3692..aeb6340b6b 100644 --- a/apps/docs/content/components/input/description.ts +++ b/apps/docs/content/components/input/description.ts @@ -1,16 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/disabled.raw.jsx b/apps/docs/content/components/input/disabled.raw.jsx new file mode 100644 index 0000000000..6ed57cee8d --- /dev/null +++ b/apps/docs/content/components/input/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/disabled.ts b/apps/docs/content/components/input/disabled.ts index f3122337c3..1a215cc91f 100644 --- a/apps/docs/content/components/input/disabled.ts +++ b/apps/docs/content/components/input/disabled.ts @@ -1,16 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/error-message.raw.jsx b/apps/docs/content/components/input/error-message.raw.jsx new file mode 100644 index 0000000000..d8f0f19f5c --- /dev/null +++ b/apps/docs/content/components/input/error-message.raw.jsx @@ -0,0 +1,15 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/error-message.ts b/apps/docs/content/components/input/error-message.ts index 8ed295e659..fb8101b132 100644 --- a/apps/docs/content/components/input/error-message.ts +++ b/apps/docs/content/components/input/error-message.ts @@ -1,18 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/label-placements.raw.jsx b/apps/docs/content/components/input/label-placements.raw.jsx new file mode 100644 index 0000000000..01c6692667 --- /dev/null +++ b/apps/docs/content/components/input/label-placements.raw.jsx @@ -0,0 +1,39 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
+
+

Without placeholder

+
+ {placements.map((placement) => ( + + ))} +
+
+
+

With placeholder

+
+ {placements.map((placement) => ( + + ))} +
+
+
+ ); +} diff --git a/apps/docs/content/components/input/label-placements.ts b/apps/docs/content/components/input/label-placements.ts index f37fc6cf78..cd2a65d352 100644 --- a/apps/docs/content/components/input/label-placements.ts +++ b/apps/docs/content/components/input/label-placements.ts @@ -1,46 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
-
-

Without placeholder

-
- {placements.map((placement) => ( - - ))} -
-
-
-

With placeholder

-
- {placements.map((placement) => ( - - ))} -
-
-
- ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/password.raw.jsx b/apps/docs/content/components/input/password.raw.jsx new file mode 100644 index 0000000000..e8aa0025cd --- /dev/null +++ b/apps/docs/content/components/input/password.raw.jsx @@ -0,0 +1,91 @@ +import {Input} from "@nextui-org/react"; + +export const EyeSlashFilledIcon = (props) => { + return ( + + ); +}; + +export const EyeFilledIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [isVisible, setIsVisible] = React.useState(false); + + const toggleVisibility = () => setIsVisible(!isVisible); + + return ( + + {isVisible ? ( + + ) : ( + + )} + + } + label="Password" + placeholder="Enter your password" + type={isVisible ? "text" : "password"} + variant="bordered" + /> + ); +} diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts index 02822deb75..7751eaf935 100644 --- a/apps/docs/content/components/input/password.ts +++ b/apps/docs/content/components/input/password.ts @@ -1,92 +1,7 @@ -const EyeSlashFilledIcon = `export const EyeSlashFilledIcon = (props) => ( - -);`; - -const EyeFilledIcon = `export const EyeFilledIcon = (props) => ( - -);`; - -const App = `import {Input} from "@nextui-org/react"; -import {EyeFilledIcon} from "./EyeFilledIcon"; -import {EyeSlashFilledIcon} from "./EyeSlashFilledIcon"; - -export default function App() { - const [isVisible, setIsVisible] = React.useState(false); - - const toggleVisibility = () => setIsVisible(!isVisible); - - return ( - - {isVisible ? ( - - ) : ( - - )} - - } - type={isVisible ? "text" : "password"} - className="max-w-xs" - /> - ); -}`; +import App from "./password.raw.jsx?raw"; const react = { "/App.jsx": App, - "/EyeSlashFilledIcon.jsx": EyeSlashFilledIcon, - "/EyeFilledIcon.jsx": EyeFilledIcon, }; export default { diff --git a/apps/docs/content/components/input/radius.raw.jsx b/apps/docs/content/components/input/radius.raw.jsx new file mode 100644 index 0000000000..cf85ff22f2 --- /dev/null +++ b/apps/docs/content/components/input/radius.raw.jsx @@ -0,0 +1,21 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
+ {radius.map((r) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/input/radius.ts b/apps/docs/content/components/input/radius.ts index 13eaba44b0..7b78db1ce0 100644 --- a/apps/docs/content/components/input/radius.ts +++ b/apps/docs/content/components/input/radius.ts @@ -1,30 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const radius = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
- {radius.map((r) => ( - - ))} -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/readonly.raw.jsx b/apps/docs/content/components/input/readonly.raw.jsx new file mode 100644 index 0000000000..50cb471ded --- /dev/null +++ b/apps/docs/content/components/input/readonly.raw.jsx @@ -0,0 +1,14 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/readonly.ts b/apps/docs/content/components/input/readonly.ts index 7e9bf99da4..fabd05ba36 100644 --- a/apps/docs/content/components/input/readonly.ts +++ b/apps/docs/content/components/input/readonly.ts @@ -1,17 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./readonly.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/regex-validation.raw.jsx b/apps/docs/content/components/input/regex-validation.raw.jsx new file mode 100644 index 0000000000..64e06b69c7 --- /dev/null +++ b/apps/docs/content/components/input/regex-validation.raw.jsx @@ -0,0 +1,27 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState("junior2nextui.org"); + + const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i); + + const isInvalid = React.useMemo(() => { + if (value === "") return false; + + return validateEmail(value) ? false : true; + }, [value]); + + return ( + + ); +} diff --git a/apps/docs/content/components/input/regex-validation.ts b/apps/docs/content/components/input/regex-validation.ts index 1eb62d8e2b..395d689b17 100644 --- a/apps/docs/content/components/input/regex-validation.ts +++ b/apps/docs/content/components/input/regex-validation.ts @@ -1,30 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState("junior2nextui.org"); - - const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i); - - const isInvalid = React.useMemo(() => { - if (value === "") return false; - - return validateEmail(value) ? false : true; - }, [value]); - - return ( - - ); -}`; +import App from "./regex-validation.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/required.raw.jsx b/apps/docs/content/components/input/required.raw.jsx new file mode 100644 index 0000000000..6e97f4494b --- /dev/null +++ b/apps/docs/content/components/input/required.raw.jsx @@ -0,0 +1,13 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/input/required.ts b/apps/docs/content/components/input/required.ts index 2af84c5b46..b50b781e6f 100644 --- a/apps/docs/content/components/input/required.ts +++ b/apps/docs/content/components/input/required.ts @@ -1,16 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/sizes.raw.jsx b/apps/docs/content/components/input/sizes.raw.jsx new file mode 100644 index 0000000000..01e44c76d4 --- /dev/null +++ b/apps/docs/content/components/input/sizes.raw.jsx @@ -0,0 +1,16 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( +
+ + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/input/sizes.ts b/apps/docs/content/components/input/sizes.ts index 6294e756c7..85a2f5b30b 100644 --- a/apps/docs/content/components/input/sizes.ts +++ b/apps/docs/content/components/input/sizes.ts @@ -1,20 +1,4 @@ -const App = `import {Input} 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/input/start-end-content.raw.jsx b/apps/docs/content/components/input/start-end-content.raw.jsx new file mode 100644 index 0000000000..306c4f70b0 --- /dev/null +++ b/apps/docs/content/components/input/start-end-content.raw.jsx @@ -0,0 +1,152 @@ +import {Input} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( +
+
+ + } + type="email" + /> + + $ +
+ } + type="number" + /> + + https:// +
+ } + type="url" + /> + +
+ + } + label="Email" + labelPlacement="outside" + placeholder="you@example.com" + type="email" + /> + + $ +
+ } + label="Price" + labelPlacement="outside" + placeholder="0.00" + type="number" + /> + + .org/ + + } + label="Website" + labelPlacement="outside" + placeholder="nextui" + type="url" + /> + +
+ + @gmail.com +
+ } + label="Email" + labelPlacement="outside" + placeholder="nextui" + startContent={ + + } + /> + + + + + } + label="Price" + labelPlacement="outside" + placeholder="0.00" + startContent={ +
+ $ +
+ } + type="number" + /> + + .org + + } + label="Website" + labelPlacement="outside" + placeholder="nextui" + startContent={ +
+ https:// +
+ } + type="url" + /> + + + ); +} diff --git a/apps/docs/content/components/input/start-end-content.ts b/apps/docs/content/components/input/start-end-content.ts index 767530eb9d..e99c7e5997 100644 --- a/apps/docs/content/components/input/start-end-content.ts +++ b/apps/docs/content/components/input/start-end-content.ts @@ -1,158 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -);`; - -const App = `import {Input} from "@nextui-org/react"; -import {MailIcon} from './MailIcon'; - -export default function App() { - return ( -
-
- - } - /> - - $ -
- } - /> - - https:// -
- } - /> - -
- - } - /> - - $ -
- } - /> - - .org/ - - } - /> - -
- - } - endContent={ -
- @gmail.com -
- } - /> - - $ -
- } - endContent={ -
- - -
- } - type="number" - /> - - https:// - - } - endContent={ -
- .org -
- } - /> - - - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, }; export default { diff --git a/apps/docs/content/components/input/usage.raw.jsx b/apps/docs/content/components/input/usage.raw.jsx new file mode 100644 index 0000000000..3b7f143b55 --- /dev/null +++ b/apps/docs/content/components/input/usage.raw.jsx @@ -0,0 +1,10 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/input/usage.ts b/apps/docs/content/components/input/usage.ts index e2896cf877..1118304c37 100644 --- a/apps/docs/content/components/input/usage.ts +++ b/apps/docs/content/components/input/usage.ts @@ -1,13 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/input/variants.raw.jsx b/apps/docs/content/components/input/variants.raw.jsx new file mode 100644 index 0000000000..bfe66708dc --- /dev/null +++ b/apps/docs/content/components/input/variants.raw.jsx @@ -0,0 +1,16 @@ +import {Input} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
+ {variants.map((variant) => ( +
+ + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/input/variants.ts b/apps/docs/content/components/input/variants.ts index d8308fd586..ddea95fb2e 100644 --- a/apps/docs/content/components/input/variants.ts +++ b/apps/docs/content/components/input/variants.ts @@ -1,19 +1,4 @@ -const App = `import {Input} from "@nextui-org/react"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
- {variants.map((variant) => ( -
- - -
- ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/kbd/keys.raw.jsx b/apps/docs/content/components/kbd/keys.raw.jsx new file mode 100644 index 0000000000..b1a656827e --- /dev/null +++ b/apps/docs/content/components/kbd/keys.raw.jsx @@ -0,0 +1,11 @@ +import {Kbd} from "@nextui-org/react"; + +export default function App() { + return ( +
+ K + N + P +
+ ); +} diff --git a/apps/docs/content/components/kbd/keys.ts b/apps/docs/content/components/kbd/keys.ts index e4f45fd712..34b8861432 100644 --- a/apps/docs/content/components/kbd/keys.ts +++ b/apps/docs/content/components/kbd/keys.ts @@ -1,14 +1,4 @@ -const App = `import {Kbd} from "@nextui-org/react"; - -export default function App() { - return ( -
- K - N - P -
- ); -}`; +import App from "./keys.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/kbd/usage.raw.jsx b/apps/docs/content/components/kbd/usage.raw.jsx new file mode 100644 index 0000000000..2195959b23 --- /dev/null +++ b/apps/docs/content/components/kbd/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Kbd} from "@nextui-org/react"; + +export default function App() { + return K; +} diff --git a/apps/docs/content/components/kbd/usage.ts b/apps/docs/content/components/kbd/usage.ts index 11fd11aba2..1118304c37 100644 --- a/apps/docs/content/components/kbd/usage.ts +++ b/apps/docs/content/components/kbd/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Kbd} from "@nextui-org/react"; - -export default function App() { - return ( - K - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/block.raw.jsx b/apps/docs/content/components/link/block.raw.jsx new file mode 100644 index 0000000000..d8f5a60f1c --- /dev/null +++ b/apps/docs/content/components/link/block.raw.jsx @@ -0,0 +1,26 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Foreground + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
+ ); +} diff --git a/apps/docs/content/components/link/block.ts b/apps/docs/content/components/link/block.ts index b7ee134ec8..7262af3b6d 100644 --- a/apps/docs/content/components/link/block.ts +++ b/apps/docs/content/components/link/block.ts @@ -1,29 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
- - Foreground - - - Primary - - - Secondary - - - Success - - - Warning - - - Danger - -
- ); -}`; +import App from "./block.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/colors.raw.jsx b/apps/docs/content/components/link/colors.raw.jsx new file mode 100644 index 0000000000..66192e6a92 --- /dev/null +++ b/apps/docs/content/components/link/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Foreground + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
+ ); +} diff --git a/apps/docs/content/components/link/colors.ts b/apps/docs/content/components/link/colors.ts index 99a84bf238..d5bef810aa 100644 --- a/apps/docs/content/components/link/colors.ts +++ b/apps/docs/content/components/link/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
- Foreground - Primary - Secondary - Success - Warning - Danger -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/custom-anchor-icon.raw.jsx b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx new file mode 100644 index 0000000000..8892552391 --- /dev/null +++ b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx @@ -0,0 +1,37 @@ +import {Link} from "@nextui-org/react"; + +export const AnchorIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + } + href="https://github.com/nextui-org/nextui" + > + Custom Icon + + ); +} diff --git a/apps/docs/content/components/link/custom-anchor-icon.ts b/apps/docs/content/components/link/custom-anchor-icon.ts index ca70aee5a7..6d105abc2e 100644 --- a/apps/docs/content/components/link/custom-anchor-icon.ts +++ b/apps/docs/content/components/link/custom-anchor-icon.ts @@ -1,43 +1,7 @@ -const AnchorIcon = `export const AnchorIcon = (props) => ( - -);`; - -const App = `import {Link} from "@nextui-org/react"; -import {AnchorIcon} from "./AnchorIcon"; - -export default function App() { - return ( - } - > - Custom Icon - - ); -}`; +import App from "./custom-anchor-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AnchorIcon.jsx": AnchorIcon, }; export default { diff --git a/apps/docs/content/components/link/custom-impl.raw.jsx b/apps/docs/content/components/link/custom-impl.raw.jsx new file mode 100644 index 0000000000..bfadf4d60d --- /dev/null +++ b/apps/docs/content/components/link/custom-impl.raw.jsx @@ -0,0 +1,30 @@ +import {forwardRef} from "react"; +import {LinkIcon} from "@nextui-org/shared-icons"; +import {linkAnchorClasses} from "@nextui-org/theme"; +import {useLink} from "@nextui-org/react"; + +const MyLink = forwardRef((props, ref) => { + const { + Component, + children, + showAnchorIcon, + anchorIcon = , + getLinkProps, + } = useLink({ + ...props, + ref, + }); + + return ( + + <> + {children} + {showAnchorIcon && anchorIcon} + + + ); +}); + +MyLink.displayName = "MyLink"; + +export default MyLink; diff --git a/apps/docs/content/components/link/custom-impl.raw.tsx b/apps/docs/content/components/link/custom-impl.raw.tsx new file mode 100644 index 0000000000..c4cd0ba569 --- /dev/null +++ b/apps/docs/content/components/link/custom-impl.raw.tsx @@ -0,0 +1,32 @@ +import React, {forwardRef} from "react"; +import {LinkIcon} from "@nextui-org/shared-icons"; +import {linkAnchorClasses} from "@nextui-org/theme"; +import {LinkProps, useLink} from "@nextui-org/react"; + +export interface MyLinkProps extends LinkProps {} + +const MyLink = forwardRef((props, ref) => { + const { + Component, + children, + showAnchorIcon, + anchorIcon = , + getLinkProps, + } = useLink({ + ...props, + ref, + }); + + return ( + + <> + {children} + {showAnchorIcon && anchorIcon} + + + ); +}); + +MyLink.displayName = "MyLink"; + +export default MyLink; diff --git a/apps/docs/content/components/link/custom-impl.ts b/apps/docs/content/components/link/custom-impl.ts index 9c1a72017d..ef0d8ef531 100644 --- a/apps/docs/content/components/link/custom-impl.ts +++ b/apps/docs/content/components/link/custom-impl.ts @@ -1,68 +1,5 @@ -const App = `import {forwardRef} from "react"; -import {LinkIcon} from "@nextui-org/shared-icons"; -import {linkAnchorClasses} from "@nextui-org/theme"; - -import {useLink} from "@nextui-org/react"; - -const MyLink = forwardRef((props, ref) => { - const { - Component, - children, - showAnchorIcon, - anchorIcon = , - getLinkProps, - } = useLink({ - ...props, - ref, - }); - - return ( - - <> - {children} - {showAnchorIcon && anchorIcon} - - - ); -}); - -MyLink.displayName = "MyLink"; - -export default MyLink;`; - -const AppTs = `import {forwardRef} from "react"; -import {LinkIcon} from "@nextui-org/shared-icons"; -import {linkAnchorClasses} from "@nextui-org/theme"; - -import {LinkProps, useLink} from "@nextui-org/react"; - -export interface MyLinkProps extends LinkProps {} - -const MyLink = forwardRef((props, ref) => { - const { - Component, - children, - showAnchorIcon, - anchorIcon = , - getLinkProps, - } = useLink({ - ...props, - ref, - }); - - return ( - - <> - {children} - {showAnchorIcon && anchorIcon} - - - ); -}); - -MyLink.displayName = "MyLink"; - -export default MyLink;`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/disabled.raw.jsx b/apps/docs/content/components/link/disabled.raw.jsx new file mode 100644 index 0000000000..28ab3b52b3 --- /dev/null +++ b/apps/docs/content/components/link/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( + + Disabled Link + + ); +} diff --git a/apps/docs/content/components/link/disabled.ts b/apps/docs/content/components/link/disabled.ts index a4db371fba..1a215cc91f 100644 --- a/apps/docs/content/components/link/disabled.ts +++ b/apps/docs/content/components/link/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( - Disabled Link - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/external.raw.jsx b/apps/docs/content/components/link/external.raw.jsx new file mode 100644 index 0000000000..63d17130ca --- /dev/null +++ b/apps/docs/content/components/link/external.raw.jsx @@ -0,0 +1,14 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + External Link + + + External Link Anchor + +
+ ); +} diff --git a/apps/docs/content/components/link/external.ts b/apps/docs/content/components/link/external.ts index b59e78c177..ad0973aa0f 100644 --- a/apps/docs/content/components/link/external.ts +++ b/apps/docs/content/components/link/external.ts @@ -1,21 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
- - External Link - - - External Link Anchor - -
- ); -}`; +import App from "./external.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/nextjs.raw.jsx b/apps/docs/content/components/link/nextjs.raw.jsx new file mode 100644 index 0000000000..38e7674e6a --- /dev/null +++ b/apps/docs/content/components/link/nextjs.raw.jsx @@ -0,0 +1,10 @@ +import {Link} from "@nextui-org/react"; +import NextLink from "next/link"; + +export default function App() { + return ( + + Next.js Link + + ); +} diff --git a/apps/docs/content/components/link/nextjs.ts b/apps/docs/content/components/link/nextjs.ts index 77f0e808a9..1d69196630 100644 --- a/apps/docs/content/components/link/nextjs.ts +++ b/apps/docs/content/components/link/nextjs.ts @@ -1,13 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; -import NextLink from "next/link"; - -export default function App() { - return ( - - Next.js Link - - ); -}`; +import App from "./nextjs.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/polymorphic.raw.jsx b/apps/docs/content/components/link/polymorphic.raw.jsx new file mode 100644 index 0000000000..52e8f3bd83 --- /dev/null +++ b/apps/docs/content/components/link/polymorphic.raw.jsx @@ -0,0 +1,15 @@ +import {Link, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/link/polymorphic.ts b/apps/docs/content/components/link/polymorphic.ts index 10c04b327b..5722a6ee48 100644 --- a/apps/docs/content/components/link/polymorphic.ts +++ b/apps/docs/content/components/link/polymorphic.ts @@ -1,18 +1,4 @@ -const App = `import { Link, Button } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./polymorphic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/sizes.raw.jsx b/apps/docs/content/components/link/sizes.raw.jsx new file mode 100644 index 0000000000..2230bd9113 --- /dev/null +++ b/apps/docs/content/components/link/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Small + + + Medium + + + Large + +
+ ); +} diff --git a/apps/docs/content/components/link/sizes.ts b/apps/docs/content/components/link/sizes.ts index 63df519edc..85a2f5b30b 100644 --- a/apps/docs/content/components/link/sizes.ts +++ b/apps/docs/content/components/link/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
- Small - Medium - Large -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/underline.raw.jsx b/apps/docs/content/components/link/underline.raw.jsx new file mode 100644 index 0000000000..456a63929c --- /dev/null +++ b/apps/docs/content/components/link/underline.raw.jsx @@ -0,0 +1,23 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + None + + + Hover + + + Always + + + Active + + + Focus + +
+ ); +} diff --git a/apps/docs/content/components/link/underline.ts b/apps/docs/content/components/link/underline.ts index 78e0d7b87e..0d7eb45ee3 100644 --- a/apps/docs/content/components/link/underline.ts +++ b/apps/docs/content/components/link/underline.ts @@ -1,16 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( -
- None - Hover - Always - Active - Focus -
- ); -}`; +import App from "./underline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/link/usage.raw.jsx b/apps/docs/content/components/link/usage.raw.jsx new file mode 100644 index 0000000000..4418696de5 --- /dev/null +++ b/apps/docs/content/components/link/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Link} from "@nextui-org/react"; + +export default function App() { + return Default Link; +} diff --git a/apps/docs/content/components/link/usage.ts b/apps/docs/content/components/link/usage.ts index bcd07ac923..1118304c37 100644 --- a/apps/docs/content/components/link/usage.ts +++ b/apps/docs/content/components/link/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Link} from "@nextui-org/react"; - -export default function App() { - return ( - Default Link - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/listbox/custom-styles.raw.jsx b/apps/docs/content/components/listbox/custom-styles.raw.jsx new file mode 100644 index 0000000000..fc90e0f636 --- /dev/null +++ b/apps/docs/content/components/listbox/custom-styles.raw.jsx @@ -0,0 +1,269 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const BugIcon = (props) => { + return ( + + + + ); +}; + +export const PullRequestIcon = (props) => { + return ( + + + + ); +}; + +export const ChatIcon = (props) => { + return ( + + + + + ); +}; + +export const PlayCircleIcon = (props) => { + return ( + + + + + ); +}; + +export const LayoutIcon = (props) => { + return ( + + + + ); +}; + +export const TagIcon = (props) => { + return ( + + + + + ); +}; + +export const UsersIcon = (props) => { + return ( + + + + + ); +}; + +export const WatchersIcon = (props) => { + return ( + + + + ); +}; + +export const BookIcon = (props) => { + return ( + + + + + ); +}; + +export const ChevronRightIcon = (props) => { + return ( + + ); +}; + +export const IconWrapper = ({children, className}) => ( +
+ {children} +
+); + +export const ItemCounter = ({number}) => ( +
+ {number} + +
+); + +export default function App() { + return ( + alert(key)} + > + } + startContent={ + + + + } + > + Issues + + } + startContent={ + + + + } + > + Pull Requests + + } + startContent={ + + + + } + > + Discussions + + } + startContent={ + + + + } + > + Actions + + } + startContent={ + + + + } + > + Projects + + } + startContent={ + + + + } + textValue="Releases" + > +
+ Releases +
+ @nextui-org/react@2.0.10 +
+ 49 minutes ago + Latest +
+
+
+ + } + startContent={ + + + + } + > + Contributors + + } + startContent={ + + + + } + > + Watchers + + MIT} + startContent={ + + + + } + > + License + + + ); +} diff --git a/apps/docs/content/components/listbox/custom-styles.ts b/apps/docs/content/components/listbox/custom-styles.ts index 1a29e8b682..da3ea9093a 100644 --- a/apps/docs/content/components/listbox/custom-styles.ts +++ b/apps/docs/content/components/listbox/custom-styles.ts @@ -1,282 +1,7 @@ -const BugIcon = `export const BugIcon = (props) => ( - - - -); -`; - -const PullRequestIcon = `export const PullRequestIcon = (props) => ( - - - -);`; - -const ChatIcon = `export const ChatIcon = (props) => ( - - - - -);`; - -const PlayCircleIcon = `export const PlayCircleIcon = (props) => ( - - - - -);`; - -const LayoutIcon = `export const LayoutIcon = (props) => ( - - - -);`; - -const TagIcon = `export const TagIcon = (props) => ( - - - - -);`; - -const UsersIcon = `export const UsersIcon = (props) => ( - - - - -);`; - -const WatchersIcon = `export const WatchersIcon = (props) => ( - - - -);`; - -const BookIcon = `export const BookIcon = (props) => ( - - - - -);`; - -const ChevronRightIcon = `export const ChevronRightIcon = (props) => ( - -);`; - -const IconWrapper = `import {cn} from "@nextui-org/react"; - -export const IconWrapper = ({children, className}) => ( -
- {children} -
-);`; - -const ItemCounter = `export const ItemCounter = ({number}) => ( -
- {number} - -
-);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {IconWrapper} from "./IconWrapper"; -import {ItemCounter} from "./ItemCounter"; -import {BugIcon} from "./BugIcon"; -import {PullRequestIcon} from "./PullRequestIcon"; -import {ChatIcon} from "./ChatIcon"; -import {PlayCircleIcon} from "./PlayCircleIcon"; -import {LayoutIcon} from "./LayoutIcon"; -import {TagIcon} from "./TagIcon"; -import {UsersIcon} from "./UsersIcon"; -import {WatchersIcon} from "./WatchersIcon"; -import {BookIcon} from "./BookIcon"; -import {ChevronRightIcon} from "./ChevronRightIcon"; - -export default function App() { - return ( - alert(key)} - className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium" - itemClasses={{ - base: "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80", - }} - > - } - startContent={ - - - - } - > - Issues - - } - startContent={ - - - - } - > - Pull Requests - - } - startContent={ - - - - } - > - Discussions - - } - startContent={ - - - - } - > - Actions - - } - startContent={ - - - - } - > - Projects - - } - startContent={ - - - - } - textValue="Releases" - > -
- Releases -
- @nextui-org/react@2.0.10 -
- 49 minutes ago - Latest -
-
-
- - } - startContent={ - - - - } - > - Contributors - - } - startContent={ - - - - } - > - Watchers - - MIT} - startContent={ - - - - } - > - License - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/IconWrapper.jsx": IconWrapper, - "/ItemCounter.jsx": ItemCounter, - "/BugIcon.jsx": BugIcon, - "/PullRequestIcon.jsx": PullRequestIcon, - "/ChatIcon.jsx": ChatIcon, - "/PlayCircleIcon.jsx": PlayCircleIcon, - "/LayoutIcon.jsx": LayoutIcon, - "/TagIcon.jsx": TagIcon, - "/UsersIcon.jsx": UsersIcon, - "/WatchersIcon.jsx": WatchersIcon, - "/BookIcon.jsx": BookIcon, - "/ChevronRightIcon.jsx": ChevronRightIcon, }; export default { diff --git a/apps/docs/content/components/listbox/description.raw.jsx b/apps/docs/content/components/listbox/description.raw.jsx new file mode 100644 index 0000000000..3f68906518 --- /dev/null +++ b/apps/docs/content/components/listbox/description.raw.jsx @@ -0,0 +1,159 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/description.ts b/apps/docs/content/components/listbox/description.ts index 62a21c4465..aeb6340b6b 100644 --- a/apps/docs/content/components/listbox/description.ts +++ b/apps/docs/content/components/listbox/description.ts @@ -1,167 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/listbox/disabled-keys.raw.jsx b/apps/docs/content/components/listbox/disabled-keys.raw.jsx new file mode 100644 index 0000000000..7b76cfa74b --- /dev/null +++ b/apps/docs/content/components/listbox/disabled-keys.raw.jsx @@ -0,0 +1,26 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + return ( + + alert(key)} + > + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/disabled-keys.ts b/apps/docs/content/components/listbox/disabled-keys.ts index 09e5aec235..b179b7cb75 100644 --- a/apps/docs/content/components/listbox/disabled-keys.ts +++ b/apps/docs/content/components/listbox/disabled-keys.ts @@ -1,34 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - return ( - - alert(key)} - > - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./disabled-keys.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/dynamic.raw.jsx b/apps/docs/content/components/listbox/dynamic.raw.jsx new file mode 100644 index 0000000000..2f15512995 --- /dev/null +++ b/apps/docs/content/components/listbox/dynamic.raw.jsx @@ -0,0 +1,44 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + const items = [ + { + key: "new", + label: "New file", + }, + { + key: "copy", + label: "Copy link", + }, + { + key: "edit", + label: "Edit file", + }, + { + key: "delete", + label: "Delete file", + }, + ]; + + return ( + + alert(key)}> + {(item) => ( + + {item.label} + + )} + + + ); +} diff --git a/apps/docs/content/components/listbox/dynamic.ts b/apps/docs/content/components/listbox/dynamic.ts index c5b598c0a7..5d3c97bb9a 100644 --- a/apps/docs/content/components/listbox/dynamic.ts +++ b/apps/docs/content/components/listbox/dynamic.ts @@ -1,56 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const items = [ - { - key: "new", - label: "New file", - }, - { - key: "copy", - label: "Copy link", - }, - { - key: "edit", - label: "Edit file", - }, - { - key: "delete", - label: "Delete file", - } - ]; - - return ( - - alert(key)} - > - {(item) => ( - - {item.label} - - )} - - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/icons.raw.jsx b/apps/docs/content/components/listbox/icons.raw.jsx new file mode 100644 index 0000000000..54d3acdc43 --- /dev/null +++ b/apps/docs/content/components/listbox/icons.raw.jsx @@ -0,0 +1,149 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + }> + New file + + }> + Copy link + + } + > + Edit file + + } + > + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/icons.ts b/apps/docs/content/components/listbox/icons.ts index 1349f4e1e1..22a410c88f 100644 --- a/apps/docs/content/components/listbox/icons.ts +++ b/apps/docs/content/components/listbox/icons.ts @@ -1,163 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - } - > - Delete file - - - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/listbox/multiple-selection.raw.jsx b/apps/docs/content/components/listbox/multiple-selection.raw.jsx new file mode 100644 index 0000000000..e7c81351f9 --- /dev/null +++ b/apps/docs/content/components/listbox/multiple-selection.raw.jsx @@ -0,0 +1,35 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]); + + return ( +
+ + + Text + Number + Date + Single Date + Iteration + + +

Selected value: {selectedValue}

+
+ ); +} diff --git a/apps/docs/content/components/listbox/multiple-selection.ts b/apps/docs/content/components/listbox/multiple-selection.ts index 9bb63acdba..f03bb84fb5 100644 --- a/apps/docs/content/components/listbox/multiple-selection.ts +++ b/apps/docs/content/components/listbox/multiple-selection.ts @@ -1,46 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", "), - [selectedKeys] - ); - - return ( -
- - - Text - Number - Date - Single Date - Iteration - - -

Selected value: {selectedValue}

-
- ); -}`; +import App from "./multiple-selection.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/sections.raw.jsx b/apps/docs/content/components/listbox/sections.raw.jsx new file mode 100644 index 0000000000..5f2e1b6ecb --- /dev/null +++ b/apps/docs/content/components/listbox/sections.raw.jsx @@ -0,0 +1,162 @@ +import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => { + return ( + + ); +}; + +export const CopyDocumentIcon = (props) => { + return ( + + ); +}; + +export const EditDocumentIcon = (props) => { + return ( + + ); +}; + +export const DeleteDocumentIcon = (props) => { + return ( + + ); +}; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; + + return ( + + + + } + > + New file + + } + > + Copy link + + } + > + Edit file + + + + } + > + Delete file + + + + + ); +} diff --git a/apps/docs/content/components/listbox/sections.ts b/apps/docs/content/components/listbox/sections.ts index 7f8f204430..17cd360ea3 100644 --- a/apps/docs/content/components/listbox/sections.ts +++ b/apps/docs/content/components/listbox/sections.ts @@ -1,170 +1,7 @@ -const AddNoteIcon = `export const AddNoteIcon = (props) => ( - -);`; - -const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => ( - -);`; - -const EditDocumentIcon = `export const EditDocumentIcon = (props) => ( - -);`; - -const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => ( - -);`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {AddNoteIcon} from "./AddNoteIcon.jsx"; -import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx"; -import {EditDocumentIcon} from "./EditDocumentIcon.jsx"; -import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx"; - -export default function App() { - const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0"; - - return ( - - - - } - > - New file - - } - > - Copy link - - } - > - Edit file - - - - } - > - Delete file - - - - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/AddNoteIcon.jsx": AddNoteIcon, - "/CopyDocumentIcon.jsx": CopyDocumentIcon, - "/EditDocumentIcon.jsx": EditDocumentIcon, - "/DeleteDocumentIcon.jsx": DeleteDocumentIcon, }; export default { diff --git a/apps/docs/content/components/listbox/single-selection.raw.jsx b/apps/docs/content/components/listbox/single-selection.raw.jsx new file mode 100644 index 0000000000..86a04a4777 --- /dev/null +++ b/apps/docs/content/components/listbox/single-selection.raw.jsx @@ -0,0 +1,34 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); + + const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]); + + return ( +
+ + + Text + Number + Date + Single Date + Iteration + + +

Selected value: {selectedValue}

+
+ ); +} diff --git a/apps/docs/content/components/listbox/single-selection.ts b/apps/docs/content/components/listbox/single-selection.ts index 343f90df05..65d8454ff8 100644 --- a/apps/docs/content/components/listbox/single-selection.ts +++ b/apps/docs/content/components/listbox/single-selection.ts @@ -1,46 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"])); - - const selectedValue = React.useMemo( - () => Array.from(selectedKeys).join(", "), - [selectedKeys] - ); - - return ( -
- - - Text - Number - Date - Single Date - Iteration - - -

Selected value: {selectedValue}

-
- ); -}`; +import App from "./single-selection.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/top-content.raw.jsx b/apps/docs/content/components/listbox/top-content.raw.jsx new file mode 100644 index 0000000000..3e652b8ef2 --- /dev/null +++ b/apps/docs/content/components/listbox/top-content.raw.jsx @@ -0,0 +1,264 @@ +import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + const [values, setValues] = React.useState(new Set(["1"])); + + const arrayValues = Array.from(values); + + const topContent = React.useMemo(() => { + if (!arrayValues.length) { + return null; + } + + return ( + + {arrayValues.map((value) => ( + {users.find((user) => `${user.id}` === `${value}`).name} + ))} + + ); + }, [arrayValues.length]); + + return ( + + + {(item) => ( + +
+ +
+ {item.name} + {item.email} +
+
+ + )} + + + ); +} diff --git a/apps/docs/content/components/listbox/top-content.raw.tsx b/apps/docs/content/components/listbox/top-content.raw.tsx new file mode 100644 index 0000000000..284462f73a --- /dev/null +++ b/apps/docs/content/components/listbox/top-content.raw.tsx @@ -0,0 +1,267 @@ +import type {Selection} from "@react-types/shared"; + +import React from "react"; +import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export const ListboxWrapper = ({children}: {children: React.ReactNode}) => ( +
+ {children} +
+); + +export default function App() { + const [values, setValues] = React.useState(new Set(["1"])); + + const arrayValues = Array.from(values); + + const topContent = React.useMemo(() => { + if (!arrayValues.length) { + return null; + } + + return ( + + {arrayValues.map((value) => ( + {users.find((user) => `${user.id}` === `${value}`)?.name} + ))} + + ); + }, [arrayValues.length]); + + return ( + + + {(item) => ( + +
+ +
+ {item.name} + {item.email} +
+
+ + )} + + + ); +} diff --git a/apps/docs/content/components/listbox/top-content.ts b/apps/docs/content/components/listbox/top-content.ts index fac030443d..c9f1db104d 100644 --- a/apps/docs/content/components/listbox/top-content.ts +++ b/apps/docs/content/components/listbox/top-content.ts @@ -1,344 +1,12 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const ListboxWrapperTs = `export const ListboxWrapper = ({children}: { children: React.ReactNode }) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {users} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["1"])); - - const arrayValues = Array.from(values); - - const topContent = React.useMemo(() => { - if (!arrayValues.length) { - return null; - } - - return ( - - {arrayValues.map((value) => ( - {users.find((user) => \`\${user.id}\` === \`\${value}\`).name} - ))} - - ); - }, [arrayValues.length]); - - return ( - - - {(item) => ( - -
- -
- {item.name} - {item.email} -
-
- - )} - - - ); -}`; - -const AppTs = `import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar, Selection} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; -import {users} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["1"])); - - const arrayValues = Array.from(values); - - const topContent = React.useMemo(() => { - if (!arrayValues.length) { - return null; - } - - return ( - - {arrayValues.map((value) => ( - {users.find((user) => \`\${user.id}\` === \`\${value}\`).name} - ))} - - ); - }, [arrayValues.length]); - - return ( - - - {(item) => ( - -
- -
- {item.name} - {item.email} -
-
- - )} - - - ); -}`; +import App from "./top-content.raw.jsx?raw"; +import AppTs from "./top-content.raw.tsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/ListboxWrapper.tsx": ListboxWrapperTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/listbox/usage.raw.jsx b/apps/docs/content/components/listbox/usage.raw.jsx new file mode 100644 index 0000000000..2726c45d8f --- /dev/null +++ b/apps/docs/content/components/listbox/usage.raw.jsx @@ -0,0 +1,22 @@ +import {Listbox, ListboxItem} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + return ( + + alert(key)}> + New file + Copy link + Edit file + + Delete file + + + + ); +} diff --git a/apps/docs/content/components/listbox/usage.ts b/apps/docs/content/components/listbox/usage.ts index 53bf3488a9..1118304c37 100644 --- a/apps/docs/content/components/listbox/usage.ts +++ b/apps/docs/content/components/listbox/usage.ts @@ -1,33 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - return ( - - alert(key)} - > - New file - Copy link - Edit file - - Delete file - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/listbox/variants.raw.jsx b/apps/docs/content/components/listbox/variants.raw.jsx new file mode 100644 index 0000000000..17fef96b5b --- /dev/null +++ b/apps/docs/content/components/listbox/variants.raw.jsx @@ -0,0 +1,58 @@ +import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react"; + +export const ListboxWrapper = ({children}) => ( +
+ {children} +
+); + +export default function App() { + const [selectedVariant, setSelectedVariant] = React.useState("solid"); + const [selectedColor, setSelectedColor] = React.useState("default"); + + const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ + + New file + Copy link + Edit file + + Delete file + + + +
+ + {variants.map((variant) => ( + + {variant} + + ))} + + + {colors.map((color) => ( + + {color} + + ))} + +
+
+ ); +} diff --git a/apps/docs/content/components/listbox/variants.ts b/apps/docs/content/components/listbox/variants.ts index 99a566944f..ddea95fb2e 100644 --- a/apps/docs/content/components/listbox/variants.ts +++ b/apps/docs/content/components/listbox/variants.ts @@ -1,70 +1,7 @@ -const ListboxWrapper = `export const ListboxWrapper = ({children}) => ( -
- {children} -
-);`; - -const App = `import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react"; -import {ListboxWrapper} from "./ListboxWrapper"; - -export default function App() { - const [selectedVariant, setSelectedVariant] = React.useState("solid") - const [selectedColor, setSelectedColor] = React.useState("default") - - const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"]; - const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - - return ( -
- - - New file - Copy link - Edit file - - Delete file - - - -
- - {variants.map((variant) => ( - - {variant} - - ))} - - - {colors.map((color) => ( - - {color} - - ))} - -
-
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ListboxWrapper.jsx": ListboxWrapper, }; export default { diff --git a/apps/docs/content/components/modal/backdrop.raw.jsx b/apps/docs/content/components/modal/backdrop.raw.jsx new file mode 100644 index 0000000000..70beec0096 --- /dev/null +++ b/apps/docs/content/components/modal/backdrop.raw.jsx @@ -0,0 +1,75 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onClose} = useDisclosure(); + const [backdrop, setBackdrop] = React.useState("opaque"); + + const backdrops = ["opaque", "blur", "transparent"]; + + const handleOpen = (backdrop) => { + setBackdrop(backdrop); + onOpen(); + }; + + return ( + <> +
+ {backdrops.map((b) => ( + + ))} +
+ + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/backdrop.ts b/apps/docs/content/components/modal/backdrop.ts index b12764e892..53412b0f5b 100644 --- a/apps/docs/content/components/modal/backdrop.ts +++ b/apps/docs/content/components/modal/backdrop.ts @@ -1,70 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onClose} = useDisclosure(); - const [backdrop, setBackdrop] = React.useState('opaque') - - const backdrops = ["opaque", "blur", "transparent"]; - - const handleOpen = (backdrop) => { - setBackdrop(backdrop) - onOpen(); - } - - return ( - <> -
- {backdrops.map((b) => ( - - ))} -
- - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

- - - - - - - )} - - - - ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/custom-backdrop.raw.jsx b/apps/docs/content/components/modal/custom-backdrop.raw.jsx new file mode 100644 index 0000000000..f4d0d35987 --- /dev/null +++ b/apps/docs/content/components/modal/custom-backdrop.raw.jsx @@ -0,0 +1,62 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/custom-backdrop.ts b/apps/docs/content/components/modal/custom-backdrop.ts index f66cceaaf2..b1364484c4 100644 --- a/apps/docs/content/components/modal/custom-backdrop.ts +++ b/apps/docs/content/components/modal/custom-backdrop.ts @@ -1,57 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

- - - - - - - )} - - - - ); -}`; +import App from "./custom-backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/custom-motion.raw.jsx b/apps/docs/content/components/modal/custom-motion.raw.jsx new file mode 100644 index 0000000000..a7ed2dd4a8 --- /dev/null +++ b/apps/docs/content/components/modal/custom-motion.raw.jsx @@ -0,0 +1,79 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/custom-motion.ts b/apps/docs/content/components/modal/custom-motion.ts index e57792729e..389f462ddd 100644 --- a/apps/docs/content/components/modal/custom-motion.ts +++ b/apps/docs/content/components/modal/custom-motion.ts @@ -1,74 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

- - - - - - - )} - - - - ); -}`; +import App from "./custom-motion.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/custom-styles.raw.jsx b/apps/docs/content/components/modal/custom-styles.raw.jsx new file mode 100644 index 0000000000..d58f5885f4 --- /dev/null +++ b/apps/docs/content/components/modal/custom-styles.raw.jsx @@ -0,0 +1,70 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/custom-styles.ts b/apps/docs/content/components/modal/custom-styles.ts index b2aca285d2..da3ea9093a 100644 --- a/apps/docs/content/components/modal/custom-styles.ts +++ b/apps/docs/content/components/modal/custom-styles.ts @@ -1,63 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

- - - - - - - )} - - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/draggable-overflow.raw.jsx b/apps/docs/content/components/modal/draggable-overflow.raw.jsx new file mode 100644 index 0000000000..dc428323b0 --- /dev/null +++ b/apps/docs/content/components/modal/draggable-overflow.raw.jsx @@ -0,0 +1,48 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + useDraggable, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const targetRef = React.useRef(null); + const {moveProps} = useDraggable({targetRef, canOverflow: true}); + + return ( + <> + + + + {(onClose) => ( + <> + + Modal Title + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/draggable-overflow.ts b/apps/docs/content/components/modal/draggable-overflow.ts index da7a442fda..86fe16fec6 100644 --- a/apps/docs/content/components/modal/draggable-overflow.ts +++ b/apps/docs/content/components/modal/draggable-overflow.ts @@ -1,40 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, useDraggable} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const targetRef = React.useRef(null); - const {moveProps} = useDraggable({targetRef, canOverflow: true}); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

- - - - - - - )} - - - - ); -}`; +import App from "./draggable-overflow.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/draggable.raw.jsx b/apps/docs/content/components/modal/draggable.raw.jsx new file mode 100644 index 0000000000..4cd170dfef --- /dev/null +++ b/apps/docs/content/components/modal/draggable.raw.jsx @@ -0,0 +1,48 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + useDraggable, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const targetRef = React.useRef(null); + const {moveProps} = useDraggable({targetRef}); + + return ( + <> + + + + {(onClose) => ( + <> + + Modal Title + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/draggable.ts b/apps/docs/content/components/modal/draggable.ts index a2dada19a7..276b37d2be 100644 --- a/apps/docs/content/components/modal/draggable.ts +++ b/apps/docs/content/components/modal/draggable.ts @@ -1,40 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, useDraggable} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const targetRef = React.useRef(null); - const {moveProps} = useDraggable({ targetRef }); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

- - - - - - - )} - - - - ); -}`; +import App from "./draggable.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/form.raw.jsx b/apps/docs/content/components/modal/form.raw.jsx new file mode 100644 index 0000000000..07529d78a2 --- /dev/null +++ b/apps/docs/content/components/modal/form.raw.jsx @@ -0,0 +1,116 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + Checkbox, + Input, + Link, +} from "@nextui-org/react"; + +export const MailIcon = (props) => { + return ( + + ); +}; + +export const LockIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Log in + + + } + label="Email" + placeholder="Enter your email" + variant="bordered" + /> + + } + label="Password" + placeholder="Enter your password" + type="password" + variant="bordered" + /> +
+ + Remember me + + + Forgot password? + +
+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/form.ts b/apps/docs/content/components/modal/form.ts index 576d5657e2..c9bad48bd2 100644 --- a/apps/docs/content/components/modal/form.ts +++ b/apps/docs/content/components/modal/form.ts @@ -1,115 +1,7 @@ -const MailIcon = `export const MailIcon = (props) => ( - -); -`; - -const LockIcon = `export const LockIcon = (props) => ( - -);`; - -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, Checkbox, Input, Link} from "@nextui-org/react"; -import {MailIcon} from './MailIcon.jsx'; -import {LockIcon} from './LockIcon.jsx'; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Log in - - - } - label="Email" - placeholder="Enter your email" - variant="bordered" - /> - - } - label="Password" - placeholder="Enter your password" - type="password" - variant="bordered" - /> -
- - Remember me - - - Forgot password? - -
- - - - - - - )} - - - - ); -}`; +import App from "./form.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MailIcon.jsx": MailIcon, - "/LockIcon.jsx": LockIcon, }; export default { diff --git a/apps/docs/content/components/modal/non-dismissable.raw.jsx b/apps/docs/content/components/modal/non-dismissable.raw.jsx new file mode 100644 index 0000000000..64d29b31da --- /dev/null +++ b/apps/docs/content/components/modal/non-dismissable.raw.jsx @@ -0,0 +1,60 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/non-dismissable.ts b/apps/docs/content/components/modal/non-dismissable.ts index 5e84335ca8..a1281cb23a 100644 --- a/apps/docs/content/components/modal/non-dismissable.ts +++ b/apps/docs/content/components/modal/non-dismissable.ts @@ -1,50 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

- - - - - - - )} - - - - ); -}`; +import App from "./non-dismissable.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/overflow.raw.jsx b/apps/docs/content/components/modal/overflow.raw.jsx new file mode 100644 index 0000000000..69ff91e9c1 --- /dev/null +++ b/apps/docs/content/components/modal/overflow.raw.jsx @@ -0,0 +1,112 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = React.useState("inside"); + + return ( +
+ + + inside + outside + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit + dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis + sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod + et. Culpa deserunt nostrud ad veniam. +

+

+ Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

+ + + + + + + )} + + +
+ ); +} diff --git a/apps/docs/content/components/modal/overflow.raw.tsx b/apps/docs/content/components/modal/overflow.raw.tsx new file mode 100644 index 0000000000..a3ff752be8 --- /dev/null +++ b/apps/docs/content/components/modal/overflow.raw.tsx @@ -0,0 +1,114 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + ModalProps, + Button, + useDisclosure, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = + React.useState < ModalProps["scrollBehavior"] > "inside"; + + return ( +
+ + + inside + outside + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit + dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis + sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod + et. Culpa deserunt nostrud ad veniam. +

+

+ Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

+ + + + + + + )} + + +
+ ); +} diff --git a/apps/docs/content/components/modal/overflow.ts b/apps/docs/content/components/modal/overflow.ts index d9d3ba869f..5276c45e73 100644 --- a/apps/docs/content/components/modal/overflow.ts +++ b/apps/docs/content/components/modal/overflow.ts @@ -1,244 +1,5 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [scrollBehavior, setScrollBehavior] = React.useState("inside"); - - return ( -
- - - inside - outside - - - - {(onClose) => ( - <> - - Modal Title - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

- - - - - - - )} - - -
- ); -}`; - -const AppTs = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalProps, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [scrollBehavior, setScrollBehavior] = React.useState("inside"); - - return ( -
- - - inside - outside - - - - {(onClose) => ( - <> - - Modal Title - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. - Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat - consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex - incididunt cillum quis. Velit duis sit officia eiusmod Lorem - aliqua enim laboris do dolor eiusmod. Et mollit incididunt - nisi consectetur esse laborum eiusmod pariatur proident Lorem - eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit - duis sit officia eiusmod Lorem aliqua enim laboris do dolor - eiusmod. Et mollit incididunt nisi consectetur esse laborum - eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt - nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Nullam pulvinar risus non risus hendrerit - venenatis. Pellentesque sit amet hendrerit risus, sed - porttitor quam. Magna exercitation reprehenderit magna aute - tempor cupidatat consequat elit dolor adipisicing. Mollit - dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit - officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et - mollit incididunt nisi consectetur esse laborum eiusmod - pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad - veniam. -

- - - - - - - )} - - -
- ); -}`; +import App from "./overflow.raw.jsx?raw"; +import AppTs from "./overflow.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/placement.raw.jsx b/apps/docs/content/components/modal/placement.raw.jsx new file mode 100644 index 0000000000..a3ff752be8 --- /dev/null +++ b/apps/docs/content/components/modal/placement.raw.jsx @@ -0,0 +1,114 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + ModalProps, + Button, + useDisclosure, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + const [scrollBehavior, setScrollBehavior] = + React.useState < ModalProps["scrollBehavior"] > "inside"; + + return ( +
+ + + inside + outside + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit + dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis + sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod + et. Culpa deserunt nostrud ad veniam. +

+

+ Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia + eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi + consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet + hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute + tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex + incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris + do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod + pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. +

+ + + + + + + )} + + +
+ ); +} diff --git a/apps/docs/content/components/modal/placement.ts b/apps/docs/content/components/modal/placement.ts index 626f888ee9..eee2244366 100644 --- a/apps/docs/content/components/modal/placement.ts +++ b/apps/docs/content/components/modal/placement.ts @@ -1,61 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - const [modalPlacement, setModalPlacement] = React.useState("auto"); - - return ( -
- - - auto - top - bottom - center - top-center - bottom-center - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

- - - - - - - )} - - -
- ); -}`; +import App from "./placement.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/sizes.raw.jsx b/apps/docs/content/components/modal/sizes.raw.jsx new file mode 100644 index 0000000000..44857c1481 --- /dev/null +++ b/apps/docs/content/components/modal/sizes.raw.jsx @@ -0,0 +1,67 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onClose} = useDisclosure(); + const [size, setSize] = React.useState("md"); + + const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; + + const handleOpen = (size) => { + setSize(size); + onOpen(); + }; + + return ( + <> +
+ {sizes.map((size) => ( + + ))} +
+ + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/sizes.ts b/apps/docs/content/components/modal/sizes.ts index 53347ff38f..85a2f5b30b 100644 --- a/apps/docs/content/components/modal/sizes.ts +++ b/apps/docs/content/components/modal/sizes.ts @@ -1,65 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onClose} = useDisclosure(); - const [size, setSize] = React.useState('md') - - const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"]; - - - const handleOpen = (size) => { - setSize(size) - onOpen(); - } - - return ( - <> -
- {sizes.map((size) => ( - - ))} -
- - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. -

- - - - - - - )} - - - - ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/modal/usage.raw.jsx b/apps/docs/content/components/modal/usage.raw.jsx new file mode 100644 index 0000000000..8c6bab9c69 --- /dev/null +++ b/apps/docs/content/components/modal/usage.raw.jsx @@ -0,0 +1,55 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + Button, + useDisclosure, +} from "@nextui-org/react"; + +export default function App() { + const {isOpen, onOpen, onOpenChange} = useDisclosure(); + + return ( + <> + + + + {(onClose) => ( + <> + Modal Title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non + risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor + quam. +

+

+ Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor + adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit + officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt + nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+ + + + + + + )} + + + + ); +} diff --git a/apps/docs/content/components/modal/usage.ts b/apps/docs/content/components/modal/usage.ts index e0199aac0a..1118304c37 100644 --- a/apps/docs/content/components/modal/usage.ts +++ b/apps/docs/content/components/modal/usage.ts @@ -1,50 +1,4 @@ -const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react"; - -export default function App() { - const {isOpen, onOpen, onOpenChange} = useDisclosure(); - - return ( - <> - - - - {(onClose) => ( - <> - Modal Title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Nullam pulvinar risus non risus hendrerit venenatis. - Pellentesque sit amet hendrerit risus, sed porttitor quam. -

-

- Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit - dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. - Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. - Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur - proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

- - - - - - - )} - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/navbar/bordered.raw.jsx b/apps/docs/content/components/navbar/bordered.raw.jsx new file mode 100644 index 0000000000..0d9f45e996 --- /dev/null +++ b/apps/docs/content/components/navbar/bordered.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/bordered.ts b/apps/docs/content/components/navbar/bordered.ts index 131a1d1c4f..4e025375c3 100644 --- a/apps/docs/content/components/navbar/bordered.ts +++ b/apps/docs/content/components/navbar/bordered.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./bordered.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/controlled-menu.raw.jsx b/apps/docs/content/components/navbar/controlled-menu.raw.jsx new file mode 100644 index 0000000000..129004d662 --- /dev/null +++ b/apps/docs/content/components/navbar/controlled-menu.raw.jsx @@ -0,0 +1,106 @@ +import { + Navbar, + NavbarBrand, + NavbarMenuToggle, + NavbarMenuItem, + NavbarMenu, + NavbarContent, + NavbarItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

ACME

+ + + + + + +

ACME

+ + + + Features + + + + + Customers + + + + + Integrations + + + + + + + Login + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +} diff --git a/apps/docs/content/components/navbar/controlled-menu.ts b/apps/docs/content/components/navbar/controlled-menu.ts index bac2a98e55..40facd8ed4 100644 --- a/apps/docs/content/components/navbar/controlled-menu.ts +++ b/apps/docs/content/components/navbar/controlled-menu.ts @@ -1,106 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - - - - -

ACME

- - - - - - -

ACME

- - - - Features - - - - - Customers - - - - - Integrations - - - - - - - Login - - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - - - ); -}`; +import App from "./controlled-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/custom-active-item.raw.jsx b/apps/docs/content/components/navbar/custom-active-item.raw.jsx new file mode 100644 index 0000000000..b2f1617098 --- /dev/null +++ b/apps/docs/content/components/navbar/custom-active-item.raw.jsx @@ -0,0 +1,69 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/custom-active-item.ts b/apps/docs/content/components/navbar/custom-active-item.ts index a564688395..f62f66c256 100644 --- a/apps/docs/content/components/navbar/custom-active-item.ts +++ b/apps/docs/content/components/navbar/custom-active-item.ts @@ -1,75 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./custom-active-item.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx new file mode 100644 index 0000000000..858e009612 --- /dev/null +++ b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx @@ -0,0 +1,104 @@ +import { + Navbar, + NavbarBrand, + NavbarMenuToggle, + NavbarMenu, + NavbarMenuItem, + NavbarContent, + NavbarItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

ACME

+ + + + + + +

ACME

+ + + + Features + + + + + Customers + + + + + Integrations + + + + + + + Login + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +} diff --git a/apps/docs/content/components/navbar/disable-menu-animation.ts b/apps/docs/content/components/navbar/disable-menu-animation.ts index a0e0382579..a485b0530f 100644 --- a/apps/docs/content/components/navbar/disable-menu-animation.ts +++ b/apps/docs/content/components/navbar/disable-menu-animation.ts @@ -1,100 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - - - - -

ACME

- - - - - - -

ACME

- - - - Features - - - - - Customers - - - - - Integrations - - - - - - - Login - - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - - - ); -}`; +import App from "./disable-menu-animation.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/disabled-blur.raw.jsx b/apps/docs/content/components/navbar/disabled-blur.raw.jsx new file mode 100644 index 0000000000..c725d9db9b --- /dev/null +++ b/apps/docs/content/components/navbar/disabled-blur.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/disabled-blur.ts b/apps/docs/content/components/navbar/disabled-blur.ts index 8f9b04eb19..b3b7865113 100644 --- a/apps/docs/content/components/navbar/disabled-blur.ts +++ b/apps/docs/content/components/navbar/disabled-blur.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./disabled-blur.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx new file mode 100644 index 0000000000..3e76a1088b --- /dev/null +++ b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/hide-on-scroll.ts b/apps/docs/content/components/navbar/hide-on-scroll.ts index 4f2372e15e..a160f6edf7 100644 --- a/apps/docs/content/components/navbar/hide-on-scroll.ts +++ b/apps/docs/content/components/navbar/hide-on-scroll.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./hide-on-scroll.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/static.raw.jsx b/apps/docs/content/components/navbar/static.raw.jsx new file mode 100644 index 0000000000..27eec0adb0 --- /dev/null +++ b/apps/docs/content/components/navbar/static.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/static.ts b/apps/docs/content/components/navbar/static.ts index 59177f7de5..1b7a00893d 100644 --- a/apps/docs/content/components/navbar/static.ts +++ b/apps/docs/content/components/navbar/static.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./static.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/usage.raw.jsx b/apps/docs/content/components/navbar/usage.raw.jsx new file mode 100644 index 0000000000..1ec1d37c9b --- /dev/null +++ b/apps/docs/content/components/navbar/usage.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/usage.ts b/apps/docs/content/components/navbar/usage.ts index c651a56f7e..1118304c37 100644 --- a/apps/docs/content/components/navbar/usage.ts +++ b/apps/docs/content/components/navbar/usage.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-avatar.raw.jsx b/apps/docs/content/components/navbar/with-avatar.raw.jsx new file mode 100644 index 0000000000..ce2386a05c --- /dev/null +++ b/apps/docs/content/components/navbar/with-avatar.raw.jsx @@ -0,0 +1,85 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, + Avatar, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + + Features + + + + + Customers + + + + + Integrations + + + + + + + + + + + +

Signed in as

+

zoey@example.com

+ + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/with-avatar.ts b/apps/docs/content/components/navbar/with-avatar.ts index c5e11c58cd..17d3676daf 100644 --- a/apps/docs/content/components/navbar/with-avatar.ts +++ b/apps/docs/content/components/navbar/with-avatar.ts @@ -1,80 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - - Features - - - - - Customers - - - - - Integrations - - - - - - - - - - - -

Signed in as

-

zoey@example.com

- - My Settings - Team Settings - Analytics - System - Configurations - Help & Feedback - - Log Out - - - - - - ); -}`; +import App from "./with-avatar.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx new file mode 100644 index 0000000000..8b0f82f756 --- /dev/null +++ b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx @@ -0,0 +1,320 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + Button, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export const ChevronDown = ({fill, size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const Lock = ({fill, size, height, width, ...props}) => { + const color = fill; + + return ( + + + + + + + + ); +}; + +export const Activity = ({fill, size, height, width, ...props}) => { + return ( + + + + + + + + ); +}; + +export const Flash = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const Server = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const TagUser = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + ); +}; + +export const Scale = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + ); +}; + +export default function App() { + const icons = { + chevron: , + scale: , + lock: , + activity: , + flash: , + server: , + user: , + }; + + return ( + + + +

ACME

+ + + + + + + + + + + Autoscaling + + + Usage Metrics + + + Production Ready + + + +99% Uptime + + + +Supreme Support + + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.ts b/apps/docs/content/components/navbar/with-dropdown-menu.ts index 61b4a6a4fa..e5badd5a96 100644 --- a/apps/docs/content/components/navbar/with-dropdown-menu.ts +++ b/apps/docs/content/components/navbar/with-dropdown-menu.ts @@ -1,342 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const Icons = `export const ChevronDown = ({fill, size, height, width, ...props}) => { - return ( - - - - ); -}; - -export const Lock = ({fill, size, height, width, ...props}) => { - const color = fill; - - return ( - - - - - - - - ); -}; - -export const Activity = ({fill, size, height, width, ...props}) => { - return ( - - - - - - - - ); -}; - -export const Flash = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - ); -}; - -export const Server = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - ); -}; - -export const TagUser = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - - ); -}; - - -export const Scale = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - - ); -};`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu} from "@nextui-org/react"; -import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "./Icons.jsx"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const icons = { - chevron: , - scale: , - lock: , - activity: , - flash: , - server: , - user: , - }; - - return ( - - - -

ACME

- - - - - - - - - - - Autoscaling - - - Usage Metrics - - - Production Ready - - - +99% Uptime - - - +Supreme Support - - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./with-dropdown-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, - "/Icons.jsx": Icons, }; export default { diff --git a/apps/docs/content/components/navbar/with-menu.raw.jsx b/apps/docs/content/components/navbar/with-menu.raw.jsx new file mode 100644 index 0000000000..78320c99d5 --- /dev/null +++ b/apps/docs/content/components/navbar/with-menu.raw.jsx @@ -0,0 +1,100 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + NavbarMenuToggle, + NavbarMenu, + NavbarMenuItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + +

ACME

+ + + + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +} diff --git a/apps/docs/content/components/navbar/with-menu.ts b/apps/docs/content/components/navbar/with-menu.ts index 7762007966..be734be3c5 100644 --- a/apps/docs/content/components/navbar/with-menu.ts +++ b/apps/docs/content/components/navbar/with-menu.ts @@ -1,96 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - -

ACME

- - - - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - - - ); -}`; +import App from "./with-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-search-input.raw.jsx b/apps/docs/content/components/navbar/with-search-input.raw.jsx new file mode 100644 index 0000000000..300f80cb51 --- /dev/null +++ b/apps/docs/content/components/navbar/with-search-input.raw.jsx @@ -0,0 +1,130 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + Input, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, + Avatar, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => { + return ( + + ); +}; + +export default function App() { + return ( + + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + + } + type="search" + /> + + + + + + +

Signed in as

+

zoey@example.com

+ + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/with-search-input.ts b/apps/docs/content/components/navbar/with-search-input.ts index 871710ca62..88fc86bd2b 100644 --- a/apps/docs/content/components/navbar/with-search-input.ts +++ b/apps/docs/content/components/navbar/with-search-input.ts @@ -1,130 +1,7 @@ -const SearchIcon = `export const SearchIcon = ({ - size = 24, - strokeWidth = 1.5, - width, - height, - ...props -}) => ( - -); -`; - -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Input, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; -import {SearchIcon} from "./SearchIcon.jsx"; - -export default function App() { - return ( - - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - - } - type="search" - /> - - - - - - -

Signed in as

-

zoey@example.com

- - My Settings - Team Settings - Analytics - System - Configurations - Help & Feedback - - Log Out - - - - - - ); -}`; +import App from "./with-search-input.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, - "/SearchIcon.jsx": SearchIcon, }; export default { diff --git a/apps/docs/content/components/pagination/boundaries.raw.jsx b/apps/docs/content/components/pagination/boundaries.raw.jsx new file mode 100644 index 0000000000..7c6e436708 --- /dev/null +++ b/apps/docs/content/components/pagination/boundaries.raw.jsx @@ -0,0 +1,14 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ( +
+

1 Boundary (default)

+ +

2 Boundaries

+ +

3 Boundaries

+ +
+ ); +} diff --git a/apps/docs/content/components/pagination/boundaries.ts b/apps/docs/content/components/pagination/boundaries.ts index 56b1ffe9ef..e3b0fe3955 100644 --- a/apps/docs/content/components/pagination/boundaries.ts +++ b/apps/docs/content/components/pagination/boundaries.ts @@ -1,28 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
-

1 Boundary (default)

- -

2 Boundaries

- -

3 Boundaries

- -
- ); -}`; +import App from "./boundaries.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/colors.raw.jsx b/apps/docs/content/components/pagination/colors.raw.jsx new file mode 100644 index 0000000000..bf5afca8cd --- /dev/null +++ b/apps/docs/content/components/pagination/colors.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const colors = ["primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/pagination/colors.ts b/apps/docs/content/components/pagination/colors.ts index d2988d221a..d5bef810aa 100644 --- a/apps/docs/content/components/pagination/colors.ts +++ b/apps/docs/content/components/pagination/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - - const colors = ["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/pagination/compact.raw.jsx b/apps/docs/content/components/pagination/compact.raw.jsx new file mode 100644 index 0000000000..c0419e978f --- /dev/null +++ b/apps/docs/content/components/pagination/compact.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/compact.ts b/apps/docs/content/components/pagination/compact.ts index dff50103bf..c3cdfc316e 100644 --- a/apps/docs/content/components/pagination/compact.ts +++ b/apps/docs/content/components/pagination/compact.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./compact.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/controlled.raw.jsx b/apps/docs/content/components/pagination/controlled.raw.jsx new file mode 100644 index 0000000000..6580d3b7fc --- /dev/null +++ b/apps/docs/content/components/pagination/controlled.raw.jsx @@ -0,0 +1,30 @@ +import {Pagination, Button} from "@nextui-org/react"; + +export default function App() { + const [currentPage, setCurrentPage] = React.useState(1); + + return ( +
+

Selected Page: {currentPage}

+ +
+ + +
+
+ ); +} diff --git a/apps/docs/content/components/pagination/controlled.ts b/apps/docs/content/components/pagination/controlled.ts index 6b3c4d7c45..2c3f0cacb4 100644 --- a/apps/docs/content/components/pagination/controlled.ts +++ b/apps/docs/content/components/pagination/controlled.ts @@ -1,38 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - const [currentPage, setCurrentPage] = React.useState(1); - - return ( -
-

Selected Page: {currentPage}

- -
- - -
-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/controls.raw.jsx b/apps/docs/content/components/pagination/controls.raw.jsx new file mode 100644 index 0000000000..8b5909bba0 --- /dev/null +++ b/apps/docs/content/components/pagination/controls.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/controls.ts b/apps/docs/content/components/pagination/controls.ts index f8db1c1658..74b3403042 100644 --- a/apps/docs/content/components/pagination/controls.ts +++ b/apps/docs/content/components/pagination/controls.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./controls.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/custom-impl.raw.jsx b/apps/docs/content/components/pagination/custom-impl.raw.jsx new file mode 100644 index 0000000000..aa3dedd161 --- /dev/null +++ b/apps/docs/content/components/pagination/custom-impl.raw.jsx @@ -0,0 +1,82 @@ +import {usePagination, PaginationItemType} from "@nextui-org/react"; + +export const ChevronIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const {activePage, range, setPage, onNext, onPrevious} = usePagination({ + total: 6, + showControls: true, + siblings: 10, + boundaries: 10, + }); + + return ( +
+

Active page: {activePage}

+
    + {range.map((page) => { + if (page === PaginationItemType.NEXT) { + return ( +
  • + +
    • + ); + } + + if (page === PaginationItemType.PREV) { + return ( +
  • + +
    • + ); + } + + if (page === PaginationItemType.DOTS) { + return ( +
  • + ... +
    • + ); + } + + return ( +
  • +
    • + ); + })} +
+
+ ); +} diff --git a/apps/docs/content/components/pagination/custom-impl.ts b/apps/docs/content/components/pagination/custom-impl.ts index 72da8c7611..ab37512cec 100644 --- a/apps/docs/content/components/pagination/custom-impl.ts +++ b/apps/docs/content/components/pagination/custom-impl.ts @@ -1,95 +1,7 @@ -const ChevronIcon = `export const ChevronIcon = (props) => ( - -); -`; - -const App = `import {usePagination, PaginationItemType} from "@nextui-org/react"; -import {ChevronIcon} from "./ChevronIcon"; - -export default function App() { - const {activePage, range, setPage, onNext, onPrevious} = usePagination({ - total: 6, - showControls: true, - siblings: 10, - boundaries: 10, - }); - - return ( -
-

Active page: {activePage}

-
    - {range.map((page) => { - if (page === PaginationItemType.NEXT) { - return ( -
  • - -
    • - ); - } - - if (page === PaginationItemType.PREV) { - return ( -
  • - -
    • - ); - } - - if (page === PaginationItemType.DOTS) { - return ( -
  • - ... -
    • - ); - } - - return ( -
  • -
    • - ); - })} -
-
- ); -}`; +import App from "./custom-impl.raw.jsx?raw"; const react = { "/App.jsx": App, - "/ChevronIcon.jsx": ChevronIcon, }; export default { diff --git a/apps/docs/content/components/pagination/custom-items.raw.jsx b/apps/docs/content/components/pagination/custom-items.raw.jsx new file mode 100644 index 0000000000..d691f8eed1 --- /dev/null +++ b/apps/docs/content/components/pagination/custom-items.raw.jsx @@ -0,0 +1,88 @@ +import {Pagination, PaginationItemType} from "@nextui-org/react"; + +export const ChevronIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const renderItem = ({ref, key, value, isActive, onNext, onPrevious, setPage, className}) => { + if (value === PaginationItemType.NEXT) { + return ( + + ); + } + + if (value === PaginationItemType.PREV) { + return ( + + ); + } + + if (value === PaginationItemType.DOTS) { + return ( + + ); + } + + // cursor is the default item + return ( + + ); + }; + + return ( + + ); +} diff --git a/apps/docs/content/components/pagination/custom-items.raw.tsx b/apps/docs/content/components/pagination/custom-items.raw.tsx new file mode 100644 index 0000000000..9756766c9e --- /dev/null +++ b/apps/docs/content/components/pagination/custom-items.raw.tsx @@ -0,0 +1,100 @@ +import React, {SVGProps} from "react"; +import {cn, Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react"; + +type IconSvgProps = SVGProps; + +export const ChevronIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export default function App() { + const renderItem = ({ + ref, + key, + value, + isActive, + onNext, + onPrevious, + setPage, + className, + }: PaginationItemRenderProps) => { + if (value === PaginationItemType.NEXT) { + return ( + + ); + } + + if (value === PaginationItemType.PREV) { + return ( + + ); + } + + if (value === PaginationItemType.DOTS) { + return ( + + ); + } + + // cursor is the default item + return ( + + ); + }; + + return ( + + ); +} diff --git a/apps/docs/content/components/pagination/custom-items.ts b/apps/docs/content/components/pagination/custom-items.ts index 3e94ff8c6b..708622f442 100644 --- a/apps/docs/content/components/pagination/custom-items.ts +++ b/apps/docs/content/components/pagination/custom-items.ts @@ -1,189 +1,12 @@ -const ChevronIcon = `export const ChevronIcon = (props) => ( - -); -`; - -const ChevronIconTs = `import {SVGProps} from "react"; - -type IconSvgProps = SVGProps; - -export const ChevronIcon = (props: IconSvgProps) => ( - -); -`; - -const AppTs = `import {Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react"; -import {ChevronIcon} from "./ChevronIcon"; - -export default function App() { - const renderItem = ({ - ref, - key, - value, - isActive, - onNext, - onPrevious, - setPage, - className, - }: PaginationItemRenderProps) => { - if (value === PaginationItemType.NEXT) { - return ( - - ); - } - - if (value === PaginationItemType.PREV) { - return ( - - ); - } - - if (value === PaginationItemType.DOTS) { - return ; - } - - // cursor is the default item - return ( - - ); - }; - - return ( - - ); -}`; - -const App = `import {Pagination, PaginationItemType} from "@nextui-org/react"; -import {ChevronIcon} from "./ChevronIcon"; - -export default function App() { - const renderItem = ({ - ref, - key, - value, - isActive, - onNext, - onPrevious, - setPage, - className, - }) => { - if (value === PaginationItemType.NEXT) { - return ( - - ); - } - - if (value === PaginationItemType.PREV) { - return ( - - ); - } - - if (value === PaginationItemType.DOTS) { - return ; - } - - // cursor is the default item - return ( - - ); - }; - - return ( - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; +import AppTs from "./custom-items.raw.tsx?raw"; const react = { "/App.jsx": App, - "/ChevronIcon.jsx": ChevronIcon, }; const reactTs = { "/App.tsx": AppTs, - "/ChevronIcon.tsx": ChevronIconTs, }; export default { diff --git a/apps/docs/content/components/pagination/custom-styles.raw.jsx b/apps/docs/content/components/pagination/custom-styles.raw.jsx new file mode 100644 index 0000000000..2438a31fe2 --- /dev/null +++ b/apps/docs/content/components/pagination/custom-styles.raw.jsx @@ -0,0 +1,15 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/pagination/custom-styles.ts b/apps/docs/content/components/pagination/custom-styles.ts index 099f57350e..da3ea9093a 100644 --- a/apps/docs/content/components/pagination/custom-styles.ts +++ b/apps/docs/content/components/pagination/custom-styles.ts @@ -1,18 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/disabled.raw.jsx b/apps/docs/content/components/pagination/disabled.raw.jsx new file mode 100644 index 0000000000..0052b38f31 --- /dev/null +++ b/apps/docs/content/components/pagination/disabled.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/disabled.ts b/apps/docs/content/components/pagination/disabled.ts index 8e541c5ade..1a215cc91f 100644 --- a/apps/docs/content/components/pagination/disabled.ts +++ b/apps/docs/content/components/pagination/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/initial-page.raw.jsx b/apps/docs/content/components/pagination/initial-page.raw.jsx new file mode 100644 index 0000000000..3c255ae348 --- /dev/null +++ b/apps/docs/content/components/pagination/initial-page.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/initial-page.ts b/apps/docs/content/components/pagination/initial-page.ts index 0d0dd5277c..7a868386df 100644 --- a/apps/docs/content/components/pagination/initial-page.ts +++ b/apps/docs/content/components/pagination/initial-page.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./initial-page.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/loop.raw.jsx b/apps/docs/content/components/pagination/loop.raw.jsx new file mode 100644 index 0000000000..38d37be5d6 --- /dev/null +++ b/apps/docs/content/components/pagination/loop.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/loop.ts b/apps/docs/content/components/pagination/loop.ts index a0b3d320f7..75721e3bc3 100644 --- a/apps/docs/content/components/pagination/loop.ts +++ b/apps/docs/content/components/pagination/loop.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./loop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/radius.raw.jsx b/apps/docs/content/components/pagination/radius.raw.jsx new file mode 100644 index 0000000000..583afb18a4 --- /dev/null +++ b/apps/docs/content/components/pagination/radius.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "xl", "lg", "md", "sm", "base", "none"]; + + return ( +
+ {radius.map((r) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/pagination/radius.ts b/apps/docs/content/components/pagination/radius.ts index 6cc77848ac..7b78db1ce0 100644 --- a/apps/docs/content/components/pagination/radius.ts +++ b/apps/docs/content/components/pagination/radius.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - - const radius = ["full", "xl", "lg", "md", "sm", "base", "none"] - - return ( -
- {radius.map((r) => ( - - ))} -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/shadow.raw.jsx b/apps/docs/content/components/pagination/shadow.raw.jsx new file mode 100644 index 0000000000..a1e25bf9ca --- /dev/null +++ b/apps/docs/content/components/pagination/shadow.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/shadow.ts b/apps/docs/content/components/pagination/shadow.ts index 12edcbb3e1..a18f8ca4bf 100644 --- a/apps/docs/content/components/pagination/shadow.ts +++ b/apps/docs/content/components/pagination/shadow.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./shadow.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/siblings.raw.jsx b/apps/docs/content/components/pagination/siblings.raw.jsx new file mode 100644 index 0000000000..711a37d3b9 --- /dev/null +++ b/apps/docs/content/components/pagination/siblings.raw.jsx @@ -0,0 +1,14 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ( +
+

1 Sibling (default)

+ +

2 Siblings

+ +

3 Siblings

+ +
+ ); +} diff --git a/apps/docs/content/components/pagination/siblings.ts b/apps/docs/content/components/pagination/siblings.ts index e54287d83a..af93036092 100644 --- a/apps/docs/content/components/pagination/siblings.ts +++ b/apps/docs/content/components/pagination/siblings.ts @@ -1,25 +1,4 @@ -const App = `import {Pagination, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
-

1 Sibling (default)

- -

2 Siblings

- -

3 Siblings

- -
- ); -}`; +import App from "./siblings.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/sizes.raw.jsx b/apps/docs/content/components/pagination/sizes.raw.jsx new file mode 100644 index 0000000000..a91ac73bcb --- /dev/null +++ b/apps/docs/content/components/pagination/sizes.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/pagination/sizes.ts b/apps/docs/content/components/pagination/sizes.ts index 0400dfff03..85a2f5b30b 100644 --- a/apps/docs/content/components/pagination/sizes.ts +++ b/apps/docs/content/components/pagination/sizes.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} 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/pagination/usage.raw.jsx b/apps/docs/content/components/pagination/usage.raw.jsx new file mode 100644 index 0000000000..7bc069b20d --- /dev/null +++ b/apps/docs/content/components/pagination/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/pagination/usage.ts b/apps/docs/content/components/pagination/usage.ts index 7b042283a0..1118304c37 100644 --- a/apps/docs/content/components/pagination/usage.ts +++ b/apps/docs/content/components/pagination/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/pagination/variants.raw.jsx b/apps/docs/content/components/pagination/variants.raw.jsx new file mode 100644 index 0000000000..5de44baff0 --- /dev/null +++ b/apps/docs/content/components/pagination/variants.raw.jsx @@ -0,0 +1,13 @@ +import {Pagination} from "@nextui-org/react"; + +export default function App() { + const variants = ["flat", "bordered", "faded", "light"]; + + return ( +
+ {variants.map((variant) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/pagination/variants.ts b/apps/docs/content/components/pagination/variants.ts index 7e049b1eb9..ddea95fb2e 100644 --- a/apps/docs/content/components/pagination/variants.ts +++ b/apps/docs/content/components/pagination/variants.ts @@ -1,17 +1,4 @@ -const App = `import {Pagination} from "@nextui-org/react"; - -export default function App() { - - const variants = ["flat", "bordered", "faded", "light"] - - return ( -
- {variants.map((variant) => ( - - ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/arrow.raw.jsx b/apps/docs/content/components/popover/arrow.raw.jsx new file mode 100644 index 0000000000..61a1799eba --- /dev/null +++ b/apps/docs/content/components/popover/arrow.raw.jsx @@ -0,0 +1,17 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
+
Popover Content
+
This is the popover content
+
+ + + ); +} diff --git a/apps/docs/content/components/popover/arrow.ts b/apps/docs/content/components/popover/arrow.ts index dcbd90869d..d04dbb0e9d 100644 --- a/apps/docs/content/components/popover/arrow.ts +++ b/apps/docs/content/components/popover/arrow.ts @@ -1,20 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
-
Popover Content
-
This is the popover content
-
- - - ); -}`; +import App from "./arrow.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/backdrop.raw.jsx b/apps/docs/content/components/popover/backdrop.raw.jsx new file mode 100644 index 0000000000..0c43b090d7 --- /dev/null +++ b/apps/docs/content/components/popover/backdrop.raw.jsx @@ -0,0 +1,38 @@ +import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; + +export default function App() { + const backdrops = ["opaque", "blur", "transparent"]; + + const content = ( + + {(titleProps) => ( +
+

+ Dimensions +

+
+ + + + +
+
+ )} + + ); + + return ( +
+ {backdrops.map((backdrop) => ( + + + + + {content} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/popover/backdrop.ts b/apps/docs/content/components/popover/backdrop.ts index be28d365d7..53412b0f5b 100644 --- a/apps/docs/content/components/popover/backdrop.ts +++ b/apps/docs/content/components/popover/backdrop.ts @@ -1,48 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; - -export default function App() { - - const backdrops = ["opaque", "blur", "transparent"]; - - const content = ( - - {(titleProps) => ( -
-

- Dimensions -

-
- - - - -
-
- )} - - ) - - return ( -
- {backdrops.map((backdrop) => ( - - - - - {content} - - ))} -
- ); -}`; +import App from "./backdrop.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/colors.raw.jsx b/apps/docs/content/components/popover/colors.raw.jsx new file mode 100644 index 0000000000..5e255bdb66 --- /dev/null +++ b/apps/docs/content/components/popover/colors.raw.jsx @@ -0,0 +1,29 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const content = ( + +
+
Popover Content
+
This is the popover content
+
+ + ); + + const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"]; + + return ( +
+ {colors.map((color) => ( + + + + + {content} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/popover/colors.ts b/apps/docs/content/components/popover/colors.ts index 4cff076495..d5bef810aa 100644 --- a/apps/docs/content/components/popover/colors.ts +++ b/apps/docs/content/components/popover/colors.ts @@ -1,40 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const content = ( - -
-
Popover Content
-
This is the popover content
-
- - ); - - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger", - "foreground", - ]; - - return ( -
- {colors.map((color) => ( - - - - - {content} - - ))} -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/controlled.raw.jsx b/apps/docs/content/components/popover/controlled.raw.jsx new file mode 100644 index 0000000000..f246c33533 --- /dev/null +++ b/apps/docs/content/components/popover/controlled.raw.jsx @@ -0,0 +1,22 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + + return ( +
+ setIsOpen(open)}> + + + + +
+
Popover Content
+
This is the popover content
+
+ + +

Open: {isOpen ? "true" : "false"}

+
+ ); +} diff --git a/apps/docs/content/components/popover/controlled.ts b/apps/docs/content/components/popover/controlled.ts index c0dd3736db..2c3f0cacb4 100644 --- a/apps/docs/content/components/popover/controlled.ts +++ b/apps/docs/content/components/popover/controlled.ts @@ -1,25 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - - return ( -
- setIsOpen(open)}> - - - - -
-
Popover Content
-
This is the popover content
-
- - -

Open: {isOpen ? "true" : "false"}

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/custom-motion.raw.jsx b/apps/docs/content/components/popover/custom-motion.raw.jsx new file mode 100644 index 0000000000..3629b32d89 --- /dev/null +++ b/apps/docs/content/components/popover/custom-motion.raw.jsx @@ -0,0 +1,45 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
+
Popover Content
+
This is the popover content
+
+ + + ); +} diff --git a/apps/docs/content/components/popover/custom-motion.ts b/apps/docs/content/components/popover/custom-motion.ts index 90332f7f03..389f462ddd 100644 --- a/apps/docs/content/components/popover/custom-motion.ts +++ b/apps/docs/content/components/popover/custom-motion.ts @@ -1,48 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
-
Popover Content
-
This is the popover content
-
- - - ); -}`; +import App from "./custom-motion.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/custom-styles.raw.jsx b/apps/docs/content/components/popover/custom-styles.raw.jsx new file mode 100644 index 0000000000..4c34e65d93 --- /dev/null +++ b/apps/docs/content/components/popover/custom-styles.raw.jsx @@ -0,0 +1,36 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + {(titleProps) => ( +
+

+ Popover Content +

+
This is the popover content
+
+ )} + + + ); +} diff --git a/apps/docs/content/components/popover/custom-styles.ts b/apps/docs/content/components/popover/custom-styles.ts index 42684474c5..da3ea9093a 100644 --- a/apps/docs/content/components/popover/custom-styles.ts +++ b/apps/docs/content/components/popover/custom-styles.ts @@ -1,39 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - {(titleProps) => ( -
-

- Popover Content -

-
This is the popover content
-
- )} - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/custom-trigger.raw.jsx b/apps/docs/content/components/popover/custom-trigger.raw.jsx new file mode 100644 index 0000000000..bca3caa644 --- /dev/null +++ b/apps/docs/content/components/popover/custom-trigger.raw.jsx @@ -0,0 +1,85 @@ +import { + Avatar, + Button, + Card, + CardBody, + CardFooter, + CardHeader, + Popover, + PopoverTrigger, + PopoverContent, + Button, + User, +} from "@nextui-org/react"; + +export const UserTwitterCard = () => { + const [isFollowed, setIsFollowed] = React.useState(false); + + return ( + + +
+ +
+

Zoey Lang

+
@zoeylang
+
+
+ + + +

+ Full-stack developer, @getnextui lover she/her + + 🎉 + +

+ + +
+

4

+

Following

+
+
+

97.1K

+

Followers

+
+ + + ); +}; + +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/apps/docs/content/components/popover/custom-trigger.ts b/apps/docs/content/components/popover/custom-trigger.ts index 48d95eac20..dcc6b44a07 100644 --- a/apps/docs/content/components/popover/custom-trigger.ts +++ b/apps/docs/content/components/popover/custom-trigger.ts @@ -1,78 +1,7 @@ -const UserTwitterCard = `import { Avatar, Button, Card, CardBody, CardFooter, CardHeader } from "@nextui-org/react"; - -export const UserTwitterCard = () => { - const [isFollowed, setIsFollowed] = React.useState(false); - - return ( - - -
- -
-

Zoey Lang

-
@zoeylang
-
-
- - - -

- Full-stack developer, @getnextui lover she/her - - 🎉 - -

- - -
-

4

-

Following

-
-
-

97.1K

-

Followers

-
- - - ); -};`; - -const App = `import {Popover, PopoverTrigger, PopoverContent, Button, User} from "@nextui-org/react"; -import {UserTwitterCard} from "./UserTwitterCard"; - -export default function App() { - return ( - - - - - - - - - ); -}`; +import App from "./custom-trigger.raw.jsx?raw"; const react = { "/App.jsx": App, - "/UserTwitterCard.jsx": UserTwitterCard, }; export default { diff --git a/apps/docs/content/components/popover/offset.raw.jsx b/apps/docs/content/components/popover/offset.raw.jsx new file mode 100644 index 0000000000..2658e184d8 --- /dev/null +++ b/apps/docs/content/components/popover/offset.raw.jsx @@ -0,0 +1,17 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
+
Popover Content
+
This is the popover content
+
+ + + ); +} diff --git a/apps/docs/content/components/popover/offset.ts b/apps/docs/content/components/popover/offset.ts index cdcd9328e0..2fb601047c 100644 --- a/apps/docs/content/components/popover/offset.ts +++ b/apps/docs/content/components/popover/offset.ts @@ -1,20 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
-
Popover Content
-
This is the popover content
-
- - - ); -}`; +import App from "./offset.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/placements.raw.jsx b/apps/docs/content/components/popover/placements.raw.jsx new file mode 100644 index 0000000000..57e62d3a96 --- /dev/null +++ b/apps/docs/content/components/popover/placements.raw.jsx @@ -0,0 +1,42 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const content = ( + +
+
Popover Content
+
This is the popover content
+
+ + ); + + const placements = [ + "top-start", + "top", + "top-end", + "bottom-start", + "bottom", + "bottom-end", + "right-start", + "right", + "right-end", + "left-start", + "left", + "left-end", + ]; + + return ( +
+ {placements.map((placement) => ( + + + + + {content} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/popover/placements.ts b/apps/docs/content/components/popover/placements.ts index 2ec2ca6021..dc67908b7e 100644 --- a/apps/docs/content/components/popover/placements.ts +++ b/apps/docs/content/components/popover/placements.ts @@ -1,45 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const content = ( - -
-
Popover Content
-
This is the popover content
-
- - ); - - const placements = [ - "top-start", - "top", - "top-end", - "bottom-start", - "bottom", - "bottom-end", - "right-start", - "right", - "right-end", - "left-start", - "left", - "left-end", - ]; - - return ( -
- {placements.map((placement) => ( - - - - - {content} - - ))} -
- ); -}`; +import App from "./placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/title-props.raw.jsx b/apps/docs/content/components/popover/title-props.raw.jsx new file mode 100644 index 0000000000..464e8f0730 --- /dev/null +++ b/apps/docs/content/components/popover/title-props.raw.jsx @@ -0,0 +1,21 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + {(titleProps) => ( +
+

+ Popover Content +

+
This is the popover content
+
+ )} + + + ); +} diff --git a/apps/docs/content/components/popover/title-props.ts b/apps/docs/content/components/popover/title-props.ts index 022087fe27..3c92a7ebef 100644 --- a/apps/docs/content/components/popover/title-props.ts +++ b/apps/docs/content/components/popover/title-props.ts @@ -1,24 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - {(titleProps) => ( -
-

- Popover Content -

-
This is the popover content
-
- )} - - - ); -}`; +import App from "./title-props.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/usage.raw.jsx b/apps/docs/content/components/popover/usage.raw.jsx new file mode 100644 index 0000000000..2d25bb18f5 --- /dev/null +++ b/apps/docs/content/components/popover/usage.raw.jsx @@ -0,0 +1,17 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + +
+
Popover Content
+
This is the popover content
+
+ + + ); +} diff --git a/apps/docs/content/components/popover/usage.ts b/apps/docs/content/components/popover/usage.ts index 7f5a4a17eb..1118304c37 100644 --- a/apps/docs/content/components/popover/usage.ts +++ b/apps/docs/content/components/popover/usage.ts @@ -1,20 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - -
-
Popover Content
-
This is the popover content
-
- - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/variants.raw.jsx b/apps/docs/content/components/popover/variants.raw.jsx new file mode 100644 index 0000000000..9b08823adf --- /dev/null +++ b/apps/docs/content/components/popover/variants.raw.jsx @@ -0,0 +1,29 @@ +import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; + +export default function App() { + const content = ( + +
+
Popover Content
+
This is the popover content
+
+ + ); + + const variants = ["solid", "bordered", "flat", "faded", "shadow"]; + + return ( +
+ {variants.map((variant) => ( + + + + + {content} + + ))} +
+ ); +} diff --git a/apps/docs/content/components/popover/variants.ts b/apps/docs/content/components/popover/variants.ts index ee608fd157..ddea95fb2e 100644 --- a/apps/docs/content/components/popover/variants.ts +++ b/apps/docs/content/components/popover/variants.ts @@ -1,32 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react"; - -export default function App() { - const content = ( - -
-
Popover Content
-
This is the popover content
-
- - ); - - const variants = ["solid", "bordered", "flat", "faded", "shadow"]; - - return ( -
- {variants.map((variant) => ( - - - - - {content} - - ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/popover/with-form.raw.jsx b/apps/docs/content/components/popover/with-form.raw.jsx new file mode 100644 index 0000000000..3b9443ad93 --- /dev/null +++ b/apps/docs/content/components/popover/with-form.raw.jsx @@ -0,0 +1,26 @@ +import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; + +export default function App() { + return ( + + + + + + {(titleProps) => ( +
+

+ Dimensions +

+
+ + + + +
+
+ )} + + + ); +} diff --git a/apps/docs/content/components/popover/with-form.ts b/apps/docs/content/components/popover/with-form.ts index 59e869c420..c9a0cff490 100644 --- a/apps/docs/content/components/popover/with-form.ts +++ b/apps/docs/content/components/popover/with-form.ts @@ -1,29 +1,4 @@ -const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react"; - -export default function App() { - return ( - - - - - - {(titleProps) => ( -
-

- Dimensions -

-
- - - - -
-
- )} - - - ); -}`; +import App from "./with-form.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/colors.raw.jsx b/apps/docs/content/components/progress/colors.raw.jsx new file mode 100644 index 0000000000..fe106ebe2b --- /dev/null +++ b/apps/docs/content/components/progress/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/progress/colors.ts b/apps/docs/content/components/progress/colors.ts index 50c389a595..d5bef810aa 100644 --- a/apps/docs/content/components/progress/colors.ts +++ b/apps/docs/content/components/progress/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/custom-styles.raw.jsx b/apps/docs/content/components/progress/custom-styles.raw.jsx new file mode 100644 index 0000000000..e1ded1a4b1 --- /dev/null +++ b/apps/docs/content/components/progress/custom-styles.raw.jsx @@ -0,0 +1,20 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/progress/custom-styles.ts b/apps/docs/content/components/progress/custom-styles.ts index 84f5061b1c..da3ea9093a 100644 --- a/apps/docs/content/components/progress/custom-styles.ts +++ b/apps/docs/content/components/progress/custom-styles.ts @@ -1,23 +1,4 @@ -const App = `import { Progress } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/indeterminate.raw.jsx b/apps/docs/content/components/progress/indeterminate.raw.jsx new file mode 100644 index 0000000000..df0f7bd1e1 --- /dev/null +++ b/apps/docs/content/components/progress/indeterminate.raw.jsx @@ -0,0 +1,5 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/progress/indeterminate.ts b/apps/docs/content/components/progress/indeterminate.ts index ea51f815f9..7094e42950 100644 --- a/apps/docs/content/components/progress/indeterminate.ts +++ b/apps/docs/content/components/progress/indeterminate.ts @@ -1,15 +1,4 @@ -const App = `import { Progress } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./indeterminate.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/label.raw.jsx b/apps/docs/content/components/progress/label.raw.jsx new file mode 100644 index 0000000000..f623f9081f --- /dev/null +++ b/apps/docs/content/components/progress/label.raw.jsx @@ -0,0 +1,5 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/progress/label.ts b/apps/docs/content/components/progress/label.ts index ec0021c73f..254b95afb8 100644 --- a/apps/docs/content/components/progress/label.ts +++ b/apps/docs/content/components/progress/label.ts @@ -1,10 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/sizes.raw.jsx b/apps/docs/content/components/progress/sizes.raw.jsx new file mode 100644 index 0000000000..dae25bd97b --- /dev/null +++ b/apps/docs/content/components/progress/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/progress/sizes.ts b/apps/docs/content/components/progress/sizes.ts index a521327385..85a2f5b30b 100644 --- a/apps/docs/content/components/progress/sizes.ts +++ b/apps/docs/content/components/progress/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/striped.raw.jsx b/apps/docs/content/components/progress/striped.raw.jsx new file mode 100644 index 0000000000..f8c21c29e4 --- /dev/null +++ b/apps/docs/content/components/progress/striped.raw.jsx @@ -0,0 +1,7 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/progress/striped.ts b/apps/docs/content/components/progress/striped.ts index b5f348fb4e..efcbdde82e 100644 --- a/apps/docs/content/components/progress/striped.ts +++ b/apps/docs/content/components/progress/striped.ts @@ -1,17 +1,4 @@ -const App = `import { Progress } from "@nextui-org/react"; - -export default function App() { - return ( - - ); -} -`; +import App from "./striped.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/usage.raw.jsx b/apps/docs/content/components/progress/usage.raw.jsx new file mode 100644 index 0000000000..d1e31aff49 --- /dev/null +++ b/apps/docs/content/components/progress/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/progress/usage.ts b/apps/docs/content/components/progress/usage.ts index 61bc662eb4..1118304c37 100644 --- a/apps/docs/content/components/progress/usage.ts +++ b/apps/docs/content/components/progress/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/value-formatting.raw.jsx b/apps/docs/content/components/progress/value-formatting.raw.jsx new file mode 100644 index 0000000000..f6defdafcd --- /dev/null +++ b/apps/docs/content/components/progress/value-formatting.raw.jsx @@ -0,0 +1,16 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/progress/value-formatting.ts b/apps/docs/content/components/progress/value-formatting.ts index d31dc42a99..0cd558d45d 100644 --- a/apps/docs/content/components/progress/value-formatting.ts +++ b/apps/docs/content/components/progress/value-formatting.ts @@ -1,19 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./value-formatting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/progress/value.raw.jsx b/apps/docs/content/components/progress/value.raw.jsx new file mode 100644 index 0000000000..2700ccda53 --- /dev/null +++ b/apps/docs/content/components/progress/value.raw.jsx @@ -0,0 +1,24 @@ +import {Progress} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0); + + React.useEffect(() => { + const interval = setInterval(() => { + setValue((v) => (v >= 100 ? 0 : v + 10)); + }, 500); + + return () => clearInterval(interval); + }, []); + + return ( + + ); +} diff --git a/apps/docs/content/components/progress/value.ts b/apps/docs/content/components/progress/value.ts index 8b87769cbf..e2de0e9024 100644 --- a/apps/docs/content/components/progress/value.ts +++ b/apps/docs/content/components/progress/value.ts @@ -1,27 +1,4 @@ -const App = `import {Progress} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0); - - React.useEffect(() => { - const interval = setInterval(() => { - setValue((v) => (v >= 100 ? 0 : v + 10)); - }, 500); - - return () => clearInterval(interval); - }, []); - - return ( - - ); -}`; +import App from "./value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/controlled.raw.jsx b/apps/docs/content/components/radio-group/controlled.raw.jsx new file mode 100644 index 0000000000..f55d1149fe --- /dev/null +++ b/apps/docs/content/components/radio-group/controlled.raw.jsx @@ -0,0 +1,18 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("london"); + + return ( +
+ + Buenos Aires + Sydney + San Francisco + London + Tokyo + +

Selected: {selected}

+
+ ); +} diff --git a/apps/docs/content/components/radio-group/controlled.ts b/apps/docs/content/components/radio-group/controlled.ts index dcfc6298c1..2c3f0cacb4 100644 --- a/apps/docs/content/components/radio-group/controlled.ts +++ b/apps/docs/content/components/radio-group/controlled.ts @@ -1,25 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("london"); - - return ( -
- - Buenos Aires - Sydney - San Francisco - London - Tokyo - -

Selected: {selected}

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.jsx b/apps/docs/content/components/radio-group/custom-impl.raw.jsx new file mode 100644 index 0000000000..a4676eff43 --- /dev/null +++ b/apps/docs/content/components/radio-group/custom-impl.raw.jsx @@ -0,0 +1,55 @@ +import {RadioGroup, useRadio, VisuallyHidden, cn} from "@nextui-org/react"; + +export const CustomRadio = (props) => { + const { + Component, + children, + description, + getBaseProps, + getWrapperProps, + getInputProps, + getLabelProps, + getLabelWrapperProps, + getControlProps, + } = useRadio(props); + + return ( + + + + + + + +
+ {children && {children}} + {description && ( + {description} + )} +
+ + ); +}; + +export default function App() { + return ( + + + Free + + + Pro + + + Enterprise + + + ); +} diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.tsx b/apps/docs/content/components/radio-group/custom-impl.raw.tsx new file mode 100644 index 0000000000..ca96dac02e --- /dev/null +++ b/apps/docs/content/components/radio-group/custom-impl.raw.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import {RadioGroup, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react"; + +export const CustomRadio = (props: RadioProps) => { + const { + Component, + children, + description, + getBaseProps, + getWrapperProps, + getInputProps, + getLabelProps, + getLabelWrapperProps, + getControlProps, + } = useRadio(props); + + return ( + + + + + + + +
+ {children && {children}} + {description && ( + {description} + )} +
+ + ); +}; + +export default function App() { + return ( + + + Free + + + Pro + + + Enterprise + + + ); +} diff --git a/apps/docs/content/components/radio-group/custom-impl.ts b/apps/docs/content/components/radio-group/custom-impl.ts index f2c072f1d3..ef0d8ef531 100644 --- a/apps/docs/content/components/radio-group/custom-impl.ts +++ b/apps/docs/content/components/radio-group/custom-impl.ts @@ -1,122 +1,5 @@ -const App = `import {RadioGroup, Radio, useRadio, VisuallyHidden, cn} from "@nextui-org/react"; - -export const CustomRadio = (props) => { - const { - Component, - children, - isSelected, - description, - getBaseProps, - getWrapperProps, - getInputProps, - getLabelProps, - getLabelWrapperProps, - getControlProps, - } = useRadio(props); - - return ( - - - - - - - -
- {children && {children}} - {description && ( - {description} - )} -
- - ); -}; - -export default function App() { - return ( - - - Free - - - Pro - - - Enterprise - - - ); -}`; - -const AppTs = `import {RadioGroup, Radio, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react"; - -export const CustomRadio = (props: RadioProps) => { - const { - Component, - children, - isSelected, - description, - getBaseProps, - getWrapperProps, - getInputProps, - getLabelProps, - getLabelWrapperProps, - getControlProps, - } = useRadio(props); - - return ( - - - - - - - -
- {children && {children}} - {description && ( - {description} - )} -
- - ); -}; - -export default function App() { - return ( - - - Free - - - Pro - - - Enterprise - - - ); -}`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/custom-styles.raw.jsx b/apps/docs/content/components/radio-group/custom-styles.raw.jsx new file mode 100644 index 0000000000..c034ff8787 --- /dev/null +++ b/apps/docs/content/components/radio-group/custom-styles.raw.jsx @@ -0,0 +1,36 @@ +import {RadioGroup, Radio, cn} from "@nextui-org/react"; + +export const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); +}; + +export default function App() { + return ( + + + Free + + + Pro + + + Enterprise + + + ); +} diff --git a/apps/docs/content/components/radio-group/custom-styles.ts b/apps/docs/content/components/radio-group/custom-styles.ts index 32ecea0803..da3ea9093a 100644 --- a/apps/docs/content/components/radio-group/custom-styles.ts +++ b/apps/docs/content/components/radio-group/custom-styles.ts @@ -1,42 +1,4 @@ -const App = `import {RadioGroup, Radio, cn} from "@nextui-org/react"; - -export const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); -}; - -export default function App() { - return ( - - - Free - - - Pro - - - Enterprise - - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/default-value.raw.jsx b/apps/docs/content/components/radio-group/default-value.raw.jsx new file mode 100644 index 0000000000..18df962e51 --- /dev/null +++ b/apps/docs/content/components/radio-group/default-value.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/default-value.ts b/apps/docs/content/components/radio-group/default-value.ts index d10be982f0..6a12c77816 100644 --- a/apps/docs/content/components/radio-group/default-value.ts +++ b/apps/docs/content/components/radio-group/default-value.ts @@ -1,20 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./default-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/disabled.raw.jsx b/apps/docs/content/components/radio-group/disabled.raw.jsx new file mode 100644 index 0000000000..950e2d63d9 --- /dev/null +++ b/apps/docs/content/components/radio-group/disabled.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/disabled.ts b/apps/docs/content/components/radio-group/disabled.ts index b707ad15cf..1a215cc91f 100644 --- a/apps/docs/content/components/radio-group/disabled.ts +++ b/apps/docs/content/components/radio-group/disabled.ts @@ -1,19 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/horizontal.raw.jsx b/apps/docs/content/components/radio-group/horizontal.raw.jsx new file mode 100644 index 0000000000..9e822ee189 --- /dev/null +++ b/apps/docs/content/components/radio-group/horizontal.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/horizontal.ts b/apps/docs/content/components/radio-group/horizontal.ts index 543ceacbf2..60be4b4077 100644 --- a/apps/docs/content/components/radio-group/horizontal.ts +++ b/apps/docs/content/components/radio-group/horizontal.ts @@ -1,19 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./horizontal.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/invalid.raw.jsx b/apps/docs/content/components/radio-group/invalid.raw.jsx new file mode 100644 index 0000000000..6abf555c09 --- /dev/null +++ b/apps/docs/content/components/radio-group/invalid.raw.jsx @@ -0,0 +1,27 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + const [selected, setSelected] = React.useState("london"); + + const validOptions = ["buenos-aires", "san-francisco", "tokyo"]; + + const isInvalid = !validOptions.includes(selected); + + return ( +
+ + Buenos Aires + Sydney + San Francisco + London + Tokyo + +

Selected: {selected}

+
+ ); +} diff --git a/apps/docs/content/components/radio-group/invalid.ts b/apps/docs/content/components/radio-group/invalid.ts index 163615f5e9..a02a8fe9c1 100644 --- a/apps/docs/content/components/radio-group/invalid.ts +++ b/apps/docs/content/components/radio-group/invalid.ts @@ -1,30 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - const [selected, setSelected] = React.useState("london"); - - const validOptions = ["buenos-aires", "san-francisco", "tokyo"]; - - const isInvalid = !validOptions.includes(selected); - - return ( -
- - Buenos Aires - Sydney - San Francisco - London - Tokyo - -

Selected: {selected}

-
- ); -}`; +import App from "./invalid.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/usage.raw.jsx b/apps/docs/content/components/radio-group/usage.raw.jsx new file mode 100644 index 0000000000..90f7d3bc87 --- /dev/null +++ b/apps/docs/content/components/radio-group/usage.raw.jsx @@ -0,0 +1,13 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + Buenos Aires + Sydney + San Francisco + London + Tokyo + + ); +} diff --git a/apps/docs/content/components/radio-group/usage.ts b/apps/docs/content/components/radio-group/usage.ts index 70292f055a..1118304c37 100644 --- a/apps/docs/content/components/radio-group/usage.ts +++ b/apps/docs/content/components/radio-group/usage.ts @@ -1,18 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - Buenos Aires - Sydney - San Francisco - London - Tokyo - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/radio-group/with-description.raw.jsx b/apps/docs/content/components/radio-group/with-description.raw.jsx new file mode 100644 index 0000000000..5764f14cc2 --- /dev/null +++ b/apps/docs/content/components/radio-group/with-description.raw.jsx @@ -0,0 +1,20 @@ +import {RadioGroup, Radio} from "@nextui-org/react"; + +export default function App() { + return ( + + + Buenos Aires + + + Canberra + + + London + + + Tokyo + + + ); +} diff --git a/apps/docs/content/components/radio-group/with-description.ts b/apps/docs/content/components/radio-group/with-description.ts index 8514baafb8..d42b2150ff 100644 --- a/apps/docs/content/components/radio-group/with-description.ts +++ b/apps/docs/content/components/radio-group/with-description.ts @@ -1,26 +1,4 @@ -const App = `import {RadioGroup, Radio} from "@nextui-org/react"; - -export default function App() { - return ( - - - Buenos Aires - - - Canberra - - - London - - - Tokyo - - - ); -}`; +import App from "./with-description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx b/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx new file mode 100644 index 0000000000..a735718b95 --- /dev/null +++ b/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx @@ -0,0 +1,15 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let defaultDate = today(getLocalTimeZone()); + let [focusedDate, setFocusedDate] = React.useState(defaultDate); + + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/controlled-focused-value.ts b/apps/docs/content/components/range-calendar/controlled-focused-value.ts index 94014c4cd2..4a47b1bdd9 100644 --- a/apps/docs/content/components/range-calendar/controlled-focused-value.ts +++ b/apps/docs/content/components/range-calendar/controlled-focused-value.ts @@ -1,18 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let defaultDate = today(getLocalTimeZone()); - let [focusedDate, setFocusedDate] = React.useState(defaultDate); - - return ( - - ); -}`; +import App from "./controlled-focused-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/controlled.raw.jsx b/apps/docs/content/components/range-calendar/controlled.raw.jsx new file mode 100644 index 0000000000..9ac565f493 --- /dev/null +++ b/apps/docs/content/components/range-calendar/controlled.raw.jsx @@ -0,0 +1,11 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + + return ; +} diff --git a/apps/docs/content/components/range-calendar/controlled.raw.tsx b/apps/docs/content/components/range-calendar/controlled.raw.tsx new file mode 100644 index 0000000000..37cdccb0ab --- /dev/null +++ b/apps/docs/content/components/range-calendar/controlled.raw.tsx @@ -0,0 +1,15 @@ +import type {DateValue} from "@react-types/calendar"; +import type {RangeValue} from "@react-types/shared"; + +import React from "react"; +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + let [value, setValue] = React.useState>({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + + return ; +} diff --git a/apps/docs/content/components/range-calendar/controlled.ts b/apps/docs/content/components/range-calendar/controlled.ts index 2544a02634..1f1a363363 100644 --- a/apps/docs/content/components/range-calendar/controlled.ts +++ b/apps/docs/content/components/range-calendar/controlled.ts @@ -1,46 +1,15 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - - return ( - - ); -}`; - -const AppTs = `import {RangeCalendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import type {RangeValue} from "@react-types/shared"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - let [value, setValue] = React.useState>({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - - return ( - - ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/range-calendar/disabled.raw.jsx b/apps/docs/content/components/range-calendar/disabled.raw.jsx new file mode 100644 index 0000000000..b1867734a5 --- /dev/null +++ b/apps/docs/content/components/range-calendar/disabled.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/disabled.ts b/apps/docs/content/components/range-calendar/disabled.ts index 80f5d578ec..1a215cc91f 100644 --- a/apps/docs/content/components/range-calendar/disabled.ts +++ b/apps/docs/content/components/range-calendar/disabled.ts @@ -1,10 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/international-calendars.raw.jsx b/apps/docs/content/components/range-calendar/international-calendars.raw.jsx new file mode 100644 index 0000000000..cc12c88378 --- /dev/null +++ b/apps/docs/content/components/range-calendar/international-calendars.raw.jsx @@ -0,0 +1,10 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {I18nProvider} from "@react-aria/i18n"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/range-calendar/international-calendars.ts b/apps/docs/content/components/range-calendar/international-calendars.ts index bd4fac3ffc..98bb8449e6 100644 --- a/apps/docs/content/components/range-calendar/international-calendars.ts +++ b/apps/docs/content/components/range-calendar/international-calendars.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {I18nProvider} from "@react-aria/i18n"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./international-calendars.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/invalid-date.raw.jsx b/apps/docs/content/components/range-calendar/invalid-date.raw.jsx new file mode 100644 index 0000000000..4813c3ac25 --- /dev/null +++ b/apps/docs/content/components/range-calendar/invalid-date.raw.jsx @@ -0,0 +1,22 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + let {locale} = useLocale(); + let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/invalid-date.raw.tsx b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx new file mode 100644 index 0000000000..95b9bcf4df --- /dev/null +++ b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx @@ -0,0 +1,25 @@ +import type {DateValue} from "@react-types/calendar"; +import type {RangeValue} from "@react-types/shared"; + +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [date, setDate] = React.useState>({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1}), + }); + let {locale} = useLocale(); + let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale); + + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/invalid-date.ts b/apps/docs/content/components/range-calendar/invalid-date.ts index 4e053c0658..e373a04e5b 100644 --- a/apps/docs/content/components/range-calendar/invalid-date.ts +++ b/apps/docs/content/components/range-calendar/invalid-date.ts @@ -1,58 +1,15 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - let {locale} = useLocale(); - let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale); - - return ( - - ); -}`; - -const AppTs = `import {RangeCalendar} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import type {RangeValue} from "@react-types/shared"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let [date, setDate] = React.useState>({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1}), - }); - let {locale} = useLocale(); - let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale); - - return ( - - ); -}`; +import App from "./invalid-date.raw.jsx?raw"; +import AppTs from "./invalid-date.raw.tsx?raw"; const react = { "/App.jsx": App, +}; + +const reactTs = { "/App.tsx": AppTs, }; export default { ...react, + ...reactTs, }; diff --git a/apps/docs/content/components/range-calendar/max-date-value.raw.jsx b/apps/docs/content/components/range-calendar/max-date-value.raw.jsx new file mode 100644 index 0000000000..888dcea793 --- /dev/null +++ b/apps/docs/content/components/range-calendar/max-date-value.raw.jsx @@ -0,0 +1,6 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/max-date-value.ts b/apps/docs/content/components/range-calendar/max-date-value.ts index 32c1359e13..6a82913361 100644 --- a/apps/docs/content/components/range-calendar/max-date-value.ts +++ b/apps/docs/content/components/range-calendar/max-date-value.ts @@ -1,14 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./max-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/min-date-value.raw.jsx b/apps/docs/content/components/range-calendar/min-date-value.raw.jsx new file mode 100644 index 0000000000..cbcc6865ff --- /dev/null +++ b/apps/docs/content/components/range-calendar/min-date-value.raw.jsx @@ -0,0 +1,6 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/min-date-value.ts b/apps/docs/content/components/range-calendar/min-date-value.ts index 602cb5d6a1..4e86e82613 100644 --- a/apps/docs/content/components/range-calendar/min-date-value.ts +++ b/apps/docs/content/components/range-calendar/min-date-value.ts @@ -1,14 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./min-date-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx b/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx new file mode 100644 index 0000000000..9e8d39c445 --- /dev/null +++ b/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx @@ -0,0 +1,15 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let {locale} = useLocale(); + + return ( + isWeekend(date, locale)} + /> + ); +} diff --git a/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts b/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts index 15c294adb7..92f01fe2cf 100644 --- a/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts +++ b/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts @@ -1,18 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let {locale} = useLocale(); - - return ( - isWeekend(date, locale)} - /> - ); -}`; +import App from "./non-contiguous-ranges.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx b/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx new file mode 100644 index 0000000000..479d02aa19 --- /dev/null +++ b/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/page-behaviour.ts b/apps/docs/content/components/range-calendar/page-behaviour.ts index 3408f23cc9..ef31c845d8 100644 --- a/apps/docs/content/components/range-calendar/page-behaviour.ts +++ b/apps/docs/content/components/range-calendar/page-behaviour.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./page-behaviour.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/presets.raw.jsx b/apps/docs/content/components/range-calendar/presets.raw.jsx new file mode 100644 index 0000000000..93e1902856 --- /dev/null +++ b/apps/docs/content/components/range-calendar/presets.raw.jsx @@ -0,0 +1,116 @@ +import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [value, setValue] = React.useState({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), + }); + let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); + + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextMonth = now.add({months: 1}); + + let nextWeek = { + start: startOfWeek(now.add({weeks: 1}), locale), + end: endOfWeek(now.add({weeks: 1}), locale), + }; + let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; + let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
+ + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + classNames={{ + content: "w-full", + }} + focusedValue={focusedValue} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setFocusedValue} + /> +
+ ); +} diff --git a/apps/docs/content/components/range-calendar/presets.raw.tsx b/apps/docs/content/components/range-calendar/presets.raw.tsx new file mode 100644 index 0000000000..f1c42cc0e7 --- /dev/null +++ b/apps/docs/content/components/range-calendar/presets.raw.tsx @@ -0,0 +1,125 @@ +import type {DateValue} from "@react-types/calendar"; +import type {RangeValue} from "@react-types/shared"; + +import React from "react"; +import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; +import { + today, + getLocalTimeZone, + startOfWeek, + endOfWeek, + startOfMonth, + endOfMonth, +} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let [value, setValue] = React.useState>({ + start: today(getLocalTimeZone()), + end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), + }); + + let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); + + let {locale} = useLocale(); + + let now = today(getLocalTimeZone()); + let nextMonth = now.add({months: 1}); + + let nextWeek = { + start: startOfWeek(now.add({weeks: 1}), locale), + end: endOfWeek(now.add({weeks: 1}), locale), + }; + let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; + let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; + + const CustomRadio = (props) => { + const {children, ...otherProps} = props; + + return ( + + {children} + + ); + }; + + return ( +
+ + Exact dates + 1 day + 2 days + 3 days + 7 days + 14 days + + } + focusedValue={focusedValue} + nextButtonProps={{ + variant: "bordered", + }} + prevButtonProps={{ + variant: "bordered", + }} + topContent={ + + + + + + } + value={value} + onChange={setValue} + onFocusChange={setFocusedValue} + /> +
+ ); +} diff --git a/apps/docs/content/components/range-calendar/presets.ts b/apps/docs/content/components/range-calendar/presets.ts index a6157ae288..334d59a763 100644 --- a/apps/docs/content/components/range-calendar/presets.ts +++ b/apps/docs/content/components/range-calendar/presets.ts @@ -1,238 +1,5 @@ -const App = `import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let [value, setValue] = React.useState({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), - }); - let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); - - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextMonth = now.add({months: 1}); - - let nextWeek = { - start: startOfWeek(now.add({weeks: 1}), locale), - end: endOfWeek(now.add({weeks: 1}), locale), - }; - let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; - let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; - - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
- - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - classNames={{ - content: "w-full", - }} - focusedValue={focusedValue} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setFocusedValue} - /> -
- ); -}`; - -const AppTs = `import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react"; -import type {DateValue} from "@react-types/calendar"; -import type {RangeValue} from "@react-types/shared"; -import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - -export default function App() { - let [value, setValue] = React.useState>({ - start: today(getLocalTimeZone()), - end: today(getLocalTimeZone()).add({weeks: 1, days: 3}), - }); - - let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone())); - - let {locale} = useLocale(); - - let now = today(getLocalTimeZone()); - let nextMonth = now.add({months: 1}); - - let nextWeek = { - start: startOfWeek(now.add({weeks: 1}), locale), - end: endOfWeek(now.add({weeks: 1}), locale), - }; - let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)}; - let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)}; - - - const CustomRadio = (props) => { - const {children, ...otherProps} = props; - - return ( - - {children} - - ); - }; - - return ( -
- - Exact dates - 1 day - 2 days - 3 days - 7 days - 14 days - - } - focusedValue={focusedValue} - nextButtonProps={{ - variant: "bordered", - }} - prevButtonProps={{ - variant: "bordered", - }} - topContent={ - - - - - - } - value={value} - onChange={setValue} - onFocusChange={setFocusedValue} - /> -
- ); -}`; +import App from "./presets.raw.jsx?raw"; +import AppTs from "./presets.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/read-only.raw.jsx b/apps/docs/content/components/range-calendar/read-only.raw.jsx new file mode 100644 index 0000000000..3a6ba6e3fd --- /dev/null +++ b/apps/docs/content/components/range-calendar/read-only.raw.jsx @@ -0,0 +1,15 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/range-calendar/read-only.ts b/apps/docs/content/components/range-calendar/read-only.ts index 1badad0004..caf4be10cf 100644 --- a/apps/docs/content/components/range-calendar/read-only.ts +++ b/apps/docs/content/components/range-calendar/read-only.ts @@ -1,18 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from "@internationalized/date"; - -export default function App() { - return ( - - ); -}`; +import App from "./read-only.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx b/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx new file mode 100644 index 0000000000..3803115132 --- /dev/null +++ b/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx @@ -0,0 +1,23 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; +import {useLocale} from "@react-aria/i18n"; + +export default function App() { + let now = today(getLocalTimeZone()); + + let disabledRanges = [ + [now, now.add({days: 5})], + [now.add({days: 14}), now.add({days: 16})], + [now.add({days: 23}), now.add({days: 24})], + ]; + + let {locale} = useLocale(); + + let isDateUnavailable = (date) => + isWeekend(date, locale) || + disabledRanges.some( + (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, + ); + + return ; +} diff --git a/apps/docs/content/components/range-calendar/unavailable-dates.ts b/apps/docs/content/components/range-calendar/unavailable-dates.ts index 6d656ff8f3..b4e1f4df1a 100644 --- a/apps/docs/content/components/range-calendar/unavailable-dates.ts +++ b/apps/docs/content/components/range-calendar/unavailable-dates.ts @@ -1,32 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone, isWeekend} from "@internationalized/date"; -import {useLocale} from "@react-aria/i18n"; - - -export default function App() { - let now = today(getLocalTimeZone()); - - let disabledRanges = [ - [now, now.add({days: 5})], - [now.add({days: 14}), now.add({days: 16})], - [now.add({days: 23}), now.add({days: 24})], - ]; - - let {locale} = useLocale(); - - let isDateUnavailable = (date) => - isWeekend(date, locale) || - disabledRanges.some( - (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0, - ); - - return ( - - ); -}`; +import App from "./unavailable-dates.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/usage.raw.jsx b/apps/docs/content/components/range-calendar/usage.raw.jsx new file mode 100644 index 0000000000..1e81856a24 --- /dev/null +++ b/apps/docs/content/components/range-calendar/usage.raw.jsx @@ -0,0 +1,17 @@ +import {RangeCalendar} from "@nextui-org/react"; +import {today, getLocalTimeZone} from "@internationalized/date"; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/range-calendar/usage.ts b/apps/docs/content/components/range-calendar/usage.ts index 7cbaeec6e0..1118304c37 100644 --- a/apps/docs/content/components/range-calendar/usage.ts +++ b/apps/docs/content/components/range-calendar/usage.ts @@ -1,20 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; -import {today, getLocalTimeZone} from '@internationalized/date'; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/visible-months.raw.jsx b/apps/docs/content/components/range-calendar/visible-months.raw.jsx new file mode 100644 index 0000000000..bbefbd53e6 --- /dev/null +++ b/apps/docs/content/components/range-calendar/visible-months.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/visible-months.ts b/apps/docs/content/components/range-calendar/visible-months.ts index a669107921..38c2db8f01 100644 --- a/apps/docs/content/components/range-calendar/visible-months.ts +++ b/apps/docs/content/components/range-calendar/visible-months.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./visible-months.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx b/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx new file mode 100644 index 0000000000..98e50fce5e --- /dev/null +++ b/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx @@ -0,0 +1,5 @@ +import {RangeCalendar} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts b/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts index 05581f78a1..53df2d1367 100644 --- a/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts +++ b/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts @@ -1,13 +1,4 @@ -const App = `import {RangeCalendar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./with-month-and-year-picker.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx new file mode 100644 index 0000000000..d31e069dd5 --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
+

+ Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

+

+ Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

+

+ Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

+

+ Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

+

+ Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

+

+ Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

+

+ Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

+

+ Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

+

+ Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

+
+); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/custom-size.ts b/apps/docs/content/components/scroll-shadow/custom-size.ts index 5df7bfd1c5..bdac09246a 100644 --- a/apps/docs/content/components/scroll-shadow/custom-size.ts +++ b/apps/docs/content/components/scroll-shadow/custom-size.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = () => ( -
-

- Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

-

- Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

-

- Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

-

- Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

-

- Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

-

- Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

-

- Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

-

- Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

-

- Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

-
-);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./custom-size.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx new file mode 100644 index 0000000000..9f2fdf5ba2 --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
+

+ Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

+

+ Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

+

+ Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

+

+ Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

+

+ Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

+

+ Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

+

+ Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

+

+ Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

+

+ Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

+
+); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts index 74e82bc299..c431601bc5 100644 --- a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts +++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = () => ( -
-

- Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

-

- Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

-

- Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

-

- Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

-

- Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

-

- Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

-

- Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

-

- Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

-

- Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

-
-);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./hide-scrollbar.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx new file mode 100644 index 0000000000..4da067924e --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
+

+ Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

+

+ Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

+

+ Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

+

+ Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

+

+ Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

+

+ Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

+

+ Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

+

+ Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

+

+ Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

+
+); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/horizontal.ts b/apps/docs/content/components/scroll-shadow/horizontal.ts index a9a1d87cd3..60be4b4077 100644 --- a/apps/docs/content/components/scroll-shadow/horizontal.ts +++ b/apps/docs/content/components/scroll-shadow/horizontal.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = ({className}) => ( -
-

- Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

-

- Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

-

- Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

-

- Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

-

- Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

-

- Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

-

- Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

-

- Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

-

- Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

-
-);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./horizontal.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/offset.raw.jsx b/apps/docs/content/components/scroll-shadow/offset.raw.jsx new file mode 100644 index 0000000000..e5a237b0e7 --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/offset.raw.jsx @@ -0,0 +1,79 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
+

+ Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

+

+ Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

+

+ Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

+

+ Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

+

+ Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

+

+ Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

+

+ Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

+

+ Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

+

+ Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

+
+); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/offset.ts b/apps/docs/content/components/scroll-shadow/offset.ts index 9980333ad5..2fb601047c 100644 --- a/apps/docs/content/components/scroll-shadow/offset.ts +++ b/apps/docs/content/components/scroll-shadow/offset.ts @@ -1,57 +1,7 @@ -const Content = `export const Content = ({className}) => ( -
-

- Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

-

- Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

-

- Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

-

- Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

-

- Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

-

- Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

-

- Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

-

- Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

-

- Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

-
-);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./offset.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/scroll-shadow/usage.raw.jsx b/apps/docs/content/components/scroll-shadow/usage.raw.jsx new file mode 100644 index 0000000000..12f96b5ff0 --- /dev/null +++ b/apps/docs/content/components/scroll-shadow/usage.raw.jsx @@ -0,0 +1,74 @@ +import {ScrollShadow} from "@nextui-org/react"; + +export const Content = () => ( +
+

+ Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id + consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim + nostrud elit officia tempor esse quis. +

+

+ Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor + cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum + quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit + incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa + deserunt nostrud ad veniam. +

+

+ Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea + laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. + Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et + ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. +

+

+ Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud + laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident + fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. + Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit + quis aute in elit magna ullamco in consequat ex proident. +

+

+ Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat + velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing + tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi + do ullamco in quis elit. +

+

+ Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud + pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation + cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor + consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua + deserunt cupidatat consequat id. +

+

+ Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor + incididunt aliquip minim elit ea. Exercitation non officia eu id. +

+

+ Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. + Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. + Officia duis ea sunt aliqua. +

+

+ Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut + dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea + et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum + dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. +

+

+ Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. + Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat + eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam + cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id + voluptate. +

+
+); + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/scroll-shadow/usage.ts b/apps/docs/content/components/scroll-shadow/usage.ts index 5c911e8a84..1118304c37 100644 --- a/apps/docs/content/components/scroll-shadow/usage.ts +++ b/apps/docs/content/components/scroll-shadow/usage.ts @@ -1,52 +1,7 @@ -const Content = `export const Content = () => ( -
-

- Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. -

-

- Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. -

-

- Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. -

-

- Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident. -

-

- Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit. -

-

- Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id. -

-

- Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id. -

-

- Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua. -

-

- Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation. -

-

- Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate. -

-
-);`; - -const App = `import {ScrollShadow} from "@nextui-org/react"; -import {Content} from "./Content"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/Content.jsx": Content, }; export default { diff --git a/apps/docs/content/components/select/async-loading-items.raw.jsx b/apps/docs/content/components/select/async-loading-items.raw.jsx new file mode 100644 index 0000000000..9e6e7713b8 --- /dev/null +++ b/apps/docs/content/components/select/async-loading-items.raw.jsx @@ -0,0 +1,98 @@ +import {Select, SelectItem} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; + +export function usePokemonList({fetchDelay = 0} = {}) { + const [items, setItems] = React.useState([]); + const [hasMore, setHasMore] = React.useState(true); + const [isLoading, setIsLoading] = React.useState(false); + const [offset, setOffset] = React.useState(0); + const limit = 10; // Number of items per page, adjust as necessary + + const loadPokemon = async (currentOffset) => { + const controller = new AbortController(); + const {signal} = controller; + + try { + setIsLoading(true); + + if (offset > 0) { + // Delay to simulate network latency + await new Promise((resolve) => setTimeout(resolve, fetchDelay)); + } + + let res = await fetch( + `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`, + {signal}, + ); + + if (!res.ok) { + throw new Error("Network response was not ok"); + } + + let json = await res.json(); + + setHasMore(json.next !== null); + // Append new results to existing ones + setItems((prevItems) => [...prevItems, ...json.results]); + } catch (error) { + if (error.name === "AbortError") { + // eslint-disable-next-line no-console + console.log("Fetch aborted"); + } else { + // eslint-disable-next-line no-console + console.error("There was an error with the fetch operation:", error); + } + } finally { + setIsLoading(false); + } + }; + + React.useEffect(() => { + loadPokemon(offset); + }, []); + + const onLoadMore = () => { + const newOffset = offset + limit; + + setOffset(newOffset); + loadPokemon(newOffset); + }; + + return { + items, + hasMore, + isLoading, + onLoadMore, + }; +} + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); + + const [, scrollerRef] = useInfiniteScroll({ + hasMore, + isEnabled: isOpen, + shouldUseLoader: false, // We don't want to show the loader at the bottom of the list + onLoadMore, + }); + + return ( + + ); +} diff --git a/apps/docs/content/components/select/async-loading-items.raw.tsx b/apps/docs/content/components/select/async-loading-items.raw.tsx new file mode 100644 index 0000000000..1353c9b5e2 --- /dev/null +++ b/apps/docs/content/components/select/async-loading-items.raw.tsx @@ -0,0 +1,108 @@ +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; + +export type Pokemon = { + name: string; + url: string; +}; + +export type UsePokemonListProps = { + /** Delay to wait before fetching more items */ + fetchDelay?: number; +}; + +export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) { + const [items, setItems] = React.useState([]); + const [hasMore, setHasMore] = React.useState(true); + const [isLoading, setIsLoading] = React.useState(false); + const [offset, setOffset] = React.useState(0); + const limit = 10; // Number of items per page, adjust as necessary + + const loadPokemon = async (currentOffset: number) => { + const controller = new AbortController(); + const {signal} = controller; + + try { + setIsLoading(true); + + if (offset > 0) { + // Delay to simulate network latency + await new Promise((resolve) => setTimeout(resolve, fetchDelay)); + } + + let res = await fetch( + `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`, + {signal}, + ); + + if (!res.ok) { + throw new Error("Network response was not ok"); + } + + let json = await res.json(); + + setHasMore(json.next !== null); + // Append new results to existing ones + setItems((prevItems) => [...prevItems, ...json.results]); + } catch (error) { + if (error.name === "AbortError") { + // eslint-disable-next-line no-console + console.log("Fetch aborted"); + } else { + // eslint-disable-next-line no-console + console.error("There was an error with the fetch operation:", error); + } + } finally { + setIsLoading(false); + } + }; + + React.useEffect(() => { + loadPokemon(offset); + }, []); + + const onLoadMore = () => { + const newOffset = offset + limit; + + setOffset(newOffset); + loadPokemon(newOffset); + }; + + return { + items, + hasMore, + isLoading, + onLoadMore, + }; +} +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); + + const [, scrollerRef] = useInfiniteScroll({ + hasMore, + isEnabled: isOpen, + shouldUseLoader: false, // We don't want to show the loader at the bottom of the list + onLoadMore, + }); + + return ( + + ); +} diff --git a/apps/docs/content/components/select/async-loading-items.ts b/apps/docs/content/components/select/async-loading-items.ts index c6de820cab..a69188c565 100644 --- a/apps/docs/content/components/select/async-loading-items.ts +++ b/apps/docs/content/components/select/async-loading-items.ts @@ -1,184 +1,12 @@ -const usePokemonListTs = `export type Pokemon = { - name: string; - url: string; -}; - -export type UsePokemonListProps = { - /** Delay to wait before fetching more items */ - fetchDelay?: number; -}; - -export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) { - const [items, setItems] = React.useState([]); - const [hasMore, setHasMore] = React.useState(true); - const [isLoading, setIsLoading] = React.useState(false); - const [offset, setOffset] = React.useState(0); - const limit = 10; // Number of items per page, adjust as necessary - - const loadPokemon = async (currentOffset: number) => { - const controller = new AbortController(); - const {signal} = controller; - - try { - setIsLoading(true); - - if (offset > 0) { - // Delay to simulate network latency - await new Promise((resolve) => setTimeout(resolve, fetchDelay)); - } - - let res = await fetch( - \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, - {signal}, - ); - - if (!res.ok) { - throw new Error("Network response was not ok"); - } - - let json = await res.json(); - - setHasMore(json.next !== null); - // Append new results to existing ones - setItems((prevItems) => [...prevItems, ...json.results]); - } catch (error) { - if (error.name === "AbortError") { - console.log("Fetch aborted"); - } else { - console.error("There was an error with the fetch operation:", error); - } - } finally { - setIsLoading(false); - } - }; - - React.useEffect(() => { - loadPokemon(offset); - }, []); - - const onLoadMore = () => { - const newOffset = offset + limit; - - setOffset(newOffset); - loadPokemon(newOffset); - }; - - return { - items, - hasMore, - isLoading, - onLoadMore, - }; -} - -`; - -const usePokemonList = `export function usePokemonList({fetchDelay = 0} = {}) { - const [items, setItems] = React.useState([]); - const [hasMore, setHasMore] = React.useState(true); - const [isLoading, setIsLoading] = React.useState(false); - const [offset, setOffset] = React.useState(0); - const limit = 10; // Number of items per page, adjust as necessary - - const loadPokemon = async (currentOffset) => { - const controller = new AbortController(); - const {signal} = controller; - - try { - setIsLoading(true); - - if (offset > 0) { - // Delay to simulate network latency - await new Promise((resolve) => setTimeout(resolve, fetchDelay)); - } - - let res = await fetch( - \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`, - {signal}, - ); - - if (!res.ok) { - throw new Error("Network response was not ok"); - } - - let json = await res.json(); - - setHasMore(json.next !== null); - // Append new results to existing ones - setItems((prevItems) => [...prevItems, ...json.results]); - } catch (error) { - if (error.name === "AbortError") { - console.log("Fetch aborted"); - } else { - console.error("There was an error with the fetch operation:", error); - } - } finally { - setIsLoading(false); - } - }; - - React.useEffect(() => { - loadPokemon(offset); - }, []); - - const onLoadMore = () => { - const newOffset = offset + limit; - - setOffset(newOffset); - loadPokemon(newOffset); - }; - - return { - items, - hasMore, - isLoading, - onLoadMore, - }; -};`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; -import {usePokemonList} from "./usePokemonList"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500}); - - const [, scrollerRef] = useInfiniteScroll({ - hasMore, - isEnabled: isOpen, - shouldUseLoader: false, // We don't want to show the loader at the bottom of the list - onLoadMore, - }); - - return ( - - ); -}`; +import App from "./async-loading-items.raw.jsx?raw"; +import AppTs from "./async-loading-items.raw.tsx?raw"; const react = { "/App.jsx": App, - "/usePokemonList.js": usePokemonList, }; const reactTs = { - "/App.tsx": App, - "/usePokemonList.ts": usePokemonListTs, + "/App.tsx": AppTs, }; export default { diff --git a/apps/docs/content/components/select/colors.raw.jsx b/apps/docs/content/components/select/colors.raw.jsx new file mode 100644 index 0000000000..1732747ba5 --- /dev/null +++ b/apps/docs/content/components/select/colors.raw.jsx @@ -0,0 +1,40 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/select/colors.ts b/apps/docs/content/components/select/colors.ts index c830262ca1..d5bef810aa 100644 --- a/apps/docs/content/components/select/colors.ts +++ b/apps/docs/content/components/select/colors.ts @@ -1,57 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -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, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/custom-items.raw.jsx b/apps/docs/content/components/select/custom-items.raw.jsx new file mode 100644 index 0000000000..b1b78c716a --- /dev/null +++ b/apps/docs/content/components/select/custom-items.raw.jsx @@ -0,0 +1,228 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-items.ts b/apps/docs/content/components/select/custom-items.ts index 66f7d96dd7..26a1e0f9ac 100644 --- a/apps/docs/content/components/select/custom-items.ts +++ b/apps/docs/content/components/select/custom-items.ts @@ -1,236 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/custom-render-value.raw.jsx b/apps/docs/content/components/select/custom-render-value.raw.jsx new file mode 100644 index 0000000000..c038d4d13a --- /dev/null +++ b/apps/docs/content/components/select/custom-render-value.raw.jsx @@ -0,0 +1,247 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-render-value.raw.tsx b/apps/docs/content/components/select/custom-render-value.raw.tsx new file mode 100644 index 0000000000..b46f9def2c --- /dev/null +++ b/apps/docs/content/components/select/custom-render-value.raw.tsx @@ -0,0 +1,259 @@ +import React from "react"; +import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +type User = { + id: number; + name: string; + role: string; + team: string; + status: string; + age: string; + avatar: string; + email: string; +}; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-render-value.ts b/apps/docs/content/components/select/custom-render-value.ts index dc52e11211..3d16320688 100644 --- a/apps/docs/content/components/select/custom-render-value.ts +++ b/apps/docs/content/components/select/custom-render-value.ts @@ -1,317 +1,12 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; - -const AppTs = `import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react"; -import {users} from "./data"; - -type User = { - id: number; - name: string; - role: string; - team: string; - status: string; - age: string; - avatar: string; - email: string; -}; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-render-value.raw.jsx?raw"; +import AppTs from "./custom-render-value.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/select/custom-sections-style.raw.jsx b/apps/docs/content/components/select/custom-sections-style.raw.jsx new file mode 100644 index 0000000000..17826ba15c --- /dev/null +++ b/apps/docs/content/components/select/custom-sections-style.raw.jsx @@ -0,0 +1,48 @@ +import {Select, SelectItem, SelectSection} from "@nextui-org/react"; + +export default function App() { + const headingClasses = + "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; + + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-sections-style.ts b/apps/docs/content/components/select/custom-sections-style.ts index 9551a80049..9ba8a6cd9c 100644 --- a/apps/docs/content/components/select/custom-sections-style.ts +++ b/apps/docs/content/components/select/custom-sections-style.ts @@ -1,50 +1,4 @@ -const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react"; - -export default function App() { - const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small"; - - return ( - - ); -}`; +import App from "./custom-sections-style.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/select/custom-selector-icon.raw.jsx b/apps/docs/content/components/select/custom-selector-icon.raw.jsx new file mode 100644 index 0000000000..f63192b0b5 --- /dev/null +++ b/apps/docs/content/components/select/custom-selector-icon.raw.jsx @@ -0,0 +1,57 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const SelectorIcon = (props) => { + return ( + + ); +}; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-selector-icon.ts b/apps/docs/content/components/select/custom-selector-icon.ts index 18770cfb44..ee2c7d9a8b 100644 --- a/apps/docs/content/components/select/custom-selector-icon.ts +++ b/apps/docs/content/components/select/custom-selector-icon.ts @@ -1,67 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const SelectorIcon = `export const SelectorIcon = (props) => ( - -);`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {SelectorIcon} from "./SelectorIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-selector-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/SelectorIcon.jsx": SelectorIcon, }; export default { diff --git a/apps/docs/content/components/select/custom-styles.raw.jsx b/apps/docs/content/components/select/custom-styles.raw.jsx new file mode 100644 index 0000000000..6aad7b60dc --- /dev/null +++ b/apps/docs/content/components/select/custom-styles.raw.jsx @@ -0,0 +1,269 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/custom-styles.ts b/apps/docs/content/components/select/custom-styles.ts index ae2db45e8a..da3ea9093a 100644 --- a/apps/docs/content/components/select/custom-styles.ts +++ b/apps/docs/content/components/select/custom-styles.ts @@ -1,277 +1,7 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/description.raw.jsx b/apps/docs/content/components/select/description.raw.jsx new file mode 100644 index 0000000000..ead30aaa95 --- /dev/null +++ b/apps/docs/content/components/select/description.raw.jsx @@ -0,0 +1,33 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/description.ts b/apps/docs/content/components/select/description.ts index b39c36847d..aeb6340b6b 100644 --- a/apps/docs/content/components/select/description.ts +++ b/apps/docs/content/components/select/description.ts @@ -1,43 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./description.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/disabled-items.raw.jsx b/apps/docs/content/components/select/disabled-items.raw.jsx new file mode 100644 index 0000000000..fcebedbb83 --- /dev/null +++ b/apps/docs/content/components/select/disabled-items.raw.jsx @@ -0,0 +1,32 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/disabled-items.ts b/apps/docs/content/components/select/disabled-items.ts index 64bed55e89..4ff907eed2 100644 --- a/apps/docs/content/components/select/disabled-items.ts +++ b/apps/docs/content/components/select/disabled-items.ts @@ -1,42 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled-items.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/disabled.raw.jsx b/apps/docs/content/components/select/disabled.raw.jsx new file mode 100644 index 0000000000..401ae52a4d --- /dev/null +++ b/apps/docs/content/components/select/disabled.raw.jsx @@ -0,0 +1,33 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/disabled.ts b/apps/docs/content/components/select/disabled.ts index dc9b756812..1a215cc91f 100644 --- a/apps/docs/content/components/select/disabled.ts +++ b/apps/docs/content/components/select/disabled.ts @@ -1,43 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/dynamic.raw.jsx b/apps/docs/content/components/select/dynamic.raw.jsx new file mode 100644 index 0000000000..5796f069eb --- /dev/null +++ b/apps/docs/content/components/select/dynamic.raw.jsx @@ -0,0 +1,30 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/dynamic.ts b/apps/docs/content/components/select/dynamic.ts index 6a7c5304c9..5d3c97bb9a 100644 --- a/apps/docs/content/components/select/dynamic.ts +++ b/apps/docs/content/components/select/dynamic.ts @@ -1,38 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/error-message.raw.jsx b/apps/docs/content/components/select/error-message.raw.jsx new file mode 100644 index 0000000000..a4499144e7 --- /dev/null +++ b/apps/docs/content/components/select/error-message.raw.jsx @@ -0,0 +1,43 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(new Set([])); + const [touched, setTouched] = React.useState(false); + + const isValid = value.has("cat"); + + return ( + + ); +} diff --git a/apps/docs/content/components/select/error-message.ts b/apps/docs/content/components/select/error-message.ts index 416a1d49bb..fb8101b132 100644 --- a/apps/docs/content/components/select/error-message.ts +++ b/apps/docs/content/components/select/error-message.ts @@ -1,53 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(new Set([])); - const [touched, setTouched] = React.useState(false); - - const isValid = value.has("cat"); - - return ( - - ); -}`; +import App from "./error-message.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/item-start-content.raw.jsx b/apps/docs/content/components/select/item-start-content.raw.jsx new file mode 100644 index 0000000000..9006a2bf1b --- /dev/null +++ b/apps/docs/content/components/select/item-start-content.raw.jsx @@ -0,0 +1,68 @@ +import {Select, SelectItem, Avatar} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/item-start-content.ts b/apps/docs/content/components/select/item-start-content.ts index ddf3818b25..294a22e6b2 100644 --- a/apps/docs/content/components/select/item-start-content.ts +++ b/apps/docs/content/components/select/item-start-content.ts @@ -1,70 +1,4 @@ -const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./item-start-content.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/select/label-placements.raw.jsx b/apps/docs/content/components/select/label-placements.raw.jsx new file mode 100644 index 0000000000..86982bafb1 --- /dev/null +++ b/apps/docs/content/components/select/label-placements.raw.jsx @@ -0,0 +1,61 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const placements = ["inside", "outside", "outside-left"]; + + return ( +
+
+

Without placeholder

+
+ {placements.map((placement) => ( + + ))} +
+
+
+

With placeholder

+
+ {placements.map((placement) => ( + + ))} +
+
+
+ ); +} diff --git a/apps/docs/content/components/select/label-placements.ts b/apps/docs/content/components/select/label-placements.ts index a147bb84a7..cd2a65d352 100644 --- a/apps/docs/content/components/select/label-placements.ts +++ b/apps/docs/content/components/select/label-placements.ts @@ -1,75 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const placements = [ - "inside", - "outside", - "outside-left", - ]; - - return ( -
-
-

Without placeholder

-
- {placements.map((placement) => ( - - ))} -
-
-
-

With placeholder

-
- {placements.map((placement) => ( - - ))} -
-
-
- ); -}`; +import App from "./label-placements.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/multiple-chips.raw.jsx b/apps/docs/content/components/select/multiple-chips.raw.jsx new file mode 100644 index 0000000000..3c0dd44cad --- /dev/null +++ b/apps/docs/content/components/select/multiple-chips.raw.jsx @@ -0,0 +1,243 @@ +import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/multiple-chips.raw.tsx b/apps/docs/content/components/select/multiple-chips.raw.tsx new file mode 100644 index 0000000000..18f206aed9 --- /dev/null +++ b/apps/docs/content/components/select/multiple-chips.raw.tsx @@ -0,0 +1,255 @@ +import React from "react"; +import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react"; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", + email: "mia.robinson@example.com", + }, +]; + +type User = { + id: number; + name: string; + role: string; + team: string; + status: string; + age: string; + avatar: string; + email: string; +}; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/multiple-chips.ts b/apps/docs/content/components/select/multiple-chips.ts index 1919c994ea..0c169cde37 100644 --- a/apps/docs/content/components/select/multiple-chips.ts +++ b/apps/docs/content/components/select/multiple-chips.ts @@ -1,309 +1,12 @@ -const data = `export const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", - email: "mia.robinson@example.com", - }, -];`; - -const App = `import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - return ( - - ); -}`; - -const AppTs = `import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react"; -import {users} from "./data"; - -type User = { - id: number; - name: string; - role: string; - team: string; - status: string; - age: string; - avatar: string; - email: string; -}; - -export default function App() { - return ( - - ); -}`; +import App from "./multiple-chips.raw.jsx?raw"; +import AppTs from "./multiple-chips.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx new file mode 100644 index 0000000000..1b79957568 --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx @@ -0,0 +1,43 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set([])); + + const handleSelectionChange = (e) => { + setValues(new Set(e.target.value.split(","))); + }; + + return ( +
+ +

Selected: {Array.from(values).join(", ")}

+
+ ); +} diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx new file mode 100644 index 0000000000..d171292536 --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx @@ -0,0 +1,46 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set([])); + + const handleSelectionChange = (e: React.ChangeEvent) => { + setValues(new Set(e.target.value.split(","))); + }; + + return ( +
+ +

Selected: {Array.from(values).join(", ")}

+
+ ); +} diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.ts b/apps/docs/content/components/select/multiple-controlled-onchange.ts index e12d5cf7d3..a8b2a21759 100644 --- a/apps/docs/content/components/select/multiple-controlled-onchange.ts +++ b/apps/docs/content/components/select/multiple-controlled-onchange.ts @@ -1,89 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set([])); - - const handleSelectionChange = (e) => { - setValues(new Set(e.target.value.split(","))); - }; - - return ( -
- -

Selected: {Array.from(values).join(", ")}

-
- ); -}`; - -const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set([])); - - const handleSelectionChange = (e: React.ChangeEvent) => { - setValues(new Set(e.target.value.split(","))); - }; - - return ( -
- -

Selected: {Array.from(values).join(", ")}

-
- ); -}`; +import App from "./multiple-controlled-onchange.raw.jsx?raw"; +import AppTs from "./multiple-controlled-onchange.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/select/multiple-controlled.raw.jsx b/apps/docs/content/components/select/multiple-controlled.raw.jsx new file mode 100644 index 0000000000..0d18ab0e6e --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled.raw.jsx @@ -0,0 +1,39 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set(["cat", "dog"])); + + return ( +
+ +

Selected: {Array.from(values).join(", ")}

+
+ ); +} diff --git a/apps/docs/content/components/select/multiple-controlled.raw.tsx b/apps/docs/content/components/select/multiple-controlled.raw.tsx new file mode 100644 index 0000000000..c9b9d3f8bf --- /dev/null +++ b/apps/docs/content/components/select/multiple-controlled.raw.tsx @@ -0,0 +1,42 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [values, setValues] = React.useState(new Set(["cat", "dog"])); + + return ( +
+ +

Selected: {Array.from(values).join(", ")}

+
+ ); +} diff --git a/apps/docs/content/components/select/multiple-controlled.ts b/apps/docs/content/components/select/multiple-controlled.ts index 2bfc63c6c7..ebc28a01db 100644 --- a/apps/docs/content/components/select/multiple-controlled.ts +++ b/apps/docs/content/components/select/multiple-controlled.ts @@ -1,81 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["cat", "dog"])); - - return ( -
- -

Selected: {Array.from(values).join(", ")}

-
- ); -}`; - -const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [values, setValues] = React.useState(new Set(["cat", "dog"])); - - return ( -
- -

Selected: {Array.from(values).join(", ")}

-
- ); -}`; +import App from "./multiple-controlled.raw.jsx?raw"; +import AppTs from "./multiple-controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.ts": data, }; export default { diff --git a/apps/docs/content/components/select/multiple.raw.jsx b/apps/docs/content/components/select/multiple.raw.jsx new file mode 100644 index 0000000000..71bf4b1465 --- /dev/null +++ b/apps/docs/content/components/select/multiple.raw.jsx @@ -0,0 +1,32 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/multiple.ts b/apps/docs/content/components/select/multiple.ts index 5edb2da50f..8ad090fa27 100644 --- a/apps/docs/content/components/select/multiple.ts +++ b/apps/docs/content/components/select/multiple.ts @@ -1,42 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./multiple.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/open-state.raw.jsx b/apps/docs/content/components/select/open-state.raw.jsx new file mode 100644 index 0000000000..bd553f9d07 --- /dev/null +++ b/apps/docs/content/components/select/open-state.raw.jsx @@ -0,0 +1,41 @@ +import {Select, SelectItem, Button} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/select/open-state.ts b/apps/docs/content/components/select/open-state.ts index 97e13a99a7..5d40fb0bf0 100644 --- a/apps/docs/content/components/select/open-state.ts +++ b/apps/docs/content/components/select/open-state.ts @@ -1,51 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem, Button} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - - return ( -
- - -
- ); -}`; +import App from "./open-state.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/radius.raw.jsx b/apps/docs/content/components/select/radius.raw.jsx new file mode 100644 index 0000000000..9375e69cb6 --- /dev/null +++ b/apps/docs/content/components/select/radius.raw.jsx @@ -0,0 +1,40 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
+ {radius.map((r) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/select/radius.ts b/apps/docs/content/components/select/radius.ts index 543c0c91df..7b78db1ce0 100644 --- a/apps/docs/content/components/select/radius.ts +++ b/apps/docs/content/components/select/radius.ts @@ -1,56 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const radius = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
- {radius.map((r) => ( - - ))} -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/required.raw.jsx b/apps/docs/content/components/select/required.raw.jsx new file mode 100644 index 0000000000..9a9f4f0cbd --- /dev/null +++ b/apps/docs/content/components/select/required.raw.jsx @@ -0,0 +1,33 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/required.ts b/apps/docs/content/components/select/required.ts index f6447eba53..b50b781e6f 100644 --- a/apps/docs/content/components/select/required.ts +++ b/apps/docs/content/components/select/required.ts @@ -1,43 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./required.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/sections.raw.jsx b/apps/docs/content/components/select/sections.raw.jsx new file mode 100644 index 0000000000..30a61aa009 --- /dev/null +++ b/apps/docs/content/components/select/sections.raw.jsx @@ -0,0 +1,28 @@ +import {Select, SelectItem, SelectSection} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/sections.ts b/apps/docs/content/components/select/sections.ts index e1c02ebdb4..17cd360ea3 100644 --- a/apps/docs/content/components/select/sections.ts +++ b/apps/docs/content/components/select/sections.ts @@ -1,35 +1,4 @@ -const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./sections.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.jsx b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx new file mode 100644 index 0000000000..43b41a4e27 --- /dev/null +++ b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx @@ -0,0 +1,43 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + + const handleSelectionChange = (e) => { + setValue(e.target.value); + }; + + return ( +
+ +

Selected: {value}

+
+ ); +} diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.tsx b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx new file mode 100644 index 0000000000..c5199449ce --- /dev/null +++ b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + + const handleSelectionChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + }; + + return ( +
+ +

Selected: {value}

+
+ ); +} diff --git a/apps/docs/content/components/select/single-controlled-onchange.ts b/apps/docs/content/components/select/single-controlled-onchange.ts index b74254621a..3b52be133b 100644 --- a/apps/docs/content/components/select/single-controlled-onchange.ts +++ b/apps/docs/content/components/select/single-controlled-onchange.ts @@ -1,89 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(""); - - const handleSelectionChange = (e) => { - setValue(e.target.value); - }; - - return ( -
- -

Selected: {value}

-
- ); -}`; - -const AppTs = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(""); - - const handleSelectionChange = (e: React.ChangeEvent) => { - setValue(e.target.value); - }; - - return ( -
- -

Selected: {value}

-
- ); -}`; +import App from "./single-controlled-onchange.raw.jsx?raw"; +import AppTs from "./single-controlled-onchange.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/single-controlled.raw.jsx b/apps/docs/content/components/select/single-controlled.raw.jsx new file mode 100644 index 0000000000..a066013863 --- /dev/null +++ b/apps/docs/content/components/select/single-controlled.raw.jsx @@ -0,0 +1,39 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(new Set([])); + + return ( +
+ +

Selected: {value}

+
+ ); +} diff --git a/apps/docs/content/components/select/single-controlled.raw.tsx b/apps/docs/content/components/select/single-controlled.raw.tsx new file mode 100644 index 0000000000..13a1a847c0 --- /dev/null +++ b/apps/docs/content/components/select/single-controlled.raw.tsx @@ -0,0 +1,42 @@ +import type {Selection} from "@nextui-org/react"; + +import React from "react"; +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const [value, setValue] = React.useState(new Set([])); + + return ( +
+ +

Selected: {value}

+
+ ); +} diff --git a/apps/docs/content/components/select/single-controlled.ts b/apps/docs/content/components/select/single-controlled.ts index cae9bd5401..44c55e0568 100644 --- a/apps/docs/content/components/select/single-controlled.ts +++ b/apps/docs/content/components/select/single-controlled.ts @@ -1,81 +1,12 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(new Set([])); - - return ( -
- -

Selected: {value}

-
- ); -}`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const [value, setValue] = React.useState(new Set([])); - - return ( -
- -

Selected: {value}

-
- ); -}`; +import App from "./single-controlled.raw.jsx?raw"; +import AppTs from "./single-controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/sizes.raw.jsx b/apps/docs/content/components/select/sizes.raw.jsx new file mode 100644 index 0000000000..afaeafc7a0 --- /dev/null +++ b/apps/docs/content/components/select/sizes.raw.jsx @@ -0,0 +1,45 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const sizes = ["sm", "md", "lg"]; + + return ( +
+ {sizes.map((size) => ( +
+ + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/select/sizes.ts b/apps/docs/content/components/select/sizes.ts index 02b1cde2d0..85a2f5b30b 100644 --- a/apps/docs/content/components/select/sizes.ts +++ b/apps/docs/content/components/select/sizes.ts @@ -1,61 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -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, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/start-content.raw.jsx b/apps/docs/content/components/select/start-content.raw.jsx new file mode 100644 index 0000000000..9164a68d79 --- /dev/null +++ b/apps/docs/content/components/select/start-content.raw.jsx @@ -0,0 +1,69 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const PetIcon = (props) => { + return ( + + ); +}; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/start-content.ts b/apps/docs/content/components/select/start-content.ts index 7b896eaf3f..59191d72a7 100644 --- a/apps/docs/content/components/select/start-content.ts +++ b/apps/docs/content/components/select/start-content.ts @@ -1,78 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const PetIcon = `export const PetIcon = (props) => ( - -);`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {PetIcon} from "./PetIcon"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -} -`; +import App from "./start-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/PetIcon.jsx": PetIcon, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/usage.raw.jsx b/apps/docs/content/components/select/usage.raw.jsx new file mode 100644 index 0000000000..1337231116 --- /dev/null +++ b/apps/docs/content/components/select/usage.raw.jsx @@ -0,0 +1,34 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/apps/docs/content/components/select/usage.ts b/apps/docs/content/components/select/usage.ts index d676e3edb7..1118304c37 100644 --- a/apps/docs/content/components/select/usage.ts +++ b/apps/docs/content/components/select/usage.ts @@ -1,53 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( -
- - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/variants.raw.jsx b/apps/docs/content/components/select/variants.raw.jsx new file mode 100644 index 0000000000..78c5577ca7 --- /dev/null +++ b/apps/docs/content/components/select/variants.raw.jsx @@ -0,0 +1,45 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + const variants = ["flat", "bordered", "underlined", "faded"]; + + return ( +
+ {variants.map((variant) => ( +
+ + +
+ ))} +
+ ); +} diff --git a/apps/docs/content/components/select/variants.ts b/apps/docs/content/components/select/variants.ts index 040be0e123..ddea95fb2e 100644 --- a/apps/docs/content/components/select/variants.ts +++ b/apps/docs/content/components/select/variants.ts @@ -1,61 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - const variants = ["flat", "bordered", "underlined", "faded"]; - - return ( -
- {variants.map((variant) => ( -
- - -
- ))} -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/select/without-scroll-shadow.raw.jsx b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx new file mode 100644 index 0000000000..3aab534e2b --- /dev/null +++ b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx @@ -0,0 +1,35 @@ +import {Select, SelectItem} from "@nextui-org/react"; + +export const animals = [ + {key: "cat", label: "Cat"}, + {key: "dog", label: "Dog"}, + {key: "elephant", label: "Elephant"}, + {key: "lion", label: "Lion"}, + {key: "tiger", label: "Tiger"}, + {key: "giraffe", label: "Giraffe"}, + {key: "dolphin", label: "Dolphin"}, + {key: "penguin", label: "Penguin"}, + {key: "zebra", label: "Zebra"}, + {key: "shark", label: "Shark"}, + {key: "whale", label: "Whale"}, + {key: "otter", label: "Otter"}, + {key: "crocodile", label: "Crocodile"}, +]; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/select/without-scroll-shadow.ts b/apps/docs/content/components/select/without-scroll-shadow.ts index 7a4d8b585d..1cfe3080fa 100644 --- a/apps/docs/content/components/select/without-scroll-shadow.ts +++ b/apps/docs/content/components/select/without-scroll-shadow.ts @@ -1,45 +1,7 @@ -const data = `export const animals = [ - {key: "cat", label: "Cat"}, - {key: "dog", label: "Dog"}, - {key: "elephant", label: "Elephant"}, - {key: "lion", label: "Lion"}, - {key: "tiger", label: "Tiger"}, - {key: "giraffe", label: "Giraffe"}, - {key: "dolphin", label: "Dolphin"}, - {key: "penguin", label: "Penguin"}, - {key: "zebra", label: "Zebra"}, - {key: "shark", label: "Shark"}, - {key: "whale", label: "Whale"}, - {key: "otter", label: "Otter"}, - {key: "crocodile", label: "Crocodile"} -];`; - -const App = `import {Select, SelectItem} from "@nextui-org/react"; -import {animals} from "./data"; - -export default function App() { - return ( - - ); -}`; +import App from "./without-scroll-shadow.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/skeleton/loaded.raw.jsx b/apps/docs/content/components/skeleton/loaded.raw.jsx new file mode 100644 index 0000000000..44516e9a06 --- /dev/null +++ b/apps/docs/content/components/skeleton/loaded.raw.jsx @@ -0,0 +1,33 @@ +import {Card, Skeleton, Button} from "@nextui-org/react"; + +export default function App() { + const [isLoaded, setIsLoaded] = React.useState(false); + + const toggleLoad = () => { + setIsLoaded(!isLoaded); + }; + + return ( +
+ + +
+ +
+ +
+ + +
+ + +
+ +
+ + +
+ ); +} diff --git a/apps/docs/content/components/skeleton/loaded.ts b/apps/docs/content/components/skeleton/loaded.ts index 59cb7528f9..cab1fe22ec 100644 --- a/apps/docs/content/components/skeleton/loaded.ts +++ b/apps/docs/content/components/skeleton/loaded.ts @@ -1,36 +1,4 @@ -const App = `import {Card, Skeleton, Button} from "@nextui-org/react"; - -export default function App() { - const [isLoaded, setIsLoaded] = React.useState(false); - - const toggleLoad = () => { - setIsLoaded(!isLoaded); - }; - - return ( -
- - -
- -
- -
- - -
- - -
- -
- - -
- ); -}`; +import App from "./loaded.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/skeleton/standalone.raw.jsx b/apps/docs/content/components/skeleton/standalone.raw.jsx new file mode 100644 index 0000000000..bb76f7e0d4 --- /dev/null +++ b/apps/docs/content/components/skeleton/standalone.raw.jsx @@ -0,0 +1,15 @@ +import {Skeleton} from "@nextui-org/react"; + +export default function App() { + return ( +
+
+ +
+
+ + +
+
+ ); +} diff --git a/apps/docs/content/components/skeleton/standalone.ts b/apps/docs/content/components/skeleton/standalone.ts index 09d0c1b510..450aed160e 100644 --- a/apps/docs/content/components/skeleton/standalone.ts +++ b/apps/docs/content/components/skeleton/standalone.ts @@ -1,18 +1,4 @@ -const App = `import {Skeleton} from "@nextui-org/react"; - -export default function App() { - return ( -
-
- -
-
- - -
-
- ); -}`; +import App from "./standalone.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/skeleton/usage.raw.jsx b/apps/docs/content/components/skeleton/usage.raw.jsx new file mode 100644 index 0000000000..50e4660b0f --- /dev/null +++ b/apps/docs/content/components/skeleton/usage.raw.jsx @@ -0,0 +1,22 @@ +import {Card, Skeleton} from "@nextui-org/react"; + +export default function App() { + return ( + + +
+ +
+ +
+ + +
+ + +
+ +
+ + ); +} diff --git a/apps/docs/content/components/skeleton/usage.ts b/apps/docs/content/components/skeleton/usage.ts index cdeace87e8..1118304c37 100644 --- a/apps/docs/content/components/skeleton/usage.ts +++ b/apps/docs/content/components/skeleton/usage.ts @@ -1,25 +1,4 @@ -const App = `import {Card, Skeleton} from "@nextui-org/react"; - -export default function App() { - return ( - - -
- -
- -
- - -
- - -
- -
- - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/colors.raw.jsx b/apps/docs/content/components/slider/colors.raw.jsx new file mode 100644 index 0000000000..b96faeaa72 --- /dev/null +++ b/apps/docs/content/components/slider/colors.raw.jsx @@ -0,0 +1,22 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"]; + + return ( +
+ {colors.map((color) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/slider/colors.ts b/apps/docs/content/components/slider/colors.ts index f26d3f88a5..d5bef810aa 100644 --- a/apps/docs/content/components/slider/colors.ts +++ b/apps/docs/content/components/slider/colors.ts @@ -1,32 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const colors = [ - "foreground", - "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/slider/controlled-change-end.raw.jsx b/apps/docs/content/components/slider/controlled-change-end.raw.jsx new file mode 100644 index 0000000000..53360e0bef --- /dev/null +++ b/apps/docs/content/components/slider/controlled-change-end.raw.jsx @@ -0,0 +1,18 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
+ +

Current volume: {value}

+
+ ); +} diff --git a/apps/docs/content/components/slider/controlled-change-end.raw.tsx b/apps/docs/content/components/slider/controlled-change-end.raw.tsx new file mode 100644 index 0000000000..e88a356599 --- /dev/null +++ b/apps/docs/content/components/slider/controlled-change-end.raw.tsx @@ -0,0 +1,22 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
+ +

Current volume: {value}

+
+ ); +} diff --git a/apps/docs/content/components/slider/controlled-change-end.ts b/apps/docs/content/components/slider/controlled-change-end.ts index 5206d4118a..21ef7f007b 100644 --- a/apps/docs/content/components/slider/controlled-change-end.ts +++ b/apps/docs/content/components/slider/controlled-change-end.ts @@ -1,41 +1,5 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
- -

Current volume: {value}

-
- ); -}`; - -const AppTs = `import {Slider, SliderValue} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
- -

Current volume: {value}

-
- ); -}`; +import App from "./controlled-change-end.raw.jsx?raw"; +import AppTs from "./controlled-change-end.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/controlled-range.raw.jsx b/apps/docs/content/components/slider/controlled-range.raw.jsx new file mode 100644 index 0000000000..e5404dfc72 --- /dev/null +++ b/apps/docs/content/components/slider/controlled-range.raw.jsx @@ -0,0 +1,23 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState([100, 300]); + + return ( +
+ +

+ Selected budget: {Array.isArray(value) && value.map((b) => `${b}`).join(" – ")} +

+
+ ); +} diff --git a/apps/docs/content/components/slider/controlled-range.raw.tsx b/apps/docs/content/components/slider/controlled-range.raw.tsx new file mode 100644 index 0000000000..267342eb21 --- /dev/null +++ b/apps/docs/content/components/slider/controlled-range.raw.tsx @@ -0,0 +1,26 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState([100, 300]); + + return ( +
+ +

+ Selected budget: {Array.isArray(value) && value.map((b) => `$${b}`).join(" – ")} +

+
+ ); +} diff --git a/apps/docs/content/components/slider/controlled-range.ts b/apps/docs/content/components/slider/controlled-range.ts index 61d0bf1929..90412a80b9 100644 --- a/apps/docs/content/components/slider/controlled-range.ts +++ b/apps/docs/content/components/slider/controlled-range.ts @@ -1,50 +1,5 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState([100, 300]); - - return ( -
- -

- Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")} -

-
- ); -}`; - -const AppTs = `import {Slider, SliderValue} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState([100, 300]); - - return ( -
- -

- Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")} -

-
- ); -}`; +import App from "./controlled-range.raw.jsx?raw"; +import AppTs from "./controlled-range.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/controlled.raw.jsx b/apps/docs/content/components/slider/controlled.raw.jsx new file mode 100644 index 0000000000..52cac72992 --- /dev/null +++ b/apps/docs/content/components/slider/controlled.raw.jsx @@ -0,0 +1,91 @@ +import {Slider, Button} from "@nextui-org/react"; + +export const VolumeHighIcon = (props) => { + return ( + + ); +}; + +export const VolumeLowIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
+ setValue((prev) => (prev <= 90 ? prev + 10 : 100))} + > + + + } + size="lg" + startContent={ + + } + value={value} + onChange={setValue} + /> +

Current volume: {value}

+
+ ); +} diff --git a/apps/docs/content/components/slider/controlled.raw.tsx b/apps/docs/content/components/slider/controlled.raw.tsx new file mode 100644 index 0000000000..9f9728ea67 --- /dev/null +++ b/apps/docs/content/components/slider/controlled.raw.tsx @@ -0,0 +1,94 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Slider, Button} from "@nextui-org/react"; + +export const VolumeHighIcon = (props) => { + return ( + + ); +}; + +export const VolumeLowIcon = (props) => { + return ( + + ); +}; + +export default function App() { + const [value, setValue] = React.useState(25); + + return ( +
+ setValue((prev) => (Number(prev) <= 90 ? Number(prev) + 10 : 100))} + > + + + } + size="lg" + startContent={ + + } + value={value} + onChange={setValue} + /> +

Current volume: {value}

+
+ ); +} diff --git a/apps/docs/content/components/slider/controlled.ts b/apps/docs/content/components/slider/controlled.ts index 0f7e03ef4e..1f1a363363 100644 --- a/apps/docs/content/components/slider/controlled.ts +++ b/apps/docs/content/components/slider/controlled.ts @@ -1,139 +1,8 @@ -const VolumeHighIcon = `export const VolumeHighIcon = (props) => ( - -);`; - -const VolumeLowIcon = `export const VolumeLowIcon = (props) => ( - -);`; - -const App = `import {Slider, Button} from "@nextui-org/react"; -import {VolumeLowIcon} from "./VolumeLowIcon"; -import {VolumeHighIcon} from "./VolumeHighIcon"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
- setValue((prev) => prev >= 10 ? prev - 10 : 0)} - > - - - } - endContent={ - - } - className="max-w-md" - /> -

Current volume: {value}

-
- ); -}`; - -const AppTs = `import {Slider, Button, SliderValue} from "@nextui-org/react"; -import {VolumeLowIcon} from "./VolumeLowIcon"; -import {VolumeHighIcon} from "./VolumeHighIcon"; - -export default function App() { - const [value, setValue] = React.useState(25); - - return ( -
- setValue((prev) => prev >= 10 ? prev - 10 : 0)} - > - - - } - endContent={ - - } - className="max-w-md" - /> -

Current volume: {value}

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; +import AppTs from "./controlled.raw.tsx?raw"; const react = { "/App.jsx": App, - "/VolumeHighIcon.jsx": VolumeHighIcon, - "/VolumeLowIcon.jsx": VolumeLowIcon, }; const reactTs = { diff --git a/apps/docs/content/components/slider/custom-styles.raw.jsx b/apps/docs/content/components/slider/custom-styles.raw.jsx new file mode 100644 index 0000000000..0090efa5d7 --- /dev/null +++ b/apps/docs/content/components/slider/custom-styles.raw.jsx @@ -0,0 +1,47 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/custom-styles.ts b/apps/docs/content/components/slider/custom-styles.ts index 94269cc8bc..da3ea9093a 100644 --- a/apps/docs/content/components/slider/custom-styles.ts +++ b/apps/docs/content/components/slider/custom-styles.ts @@ -1,50 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx new file mode 100644 index 0000000000..49b2641f17 --- /dev/null +++ b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx @@ -0,0 +1,41 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/slider/disable-thumb-scale.ts b/apps/docs/content/components/slider/disable-thumb-scale.ts index 681e6fa099..a6d8994a9a 100644 --- a/apps/docs/content/components/slider/disable-thumb-scale.ts +++ b/apps/docs/content/components/slider/disable-thumb-scale.ts @@ -1,44 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./disable-thumb-scale.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/disabled.raw.jsx b/apps/docs/content/components/slider/disabled.raw.jsx new file mode 100644 index 0000000000..f805a3ade7 --- /dev/null +++ b/apps/docs/content/components/slider/disabled.raw.jsx @@ -0,0 +1,15 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/disabled.ts b/apps/docs/content/components/slider/disabled.ts index 07ac82bc41..1a215cc91f 100644 --- a/apps/docs/content/components/slider/disabled.ts +++ b/apps/docs/content/components/slider/disabled.ts @@ -1,18 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/fill-offset.raw.jsx b/apps/docs/content/components/slider/fill-offset.raw.jsx new file mode 100644 index 0000000000..3f432829fc --- /dev/null +++ b/apps/docs/content/components/slider/fill-offset.raw.jsx @@ -0,0 +1,18 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/fill-offset.ts b/apps/docs/content/components/slider/fill-offset.ts index e293a6fa98..3a5faaa7da 100644 --- a/apps/docs/content/components/slider/fill-offset.ts +++ b/apps/docs/content/components/slider/fill-offset.ts @@ -1,21 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./fill-offset.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/get-value.raw.jsx b/apps/docs/content/components/slider/get-value.raw.jsx new file mode 100644 index 0000000000..9fb2965c6d --- /dev/null +++ b/apps/docs/content/components/slider/get-value.raw.jsx @@ -0,0 +1,13 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + `${donuts} of 60 Donuts`} + label="Donuts to buy" + maxValue={60} + size="sm" + /> + ); +} diff --git a/apps/docs/content/components/slider/get-value.ts b/apps/docs/content/components/slider/get-value.ts index 58a100dbcd..b44c91bd81 100644 --- a/apps/docs/content/components/slider/get-value.ts +++ b/apps/docs/content/components/slider/get-value.ts @@ -1,16 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - \`\${donuts} of 60 Donuts\`} - className="max-w-md" - /> - ); -}`; +import App from "./get-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/hide-thumb.raw.jsx b/apps/docs/content/components/slider/hide-thumb.raw.jsx new file mode 100644 index 0000000000..8157e09ed9 --- /dev/null +++ b/apps/docs/content/components/slider/hide-thumb.raw.jsx @@ -0,0 +1,13 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/hide-thumb.ts b/apps/docs/content/components/slider/hide-thumb.ts index 4be475c9dd..bd5db5b627 100644 --- a/apps/docs/content/components/slider/hide-thumb.ts +++ b/apps/docs/content/components/slider/hide-thumb.ts @@ -1,16 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./hide-thumb.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/hide-value.raw.jsx b/apps/docs/content/components/slider/hide-value.raw.jsx new file mode 100644 index 0000000000..df98a823ab --- /dev/null +++ b/apps/docs/content/components/slider/hide-value.raw.jsx @@ -0,0 +1,16 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/hide-value.ts b/apps/docs/content/components/slider/hide-value.ts index 54d1607025..cfd8be7222 100644 --- a/apps/docs/content/components/slider/hide-value.ts +++ b/apps/docs/content/components/slider/hide-value.ts @@ -1,19 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./hide-value.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/marks.raw.jsx b/apps/docs/content/components/slider/marks.raw.jsx new file mode 100644 index 0000000000..ff41ef28d2 --- /dev/null +++ b/apps/docs/content/components/slider/marks.raw.jsx @@ -0,0 +1,28 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/marks.ts b/apps/docs/content/components/slider/marks.ts index 07c7ac65cc..cdccdb9cea 100644 --- a/apps/docs/content/components/slider/marks.ts +++ b/apps/docs/content/components/slider/marks.ts @@ -1,31 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./marks.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/outline.raw.jsx b/apps/docs/content/components/slider/outline.raw.jsx new file mode 100644 index 0000000000..67d251a4b7 --- /dev/null +++ b/apps/docs/content/components/slider/outline.raw.jsx @@ -0,0 +1,41 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/slider/outline.ts b/apps/docs/content/components/slider/outline.ts index ec94e797c3..08038eb9c4 100644 --- a/apps/docs/content/components/slider/outline.ts +++ b/apps/docs/content/components/slider/outline.ts @@ -1,44 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./outline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/radius.raw.jsx b/apps/docs/content/components/slider/radius.raw.jsx new file mode 100644 index 0000000000..181343ac11 --- /dev/null +++ b/apps/docs/content/components/slider/radius.raw.jsx @@ -0,0 +1,22 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + const radius = ["full", "lg", "md", "sm", "none"]; + + return ( +
+ {radius.map((r) => ( + + ))} +
+ ); +} diff --git a/apps/docs/content/components/slider/radius.ts b/apps/docs/content/components/slider/radius.ts index 6fb5696ad1..7b78db1ce0 100644 --- a/apps/docs/content/components/slider/radius.ts +++ b/apps/docs/content/components/slider/radius.ts @@ -1,31 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const radius = [ - "full", - "lg", - "md", - "sm", - "none", - ]; - - return ( -
- {radius.map((r) => ( - - ))} -
- ); -}`; +import App from "./radius.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/range.raw.jsx b/apps/docs/content/components/slider/range.raw.jsx new file mode 100644 index 0000000000..9f733fdbb0 --- /dev/null +++ b/apps/docs/content/components/slider/range.raw.jsx @@ -0,0 +1,15 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/range.ts b/apps/docs/content/components/slider/range.ts index 9b958ceee5..90e4b05194 100644 --- a/apps/docs/content/components/slider/range.ts +++ b/apps/docs/content/components/slider/range.ts @@ -1,18 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./range.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/render-label.raw.jsx b/apps/docs/content/components/slider/render-label.raw.jsx new file mode 100644 index 0000000000..2af183ce22 --- /dev/null +++ b/apps/docs/content/components/slider/render-label.raw.jsx @@ -0,0 +1,84 @@ +import {Slider, Tooltip} from "@nextui-org/react"; + +export const InfoIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + ( + + )} + renderThumb={({index, ...props}) => ( +
+ +
+ )} + size="lg" + step={10} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-label.ts b/apps/docs/content/components/slider/render-label.ts index 5248574a7f..f4fc289c53 100644 --- a/apps/docs/content/components/slider/render-label.ts +++ b/apps/docs/content/components/slider/render-label.ts @@ -1,91 +1,7 @@ -const InfoIcon = `export const InfoIcon = (props) => ( - -); -`; - -const App = `import {Slider, Tooltip} from "@nextui-org/react"; -import {InfoIcon} from "./InfoIcon"; - -export default function App() { - return ( - ( - - )} - renderThumb={({index, ...props}) => ( -
- -
- )} - /> - ); -}`; +import App from "./render-label.raw.jsx?raw"; const react = { "/App.jsx": App, - "/InfoIcon.jsx": InfoIcon, }; export default { diff --git a/apps/docs/content/components/slider/render-range-thumb.raw.jsx b/apps/docs/content/components/slider/render-range-thumb.raw.jsx new file mode 100644 index 0000000000..c9b831be31 --- /dev/null +++ b/apps/docs/content/components/slider/render-range-thumb.raw.jsx @@ -0,0 +1,33 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + ( +
+ +
+ )} + size="lg" + step={10} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-range-thumb.ts b/apps/docs/content/components/slider/render-range-thumb.ts index 8f212229ca..6745f61592 100644 --- a/apps/docs/content/components/slider/render-range-thumb.ts +++ b/apps/docs/content/components/slider/render-range-thumb.ts @@ -1,36 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - ( -
- -
- )} - /> - ); -}`; +import App from "./render-range-thumb.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/render-thumb.raw.jsx b/apps/docs/content/components/slider/render-thumb.raw.jsx new file mode 100644 index 0000000000..29657194a5 --- /dev/null +++ b/apps/docs/content/components/slider/render-thumb.raw.jsx @@ -0,0 +1,24 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + ( +
+ +
+ )} + size="sm" + /> + ); +} diff --git a/apps/docs/content/components/slider/render-thumb.ts b/apps/docs/content/components/slider/render-thumb.ts index 3a020ce676..0198aaa4a1 100644 --- a/apps/docs/content/components/slider/render-thumb.ts +++ b/apps/docs/content/components/slider/render-thumb.ts @@ -1,27 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - ( -
- -
- )} - /> - ); -}`; +import App from "./render-thumb.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/render-value.raw.jsx b/apps/docs/content/components/slider/render-value.raw.jsx new file mode 100644 index 0000000000..4b548d15a4 --- /dev/null +++ b/apps/docs/content/components/slider/render-value.raw.jsx @@ -0,0 +1,58 @@ +import {Slider, Tooltip} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0.2); + const [inputValue, setInputValue] = React.useState("0.2"); + + const handleChange = (value) => { + if (isNaN(Number(value))) return; + + setValue(value); + setInputValue(value.toString()); + }; + + return ( + ( + + + { + const v = e.target.value; + + setInputValue(v); + }} + onKeyDown={(e) => { + if (e.key === "Enter" && !isNaN(Number(inputValue))) { + setValue(Number(inputValue)); + } + }} + /> + + + )} + size="sm" + // we extract the default children to render the input + step={0.01} + value={value} + onChange={handleChange} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-value.raw.tsx b/apps/docs/content/components/slider/render-value.raw.tsx new file mode 100644 index 0000000000..a51b665be9 --- /dev/null +++ b/apps/docs/content/components/slider/render-value.raw.tsx @@ -0,0 +1,61 @@ +import type {SliderValue} from "@nextui-org/react"; + +import React from "react"; +import {Tooltip, Slider} from "@nextui-org/react"; + +export default function App() { + const [value, setValue] = React.useState(0.2); + const [inputValue, setInputValue] = React.useState("0.2"); + + const handleChange = (value: SliderValue) => { + if (isNaN(Number(value))) return; + + setValue(value); + setInputValue(value.toString()); + }; + + return ( + ( + + + ) => { + const v = e.target.value; + + setInputValue(v); + }} + onKeyDown={(e: React.KeyboardEvent) => { + if (e.key === "Enter" && !isNaN(Number(inputValue))) { + setValue(Number(inputValue)); + } + }} + /> + + + )} + size="sm" + step={0.01} + // we extract the default children to render the input + value={value} + onChange={handleChange} + /> + ); +} diff --git a/apps/docs/content/components/slider/render-value.ts b/apps/docs/content/components/slider/render-value.ts index 09da36972b..ab16e1fc22 100644 --- a/apps/docs/content/components/slider/render-value.ts +++ b/apps/docs/content/components/slider/render-value.ts @@ -1,118 +1,5 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0.2); - const [inputValue, setInputValue] = React.useState("0.2"); - - const handleChange = (value) => { - if (isNaN(Number(value))) return; - - setValue(value); - setInputValue(value.toString()); - }; - - return ( - ( - - - { - const v = e.target.value; - - setInputValue(v); - }} - onKeyDown={(e) => { - if (e.key === "Enter" && !isNaN(Number(inputValue))) { - setValue(Number(inputValue)); - } - }} - /> - - - )} - value={value} - onChange={handleChange} - /> - ); -}`; - -const AppTs = `import {Slider, SliderValue} from "@nextui-org/react"; - -export default function App() { - const [value, setValue] = React.useState(0.2); - const [inputValue, setInputValue] = React.useState("0.2"); - - const handleChange = (value: SliderValue) => { - if (isNaN(Number(value))) return; - - setValue(value); - setInputValue(value.toString()); - }; - - return ( - ( - - - ) => { - const v = e.target.value; - - setInputValue(v); - }} - onKeyDown={(e: React.KeyboardEvent) => { - if (e.key === "Enter" && !isNaN(Number(inputValue))) { - setValue(Number(inputValue)); - } - }} - /> - - - )} - value={value} - onChange={handleChange} - /> - ); -}`; +import App from "./render-value.raw.jsx?raw"; +import AppTs from "./render-value.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/sizes.raw.jsx b/apps/docs/content/components/slider/sizes.raw.jsx new file mode 100644 index 0000000000..26693981b1 --- /dev/null +++ b/apps/docs/content/components/slider/sizes.raw.jsx @@ -0,0 +1,35 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/slider/sizes.ts b/apps/docs/content/components/slider/sizes.ts index 83741c655d..85a2f5b30b 100644 --- a/apps/docs/content/components/slider/sizes.ts +++ b/apps/docs/content/components/slider/sizes.ts @@ -1,38 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/start-end-content.raw.jsx b/apps/docs/content/components/slider/start-end-content.raw.jsx new file mode 100644 index 0000000000..1b9172bdda --- /dev/null +++ b/apps/docs/content/components/slider/start-end-content.raw.jsx @@ -0,0 +1,67 @@ +import {Slider} from "@nextui-org/react"; + +export const VolumeHighIcon = (props) => { + return ( + + ); +}; + +export const VolumeLowIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + } + size="lg" + startContent={} + /> + ); +} diff --git a/apps/docs/content/components/slider/start-end-content.ts b/apps/docs/content/components/slider/start-end-content.ts index f478eea061..e99c7e5997 100644 --- a/apps/docs/content/components/slider/start-end-content.ts +++ b/apps/docs/content/components/slider/start-end-content.ts @@ -1,73 +1,7 @@ -const VolumeHighIcon = `export const VolumeHighIcon = (props) => ( - -);`; - -const VolumeLowIcon = `export const VolumeLowIcon = (props) => ( - -);`; - -const App = `import {Slider} from "@nextui-org/react"; -import {VolumeLowIcon} from "./VolumeLowIcon"; -import {VolumeHighIcon} from "./VolumeHighIcon"; - -export default function App() { - return ( - } - endContent={} - className="max-w-md" - defaultValue={40} - /> - ); -}`; +import App from "./start-end-content.raw.jsx?raw"; const react = { "/App.jsx": App, - "/VolumeHighIcon.jsx": VolumeHighIcon, - "/VolumeLowIcon.jsx": VolumeLowIcon, }; export default { diff --git a/apps/docs/content/components/slider/tooltip.raw.jsx b/apps/docs/content/components/slider/tooltip.raw.jsx new file mode 100644 index 0000000000..5719863d85 --- /dev/null +++ b/apps/docs/content/components/slider/tooltip.raw.jsx @@ -0,0 +1,30 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/tooltip.ts b/apps/docs/content/components/slider/tooltip.ts index bd97529987..d5f80e1265 100644 --- a/apps/docs/content/components/slider/tooltip.ts +++ b/apps/docs/content/components/slider/tooltip.ts @@ -1,33 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./tooltip.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/usage.raw.jsx b/apps/docs/content/components/slider/usage.raw.jsx new file mode 100644 index 0000000000..960b8c9791 --- /dev/null +++ b/apps/docs/content/components/slider/usage.raw.jsx @@ -0,0 +1,14 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/usage.ts b/apps/docs/content/components/slider/usage.ts index 9d2e81ac21..1118304c37 100644 --- a/apps/docs/content/components/slider/usage.ts +++ b/apps/docs/content/components/slider/usage.ts @@ -1,17 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/value-formatting.raw.jsx b/apps/docs/content/components/slider/value-formatting.raw.jsx new file mode 100644 index 0000000000..1bd3f0cd26 --- /dev/null +++ b/apps/docs/content/components/slider/value-formatting.raw.jsx @@ -0,0 +1,14 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/slider/value-formatting.ts b/apps/docs/content/components/slider/value-formatting.ts index 096dd9947f..0cd558d45d 100644 --- a/apps/docs/content/components/slider/value-formatting.ts +++ b/apps/docs/content/components/slider/value-formatting.ts @@ -1,17 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./value-formatting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/vertical.raw.jsx b/apps/docs/content/components/slider/vertical.raw.jsx new file mode 100644 index 0000000000..779c0628cd --- /dev/null +++ b/apps/docs/content/components/slider/vertical.raw.jsx @@ -0,0 +1,35 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/slider/vertical.ts b/apps/docs/content/components/slider/vertical.ts index f3f7799b1e..697ac10343 100644 --- a/apps/docs/content/components/slider/vertical.ts +++ b/apps/docs/content/components/slider/vertical.ts @@ -1,38 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./vertical.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/slider/visible-steps.raw.jsx b/apps/docs/content/components/slider/visible-steps.raw.jsx new file mode 100644 index 0000000000..d6e3690efa --- /dev/null +++ b/apps/docs/content/components/slider/visible-steps.raw.jsx @@ -0,0 +1,41 @@ +import {Slider} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/slider/visible-steps.ts b/apps/docs/content/components/slider/visible-steps.ts index da06557c73..ae20aa27a1 100644 --- a/apps/docs/content/components/slider/visible-steps.ts +++ b/apps/docs/content/components/slider/visible-steps.ts @@ -1,44 +1,4 @@ -const App = `import {Slider} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./visible-steps.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/colors.raw.jsx b/apps/docs/content/components/snippet/colors.raw.jsx new file mode 100644 index 0000000000..f0f95cee40 --- /dev/null +++ b/apps/docs/content/components/snippet/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( +
+ npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
+ ); +} diff --git a/apps/docs/content/components/snippet/colors.ts b/apps/docs/content/components/snippet/colors.ts index e46614cd14..d5bef810aa 100644 --- a/apps/docs/content/components/snippet/colors.ts +++ b/apps/docs/content/components/snippet/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( -
- npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/custom-icons.raw.jsx b/apps/docs/content/components/snippet/custom-icons.raw.jsx new file mode 100644 index 0000000000..55d6386773 --- /dev/null +++ b/apps/docs/content/components/snippet/custom-icons.raw.jsx @@ -0,0 +1,43 @@ +import {Snippet} from "@nextui-org/react"; + +export const CopyIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const CheckIcon = ({size, height, width, ...props}) => { + return ( + + + + ); +}; + +export default function App() { + return ( + } copyIcon={} variant="bordered"> + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/custom-icons.ts b/apps/docs/content/components/snippet/custom-icons.ts index 10bd84d109..7954d41595 100644 --- a/apps/docs/content/components/snippet/custom-icons.ts +++ b/apps/docs/content/components/snippet/custom-icons.ts @@ -1,62 +1,7 @@ -export const CopyIcon = `export const CopyIcon = ({ size, height, width, ...props }) => { - return ( - - - - ); -};`; - -export const CheckIcon = `export const CheckIcon = ({ - size, - height, - width, - ...props -}) => { - return ( - - - - ); -};`; - -const App = `import {Snippet} from "@nextui-org/react"; -import {CopyIcon} from "./CopyIcon"; -import {CheckIcon} from "./CheckIcon"; - -export default function App() { - return ( - } - checkIcon={} - > - npm install @nextui-org/react - - ); -}`; +import App from "./custom-icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CopyIcon.jsx": CopyIcon, - "/CheckIcon.jsx": CheckIcon, }; export default { diff --git a/apps/docs/content/components/snippet/custom-tooltip.raw.jsx b/apps/docs/content/components/snippet/custom-tooltip.raw.jsx new file mode 100644 index 0000000000..5998d383fe --- /dev/null +++ b/apps/docs/content/components/snippet/custom-tooltip.raw.jsx @@ -0,0 +1,17 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/custom-tooltip.ts b/apps/docs/content/components/snippet/custom-tooltip.ts index 60ffed31d8..247cbd98de 100644 --- a/apps/docs/content/components/snippet/custom-tooltip.ts +++ b/apps/docs/content/components/snippet/custom-tooltip.ts @@ -1,20 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - - npm install @nextui-org/react - - ); -}`; +import App from "./custom-tooltip.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/multiline.raw.jsx b/apps/docs/content/components/snippet/multiline.raw.jsx new file mode 100644 index 0000000000..189857d3b3 --- /dev/null +++ b/apps/docs/content/components/snippet/multiline.raw.jsx @@ -0,0 +1,11 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + yarn add @nextui-org/react + pnpm add @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/multiline.ts b/apps/docs/content/components/snippet/multiline.ts index 03b960723a..a5e525766b 100644 --- a/apps/docs/content/components/snippet/multiline.ts +++ b/apps/docs/content/components/snippet/multiline.ts @@ -1,14 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - - npm install @nextui-org/react - yarn add @nextui-org/react - pnpm add @nextui-org/react - - ); -}`; +import App from "./multiline.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/sizes.raw.jsx b/apps/docs/content/components/snippet/sizes.raw.jsx new file mode 100644 index 0000000000..261e6f098c --- /dev/null +++ b/apps/docs/content/components/snippet/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( +
+ npm install @nextui-org/react + npm install @nextui-org/react + npm install @nextui-org/react +
+ ); +} diff --git a/apps/docs/content/components/snippet/sizes.ts b/apps/docs/content/components/snippet/sizes.ts index 0456000507..85a2f5b30b 100644 --- a/apps/docs/content/components/snippet/sizes.ts +++ b/apps/docs/content/components/snippet/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( -
- npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/symbol.raw.jsx b/apps/docs/content/components/snippet/symbol.raw.jsx new file mode 100644 index 0000000000..425ff9a9ac --- /dev/null +++ b/apps/docs/content/components/snippet/symbol.raw.jsx @@ -0,0 +1,9 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/symbol.ts b/apps/docs/content/components/snippet/symbol.ts index 8215c07fa8..414f199963 100644 --- a/apps/docs/content/components/snippet/symbol.ts +++ b/apps/docs/content/components/snippet/symbol.ts @@ -1,10 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - npm install @nextui-org/react - ); -}`; +import App from "./symbol.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/usage.raw.jsx b/apps/docs/content/components/snippet/usage.raw.jsx new file mode 100644 index 0000000000..88cb317e61 --- /dev/null +++ b/apps/docs/content/components/snippet/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return npm install @nextui-org/react; +} diff --git a/apps/docs/content/components/snippet/usage.ts b/apps/docs/content/components/snippet/usage.ts index 38c8c5b1c0..1118304c37 100644 --- a/apps/docs/content/components/snippet/usage.ts +++ b/apps/docs/content/components/snippet/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - npm install @nextui-org/react - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/variants.raw.jsx b/apps/docs/content/components/snippet/variants.raw.jsx new file mode 100644 index 0000000000..86dfb39028 --- /dev/null +++ b/apps/docs/content/components/snippet/variants.raw.jsx @@ -0,0 +1,18 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( +
+ npm install @nextui-org/react + + npm install @nextui-org/react + + + npm install @nextui-org/react + + + npm install @nextui-org/react + +
+ ); +} diff --git a/apps/docs/content/components/snippet/variants.ts b/apps/docs/content/components/snippet/variants.ts index bc2d96bb01..ddea95fb2e 100644 --- a/apps/docs/content/components/snippet/variants.ts +++ b/apps/docs/content/components/snippet/variants.ts @@ -1,15 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( -
- npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react - npm install @nextui-org/react -
- ); -}`; +import App from "./variants.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/snippet/without-copy.raw.jsx b/apps/docs/content/components/snippet/without-copy.raw.jsx new file mode 100644 index 0000000000..baab96d178 --- /dev/null +++ b/apps/docs/content/components/snippet/without-copy.raw.jsx @@ -0,0 +1,9 @@ +import {Snippet} from "@nextui-org/react"; + +export default function App() { + return ( + + npm install @nextui-org/react + + ); +} diff --git a/apps/docs/content/components/snippet/without-copy.ts b/apps/docs/content/components/snippet/without-copy.ts index 60eceab25a..9a8e663e42 100644 --- a/apps/docs/content/components/snippet/without-copy.ts +++ b/apps/docs/content/components/snippet/without-copy.ts @@ -1,12 +1,4 @@ -const App = `import {Snippet} from "@nextui-org/react"; - -export default function App() { - return ( - - npm install @nextui-org/react - - ); -}`; +import App from "./without-copy.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spacer/usage.raw.jsx b/apps/docs/content/components/spacer/usage.raw.jsx new file mode 100644 index 0000000000..8eb045dd61 --- /dev/null +++ b/apps/docs/content/components/spacer/usage.raw.jsx @@ -0,0 +1,24 @@ +import {Spacer, Card} from "@nextui-org/react"; + +export const CustomCard = () => ( + +
+
+
+
+
+
+ +); + +export default function App() { + return ( +
+ + + + + +
+ ); +} diff --git a/apps/docs/content/components/spacer/usage.ts b/apps/docs/content/components/spacer/usage.ts index 92882e0eb0..1118304c37 100644 --- a/apps/docs/content/components/spacer/usage.ts +++ b/apps/docs/content/components/spacer/usage.ts @@ -1,34 +1,7 @@ -const CustomCard = `import {Card} from "@nextui-org/react"; - -export const CustomCard = () => ( - -
-
-
-
-
-
- -);`; - -const App = `import {Spacer} from "@nextui-org/react"; -import {CustomCard} from "./CustomCard"; - -export default function App() { - return ( -
- - - - - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/CustomCard.jsx": CustomCard, }; export default { diff --git a/apps/docs/content/components/spinner/colors.raw.jsx b/apps/docs/content/components/spinner/colors.raw.jsx new file mode 100644 index 0000000000..61dd419d98 --- /dev/null +++ b/apps/docs/content/components/spinner/colors.raw.jsx @@ -0,0 +1,14 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/spinner/colors.ts b/apps/docs/content/components/spinner/colors.ts index 33b27d5392..d5bef810aa 100644 --- a/apps/docs/content/components/spinner/colors.ts +++ b/apps/docs/content/components/spinner/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/label-colors.raw.jsx b/apps/docs/content/components/spinner/label-colors.raw.jsx new file mode 100644 index 0000000000..706793018b --- /dev/null +++ b/apps/docs/content/components/spinner/label-colors.raw.jsx @@ -0,0 +1,14 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/spinner/label-colors.ts b/apps/docs/content/components/spinner/label-colors.ts index acd289fea0..38384cdf03 100644 --- a/apps/docs/content/components/spinner/label-colors.ts +++ b/apps/docs/content/components/spinner/label-colors.ts @@ -1,17 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./label-colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/label.raw.jsx b/apps/docs/content/components/spinner/label.raw.jsx new file mode 100644 index 0000000000..d7f29abfa6 --- /dev/null +++ b/apps/docs/content/components/spinner/label.raw.jsx @@ -0,0 +1,5 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/spinner/label.ts b/apps/docs/content/components/spinner/label.ts index 3e08afd962..254b95afb8 100644 --- a/apps/docs/content/components/spinner/label.ts +++ b/apps/docs/content/components/spinner/label.ts @@ -1,10 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/sizes.raw.jsx b/apps/docs/content/components/spinner/sizes.raw.jsx new file mode 100644 index 0000000000..7e740a9dd3 --- /dev/null +++ b/apps/docs/content/components/spinner/sizes.raw.jsx @@ -0,0 +1,11 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/apps/docs/content/components/spinner/sizes.ts b/apps/docs/content/components/spinner/sizes.ts index 29c59b2d3a..85a2f5b30b 100644 --- a/apps/docs/content/components/spinner/sizes.ts +++ b/apps/docs/content/components/spinner/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/spinner/usage.raw.jsx b/apps/docs/content/components/spinner/usage.raw.jsx new file mode 100644 index 0000000000..0e516c76c9 --- /dev/null +++ b/apps/docs/content/components/spinner/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Spinner} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/spinner/usage.ts b/apps/docs/content/components/spinner/usage.ts index c61327f31c..1118304c37 100644 --- a/apps/docs/content/components/spinner/usage.ts +++ b/apps/docs/content/components/spinner/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Spinner} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/colors.raw.jsx b/apps/docs/content/components/switch/colors.raw.jsx new file mode 100644 index 0000000000..569b6eb4a6 --- /dev/null +++ b/apps/docs/content/components/switch/colors.raw.jsx @@ -0,0 +1,26 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Default + + + Primary + + + Secondary + + + Success + + + Warning + + + Danger + +
+ ); +} diff --git a/apps/docs/content/components/switch/colors.ts b/apps/docs/content/components/switch/colors.ts index a3da415b92..d5bef810aa 100644 --- a/apps/docs/content/components/switch/colors.ts +++ b/apps/docs/content/components/switch/colors.ts @@ -1,17 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( -
- Default - Primary - Secondary - Success - Warning - Danger -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/controlled.raw.jsx b/apps/docs/content/components/switch/controlled.raw.jsx new file mode 100644 index 0000000000..2e8633b943 --- /dev/null +++ b/apps/docs/content/components/switch/controlled.raw.jsx @@ -0,0 +1,14 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + const [isSelected, setIsSelected] = React.useState(true); + + return ( +
+ + Airplane mode + +

Selected: {isSelected ? "true" : "false"}

+
+ ); +} diff --git a/apps/docs/content/components/switch/controlled.ts b/apps/docs/content/components/switch/controlled.ts index b7abbb6ae0..2c3f0cacb4 100644 --- a/apps/docs/content/components/switch/controlled.ts +++ b/apps/docs/content/components/switch/controlled.ts @@ -1,17 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - const [isSelected, setIsSelected] = React.useState(true); - - return ( -
- - Airplane mode - -

Selected: {isSelected ? "true" : "false"}

-
- ) -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/custom-impl.raw.jsx b/apps/docs/content/components/switch/custom-impl.raw.jsx new file mode 100644 index 0000000000..205a5fcd4f --- /dev/null +++ b/apps/docs/content/components/switch/custom-impl.raw.jsx @@ -0,0 +1,71 @@ +import {VisuallyHidden, useSwitch} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +const ThemeSwitch = (props) => { + const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = + useSwitch(props); + + return ( +
+ + + + +
+ {isSelected ? : } +
+ +

Lights: {isSelected ? "on" : "off"}

+
+ ); +}; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/switch/custom-impl.raw.tsx b/apps/docs/content/components/switch/custom-impl.raw.tsx new file mode 100644 index 0000000000..3cd1d1965f --- /dev/null +++ b/apps/docs/content/components/switch/custom-impl.raw.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import {useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +const ThemeSwitch = (props: SwitchProps) => { + const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = + useSwitch(props); + + return ( +
+ + + + +
+ {isSelected ? : } +
+ +

Lights: {isSelected ? "on" : "off"}

+
+ ); +}; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/switch/custom-impl.ts b/apps/docs/content/components/switch/custom-impl.ts index 31bb02960d..ef0d8ef531 100644 --- a/apps/docs/content/components/switch/custom-impl.ts +++ b/apps/docs/content/components/switch/custom-impl.ts @@ -1,133 +1,12 @@ -const MoonIcon = `export const MoonIcon = (props) => ( - -);`; - -const SunIcon = `export const SunIcon = (props) => ( - -);`; - -const App = `import {Switch, VisuallyHidden, useSwitch} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -const ThemeSwitch = (props) => { - const { - Component, - slots, - isSelected, - getBaseProps, - getInputProps, - getWrapperProps - } = useSwitch(props); - - return ( -
- - - - -
- {isSelected ? : } -
- -

Lights: {isSelected ? "on" : "off"}

-
- ) -} - - -export default function App() { - return -}`; - -const AppTs = `import {Switch, useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -const ThemeSwitch = (props: SwitchProps) => { - const { - Component, - slots, - isSelected, - getBaseProps, - getInputProps, - getWrapperProps - } = useSwitch(props); - - return ( -
- - - - -
- {isSelected ? : } -
- -

Lights: {isSelected ? "on" : "off"}

-
- ) -} - - -export default function App() { - return -}`; +import App from "./custom-impl.raw.jsx?raw"; +import AppTs from "./custom-impl.raw.tsx?raw"; const react = { "/App.jsx": App, - "/MoonIcon.jsx": MoonIcon, - "/SunIcon.jsx": SunIcon, }; const reactTs = { "/App.tsx": AppTs, - "/MoonIcon.tsx": MoonIcon, - "/SunIcon.tsx": SunIcon, }; export default { diff --git a/apps/docs/content/components/switch/custom-styles.raw.jsx b/apps/docs/content/components/switch/custom-styles.raw.jsx new file mode 100644 index 0000000000..db7a3568c9 --- /dev/null +++ b/apps/docs/content/components/switch/custom-styles.raw.jsx @@ -0,0 +1,32 @@ +import {Switch, cn} from "@nextui-org/react"; + +export default function App() { + return ( + +
+

Enable early access

+

+ Get access to new features before they are released. +

+
+ + ); +} diff --git a/apps/docs/content/components/switch/custom-styles.ts b/apps/docs/content/components/switch/custom-styles.ts index c4470a56e0..da3ea9093a 100644 --- a/apps/docs/content/components/switch/custom-styles.ts +++ b/apps/docs/content/components/switch/custom-styles.ts @@ -1,34 +1,4 @@ -const App = `import {Switch, cn} from "@nextui-org/react"; - -export default function App() { - return ( - -
-

Enable early access

-

- Get access to new features before they are released. -

-
- - ); -}`; +import App from "./custom-styles.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/disabled.raw.jsx b/apps/docs/content/components/switch/disabled.raw.jsx new file mode 100644 index 0000000000..146c57ed38 --- /dev/null +++ b/apps/docs/content/components/switch/disabled.raw.jsx @@ -0,0 +1,9 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ( + + Automatic updates + + ); +} diff --git a/apps/docs/content/components/switch/disabled.ts b/apps/docs/content/components/switch/disabled.ts index 5914c616bb..1a215cc91f 100644 --- a/apps/docs/content/components/switch/disabled.ts +++ b/apps/docs/content/components/switch/disabled.ts @@ -1,12 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( - - Automatic updates - - ); -}`; +import App from "./disabled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/icons.raw.jsx b/apps/docs/content/components/switch/icons.raw.jsx new file mode 100644 index 0000000000..ce9264d15c --- /dev/null +++ b/apps/docs/content/components/switch/icons.raw.jsx @@ -0,0 +1,53 @@ +import {Switch} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + } + size="lg" + startContent={} + > + Dark mode + + ); +} diff --git a/apps/docs/content/components/switch/icons.ts b/apps/docs/content/components/switch/icons.ts index 3f3d9fcf1d..22a410c88f 100644 --- a/apps/docs/content/components/switch/icons.ts +++ b/apps/docs/content/components/switch/icons.ts @@ -1,59 +1,7 @@ -const MoonIcon = `export const MoonIcon = (props) => ( - -);`; - -const SunIcon = `export const SunIcon = (props) => ( - -);`; - -const App = `import {Switch} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -export default function App() { - return ( - } - endContent={} - > - Dark mode - - ); -}`; +import App from "./icons.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MoonIcon.jsx": MoonIcon, - "/SunIcon.jsx": SunIcon, }; export default { diff --git a/apps/docs/content/components/switch/label.raw.jsx b/apps/docs/content/components/switch/label.raw.jsx new file mode 100644 index 0000000000..c349c1b537 --- /dev/null +++ b/apps/docs/content/components/switch/label.raw.jsx @@ -0,0 +1,5 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return Automatic updates; +} diff --git a/apps/docs/content/components/switch/label.ts b/apps/docs/content/components/switch/label.ts index c9786705ff..254b95afb8 100644 --- a/apps/docs/content/components/switch/label.ts +++ b/apps/docs/content/components/switch/label.ts @@ -1,12 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( - - Automatic updates - - ); -}`; +import App from "./label.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/sizes.raw.jsx b/apps/docs/content/components/switch/sizes.raw.jsx new file mode 100644 index 0000000000..36dbbb9b47 --- /dev/null +++ b/apps/docs/content/components/switch/sizes.raw.jsx @@ -0,0 +1,17 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + Small + + + Medium + + + Large + +
+ ); +} diff --git a/apps/docs/content/components/switch/sizes.ts b/apps/docs/content/components/switch/sizes.ts index 8a8b6f4f15..85a2f5b30b 100644 --- a/apps/docs/content/components/switch/sizes.ts +++ b/apps/docs/content/components/switch/sizes.ts @@ -1,14 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( -
- Small - Medium - Large -
- ); -}`; +import App from "./sizes.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/switch/thumb-icon.raw.jsx b/apps/docs/content/components/switch/thumb-icon.raw.jsx new file mode 100644 index 0000000000..aa55ff9c33 --- /dev/null +++ b/apps/docs/content/components/switch/thumb-icon.raw.jsx @@ -0,0 +1,54 @@ +import {Switch} from "@nextui-org/react"; + +export const MoonIcon = (props) => { + return ( + + ); +}; + +export const SunIcon = (props) => { + return ( + + ); +}; + +export default function App() { + return ( + + isSelected ? : + } + > + Dark mode + + ); +} diff --git a/apps/docs/content/components/switch/thumb-icon.ts b/apps/docs/content/components/switch/thumb-icon.ts index 41746fa903..4201c3f43c 100644 --- a/apps/docs/content/components/switch/thumb-icon.ts +++ b/apps/docs/content/components/switch/thumb-icon.ts @@ -1,64 +1,7 @@ -const MoonIcon = `export const MoonIcon = (props) => ( - -);`; - -const SunIcon = `export const SunIcon = (props) => ( - -);`; - -const App = `import {Switch} from "@nextui-org/react"; -import {MoonIcon} from "./MoonIcon"; -import {SunIcon} from "./SunIcon"; - -export default function App() { - return ( - - isSelected ? ( - - ) : ( - - ) - } - > - Dark mode - - ); -}`; +import App from "./thumb-icon.raw.jsx?raw"; const react = { "/App.jsx": App, - "/MoonIcon.jsx": MoonIcon, - "/SunIcon.jsx": SunIcon, }; export default { diff --git a/apps/docs/content/components/switch/usage.raw.jsx b/apps/docs/content/components/switch/usage.raw.jsx new file mode 100644 index 0000000000..434305473b --- /dev/null +++ b/apps/docs/content/components/switch/usage.raw.jsx @@ -0,0 +1,5 @@ +import {Switch} from "@nextui-org/react"; + +export default function App() { + return ; +} diff --git a/apps/docs/content/components/switch/usage.ts b/apps/docs/content/components/switch/usage.ts index e76fed14c7..1118304c37 100644 --- a/apps/docs/content/components/switch/usage.ts +++ b/apps/docs/content/components/switch/usage.ts @@ -1,10 +1,4 @@ -const App = `import {Switch} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/async-pagination.raw.jsx b/apps/docs/content/components/table/async-pagination.raw.jsx new file mode 100644 index 0000000000..266a97e842 --- /dev/null +++ b/apps/docs/content/components/table/async-pagination.raw.jsx @@ -0,0 +1,69 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Pagination, + Spinner, + getKeyValue, +} from "@nextui-org/react"; +import useSWR from "swr"; + +const fetcher = (...args) => fetch(...args).then((res) => res.json()); + +export default function App() { + const [page, setPage] = React.useState(1); + + const {data, isLoading} = useSWR(`https://swapi.py4e.com/api/people?page=${page}`, fetcher, { + keepPreviousData: true, + }); + + const rowsPerPage = 10; + + const pages = React.useMemo(() => { + return data?.count ? Math.ceil(data.count / rowsPerPage) : 0; + }, [data?.count, rowsPerPage]); + + const loadingState = isLoading || data?.results.length === 0 ? "loading" : "idle"; + + return ( + 0 ? ( +
+ setPage(page)} + /> +
+ ) : null + } + > + + Name + Height + Mass + Birth year + + } + loadingState={loadingState} + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/async-pagination.ts b/apps/docs/content/components/table/async-pagination.ts index f5c51a3c4f..f59ac27a4c 100644 --- a/apps/docs/content/components/table/async-pagination.ts +++ b/apps/docs/content/components/table/async-pagination.ts @@ -1,62 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react"; -import useSWR from "swr"; - -const fetcher = (...args) => fetch(...args).then((res) => res.json()); - -export default function App() { - const [page, setPage] = React.useState(1); - - const {data, isLoading} = useSWR(\`https://swapi.py4e.com/api/people?page=\$\{page\}\`, fetcher, { - keepPreviousData: true, - }); - - const rowsPerPage = 10; - - const pages = React.useMemo(() => { - return data?.count ? Math.ceil(data.count / rowsPerPage) : 0; - }, [data?.count, rowsPerPage]); - - const loadingState = isLoading || data?.results.length === 0 ? "loading" : "idle"; - - return ( - 0 ? ( -
- setPage(page)} - /> -
- ) : null - } - > - - Name - Height - Mass - Birth year - - } - loadingState={loadingState} - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./async-pagination.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/controlled-selection.raw.jsx b/apps/docs/content/components/table/controlled-selection.raw.jsx new file mode 100644 index 0000000000..3ee296f7b1 --- /dev/null +++ b/apps/docs/content/components/table/controlled-selection.raw.jsx @@ -0,0 +1,75 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); + + return ( + + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/controlled-selection.ts b/apps/docs/content/components/table/controlled-selection.ts index 0a54c2bd26..b141b81895 100644 --- a/apps/docs/content/components/table/controlled-selection.ts +++ b/apps/docs/content/components/table/controlled-selection.ts @@ -1,70 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); - - return ( - - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./controlled-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/custom-cells.raw.jsx b/apps/docs/content/components/table/custom-cells.raw.jsx new file mode 100644 index 0000000000..e29158daeb --- /dev/null +++ b/apps/docs/content/components/table/custom-cells.raw.jsx @@ -0,0 +1,271 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + User, + Chip, + Tooltip, +} from "@nextui-org/react"; + +export const columns = [ + {name: "NAME", uid: "name"}, + {name: "ROLE", uid: "role"}, + {name: "STATUS", uid: "status"}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Technical Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Senior Developer", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "Community Manager", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "Sales Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, +]; + +export const EyeIcon = (props) => { + return ( + + ); +}; + +export const DeleteIcon = (props) => { + return ( + + ); +}; + +export const EditIcon = (props) => { + return ( + + ); +}; + +const statusColorMap = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +export default function App() { + const renderCell = React.useCallback((user, columnKey) => { + const cellValue = user[columnKey]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
+

{cellValue}

+

{user.team}

+
+ ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
+ + + + + + + + + + + + + + + +
+ ); + default: + return cellValue; + } + }, []); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/custom-cells.raw.tsx b/apps/docs/content/components/table/custom-cells.raw.tsx new file mode 100644 index 0000000000..46ff88e48c --- /dev/null +++ b/apps/docs/content/components/table/custom-cells.raw.tsx @@ -0,0 +1,278 @@ +import React, {SVGProps} from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + User, + Chip, + Tooltip, + ChipProps, +} from "@nextui-org/react"; + +export type IconSvgProps = SVGProps & { + size?: number; +}; + +export const columns = [ + {name: "NAME", uid: "name"}, + {name: "ROLE", uid: "role"}, + {name: "STATUS", uid: "status"}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Technical Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Senior Developer", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "Community Manager", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "Sales Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, +]; + +export const EyeIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const DeleteIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const EditIcon = (props: IconSvgProps) => { + return ( + + ); +}; +const statusColorMap: Record = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +type User = (typeof users)[0]; + +export default function App() { + const renderCell = React.useCallback((user: User, columnKey: React.Key) => { + const cellValue = user[columnKey as keyof User]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
+

{cellValue}

+

{user.team}

+
+ ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
+ + + + + + + + + + + + + + + +
+ ); + default: + return cellValue; + } + }, []); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/custom-cells.ts b/apps/docs/content/components/table/custom-cells.ts index 92680efd5f..9b7f207298 100644 --- a/apps/docs/content/components/table/custom-cells.ts +++ b/apps/docs/content/components/table/custom-cells.ts @@ -1,366 +1,12 @@ -const data = `const columns = [ - {name: "NAME", uid: "name"}, - {name: "ROLE", uid: "role"}, - {name: "STATUS", uid: "status"}, - {name: "ACTIONS", uid: "actions"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Technical Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Senior Developer", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "Community Manager", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "Sales Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, -]; - -export {columns, users};`; - -const EyeIcon = `export const EyeIcon = (props) => ( - -);`; - -const DeleteIcon = `export const DeleteIcon = (props) => ( - -);`; - -const EditIcon = `export const EditIcon = (props) => ( - -);`; - -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, User, Chip, Tooltip, getKeyValue} from "@nextui-org/react"; -import {EditIcon} from "./EditIcon"; -import {DeleteIcon} from "./DeleteIcon"; -import {EyeIcon} from "./EyeIcon"; -import {columns, users} from "./data"; - -const statusColorMap = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -export default function App() { - const renderCell = React.useCallback((user, columnKey) => { - const cellValue = user[columnKey]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
-

{cellValue}

-

{user.team}

-
- ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
- - - - - - - - - - - - - - - -
- ); - default: - return cellValue; - } - }, []); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
- ); -}`; - -const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, User, Chip, Tooltip, ChipProps, getKeyValue} from "@nextui-org/react"; -import {EditIcon} from "./EditIcon"; -import {DeleteIcon} from "./DeleteIcon"; -import {EyeIcon} from "./EyeIcon"; -import {columns, users} from "./data"; - -const statusColorMap: Record = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -type User = typeof users[0]; - -export default function App() { - const renderCell = React.useCallback((user: User, columnKey: React.Key) => { - const cellValue = user[columnKey as keyof User]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
-

{cellValue}

-

{user.team}

-
- ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
- - - - - - - - - - - - - - - -
- ); - default: - return cellValue; - } - }, []); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./custom-cells.raw.jsx?raw"; +import AppTs from "./custom-cells.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/EditIcon.jsx": EditIcon, - "/DeleteIcon.jsx": DeleteIcon, - "/EyeIcon.jsx": EyeIcon, }; const reactTs = { "/App.tsx": AppTs, - "/data.js": data, - "/EditIcon.jsx": EditIcon, - "/DeleteIcon.jsx": DeleteIcon, - "/EyeIcon.jsx": EyeIcon, }; export default { diff --git a/apps/docs/content/components/table/custom-styles.raw.jsx b/apps/docs/content/components/table/custom-styles.raw.jsx new file mode 100644 index 0000000000..f00049bb6f --- /dev/null +++ b/apps/docs/content/components/table/custom-styles.raw.jsx @@ -0,0 +1,662 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, +} from "@nextui-org/react"; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => { + return ( + + ); +}; + +const statusColorMap = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + const [page, setPage] = React.useState(1); + + const pages = Math.ceil(users.length / rowsPerPage); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a, b) => { + const first = a[sortDescriptor.column]; + const second = b[sortDescriptor.column]; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user, columnKey) => { + const cellValue = user[columnKey]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
+

{cellValue}

+

{user.team}

+
+ ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
+ + + + + + View + Edit + Delete + + +
+ ); + default: + return cellValue; + } + }, []); + + const onRowsPerPageChange = React.useCallback((e) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const topContent = React.useMemo(() => { + return ( +
+
+ } + value={filterValue} + variant="bordered" + onClear={() => setFilterValue("")} + onValueChange={onSearchChange} + /> +
+ + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
+
+
+ Total {users.length} users + +
+
+ ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onSearchChange, + onRowsPerPageChange, + users.length, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
+ + + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${items.length} selected`} + +
+ ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + const classNames = React.useMemo( + () => ({ + wrapper: ["max-h-[382px]", "max-w-3xl"], + th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], + td: [ + // changing the rows border radius + // first + "group-data-[first=true]/tr:first:before:rounded-none", + "group-data-[first=true]/tr:last:before:rounded-none", + // middle + "group-data-[middle=true]/tr:before:rounded-none", + // last + "group-data-[last=true]/tr:first:before:rounded-none", + "group-data-[last=true]/tr:last:before:rounded-none", + ], + }), + [], + ); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/custom-styles.raw.tsx b/apps/docs/content/components/table/custom-styles.raw.tsx new file mode 100644 index 0000000000..4529846f56 --- /dev/null +++ b/apps/docs/content/components/table/custom-styles.raw.tsx @@ -0,0 +1,674 @@ +import React, {SVGProps} from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, + Selection, + ChipProps, + SortDescriptor, +} from "@nextui-org/react"; + +export type IconSvgProps = SVGProps & { + size?: number; +}; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const SearchIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => { + return ( + + ); +}; + +const statusColorMap: Record = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +type User = (typeof users)[0]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState( + new Set(INITIAL_VISIBLE_COLUMNS), + ); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + const [page, setPage] = React.useState(1); + + const pages = Math.ceil(users.length / rowsPerPage); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a: User, b: User) => { + const first = a[sortDescriptor.column as keyof User] as number; + const second = b[sortDescriptor.column as keyof User] as number; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user: User, columnKey: React.Key) => { + const cellValue = user[columnKey as keyof User]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
+

{cellValue}

+

{user.team}

+
+ ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
+ + + + + + View + Edit + Delete + + +
+ ); + default: + return cellValue; + } + }, []); + + const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value?: string) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const topContent = React.useMemo(() => { + return ( +
+
+ } + value={filterValue} + variant="bordered" + onClear={() => setFilterValue("")} + onValueChange={onSearchChange} + /> +
+ + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
+
+
+ Total {users.length} users + +
+
+ ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onSearchChange, + onRowsPerPageChange, + users.length, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
+ + + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${items.length} selected`} + +
+ ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + const classNames = React.useMemo( + () => ({ + wrapper: ["max-h-[382px]", "max-w-3xl"], + th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], + td: [ + // changing the rows border radius + // first + "group-data-[first=true]/tr:first:before:rounded-none", + "group-data-[first=true]/tr:last:before:rounded-none", + // middle + "group-data-[middle=true]/tr:before:rounded-none", + // last + "group-data-[last=true]/tr:first:before:rounded-none", + "group-data-[last=true]/tr:last:before:rounded-none", + ], + }), + [], + ); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/custom-styles.ts b/apps/docs/content/components/table/custom-styles.ts index e57b2904e9..29cf5fd0ee 100644 --- a/apps/docs/content/components/table/custom-styles.ts +++ b/apps/docs/content/components/table/custom-styles.ts @@ -1,1034 +1,8 @@ -const data = `const columns = [ - {name: "ID", uid: "id", sortable: true}, - {name: "NAME", uid: "name", sortable: true}, - {name: "AGE", uid: "age", sortable: true}, - {name: "ROLE", uid: "role", sortable: true}, - {name: "TEAM", uid: "team"}, - {name: "EMAIL", uid: "email"}, - {name: "STATUS", uid: "status", sortable: true}, - {name: "ACTIONS", uid: "actions"}, -]; - -const statusOptions = [ - {name: "Active", uid: "active"}, - {name: "Paused", uid: "paused"}, - {name: "Vacation", uid: "vacation"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://i.pravatar.cc/150?img=4", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://i.pravatar.cc/150?img=5", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?img=8", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://i.pravatar.cc/150?img=10", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://i.pravatar.cc/150?img=12", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://i.pravatar.cc/150?img=16", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://i.pravatar.cc/150?img=15", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?img=20", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://i.pravatar.cc/150?img=33", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://i.pravatar.cc/150?img=29", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://i.pravatar.cc/150?img=50", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://i.pravatar.cc/150?img=45", - email: "mia.robinson@example.com", - }, -]; - -export {columns, users, statusOptions};`; - -const utils = `export function capitalize(s) { - return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; -}`; - -const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const VerticalDotsIcon = `export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => ( - -);`; - -const App = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {SearchIcon} from "./SearchIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - const [page, setPage] = React.useState(1); - - const pages = Math.ceil(users.length / rowsPerPage); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a, b) => { - const first = a[sortDescriptor.column]; - const second = b[sortDescriptor.column]; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user, columnKey) => { - const cellValue = user[columnKey]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
-

{cellValue}

-

{user.team}

-
- ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
- - - - - - View - Edit - Delete - - -
- ); - default: - return cellValue; - } - }, []); - - const onRowsPerPageChange = React.useCallback((e) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - - const onSearchChange = React.useCallback((value) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const topContent = React.useMemo(() => { - return ( -
-
- } - value={filterValue} - variant="bordered" - onClear={() => setFilterValue("")} - onValueChange={onSearchChange} - /> -
- - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
-
-
- Total {users.length} users - -
-
- ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onSearchChange, - onRowsPerPageChange, - users.length, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
- - - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${items.length} selected\`} - -
- ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - const classNames = React.useMemo( - () => ({ - wrapper: ["max-h-[382px]", "max-w-3xl"], - th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], - td: [ - // changing the rows border radius - // first - "group-data-[first=true]/tr:first:before:rounded-none", - "group-data-[first=true]/tr:last:before:rounded-none", - // middle - "group-data-[middle=true]/tr:before:rounded-none", - // last - "group-data-[last=true]/tr:first:before:rounded-none", - "group-data-[last=true]/tr:last:before:rounded-none", - ], - }), - [], - ); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
- ); -}`; - -const AppTs = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, - Selection, - ChipProps, - SortDescriptor -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {SearchIcon} from "./SearchIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap: Record = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -type User = typeof users[0]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - const [page, setPage] = React.useState(1); - - const pages = Math.ceil(users.length / rowsPerPage); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a: User, b: User) => { - const first = a[sortDescriptor.column as keyof User] as number; - const second = b[sortDescriptor.column as keyof User] as number; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user: User, columnKey: React.Key) => { - const cellValue = user[columnKey as keyof User]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
-

{cellValue}

-

{user.team}

-
- ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
- - - - - - View - Edit - Delete - - -
- ); - default: - return cellValue; - } - }, []); - - - const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - const onSearchChange = React.useCallback((value?: string) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const topContent = React.useMemo(() => { - return ( -
-
- } - value={filterValue} - variant="bordered" - onClear={() => setFilterValue("")} - onValueChange={onSearchChange} - /> -
- - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
-
-
- Total {users.length} users - -
-
- ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onSearchChange, - onRowsPerPageChange, - users.length, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
- - - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${items.length} selected\`} - -
- ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - const classNames = React.useMemo( - () => ({ - wrapper: ["max-h-[382px]", "max-w-3xl"], - th: ["bg-transparent", "text-default-500", "border-b", "border-divider"], - td: [ - // changing the rows border radius - // first - "group-data-[first=true]/tr:first:before:rounded-none", - "group-data-[first=true]/tr:last:before:rounded-none", - // middle - "group-data-[middle=true]/tr:before:rounded-none", - // last - "group-data-[last=true]/tr:first:before:rounded-none", - "group-data-[last=true]/tr:last:before:rounded-none", - ], - }), - [], - ); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./custom-styles.raw.jsx?raw"; +import AppTs from "./custom-styles.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/utils.js": utils, - "/PlusIcon.jsx": PlusIcon, - "/VerticalDotsIcon.jsx": VerticalDotsIcon, - "/SearchIcon.jsx": SearchIcon, - "/ChevronDownIcon.jsx": ChevronDownIcon, }; const reactTs = { diff --git a/apps/docs/content/components/table/disabled-rows.raw.jsx b/apps/docs/content/components/table/disabled-rows.raw.jsx new file mode 100644 index 0000000000..2866f2b0a6 --- /dev/null +++ b/apps/docs/content/components/table/disabled-rows.raw.jsx @@ -0,0 +1,76 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); + + return ( + + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/disabled-rows.ts b/apps/docs/content/components/table/disabled-rows.ts index bdb9ba21f6..c619fe06f6 100644 --- a/apps/docs/content/components/table/disabled-rows.ts +++ b/apps/docs/content/components/table/disabled-rows.ts @@ -1,71 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"])); - - return ( - - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./disabled-rows.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/disallow-empty-selection.raw.jsx b/apps/docs/content/components/table/disallow-empty-selection.raw.jsx new file mode 100644 index 0000000000..14a5db7045 --- /dev/null +++ b/apps/docs/content/components/table/disallow-empty-selection.raw.jsx @@ -0,0 +1,68 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + return ( +
+ + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ + {colors.map((color) => ( + + {color} + + ))} + +
+ ); +} diff --git a/apps/docs/content/components/table/disallow-empty-selection.ts b/apps/docs/content/components/table/disallow-empty-selection.ts index 474b257da0..a1abceee1f 100644 --- a/apps/docs/content/components/table/disallow-empty-selection.ts +++ b/apps/docs/content/components/table/disallow-empty-selection.ts @@ -1,67 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react"; - -const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default"); - - return ( -
- - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
- - {colors.map((color) => ( - - {color} - - ))} - -
- ); -}`; +import App from "./disallow-empty-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/dynamic.raw.jsx b/apps/docs/content/components/table/dynamic.raw.jsx new file mode 100644 index 0000000000..a6e733dd18 --- /dev/null +++ b/apps/docs/content/components/table/dynamic.raw.jsx @@ -0,0 +1,68 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + return ( + + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/dynamic.ts b/apps/docs/content/components/table/dynamic.ts index bf20c16d51..5d3c97bb9a 100644 --- a/apps/docs/content/components/table/dynamic.ts +++ b/apps/docs/content/components/table/dynamic.ts @@ -1,63 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - return ( - - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./dynamic.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/empty.raw.jsx b/apps/docs/content/components/table/empty.raw.jsx new file mode 100644 index 0000000000..2d27a10705 --- /dev/null +++ b/apps/docs/content/components/table/empty.raw.jsx @@ -0,0 +1,14 @@ +import {Table, TableHeader, TableColumn, TableBody} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + {[]} +
+ ); +} diff --git a/apps/docs/content/components/table/empty.ts b/apps/docs/content/components/table/empty.ts index 1a6e0ced1e..962836358a 100644 --- a/apps/docs/content/components/table/empty.ts +++ b/apps/docs/content/components/table/empty.ts @@ -1,17 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - {[]} -
- ); -}`; +import App from "./empty.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/infinite-pagination.raw.jsx b/apps/docs/content/components/table/infinite-pagination.raw.jsx new file mode 100644 index 0000000000..2af4de3203 --- /dev/null +++ b/apps/docs/content/components/table/infinite-pagination.raw.jsx @@ -0,0 +1,76 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Spinner, + getKeyValue, +} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + const [isLoading, setIsLoading] = React.useState(true); + const [hasMore, setHasMore] = React.useState(false); + + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) { + setIsLoading(false); + } + + // If no cursor is available, then we're loading the first page. + // Otherwise, the cursor is the next URL to load, as returned from the previous page. + const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); + let json = await res.json(); + + setHasMore(json.next !== null); + + return { + items: json.results, + cursor: json.next, + }; + }, + }); + + const [loaderRef, scrollerRef] = useInfiniteScroll({hasMore, onLoadMore: list.loadMore}); + + return ( + + + + ) : null + } + classNames={{ + base: "max-h-[520px] overflow-scroll", + table: "min-h-[400px]", + }} + > + + Name + Height + Mass + Birth year + + } + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/infinite-pagination.raw.tsx b/apps/docs/content/components/table/infinite-pagination.raw.tsx new file mode 100644 index 0000000000..4d69e33341 --- /dev/null +++ b/apps/docs/content/components/table/infinite-pagination.raw.tsx @@ -0,0 +1,87 @@ +import React from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Spinner, + getKeyValue, +} from "@nextui-org/react"; +import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; +import {useAsyncList} from "@react-stately/data"; + +interface SWCharacter { + name: string; + height: string; + mass: string; + birth_year: string; +} + +export default function App() { + const [isLoading, setIsLoading] = React.useState(true); + const [hasMore, setHasMore] = React.useState(false); + + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) { + setIsLoading(false); + } + + // If no cursor is available, then we're loading the first page. + // Otherwise, the cursor is the next URL to load, as returned from the previous page. + const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); + let json = await res.json(); + + setHasMore(json.next !== null); + + return { + items: json.results, + cursor: json.next, + }; + }, + }); + + const [loaderRef, scrollerRef] = useInfiniteScroll({ + hasMore, + onLoadMore: list.loadMore, + }); + + return ( + + + + ) : null + } + classNames={{ + base: "max-h-[520px] overflow-scroll", + table: "min-h-[400px]", + }} + > + + Name + Height + Mass + Birth year + + } + > + {(item: SWCharacter) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/infinite-pagination.ts b/apps/docs/content/components/table/infinite-pagination.ts index 145813869a..cdee063a64 100644 --- a/apps/docs/content/components/table/infinite-pagination.ts +++ b/apps/docs/content/components/table/infinite-pagination.ts @@ -1,154 +1,5 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react"; -import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - const [isLoading, setIsLoading] = React.useState(true); - const [hasMore, setHasMore] = React.useState(false); - - let list = useAsyncList({ - async load({signal, cursor}) { - - if (cursor) { - setIsLoading(false); - } - - // If no cursor is available, then we're loading the first page. - // Otherwise, the cursor is the next URL to load, as returned from the previous page. - const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); - let json = await res.json(); - - setHasMore(json.next !== null); - - return { - items: json.results, - cursor: json.next, - }; - }, - }); - - const [loaderRef, scrollerRef] = useInfiniteScroll({hasMore, onLoadMore: list.loadMore}); - - return ( - - - - ) : null - } - classNames={{ - base: "max-h-[520px] overflow-scroll", - table: "min-h-[400px]", - }} - > - - Name - Height - Mass - Birth year - - } - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; - -const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react"; -import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll"; -import { useAsyncList } from "@react-stately/data"; - -interface SWCharacter { - name: string; - height: string; - mass: string; - birth_year: string; -} - -export default function App() { - const [isLoading, setIsLoading] = React.useState(true); - const [hasMore, setHasMore] = React.useState(false); - - let list = useAsyncList({ - async load({ signal, cursor }) { - if (cursor) { - setIsLoading(false); - } - - // If no cursor is available, then we're loading the first page. - // Otherwise, the cursor is the next URL to load, as returned from the previous page. - const res = await fetch( - cursor || "https://swapi.py4e.com/api/people/?search=", - { signal } - ); - let json = await res.json(); - - setHasMore(json.next !== null); - - return { - items: json.results, - cursor: json.next, - }; - }, - }); - - const [loaderRef, scrollerRef] = useInfiniteScroll({ - hasMore, - onLoadMore: list.loadMore, - }); - - return ( - - - - ) : null - } - classNames={{ - base: "max-h-[520px] overflow-scroll", - table: "min-h-[400px]", - }} - > - - Name - Height - Mass - Birth year - - } - > - {(item: SWCharacter) => ( - - {(columnKey) => ( - {getKeyValue(item, columnKey)} - )} - - )} - -
- ); -}`; +import App from "./infinite-pagination.raw.jsx?raw"; +import AppTs from "./infinite-pagination.raw.tsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/load-more.raw.jsx b/apps/docs/content/components/table/load-more.raw.jsx new file mode 100644 index 0000000000..a011985059 --- /dev/null +++ b/apps/docs/content/components/table/load-more.raw.jsx @@ -0,0 +1,80 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Spinner, + Button, +} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + const [page, setPage] = React.useState(1); + const [isLoading, setIsLoading] = React.useState(true); + + let list = useAsyncList({ + async load({signal, cursor}) { + if (cursor) { + setPage((prev) => prev + 1); + } + + // If no cursor is available, then we're loading the first page. + // Otherwise, the cursor is the next URL to load, as returned from the previous page. + const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); + let json = await res.json(); + + if (!cursor) { + setIsLoading(false); + } + + return { + items: json.results, + cursor: json.next, + }; + }, + }); + + const hasMore = page < 9; + + return ( + + + + ) : null + } + classNames={{ + base: "max-h-[520px] overflow-scroll", + table: "min-h-[420px]", + }} + > + + Name + Height + Mass + Birth year + + } + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/load-more.ts b/apps/docs/content/components/table/load-more.ts index 70e8cd3825..872717cc04 100644 --- a/apps/docs/content/components/table/load-more.ts +++ b/apps/docs/content/components/table/load-more.ts @@ -1,73 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Spinner, Button} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - const [page, setPage] = React.useState(1); - const [isLoading, setIsLoading] = React.useState(true); - - let list = useAsyncList({ - async load({signal, cursor}) { - if (cursor) { - setPage((prev) => prev + 1); - } - - // If no cursor is available, then we're loading the first page. - // Otherwise, the cursor is the next URL to load, as returned from the previous page. - const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal}); - let json = await res.json(); - - if (!cursor) { - setIsLoading(false); - } - - return { - items: json.results, - cursor: json.next, - }; - }, - }); - - const hasMore = page < 9; - - return ( - - - - ) : null - } - classNames={{ - base: "max-h-[520px] overflow-scroll", - table: "min-h-[420px]", - }} - > - - Name - Height - Mass - Birth year - - } - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./load-more.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/multiple-selection.raw.jsx b/apps/docs/content/components/table/multiple-selection.raw.jsx new file mode 100644 index 0000000000..e6abd5b42e --- /dev/null +++ b/apps/docs/content/components/table/multiple-selection.raw.jsx @@ -0,0 +1,67 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + return ( +
+ + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ + {colors.map((color) => ( + + {color} + + ))} + +
+ ); +} diff --git a/apps/docs/content/components/table/multiple-selection.ts b/apps/docs/content/components/table/multiple-selection.ts index e5be5d114a..f03bb84fb5 100644 --- a/apps/docs/content/components/table/multiple-selection.ts +++ b/apps/docs/content/components/table/multiple-selection.ts @@ -1,66 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react"; - -const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default"); - - return ( -
- - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
- - {colors.map((color) => ( - - {color} - - ))} - -
- ); -}`; +import App from "./multiple-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/paginated.raw.jsx b/apps/docs/content/components/table/paginated.raw.jsx new file mode 100644 index 0000000000..962c2dfdd1 --- /dev/null +++ b/apps/docs/content/components/table/paginated.raw.jsx @@ -0,0 +1,212 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Pagination, + getKeyValue, +} from "@nextui-org/react"; + +export const users = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, + { + key: "5", + name: "Emily Collins", + role: "Marketing Manager", + status: "Active", + }, + { + key: "6", + name: "Brian Kim", + role: "Product Manager", + status: "Active", + }, + { + key: "7", + name: "Laura Thompson", + role: "UX Designer", + status: "Active", + }, + { + key: "8", + name: "Michael Stevens", + role: "Data Analyst", + status: "Paused", + }, + { + key: "9", + name: "Sophia Nguyen", + role: "Quality Assurance", + status: "Active", + }, + { + key: "10", + name: "James Wilson", + role: "Front-end Developer", + status: "Vacation", + }, + { + key: "11", + name: "Ava Johnson", + role: "Back-end Developer", + status: "Active", + }, + { + key: "12", + name: "Isabella Smith", + role: "Graphic Designer", + status: "Active", + }, + { + key: "13", + name: "Oliver Brown", + role: "Content Writer", + status: "Paused", + }, + { + key: "14", + name: "Lucas Jones", + role: "Project Manager", + status: "Active", + }, + { + key: "15", + name: "Grace Davis", + role: "HR Manager", + status: "Active", + }, + { + key: "16", + name: "Elijah Garcia", + role: "Network Administrator", + status: "Active", + }, + { + key: "17", + name: "Emma Martinez", + role: "Accountant", + status: "Vacation", + }, + { + key: "18", + name: "Benjamin Lee", + role: "Operations Manager", + status: "Active", + }, + { + key: "19", + name: "Mia Hernandez", + role: "Sales Manager", + status: "Paused", + }, + { + key: "20", + name: "Daniel Lewis", + role: "DevOps Engineer", + status: "Active", + }, + { + key: "21", + name: "Amelia Clark", + role: "Social Media Specialist", + status: "Active", + }, + { + key: "22", + name: "Jackson Walker", + role: "Customer Support", + status: "Active", + }, + { + key: "23", + name: "Henry Hall", + role: "Security Analyst", + status: "Active", + }, + { + key: "24", + name: "Charlotte Young", + role: "PR Specialist", + status: "Paused", + }, + { + key: "25", + name: "Liam King", + role: "Mobile App Developer", + status: "Active", + }, +]; + +export default function App() { + const [page, setPage] = React.useState(1); + const rowsPerPage = 4; + + const pages = Math.ceil(users.length / rowsPerPage); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return users.slice(start, end); + }, [page, users]); + + return ( + + setPage(page)} + /> + + } + classNames={{ + wrapper: "min-h-[222px]", + }} + > + + NAME + ROLE + STATUS + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/paginated.ts b/apps/docs/content/components/table/paginated.ts index 75be89dc52..557add2fce 100644 --- a/apps/docs/content/components/table/paginated.ts +++ b/apps/docs/content/components/table/paginated.ts @@ -1,211 +1,7 @@ -const data = `export const users = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, - { - key: "5", - name: "Emily Collins", - role: "Marketing Manager", - status: "Active", - }, - { - key: "6", - name: "Brian Kim", - role: "Product Manager", - status: "Active", - }, - { - key: "7", - name: "Laura Thompson", - role: "UX Designer", - status: "Active", - }, - { - key: "8", - name: "Michael Stevens", - role: "Data Analyst", - status: "Paused", - }, - { - key: "9", - name: "Sophia Nguyen", - role: "Quality Assurance", - status: "Active", - }, - { - key: "10", - name: "James Wilson", - role: "Front-end Developer", - status: "Vacation", - }, - { - key: "11", - name: "Ava Johnson", - role: "Back-end Developer", - status: "Active", - }, - { - key: "12", - name: "Isabella Smith", - role: "Graphic Designer", - status: "Active", - }, - { - key: "13", - name: "Oliver Brown", - role: "Content Writer", - status: "Paused", - }, - { - key: "14", - name: "Lucas Jones", - role: "Project Manager", - status: "Active", - }, - { - key: "15", - name: "Grace Davis", - role: "HR Manager", - status: "Active", - }, - { - key: "16", - name: "Elijah Garcia", - role: "Network Administrator", - status: "Active", - }, - { - key: "17", - name: "Emma Martinez", - role: "Accountant", - status: "Vacation", - }, - { - key: "18", - name: "Benjamin Lee", - role: "Operations Manager", - status: "Active", - }, - { - key: "19", - name: "Mia Hernandez", - role: "Sales Manager", - status: "Paused", - }, - { - key: "20", - name: "Daniel Lewis", - role: "DevOps Engineer", - status: "Active", - }, - { - key: "21", - name: "Amelia Clark", - role: "Social Media Specialist", - status: "Active", - }, - { - key: "22", - name: "Jackson Walker", - role: "Customer Support", - status: "Active", - }, - { - key: "23", - name: "Henry Hall", - role: "Security Analyst", - status: "Active", - }, - { - key: "24", - name: "Charlotte Young", - role: "PR Specialist", - status: "Paused", - }, - { - key: "25", - name: "Liam King", - role: "Mobile App Developer", - status: "Active", - }, -];`; - -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, getKeyValue} from "@nextui-org/react"; -import {users} from "./data"; - -export default function App() { - const [page, setPage] = React.useState(1); - const rowsPerPage = 4; - - const pages = Math.ceil(users.length / rowsPerPage); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return users.slice(start, end); - }, [page, users]); - - return ( - - setPage(page)} - /> - - } - classNames={{ - wrapper: "min-h-[222px]", - }} - > - - NAME - ROLE - STATUS - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./paginated.raw.jsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, }; export default { diff --git a/apps/docs/content/components/table/row-actions.raw.jsx b/apps/docs/content/components/table/row-actions.raw.jsx new file mode 100644 index 0000000000..1e6cf2dc5a --- /dev/null +++ b/apps/docs/content/components/table/row-actions.raw.jsx @@ -0,0 +1,88 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Radio, + RadioGroup, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); + + return ( +
+ alert(`Opening item ${key}...`)} + > + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ + Toggle + Replace + +
+ ); +} diff --git a/apps/docs/content/components/table/row-actions.ts b/apps/docs/content/components/table/row-actions.ts index d9d0782566..06178c6b7f 100644 --- a/apps/docs/content/components/table/row-actions.ts +++ b/apps/docs/content/components/table/row-actions.ts @@ -1,81 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Radio, RadioGroup} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); - - return ( -
- alert(\`Opening item \${key}...\`)} - > - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- - Toggle - Replace - -
- ); -}`; +import App from "./row-actions.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/selection-behavior.raw.jsx b/apps/docs/content/components/table/selection-behavior.raw.jsx new file mode 100644 index 0000000000..d0fec4a868 --- /dev/null +++ b/apps/docs/content/components/table/selection-behavior.raw.jsx @@ -0,0 +1,87 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Radio, + RadioGroup, +} from "@nextui-org/react"; + +const rows = [ + { + key: "1", + name: "Tony Reichert", + role: "CEO", + status: "Active", + }, + { + key: "2", + name: "Zoey Lang", + role: "Technical Lead", + status: "Paused", + }, + { + key: "3", + name: "Jane Fisher", + role: "Senior Developer", + status: "Active", + }, + { + key: "4", + name: "William Howard", + role: "Community Manager", + status: "Vacation", + }, +]; + +const columns = [ + { + key: "name", + label: "NAME", + }, + { + key: "role", + label: "ROLE", + }, + { + key: "status", + label: "STATUS", + }, +]; + +export default function App() { + const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); + + return ( +
+ + + {(column) => {column.label}} + + + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ + Toggle + Replace + +
+ ); +} diff --git a/apps/docs/content/components/table/selection-behavior.ts b/apps/docs/content/components/table/selection-behavior.ts index 566480015f..b36dec6d8b 100644 --- a/apps/docs/content/components/table/selection-behavior.ts +++ b/apps/docs/content/components/table/selection-behavior.ts @@ -1,80 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Radio, RadioGroup} from "@nextui-org/react"; - -const rows = [ - { - key: "1", - name: "Tony Reichert", - role: "CEO", - status: "Active", - }, - { - key: "2", - name: "Zoey Lang", - role: "Technical Lead", - status: "Paused", - }, - { - key: "3", - name: "Jane Fisher", - role: "Senior Developer", - status: "Active", - }, - { - key: "4", - name: "William Howard", - role: "Community Manager", - status: "Vacation", - }, -]; - -const columns = [ - { - key: "name", - label: "NAME", - }, - { - key: "role", - label: "ROLE", - }, - { - key: "status", - label: "STATUS", - }, -]; - -export default function App() { - const [selectionBehavior, setSelectionBehavior] = React.useState("toggle"); - - return ( -
- - - {(column) => {column.label}} - - - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- - Toggle - Replace - -
- ); -}`; +import App from "./selection-behavior.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/single-selection.raw.jsx b/apps/docs/content/components/table/single-selection.raw.jsx new file mode 100644 index 0000000000..35122ba3f8 --- /dev/null +++ b/apps/docs/content/components/table/single-selection.raw.jsx @@ -0,0 +1,67 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + RadioGroup, + Radio, +} from "@nextui-org/react"; + +const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; + +export default function App() { + const [selectedColor, setSelectedColor] = React.useState("default"); + + return ( +
+ + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ + {colors.map((color) => ( + + {color} + + ))} + +
+ ); +} diff --git a/apps/docs/content/components/table/single-selection.ts b/apps/docs/content/components/table/single-selection.ts index e187ab933c..65d8454ff8 100644 --- a/apps/docs/content/components/table/single-selection.ts +++ b/apps/docs/content/components/table/single-selection.ts @@ -1,66 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react"; - -const colors = ["default", "primary", "secondary", "success", "warning", "danger"]; - -export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default"); - - return ( -
- - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
- - {colors.map((color) => ( - - {color} - - ))} - -
- ); -}`; +import App from "./single-selection.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/sorting.raw.jsx b/apps/docs/content/components/table/sorting.raw.jsx new file mode 100644 index 0000000000..ddc13bfbbb --- /dev/null +++ b/apps/docs/content/components/table/sorting.raw.jsx @@ -0,0 +1,82 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + getKeyValue, + Spinner, +} from "@nextui-org/react"; +import {useAsyncList} from "@react-stately/data"; + +export default function App() { + const [isLoading, setIsLoading] = React.useState(true); + + let list = useAsyncList({ + async load({signal}) { + let res = await fetch("https://swapi.py4e.com/api/people/?search", { + signal, + }); + let json = await res.json(); + + setIsLoading(false); + + return { + items: json.results, + }; + }, + async sort({items, sortDescriptor}) { + return { + items: items.sort((a, b) => { + let first = a[sortDescriptor.column]; + let second = b[sortDescriptor.column]; + let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1; + + if (sortDescriptor.direction === "descending") { + cmp *= -1; + } + + return cmp; + }), + }; + }, + }); + + return ( + + + + Name + + + Height + + + Mass + + + Birth year + + + } + > + {(item) => ( + + {(columnKey) => {getKeyValue(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/sorting.ts b/apps/docs/content/components/table/sorting.ts index be3f41afb6..231fa295c0 100644 --- a/apps/docs/content/components/table/sorting.ts +++ b/apps/docs/content/components/table/sorting.ts @@ -1,75 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Spinner} from "@nextui-org/react"; -import {useAsyncList} from "@react-stately/data"; - -export default function App() { - const [isLoading, setIsLoading] = React.useState(true); - - let list = useAsyncList({ - async load({signal}) { - let res = await fetch('https://swapi.py4e.com/api/people/?search', { - signal, - }); - let json = await res.json(); - setIsLoading(false); - - return { - items: json.results, - }; - }, - async sort({items, sortDescriptor}) { - return { - items: items.sort((a, b) => { - let first = a[sortDescriptor.column]; - let second = b[sortDescriptor.column]; - let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1; - - if (sortDescriptor.direction === "descending") { - cmp *= -1; - } - - return cmp; - }), - }; - }, - }); - - return ( - - - - Name - - - Height - - - Mass - - - Birth year - - - } - > - {(item) => ( - - {(columnKey) => {getKeyValue(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./sorting.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/striped.raw.jsx b/apps/docs/content/components/table/striped.raw.jsx new file mode 100644 index 0000000000..a032ad7f63 --- /dev/null +++ b/apps/docs/content/components/table/striped.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ ); +} diff --git a/apps/docs/content/components/table/striped.ts b/apps/docs/content/components/table/striped.ts index 2d9f32ff59..efcbdde82e 100644 --- a/apps/docs/content/components/table/striped.ts +++ b/apps/docs/content/components/table/striped.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
- ); -}`; +import App from "./striped.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/usage.raw.jsx b/apps/docs/content/components/table/usage.raw.jsx new file mode 100644 index 0000000000..b6a8bf0c51 --- /dev/null +++ b/apps/docs/content/components/table/usage.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ ); +} diff --git a/apps/docs/content/components/table/usage.ts b/apps/docs/content/components/table/usage.ts index b6e06ec81f..1118304c37 100644 --- a/apps/docs/content/components/table/usage.ts +++ b/apps/docs/content/components/table/usage.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
- ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/use-case.raw.jsx b/apps/docs/content/components/table/use-case.raw.jsx new file mode 100644 index 0000000000..b1bbeaf73c --- /dev/null +++ b/apps/docs/content/components/table/use-case.raw.jsx @@ -0,0 +1,640 @@ +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, +} from "@nextui-org/react"; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "Active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +export function capitalize(s) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => { + return ( + + ); +}; + +export const SearchIcon = (props) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => { + return ( + + ); +}; + +const statusColorMap = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + const [page, setPage] = React.useState(1); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const pages = Math.ceil(filteredItems.length / rowsPerPage); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a, b) => { + const first = a[sortDescriptor.column]; + const second = b[sortDescriptor.column]; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user, columnKey) => { + const cellValue = user[columnKey]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
+

{cellValue}

+

{user.team}

+
+ ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
+ + + + + + View + Edit + Delete + + +
+ ); + default: + return cellValue; + } + }, []); + + const onNextPage = React.useCallback(() => { + if (page < pages) { + setPage(page + 1); + } + }, [page, pages]); + + const onPreviousPage = React.useCallback(() => { + if (page > 1) { + setPage(page - 1); + } + }, [page]); + + const onRowsPerPageChange = React.useCallback((e) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const onClear = React.useCallback(() => { + setFilterValue(""); + setPage(1); + }, []); + + const topContent = React.useMemo(() => { + return ( +
+
+ } + value={filterValue} + onClear={() => onClear()} + onValueChange={onSearchChange} + /> +
+ + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
+
+
+ Total {users.length} users + +
+
+ ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onRowsPerPageChange, + users.length, + onSearchChange, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
+ + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${filteredItems.length} selected`} + + +
+ + +
+
+ ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/use-case.raw.tsx b/apps/docs/content/components/table/use-case.raw.tsx new file mode 100644 index 0000000000..e5c0113e35 --- /dev/null +++ b/apps/docs/content/components/table/use-case.raw.tsx @@ -0,0 +1,653 @@ +import React, {SVGProps} from "react"; +import { + Table, + TableHeader, + TableColumn, + TableBody, + TableRow, + TableCell, + Input, + Button, + DropdownTrigger, + Dropdown, + DropdownMenu, + DropdownItem, + Chip, + User, + Pagination, + Selection, + ChipProps, + SortDescriptor, +} from "@nextui-org/react"; + +export type IconSvgProps = SVGProps & { + size?: number; +}; + +export function capitalize(s: string) { + return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; +} + +export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => { + return ( + + ); +}; + +export const SearchIcon = (props: IconSvgProps) => { + return ( + + ); +}; + +export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => { + return ( + + ); +}; + +export const columns = [ + {name: "ID", uid: "id", sortable: true}, + {name: "NAME", uid: "name", sortable: true}, + {name: "AGE", uid: "age", sortable: true}, + {name: "ROLE", uid: "role", sortable: true}, + {name: "TEAM", uid: "team"}, + {name: "EMAIL", uid: "email"}, + {name: "STATUS", uid: "status", sortable: true}, + {name: "ACTIONS", uid: "actions"}, +]; + +export const statusOptions = [ + {name: "Active", uid: "active"}, + {name: "Paused", uid: "paused"}, + {name: "Vacation", uid: "vacation"}, +]; + +export const users = [ + { + id: 1, + name: "Tony Reichert", + role: "CEO", + team: "Management", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "tony.reichert@example.com", + }, + { + id: 2, + name: "Zoey Lang", + role: "Tech Lead", + team: "Development", + status: "paused", + age: "25", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", + email: "zoey.lang@example.com", + }, + { + id: 3, + name: "Jane Fisher", + role: "Sr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", + email: "jane.fisher@example.com", + }, + { + id: 4, + name: "William Howard", + role: "C.M.", + team: "Marketing", + status: "vacation", + age: "28", + avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", + email: "william.howard@example.com", + }, + { + id: 5, + name: "Kristen Copper", + role: "S. Manager", + team: "Sales", + status: "active", + age: "24", + avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", + email: "kristen.cooper@example.com", + }, + { + id: 6, + name: "Brian Kim", + role: "P. Manager", + team: "Management", + age: "29", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", + email: "brian.kim@example.com", + status: "Active", + }, + { + id: 7, + name: "Michael Hunt", + role: "Designer", + team: "Design", + status: "paused", + age: "27", + avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", + email: "michael.hunt@example.com", + }, + { + id: 8, + name: "Samantha Brooks", + role: "HR Manager", + team: "HR", + status: "active", + age: "31", + avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", + email: "samantha.brooks@example.com", + }, + { + id: 9, + name: "Frank Harrison", + role: "F. Manager", + team: "Finance", + status: "vacation", + age: "33", + avatar: "https://i.pravatar.cc/150?img=4", + email: "frank.harrison@example.com", + }, + { + id: 10, + name: "Emma Adams", + role: "Ops Manager", + team: "Operations", + status: "active", + age: "35", + avatar: "https://i.pravatar.cc/150?img=5", + email: "emma.adams@example.com", + }, + { + id: 11, + name: "Brandon Stevens", + role: "Jr. Dev", + team: "Development", + status: "active", + age: "22", + avatar: "https://i.pravatar.cc/150?img=8", + email: "brandon.stevens@example.com", + }, + { + id: 12, + name: "Megan Richards", + role: "P. Manager", + team: "Product", + status: "paused", + age: "28", + avatar: "https://i.pravatar.cc/150?img=10", + email: "megan.richards@example.com", + }, + { + id: 13, + name: "Oliver Scott", + role: "S. Manager", + team: "Security", + status: "active", + age: "37", + avatar: "https://i.pravatar.cc/150?img=12", + email: "oliver.scott@example.com", + }, + { + id: 14, + name: "Grace Allen", + role: "M. Specialist", + team: "Marketing", + status: "active", + age: "30", + avatar: "https://i.pravatar.cc/150?img=16", + email: "grace.allen@example.com", + }, + { + id: 15, + name: "Noah Carter", + role: "IT Specialist", + team: "I. Technology", + status: "paused", + age: "31", + avatar: "https://i.pravatar.cc/150?img=15", + email: "noah.carter@example.com", + }, + { + id: 16, + name: "Ava Perez", + role: "Manager", + team: "Sales", + status: "active", + age: "29", + avatar: "https://i.pravatar.cc/150?img=20", + email: "ava.perez@example.com", + }, + { + id: 17, + name: "Liam Johnson", + role: "Data Analyst", + team: "Analysis", + status: "active", + age: "28", + avatar: "https://i.pravatar.cc/150?img=33", + email: "liam.johnson@example.com", + }, + { + id: 18, + name: "Sophia Taylor", + role: "QA Analyst", + team: "Testing", + status: "active", + age: "27", + avatar: "https://i.pravatar.cc/150?img=29", + email: "sophia.taylor@example.com", + }, + { + id: 19, + name: "Lucas Harris", + role: "Administrator", + team: "Information Technology", + status: "paused", + age: "32", + avatar: "https://i.pravatar.cc/150?img=50", + email: "lucas.harris@example.com", + }, + { + id: 20, + name: "Mia Robinson", + role: "Coordinator", + team: "Operations", + status: "active", + age: "26", + avatar: "https://i.pravatar.cc/150?img=45", + email: "mia.robinson@example.com", + }, +]; + +const statusColorMap: Record = { + active: "success", + paused: "danger", + vacation: "warning", +}; + +const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; + +type User = (typeof users)[0]; + +export default function App() { + const [filterValue, setFilterValue] = React.useState(""); + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + const [visibleColumns, setVisibleColumns] = React.useState( + new Set(INITIAL_VISIBLE_COLUMNS), + ); + const [statusFilter, setStatusFilter] = React.useState("all"); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [sortDescriptor, setSortDescriptor] = React.useState({ + column: "age", + direction: "ascending", + }); + + const [page, setPage] = React.useState(1); + + const hasSearchFilter = Boolean(filterValue); + + const headerColumns = React.useMemo(() => { + if (visibleColumns === "all") return columns; + + return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); + }, [visibleColumns]); + + const filteredItems = React.useMemo(() => { + let filteredUsers = [...users]; + + if (hasSearchFilter) { + filteredUsers = filteredUsers.filter((user) => + user.name.toLowerCase().includes(filterValue.toLowerCase()), + ); + } + if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { + filteredUsers = filteredUsers.filter((user) => + Array.from(statusFilter).includes(user.status), + ); + } + + return filteredUsers; + }, [users, filterValue, statusFilter]); + + const pages = Math.ceil(filteredItems.length / rowsPerPage); + + const items = React.useMemo(() => { + const start = (page - 1) * rowsPerPage; + const end = start + rowsPerPage; + + return filteredItems.slice(start, end); + }, [page, filteredItems, rowsPerPage]); + + const sortedItems = React.useMemo(() => { + return [...items].sort((a: User, b: User) => { + const first = a[sortDescriptor.column as keyof User] as number; + const second = b[sortDescriptor.column as keyof User] as number; + const cmp = first < second ? -1 : first > second ? 1 : 0; + + return sortDescriptor.direction === "descending" ? -cmp : cmp; + }); + }, [sortDescriptor, items]); + + const renderCell = React.useCallback((user: User, columnKey: React.Key) => { + const cellValue = user[columnKey as keyof User]; + + switch (columnKey) { + case "name": + return ( + + {user.email} + + ); + case "role": + return ( +
+

{cellValue}

+

{user.team}

+
+ ); + case "status": + return ( + + {cellValue} + + ); + case "actions": + return ( +
+ + + + + + View + Edit + Delete + + +
+ ); + default: + return cellValue; + } + }, []); + + const onNextPage = React.useCallback(() => { + if (page < pages) { + setPage(page + 1); + } + }, [page, pages]); + + const onPreviousPage = React.useCallback(() => { + if (page > 1) { + setPage(page - 1); + } + }, [page]); + + const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { + setRowsPerPage(Number(e.target.value)); + setPage(1); + }, []); + + const onSearchChange = React.useCallback((value?: string) => { + if (value) { + setFilterValue(value); + setPage(1); + } else { + setFilterValue(""); + } + }, []); + + const onClear = React.useCallback(() => { + setFilterValue(""); + setPage(1); + }, []); + + const topContent = React.useMemo(() => { + return ( +
+
+ } + value={filterValue} + onClear={() => onClear()} + onValueChange={onSearchChange} + /> +
+ + + + + + {statusOptions.map((status) => ( + + {capitalize(status.name)} + + ))} + + + + + + + + {columns.map((column) => ( + + {capitalize(column.name)} + + ))} + + + +
+
+
+ Total {users.length} users + +
+
+ ); + }, [ + filterValue, + statusFilter, + visibleColumns, + onSearchChange, + onRowsPerPageChange, + users.length, + hasSearchFilter, + ]); + + const bottomContent = React.useMemo(() => { + return ( +
+ + {selectedKeys === "all" + ? "All items selected" + : `${selectedKeys.size} of ${filteredItems.length} selected`} + + +
+ + +
+
+ ); + }, [selectedKeys, items.length, page, pages, hasSearchFilter]); + + return ( + + + {(column) => ( + + {column.name} + + )} + + + {(item) => ( + + {(columnKey) => {renderCell(item, columnKey)}} + + )} + +
+ ); +} diff --git a/apps/docs/content/components/table/use-case.ts b/apps/docs/content/components/table/use-case.ts index b46e960e7c..a03774d7c8 100644 --- a/apps/docs/content/components/table/use-case.ts +++ b/apps/docs/content/components/table/use-case.ts @@ -1,1324 +1,12 @@ -const data = `const columns = [ - {name: "ID", uid: "id", sortable: true}, - {name: "NAME", uid: "name", sortable: true}, - {name: "AGE", uid: "age", sortable: true}, - {name: "ROLE", uid: "role", sortable: true}, - {name: "TEAM", uid: "team"}, - {name: "EMAIL", uid: "email"}, - {name: "STATUS", uid: "status", sortable: true}, - {name: "ACTIONS", uid: "actions"}, -]; - -const statusOptions = [ - {name: "Active", uid: "active"}, - {name: "Paused", uid: "paused"}, - {name: "Vacation", uid: "vacation"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "brian.kim@example.com", - status: "active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://i.pravatar.cc/150?img=4", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://i.pravatar.cc/150?img=5", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?img=8", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://i.pravatar.cc/150?img=10", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://i.pravatar.cc/150?img=12", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://i.pravatar.cc/150?img=16", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://i.pravatar.cc/150?img=15", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?img=20", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://i.pravatar.cc/150?img=33", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://i.pravatar.cc/150?img=29", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://i.pravatar.cc/150?img=50", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://i.pravatar.cc/150?img=45", - email: "mia.robinson@example.com", - }, -]; - -export {columns, users, statusOptions};`; - -const dataTs = `const columns = [ - {name: "ID", uid: "id", sortable: true}, - {name: "NAME", uid: "name", sortable: true}, - {name: "AGE", uid: "age", sortable: true}, - {name: "ROLE", uid: "role", sortable: true}, - {name: "TEAM", uid: "team"}, - {name: "EMAIL", uid: "email"}, - {name: "STATUS", uid: "status", sortable: true}, - {name: "ACTIONS", uid: "actions"}, -]; - -const statusOptions = [ - {name: "Active", uid: "active"}, - {name: "Paused", uid: "paused"}, - {name: "Vacation", uid: "vacation"}, -]; - -const users = [ - { - id: 1, - name: "Tony Reichert", - role: "CEO", - team: "Management", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "tony.reichert@example.com", - }, - { - id: 2, - name: "Zoey Lang", - role: "Tech Lead", - team: "Development", - status: "paused", - age: "25", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d", - email: "zoey.lang@example.com", - }, - { - id: 3, - name: "Jane Fisher", - role: "Sr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d", - email: "jane.fisher@example.com", - }, - { - id: 4, - name: "William Howard", - role: "C.M.", - team: "Marketing", - status: "vacation", - age: "28", - avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d", - email: "william.howard@example.com", - }, - { - id: 5, - name: "Kristen Copper", - role: "S. Manager", - team: "Sales", - status: "active", - age: "24", - avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d", - email: "kristen.cooper@example.com", - }, - { - id: 6, - name: "Brian Kim", - role: "P. Manager", - team: "Management", - age: "29", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d", - email: "brian.kim@example.com", - status: "Active", - }, - { - id: 7, - name: "Michael Hunt", - role: "Designer", - team: "Design", - status: "paused", - age: "27", - avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d", - email: "michael.hunt@example.com", - }, - { - id: 8, - name: "Samantha Brooks", - role: "HR Manager", - team: "HR", - status: "active", - age: "31", - avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d", - email: "samantha.brooks@example.com", - }, - { - id: 9, - name: "Frank Harrison", - role: "F. Manager", - team: "Finance", - status: "vacation", - age: "33", - avatar: "https://i.pravatar.cc/150?img=4", - email: "frank.harrison@example.com", - }, - { - id: 10, - name: "Emma Adams", - role: "Ops Manager", - team: "Operations", - status: "active", - age: "35", - avatar: "https://i.pravatar.cc/150?img=5", - email: "emma.adams@example.com", - }, - { - id: 11, - name: "Brandon Stevens", - role: "Jr. Dev", - team: "Development", - status: "active", - age: "22", - avatar: "https://i.pravatar.cc/150?img=8", - email: "brandon.stevens@example.com", - }, - { - id: 12, - name: "Megan Richards", - role: "P. Manager", - team: "Product", - status: "paused", - age: "28", - avatar: "https://i.pravatar.cc/150?img=10", - email: "megan.richards@example.com", - }, - { - id: 13, - name: "Oliver Scott", - role: "S. Manager", - team: "Security", - status: "active", - age: "37", - avatar: "https://i.pravatar.cc/150?img=12", - email: "oliver.scott@example.com", - }, - { - id: 14, - name: "Grace Allen", - role: "M. Specialist", - team: "Marketing", - status: "active", - age: "30", - avatar: "https://i.pravatar.cc/150?img=16", - email: "grace.allen@example.com", - }, - { - id: 15, - name: "Noah Carter", - role: "IT Specialist", - team: "I. Technology", - status: "paused", - age: "31", - avatar: "https://i.pravatar.cc/150?img=15", - email: "noah.carter@example.com", - }, - { - id: 16, - name: "Ava Perez", - role: "Manager", - team: "Sales", - status: "active", - age: "29", - avatar: "https://i.pravatar.cc/150?img=20", - email: "ava.perez@example.com", - }, - { - id: 17, - name: "Liam Johnson", - role: "Data Analyst", - team: "Analysis", - status: "active", - age: "28", - avatar: "https://i.pravatar.cc/150?img=33", - email: "liam.johnson@example.com", - }, - { - id: 18, - name: "Sophia Taylor", - role: "QA Analyst", - team: "Testing", - status: "active", - age: "27", - avatar: "https://i.pravatar.cc/150?img=29", - email: "sophia.taylor@example.com", - }, - { - id: 19, - name: "Lucas Harris", - role: "Administrator", - team: "Information Technology", - status: "paused", - age: "32", - avatar: "https://i.pravatar.cc/150?img=50", - email: "lucas.harris@example.com", - }, - { - id: 20, - name: "Mia Robinson", - role: "Coordinator", - team: "Operations", - status: "active", - age: "26", - avatar: "https://i.pravatar.cc/150?img=45", - email: "mia.robinson@example.com", - }, -]; - -export {columns, users, statusOptions};`; - -const types = `import {SVGProps} from "react"; - -export type IconSvgProps = SVGProps & { - size?: number; -};`; - -const utils = `export function capitalize(s) { - return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; -}`; - -const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const VerticalDotsIcon = `export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => ( - -);`; - -const SearchIcon = `export const SearchIcon = (props) => ( - -);`; - -const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => ( - -);`; - -const utilsTs = `export function capitalize(s: string) { - return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : ""; -}`; - -const PlusIconTs = `import {IconSvgProps} from "./types"; - -export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => ( - -);`; - -const VerticalDotsIconTs = `import {IconSvgProps} from "./types"; - -export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => ( - -);`; - -const SearchIconTs = `import {IconSvgProps} from "./types"; - -export const SearchIcon = (props: IconSvgProps) => ( - -);`; - -const ChevronDownIconTs = `import {IconSvgProps} from "./types"; - -export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => ( - -);`; - -const App = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {SearchIcon} from "./SearchIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - const [page, setPage] = React.useState(1); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const pages = Math.ceil(filteredItems.length / rowsPerPage); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a, b) => { - const first = a[sortDescriptor.column]; - const second = b[sortDescriptor.column]; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user, columnKey) => { - const cellValue = user[columnKey]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
-

{cellValue}

-

{user.team}

-
- ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
- - - - - - View - Edit - Delete - - -
- ); - default: - return cellValue; - } - }, []); - - const onNextPage = React.useCallback(() => { - if (page < pages) { - setPage(page + 1); - } - }, [page, pages]); - - const onPreviousPage = React.useCallback(() => { - if (page > 1) { - setPage(page - 1); - } - }, [page]); - - const onRowsPerPageChange = React.useCallback((e) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - const onSearchChange = React.useCallback((value) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const onClear = React.useCallback(()=>{ - setFilterValue("") - setPage(1) - },[]) - - const topContent = React.useMemo(() => { - return ( -
-
- } - value={filterValue} - onClear={() => onClear()} - onValueChange={onSearchChange} - /> -
- - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
-
-
- Total {users.length} users - -
-
- ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onRowsPerPageChange, - users.length, - onSearchChange, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
- - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${filteredItems.length} selected\`} - - -
- - -
-
- ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
- ); -}`; - -const AppTs = `import { - Table, - TableHeader, - TableColumn, - TableBody, - TableRow, - TableCell, - Input, - Button, - DropdownTrigger, - Dropdown, - DropdownMenu, - DropdownItem, - Chip, - User, - Pagination, - Selection, - ChipProps, - SortDescriptor -} from "@nextui-org/react"; -import {PlusIcon} from "./PlusIcon"; -import {VerticalDotsIcon} from "./VerticalDotsIcon"; -import {ChevronDownIcon} from "./ChevronDownIcon"; -import {SearchIcon} from "./SearchIcon"; -import {columns, users, statusOptions} from "./data"; -import {capitalize} from "./utils"; - -const statusColorMap: Record = { - active: "success", - paused: "danger", - vacation: "warning", -}; - -const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"]; - -type User = typeof users[0]; - -export default function App() { - const [filterValue, setFilterValue] = React.useState(""); - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS)); - const [statusFilter, setStatusFilter] = React.useState("all"); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - const [sortDescriptor, setSortDescriptor] = React.useState({ - column: "age", - direction: "ascending", - }); - - const [page, setPage] = React.useState(1); - - const hasSearchFilter = Boolean(filterValue); - - const headerColumns = React.useMemo(() => { - if (visibleColumns === "all") return columns; - - return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)); - }, [visibleColumns]); - - const filteredItems = React.useMemo(() => { - let filteredUsers = [...users]; - - if (hasSearchFilter) { - filteredUsers = filteredUsers.filter((user) => - user.name.toLowerCase().includes(filterValue.toLowerCase()), - ); - } - if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) { - filteredUsers = filteredUsers.filter((user) => - Array.from(statusFilter).includes(user.status), - ); - } - - return filteredUsers; - }, [users, filterValue, statusFilter]); - - const pages = Math.ceil(filteredItems.length / rowsPerPage); - - const items = React.useMemo(() => { - const start = (page - 1) * rowsPerPage; - const end = start + rowsPerPage; - - return filteredItems.slice(start, end); - }, [page, filteredItems, rowsPerPage]); - - const sortedItems = React.useMemo(() => { - return [...items].sort((a: User, b: User) => { - const first = a[sortDescriptor.column as keyof User] as number; - const second = b[sortDescriptor.column as keyof User] as number; - const cmp = first < second ? -1 : first > second ? 1 : 0; - - return sortDescriptor.direction === "descending" ? -cmp : cmp; - }); - }, [sortDescriptor, items]); - - const renderCell = React.useCallback((user: User, columnKey: React.Key) => { - const cellValue = user[columnKey as keyof User]; - - switch (columnKey) { - case "name": - return ( - - {user.email} - - ); - case "role": - return ( -
-

{cellValue}

-

{user.team}

-
- ); - case "status": - return ( - - {cellValue} - - ); - case "actions": - return ( -
- - - - - - View - Edit - Delete - - -
- ); - default: - return cellValue; - } - }, []); - - const onNextPage = React.useCallback(() => { - if (page < pages) { - setPage(page + 1); - } - }, [page, pages]); - - const onPreviousPage = React.useCallback(() => { - if (page > 1) { - setPage(page - 1); - } - }, [page]); - - const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent) => { - setRowsPerPage(Number(e.target.value)); - setPage(1); - }, []); - - const onSearchChange = React.useCallback((value?: string) => { - if (value) { - setFilterValue(value); - setPage(1); - } else { - setFilterValue(""); - } - }, []); - - const onClear = React.useCallback(()=>{ - setFilterValue("") - setPage(1) - },[]) - - const topContent = React.useMemo(() => { - return ( -
-
- } - value={filterValue} - onClear={() => onClear()} - onValueChange={onSearchChange} - /> -
- - - - - - {statusOptions.map((status) => ( - - {capitalize(status.name)} - - ))} - - - - - - - - {columns.map((column) => ( - - {capitalize(column.name)} - - ))} - - - -
-
-
- Total {users.length} users - -
-
- ); - }, [ - filterValue, - statusFilter, - visibleColumns, - onSearchChange, - onRowsPerPageChange, - users.length, - hasSearchFilter, - ]); - - const bottomContent = React.useMemo(() => { - return ( -
- - {selectedKeys === "all" - ? "All items selected" - : \`\${selectedKeys.size} of \${filteredItems.length} selected\`} - - -
- - -
-
- ); - }, [selectedKeys, items.length, page, pages, hasSearchFilter]); - - return ( - - - {(column) => ( - - {column.name} - - )} - - - {(item) => ( - - {(columnKey) => {renderCell(item, columnKey)}} - - )} - -
- ); -}`; +import App from "./use-case.raw.jsx?raw"; +import AppTs from "./use-case.raw.tsx?raw"; const react = { "/App.jsx": App, - "/data.js": data, - "/utils.js": utils, - "/PlusIcon.jsx": PlusIcon, - "/SearchIcon.jsx": SearchIcon, - "/ChevronDownIcon.jsx": ChevronDownIcon, - "/VerticalDotsIcon.jsx": VerticalDotsIcon, }; const reactTs = { "/App.tsx": AppTs, - "/types.ts": types, - "/data.ts": dataTs, - "/utils.ts": utilsTs, - "/PlusIcon.tsx": PlusIconTs, - "/VerticalDotsIcon.tsx": VerticalDotsIconTs, - "/SearchIcon.tsx": SearchIconTs, - "/ChevronDownIcon.tsx": ChevronDownIconTs, }; export default { diff --git a/apps/docs/content/components/table/without-header.raw.jsx b/apps/docs/content/components/table/without-header.raw.jsx new file mode 100644 index 0000000000..e5506cc19f --- /dev/null +++ b/apps/docs/content/components/table/without-header.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ ); +} diff --git a/apps/docs/content/components/table/without-header.ts b/apps/docs/content/components/table/without-header.ts index 18c4b55d98..90f0321bcc 100644 --- a/apps/docs/content/components/table/without-header.ts +++ b/apps/docs/content/components/table/without-header.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
- ); -}`; +import App from "./without-header.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/table/without-wrapper.raw.jsx b/apps/docs/content/components/table/without-wrapper.raw.jsx new file mode 100644 index 0000000000..26d6e38715 --- /dev/null +++ b/apps/docs/content/components/table/without-wrapper.raw.jsx @@ -0,0 +1,35 @@ +import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; + +export default function App() { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ ); +} diff --git a/apps/docs/content/components/table/without-wrapper.ts b/apps/docs/content/components/table/without-wrapper.ts index 74e22f5a2a..326e580709 100644 --- a/apps/docs/content/components/table/without-wrapper.ts +++ b/apps/docs/content/components/table/without-wrapper.ts @@ -1,38 +1,4 @@ -const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react"; - -export default function App() { - return ( - - - NAME - ROLE - STATUS - - - - Tony Reichert - CEO - Active - - - Zoey Lang - Technical Lead - Paused - - - Jane Fisher - Senior Developer - Active - - - William Howard - Community Manager - Vacation - - -
- ); -}`; +import App from "./without-wrapper.raw.jsx?raw"; const react = { "/App.jsx": App, 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..d245ce75df --- /dev/null +++ b/apps/docs/content/components/tabs/custom-styles.raw.jsx @@ -0,0 +1,131 @@ +import {Tabs, Tab, Chip} from "@nextui-org/react"; + +export const GalleryIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const VideoIcon = (props) => { + return ( + + ); +}; + +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..17bca089e6 --- /dev/null +++ b/apps/docs/content/components/tabs/icons.raw.jsx @@ -0,0 +1,112 @@ +import {Tabs, Tab} from "@nextui-org/react"; + +export const GalleryIcon = (props) => { + return ( + + ); +}; + +export const MusicIcon = (props) => { + return ( + + ); +}; + +export const VideoIcon = (props) => { + return ( + + ); +}; + +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, diff --git a/apps/docs/content/components/textarea/autosize.raw.jsx b/apps/docs/content/components/textarea/autosize.raw.jsx new file mode 100644 index 0000000000..0addb39d70 --- /dev/null +++ b/apps/docs/content/components/textarea/autosize.raw.jsx @@ -0,0 +1,11 @@ +import {Textarea} from "@nextui-org/react"; + +export default function App() { + return ( +
+