Skip to content

Fix spacing in docs, remove react warnings #607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 6, 2024
Merged

Fix spacing in docs, remove react warnings #607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
249f5df
SVG attributes as camelCase to remove react warnings
krau5 Dec 5, 2024
11110c7
Fix spacing in code examples
krau5 Dec 5, 2024
6012dbf
Fix page naming in docs
krau5 Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 22 additions & 25 deletions docs/app/docs/components/accordion/docs/codeUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <div style={{width:"400px"}}>
<Accordion items={items}>
</Accordion>
</div>

}
export const AccordionExample = () => (
<div style={{ width: "400px" }}>
<Accordion items={items} />
</div>
)
`
},
scss: {
Expand Down Expand Up @@ -79,7 +76,7 @@ return <div style={{width:"400px"}}>
}
}
}`
},
}
}
};

export default code;
export default code;
30 changes: 15 additions & 15 deletions docs/app/docs/components/button/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}
return <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};

const AvatarDocs = () => {
const ButtonDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Button' description={`
<Documentation
currentPage={PAGE_NAME} title='Button' description={`
Buttons are used to trigger an action. You can use them in forms, dialogs, and more.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
<div style={{ display: "flex", gap: 20 }}>
<div style={{ display: 'flex', gap: 20 }}>
<Button color="green" className="space-x-2" ><span>Click Me! </span><Arrow /></Button>
</div>
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default AvatarDocs;
export default ButtonDocs;
30 changes: 19 additions & 11 deletions docs/app/docs/components/callout/docs/codeUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
const code = {
javascript: {
code: `<Callout color="red">
code: `
import Callout from "@radui/ui/Callout";
import Text from "@radui/ui/Text";

const CalloutExample = () => (
<Callout color="red">
<div className="flex items-start">
<Arrow/>
<div className="ml-2">
<Text className="font-bold">Error</Text>
<Text>Something went wrong. Please try again later.</Text>
</div>
<BookmarkIcon />

<div className="ml-2">
<Text className="font-bold">Error</Text>
<Text>Something went wrong. Please try again later.</Text>
</div>
</div>
</Callout>
`},
</Callout>
)
`
},
scss: {
code: `.rad-ui-callout {
padding:16px;
Expand All @@ -22,7 +30,7 @@ const code = {
font-size: 14px;
gap:8px;
}`
},
}
}
};

export default code;
export default code;
39 changes: 19 additions & 20 deletions docs/app/docs/components/callout/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}
const BookmarkIcon = () => {
return <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 2C3.22386 2 3 2.22386 3 2.5V13.5C3 13.6818 3.09864 13.8492 3.25762 13.9373C3.41659 14.0254 3.61087 14.0203 3.765 13.924L7.5 11.5896L11.235 13.924C11.3891 14.0203 11.5834 14.0254 11.7424 13.9373C11.9014 13.8492 12 13.6818 12 13.5V2.5C12 2.22386 11.7761 2 11.5 2H3.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>;
};

const CalloutDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Callout' description={`
<Documentation
currentPage={PAGE_NAME} title='Callout' description={`
Callout is a component that can be used to display a message or a notification to the user.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
<Callout color="red">
<Callout color="red">
<div className="flex items-start">
<Arrow/>
<BookmarkIcon />

<div className="ml-2">
<Text className="font-bold">Error</Text>
<Text>Something went wrong. Please try again later.</Text>
</div>
</div>
</Callout>
</Callout>
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default CalloutDocs;
export default CalloutDocs;
47 changes: 21 additions & 26 deletions docs/app/docs/components/card/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}

const AvatarDocs = () => {
const CardDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Card' description={`
<Documentation
currentPage={PAGE_NAME} title='Card' description={`
Cards are used to group related information and actions. They are used to display information in a structured way.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
<Card data-accent-color="green" className="bg-gray-50 text-gray-950 flex items-center space-x-2">
<Avatar fallback="PK" />
<div>
<div className="font-medium">
Peter Kowalsky
</div>
<div className="text-xs text-gray-800">
Content Engineer
</div>
<Avatar fallback="PK" />
<div>
<div className="font-medium">
Peter Kowalsky
</div>
<div className="text-xs text-gray-800">
Content Engineer
</div>
</div>
</Card>
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default AvatarDocs;
export default CardDocs;
29 changes: 12 additions & 17 deletions docs/app/docs/components/code/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
}

const AvatarDocs = () => {
const CodeDocs = () => {
return <div>
<Documentation currentPage={PAGE_NAME} title='Code' description={`
<Documentation
currentPage={PAGE_NAME} title='Code' description={`
Code is used to display inline code.
`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
Expand All @@ -24,7 +19,7 @@ const AvatarDocs = () => {
</Documentation.ComponentHero>

</Documentation>
</div>
}
</div>;
};

export default AvatarDocs;
export default CodeDocs;
17 changes: 8 additions & 9 deletions docs/app/docs/components/kbd/docs/codeUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
const code = {
javascript: {
code: `import Kbd from "@radui/ui/Kbd"
code: `import Kbd from "@radui/ui/Kbd";

const KbdExample = () => {
return <Kbd>Ctrl + C</Kbd>
}

<Kbd>Ctrl + C</Kbd>`
const KbdExample = () => (
<Kbd>Ctrl + C</Kbd>
)
`
},
css: {
code: `.rad-ui-kbd{
Expand All @@ -24,7 +23,7 @@ const KbdExample = () => {
box-shadow: 0px 0px 3px 1px var(--rad-ui-color-gray-400);
padding: 4px 8px;
}`
},
}
}
};

export default code;
export default code;
22 changes: 11 additions & 11 deletions docs/app/docs/components/progress/docs/codeUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
const code = {
javascript: {
code: `import Progress from "@radui/ui/Progress"
code: `
import Progress from "@radui/ui/Progress";

const ProgressExample = () => {
return <div style={{width:"200px"}}>
<Progress value={90} />
</div>
}

<Kbd>Ctrl + C</Kbd>`
const ProgressExample = () => (
<div style={{ width: "200px" }}>
<Progress value={90} />
</div>
)
`
},
css: {
code: `.rad-ui-progress {
Expand All @@ -25,7 +25,7 @@ const ProgressExample = () => {
border-radius: 8px;
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
}`
},
}
}
};

export default code;
export default code;
Loading
Loading