From 93f274bd462b014c5cc5d2129a02397bc879929a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Wed, 6 Nov 2024 03:23:36 +0800 Subject: [PATCH 01/50] refactor(docs): revise code block (#3922) * refactor(docs): revise code block * chore(docs): resolve pr comments --- .../components/docs/components/codeblock.tsx | 108 +++++++--- .../docs/components/docs/components/helper.ts | 189 ++++++++++++++++++ apps/docs/components/mdx-components.tsx | 7 +- apps/docs/styles/globals.css | 60 ++++++ apps/docs/styles/sandpack.css | 16 ++ 5 files changed, 356 insertions(+), 24 deletions(-) create mode 100644 apps/docs/components/docs/components/helper.ts diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx index d14a14365b..43761c523a 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 "lodash"; +import BaseHighlight, {defaultProps} from "prism-react-renderer"; +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 1071270d37..b4586728ec 100644 --- a/apps/docs/components/mdx-components.tsx +++ b/apps/docs/components/mdx-components.tsx @@ -152,7 +152,12 @@ const Code = ({ }); }} > - + ); }; diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css index 21033242d3..f17f8eee5d 100644 --- a/apps/docs/styles/globals.css +++ b/apps/docs/styles/globals.css @@ -96,3 +96,63 @@ z-index: 0; content: counter(step); } } + +pre details[open]>summary>span:first-child::before { + transform: rotate(90deg); +} + +pre details[open]>summary span.custom-folder { + display: none; +} + +pre details:not([open])>summary span.ellipsis-token::after { + content: '...'; +} + +pre details:not([open])>summary span.copy-token { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +pre details[open]>summary span.copy-token { + display: none; +} + +pre details:not([open]) { + display: inline; +} + +pre details:not([open])>summary span.empty-token { + display: none; +} + +pre details:not([open])+div.token-line { + display: none; +} + +pre summary { + display: inline; + position: relative; + list-style: none; +} + +pre summary>span:first-child::before { + position: absolute; + display: inline-flex; + align-items: center; + height: 21px; + margin-left: -16px; + margin-top: 1px; + content: "▶"; + font-size: 12px; + font-style: normal; + transition: transform 100ms; + color: #999; +} \ No newline at end of file diff --git a/apps/docs/styles/sandpack.css b/apps/docs/styles/sandpack.css index 56d23993e9..7c523c2bbe 100644 --- a/apps/docs/styles/sandpack.css +++ b/apps/docs/styles/sandpack.css @@ -26,6 +26,22 @@ max-height: 100%; overflow: hidden; } + +.sp-editor, +.sp-editor-viewer { + height: auto !important; +} + +.sp-editor { + & .token-line { + padding: 0px 24px; + } +} + +.sp-code-viewer { + padding: 6px; +} + .cm-scroller { overflow: hidden; max-height: 600px; From e056c0b30cc7bf2102f6da11c8a66dd5893cdfc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Wed, 6 Nov 2024 20:24:13 +0800 Subject: [PATCH 02/50] refactor(docs): autocomplete dx (#3934) * feat(docs): add *.js?raw module * feat(docs): change to react-jsx and add **/*.js * chore(root): include js and jsx * refactor(docs): autocomplete dx * chore(docs): rollback overrides * chore(autocomplete): lint * fix(autocomplete): incorrect import path * fix(docs): autocomplete dx * chore(docs): remove highlightedLines --- apps/docs/.eslintrc.json | 6 +- .../autocomplete/async-filtering.raw.jsx | 34 ++ .../autocomplete/async-filtering.raw.tsx | 41 +++ .../autocomplete/async-filtering.ts | 78 +---- .../autocomplete/async-loading-items.raw.jsx | 99 ++++++ .../autocomplete/async-loading-items.raw.tsx | 107 ++++++ .../autocomplete/async-loading-items.ts | 179 +--------- .../components/autocomplete/colors.raw.jsx | 51 +++ .../content/components/autocomplete/colors.ts | 61 +--- .../autocomplete/controlled.raw.jsx | 51 +++ .../autocomplete/controlled.raw.tsx | 51 +++ .../components/autocomplete/controlled.ts | 79 +---- .../custom-empty-content-message.raw.jsx | 47 +++ .../custom-empty-content-message.ts | 50 +-- .../autocomplete/custom-filtering.raw.jsx | 57 ++++ .../autocomplete/custom-filtering.raw.tsx | 57 ++++ .../autocomplete/custom-filtering.ts | 91 +---- .../autocomplete/custom-items.raw.jsx | 229 +++++++++++++ .../components/autocomplete/custom-items.ts | 232 +------------ .../custom-sections-style.raw.jsx | 49 +++ .../autocomplete/custom-sections-style.ts | 49 +-- .../autocomplete/custom-selector-icon.raw.jsx | 66 ++++ .../autocomplete/custom-selector-icon.ts | 71 +--- .../autocomplete/custom-styles.raw.jsx | 301 +++++++++++++++++ .../components/autocomplete/custom-styles.ts | 312 +----------------- .../autocomplete/custom-value.raw.jsx | 43 +++ .../components/autocomplete/custom-value.ts | 46 +-- .../autocomplete/description.raw.jsx | 44 +++ .../components/autocomplete/description.ts | 47 +-- .../autocomplete/disabled-items.raw.jsx | 43 +++ .../components/autocomplete/disabled-items.ts | 46 +-- .../components/autocomplete/disabled.raw.jsx | 44 +++ .../components/autocomplete/disabled.ts | 47 +-- .../components/autocomplete/dynamic.raw.jsx | 42 +++ .../components/autocomplete/dynamic.ts | 45 +-- .../autocomplete/error-message.raw.jsx | 54 +++ .../components/autocomplete/error-message.ts | 57 +--- .../components/autocomplete/events.raw.jsx | 60 ++++ .../components/autocomplete/events.raw.tsx | 61 ++++ .../content/components/autocomplete/events.ts | 103 +----- .../autocomplete/fully-controlled.raw.jsx | 96 ++++++ .../autocomplete/fully-controlled.raw.tsx | 103 ++++++ .../autocomplete/fully-controlled.ts | 180 +--------- .../autocomplete/item-start-content.raw.jsx | 68 ++++ .../autocomplete/item-start-content.ts | 68 +--- .../autocomplete/label-placements.raw.jsx | 74 +++++ .../autocomplete/label-placements.ts | 79 +---- .../components/autocomplete/read-only.raw.jsx | 44 +++ .../components/autocomplete/read-only.ts | 47 +-- .../components/autocomplete/required.raw.jsx | 44 +++ .../components/autocomplete/required.ts | 47 +-- .../components/autocomplete/sections.raw.jsx | 28 ++ .../components/autocomplete/sections.ts | 33 +- .../components/autocomplete/sizes.raw.jsx | 59 ++++ .../content/components/autocomplete/sizes.ts | 62 +--- .../autocomplete/start-content.raw.jsx | 81 +++++ .../components/autocomplete/start-content.ts | 84 +---- .../components/autocomplete/usage.raw.jsx | 51 +++ .../content/components/autocomplete/usage.ts | 57 +--- .../components/autocomplete/variants.raw.jsx | 62 ++++ .../components/autocomplete/variants.ts | 65 +--- .../without-scroll-shadow.raw.jsx | 46 +++ .../autocomplete/without-scroll-shadow.ts | 49 +-- .../content/docs/components/autocomplete.mdx | 33 +- .../docs/content/docs/components/dropdown.mdx | 20 +- apps/docs/global.d.ts | 5 + apps/docs/tsconfig.json | 3 +- package.json | 4 +- 68 files changed, 2454 insertions(+), 2368 deletions(-) create mode 100644 apps/docs/content/components/autocomplete/async-filtering.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/async-filtering.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/async-loading-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/async-loading-items.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/colors.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/controlled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/controlled.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-filtering.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-filtering.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/custom-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/custom-value.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/description.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/disabled-items.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/disabled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/dynamic.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/error-message.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/events.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/events.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/fully-controlled.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/fully-controlled.raw.tsx create mode 100644 apps/docs/content/components/autocomplete/item-start-content.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/label-placements.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/read-only.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/required.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/sections.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/sizes.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/start-content.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/usage.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/variants.raw.jsx create mode 100644 apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json index 23dda4847f..bf12dab1cd 100644 --- a/apps/docs/.eslintrc.json +++ b/apps/docs/.eslintrc.json @@ -3,7 +3,7 @@ "ignorePatterns": ["!**/*"], "overrides": [ { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "files": ["*.ts", "*.tsx"], "parserOptions": { "project": ["apps/docs/tsconfig(.*)?.json"], "ecmaFeatures": { @@ -22,10 +22,6 @@ { "files": ["*.ts", "*.tsx"], "rules": {} - }, - { - "files": ["*.js", "*.jsx"], - "rules": {} } ] } 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..02453bca27 --- /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", 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"}, +]; + +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..02453bca27 --- /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", 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"}, +]; + +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..e1e51384d3 --- /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", 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"}, +]; + +export default function App() { + const [value, setValue] = React.useState("cat"); + + return ( +
+ + {(item) => {item.label}} + +

Selected: {value}

+
+ ); +} 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..1c1072f365 --- /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", 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"}, +]; + +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..7f0ff19257 --- /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", 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"}, +]; + +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..58f68bd410 --- /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", 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"}, +]; + +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..f4d192332f --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx @@ -0,0 +1,66 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +const SelectorIcon = (props) => ( + +); + +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"}, +]; + +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..5aa85ebb2b --- /dev/null +++ b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx @@ -0,0 +1,301 @@ +import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react"; + +const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => ( + +); + +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..93d0c71244 --- /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", 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"}, +]; + +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..d68aa29122 --- /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", 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"}, +]; + +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..41ab6f13bb --- /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", 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"}, +]; + +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..0e5474b97d --- /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", 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"}, +]; + +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..4acc4fb52e --- /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", 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"}, +]; + +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..a44a21f67f --- /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", 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"}, +]; + +export default function App() { + const [value, setValue] = React.useState(""); + const [touched, setTouched] = React.useState(false); + + const isValid = value === "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..4fca879e86 --- /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", 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"}, +]; + +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..3c072be3a6 --- /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", 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"}, +]; + +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..99449aaa4c --- /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", 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"}, +]; + +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..b4c4bfb238 --- /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", 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"}, +]; + +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..0693d8da2b --- /dev/null +++ b/apps/docs/content/components/autocomplete/label-placements.raw.jsx @@ -0,0 +1,74 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +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"}, +]; + +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..d5d2b084f4 --- /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", 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"}, +]; + +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..cb4c4faa16 --- /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", 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"}, +]; + +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..bf6365be1f --- /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", 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"}, +]; + +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..a343e7c689 --- /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", 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"}, +]; + +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..d25bbd6e74 --- /dev/null +++ b/apps/docs/content/components/autocomplete/usage.raw.jsx @@ -0,0 +1,51 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +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"}, +]; + +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..dcfa9bea18 --- /dev/null +++ b/apps/docs/content/components/autocomplete/variants.raw.jsx @@ -0,0 +1,62 @@ +import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; + +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"}, +]; + +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..3f332407ae --- /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", 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"}, +]; + +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/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx index b826b21556..8cc44adda5 100644 --- a/apps/docs/content/docs/components/autocomplete.mdx +++ b/apps/docs/content/docs/components/autocomplete.mdx @@ -63,43 +63,43 @@ Autocomplete follows the [Collection Components API](https://react-spectrum.adob - **Static**: The usage example above shows the static implementation, which can be used when the full list of options is known ahead of time. - **Dynamic**: The example below can be used when the options come from an external data source such as an API call, or update over time. - + ### Disabled - + ### Disabled Items You can disable specific items by using the `disabledKeys` property. - + ### Required If you pass the `isRequired` property to the autocomplete, it will have a `danger` asterisk at the end of the label and the autocomplete will be required. - + ### Read Only If you pass the `isReadOnly` property to the Autocomplete, the Listbox will open to display all available options, but users won't be able to select any of the listed options. - + ### Sizes - + ### Colors - + ### Variants - + ### Label Placements @@ -107,7 +107,6 @@ You can change the position of the label by setting the `labelPlacement` propert @@ -118,7 +117,7 @@ You can change the position of the label by setting the `labelPlacement` propert You can use the `startContent` and `endContent` properties to add content to the start and end of the autocomplete. - + ### Item Start & End Content @@ -134,7 +133,7 @@ By default, `Autocomplete` doesn't allow users to specify a value that doesn't e revert the input value to the current selected value on blur. By specifying `allowsCustomValue`, this behavior is suppressed and the user is free to enter any value within the field. - + ### Custom Selector Icon @@ -143,7 +142,6 @@ customize this icon by passing a custom one to the `selectorIcon` property. @@ -156,7 +154,6 @@ You can disable this shadow by passing using the `scrollShadowProps` property. @@ -166,7 +163,7 @@ You can disable this shadow by passing using the `scrollShadowProps` property. You can add a description to the autocomplete by passing the `description` property. - + ### With Error Message @@ -174,7 +171,6 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid @@ -188,7 +184,7 @@ whether through typing or option selection. The example below uses `onSelectionChange` and `onInputChange` to update the selection and input value stored in React state. - + ### Controlled @@ -196,7 +192,6 @@ You can use the `selectedKey` and `onSelectionChange` properties to control the @@ -227,7 +222,6 @@ import {useFilter} from "@react-aria/i18n"; title="Fully Controlled" showPreview={false} showOpenInCodeSandbox={false} - highlightedLines="63-64,67,69-71" files={autocompleteContent.fullyControlled} /> @@ -255,7 +249,6 @@ The following example uses the `defaultFilter` prop to filter the list of option @@ -283,7 +276,6 @@ import {useAsyncList} from "@react-stately/data"; title="Asynchronous Filtering" showPreview={false} showOpenInCodeSandbox={false} - highlightedLines="27-29,33" files={autocompleteContent.asyncFiltering} /> @@ -312,7 +304,6 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll"; showOpenInCodeSandbox={false} typescriptStrict={true} title="Asynchronous Loading" - highlightedLines="21-22,25,27" files={autocompleteContent.asyncLoadingItems} /> diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx index 24e48716d0..2fdf16c7dc 100644 --- a/apps/docs/content/docs/components/dropdown.mdx +++ b/apps/docs/content/docs/components/dropdown.mdx @@ -42,18 +42,18 @@ NextUI exports 5 dropdown-related components: diff --git a/apps/docs/global.d.ts b/apps/docs/global.d.ts index 5a51aa5838..1a622ff3b6 100644 --- a/apps/docs/global.d.ts +++ b/apps/docs/global.d.ts @@ -7,3 +7,8 @@ declare module "*.jsx?raw" { const content: string; export default content; } + +declare module "*.js?raw" { + const content: string; + export default content; +} diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json index 0475fdc067..db48bcf066 100644 --- a/apps/docs/tsconfig.json +++ b/apps/docs/tsconfig.json @@ -11,7 +11,7 @@ "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, - "jsx": "preserve", + "jsx": "react-jsx", "plugins": [ { "name": "next" @@ -23,6 +23,7 @@ "next-env.d.ts", "**/*.ts", "**/*.tsx", + "**/*.js", "**/*.jsx", ".next/types/**/*.ts", ".contentlayer/generated", diff --git a/package.json b/package.json index 7bf1a010d6..f27c671620 100644 --- a/package.json +++ b/package.json @@ -29,9 +29,9 @@ "typecheck": "turbo typecheck", "lint": "pnpm lint:pkg && pnpm lint:docs", "lint:pkg": "eslint -c .eslintrc.json ./packages/**/*.{ts,tsx}", - "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}", + "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}", "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/*.{ts,tsx}", - "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}", + "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}", "check:rap": "tsx scripts/check-rap-updates.ts", "fix:rap": "tsx scripts/fix-rap.ts", "format:check": "prettier --check packages/**/**/src --cache", From 17c14198b0b287ab67786e469970ed3cf6ec5b2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 7 Nov 2024 15:07:47 +0800 Subject: [PATCH 03/50] refactor(docs): breadcrumbs dx (#3968) * refactor(docs): breadcrumbs dx * fix(docs): export issue * chore(docs): use preserve for jsx * fix(docs): support multiline import * fix(docs): support multiple export * chore(docs): add back export --- .../docs/components/code-demo/utils.ts | 4 +- .../breadcrumbs/collapsing-items.raw.jsx | 13 ++ .../breadcrumbs/collapsing-items.ts | 14 +- .../components/breadcrumbs/colors.raw.jsx | 19 +++ .../content/components/breadcrumbs/colors.ts | 20 +-- .../components/breadcrumbs/controlled.raw.jsx | 25 ++++ .../components/breadcrumbs/controlled.raw.tsx | 26 ++++ .../components/breadcrumbs/controlled.ts | 53 +------- .../breadcrumbs/custom-items.raw.jsx | 68 ++++++++++ .../components/breadcrumbs/custom-items.ts | 69 +--------- .../breadcrumbs/custom-styles.raw.jsx | 54 ++++++++ .../components/breadcrumbs/custom-styles.ts | 57 +------- .../breadcrumbs/customizing-ellipsis.raw.jsx | 45 +++++++ .../breadcrumbs/customizing-ellipsis.ts | 43 +----- .../components/breadcrumbs/disabled.raw.jsx | 13 ++ .../components/breadcrumbs/disabled.ts | 14 +- .../components/breadcrumbs/menu-type.raw.jsx | 39 ++++++ .../components/breadcrumbs/menu-type.raw.tsx | 39 ++++++ .../components/breadcrumbs/menu-type.ts | 80 +---------- .../components/breadcrumbs/radius.raw.jsx | 19 +++ .../content/components/breadcrumbs/radius.ts | 20 +-- .../components/breadcrumbs/routing.raw.jsx | 13 ++ .../content/components/breadcrumbs/routing.ts | 14 +- .../components/breadcrumbs/separator.raw.jsx | 18 +++ .../components/breadcrumbs/separator.ts | 19 +-- .../components/breadcrumbs/sizes.raw.jsx | 19 +++ .../content/components/breadcrumbs/sizes.ts | 20 +-- .../breadcrumbs/start-end-content.raw.jsx | 127 ++++++++++++++++++ .../breadcrumbs/start-end-content.ts | 105 +-------------- .../components/breadcrumbs/underlines.raw.jsx | 31 +++++ .../components/breadcrumbs/underlines.ts | 32 +---- .../components/breadcrumbs/usage.raw.jsx | 13 ++ .../content/components/breadcrumbs/usage.ts | 14 +- .../components/breadcrumbs/variants.raw.jsx | 19 +++ .../components/breadcrumbs/variants.ts | 20 +-- apps/docs/tsconfig.json | 19 ++- 36 files changed, 634 insertions(+), 583 deletions(-) create mode 100644 apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/colors.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/controlled.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/controlled.raw.tsx create mode 100644 apps/docs/content/components/breadcrumbs/custom-items.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/disabled.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/menu-type.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/menu-type.raw.tsx create mode 100644 apps/docs/content/components/breadcrumbs/radius.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/routing.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/separator.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/sizes.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/underlines.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/usage.raw.jsx create mode 100644 apps/docs/content/components/breadcrumbs/variants.raw.jsx diff --git a/apps/docs/components/docs/components/code-demo/utils.ts b/apps/docs/components/docs/components/code-demo/utils.ts index f4c6714d5d..598ce64761 100644 --- a/apps/docs/components/docs/components/code-demo/utils.ts +++ b/apps/docs/components/docs/components/code-demo/utils.ts @@ -2,7 +2,7 @@ import {get} from "lodash"; 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*\{/; @@ -29,7 +29,7 @@ export const transformCode = (code: string, imports = {}, compName = "App") => { // 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/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..527cf2c1bd --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx @@ -0,0 +1,68 @@ +import { + Breadcrumbs, + BreadcrumbItem, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, + Button, +} from "@nextui-org/react"; + +export const ChevronDownIcon = (props) => ( + +); + +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..5476b6634b --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx @@ -0,0 +1,54 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export const ShoppingCartIcon = (props) => ( + +); + +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..220dea65b4 --- /dev/null +++ b/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx @@ -0,0 +1,127 @@ +import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react"; + +export const HomeIcon = (props) => ( + +); + +export const MusicIcon = (props) => ( + +); + +export const ArtistIcon = (props) => ( + +); + +export const AlbumIcon = (props) => ( + +); + +export const SongIcon = (props) => ( + +); + +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/tsconfig.json b/apps/docs/tsconfig.json index db48bcf066..51922b7e3b 100644 --- a/apps/docs/tsconfig.json +++ b/apps/docs/tsconfig.json @@ -3,15 +3,21 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@/*": ["./*"], - "tailwind-variants": ["./node_modules/tailwind-variants"], - "contentlayer2/generated": ["./.contentlayer/generated"] + "@/*": [ + "./*" + ], + "tailwind-variants": [ + "./node_modules/tailwind-variants" + ], + "contentlayer2/generated": [ + "./.contentlayer/generated" + ] }, "allowJs": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, - "jsx": "react-jsx", + "jsx": "preserve", "plugins": [ { "name": "next" @@ -29,5 +35,8 @@ ".contentlayer/generated", "global.d.ts" ], - "exclude": ["node_modules", "next-redirect.js"] + "exclude": [ + "node_modules", + "next-redirect.js" + ] } From 717206bf6439d2e2cd26643cc05d34bba9ece492 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 7 Nov 2024 21:21:30 +0800 Subject: [PATCH 04/50] refactor(docs): avatar dx (#3951) --- .../components/avatar/bordered.raw.jsx | 14 ++ .../content/components/avatar/bordered.ts | 15 +- .../content/components/avatar/colors.raw.jsx | 14 ++ apps/docs/content/components/avatar/colors.ts | 15 +- .../components/avatar/custom-fallback.raw.jsx | 41 ++++++ .../components/avatar/custom-fallback.ts | 36 +---- .../components/avatar/custom-impl.raw.jsx | 60 ++++++++ .../components/avatar/custom-impl.raw.tsx | 62 +++++++++ .../content/components/avatar/custom-impl.ts | 128 +----------------- .../content/components/avatar/custom.raw.jsx | 15 ++ apps/docs/content/components/avatar/custom.ts | 16 +-- .../components/avatar/disabled.raw.jsx | 14 ++ .../content/components/avatar/disabled.ts | 15 +- .../components/avatar/fallbacks.raw.jsx | 11 ++ .../content/components/avatar/fallbacks.ts | 12 +- .../avatar/group-custom-count.raw.jsx | 21 +++ .../components/avatar/group-custom-count.ts | 22 +-- .../avatar/group-custom-impl.raw.jsx | 29 ++++ .../avatar/group-custom-impl.raw.tsx | 36 +++++ .../components/avatar/group-custom-impl.ts | 67 +-------- .../components/avatar/group-disabled.raw.jsx | 14 ++ .../components/avatar/group-disabled.ts | 15 +- .../components/avatar/group-grid.raw.jsx | 17 +++ .../content/components/avatar/group-grid.ts | 18 +-- .../components/avatar/group-max.raw.jsx | 14 ++ .../content/components/avatar/group-max.ts | 15 +- .../components/avatar/group-total.raw.jsx | 14 ++ .../content/components/avatar/group-total.ts | 15 +- .../content/components/avatar/group.raw.jsx | 14 ++ apps/docs/content/components/avatar/group.ts | 15 +- .../content/components/avatar/radius.raw.jsx | 12 ++ apps/docs/content/components/avatar/radius.ts | 13 +- .../content/components/avatar/sizes.raw.jsx | 16 +++ apps/docs/content/components/avatar/sizes.ts | 14 +- .../content/components/avatar/usage.raw.jsx | 14 ++ apps/docs/content/components/avatar/usage.ts | 15 +- 36 files changed, 451 insertions(+), 427 deletions(-) create mode 100644 apps/docs/content/components/avatar/bordered.raw.jsx create mode 100644 apps/docs/content/components/avatar/colors.raw.jsx create mode 100644 apps/docs/content/components/avatar/custom-fallback.raw.jsx create mode 100644 apps/docs/content/components/avatar/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/avatar/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/avatar/custom.raw.jsx create mode 100644 apps/docs/content/components/avatar/disabled.raw.jsx create mode 100644 apps/docs/content/components/avatar/fallbacks.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-custom-count.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-custom-impl.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-custom-impl.raw.tsx create mode 100644 apps/docs/content/components/avatar/group-disabled.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-grid.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-max.raw.jsx create mode 100644 apps/docs/content/components/avatar/group-total.raw.jsx create mode 100644 apps/docs/content/components/avatar/group.raw.jsx create mode 100644 apps/docs/content/components/avatar/radius.raw.jsx create mode 100644 apps/docs/content/components/avatar/sizes.raw.jsx create mode 100644 apps/docs/content/components/avatar/usage.raw.jsx 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, From 2dc2bcd83ca3592e7157676dd9e207e21206bbd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 7 Nov 2024 21:21:46 +0800 Subject: [PATCH 05/50] refactor(docs): badge dx (#3960) * refactor(docs): badge dx * chore(docs): incorrect import path --- .../content/components/badge/a11y.raw.jsx | 31 ++++++ apps/docs/content/components/badge/a11y.ts | 39 +------ .../content/components/badge/colors.raw.jsx | 26 +++++ apps/docs/content/components/badge/colors.ts | 45 +------- .../components/badge/content-examples.raw.jsx | 80 +++++++++++++ .../components/badge/content-examples.ts | 105 +----------------- .../components/badge/placements.raw.jsx | 20 ++++ .../content/components/badge/placements.ts | 37 +----- .../content/components/badge/shapes.raw.jsx | 14 +++ apps/docs/content/components/badge/shapes.ts | 23 +--- .../components/badge/show-outline.raw.jsx | 14 +++ .../content/components/badge/show-outline.ts | 23 +--- .../content/components/badge/sizes.raw.jsx | 17 +++ apps/docs/content/components/badge/sizes.ts | 27 +---- .../content/components/badge/usage.raw.jsx | 9 ++ apps/docs/content/components/badge/usage.ts | 14 +-- .../content/components/badge/variants.raw.jsx | 20 ++++ .../docs/content/components/badge/variants.ts | 33 +----- .../components/badge/visibility.raw.jsx | 71 ++++++++++++ .../content/components/badge/visibility.ts | 76 +------------ 20 files changed, 312 insertions(+), 412 deletions(-) create mode 100644 apps/docs/content/components/badge/a11y.raw.jsx create mode 100644 apps/docs/content/components/badge/colors.raw.jsx create mode 100644 apps/docs/content/components/badge/content-examples.raw.jsx create mode 100644 apps/docs/content/components/badge/placements.raw.jsx create mode 100644 apps/docs/content/components/badge/shapes.raw.jsx create mode 100644 apps/docs/content/components/badge/show-outline.raw.jsx create mode 100644 apps/docs/content/components/badge/sizes.raw.jsx create mode 100644 apps/docs/content/components/badge/usage.raw.jsx create mode 100644 apps/docs/content/components/badge/variants.raw.jsx create mode 100644 apps/docs/content/components/badge/visibility.raw.jsx 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 { From 74a2268b34ffcf96e2ddae1438ced249b16614aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 7 Nov 2024 21:22:00 +0800 Subject: [PATCH 06/50] refactor(docs): button dx (#3981) --- .../content/components/button/colors.raw.jsx | 14 +++ apps/docs/content/components/button/colors.ts | 27 +----- .../components/button/custom-impl.raw.jsx | 38 ++++++++ .../components/button/custom-impl.raw.tsx | 40 +++++++++ .../content/components/button/custom-impl.ts | 82 +----------------- .../components/button/custom-styles.raw.jsx | 12 +++ .../components/button/custom-styles.ts | 10 +-- .../components/button/disabled.raw.jsx | 9 ++ .../content/components/button/disabled.ts | 10 +-- .../components/button/group-disabled.raw.jsx | 11 +++ .../components/button/group-disabled.ts | 12 +-- .../components/button/group-use-case.raw.jsx | 69 +++++++++++++++ .../components/button/group-use-case.ts | 62 +------------ .../content/components/button/group.raw.jsx | 11 +++ apps/docs/content/components/button/group.ts | 12 +-- .../components/button/icon-only.raw.jsx | 55 ++++++++++++ .../content/components/button/icon-only.ts | 77 +---------------- .../content/components/button/icons.raw.jsx | 62 +++++++++++++ apps/docs/content/components/button/icons.ts | 86 +------------------ .../components/button/loading-custom.raw.jsx | 34 ++++++++ .../components/button/loading-custom.ts | 35 +------- .../content/components/button/loading.raw.jsx | 9 ++ .../docs/content/components/button/loading.ts | 10 +-- .../content/components/button/radius.raw.jsx | 13 +++ apps/docs/content/components/button/radius.ts | 24 +----- .../content/components/button/sizes.raw.jsx | 11 +++ apps/docs/content/components/button/sizes.ts | 18 +--- .../content/components/button/usage.raw.jsx | 5 ++ apps/docs/content/components/button/usage.ts | 10 +-- .../components/button/variants.raw.jsx | 29 +++++++ .../content/components/button/variants.ts | 30 +------ 31 files changed, 438 insertions(+), 489 deletions(-) create mode 100644 apps/docs/content/components/button/colors.raw.jsx create mode 100644 apps/docs/content/components/button/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/button/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/button/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/button/disabled.raw.jsx create mode 100644 apps/docs/content/components/button/group-disabled.raw.jsx create mode 100644 apps/docs/content/components/button/group-use-case.raw.jsx create mode 100644 apps/docs/content/components/button/group.raw.jsx create mode 100644 apps/docs/content/components/button/icon-only.raw.jsx create mode 100644 apps/docs/content/components/button/icons.raw.jsx create mode 100644 apps/docs/content/components/button/loading-custom.raw.jsx create mode 100644 apps/docs/content/components/button/loading.raw.jsx create mode 100644 apps/docs/content/components/button/radius.raw.jsx create mode 100644 apps/docs/content/components/button/sizes.raw.jsx create mode 100644 apps/docs/content/components/button/usage.raw.jsx create mode 100644 apps/docs/content/components/button/variants.raw.jsx 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..b880294fec --- /dev/null +++ b/apps/docs/content/components/button/group-use-case.raw.jsx @@ -0,0 +1,69 @@ +import { + Button, + ButtonGroup, + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, +} from "@nextui-org/react"; + +export const 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"]} + + + + + ); +} 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, From 473b40b62daf05033bffd1f1f2f890be36286f6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:29:22 +0800 Subject: [PATCH 07/50] refactor(docs): calendar dx (#4022) * refactor(docs): calendar dx * fix(docs): incorrect import path --- .../calendar/controlled-focused-value.raw.jsx | 16 ++ .../calendar/controlled-focused-value.raw.tsx | 19 ++ .../calendar/controlled-focused-value.ts | 40 +--- .../components/calendar/controlled.raw.jsx | 8 + .../components/calendar/controlled.raw.tsx | 11 ++ .../content/components/calendar/controlled.ts | 36 +--- .../components/calendar/disabled.raw.jsx | 5 + .../content/components/calendar/disabled.ts | 8 +- .../calendar/international-calendars.raw.jsx | 10 + .../calendar/international-calendars.ts | 11 +- .../components/calendar/invalid-date.raw.jsx | 19 ++ .../components/calendar/invalid-date.raw.tsx | 22 +++ .../components/calendar/invalid-date.ts | 48 +---- .../calendar/max-date-value.raw.jsx | 12 ++ .../components/calendar/max-date-value.ts | 13 +- .../calendar/min-date-value.raw.jsx | 12 ++ .../components/calendar/min-date-value.ts | 13 +- .../calendar/page-behaviour.raw.jsx | 5 + .../components/calendar/page-behaviour.ts | 11 +- .../components/calendar/presets.raw.jsx | 87 +++++++++ .../components/calendar/presets.raw.tsx | 90 +++++++++ .../content/components/calendar/presets.ts | 182 +----------------- .../components/calendar/read-only.raw.jsx | 6 + .../content/components/calendar/read-only.ts | 13 +- .../calendar/unavailable-dates.raw.jsx | 23 +++ .../components/calendar/unavailable-dates.ts | 30 +-- .../content/components/calendar/usage.raw.jsx | 11 ++ .../docs/content/components/calendar/usage.ts | 12 +- .../calendar/visible-months.raw.jsx | 5 + .../components/calendar/visible-months.ts | 11 +- .../with-month-and-year-picker.raw.jsx | 5 + .../calendar/with-month-and-year-picker.ts | 11 +- 32 files changed, 400 insertions(+), 405 deletions(-) create mode 100644 apps/docs/content/components/calendar/controlled-focused-value.raw.jsx create mode 100644 apps/docs/content/components/calendar/controlled-focused-value.raw.tsx create mode 100644 apps/docs/content/components/calendar/controlled.raw.jsx create mode 100644 apps/docs/content/components/calendar/controlled.raw.tsx create mode 100644 apps/docs/content/components/calendar/disabled.raw.jsx create mode 100644 apps/docs/content/components/calendar/international-calendars.raw.jsx create mode 100644 apps/docs/content/components/calendar/invalid-date.raw.jsx create mode 100644 apps/docs/content/components/calendar/invalid-date.raw.tsx create mode 100644 apps/docs/content/components/calendar/max-date-value.raw.jsx create mode 100644 apps/docs/content/components/calendar/min-date-value.raw.jsx create mode 100644 apps/docs/content/components/calendar/page-behaviour.raw.jsx create mode 100644 apps/docs/content/components/calendar/presets.raw.jsx create mode 100644 apps/docs/content/components/calendar/presets.raw.tsx create mode 100644 apps/docs/content/components/calendar/read-only.raw.jsx create mode 100644 apps/docs/content/components/calendar/unavailable-dates.raw.jsx create mode 100644 apps/docs/content/components/calendar/usage.raw.jsx create mode 100644 apps/docs/content/components/calendar/visible-months.raw.jsx create mode 100644 apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx 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, From 0b9fd367c491e8ac5cd9c077432c25b314818a88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:29:46 +0800 Subject: [PATCH 08/50] refactor(docs): switch dx (#4037) * refactor(docs): switch dx * chore(docs): remove highlightedLines --- .../content/components/switch/colors.raw.jsx | 26 ++++ apps/docs/content/components/switch/colors.ts | 15 +-- .../components/switch/controlled.raw.jsx | 14 ++ .../content/components/switch/controlled.ts | 15 +-- .../components/switch/custom-impl.raw.jsx | 67 ++++++++++ .../components/switch/custom-impl.raw.tsx | 68 ++++++++++ .../content/components/switch/custom-impl.ts | 125 +----------------- .../components/switch/custom-styles.raw.jsx | 32 +++++ .../components/switch/custom-styles.ts | 32 +---- .../components/switch/disabled.raw.jsx | 9 ++ .../content/components/switch/disabled.ts | 10 +- .../content/components/switch/icons.raw.jsx | 49 +++++++ apps/docs/content/components/switch/icons.ts | 54 +------- .../content/components/switch/label.raw.jsx | 5 + apps/docs/content/components/switch/label.ts | 10 +- .../content/components/switch/sizes.raw.jsx | 17 +++ apps/docs/content/components/switch/sizes.ts | 12 +- .../components/switch/thumb-icon.raw.jsx | 50 +++++++ .../content/components/switch/thumb-icon.ts | 59 +-------- .../content/components/switch/usage.raw.jsx | 5 + apps/docs/content/components/switch/usage.ts | 8 +- apps/docs/content/docs/components/switch.mdx | 2 +- 22 files changed, 354 insertions(+), 330 deletions(-) create mode 100644 apps/docs/content/components/switch/colors.raw.jsx create mode 100644 apps/docs/content/components/switch/controlled.raw.jsx create mode 100644 apps/docs/content/components/switch/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/switch/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/switch/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/switch/disabled.raw.jsx create mode 100644 apps/docs/content/components/switch/icons.raw.jsx create mode 100644 apps/docs/content/components/switch/label.raw.jsx create mode 100644 apps/docs/content/components/switch/sizes.raw.jsx create mode 100644 apps/docs/content/components/switch/thumb-icon.raw.jsx create mode 100644 apps/docs/content/components/switch/usage.raw.jsx 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..1a3d45c059 --- /dev/null +++ b/apps/docs/content/components/switch/custom-impl.raw.jsx @@ -0,0 +1,67 @@ +import {VisuallyHidden, useSwitch} from "@nextui-org/react"; + +export const MoonIcon = (props) => ( + +); + +export const SunIcon = (props) => ( + +); + +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..d2501a59c7 --- /dev/null +++ b/apps/docs/content/components/switch/custom-impl.raw.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import {useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react"; + +export const MoonIcon = (props) => ( + +); + +export const SunIcon = (props) => ( + +); + +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..fbe7fe3274 --- /dev/null +++ b/apps/docs/content/components/switch/icons.raw.jsx @@ -0,0 +1,49 @@ +import {Switch} from "@nextui-org/react"; + +export const MoonIcon = (props) => ( + +); + +export const SunIcon = (props) => ( + +); + +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..3f7bea5cca --- /dev/null +++ b/apps/docs/content/components/switch/thumb-icon.raw.jsx @@ -0,0 +1,50 @@ +import {Switch} from "@nextui-org/react"; + +export const MoonIcon = (props) => ( + +); + +export const SunIcon = (props) => ( + +); + +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/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx index d76faa2e3d..91f0d5fe6f 100644 --- a/apps/docs/content/docs/components/switch.mdx +++ b/apps/docs/content/docs/components/switch.mdx @@ -66,7 +66,7 @@ The Switch component is used as an alternative between checked and not checked s You can also add icons to start and end of the switch by using `startContent` and `endContent` props. - + ### Controlled From 9c38799960238a0e894680e6158ea9b296402dee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:30:10 +0800 Subject: [PATCH 09/50] refactor(docs): tooltip (#4035) --- .../content/components/tooltip/arrow.raw.jsx | 9 +++++ apps/docs/content/components/tooltip/arrow.ts | 10 +----- .../content/components/tooltip/colors.raw.jsx | 19 ++++++++++ .../docs/content/components/tooltip/colors.ts | 28 +-------------- .../components/tooltip/controlled.raw.jsx | 14 ++++++++ .../content/components/tooltip/controlled.ts | 21 +---------- .../components/tooltip/custom-content.raw.jsx | 16 +++++++++ .../components/tooltip/custom-content.ts | 19 +--------- .../components/tooltip/custom-motion.raw.jsx | 31 ++++++++++++++++ .../components/tooltip/custom-motion.ts | 32 +---------------- .../components/tooltip/custom-styles.raw.jsx | 20 +++++++++++ .../components/tooltip/custom-styles.ts | 24 +------------ .../components/tooltip/delay-multiple.raw.jsx | 18 ++++++++++ .../components/tooltip/delay-multiple.ts | 19 +--------- .../content/components/tooltip/delay.raw.jsx | 18 ++++++++++ apps/docs/content/components/tooltip/delay.ts | 19 +--------- .../content/components/tooltip/offset.raw.jsx | 23 ++++++++++++ .../docs/content/components/tooltip/offset.ts | 24 +------------ .../components/tooltip/placements.raw.jsx | 30 ++++++++++++++++ .../content/components/tooltip/placements.ts | 36 +------------------ .../content/components/tooltip/usage.raw.jsx | 9 +++++ apps/docs/content/components/tooltip/usage.ts | 10 +----- 22 files changed, 218 insertions(+), 231 deletions(-) create mode 100644 apps/docs/content/components/tooltip/arrow.raw.jsx create mode 100644 apps/docs/content/components/tooltip/colors.raw.jsx create mode 100644 apps/docs/content/components/tooltip/controlled.raw.jsx create mode 100644 apps/docs/content/components/tooltip/custom-content.raw.jsx create mode 100644 apps/docs/content/components/tooltip/custom-motion.raw.jsx create mode 100644 apps/docs/content/components/tooltip/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/tooltip/delay-multiple.raw.jsx create mode 100644 apps/docs/content/components/tooltip/delay.raw.jsx create mode 100644 apps/docs/content/components/tooltip/offset.raw.jsx create mode 100644 apps/docs/content/components/tooltip/placements.raw.jsx create mode 100644 apps/docs/content/components/tooltip/usage.raw.jsx diff --git a/apps/docs/content/components/tooltip/arrow.raw.jsx b/apps/docs/content/components/tooltip/arrow.raw.jsx new file mode 100644 index 0000000000..f1b195d705 --- /dev/null +++ b/apps/docs/content/components/tooltip/arrow.raw.jsx @@ -0,0 +1,9 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/tooltip/arrow.ts b/apps/docs/content/components/tooltip/arrow.ts index d7afa75e90..d04dbb0e9d 100644 --- a/apps/docs/content/components/tooltip/arrow.ts +++ b/apps/docs/content/components/tooltip/arrow.ts @@ -1,12 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./arrow.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/colors.raw.jsx b/apps/docs/content/components/tooltip/colors.raw.jsx new file mode 100644 index 0000000000..37cbf76f7c --- /dev/null +++ b/apps/docs/content/components/tooltip/colors.raw.jsx @@ -0,0 +1,19 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"]; + + return ( +
+ {colors.map((color) => { + return ( + + + + ); + })} +
+ ); +} diff --git a/apps/docs/content/components/tooltip/colors.ts b/apps/docs/content/components/tooltip/colors.ts index bbdb3a5d4a..d5bef810aa 100644 --- a/apps/docs/content/components/tooltip/colors.ts +++ b/apps/docs/content/components/tooltip/colors.ts @@ -1,30 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - const colors = [ - "default", - "primary", - "secondary", - "success", - "warning", - "danger", - "foreground", - ]; - - return ( -
- {colors.map((color) => { - return ( - - - - ) - })} -
- ); -}`; +import App from "./colors.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/controlled.raw.jsx b/apps/docs/content/components/tooltip/controlled.raw.jsx new file mode 100644 index 0000000000..ea799c2c5e --- /dev/null +++ b/apps/docs/content/components/tooltip/controlled.raw.jsx @@ -0,0 +1,14 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + const [isOpen, setIsOpen] = React.useState(false); + + return ( +
+ setIsOpen(open)}> + + +

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

+
+ ); +} diff --git a/apps/docs/content/components/tooltip/controlled.ts b/apps/docs/content/components/tooltip/controlled.ts index 4895d8a455..2c3f0cacb4 100644 --- a/apps/docs/content/components/tooltip/controlled.ts +++ b/apps/docs/content/components/tooltip/controlled.ts @@ -1,23 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - const [isOpen, setIsOpen] = React.useState(false); - - return ( -
- setIsOpen(open)} - content="I am a tooltip" - > - - -

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

-
- ); -}`; +import App from "./controlled.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/custom-content.raw.jsx b/apps/docs/content/components/tooltip/custom-content.raw.jsx new file mode 100644 index 0000000000..0108f8e58f --- /dev/null +++ b/apps/docs/content/components/tooltip/custom-content.raw.jsx @@ -0,0 +1,16 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( + +
Custom Content
+
This is a custom tooltip content
+ + } + > + + + ); +} diff --git a/apps/docs/content/components/tooltip/custom-content.ts b/apps/docs/content/components/tooltip/custom-content.ts index a8f62d64c0..6860587a71 100644 --- a/apps/docs/content/components/tooltip/custom-content.ts +++ b/apps/docs/content/components/tooltip/custom-content.ts @@ -1,21 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - return ( - -
Custom Content
-
This is a custom tooltip content
- - } - > - - - ); -}`; +import App from "./custom-content.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/custom-motion.raw.jsx b/apps/docs/content/components/tooltip/custom-motion.raw.jsx new file mode 100644 index 0000000000..475cff9379 --- /dev/null +++ b/apps/docs/content/components/tooltip/custom-motion.raw.jsx @@ -0,0 +1,31 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/tooltip/custom-motion.ts b/apps/docs/content/components/tooltip/custom-motion.ts index dd7ec56f39..389f462ddd 100644 --- a/apps/docs/content/components/tooltip/custom-motion.ts +++ b/apps/docs/content/components/tooltip/custom-motion.ts @@ -1,34 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./custom-motion.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/custom-styles.raw.jsx b/apps/docs/content/components/tooltip/custom-styles.raw.jsx new file mode 100644 index 0000000000..96dbff1c1b --- /dev/null +++ b/apps/docs/content/components/tooltip/custom-styles.raw.jsx @@ -0,0 +1,20 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/tooltip/custom-styles.ts b/apps/docs/content/components/tooltip/custom-styles.ts index d72ba52213..da3ea9093a 100644 --- a/apps/docs/content/components/tooltip/custom-styles.ts +++ b/apps/docs/content/components/tooltip/custom-styles.ts @@ -1,26 +1,4 @@ -const App = `import {Tooltip, 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/tooltip/delay-multiple.raw.jsx b/apps/docs/content/components/tooltip/delay-multiple.raw.jsx new file mode 100644 index 0000000000..c9acae2b11 --- /dev/null +++ b/apps/docs/content/components/tooltip/delay-multiple.raw.jsx @@ -0,0 +1,18 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/tooltip/delay-multiple.ts b/apps/docs/content/components/tooltip/delay-multiple.ts index 71336f2312..c9f4aabd4d 100644 --- a/apps/docs/content/components/tooltip/delay-multiple.ts +++ b/apps/docs/content/components/tooltip/delay-multiple.ts @@ -1,21 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./delay-multiple.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/delay.raw.jsx b/apps/docs/content/components/tooltip/delay.raw.jsx new file mode 100644 index 0000000000..86a3124e73 --- /dev/null +++ b/apps/docs/content/components/tooltip/delay.raw.jsx @@ -0,0 +1,18 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/docs/content/components/tooltip/delay.ts b/apps/docs/content/components/tooltip/delay.ts index 2dec1051a3..29e870bcca 100644 --- a/apps/docs/content/components/tooltip/delay.ts +++ b/apps/docs/content/components/tooltip/delay.ts @@ -1,21 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - -
- ); -}`; +import App from "./delay.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/offset.raw.jsx b/apps/docs/content/components/tooltip/offset.raw.jsx new file mode 100644 index 0000000000..96e38fa36a --- /dev/null +++ b/apps/docs/content/components/tooltip/offset.raw.jsx @@ -0,0 +1,23 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( +
+ + + + + + + + + +
+ ); +} diff --git a/apps/docs/content/components/tooltip/offset.ts b/apps/docs/content/components/tooltip/offset.ts index d3669f7017..2fb601047c 100644 --- a/apps/docs/content/components/tooltip/offset.ts +++ b/apps/docs/content/components/tooltip/offset.ts @@ -1,26 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - return ( -
- - - - - - - - - -
- ); -}`; +import App from "./offset.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/placements.raw.jsx b/apps/docs/content/components/tooltip/placements.raw.jsx new file mode 100644 index 0000000000..edfebd1494 --- /dev/null +++ b/apps/docs/content/components/tooltip/placements.raw.jsx @@ -0,0 +1,30 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + const placements = [ + "top-start", + "top", + "top-end", + "bottom-start", + "bottom", + "bottom-end", + "left-start", + "left", + "left-end", + "right-start", + "right", + "right-end", + ]; + + return ( +
+ {placements.map((placement) => ( + + + + ))} +
+ ); +} diff --git a/apps/docs/content/components/tooltip/placements.ts b/apps/docs/content/components/tooltip/placements.ts index cf304818c2..dc67908b7e 100644 --- a/apps/docs/content/components/tooltip/placements.ts +++ b/apps/docs/content/components/tooltip/placements.ts @@ -1,38 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - const placements = [ - "top-start", - "top", - "top-end", - "bottom-start", - "bottom", - "bottom-end", - "left-start", - "left", - "left-end", - "right-start", - "right", - "right-end", - ]; - - return ( -
- {placements.map((placement) => ( - - - - ))} -
- ); -}`; +import App from "./placements.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/tooltip/usage.raw.jsx b/apps/docs/content/components/tooltip/usage.raw.jsx new file mode 100644 index 0000000000..eeb11415d2 --- /dev/null +++ b/apps/docs/content/components/tooltip/usage.raw.jsx @@ -0,0 +1,9 @@ +import {Tooltip, Button} from "@nextui-org/react"; + +export default function App() { + return ( + + + + ); +} diff --git a/apps/docs/content/components/tooltip/usage.ts b/apps/docs/content/components/tooltip/usage.ts index e438e386b9..1118304c37 100644 --- a/apps/docs/content/components/tooltip/usage.ts +++ b/apps/docs/content/components/tooltip/usage.ts @@ -1,12 +1,4 @@ -const App = `import {Tooltip, Button} from "@nextui-org/react"; - -export default function App() { - return ( - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, From e44916c09c2b0fe34adb3b276a148280ec86fd6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:30:51 +0800 Subject: [PATCH 10/50] refactor(docs): usage dx (#4036) --- .../components/user/link-description.raw.jsx | 17 +++++++++++++++++ .../components/user/link-description.ts | 18 +----------------- .../docs/content/components/user/usage.raw.jsx | 13 +++++++++++++ apps/docs/content/components/user/usage.ts | 14 +------------- 4 files changed, 32 insertions(+), 30 deletions(-) create mode 100644 apps/docs/content/components/user/link-description.raw.jsx create mode 100644 apps/docs/content/components/user/usage.raw.jsx diff --git a/apps/docs/content/components/user/link-description.raw.jsx b/apps/docs/content/components/user/link-description.raw.jsx new file mode 100644 index 0000000000..b0a3d2534f --- /dev/null +++ b/apps/docs/content/components/user/link-description.raw.jsx @@ -0,0 +1,17 @@ +import {User, Link} from "@nextui-org/react"; + +export default function App() { + return ( + + @jrgarciadev + + } + name="Junior Garcia" + /> + ); +} diff --git a/apps/docs/content/components/user/link-description.ts b/apps/docs/content/components/user/link-description.ts index b60cfa8b82..5122872e10 100644 --- a/apps/docs/content/components/user/link-description.ts +++ b/apps/docs/content/components/user/link-description.ts @@ -1,20 +1,4 @@ -const App = `import {User, Link} from "@nextui-org/react"; - -export default function App() { - return ( - - @jrgarciadev - - )} - avatarProps={{ - src: "https://avatars.githubusercontent.com/u/30373425?v=4" - }} - /> - ); -}`; +import App from "./link-description.raw.jsx?raw"; const react = { "/App.jsx": App, diff --git a/apps/docs/content/components/user/usage.raw.jsx b/apps/docs/content/components/user/usage.raw.jsx new file mode 100644 index 0000000000..ef7f9a95e0 --- /dev/null +++ b/apps/docs/content/components/user/usage.raw.jsx @@ -0,0 +1,13 @@ +import {User} from "@nextui-org/react"; + +export default function App() { + return ( + + ); +} diff --git a/apps/docs/content/components/user/usage.ts b/apps/docs/content/components/user/usage.ts index 66678b78fc..1118304c37 100644 --- a/apps/docs/content/components/user/usage.ts +++ b/apps/docs/content/components/user/usage.ts @@ -1,16 +1,4 @@ -const App = `import {User} from "@nextui-org/react"; - -export default function App() { - return ( - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, From 9590950555c8086118dc824c75e2d26670b69889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:30:57 +0800 Subject: [PATCH 11/50] refactor(docs): circular-progress dx (#4029) --- .../circular-progress/colors.raw.jsx | 14 ++++++++ .../components/circular-progress/colors.ts | 15 +-------- .../circular-progress/custom-styles.raw.jsx | 32 ++++++++++++++++++ .../circular-progress/custom-styles.ts | 33 +------------------ .../circular-progress/label.raw.jsx | 5 +++ .../components/circular-progress/label.ts | 8 +---- .../circular-progress/sizes.raw.jsx | 11 +++++++ .../components/circular-progress/sizes.ts | 12 +------ .../circular-progress/usage.raw.jsx | 5 +++ .../components/circular-progress/usage.ts | 8 +---- .../value-formatting.raw.jsx | 14 ++++++++ .../circular-progress/value-formatting.ts | 15 +-------- .../circular-progress/value.raw.jsx | 23 +++++++++++++ .../components/circular-progress/value.ts | 24 +------------- 14 files changed, 111 insertions(+), 108 deletions(-) create mode 100644 apps/docs/content/components/circular-progress/colors.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/label.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/sizes.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/usage.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/value-formatting.raw.jsx create mode 100644 apps/docs/content/components/circular-progress/value.raw.jsx 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, From 565197de81ce4fb7e72aca7cc339819051fd10af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:31:02 +0800 Subject: [PATCH 12/50] refactor(docs): chip-dx (#4028) --- .../content/components/chip/avatar.raw.jsx | 20 ++++++ apps/docs/content/components/chip/avatar.ts | 28 +------- .../components/chip/close-button.raw.jsx | 14 ++++ .../content/components/chip/close-button.ts | 13 +--- .../content/components/chip/colors.raw.jsx | 14 ++++ apps/docs/content/components/chip/colors.ts | 15 +---- .../components/chip/custom-styles.raw.jsx | 15 +++++ .../content/components/chip/custom-styles.ts | 16 +---- .../content/components/chip/disabled.raw.jsx | 9 +++ apps/docs/content/components/chip/disabled.ts | 8 +-- .../docs/content/components/chip/list.raw.jsx | 24 +++++++ apps/docs/content/components/chip/list.ts | 25 +------ .../content/components/chip/radius.raw.jsx | 12 ++++ apps/docs/content/components/chip/radius.ts | 13 +--- .../content/components/chip/sizes.raw.jsx | 11 +++ apps/docs/content/components/chip/sizes.ts | 12 +--- .../components/chip/start-end-content.raw.jsx | 52 ++++++++++++++ .../components/chip/start-end-content.ts | 67 +------------------ .../content/components/chip/usage.raw.jsx | 5 ++ apps/docs/content/components/chip/usage.ts | 8 +-- .../content/components/chip/variants.raw.jsx | 29 ++++++++ apps/docs/content/components/chip/variants.ts | 16 +---- 22 files changed, 216 insertions(+), 210 deletions(-) create mode 100644 apps/docs/content/components/chip/avatar.raw.jsx create mode 100644 apps/docs/content/components/chip/close-button.raw.jsx create mode 100644 apps/docs/content/components/chip/colors.raw.jsx create mode 100644 apps/docs/content/components/chip/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/chip/disabled.raw.jsx create mode 100644 apps/docs/content/components/chip/list.raw.jsx create mode 100644 apps/docs/content/components/chip/radius.raw.jsx create mode 100644 apps/docs/content/components/chip/sizes.raw.jsx create mode 100644 apps/docs/content/components/chip/start-end-content.raw.jsx create mode 100644 apps/docs/content/components/chip/usage.raw.jsx create mode 100644 apps/docs/content/components/chip/variants.raw.jsx 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, From 09037e8ea24adb0e6a694a81739d9f1c5243924c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:31:06 +0800 Subject: [PATCH 13/50] refactor(docs): checkbox-group dx (#4027) --- .../checkbox-group/controlled.raw.jsx | 21 ++++ .../components/checkbox-group/controlled.ts | 22 +--- .../custom-implementation.raw.jsx | 92 +++++++++++++++ .../checkbox-group/custom-implementation.ts | 108 +---------------- .../checkbox-group/custom-styles.raw.jsx | 104 ++++++++++++++++ .../checkbox-group/custom-styles.ts | 111 +----------------- .../checkbox-group/disabled.raw.jsx | 13 ++ .../components/checkbox-group/disabled.ts | 18 +-- .../checkbox-group/horizontal.raw.jsx | 18 +++ .../components/checkbox-group/horizontal.ts | 19 +-- .../components/checkbox-group/invalid.raw.jsx | 23 ++++ .../components/checkbox-group/invalid.ts | 24 +--- .../components/checkbox-group/usage.raw.jsx | 13 ++ .../components/checkbox-group/usage.ts | 17 +-- 14 files changed, 291 insertions(+), 312 deletions(-) create mode 100644 apps/docs/content/components/checkbox-group/controlled.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/disabled.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/horizontal.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/invalid.raw.jsx create mode 100644 apps/docs/content/components/checkbox-group/usage.raw.jsx 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..716b1405e1 --- /dev/null +++ b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx @@ -0,0 +1,92 @@ +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) => ( + +); + +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, From 48461928089e183a19f95c0d0721fb130d437fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:31:10 +0800 Subject: [PATCH 14/50] refactor(docs): checkbox dx (#4024) * refactor(docs): checkbox dx * fix(docs): incorrect import path --- .../components/checkbox/colors.raw.jsx | 26 +++++++ .../content/components/checkbox/colors.ts | 15 +--- .../components/checkbox/controlled.raw.jsx | 14 ++++ .../content/components/checkbox/controlled.ts | 17 +--- .../checkbox/custom-check-icon.raw.jsx | 68 ++++++++++++++++ .../components/checkbox/custom-check-icon.ts | 68 +--------------- .../checkbox/custom-implementation.raw.jsx | 68 ++++++++++++++++ .../checkbox/custom-implementation.ts | 78 +------------------ .../components/checkbox/custom-styles.raw.jsx | 49 ++++++++++++ .../components/checkbox/custom-styles.ts | 50 +----------- .../components/checkbox/disabled.raw.jsx | 12 +++ .../content/components/checkbox/disabled.ts | 11 +-- .../components/checkbox/indeterminate.raw.jsx | 5 ++ .../components/checkbox/indeterminate.ts | 8 +- .../components/checkbox/line-through.raw.jsx | 9 +++ .../components/checkbox/line-through.ts | 8 +- .../components/checkbox/radius.raw.jsx | 23 ++++++ .../content/components/checkbox/radius.ts | 14 +--- .../content/components/checkbox/sizes.raw.jsx | 17 ++++ .../docs/content/components/checkbox/sizes.ts | 12 +-- .../content/components/checkbox/usage.raw.jsx | 5 ++ .../docs/content/components/checkbox/usage.ts | 8 +- 22 files changed, 307 insertions(+), 278 deletions(-) create mode 100644 apps/docs/content/components/checkbox/colors.raw.jsx create mode 100644 apps/docs/content/components/checkbox/controlled.raw.jsx create mode 100644 apps/docs/content/components/checkbox/custom-check-icon.raw.jsx create mode 100644 apps/docs/content/components/checkbox/custom-implementation.raw.jsx create mode 100644 apps/docs/content/components/checkbox/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/checkbox/disabled.raw.jsx create mode 100644 apps/docs/content/components/checkbox/indeterminate.raw.jsx create mode 100644 apps/docs/content/components/checkbox/line-through.raw.jsx create mode 100644 apps/docs/content/components/checkbox/radius.raw.jsx create mode 100644 apps/docs/content/components/checkbox/sizes.raw.jsx create mode 100644 apps/docs/content/components/checkbox/usage.raw.jsx 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..4023c28365 --- /dev/null +++ b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx @@ -0,0 +1,68 @@ +import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react"; + +export const CheckIcon = (props) => ( + +); + +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, From c037ff9efdfca91ac255c9515a9179054f492f46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Thu, 14 Nov 2024 04:31:14 +0800 Subject: [PATCH 15/50] refactor(docs): card dx (#4023) --- .../components/card/blurred-footer.raw.jsx | 27 ++ .../content/components/card/blurred-footer.ts | 26 +- .../content/components/card/blurred.raw.jsx | 252 +++++++++++++++++ apps/docs/content/components/card/blurred.ts | 265 +----------------- .../components/card/composition.raw.jsx | 53 ++++ .../content/components/card/composition.ts | 51 +--- .../components/card/cover-image.raw.jsx | 93 ++++++ .../content/components/card/cover-image.ts | 92 +----- .../content/components/card/divider.raw.jsx | 31 ++ apps/docs/content/components/card/divider.ts | 36 +-- .../content/components/card/image.raw.jsx | 21 ++ apps/docs/content/components/card/image.ts | 22 +- .../components/card/primary-action.raw.jsx | 70 +++++ .../content/components/card/primary-action.ts | 70 +---- .../content/components/card/usage.raw.jsx | 11 + apps/docs/content/components/card/usage.ts | 12 +- 16 files changed, 566 insertions(+), 566 deletions(-) create mode 100644 apps/docs/content/components/card/blurred-footer.raw.jsx create mode 100644 apps/docs/content/components/card/blurred.raw.jsx create mode 100644 apps/docs/content/components/card/composition.raw.jsx create mode 100644 apps/docs/content/components/card/cover-image.raw.jsx create mode 100644 apps/docs/content/components/card/divider.raw.jsx create mode 100644 apps/docs/content/components/card/image.raw.jsx create mode 100644 apps/docs/content/components/card/primary-action.raw.jsx create mode 100644 apps/docs/content/components/card/usage.raw.jsx 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..b71da2f5ae --- /dev/null +++ b/apps/docs/content/components/card/blurred.raw.jsx @@ -0,0 +1,252 @@ +import {Card, CardBody, Image, Button, Slider} from "@nextui-org/react"; + +export const HeartIcon = ({ + size = 24, + width, + height, + strokeWidth = 1.5, + fill = "none", + ...props +}) => ( + +); + +export const PauseCircleIcon = ({size = 24, width, height, ...props}) => ( + +); + +export const NextIcon = ({size = 24, width, height, ...props}) => ( + +); + +export const PreviousIcon = ({size = 24, width, height, ...props}) => ( + +); + +export const RepeatOneIcon = ({size = 24, width, height, ...props}) => ( + +); + +export const ShuffleIcon = ({size = 24, width, height, ...props}) => ( + +); + +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, From 6f3731109c1ab16658545eea4781b194ec2a43c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:04:57 +0800 Subject: [PATCH 16/50] refactor(docs): skeleton dx (#4042) --- .../components/skeleton/loaded.raw.jsx | 33 ++++++++++++++++++ .../content/components/skeleton/loaded.ts | 34 +------------------ .../components/skeleton/standalone.raw.jsx | 15 ++++++++ .../content/components/skeleton/standalone.ts | 16 +-------- .../content/components/skeleton/usage.raw.jsx | 22 ++++++++++++ .../docs/content/components/skeleton/usage.ts | 23 +------------ 6 files changed, 73 insertions(+), 70 deletions(-) create mode 100644 apps/docs/content/components/skeleton/loaded.raw.jsx create mode 100644 apps/docs/content/components/skeleton/standalone.raw.jsx create mode 100644 apps/docs/content/components/skeleton/usage.raw.jsx 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, From 6a2a717bb83685d086fb03c808ea4c5a88571775 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:05:23 +0800 Subject: [PATCH 17/50] refactor(docs): spacer dx (#4043) --- .../content/components/spacer/usage.raw.jsx | 24 +++++++++++++++ apps/docs/content/components/spacer/usage.ts | 29 +------------------ 2 files changed, 25 insertions(+), 28 deletions(-) create mode 100644 apps/docs/content/components/spacer/usage.raw.jsx 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 { From 2fad7a6f347f8d144dfbed9e0a46e5fe0697d90f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:05:57 +0800 Subject: [PATCH 18/50] refactor(docs): snippet dx (#4044) --- .../content/components/snippet/colors.raw.jsx | 14 +++++ .../docs/content/components/snippet/colors.ts | 15 +---- .../components/snippet/custom-icons.raw.jsx | 43 ++++++++++++++ .../components/snippet/custom-icons.ts | 57 +------------------ .../components/snippet/custom-tooltip.raw.jsx | 17 ++++++ .../components/snippet/custom-tooltip.ts | 18 +----- .../components/snippet/multiline.raw.jsx | 11 ++++ .../content/components/snippet/multiline.ts | 12 +--- .../content/components/snippet/sizes.raw.jsx | 11 ++++ apps/docs/content/components/snippet/sizes.ts | 12 +--- .../content/components/snippet/symbol.raw.jsx | 9 +++ .../docs/content/components/snippet/symbol.ts | 8 +-- .../content/components/snippet/usage.raw.jsx | 5 ++ apps/docs/content/components/snippet/usage.ts | 8 +-- .../components/snippet/variants.raw.jsx | 18 ++++++ .../content/components/snippet/variants.ts | 13 +---- .../components/snippet/without-copy.raw.jsx | 9 +++ .../components/snippet/without-copy.ts | 10 +--- 18 files changed, 146 insertions(+), 144 deletions(-) create mode 100644 apps/docs/content/components/snippet/colors.raw.jsx create mode 100644 apps/docs/content/components/snippet/custom-icons.raw.jsx create mode 100644 apps/docs/content/components/snippet/custom-tooltip.raw.jsx create mode 100644 apps/docs/content/components/snippet/multiline.raw.jsx create mode 100644 apps/docs/content/components/snippet/sizes.raw.jsx create mode 100644 apps/docs/content/components/snippet/symbol.raw.jsx create mode 100644 apps/docs/content/components/snippet/usage.raw.jsx create mode 100644 apps/docs/content/components/snippet/variants.raw.jsx create mode 100644 apps/docs/content/components/snippet/without-copy.raw.jsx 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, From 6d7e0988d57e7ec739d891119cd1a81865847e69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:06:26 +0800 Subject: [PATCH 19/50] refactor(docs): scroll-shadow dx (#4045) --- .../scroll-shadow/custom-size.raw.jsx | 74 +++++++++++++++++ .../components/scroll-shadow/custom-size.ts | 47 +---------- .../scroll-shadow/hide-scrollbar.raw.jsx | 74 +++++++++++++++++ .../scroll-shadow/hide-scrollbar.ts | 47 +---------- .../scroll-shadow/horizontal.raw.jsx | 74 +++++++++++++++++ .../components/scroll-shadow/horizontal.ts | 47 +---------- .../components/scroll-shadow/offset.raw.jsx | 79 +++++++++++++++++++ .../components/scroll-shadow/offset.ts | 52 +----------- .../components/scroll-shadow/usage.raw.jsx | 74 +++++++++++++++++ .../content/components/scroll-shadow/usage.ts | 47 +---------- 10 files changed, 380 insertions(+), 235 deletions(-) create mode 100644 apps/docs/content/components/scroll-shadow/custom-size.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/horizontal.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/offset.raw.jsx create mode 100644 apps/docs/content/components/scroll-shadow/usage.raw.jsx 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 { From 1fe7eb2c8e18dd253aed9987f9c940009fc39bc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:06:42 +0800 Subject: [PATCH 20/50] refactor(docs): code dx (#4046) --- apps/docs/content/components/code/colors.raw.jsx | 14 ++++++++++++++ apps/docs/content/components/code/colors.ts | 15 +-------------- apps/docs/content/components/code/sizes.raw.jsx | 11 +++++++++++ apps/docs/content/components/code/sizes.ts | 12 +----------- apps/docs/content/components/code/usage.raw.jsx | 5 +++++ apps/docs/content/components/code/usage.ts | 8 +------- 6 files changed, 33 insertions(+), 32 deletions(-) create mode 100644 apps/docs/content/components/code/colors.raw.jsx create mode 100644 apps/docs/content/components/code/sizes.raw.jsx create mode 100644 apps/docs/content/components/code/usage.raw.jsx 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, From 5aad6fe4d066567e04ba470cccab261227a54dc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:06:58 +0800 Subject: [PATCH 21/50] refactor(docs): kbd dx (#4047) --- apps/docs/content/components/kbd/keys.raw.jsx | 11 +++++++++++ apps/docs/content/components/kbd/keys.ts | 12 +----------- apps/docs/content/components/kbd/usage.raw.jsx | 5 +++++ apps/docs/content/components/kbd/usage.ts | 8 +------- 4 files changed, 18 insertions(+), 18 deletions(-) create mode 100644 apps/docs/content/components/kbd/keys.raw.jsx create mode 100644 apps/docs/content/components/kbd/usage.raw.jsx 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, From bfcc75c3da16a8f14a95fb3c027aff0d43e34dbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:07:29 +0800 Subject: [PATCH 22/50] refactor(docs): link dx (#4048) --- .../content/components/link/block.raw.jsx | 26 +++++++ apps/docs/content/components/link/block.ts | 27 +------- .../content/components/link/colors.raw.jsx | 26 +++++++ apps/docs/content/components/link/colors.ts | 15 +---- .../link/custom-anchor-icon.raw.jsx | 35 ++++++++++ .../components/link/custom-anchor-icon.ts | 38 +---------- .../components/link/custom-impl.raw.jsx | 30 +++++++++ .../components/link/custom-impl.raw.tsx | 32 +++++++++ .../content/components/link/custom-impl.ts | 67 +------------------ .../content/components/link/disabled.raw.jsx | 9 +++ apps/docs/content/components/link/disabled.ts | 8 +-- .../content/components/link/external.raw.jsx | 14 ++++ apps/docs/content/components/link/external.ts | 19 +----- .../content/components/link/nextjs.raw.jsx | 10 +++ apps/docs/content/components/link/nextjs.ts | 11 +-- .../components/link/polymorphic.raw.jsx | 15 +++++ .../content/components/link/polymorphic.ts | 16 +---- .../content/components/link/sizes.raw.jsx | 17 +++++ apps/docs/content/components/link/sizes.ts | 12 +--- .../content/components/link/underline.raw.jsx | 23 +++++++ .../docs/content/components/link/underline.ts | 14 +--- .../content/components/link/usage.raw.jsx | 5 ++ apps/docs/content/components/link/usage.ts | 8 +-- 23 files changed, 254 insertions(+), 223 deletions(-) create mode 100644 apps/docs/content/components/link/block.raw.jsx create mode 100644 apps/docs/content/components/link/colors.raw.jsx create mode 100644 apps/docs/content/components/link/custom-anchor-icon.raw.jsx create mode 100644 apps/docs/content/components/link/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/link/custom-impl.raw.tsx create mode 100644 apps/docs/content/components/link/disabled.raw.jsx create mode 100644 apps/docs/content/components/link/external.raw.jsx create mode 100644 apps/docs/content/components/link/nextjs.raw.jsx create mode 100644 apps/docs/content/components/link/polymorphic.raw.jsx create mode 100644 apps/docs/content/components/link/sizes.raw.jsx create mode 100644 apps/docs/content/components/link/underline.raw.jsx create mode 100644 apps/docs/content/components/link/usage.raw.jsx 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..38d57ba0bb --- /dev/null +++ b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx @@ -0,0 +1,35 @@ +import {Link} from "@nextui-org/react"; + +export const AnchorIcon = (props) => ( + +); + +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, From fb8974744a7476ed2aaacd3fb72cbc9a8741b366 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:08:02 +0800 Subject: [PATCH 23/50] refactor(docs): progress dx (#4049) --- .../components/progress/colors.raw.jsx | 14 +++++++++++ .../content/components/progress/colors.ts | 15 +---------- .../components/progress/custom-styles.raw.jsx | 20 +++++++++++++++ .../components/progress/custom-styles.ts | 21 +--------------- .../components/progress/indeterminate.raw.jsx | 5 ++++ .../components/progress/indeterminate.ts | 13 +--------- .../content/components/progress/label.raw.jsx | 5 ++++ .../docs/content/components/progress/label.ts | 8 +----- .../content/components/progress/sizes.raw.jsx | 11 ++++++++ .../docs/content/components/progress/sizes.ts | 12 +-------- .../components/progress/striped.raw.jsx | 7 ++++++ .../content/components/progress/striped.ts | 15 +---------- .../content/components/progress/usage.raw.jsx | 5 ++++ .../docs/content/components/progress/usage.ts | 8 +----- .../progress/value-formatting.raw.jsx | 16 ++++++++++++ .../components/progress/value-formatting.ts | 17 +------------ .../content/components/progress/value.raw.jsx | 24 ++++++++++++++++++ .../docs/content/components/progress/value.ts | 25 +------------------ 18 files changed, 116 insertions(+), 125 deletions(-) create mode 100644 apps/docs/content/components/progress/colors.raw.jsx create mode 100644 apps/docs/content/components/progress/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/progress/indeterminate.raw.jsx create mode 100644 apps/docs/content/components/progress/label.raw.jsx create mode 100644 apps/docs/content/components/progress/sizes.raw.jsx create mode 100644 apps/docs/content/components/progress/striped.raw.jsx create mode 100644 apps/docs/content/components/progress/usage.raw.jsx create mode 100644 apps/docs/content/components/progress/value-formatting.raw.jsx create mode 100644 apps/docs/content/components/progress/value.raw.jsx 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, From 0d896097fd5e0dd3afd8398811bd774a3dacc52b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:08:16 +0800 Subject: [PATCH 24/50] refactor(docs): divider dx (#4050) --- .../content/components/divider/usage.raw.jsx | 20 ++++++++++++++++++ apps/docs/content/components/divider/usage.ts | 21 +------------------ 2 files changed, 21 insertions(+), 20 deletions(-) create mode 100644 apps/docs/content/components/divider/usage.raw.jsx 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, From 7956ad16cdb86a3bbfb5790181aed524a8e3485d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Fri, 15 Nov 2024 03:08:45 +0800 Subject: [PATCH 25/50] refactor(docs): listbox dx (#4051) * refactor(docs): listbox dx * fix(docs): import path * fix(docs): import path * chore(docs): remove highlightedLines * fix(docs): indentation --- .../components/listbox/custom-styles.raw.jsx | 249 +++++++++++++ .../components/listbox/custom-styles.ts | 277 +-------------- .../components/listbox/description.raw.jsx | 151 ++++++++ .../content/components/listbox/description.ts | 162 +-------- .../components/listbox/disabled-keys.raw.jsx | 26 ++ .../components/listbox/disabled-keys.ts | 29 +- .../components/listbox/dynamic.raw.jsx | 44 +++ .../content/components/listbox/dynamic.ts | 51 +-- .../content/components/listbox/icons.raw.jsx | 141 ++++++++ apps/docs/content/components/listbox/icons.ts | 158 +------- .../listbox/multiple-selection.raw.jsx | 35 ++ .../components/listbox/multiple-selection.ts | 41 +-- .../components/listbox/sections.raw.jsx | 154 ++++++++ .../content/components/listbox/sections.ts | 165 +-------- .../listbox/single-selection.raw.jsx | 34 ++ .../components/listbox/single-selection.ts | 41 +-- .../components/listbox/top-content.raw.jsx | 264 ++++++++++++++ .../components/listbox/top-content.raw.tsx | 267 ++++++++++++++ .../content/components/listbox/top-content.ts | 336 +----------------- .../content/components/listbox/usage.raw.jsx | 22 ++ apps/docs/content/components/listbox/usage.ts | 28 +- .../components/listbox/variants.raw.jsx | 58 +++ .../content/components/listbox/variants.ts | 65 +--- apps/docs/content/docs/components/listbox.mdx | 23 +- 24 files changed, 1467 insertions(+), 1354 deletions(-) create mode 100644 apps/docs/content/components/listbox/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/listbox/description.raw.jsx create mode 100644 apps/docs/content/components/listbox/disabled-keys.raw.jsx create mode 100644 apps/docs/content/components/listbox/dynamic.raw.jsx create mode 100644 apps/docs/content/components/listbox/icons.raw.jsx create mode 100644 apps/docs/content/components/listbox/multiple-selection.raw.jsx create mode 100644 apps/docs/content/components/listbox/sections.raw.jsx create mode 100644 apps/docs/content/components/listbox/single-selection.raw.jsx create mode 100644 apps/docs/content/components/listbox/top-content.raw.jsx create mode 100644 apps/docs/content/components/listbox/top-content.raw.tsx create mode 100644 apps/docs/content/components/listbox/usage.raw.jsx create mode 100644 apps/docs/content/components/listbox/variants.raw.jsx 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..b8fb775043 --- /dev/null +++ b/apps/docs/content/components/listbox/custom-styles.raw.jsx @@ -0,0 +1,249 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const BugIcon = (props) => ( + + + +); + +export const PullRequestIcon = (props) => ( + + + +); + +export const ChatIcon = (props) => ( + + + + +); + +export const PlayCircleIcon = (props) => ( + + + + +); + +export const LayoutIcon = (props) => ( + + + +); + +export const TagIcon = (props) => ( + + + + +); + +export const UsersIcon = (props) => ( + + + + +); + +export const WatchersIcon = (props) => ( + + + +); + +export const BookIcon = (props) => ( + + + + +); + +export const ChevronRightIcon = (props) => ( + +); + +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..7265dd2321 --- /dev/null +++ b/apps/docs/content/components/listbox/description.raw.jsx @@ -0,0 +1,151 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => ( + +); + +export const CopyDocumentIcon = (props) => ( + +); + +export const EditDocumentIcon = (props) => ( + +); + +export const DeleteDocumentIcon = (props) => ( + +); + +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..6dc178ae38 --- /dev/null +++ b/apps/docs/content/components/listbox/icons.raw.jsx @@ -0,0 +1,141 @@ +import {Listbox, ListboxItem, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => ( + +); + +export const CopyDocumentIcon = (props) => ( + +); + +export const EditDocumentIcon = (props) => ( + +); + +export const DeleteDocumentIcon = (props) => ( + +); + +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..0489b22110 --- /dev/null +++ b/apps/docs/content/components/listbox/sections.raw.jsx @@ -0,0 +1,154 @@ +import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react"; + +export const AddNoteIcon = (props) => ( + +); + +export const CopyDocumentIcon = (props) => ( + +); + +export const EditDocumentIcon = (props) => ( + +); + +export const DeleteDocumentIcon = (props) => ( + +); + +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/docs/components/listbox.mdx b/apps/docs/content/docs/components/listbox.mdx index e2ce6fa455..5139f7f023 100644 --- a/apps/docs/content/docs/components/listbox.mdx +++ b/apps/docs/content/docs/components/listbox.mdx @@ -39,14 +39,14 @@ NextUI exports 3 listbox-related components: @@ -68,7 +68,7 @@ Listbox follows the [Collection Components API](https://react-spectrum.adobe.com Listbox items can be disabled using the `disabledKeys` prop to the `Listbox` component. - + > **Note**: It's important to have a unique key for each item, otherwise the disabled keys will not work. @@ -76,7 +76,7 @@ Listbox items can be disabled using the `disabledKeys` prop to the `Listbox` com You can use the `variant` in the `Listbox` component to change the `hover` style of the listbox items. - + ### Single Selection @@ -84,7 +84,6 @@ You can set the `selectionMode` property as `single` to allow the user to select @@ -94,7 +93,6 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele @@ -104,7 +102,7 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele It is possible to add icons to the listbox items using the `startContent` / `endContent` props. - + > **Note**: If you use `currentColor` as the icon color, the icon will have the same color as the item text. @@ -114,7 +112,6 @@ You can use the `description` prop to add a description to the listbox item. @@ -128,7 +125,7 @@ You can use the `topContent` and `bottomContent` props to add content above and You can use the `ListboxSection` component to group listbox items. - + > **Note**: Sections without a `title` must provide an `aria-label` for accessibility. From c91a6dc8acbdfc3a8d58b92b3b1c6988fa680bf1 Mon Sep 17 00:00:00 2001 From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com> Date: Fri, 22 Nov 2024 00:27:43 +0900 Subject: [PATCH 26/50] chore(docs): replace the props of autocomplete from value to key (#4129) --- .../components/autocomplete/colors.raw.jsx | 28 +++++++-------- .../autocomplete/controlled.raw.jsx | 28 +++++++-------- .../autocomplete/controlled.raw.tsx | 34 +++++++++---------- .../custom-empty-content-message.raw.jsx | 28 +++++++-------- .../autocomplete/custom-filtering.raw.jsx | 28 +++++++-------- .../autocomplete/custom-filtering.raw.tsx | 28 +++++++-------- .../autocomplete/custom-selector-icon.raw.jsx | 28 +++++++-------- .../autocomplete/custom-value.raw.jsx | 28 +++++++-------- .../autocomplete/description.raw.jsx | 28 +++++++-------- .../autocomplete/disabled-items.raw.jsx | 28 +++++++-------- .../components/autocomplete/disabled.raw.jsx | 28 +++++++-------- .../components/autocomplete/dynamic.raw.jsx | 28 +++++++-------- .../autocomplete/error-message.raw.jsx | 34 +++++++++---------- .../components/autocomplete/events.raw.jsx | 28 +++++++-------- .../components/autocomplete/events.raw.tsx | 28 +++++++-------- .../autocomplete/fully-controlled.raw.jsx | 28 +++++++-------- .../autocomplete/fully-controlled.raw.tsx | 28 +++++++-------- .../autocomplete/label-placements.raw.jsx | 32 ++++++++--------- .../components/autocomplete/read-only.raw.jsx | 28 +++++++-------- .../components/autocomplete/required.raw.jsx | 28 +++++++-------- .../components/autocomplete/sizes.raw.jsx | 30 ++++++++-------- .../autocomplete/start-content.raw.jsx | 28 +++++++-------- .../components/autocomplete/usage.raw.jsx | 32 ++++++++--------- .../components/autocomplete/variants.raw.jsx | 32 ++++++++--------- .../without-scroll-shadow.raw.jsx | 28 +++++++-------- 25 files changed, 360 insertions(+), 366 deletions(-) diff --git a/apps/docs/content/components/autocomplete/colors.raw.jsx b/apps/docs/content/components/autocomplete/colors.raw.jsx index 02453bca27..084f46d6cd 100644 --- a/apps/docs/content/components/autocomplete/colors.raw.jsx +++ b/apps/docs/content/components/autocomplete/colors.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -43,7 +43,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}} ))}
diff --git a/apps/docs/content/components/autocomplete/controlled.raw.jsx b/apps/docs/content/components/autocomplete/controlled.raw.jsx index 02453bca27..084f46d6cd 100644 --- a/apps/docs/content/components/autocomplete/controlled.raw.jsx +++ b/apps/docs/content/components/autocomplete/controlled.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -43,7 +43,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}} ))}
diff --git a/apps/docs/content/components/autocomplete/controlled.raw.tsx b/apps/docs/content/components/autocomplete/controlled.raw.tsx index e1e51384d3..ac696fb0ff 100644 --- a/apps/docs/content/components/autocomplete/controlled.raw.tsx +++ b/apps/docs/content/components/autocomplete/controlled.raw.tsx @@ -2,35 +2,35 @@ import React from "react"; import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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("cat"); + const [key, setValue] = React.useState("cat"); return (
@@ -39,13 +39,13 @@ export default function App() { defaultItems={animals} label="Favorite Animal" placeholder="Search an animal" - selectedKey={value} + selectedKey={key} variant="bordered" onSelectionChange={setValue} > - {(item) => {item.label}} + {(item) => {item.label}} -

Selected: {value}

+

Selected: {key}

); } 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 index 1c1072f365..822f4838cc 100644 --- a/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx +++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -40,7 +40,7 @@ export default function App() { }} placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}}
); diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx index 7f0ff19257..afb0782618 100644 --- a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -51,7 +51,7 @@ export default function App() { label="Search an animal" variant="bordered" > - {(item) => {item.label}} + {(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 index 58f68bd410..38b444f84e 100644 --- a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx +++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -51,7 +51,7 @@ export default function App() { label="Search an animal" variant="bordered" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx index f4d192332f..9df56de218 100644 --- a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx +++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx @@ -22,31 +22,31 @@ const SelectorIcon = (props) => ( ); 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -60,7 +60,7 @@ export default function App() { placeholder="Search an animal" selectorIcon={} > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/custom-value.raw.jsx b/apps/docs/content/components/autocomplete/custom-value.raw.jsx index 93d0c71244..ec46f43f0c 100644 --- a/apps/docs/content/components/autocomplete/custom-value.raw.jsx +++ b/apps/docs/content/components/autocomplete/custom-value.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -37,7 +37,7 @@ export default function App() { label="Search an animal" variant="bordered" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/description.raw.jsx b/apps/docs/content/components/autocomplete/description.raw.jsx index d68aa29122..d8f7e5bbaa 100644 --- a/apps/docs/content/components/autocomplete/description.raw.jsx +++ b/apps/docs/content/components/autocomplete/description.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -38,7 +38,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx index 41ab6f13bb..8b90a1f045 100644 --- a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx +++ b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -37,7 +37,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/disabled.raw.jsx b/apps/docs/content/components/autocomplete/disabled.raw.jsx index 0e5474b97d..5524c3850a 100644 --- a/apps/docs/content/components/autocomplete/disabled.raw.jsx +++ b/apps/docs/content/components/autocomplete/disabled.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -38,7 +38,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/dynamic.raw.jsx b/apps/docs/content/components/autocomplete/dynamic.raw.jsx index 4acc4fb52e..02d854ca30 100644 --- a/apps/docs/content/components/autocomplete/dynamic.raw.jsx +++ b/apps/docs/content/components/autocomplete/dynamic.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -36,7 +36,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(animal) => {animal.label}} + {(animal) => {animal.label}} ); } diff --git a/apps/docs/content/components/autocomplete/error-message.raw.jsx b/apps/docs/content/components/autocomplete/error-message.raw.jsx index a44a21f67f..fa9082e486 100644 --- a/apps/docs/content/components/autocomplete/error-message.raw.jsx +++ b/apps/docs/content/components/autocomplete/error-message.raw.jsx @@ -1,38 +1,38 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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 [key, setValue] = React.useState(""); const [touched, setTouched] = React.useState(false); - const isValid = value === "cat"; + const isValid = key === "cat"; return ( setTouched(true)} onSelectionChange={setValue} > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/events.raw.jsx b/apps/docs/content/components/autocomplete/events.raw.jsx index 4fca879e86..b54015518c 100644 --- a/apps/docs/content/components/autocomplete/events.raw.jsx +++ b/apps/docs/content/components/autocomplete/events.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -51,7 +51,7 @@ export default function App() { onInputChange={onInputChange} onSelectionChange={onSelectionChange} > - {(item) => {item.label}} + {(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 index 3c072be3a6..4e0c01fd53 100644 --- a/apps/docs/content/components/autocomplete/events.raw.tsx +++ b/apps/docs/content/components/autocomplete/events.raw.tsx @@ -2,31 +2,31 @@ import React from "react"; import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -52,7 +52,7 @@ export default function App() { onInputChange={onInputChange} onSelectionChange={onSelectionChange} > - {(item) => {item.label}} + {(item) => {item.label}}

Current selected animal: {selectedKey}

Current input text: {value}

diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx index 99449aaa4c..6b0049e68d 100644 --- a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx @@ -2,31 +2,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; import {useFilter} from "@react-aria/i18n"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -90,7 +90,7 @@ export default function App() { onOpenChange={onOpenChange} onSelectionChange={onSelectionChange} > - {(item) => {item.label}} + {(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 index b4c4bfb238..b71890a48f 100644 --- a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx +++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx @@ -9,31 +9,31 @@ export type FieldState = { }; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -97,7 +97,7 @@ export default function App() { onOpenChange={onOpenChange} onSelectionChange={onSelectionChange} > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/label-placements.raw.jsx b/apps/docs/content/components/autocomplete/label-placements.raw.jsx index 0693d8da2b..bc019062b4 100644 --- a/apps/docs/content/components/autocomplete/label-placements.raw.jsx +++ b/apps/docs/content/components/autocomplete/label-placements.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -44,7 +44,7 @@ export default function App() { label="Favorite Animal" labelPlacement={placement} > - {(item) => {item.label}} + {(item) => {item.label}} ))}
@@ -61,9 +61,7 @@ export default function App() { placeholder="Search an animal" > {animals.map((animal) => ( - - {animal.label} - + {animal.label} ))} ))} diff --git a/apps/docs/content/components/autocomplete/read-only.raw.jsx b/apps/docs/content/components/autocomplete/read-only.raw.jsx index d5d2b084f4..2801df8aba 100644 --- a/apps/docs/content/components/autocomplete/read-only.raw.jsx +++ b/apps/docs/content/components/autocomplete/read-only.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -38,7 +38,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/required.raw.jsx b/apps/docs/content/components/autocomplete/required.raw.jsx index cb4c4faa16..5fa999c6e4 100644 --- a/apps/docs/content/components/autocomplete/required.raw.jsx +++ b/apps/docs/content/components/autocomplete/required.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -38,7 +38,7 @@ export default function App() { label="Favorite Animal" placeholder="Search an animal" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/sizes.raw.jsx b/apps/docs/content/components/autocomplete/sizes.raw.jsx index bf6365be1f..31906647eb 100644 --- a/apps/docs/content/components/autocomplete/sizes.raw.jsx +++ b/apps/docs/content/components/autocomplete/sizes.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -41,7 +41,7 @@ export default function App() { label="Select an animal" size={size} > - {(item) => {item.label}} + {(item) => {item.label}} - {(item) => {item.label}} + {(item) => {item.label}}
))} diff --git a/apps/docs/content/components/autocomplete/start-content.raw.jsx b/apps/docs/content/components/autocomplete/start-content.raw.jsx index a343e7c689..58e526aaac 100644 --- a/apps/docs/content/components/autocomplete/start-content.raw.jsx +++ b/apps/docs/content/components/autocomplete/start-content.raw.jsx @@ -37,31 +37,31 @@ const PetIcon = (props) => { }; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -75,7 +75,7 @@ export default function App() { startContent={} variant="bordered" > - {(item) => {item.label}} + {(item) => {item.label}} ); } diff --git a/apps/docs/content/components/autocomplete/usage.raw.jsx b/apps/docs/content/components/autocomplete/usage.raw.jsx index d25bbd6e74..f95a67897f 100644 --- a/apps/docs/content/components/autocomplete/usage.raw.jsx +++ b/apps/docs/content/components/autocomplete/usage.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -33,9 +33,7 @@ export default function App() {
{animals.map((animal) => ( - - {animal.label} - + {animal.label} ))} - {(item) => {item.label}} + {(item) => {item.label}}
); diff --git a/apps/docs/content/components/autocomplete/variants.raw.jsx b/apps/docs/content/components/autocomplete/variants.raw.jsx index dcfa9bea18..a222f3afaf 100644 --- a/apps/docs/content/components/autocomplete/variants.raw.jsx +++ b/apps/docs/content/components/autocomplete/variants.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -41,7 +41,7 @@ export default function App() { label="Select an animal" variant={variant} > - {(item) => {item.label}} + {(item) => {item.label}} {animals.map((animal) => ( - - {animal.label} - + {animal.label} ))}
diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx index 3f332407ae..56e0385b12 100644 --- a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx +++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx @@ -1,31 +1,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react"; 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: "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", - value: "dolphin", + key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"}, + {label: "Zebra", key: "zebra", description: "A several species of African equids"}, { label: "Shark", - value: "shark", + key: "shark", description: "A group of elasmobranch fish characterized by a cartilaginous skeleton", }, { label: "Whale", - value: "whale", + key: "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"}, + {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() { @@ -40,7 +40,7 @@ export default function App() { isEnabled: false, }} > - {(item) => {item.label}} + {(item) => {item.label}} ); } From e77306abecee3cc931591a836f368b553097c82b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Sat, 23 Nov 2024 05:06:57 +0800 Subject: [PATCH 27/50] refactor(docs): alert dx (#4108) * refactor(docs): alert dx * refactor(docs): alert dx --- .../content/components/alert/colors.raw.jsx | 15 ++ apps/docs/content/components/alert/colors.ts | 19 +- .../components/alert/controlled.raw.jsx | 28 +++ .../content/components/alert/controlled.ts | 31 +-- .../components/alert/custom-impl.raw.jsx | 124 ++++++++++++ .../content/components/alert/custom-impl.ts | 135 +------------ .../components/alert/custom-styles.raw.jsx | 91 +++++++++ .../components/alert/custom-styles.raw.tsx | 94 +++++++++ .../content/components/alert/custom-styles.ts | 189 +----------------- .../content/components/alert/radius.raw.jsx | 15 ++ apps/docs/content/components/alert/radius.ts | 19 +- .../content/components/alert/usage.raw.jsx | 12 ++ apps/docs/content/components/alert/usage.ts | 13 +- .../content/components/alert/variants.raw.jsx | 16 ++ .../docs/content/components/alert/variants.ts | 12 +- .../components/alert/with-action.raw.jsx | 19 ++ .../content/components/alert/with-action.ts | 22 +- .../components/alert/with-icon.raw.jsx | 33 +++ .../content/components/alert/with-icon.ts | 47 +---- .../components/alert/without-icon.raw.jsx | 12 ++ .../content/components/alert/without-icon.ts | 19 +- 21 files changed, 474 insertions(+), 491 deletions(-) create mode 100644 apps/docs/content/components/alert/colors.raw.jsx create mode 100644 apps/docs/content/components/alert/controlled.raw.jsx create mode 100644 apps/docs/content/components/alert/custom-impl.raw.jsx create mode 100644 apps/docs/content/components/alert/custom-styles.raw.jsx create mode 100644 apps/docs/content/components/alert/custom-styles.raw.tsx create mode 100644 apps/docs/content/components/alert/radius.raw.jsx create mode 100644 apps/docs/content/components/alert/usage.raw.jsx create mode 100644 apps/docs/content/components/alert/variants.raw.jsx create mode 100644 apps/docs/content/components/alert/with-action.raw.jsx create mode 100644 apps/docs/content/components/alert/with-icon.raw.jsx create mode 100644 apps/docs/content/components/alert/without-icon.raw.jsx 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, From e5a69d9f37a61de38119960f85a6934cbed8e0b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Sat, 23 Nov 2024 05:08:45 +0800 Subject: [PATCH 28/50] refactor(docs): image dx (#4061) --- .../docs/content/components/image/blurred.raw.jsx | 13 +++++++++++++ apps/docs/content/components/image/blurred.ts | 14 +------------- .../content/components/image/fallback.raw.jsx | 13 +++++++++++++ apps/docs/content/components/image/fallback.ts | 14 +------------- .../docs/content/components/image/loading.raw.jsx | 12 ++++++++++++ apps/docs/content/components/image/loading.ts | 13 +------------ apps/docs/content/components/image/nextjs.raw.jsx | 14 ++++++++++++++ apps/docs/content/components/image/nextjs.ts | 15 +-------------- apps/docs/content/components/image/usage.raw.jsx | 11 +++++++++++ apps/docs/content/components/image/usage.ts | 12 +----------- apps/docs/content/components/image/zoomed.raw.jsx | 12 ++++++++++++ apps/docs/content/components/image/zoomed.ts | 13 +------------ 12 files changed, 81 insertions(+), 75 deletions(-) create mode 100644 apps/docs/content/components/image/blurred.raw.jsx create mode 100644 apps/docs/content/components/image/fallback.raw.jsx create mode 100644 apps/docs/content/components/image/loading.raw.jsx create mode 100644 apps/docs/content/components/image/nextjs.raw.jsx create mode 100644 apps/docs/content/components/image/usage.raw.jsx create mode 100644 apps/docs/content/components/image/zoomed.raw.jsx 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, From 7eab2e882e57e61617790bdc7e7370731cc9e276 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Sat, 23 Nov 2024 05:10:21 +0800 Subject: [PATCH 29/50] refactor(docs): textarea dx (#4063) --- .../components/textarea/autosize.raw.jsx | 11 +++++++++ .../content/components/textarea/autosize.ts | 23 +------------------ .../components/textarea/controlled.raw.jsx | 19 +++++++++++++++ .../content/components/textarea/controlled.ts | 20 +--------------- .../components/textarea/description.raw.jsx | 13 +++++++++++ .../components/textarea/description.ts | 14 +---------- .../textarea/disable-autosize.raw.jsx | 17 ++++++++++++++ .../components/textarea/disable-autosize.ts | 18 +-------------- .../components/textarea/disabled.raw.jsx | 14 +++++++++++ .../content/components/textarea/disabled.ts | 15 +----------- .../components/textarea/error-message.raw.jsx | 15 ++++++++++++ .../components/textarea/error-message.ts | 16 +------------ .../components/textarea/readonly.raw.jsx | 15 ++++++++++++ .../content/components/textarea/readonly.ts | 16 +------------ .../components/textarea/required.raw.jsx | 13 +++++++++++ .../content/components/textarea/required.ts | 14 +---------- .../content/components/textarea/usage.raw.jsx | 5 ++++ .../docs/content/components/textarea/usage.ts | 12 +--------- .../components/textarea/variants.raw.jsx | 20 ++++++++++++++++ .../content/components/textarea/variants.ts | 21 +---------------- 20 files changed, 152 insertions(+), 159 deletions(-) create mode 100644 apps/docs/content/components/textarea/autosize.raw.jsx create mode 100644 apps/docs/content/components/textarea/controlled.raw.jsx create mode 100644 apps/docs/content/components/textarea/description.raw.jsx create mode 100644 apps/docs/content/components/textarea/disable-autosize.raw.jsx create mode 100644 apps/docs/content/components/textarea/disabled.raw.jsx create mode 100644 apps/docs/content/components/textarea/error-message.raw.jsx create mode 100644 apps/docs/content/components/textarea/readonly.raw.jsx create mode 100644 apps/docs/content/components/textarea/required.raw.jsx create mode 100644 apps/docs/content/components/textarea/usage.raw.jsx create mode 100644 apps/docs/content/components/textarea/variants.raw.jsx 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 ( +
+