From 297248b034c77f008b125c704af5ae93a7aeaf49 Mon Sep 17 00:00:00 2001 From: Vadym Kravchenko Date: Fri, 6 Dec 2024 03:52:06 +0100 Subject: [PATCH] Fix spacing in docs, remove react warnings (#607) --- .../components/accordion/docs/codeUsage.js | 47 +++-- docs/app/docs/components/button/page.js | 30 +-- .../docs/components/callout/docs/codeUsage.js | 30 +-- docs/app/docs/components/callout/page.js | 39 ++-- docs/app/docs/components/card/page.js | 47 +++-- docs/app/docs/components/code/page.js | 29 ++- .../app/docs/components/kbd/docs/codeUsage.js | 17 +- .../components/progress/docs/codeUsage.js | 22 +-- .../docs/components/switch/docs/codeUsage.js | 13 +- .../toggle-group/ToggleGroupWrapper.js | 46 ++--- .../components/toggle-group/docs/codeUsage.js | 41 +++-- .../docs/components/toggle/ToggleWrapper.js | 30 +-- .../docs/components/toggle/docs/codeUsage.js | 28 +-- docs/app/docs/docsIndex.js | 73 ++++---- docs/app/docs/first-steps/usage/page.js | 35 ++-- docs/app/docs/layout.tsx | 18 +- docs/app/landingComponents/AddToCartDemo.js | 26 ++- .../landingComponents/MusicAppPlayerDemo.js | 111 ++++++----- docs/app/landingComponents/ToolbarDemo.js | 54 +++--- .../landingComponents/TrafficAnalyticsDemo.js | 30 ++- docs/components/Copy.js | 34 ++-- docs/components/Main/Main.js | 174 +++++++++--------- .../layout/Documentation/Documentation.js | 65 +++---- .../layout/Documentation/helpers/CodeBlock.js | 75 ++++---- docs/icons/Disc.js | 6 +- docs/icons/Home.js | 6 +- docs/icons/Play.js | 6 +- docs/icons/RightArrow.js | 6 +- docs/icons/Rocket.js | 6 +- docs/icons/Rows.js | 9 +- docs/icons/TrackNext.js | 8 +- docs/icons/TrackPrevious.js | 12 +- .../ui/Callout/stories/Callout.stories.js | 2 +- .../ui/Toggle/stories/Toggle.stories.js | 2 +- .../stories/ToggleGroup.stories.js | 8 +- 35 files changed, 570 insertions(+), 615 deletions(-) diff --git a/docs/app/docs/components/accordion/docs/codeUsage.js b/docs/app/docs/components/accordion/docs/codeUsage.js index f96552b0..fe738e97 100644 --- a/docs/app/docs/components/accordion/docs/codeUsage.js +++ b/docs/app/docs/components/accordion/docs/codeUsage.js @@ -1,31 +1,28 @@ const code = { javascript: { - code: `import Accordion from "@radui/ui/Accordion" + code: ` +import Accordion from "@radui/ui/Accordion"; -const AccordionExample = () => { let items = [ - { - title: "React", - content: "React is a JavaScript library for building user interfaces." - }, - { - title: "Angular", - content: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript." - }, - { - title: "Vue", - content: "Vue.js is a progressive framework for building user interfaces." - }, - - + { + title: "React", + content: "React is a JavaScript library for building user interfaces." + }, + { + title: "Angular", + content: "Angular is a platform and framework for building single-page client applications using HTML and TypeScript." + }, + { + title: "Vue", + content: "Vue.js is a progressive framework for building user interfaces." + } ] -return
- - -
- - } +export const AccordionExample = () => ( +
+ +
+) ` }, scss: { @@ -79,7 +76,7 @@ return
} } }` - }, -} + } +}; -export default code; \ No newline at end of file +export default code; diff --git a/docs/app/docs/components/button/page.js b/docs/app/docs/components/button/page.js index 1284e8f6..2fb4f160 100644 --- a/docs/app/docs/components/button/page.js +++ b/docs/app/docs/components/button/page.js @@ -1,30 +1,30 @@ -const PAGE_NAME = 'BADGE_DOCS' -import Documentation from "@/components/layout/Documentation/Documentation" +import Documentation from '@/components/layout/Documentation/Documentation'; +import Button from '@radui/ui/Button'; +import SEO from '../../docsIndex'; +import codeUsage from './docs/codeUsage'; +const PAGE_NAME = 'BUTTON_DOCS'; -import Button from "@radui/ui/Button" -import SEO from "../../docsIndex" -export const metadata = SEO.getMetadata(PAGE_NAME) - -import codeUsage from "./docs/codeUsage" +export const metadata = SEO.getMetadata(PAGE_NAME); const Arrow = () => { - return -} + return ; +}; -const AvatarDocs = () => { +const ButtonDocs = () => { return
- -
+
-
-} +
; +}; -export default AvatarDocs; \ No newline at end of file +export default ButtonDocs; diff --git a/docs/app/docs/components/callout/docs/codeUsage.js b/docs/app/docs/components/callout/docs/codeUsage.js index 049125dc..d1434c66 100644 --- a/docs/app/docs/components/callout/docs/codeUsage.js +++ b/docs/app/docs/components/callout/docs/codeUsage.js @@ -1,15 +1,23 @@ const code = { javascript: { - code: ` + code: ` +import Callout from "@radui/ui/Callout"; +import Text from "@radui/ui/Text"; + +const CalloutExample = () => ( +
- -
- Error - Something went wrong. Please try again later. -
+ + +
+ Error + Something went wrong. Please try again later. +
- -`}, + +) +` + }, scss: { code: `.rad-ui-callout { padding:16px; @@ -22,7 +30,7 @@ const code = { font-size: 14px; gap:8px; }` - }, -} + } +}; -export default code; \ No newline at end of file +export default code; diff --git a/docs/app/docs/components/callout/page.js b/docs/app/docs/components/callout/page.js index a4b5932e..296154c9 100644 --- a/docs/app/docs/components/callout/page.js +++ b/docs/app/docs/components/callout/page.js @@ -1,38 +1,37 @@ -const PAGE_NAME = 'Card' -import Documentation from "@/components/layout/Documentation/Documentation" +import Documentation from '@/components/layout/Documentation/Documentation'; +import Callout from '@radui/ui/Callout'; +import Text from '@radui/ui/Text'; +import SEO from '../../docsIndex'; +import codeUsage from './docs/codeUsage'; +const PAGE_NAME = 'Callout'; -import Callout from "@radui/ui/Callout" -import Text from "@radui/ui/Text" -import Avatar from "@radui/ui/Avatar" -import SEO from "../../docsIndex" -export const metadata = SEO.getMetadata(PAGE_NAME) +export const metadata = SEO.getMetadata(PAGE_NAME); -import codeUsage from "./docs/codeUsage" - -const Arrow = () => { - return -} +const BookmarkIcon = () => { + return ; +}; const CalloutDocs = () => { return
- - +
- + +
Error Something went wrong. Please try again later.
- + - -
-} +
; +}; -export default CalloutDocs; \ No newline at end of file +export default CalloutDocs; diff --git a/docs/app/docs/components/card/page.js b/docs/app/docs/components/card/page.js index 3a7533b2..92d65eb0 100644 --- a/docs/app/docs/components/card/page.js +++ b/docs/app/docs/components/card/page.js @@ -1,39 +1,34 @@ -const PAGE_NAME = 'Card' -import Documentation from "@/components/layout/Documentation/Documentation" +import Documentation from '@/components/layout/Documentation/Documentation'; +import Card from '@radui/ui/Card'; +import Avatar from '@radui/ui/Avatar'; +import SEO from '../../docsIndex'; -import Card from "@radui/ui/Card" -import Avatar from "@radui/ui/Avatar" -import SEO from "../../docsIndex" -export const metadata = SEO.getMetadata(PAGE_NAME) +import codeUsage from './docs/codeUsage'; +const PAGE_NAME = 'Card'; +export const metadata = SEO.getMetadata(PAGE_NAME); -import codeUsage from "./docs/codeUsage" - -const Arrow = () => { - return -} - -const AvatarDocs = () => { +const CardDocs = () => { return
- - -
-
- Peter Kowalsky -
-
- Content Engineer -
+ +
+
+ Peter Kowalsky +
+
+ Content Engineer +
- -
-} +
; +}; -export default AvatarDocs; \ No newline at end of file +export default CardDocs; diff --git a/docs/app/docs/components/code/page.js b/docs/app/docs/components/code/page.js index 203c4727..d3ecee34 100644 --- a/docs/app/docs/components/code/page.js +++ b/docs/app/docs/components/code/page.js @@ -1,20 +1,15 @@ -const PAGE_NAME = 'BADGE_DOCS' -import Documentation from "@/components/layout/Documentation/Documentation" +import Documentation from '@/components/layout/Documentation/Documentation'; +import Code from '@radui/ui/Code'; +import SEO from '../../docsIndex'; +import codeUsage from './docs/codeUsage'; +const PAGE_NAME = 'CODE_DOCS'; +export const metadata = SEO.getMetadata(PAGE_NAME); -import Code from "@radui/ui/Code" -import SEO from "../../docsIndex" -export const metadata = SEO.getMetadata(PAGE_NAME) - -import codeUsage from "./docs/codeUsage" - -const Arrow = () => { - return -} - -const AvatarDocs = () => { +const CodeDocs = () => { return
- @@ -24,7 +19,7 @@ const AvatarDocs = () => { -
-} + ; +}; -export default AvatarDocs; \ No newline at end of file +export default CodeDocs; diff --git a/docs/app/docs/components/kbd/docs/codeUsage.js b/docs/app/docs/components/kbd/docs/codeUsage.js index c357f2a5..fedc6f30 100644 --- a/docs/app/docs/components/kbd/docs/codeUsage.js +++ b/docs/app/docs/components/kbd/docs/codeUsage.js @@ -1,12 +1,11 @@ const code = { javascript: { - code: `import Kbd from "@radui/ui/Kbd" + code: `import Kbd from "@radui/ui/Kbd"; -const KbdExample = () => { - return Ctrl + C -} - -Ctrl + C` +const KbdExample = () => ( + Ctrl + C +) +` }, css: { code: `.rad-ui-kbd{ @@ -24,7 +23,7 @@ const KbdExample = () => { box-shadow: 0px 0px 3px 1px var(--rad-ui-color-gray-400); padding: 4px 8px; }` - }, -} + } +}; -export default code; \ No newline at end of file +export default code; diff --git a/docs/app/docs/components/progress/docs/codeUsage.js b/docs/app/docs/components/progress/docs/codeUsage.js index 5b3f2c5b..816598cc 100644 --- a/docs/app/docs/components/progress/docs/codeUsage.js +++ b/docs/app/docs/components/progress/docs/codeUsage.js @@ -1,14 +1,14 @@ const code = { javascript: { - code: `import Progress from "@radui/ui/Progress" + code: ` +import Progress from "@radui/ui/Progress"; -const ProgressExample = () => { - return
- -
-} - -Ctrl + C` +const ProgressExample = () => ( +
+ +
+) +` }, css: { code: `.rad-ui-progress { @@ -25,7 +25,7 @@ const ProgressExample = () => { border-radius: 8px; transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1); }` - }, -} + } +}; -export default code; \ No newline at end of file +export default code; diff --git a/docs/app/docs/components/switch/docs/codeUsage.js b/docs/app/docs/components/switch/docs/codeUsage.js index c9b39e18..20859131 100644 --- a/docs/app/docs/components/switch/docs/codeUsage.js +++ b/docs/app/docs/components/switch/docs/codeUsage.js @@ -1,12 +1,13 @@ const code = { javascript: { - code: `import Switch from "@radui/ui/Switch" + code: ` +import Switch from "@radui/ui/Switch" const SwitchExample = () => (
- +
- )` +)` }, scss: { code: `/** Switch */ @@ -55,7 +56,7 @@ const SwitchExample = () => ( } }` - }, -} + } +}; -export default code; \ No newline at end of file +export default code; diff --git a/docs/app/docs/components/toggle-group/ToggleGroupWrapper.js b/docs/app/docs/components/toggle-group/ToggleGroupWrapper.js index 028c8bac..4e9962f8 100644 --- a/docs/app/docs/components/toggle-group/ToggleGroupWrapper.js +++ b/docs/app/docs/components/toggle-group/ToggleGroupWrapper.js @@ -1,46 +1,46 @@ -"use client" +'use client'; import React from 'react'; -import ToggleGroup from '@radui/ui/ToggleGroup' +import ToggleGroup from '@radui/ui/ToggleGroup'; const FrameIcon = () => { - return ; + return ; }; const CropIcon = () => { - return ; + return ; }; const LayersIcon = () => { - return ; + return ; }; const ColumnsIcon = () => { - return ; + return ; }; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args const items = [ - {label: , value: 'item1'}, - {label: , value: 'item2'}, - {label: , value: 'item3'}, - {label: , value: 'item4'}, + { label: , value: 'item1' }, + { label: , value: 'item2' }, + { label: , value: 'item3' }, + { label: , value: 'item4' } ]; -const ToggleGroupWrapper = ()=>{ - const handleChange = (newPressed)=>{ - console.log(newPressed) - } +const ToggleGroupWrapper = () => { + const handleChange = (newPressed) => { + console.log(newPressed); + }; return
- + -
-} + ; +}; -export default ToggleGroupWrapper; \ No newline at end of file +export default ToggleGroupWrapper; diff --git a/docs/app/docs/components/toggle-group/docs/codeUsage.js b/docs/app/docs/components/toggle-group/docs/codeUsage.js index 0b930f5d..c446978c 100644 --- a/docs/app/docs/components/toggle-group/docs/codeUsage.js +++ b/docs/app/docs/components/toggle-group/docs/codeUsage.js @@ -1,25 +1,28 @@ const code = { javascript: { - code: `import ToggleGroup from '@radui/ui/ToggleGroup' - + code: ` +import ToggleGroup from "@radui/ui/ToggleGroup"; const items = [ - {label: , value: 'item1'}, - {label: , value: 'item2'}, - {label: , value: 'item3'}, - {label: , value: 'item4'}, + { label: , value: 'item1' }, + { label: , value: 'item2' }, + { label: , value: 'item3' }, + { label: , value: 'item4' } ]; -const ToggleGroupWrapper = ()=>{ - const handleChange = (newPressed)=>{ - console.log(newPressed) - } - - return +const ToggleGroupWrapper = () => { + const handleChange = (newPressed) => { + console.log(newPressed) + } + + return ( + + ) }` }, css: { @@ -54,7 +57,7 @@ const ToggleGroupWrapper = ()=>{ } } }` - }, -} + } +}; -export default code; \ No newline at end of file +export default code; diff --git a/docs/app/docs/components/toggle/ToggleWrapper.js b/docs/app/docs/components/toggle/ToggleWrapper.js index 54fd5d1a..24b04e25 100644 --- a/docs/app/docs/components/toggle/ToggleWrapper.js +++ b/docs/app/docs/components/toggle/ToggleWrapper.js @@ -1,22 +1,22 @@ -'use client' +'use client'; -import React from 'react' +import React from 'react'; -import Toggle from '@radui/ui/Toggle' +import Toggle from '@radui/ui/Toggle'; -const ToggleWrapper = ()=>{ - const [pressed, setPressed] = React.useState(false) +const ToggleWrapper = () => { + const [pressed, setPressed] = React.useState(false); - const Icon = ()=>{ - return - } + const Icon = () => { + return ; + }; - const handleChange = (newPressed)=>{ - setPressed(newPressed) - } + const handleChange = (newPressed) => { + setPressed(newPressed); + }; return - - -} + + ; +}; -export default ToggleWrapper; \ No newline at end of file +export default ToggleWrapper; diff --git a/docs/app/docs/components/toggle/docs/codeUsage.js b/docs/app/docs/components/toggle/docs/codeUsage.js index c2cbe7c4..cc712957 100644 --- a/docs/app/docs/components/toggle/docs/codeUsage.js +++ b/docs/app/docs/components/toggle/docs/codeUsage.js @@ -1,16 +1,20 @@ const code = { javascript: { - code: `import Toggle from '@radui/ui/Toggle'" + code: ` +import Toggle from "@radui/ui/Toggle"; -const ToggleExample = ()=>{ - const [pressed, setPressed] = React.useState(false) +const ToggleExample = () => { + const [pressed, setPressed] = React.useState(false) - const handleChange = (newPressed)=>{ - setPressed(newPressed) - } - return - - + const handleChange = (newPressed) => { + setPressed(newPressed) + } + + return ( + + + + ) }` }, css: { @@ -40,7 +44,7 @@ const ToggleExample = ()=>{ } } ` - }, -} + } +}; -export default code; \ No newline at end of file +export default code; diff --git a/docs/app/docs/docsIndex.js b/docs/app/docs/docsIndex.js index abbc8f4c..65fe70ab 100644 --- a/docs/app/docs/docsIndex.js +++ b/docs/app/docs/docsIndex.js @@ -1,62 +1,61 @@ -const POSTFIX = " | Rad UI"; +const POSTFIX = ' | Rad UI'; const DOCS_SEO = { - "INTRODUCTION": { + INTRODUCTION: { title: `Introduction${POSTFIX}`, - basic_title: "Introduction", - next: "INSTALLATION", + basic_title: 'Introduction', + next: 'INSTALLATION', previous: null, - description: `It's super easy to get started with Rad UI. You can install it using npm or yarn.`, - url: "/docs/first-steps/introduction" + description: 'It\'s super easy to get started with Rad UI. You can install it using npm or yarn.', + url: '/docs/first-steps/introduction' }, - "INSTALLATION": { + INSTALLATION: { title: `Installation${POSTFIX}`, - basic_title: "Installation", - next: "USAGE", - previous: "INTRODUCTION", - description: `It's super easy to get started with Rad UI. You can install it using npm or yarn.`, - url: "/docs/first-steps/installation" + basic_title: 'Installation', + next: 'USAGE', + previous: 'INTRODUCTION', + description: 'It\'s super easy to get started with Rad UI. You can install it using npm or yarn.', + url: '/docs/first-steps/installation' }, - "USAGE": { + USAGE: { title: `Usage${POSTFIX}`, - basic_title: "Usage", - next: "ACCESSIBILITY", - previous: "INSTALLATION", - description: `It's super easy to get started with Rad UI. You can install it using npm or yarn.`, - url: "/docs/first-steps/usage" + basic_title: 'Usage', + next: 'ACCESSIBILITY', + previous: 'INSTALLATION', + description: 'It\'s super easy to get started with Rad UI. You can install it using npm or yarn.', + url: '/docs/first-steps/usage' }, - "ACCESSIBILITY": { + ACCESSIBILITY: { title: `Accessibility${POSTFIX}`, - basic_title: "Accessibility", + basic_title: 'Accessibility', next: null, - previous: "USAGE", - description: `It's super easy to get started with Rad UI. You can install it using npm or yarn.`, - url: "/docs/principles/accessibility" + previous: 'USAGE', + description: 'It\'s super easy to get started with Rad UI. You can install it using npm or yarn.', + url: '/docs/principles/accessibility' }, - "AVATAR_DOCS": { + AVATAR_DOCS: { title: `Avatar Documentation ${POSTFIX}`, - basic_title: "Avatar", + basic_title: 'Avatar', next: null, previous: null, - description: `It's super easy to get started with Rad UI. You can install it using npm or yarn.`, - url: "/docs/components/avatar" - }, -} + description: 'It\'s super easy to get started with Rad UI. You can install it using npm or yarn.', + url: '/docs/components/avatar' + } +}; DOCS_SEO.getMetadata = (pageName) => { - return DOCS_SEO[pageName] -} + return DOCS_SEO[pageName]; +}; DOCS_SEO.getNext = (pageName) => { const nextPageConstant = DOCS_SEO[pageName]?.next || null; - return DOCS_SEO[nextPageConstant] -} + return DOCS_SEO[nextPageConstant]; +}; DOCS_SEO.getPrevious = (pageName) => { - const nextPageConstant = DOCS_SEO[pageName]?.previous || null; - return DOCS_SEO[nextPageConstant] -} + return DOCS_SEO[nextPageConstant]; +}; -export default DOCS_SEO; \ No newline at end of file +export default DOCS_SEO; diff --git a/docs/app/docs/first-steps/usage/page.js b/docs/app/docs/first-steps/usage/page.js index 8bd3d6a5..f007fad4 100644 --- a/docs/app/docs/first-steps/usage/page.js +++ b/docs/app/docs/first-steps/usage/page.js @@ -1,16 +1,13 @@ -const PAGE_NAME = 'USAGE' +import Documentation from '@/components/layout/Documentation/Documentation'; -import Documentation from "@/components/layout/Documentation/Documentation" - - -import Text from "@radui/ui/Text" -import Heading from "@radui/ui/Heading" -import Link from "@radui/ui/Link" - -import SEO from "../../docsIndex" -export const metadata = SEO.getMetadata(PAGE_NAME) +import Text from '@radui/ui/Text'; +import Heading from '@radui/ui/Heading'; +import Link from '@radui/ui/Link'; +import SEO from '../../docsIndex'; +const PAGE_NAME = 'USAGE'; +export const metadata = SEO.getMetadata(PAGE_NAME); const Usage = () => { return @@ -33,14 +30,14 @@ export default MyButtonComponent - Rad UI is headless, meaning it doesn't come with any styles. But we do ship a default theme that you can use to get quickly started off the ground. + Rad UI is headless, meaning it doesn't come with any styles. But we do ship a default theme that you can use to get quickly started off the ground. - {`import "@radui/ui/themes/default.css";`} + {'import "@radui/ui/themes/default.css";'} - If you need the default theme and would like to plugin Rad UI tokens into your tailwind project. You can import default presets that you can directly use. + If you need the default theme and would like to plugin Rad UI tokens into your tailwind project. You can import default presets that you can directly use. {` // tailwind.config.js @@ -53,17 +50,13 @@ const config = { }, plugins: [], }; + export default config; `} + ; +}; - - - - - -} - -export default Usage \ No newline at end of file +export default Usage; diff --git a/docs/app/docs/layout.tsx b/docs/app/docs/layout.tsx index d2290e1e..033cbd51 100644 --- a/docs/app/docs/layout.tsx +++ b/docs/app/docs/layout.tsx @@ -1,15 +1,12 @@ -import Navigation from "@/components/navigation/Navigation" -import Callout from "@radui/ui/Callout" -import Link from "@radui/ui/Link" +import Navigation from '@/components/navigation/Navigation'; +import Callout from '@radui/ui/Callout'; +import Link from '@radui/ui/Link'; const InfoIcon = () => { - return (); + return (); }; const Layout = ({ children }: any) => { - - - return (
@@ -27,8 +24,7 @@ const Layout = ({ children }: any) => {
- ) -} - + ); +}; -export default Layout \ No newline at end of file +export default Layout; diff --git a/docs/app/landingComponents/AddToCartDemo.js b/docs/app/landingComponents/AddToCartDemo.js index 13186501..874850d1 100644 --- a/docs/app/landingComponents/AddToCartDemo.js +++ b/docs/app/landingComponents/AddToCartDemo.js @@ -1,21 +1,19 @@ -"use client" +'use client'; - -import Text from "@radui/ui/Text" -import Heading from "@radui/ui/Heading" -import Badge from "@radui/ui/Badge" -import Button from "@radui/ui/Button" +import Text from '@radui/ui/Text'; +import Heading from '@radui/ui/Heading'; +import Badge from '@radui/ui/Badge'; +import Button from '@radui/ui/Button'; const HeartIcon = () => { - return -} + return ; +}; const IconContainer = ({ children }) => { return {children} - -} - + ; +}; const AddToCartDemo = () => { return
@@ -39,7 +37,7 @@ const AddToCartDemo = () => {
- -} + ; +}; -export default AddToCartDemo \ No newline at end of file +export default AddToCartDemo; diff --git a/docs/app/landingComponents/MusicAppPlayerDemo.js b/docs/app/landingComponents/MusicAppPlayerDemo.js index 7fad4039..351e51d2 100644 --- a/docs/app/landingComponents/MusicAppPlayerDemo.js +++ b/docs/app/landingComponents/MusicAppPlayerDemo.js @@ -1,73 +1,68 @@ -"use client" +'use client'; - - -import Button from "@radui/ui/Button" -import Heading from "@radui/ui/Heading" -import Text from "@radui/ui/Text" +import Button from '@radui/ui/Button'; +import Heading from '@radui/ui/Heading'; +import Text from '@radui/ui/Text'; const LeftArrow = () => { - return -} + return ; +}; const ShuffleIcon = () => { - return -} + return ; +}; const ThreeDots = () => { - return -} + return ; +}; const MusicBars = ({ index }) => { - const randomHeight = Math.floor(Math.random() * 100) + 1; - return
-} - + const randomHeight = Math.floor(Math.random() * 100) + 1; + return
; +}; const MusicAppPlayerDemo = () => { - return
-
-
-
-
- -
-
-
- - -
-
-
- -
+ return
+
+
+
+
+ +
+
+
+ + +
+
+
+ +
+ + +
+ Won't Bite + Doja Cat +
+
+ 02:22 +
+ { + // 25 bars + Array.from(Array(25)).map((_, i) => { + return ; + }) + + } +
+ 0:19 +
+ +
- -
- Won't Bite - Doja Cat -
-
- 02:22 -
- { - // 25 bars - Array.from(Array(25)).map((_, i) => { - return - }) - - }
- 0:19 -
-
+
; +}; - -
-
-
- -} - -export default MusicAppPlayerDemo; \ No newline at end of file +export default MusicAppPlayerDemo; diff --git a/docs/app/landingComponents/ToolbarDemo.js b/docs/app/landingComponents/ToolbarDemo.js index 14fad7d0..704e1830 100644 --- a/docs/app/landingComponents/ToolbarDemo.js +++ b/docs/app/landingComponents/ToolbarDemo.js @@ -1,56 +1,52 @@ -"use client" - - - -import Separator from "@radui/ui/Separator" +'use client'; +import Separator from '@radui/ui/Separator'; const FontItalic = () => { - return -} + return ; +}; const BoldIcon = () => { - return -} + return ; +}; const LeftAlignIcon = () => { - return -} + return ; +}; const CenterAlignIcon = () => { - return -} + return ; +}; const RightAlignIcon = () => { - return -} + return ; +}; const JustifyAlignIcon = () => { - return -} + return ; +}; const LetterSpacingIcon = () => { - return -} + return ; +}; const AlignBaselineIcon = () => { - return -} + return ; +}; const FontSizeIcon = () => { - return -} + return ; +}; const FontFamilyIcon = () => { - return -} - + return ; +}; const IconContainer = ({ children }) => { return {children} - -} + ; +}; const ToolbarDemo = () => (
@@ -100,4 +96,4 @@ const ToolbarDemo = () => (
); -export default ToolbarDemo; \ No newline at end of file +export default ToolbarDemo; diff --git a/docs/app/landingComponents/TrafficAnalyticsDemo.js b/docs/app/landingComponents/TrafficAnalyticsDemo.js index 3cc90381..45ada624 100644 --- a/docs/app/landingComponents/TrafficAnalyticsDemo.js +++ b/docs/app/landingComponents/TrafficAnalyticsDemo.js @@ -1,21 +1,18 @@ -"use client" +'use client'; - - -import Text from "@radui/ui/Text" -import Link from "@radui/ui/Link" -import Separator from "@radui/ui/Separator" +import Text from '@radui/ui/Text'; +import Link from '@radui/ui/Link'; +import Separator from '@radui/ui/Separator'; const LockIcon = () => { - return -} + return ; +}; const AnalyticsBar = ({ index }) => { - let randomHeight = Math.floor(Math.random() * 100) + 1; - - return
-} + const randomHeight = Math.floor(Math.random() * 100) + 1; + return
; +}; const TrafficAnalyticsDemo = () => { return
@@ -43,14 +40,13 @@ const TrafficAnalyticsDemo = () => {
{ Array.from(Array(25)).map((_, i) => { - return + return ; }) }
+
; +}; -
-} - -export default TrafficAnalyticsDemo \ No newline at end of file +export default TrafficAnalyticsDemo; diff --git a/docs/components/Copy.js b/docs/components/Copy.js index 1d4f6546..f8adb8ee 100644 --- a/docs/components/Copy.js +++ b/docs/components/Copy.js @@ -1,15 +1,13 @@ -"use client"; -import { useState,useEffect } from "react" - +'use client'; +import { useState, useEffect } from 'react'; function Copy({ children }) { - const [isCopied, setIsCopied] = useState(false) + const [isCopied, setIsCopied] = useState(false); const handleCopy = () => { - navigator.clipboard.writeText(children) - setIsCopied(true) - - } + navigator.clipboard.writeText(children); + setIsCopied(true); + }; useEffect(() => { let timeout; @@ -22,24 +20,24 @@ function Copy({ children }) { }, [isCopied]); const TickIcon = () => { - return + return ; }; - + const CopyIcon = () => { - return - } + return ; + }; - return( + return ( {children} - - - ) + + ); } -export default Copy \ No newline at end of file +export default Copy; diff --git a/docs/components/Main/Main.js b/docs/components/Main/Main.js index 6c45c9e1..7d5a2436 100644 --- a/docs/components/Main/Main.js +++ b/docs/components/Main/Main.js @@ -1,98 +1,92 @@ -"use client" -import Theme from "@/components/layout/Theme" -import { useEffect, useState } from 'react' -import { parseCookies, setCookie, destroyCookie } from 'nookies' -import Button from "@radui/ui/Button" +'use client'; +import Theme from '@/components/layout/Theme'; +import { useCallback, useState } from 'react'; +import { parseCookies, setCookie } from 'nookies'; +import Button from '@radui/ui/Button'; +const DiscordLogo = () => { + return ; +}; -const MainLayout = ({ darkModeSsrValue, children }) => { - const cookies = parseCookies() - const [darkMode, setDarkMode] = useState(darkModeSsrValue === "true" ? true : false) - const toggleDarkMode = () => { - const toggledState = !darkMode - setDarkMode(toggledState) - - setCookie(cookies, 'darkMode', toggledState, { - maxAge: 30 * 24 * 60 * 60, - path: '/', - }) - } - - const openDiscordInvite = () => { - window.open('https://discord.gg/nMaQfeEPNp', "_blank") - } - - const openGithubLink = () => { - window.open('https://github.com/rad-ui/ui', "_blank") - } +const GithubLogo = () => { + return ; +}; - const DiscordLogo = () => { - return - } - - const GithubLogo = () => { - return - } - - const RadUILogo = () => { +const RadUILogo = () => { return - - - - - - } - - const SunIcon = () => { - return - } + + + + + ; +}; - const MoonIcon = () => { - return - } +const SunIcon = () => { + return ; +}; - return ( - -
- {/* Navbar start */} -
+const MoonIcon = () => { + return ; +}; -
- - - - -
-
- - - - - -
- -
- {/* Navbar end */} -
- {children} -
-
- - - - ); -} +const MainLayout = ({ darkModeSsrValue, children }) => { + const cookies = parseCookies(); + const [darkMode, setDarkMode] = useState(darkModeSsrValue === 'true'); + const toggleDarkMode = () => { + const toggledState = !darkMode; + setDarkMode(toggledState); + + setCookie(cookies, 'darkMode', toggledState, { + maxAge: 30 * 24 * 60 * 60, + path: '/' + }); + }; + + const openLink = useCallback((url) => () => { + window.open(url, '_blank'); + }, []); + + return ( + +
+ {/* Navbar start */} +
+ +
+ + + + +
+
+ + + + + +
+ +
+ {/* Navbar end */} +
+ {children} +
+
+ + + ); +}; export default MainLayout; diff --git a/docs/components/layout/Documentation/Documentation.js b/docs/components/layout/Documentation/Documentation.js index ab89c5ca..5f248c5c 100644 --- a/docs/components/layout/Documentation/Documentation.js +++ b/docs/components/layout/Documentation/Documentation.js @@ -1,28 +1,27 @@ -import Text from "@radui/ui/Text" -import Heading from "@radui/ui/Heading" -import Link from "@radui/ui/Link" -import Separator from "@radui/ui/Separator" -import Table from "@radui/ui/Table" +import Text from '@radui/ui/Text'; +import Heading from '@radui/ui/Heading'; +import Link from '@radui/ui/Link'; +import Separator from '@radui/ui/Separator'; +import Table from '@radui/ui/Table'; -import CodeBlock from "@/components/layout/Documentation/helpers/CodeBlock" -import ComponentHero from "@/components/layout/Documentation/helpers/ComponentHero/ComponentHero" -import ComponentFeatures from "@/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures" -import { BookMarkLink } from "@/components/layout/Documentation/utils" +import CodeBlock from '@/components/layout/Documentation/helpers/CodeBlock'; +import ComponentHero from '@/components/layout/Documentation/helpers/ComponentHero/ComponentHero'; +import ComponentFeatures from '@/components/layout/Documentation/helpers/ComponentFeatures/ComponentFeatures'; +import { BookMarkLink } from '@/components/layout/Documentation/utils'; import DOCS_SEO from '@/app/docs/docsIndex'; const LeftArrow = () => { - return -} + return ; +}; const RightArrow = () => { - return -} - -const Documentation = ({ title = "", description = "", currentPage = undefined, children }) => { - const previous = DOCS_SEO.getPrevious(currentPage) - const next = DOCS_SEO.getNext(currentPage) - const NEXT_PAGE_TITLE = next?.basic_title || ""; + return ; +}; +const Documentation = ({ title = '', description = '', currentPage = undefined, children }) => { + const previous = DOCS_SEO.getPrevious(currentPage); + const next = DOCS_SEO.getNext(currentPage); + const NEXT_PAGE_TITLE = next?.basic_title || ''; return
@@ -41,28 +40,26 @@ const Documentation = ({ title = "", description = "", currentPage = undefined,
{next && {next?.basic_title} }
- -} - -const DocsTable = ({ children , columns=[], data=[]}) => { + ; +}; - +const DocsTable = ({ children, columns = [], data = [] }) => { return
API Documentation - {children} -
-
-} + {children} + + ; +}; -const Section = ({ title = "", children }) => { +const Section = ({ title = '', children }) => { return
{title}
{children}
-
-} + ; +}; const UnderConstruction = ({ children }) => { return
@@ -72,9 +69,8 @@ const UnderConstruction = ({ children }) => { Check Back soon! -
-} - + ; +}; Documentation.UnderConstruction = UnderConstruction; Documentation.Section = Section; @@ -83,5 +79,4 @@ Documentation.ComponentFeatures = ComponentFeatures; Documentation.CodeBlock = CodeBlock; Documentation.Table = DocsTable; - -export default Documentation; \ No newline at end of file +export default Documentation; diff --git a/docs/components/layout/Documentation/helpers/CodeBlock.js b/docs/components/layout/Documentation/helpers/CodeBlock.js index 06b6d33e..b4e41e1f 100644 --- a/docs/components/layout/Documentation/helpers/CodeBlock.js +++ b/docs/components/layout/Documentation/helpers/CodeBlock.js @@ -6,54 +6,49 @@ import jsx from 'refractor/lang/jsx'; refractor.register(js); refractor.register(jsx); - const renderElement = (element) => { if (element.type === 'element') { - const { tagName, properties, children } = element; - const className = properties.className.join(' '); - - return React.createElement( - tagName, - { className }, - children.map(renderElement) - ); - } else if (element.type === 'text') { - return element.value; - } else { - return null; - } - }; - - -const CodeBlock = ({ children, language="jsx" }) => { - let code = refractor.highlight(children, language); - - const renderElement = (element) => { - if (element.type === 'element') { - const { tagName, properties, children } = element; - const className = properties.className.join(' '); - - return React.createElement( - tagName, - { className }, - children.map(renderElement) - ); + const { tagName, properties, children } = element; + const className = properties.className.join(' '); + + return React.createElement( + tagName, + { className }, + children.map(renderElement) + ); } else if (element.type === 'text') { - return element.value; + return element.value; } else { - return null; + return null; } - }; - - +}; +const CodeBlock = ({ children, language = 'jsx' }) => { + let code = refractor.highlight(children, language); + + const renderElement = (element) => { + if (element.type === 'element') { + const { tagName, properties, children } = element; + const className = properties.className.join(' '); + + return React.createElement( + tagName, + { className }, + children.map(renderElement) + ); + } else if (element.type === 'text') { + return element.value; + } else { + return null; + } + }; code = code.children.map(renderElement); - return ( - 
-      {code}
-
- ); + return ( + 
+            {code}
+
+ ); }; export default CodeBlock; diff --git a/docs/icons/Disc.js b/docs/icons/Disc.js index c2f40bec..2f87b05a 100644 --- a/docs/icons/Disc.js +++ b/docs/icons/Disc.js @@ -1,5 +1,5 @@ const Disc = () => { - return -} + return ; +}; -export default Disc \ No newline at end of file +export default Disc; diff --git a/docs/icons/Home.js b/docs/icons/Home.js index dbf3c98f..fce2b85a 100644 --- a/docs/icons/Home.js +++ b/docs/icons/Home.js @@ -1,5 +1,5 @@ const Home = () => { - return -} + return ; +}; -export default Home \ No newline at end of file +export default Home; diff --git a/docs/icons/Play.js b/docs/icons/Play.js index 1c9d805c..1212e7c9 100644 --- a/docs/icons/Play.js +++ b/docs/icons/Play.js @@ -1,5 +1,5 @@ const Play = () => { - return -} + return ; +}; -export default Play \ No newline at end of file +export default Play; diff --git a/docs/icons/RightArrow.js b/docs/icons/RightArrow.js index 2ed6f0ab..07343863 100644 --- a/docs/icons/RightArrow.js +++ b/docs/icons/RightArrow.js @@ -1,5 +1,5 @@ const ArrowRight = () => { - return -} + return ; +}; -export default ArrowRight; \ No newline at end of file +export default ArrowRight; diff --git a/docs/icons/Rocket.js b/docs/icons/Rocket.js index 548fe872..f604e1cf 100644 --- a/docs/icons/Rocket.js +++ b/docs/icons/Rocket.js @@ -1,5 +1,5 @@ const Rocket = () => { - return -} + return ; +}; -export default Rocket \ No newline at end of file +export default Rocket; diff --git a/docs/icons/Rows.js b/docs/icons/Rows.js index 16afb4c8..5c30a3fe 100644 --- a/docs/icons/Rows.js +++ b/docs/icons/Rows.js @@ -1,6 +1,5 @@ +const Rows = () => { + return ; +}; -const Rows =()=>{ - return -} - -export default Rows \ No newline at end of file +export default Rows; diff --git a/docs/icons/TrackNext.js b/docs/icons/TrackNext.js index b419a15c..d836670c 100644 --- a/docs/icons/TrackNext.js +++ b/docs/icons/TrackNext.js @@ -1,5 +1,5 @@ -const TrackNext = ()=>{ - return -} +const TrackNext = () => { + return ; +}; -export default TrackNext \ No newline at end of file +export default TrackNext; diff --git a/docs/icons/TrackPrevious.js b/docs/icons/TrackPrevious.js index ef9a348e..f3ca8e13 100644 --- a/docs/icons/TrackPrevious.js +++ b/docs/icons/TrackPrevious.js @@ -1,7 +1,7 @@ -const TrackPrevious = ()=>{ - return - - -} +const TrackPrevious = () => { + return + + ; +}; -export default TrackPrevious \ No newline at end of file +export default TrackPrevious; diff --git a/src/components/ui/Callout/stories/Callout.stories.js b/src/components/ui/Callout/stories/Callout.stories.js index 6ce0a080..975c82b6 100644 --- a/src/components/ui/Callout/stories/Callout.stories.js +++ b/src/components/ui/Callout/stories/Callout.stories.js @@ -3,7 +3,7 @@ import Text from '~/components/ui/Text/Text'; import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor'; const InfoIcon = () => { - return (); + return (); }; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export diff --git a/src/components/ui/Toggle/stories/Toggle.stories.js b/src/components/ui/Toggle/stories/Toggle.stories.js index 33b37fb0..62fbde25 100644 --- a/src/components/ui/Toggle/stories/Toggle.stories.js +++ b/src/components/ui/Toggle/stories/Toggle.stories.js @@ -9,7 +9,7 @@ export default { }; const MoveIcon = () => { - return ; + return ; }; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export diff --git a/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.js b/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.js index 5ab4ef58..f1b72468 100644 --- a/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.js +++ b/src/components/ui/ToggleGroup/stories/ToggleGroup.stories.js @@ -31,18 +31,18 @@ const Template = (args) => { }; const FrameIcon = () => { - return ; + return ; }; const CropIcon = () => { - return ; + return ; }; const LayersIcon = () => { - return ; + return ; }; const ColumnsIcon = () => { - return ; + return ; }; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args