fix(docs,ui): tailwind preflight scope

SySagar · Sep 21, 2024 · 6a8c722 · 6a8c722
1 parent a870ebe
commit 6a8c722
Show file tree

Hide file tree

Showing 27 changed files with 553 additions and 80 deletions.
diff --git a/.changeset/rotten-poets-kick.md b/.changeset/rotten-poets-kick.md
@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': minor
+---
+
+tailwind preflight scope
diff --git a/apps/docs/app/ui/ComponenentWrapper.tsx b/apps/docs/app/ui/ComponenentWrapper.tsx
@@ -7,7 +7,7 @@ export default function ComponenentWrapper({
  children: React.ReactNode;
 }) {
  return (
- <div className='flex flex-row items-center justify-center h-[300px] gap-20'>
+ <div className='ui flex flex-row items-center justify-center h-[300px] gap-20'>
  {children}
  </div>
  );

diff --git a/apps/docs/content/docs/(components)/accordion.mdx b/apps/docs/content/docs/(components)/accordion.mdx
@@ -0,0 +1,71 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+---
+
+## Default
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from '@/app/ui';
+import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
+
+<Tabs items={['Preview', 'Code']}>
+ <Tab value='Preview'>
+ <ComponenentWrapper>
+ <div className="w-56">
+ <Accordion type="single" defaultValue="item-1" collapsible>
+ <AccordionItem value="item-1">
+ <AccordionTrigger>Accordion 1</AccordionTrigger>
+ <AccordionContent>Content 1</AccordionContent>
+ </AccordionItem>
+ <AccordionItem value="item-2">
+ <AccordionTrigger>Accordion 2</AccordionTrigger>
+ <AccordionContent>Content 2</AccordionContent>
+ </AccordionItem>
+ <AccordionItem value="item-3">
+ <AccordionTrigger>Accordion 3</AccordionTrigger>
+ <AccordionContent>Content 3</AccordionContent>
+ </AccordionItem>
+ </Accordion>
+ </div>
+ </ComponenentWrapper>
+
+ </Tab>
+ <Tab value='Code'>
+
+ ```tsx
+import { Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger, } from "@groovy-box/ui"
+
+export function AccordionDefault() {
+ return (
+ <div className='w-56'>
+ <Accordion type='single' defaultValue='item-1' collapsible>
+ <AccordionItem value='item-1'>
+ <AccordionTrigger>Accordion 1</AccordionTrigger>
+ <AccordionContent>Content 1</AccordionContent>
+ </AccordionItem>
+ <AccordionItem value='item-2'>
+ <AccordionTrigger>Accordion 2</AccordionTrigger>
+ <AccordionContent>Content 2</AccordionContent>
+ </AccordionItem>
+ <AccordionItem value='item-3'>
+ <AccordionTrigger>Accordion 3</AccordionTrigger>
+ <AccordionContent>Content 3</AccordionContent>
+ </AccordionItem>
+ </Accordion>
+ </div>
+ );
+}
+
+ ```
+ </Tab>
+
+</Tabs>
diff --git a/apps/docs/content/docs/(components)/avatar.mdx b/apps/docs/content/docs/(components)/avatar.mdx
@@ -0,0 +1,215 @@
+---
+title: Avatar
+description: An image/icon element with a fallback for representing the user.
+---
+
+## Default
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from '@/app/ui';
+import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
+
+<Tabs items={['Preview', 'Code']}>
+ <Tab value='Preview'>
+ <ComponenentWrapper>
+ <Avatar>
+ <AvatarImage
+ src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ alt="Avatar Image"
+ />
+ <AvatarFallback>SY</AvatarFallback>
+ </Avatar>
+ </ComponenentWrapper>
+
+ </Tab>
+ <Tab value='Code'>
+
+ ```tsx
+import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui"
+
+export function AvatarDefault() {
+ return (
+ <Avatar>
+ <AvatarContent>
+ <img
+ src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+ alt='Avatar Content Image'
+ className='h-full w-full object-cover'
+ />
+ </AvatarContent>
+ </Avatar>
+ );
+}
+
+ ```
+
+ </Tab>
+
+</Tabs>
+
+## With icon
+
+import { Search, File } from 'lucide-react';
+
+<Tabs items={['Preview', 'Code']}>
+ <Tab value='Preview'>
+ <ComponenentWrapper>
+ <Avatar >
+ <AvatarContent className="flex items-center justify-center">
+ <Search size={24} />
+ </AvatarContent>
+ </Avatar>
+ <Avatar>
+ <AvatarContent className="bg-blue-300 flex items-center justify-center">
+ <File size={24} />
+ </AvatarContent>
+ </Avatar>
+ </ComponenentWrapper>
+
+ </Tab>
+ <Tab value='Code'>
+
+ ```tsx
+import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui"
+
+export function AvatarDefault() {
+ return (
+ <Avatar >
+ <AvatarContent className="flex items-center justify-center">
+ <Search size={24} />
+ </AvatarContent>
+ </Avatar>
+ <Avatar>
+ <AvatarContent className="bg-blue-300 flex items-center justify-center">
+ <File size={24} />
+ </AvatarContent>
+ </Avatar>
+ );
+}
+
+ ```
+
+ </Tab>
+
+</Tabs>
+
+## All sizes
+
+<Tabs items={['Preview', 'Code']}>
+ <Tab value='Preview'>
+ <ComponenentWrapper>
+
+ <Avatar size="small">
+ <AvatarContent className="bg-blue-500">
+ <img
+ src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+ alt='Avatar Content Image'
+ className='h-full w-full object-cover'
+ />
+ </AvatarContent>
+ </Avatar>
+
+ <Avatar size="medium">
+ <AvatarContent className="bg-blue-500">
+ <img
+ src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ alt="Avatar Content Image"
+ className="h-full w-full object-cover"
+ />
+ </AvatarContent>
+ </Avatar>
+
+ <Avatar size="large">
+ <AvatarContent className="bg-blue-500">
+ <img
+ src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ alt="Avatar Content Image"
+ className="h-full w-full object-cover"
+ />
+ </AvatarContent>
+ </Avatar>
+
+ </ComponenentWrapper>
+
+ </Tab>
+ <Tab value='Code'>
+
+ ```tsx
+import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui"
+
+export function AvatarDefault() {
+ return (
+ <Avatar size="small">
+ <AvatarContent className="bg-blue-500">
+ <img
+ src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+ alt='Avatar Content Image'
+ className='h-full w-full object-cover'
+ />
+ </AvatarContent>
+ </Avatar>
+
+ <Avatar size="medium">
+ <AvatarContent className="bg-blue-500">
+ <img
+ src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ alt="Avatar Content Image"
+ className="h-full w-full object-cover"
+ />
+ </AvatarContent>
+ </Avatar>
+
+ <Avatar size="large">
+ <AvatarContent className="bg-blue-500">
+ <img
+ src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ alt="Avatar Content Image"
+ className="h-full w-full object-cover"
+ />
+ </AvatarContent>
+ </Avatar>
+
+);
+}
+
+ ```
+
+ </Tab>
+
+</Tabs>
+
+## With fallback
+
+<Tabs items={['Preview', 'Code']}>
+ <Tab value='Preview'>
+ <ComponenentWrapper>
+ <Avatar>
+ <AvatarFallback>SY</AvatarFallback>
+ </Avatar>
+ </ComponenentWrapper>
+
+ </Tab>
+ <Tab value='Code'>
+
+ ```tsx
+import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui"
+
+export function AvatarDefault() {
+ return (
+ <Avatar>
+ <AvatarContent>
+ <img
+ src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+ alt='Avatar Content Image'
+ className='h-full w-full object-cover'
+ />
+ </AvatarContent>
+ </Avatar>
+ );
+}
+
+ ```
+
+ </Tab>
+
+</Tabs>
diff --git a/apps/docs/content/docs/(components)/label.mdx b/apps/docs/content/docs/(components)/label.mdx
@@ -0,0 +1,62 @@
+---
+title: Label
+description: Renders an accessible label associated with controls
+---
+
+## Default
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Label, Switch } from '@/app/ui';
+import ComponenentWrapper from '@/app/ui/ComponenentWrapper';
+
+<Tabs items={['Preview', 'Code']}>
+ <Tab value='Preview'>
+ <ComponenentWrapper>
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ flexDirection: 'row',
+ justifyItems: 'center',
+
+ gap: '1rem',
+ }}
+ >
+ <Label
+ className="Label text-cyan-700"
+ htmlFor="airplane-mode"
+ style={{ paddingRight: 15 }}
+ >
+ Airplane mode
+ </Label>
+ <Switch className="SwitchRoot" id="airplane-mode" />
+ </div>
+
+ </ComponenentWrapper>
+
+ </Tab>
+ <Tab value='Code'>
+
+```tsx
+import { Label, Switch } from "@groovy-box/ui"
+
+export function LabelDefault() {
+ return (
+ <div style={{ display: 'flex', alignItems: 'center' }}>
+ <Label
+ className='Label text-cyan-700'
+ htmlFor='airplane-mode'
+ style={{ paddingRight: 15 }}
+ >
+ Airplane mode
+ </Label>
+ <Switch className='SwitchRoot' id='airplane-mode' />
+ </div>
+ );
+}
+
+ ```
+
+ </Tab>
+
+</Tabs>