From 52223f794683cd1140a9b3a722b9356da0a480a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 04:50:04 +0900 Subject: [PATCH 01/13] docs: refactor home --- apps/docs/content/landing/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx index 5df8b5fd6f..0a8a0be55d 100644 --- a/apps/docs/content/landing/index.tsx +++ b/apps/docs/content/landing/index.tsx @@ -216,8 +216,7 @@ return ( `, comparativeCode: { - nextui: `import * as React from 'react'; -import { Input } from '@nextui-org/react'; + nextui: `import { Input } from '@nextui-org/react'; const MyComponent = () => { return ( @@ -227,7 +226,7 @@ const MyComponent = () => { export default MyComponent `, - others: `import * as React from 'react'; + others: `import { useState } from 'react'; import ButtonIcon from '@other-library/ButtonIcon'; import InputOutlined from '@other-library/InputOutlined'; import LabelInput from '@other-library/LabelInput'; @@ -237,7 +236,7 @@ import EyeIcon from '@other-library/icons/EyeIcon'; import EyeIconOff from '@other-library/icons/EyeIconOff'; const MyComponent = () => { - const [values, setValues] = React.useState({ + const [values, setValues] = useState({ password: '', showPassword: false }); @@ -308,8 +307,7 @@ const App = () => { export default App; `, - customizationCode: `import React from 'react'; -import { Button } from '@nextui-org/react'; + customizationCode: `import { Button } from '@nextui-org/react'; import confetti from 'canvas-confetti'; const CustomButton = () => { From cb54ad8c1bc95c052584f9c8b2a59322d667410f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 04:59:12 +0900 Subject: [PATCH 02/13] docs: refactor guide --- apps/docs/content/docs/guide/getting-started.mdx | 6 ++---- apps/docs/content/docs/guide/nextui-plus-nextjs.mdx | 11 +++++------ 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/apps/docs/content/docs/guide/getting-started.mdx b/apps/docs/content/docs/guide/getting-started.mdx index cdf7c6033b..1d4153c835 100644 --- a/apps/docs/content/docs/guide/getting-started.mdx +++ b/apps/docs/content/docs/guide/getting-started.mdx @@ -37,8 +37,6 @@ For NextUI to work correctly, you need to set up the `NextUIProvider` at the roo Go to the root of your application and do this: ```jsx -import * as React from 'react'; - // 1. import `NextUIProvider` component import { NextUIProvider } from '@nextui-org/react'; @@ -75,7 +73,7 @@ export default MyApp; 2. Go to `pages/_document.js` or `pages/_document.tsx` (create if it doesn't exist) and add this: ```jsx -import React from 'react'; +import { Children } from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { CssBaseline } from '@nextui-org/react'; @@ -84,7 +82,7 @@ class MyDocument extends Document { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, - styles: React.Children.toArray([initialProps.styles]) + styles: Children.toArray([initialProps.styles]) }; } diff --git a/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx b/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx index fc8e9f3116..a68de12208 100644 --- a/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx +++ b/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx @@ -50,7 +50,7 @@ to create file `_document.js`. Then we add the following code to the file: ```jsx -import React from 'react'; +import { Children } from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import { CssBaseline } from '@nextui-org/react'; @@ -59,7 +59,7 @@ class MyDocument extends Document { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, - styles: React.Children.toArray([initialProps.styles]) + styles: Children.toArray([initialProps.styles]) }; } @@ -86,15 +86,14 @@ Here's an example of what your `_document.js` file should look like: { - const app = ReactDOM.renderToString(); + const app = renderToString(); const styles = CssBaseline.flush(); - const html = ReactDOM.renderToStaticMarkup( + const html = renderToStaticMarkup( {styles} From 077c4bf7b89b75f8faec78ef4993f4d215a49742 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:12:13 +0900 Subject: [PATCH 03/13] docs: refactor pagination --- apps/docs/content/components/pagination/color.ts | 4 ++-- apps/docs/content/components/pagination/dots.ts | 4 ++-- apps/docs/content/components/pagination/shadow.ts | 4 ++-- apps/docs/content/components/pagination/sizes.ts | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/docs/content/components/pagination/color.ts b/apps/docs/content/components/pagination/color.ts index d59507a255..4522d34cdc 100644 --- a/apps/docs/content/components/pagination/color.ts +++ b/apps/docs/content/components/pagination/color.ts @@ -1,8 +1,8 @@ -const App = `import React from "react"; +const App = `import { useState } from "react"; import { Pagination, Grid, Radio } from "@nextui-org/react"; export default function App() { - const [selectedColor, setSelectedColor] = React.useState("primary"); + const [selectedColor, setSelectedColor] = useState("primary"); const colors = [ "primary", "secondary", diff --git a/apps/docs/content/components/pagination/dots.ts b/apps/docs/content/components/pagination/dots.ts index e10bd68ca2..9c5eacb43b 100644 --- a/apps/docs/content/components/pagination/dots.ts +++ b/apps/docs/content/components/pagination/dots.ts @@ -1,8 +1,8 @@ -const App = `import React from "react"; +const App = `import { useState } from "react"; import { Pagination, Grid, Radio } from "@nextui-org/react"; export default function App() { - const [selectedSize, setSelectedSize] = React.useState("md"); + const [selectedSize, setSelectedSize] = useState("md"); const sizes = ["xs", "sm", "md", "lg", "xl"]; const capitalize = (str) => { const lower = str.toLowerCase(); diff --git a/apps/docs/content/components/pagination/shadow.ts b/apps/docs/content/components/pagination/shadow.ts index 81f54fb161..9165827bb8 100644 --- a/apps/docs/content/components/pagination/shadow.ts +++ b/apps/docs/content/components/pagination/shadow.ts @@ -1,8 +1,8 @@ -const App = `import React from "react"; +const App = `import { useState } from "react"; import { Pagination, Grid, Radio } from "@nextui-org/react"; export default function App() { - const [selectedColor, setSelectedColor] = React.useState("primary"); + const [selectedColor, setSelectedColor] = useState("primary"); const colors = ["primary", "secondary", "success", "warning", "error"]; const capitalize = (str) => { const lower = str.toLowerCase(); diff --git a/apps/docs/content/components/pagination/sizes.ts b/apps/docs/content/components/pagination/sizes.ts index 9881f523e8..2030b60e27 100644 --- a/apps/docs/content/components/pagination/sizes.ts +++ b/apps/docs/content/components/pagination/sizes.ts @@ -1,8 +1,8 @@ -const App = `import React from "react"; +const App = `import { useState } from "react"; import { Pagination, Grid, Radio } from "@nextui-org/react"; export default function App() { - const [selectedSize, setSelectedSize] = React.useState("md"); + const [selectedSize, setSelectedSize] = useState("md"); const sizes = ["xs", "sm", "md", "lg", "xl"]; const capitalize = (str) => { const lower = str.toLowerCase(); From ac49de38ce214dc977a0708082e6d36b59fdb21d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:21:58 +0900 Subject: [PATCH 04/13] docs: refactor table/input --- apps/docs/content/components/input/helper.ts | 4 ++-- apps/docs/content/components/table/colors.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/components/input/helper.ts b/apps/docs/content/components/input/helper.ts index 4711cab1d7..bf8e49e349 100644 --- a/apps/docs/content/components/input/helper.ts +++ b/apps/docs/content/components/input/helper.ts @@ -1,4 +1,4 @@ -const App = `import React from "react"; +const App = `import { useMemo } from "react"; import { Input, useInput, Grid } from "@nextui-org/react"; @@ -9,7 +9,7 @@ export default function App() { return value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i); }; - const helper = React.useMemo(() => { + const helper = useMemo(() => { if (!value) return { text: "", diff --git a/apps/docs/content/components/table/colors.ts b/apps/docs/content/components/table/colors.ts index c7fdac1780..748f154ff5 100644 --- a/apps/docs/content/components/table/colors.ts +++ b/apps/docs/content/components/table/colors.ts @@ -1,8 +1,8 @@ -const App = `import React from "react"; +const App = `import { useState } from "react"; import { Table, Grid, Radio } from "@nextui-org/react"; export default function App() { - const [selectedColor, setSelectedColor] = React.useState("primary"); + const [selectedColor, setSelectedColor] = useState("primary"); const colors = ["primary", "secondary", "success", "warning", "error"]; const capitalize = (str) => { const lower = str.toLowerCase(); From 046286a2e5e4a3813f91ceb9144e848d1934e042 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:22:04 +0900 Subject: [PATCH 05/13] docs: refactor checkbox --- .../components/checkbox-group/controlled-vs-uncontrolled.ts | 4 ++-- apps/docs/content/components/checkbox-group/events.ts | 4 ++-- .../content/components/checkbox/controlled-vs-uncontrolled.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts index 4fbd60cffa..e51ccfeea6 100644 --- a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts @@ -1,8 +1,8 @@ -const App = `import React from 'react' +const App = `import { useState } from 'react' import { Checkbox, Grid } from "@nextui-org/react"; export default function App() { - const [selected, setSelected] = React.useState(['buenos-aires', 'sydney']); + const [selected, setSelected] = useState(['buenos-aires', 'sydney']); return ( diff --git a/apps/docs/content/components/checkbox-group/events.ts b/apps/docs/content/components/checkbox-group/events.ts index b92a919cdb..48a6c0c5dd 100644 --- a/apps/docs/content/components/checkbox-group/events.ts +++ b/apps/docs/content/components/checkbox-group/events.ts @@ -1,8 +1,8 @@ -const App = `import React from 'react' +const App = `import { useState } from 'react' import { Checkbox, Text, Spacer } from "@nextui-org/react"; export default function App() { - const [selected, setSelected] = React.useState([]); + const [selected, setSelected] = useState([]); return ( <> diff --git a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts index 28c734c99d..238f39ea15 100644 --- a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts @@ -1,8 +1,8 @@ -const App = `import React from 'react' +const App = `import { useState } from 'react' import { Checkbox, Spacer } from "@nextui-org/react"; export default function App() { - const [selected, setSelected] = React.useState(true); + const [selected, setSelected] = useState(true); return ( <> From e05f2479400ec20751a4b9f51fa423c250506f31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:25:03 +0900 Subject: [PATCH 06/13] docs: refactor radio --- .../content/components/radio/controlled-vs-uncontrolled.ts | 4 ++-- apps/docs/content/components/radio/events.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts index 9d950850c7..ac33beae56 100644 --- a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts @@ -1,8 +1,8 @@ -const App = `import React from 'react' +const App = `import { useState } from 'react' import { Radio, Grid } from "@nextui-org/react"; export default function App() { - const [checked, setChecked] = React.useState('B'); + const [checked, setChecked] = useState('B'); return ( diff --git a/apps/docs/content/components/radio/events.ts b/apps/docs/content/components/radio/events.ts index 4a2572b43f..1e36664f52 100644 --- a/apps/docs/content/components/radio/events.ts +++ b/apps/docs/content/components/radio/events.ts @@ -1,8 +1,8 @@ -const App = `import React from 'react' +const App = `import { useState } from 'react' import { Radio, Text, Spacer } from "@nextui-org/react"; export default function App() { - const [checked, setChecked] = React.useState(''); + const [checked, setChecked] = useState(''); return ( <> From dabd822f1e2b85313b7fb1d6f66a250a5927ed4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:28:48 +0900 Subject: [PATCH 07/13] docs: refactor popover/tooltip --- .../components/popover/controlled-vs-uncontrolled.ts | 4 ++-- apps/docs/content/components/popover/custom-content.ts | 7 +++---- apps/docs/content/components/tooltip/customContent.ts | 7 +++---- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts b/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts index ac36109d4a..352783a64d 100644 --- a/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts @@ -1,8 +1,8 @@ -const App = `import React from 'react'; +const App = `import { useState } from 'react'; import { Popover, Button, Text, Grid } from "@nextui-org/react"; export default function App() { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); return ( diff --git a/apps/docs/content/components/popover/custom-content.ts b/apps/docs/content/components/popover/custom-content.ts index ab8093dadb..bf7ce51c64 100644 --- a/apps/docs/content/components/popover/custom-content.ts +++ b/apps/docs/content/components/popover/custom-content.ts @@ -1,5 +1,4 @@ -const DeleteUser = `import React from "react"; -import { Text, Button, Grid, Row } from "@nextui-org/react"; +const DeleteUser = `import { Text, Button, Grid, Row } from "@nextui-org/react"; export const DeleteUser = () => { return ( @@ -31,11 +30,11 @@ export const DeleteUser = () => { ); };`; -const UserTwitterCard = `import React from "react"; +const UserTwitterCard = `import { useState } from "react"; import { User, Row, Col, Text, Button, Spacer, Grid } from "@nextui-org/react"; export const UserTwitterCard = () => { - const [following, setFollowing] = React.useState(false); + const [following, setFollowing] = useState(false); return ( { return ( @@ -35,7 +34,7 @@ export const DeleteUser = () => { ); };`; -const UserTwitterCard = `import React from "react"; +const UserTwitterCard = `import { useState } from "react"; import { Avatar, Row, Col, Text, Button, Spacer, Grid } from "@nextui-org/react"; export const UserTwitterCard = ({ @@ -45,7 +44,7 @@ export const UserTwitterCard = ({ onClick, ...props }) => { - const [following, setFollowing] = React.useState(false); + const [following, setFollowing] = useState(false); return ( Date: Wed, 6 Jul 2022 05:35:46 +0900 Subject: [PATCH 08/13] docs: refactor dropdown --- apps/docs/content/components/dropdown/multiple-selection.ts | 6 +++--- apps/docs/content/components/dropdown/single-selection.ts | 6 +++--- apps/docs/content/components/dropdown/variants.ts | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/docs/content/components/dropdown/multiple-selection.ts b/apps/docs/content/components/dropdown/multiple-selection.ts index acc036b9a7..82fa436045 100644 --- a/apps/docs/content/components/dropdown/multiple-selection.ts +++ b/apps/docs/content/components/dropdown/multiple-selection.ts @@ -1,10 +1,10 @@ -const App = `import React from "react"; +const App = `import { useState, useMemo } from "react"; import { Dropdown } from "@nextui-org/react"; export default function App() { - const [selected, setSelected] = React.useState(new Set(["text"])); + const [selected, setSelected] = useState(new Set(["text"])); - const selectedValue = React.useMemo( + const selectedValue = useMemo( () => Array.from(selected).join(", ").replaceAll("_", " "), [selected] ); diff --git a/apps/docs/content/components/dropdown/single-selection.ts b/apps/docs/content/components/dropdown/single-selection.ts index 2689def82b..7024f5d3cd 100644 --- a/apps/docs/content/components/dropdown/single-selection.ts +++ b/apps/docs/content/components/dropdown/single-selection.ts @@ -1,10 +1,10 @@ -const App = `import React from "react"; +const App = `import { useState, useMemo } from "react"; import { Dropdown } from "@nextui-org/react"; export default function App() { - const [selected, setSelected] = React.useState(new Set(["text"])); + const [selected, setSelected] = useState(new Set(["text"])); - const selectedValue = React.useMemo( + const selectedValue = useMemo( () => Array.from(selected).join(", ").replaceAll("_", " "), [selected] ); diff --git a/apps/docs/content/components/dropdown/variants.ts b/apps/docs/content/components/dropdown/variants.ts index 036ec73eed..a0119b9f38 100644 --- a/apps/docs/content/components/dropdown/variants.ts +++ b/apps/docs/content/components/dropdown/variants.ts @@ -1,8 +1,8 @@ -const App = `import React from "react"; +const App = `import { useState } from "react"; import { Grid, Dropdown, Radio } from "@nextui-org/react"; export default function App() { - const [selectedColor, setSelectedColor] = React.useState("default"); + const [selectedColor, setSelectedColor] = useState("default"); const colors = [ "default", "primary", From a7192d41b2df90611f02b9e269a259ef51d4b503 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:43:48 +0900 Subject: [PATCH 09/13] docs: refactor modal --- apps/docs/content/components/modal/blurBackground.ts | 4 ++-- apps/docs/content/components/modal/default.ts | 4 ++-- apps/docs/content/components/modal/noAnimated.ts | 4 ++-- apps/docs/content/components/modal/preventClose.ts | 4 ++-- apps/docs/content/components/modal/withoutPadding.ts | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/docs/content/components/modal/blurBackground.ts b/apps/docs/content/components/modal/blurBackground.ts index cb0fd3bc7d..89d3ccfce6 100644 --- a/apps/docs/content/components/modal/blurBackground.ts +++ b/apps/docs/content/components/modal/blurBackground.ts @@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => { ); };`; -const AppJs = `import React from "react"; +const AppJs = `import { useState } from "react"; import { Modal, Input, Row, Checkbox, Button, Text } from "@nextui-org/react"; import { Mail } from "./Mail"; import { Password } from "./Password"; export default function App() { - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = useState(false); const handler = () => setVisible(true); const closeHandler = () => { setVisible(false); diff --git a/apps/docs/content/components/modal/default.ts b/apps/docs/content/components/modal/default.ts index 3d94e0c7fa..9c36d3e129 100644 --- a/apps/docs/content/components/modal/default.ts +++ b/apps/docs/content/components/modal/default.ts @@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => { ); };`; -const AppJs = `import React from "react"; +const AppJs = `import { useState } from "react"; import { Modal, Button, Text, Input, Row, Checkbox } from "@nextui-org/react"; import { Mail } from "./Mail"; import { Password } from "./Password"; export default function App() { - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = useState(false); const handler = () => setVisible(true); const closeHandler = () => { diff --git a/apps/docs/content/components/modal/noAnimated.ts b/apps/docs/content/components/modal/noAnimated.ts index 14fa5bd23e..88db8adda8 100644 --- a/apps/docs/content/components/modal/noAnimated.ts +++ b/apps/docs/content/components/modal/noAnimated.ts @@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => { ); };`; -const AppJs = `import React from "react"; +const AppJs = `import { useState } from "react"; import { Modal, Button, Text, Input, Row, Checkbox } from "@nextui-org/react"; import { Mail } from "./Mail"; import { Password } from "./Password"; export default function App() { - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = useState(false); const handler = () => setVisible(true); const closeHandler = () => { setVisible(false); diff --git a/apps/docs/content/components/modal/preventClose.ts b/apps/docs/content/components/modal/preventClose.ts index b34e14b76b..5e03946ed6 100644 --- a/apps/docs/content/components/modal/preventClose.ts +++ b/apps/docs/content/components/modal/preventClose.ts @@ -36,13 +36,13 @@ const Mail = `export const Mail = ({ fill, size, height, width, ...props }) => { ); };`; -const AppJs = `import React from "react"; +const AppJs = `import { useState } from "react"; import { Modal, Button, Text, Input, Row, Checkbox } from "@nextui-org/react"; import { Mail } from "./Mail"; import { Password } from "./Password"; export default function App() { - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = useState(false); const handler = () => setVisible(true); const closeHandler = () => { setVisible(false); diff --git a/apps/docs/content/components/modal/withoutPadding.ts b/apps/docs/content/components/modal/withoutPadding.ts index 5b21211587..1a7ee647f6 100644 --- a/apps/docs/content/components/modal/withoutPadding.ts +++ b/apps/docs/content/components/modal/withoutPadding.ts @@ -1,8 +1,8 @@ -const App = `import React from "react"; +const App = `import { useState } from "react"; import { Modal, Button, Image, Text, Link } from "@nextui-org/react"; export default function App() { - const [visible, setVisible] = React.useState(false); + const [visible, setVisible] = useState(false); const handler = () => setVisible(true); const closeHandler = () => { setVisible(false); From c66c94a764d837d04992a904e0551e062bc99bca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:59:26 +0900 Subject: [PATCH 10/13] docs: refactor grid --- apps/docs/content/components/grid/hideElement.ts | 9 +++++---- apps/docs/content/components/grid/responsive.ts | 9 +++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/apps/docs/content/components/grid/hideElement.ts b/apps/docs/content/components/grid/hideElement.ts index 7b386a1236..5a6edde224 100644 --- a/apps/docs/content/components/grid/hideElement.ts +++ b/apps/docs/content/components/grid/hideElement.ts @@ -1,16 +1,17 @@ -const useMediaQuery = `import React from 'react';\n +const useMediaQuery = `import { useState, useCallback, useEffect } from 'react'; export const useMediaQuery = (width)=> { - const [targetReached, setTargetReached] = React.useState(false); + const [targetReached, setTargetReached] = useState(false); - const updateTarget = React.useCallback((e) => { + const updateTarget = useCallback((e) => { if (e.matches) { setTargetReached(true); } else { setTargetReached(false); } }, []); - React.useEffect(() => { + + useEffect(() => { const media = window.matchMedia(\`(max-width: \${width}px)\`); media.addListener(updateTarget); diff --git a/apps/docs/content/components/grid/responsive.ts b/apps/docs/content/components/grid/responsive.ts index 1d3dc3fd3d..ebbad7052d 100644 --- a/apps/docs/content/components/grid/responsive.ts +++ b/apps/docs/content/components/grid/responsive.ts @@ -1,16 +1,17 @@ -const useMediaQuery = `import React from 'react';\n +const useMediaQuery = `import { useState, useCallback, useEffect } from 'react'; export const useMediaQuery = (width)=> { - const [targetReached, setTargetReached] = React.useState(false); + const [targetReached, setTargetReached] = useState(false); - const updateTarget = React.useCallback((e) => { + const updateTarget = useCallback((e) => { if (e.matches) { setTargetReached(true); } else { setTargetReached(false); } }, []); - React.useEffect(() => { + + useEffect(() => { const media = window.matchMedia(\`(max-width: \${width}px)\`); media.addListener(updateTarget); From 8a93e6e477de3c99bc0f76e6efb8d8ce90f863a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 05:59:55 +0900 Subject: [PATCH 11/13] docs: refactor etc --- .../textarea/controlledUncontrolled.ts | 4 ++-- apps/docs/content/docs/theme/dark-mode.mdx | 2 +- apps/docs/src/components/sandpack/entry.ts | 19 +++++++++---------- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/apps/docs/content/components/textarea/controlledUncontrolled.ts b/apps/docs/content/components/textarea/controlledUncontrolled.ts index b94a68891a..792fac8d3b 100644 --- a/apps/docs/content/components/textarea/controlledUncontrolled.ts +++ b/apps/docs/content/components/textarea/controlledUncontrolled.ts @@ -1,4 +1,4 @@ -const App = `import React from "react"; +const App = `import { useRef } from "react"; import { Textarea, Grid, useInput, Spacer, Button } from "@nextui-org/react"; export default function App() { @@ -11,7 +11,7 @@ export default function App() { } = useInput("Controlled Textarea"); // Uncontrolled - const textareaRef = React.useRef(null); + const textareaRef = useRef(null); const onClick = () => { if (textareaRef.current) { textareaRef.current.value = Math.random().toString(32); diff --git a/apps/docs/content/docs/theme/dark-mode.mdx b/apps/docs/content/docs/theme/dark-mode.mdx index 3736459d6e..ff0bb5019f 100644 --- a/apps/docs/content/docs/theme/dark-mode.mdx +++ b/apps/docs/content/docs/theme/dark-mode.mdx @@ -196,7 +196,7 @@ const darkTheme = createTheme({ // 3. Apply light or dark theme depending on localStorage and `getDocumentTheme` value // App.jsx entry point of your app -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { getDocumentTheme } from '@nextui-org/react' const Main = () => { diff --git a/apps/docs/src/components/sandpack/entry.ts b/apps/docs/src/components/sandpack/entry.ts index a3453328a5..92d17efb68 100644 --- a/apps/docs/src/components/sandpack/entry.ts +++ b/apps/docs/src/components/sandpack/entry.ts @@ -1,12 +1,11 @@ -export const entry = `import React, { StrictMode } from "react"; -import ReactDOM from "react-dom"; +export const entry = `import { StrictMode } from "react"; +import { render } from "react-dom"; import { NextUIProvider, Container } from '@nextui-org/react'; import App from "./App"; - const rootElement = document.getElementById("root"); -ReactDOM.render( +render( @@ -19,8 +18,8 @@ ReactDOM.render( `; export const lightThemeEntry = ` -import React, { StrictMode } from "react"; -import ReactDOM from "react-dom"; +import { StrictMode } from "react"; +import { render } from "react-dom"; import { NextUIProvider, createTheme, Container } from '@nextui-org/react'; import App from "./App"; @@ -30,7 +29,7 @@ const lightTheme = createTheme({ const rootElement = document.getElementById("root"); -ReactDOM.render( +render( @@ -43,8 +42,8 @@ ReactDOM.render( `; export const darkThemeEntry = ` -import React, { StrictMode } from "react"; -import ReactDOM from "react-dom"; +import { StrictMode } from "react"; +import { render } from "react-dom"; import { NextUIProvider, createTheme, Container, getDocumentTheme } from '@nextui-org/react'; import App from "./App"; @@ -54,7 +53,7 @@ const darkTheme = createTheme({ const rootElement = document.getElementById("root"); -ReactDOM.render( +render( From 736e580303afe3b432c6d15e0ab1fa731b73ea82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= Date: Wed, 6 Jul 2022 06:36:50 +0900 Subject: [PATCH 12/13] refactor: single -> double quote --- .../controlled-vs-uncontrolled.ts | 2 +- .../components/checkbox-group/events.ts | 2 +- .../checkbox/controlled-vs-uncontrolled.ts | 2 +- .../content/components/grid/hideElement.ts | 2 +- .../content/components/grid/responsive.ts | 2 +- .../popover/controlled-vs-uncontrolled.ts | 2 +- .../radio/controlled-vs-uncontrolled.ts | 2 +- apps/docs/content/components/radio/events.ts | 2 +- apps/docs/content/landing/index.tsx | 24 +++++++++---------- 9 files changed, 20 insertions(+), 20 deletions(-) diff --git a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts index e51ccfeea6..9b14aa83fe 100644 --- a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts @@ -1,4 +1,4 @@ -const App = `import { useState } from 'react' +const App = `import { useState } from "react"; import { Checkbox, Grid } from "@nextui-org/react"; export default function App() { diff --git a/apps/docs/content/components/checkbox-group/events.ts b/apps/docs/content/components/checkbox-group/events.ts index 48a6c0c5dd..5b45675e4d 100644 --- a/apps/docs/content/components/checkbox-group/events.ts +++ b/apps/docs/content/components/checkbox-group/events.ts @@ -1,4 +1,4 @@ -const App = `import { useState } from 'react' +const App = `import { useState } from "react"; import { Checkbox, Text, Spacer } from "@nextui-org/react"; export default function App() { diff --git a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts index 238f39ea15..a0b2e14b20 100644 --- a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts @@ -1,4 +1,4 @@ -const App = `import { useState } from 'react' +const App = `import { useState } from "react"; import { Checkbox, Spacer } from "@nextui-org/react"; export default function App() { diff --git a/apps/docs/content/components/grid/hideElement.ts b/apps/docs/content/components/grid/hideElement.ts index 5a6edde224..ec467cd07d 100644 --- a/apps/docs/content/components/grid/hideElement.ts +++ b/apps/docs/content/components/grid/hideElement.ts @@ -1,4 +1,4 @@ -const useMediaQuery = `import { useState, useCallback, useEffect } from 'react'; +const useMediaQuery = `import { useState, useCallback, useEffect } from "react"; export const useMediaQuery = (width)=> { const [targetReached, setTargetReached] = useState(false); diff --git a/apps/docs/content/components/grid/responsive.ts b/apps/docs/content/components/grid/responsive.ts index ebbad7052d..896b3c7a40 100644 --- a/apps/docs/content/components/grid/responsive.ts +++ b/apps/docs/content/components/grid/responsive.ts @@ -1,4 +1,4 @@ -const useMediaQuery = `import { useState, useCallback, useEffect } from 'react'; +const useMediaQuery = `import { useState, useCallback, useEffect } from "react"; export const useMediaQuery = (width)=> { const [targetReached, setTargetReached] = useState(false); diff --git a/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts b/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts index 352783a64d..db34c4ecf3 100644 --- a/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts @@ -1,4 +1,4 @@ -const App = `import { useState } from 'react'; +const App = `import { useState } from "react"; import { Popover, Button, Text, Grid } from "@nextui-org/react"; export default function App() { diff --git a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts index ac33beae56..55c6d3f180 100644 --- a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts +++ b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts @@ -1,4 +1,4 @@ -const App = `import { useState } from 'react' +const App = `import { useState } from "react"; import { Radio, Grid } from "@nextui-org/react"; export default function App() { diff --git a/apps/docs/content/components/radio/events.ts b/apps/docs/content/components/radio/events.ts index 1e36664f52..624c4c6318 100644 --- a/apps/docs/content/components/radio/events.ts +++ b/apps/docs/content/components/radio/events.ts @@ -1,4 +1,4 @@ -const App = `import { useState } from 'react' +const App = `import { useState } from "react"; import { Radio, Text, Spacer } from "@nextui-org/react"; export default function App() { diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx index 0a8a0be55d..b00b237de0 100644 --- a/apps/docs/content/landing/index.tsx +++ b/apps/docs/content/landing/index.tsx @@ -89,7 +89,7 @@ export default { icon: } ], - themingCode: `import { createTheme } from '@nextui-org/react'; + themingCode: `import { createTheme } from "@nextui-org/react"; const lightTheme = createTheme({ type: 'light', @@ -216,7 +216,7 @@ return ( `, comparativeCode: { - nextui: `import { Input } from '@nextui-org/react'; + nextui: `import { Input } from "@nextui-org/react"; const MyComponent = () => { return ( @@ -226,14 +226,14 @@ const MyComponent = () => { export default MyComponent `, - others: `import { useState } from 'react'; -import ButtonIcon from '@other-library/ButtonIcon'; -import InputOutlined from '@other-library/InputOutlined'; -import LabelInput from '@other-library/LabelInput'; -import AdornmentInput from '@other-library/AdornmentInput'; -import ControlForm from '@other-library/ControlForm'; -import EyeIcon from '@other-library/icons/EyeIcon'; -import EyeIconOff from '@other-library/icons/EyeIconOff'; + others: `import { useState } from "react"; +import ButtonIcon from "@other-library/ButtonIcon"; +import InputOutlined from "@other-library/InputOutlined"; +import LabelInput from "@other-library/LabelInput"; +import AdornmentInput from "@other-library/AdornmentInput"; +import ControlForm from "@other-library/ControlForm"; +import EyeIcon from "@other-library/icons/EyeIcon"; +import EyeIconOff from "@other-library/icons/EyeIconOff"; const MyComponent = () => { const [values, setValues] = useState({ @@ -307,8 +307,8 @@ const App = () => { export default App; `, - customizationCode: `import { Button } from '@nextui-org/react'; -import confetti from 'canvas-confetti'; + customizationCode: `import { Button } from "@nextui-org/react"; +import confetti from "canvas-confetti"; const CustomButton = () => { const handleConfetti = () => { From 390fcd5e07c6fe14525175f6bbcec3602e5f9ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=90=E1=85=A2=E1=84=8C=E1=85=A2=E1=84=8B=E1=85=A7?= =?UTF-8?q?=E1=86=BC?= Date: Mon, 29 Aug 2022 23:44:09 +0900 Subject: [PATCH 13/13] fix: react-live scope hooks --- .../docs/src/components/playground/dynamic-live.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx index 5761a333a1..9ad91df42a 100644 --- a/apps/docs/src/components/playground/dynamic-live.tsx +++ b/apps/docs/src/components/playground/dynamic-live.tsx @@ -1,4 +1,10 @@ -import React, {useRef, useState, useEffect} from "react"; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; import {LivePreview, LiveProvider, LiveError} from "react-live"; import NextLink from "next/link"; import {useMediaQuery} from "@hooks/use-media-query"; @@ -197,6 +203,11 @@ export const scope = { Palette, useMediaQuery, validateEmail, + useCallback, + useEffect, + useMemo, + useRef, + useState, }; const MIN_WIDTH = 400;