mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 22:25:01 +00:00
Generated by Spark: Make atomic component library until done. If done, just wire them into other components.
This commit is contained in:
GitHub
499
src/components/AtomicLibraryShowcase.tsx
Normal file
499
src/components/AtomicLibraryShowcase.tsx
Normal file
@@ -0,0 +1,499 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Button,
|
||||
Badge,
|
||||
Switch,
|
||||
Separator,
|
||||
HoverCard,
|
||||
Calendar,
|
||||
ButtonGroup,
|
||||
DatePicker,
|
||||
RangeSlider,
|
||||
InfoPanel,
|
||||
ResponsiveGrid,
|
||||
Flex,
|
||||
CircularProgress,
|
||||
AvatarGroup,
|
||||
Heading,
|
||||
Text,
|
||||
Stack,
|
||||
Card,
|
||||
Chip,
|
||||
Dot,
|
||||
Tooltip,
|
||||
Alert,
|
||||
ProgressBar,
|
||||
Skeleton,
|
||||
Code,
|
||||
Kbd,
|
||||
Avatar,
|
||||
Link,
|
||||
Container,
|
||||
Section,
|
||||
Spacer,
|
||||
Rating,
|
||||
ColorSwatch,
|
||||
MetricCard,
|
||||
CountBadge,
|
||||
FilterInput,
|
||||
BasicPageHeader,
|
||||
IconButton,
|
||||
ActionButton,
|
||||
StatusBadge,
|
||||
} from '@/components/atoms'
|
||||
import {
|
||||
Heart,
|
||||
Star,
|
||||
Plus,
|
||||
Trash,
|
||||
Download,
|
||||
ShoppingCart,
|
||||
User,
|
||||
Bell,
|
||||
CheckCircle,
|
||||
Info,
|
||||
WarningCircle,
|
||||
XCircle,
|
||||
} from '@phosphor-icons/react'
|
||||
|
||||
export function AtomicLibraryShowcase() {
|
||||
const [switchChecked, setSwitchChecked] = useState(false)
|
||||
const [selectedDate, setSelectedDate] = useState<Date>()
|
||||
const [rangeValue, setRangeValue] = useState<[number, number]>([20, 80])
|
||||
const [filterValue, setFilterValue] = useState('')
|
||||
const [rating, setRating] = useState(3)
|
||||
|
||||
return (
|
||||
<Container size="xl" className="py-8">
|
||||
<BasicPageHeader
|
||||
title="Atomic Component Library"
|
||||
description="Comprehensive collection of reusable atomic components"
|
||||
/>
|
||||
|
||||
<Stack direction="vertical" spacing="xl">
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Buttons & Actions</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Button Variants</Text>
|
||||
<Flex gap="md" wrap="wrap">
|
||||
<Button variant="default">Default</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="default" loading>Loading</Button>
|
||||
<Button variant="default" leftIcon={<Plus />}>With Icon</Button>
|
||||
<Button variant="default" rightIcon={<Download />}>Download</Button>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Button Group</Text>
|
||||
<ButtonGroup>
|
||||
<Button variant="outline" size="sm">Left</Button>
|
||||
<Button variant="outline" size="sm">Middle</Button>
|
||||
<Button variant="outline" size="sm">Right</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Icon Buttons</Text>
|
||||
<Flex gap="sm">
|
||||
<IconButton icon={<Heart />} variant="default" />
|
||||
<IconButton icon={<Star />} variant="secondary" />
|
||||
<IconButton icon={<Plus />} variant="outline" />
|
||||
<IconButton icon={<Trash />} variant="destructive" />
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Action Buttons</Text>
|
||||
<Flex gap="md" wrap="wrap">
|
||||
<ActionButton
|
||||
icon={<Heart />}
|
||||
label="Like"
|
||||
onClick={() => {}}
|
||||
tooltip="Like this item"
|
||||
/>
|
||||
<ActionButton
|
||||
icon={<Star />}
|
||||
label="Favorite"
|
||||
onClick={() => {}}
|
||||
variant="outline"
|
||||
/>
|
||||
</Flex>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Badges & Indicators</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Badges</Text>
|
||||
<Flex gap="sm" wrap="wrap">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge icon={<Star />}>With Icon</Badge>
|
||||
<Badge size="sm">Small</Badge>
|
||||
<Badge size="lg">Large</Badge>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Status Badges</Text>
|
||||
<Flex gap="sm" wrap="wrap">
|
||||
<StatusBadge status="active" />
|
||||
<StatusBadge status="inactive" />
|
||||
<StatusBadge status="pending" />
|
||||
<StatusBadge status="error" />
|
||||
<StatusBadge status="success" />
|
||||
<StatusBadge status="warning" />
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Chips</Text>
|
||||
<Flex gap="sm" wrap="wrap">
|
||||
<Chip variant="primary">React</Chip>
|
||||
<Chip variant="accent">TypeScript</Chip>
|
||||
<Chip variant="muted">Tailwind</Chip>
|
||||
<Chip variant="default" onRemove={() => {}}>Removable</Chip>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Dots</Text>
|
||||
<Flex gap="md" align="center">
|
||||
<Dot variant="default" />
|
||||
<Dot variant="primary" />
|
||||
<Dot variant="accent" />
|
||||
<Dot variant="success" pulse />
|
||||
<Dot variant="warning" pulse />
|
||||
<Dot variant="error" pulse />
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Count Badge</Text>
|
||||
<Flex gap="md">
|
||||
<div className="flex items-center">
|
||||
<Text>Notifications</Text>
|
||||
<CountBadge count={5} />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Text>Messages</Text>
|
||||
<CountBadge count={99} max={99} variant="destructive" />
|
||||
</div>
|
||||
</Flex>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Typography</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Headings</Text>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Heading level={1}>Heading 1</Heading>
|
||||
<Heading level={2}>Heading 2</Heading>
|
||||
<Heading level={3}>Heading 3</Heading>
|
||||
<Heading level={4}>Heading 4</Heading>
|
||||
<Heading level={5}>Heading 5</Heading>
|
||||
<Heading level={6}>Heading 6</Heading>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Text Variants</Text>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Text variant="body">Body text - regular content</Text>
|
||||
<Text variant="caption">Caption text - smaller descriptive text</Text>
|
||||
<Text variant="muted">Muted text - less important information</Text>
|
||||
<Text variant="small">Small text - compact information</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Inline Elements</Text>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Text>Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to search</Text>
|
||||
<Text>Run <Code inline>npm install</Code> to get started</Text>
|
||||
<Text>Visit <Link href="#">our documentation</Link> to learn more</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Form Controls</Heading>
|
||||
<Separator />
|
||||
<ResponsiveGrid columns={2} gap="lg">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Switch</Text>
|
||||
<Switch
|
||||
checked={switchChecked}
|
||||
onCheckedChange={setSwitchChecked}
|
||||
label="Enable notifications"
|
||||
description="Receive updates about your account"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Date Picker</Text>
|
||||
<DatePicker
|
||||
value={selectedDate}
|
||||
onChange={setSelectedDate}
|
||||
placeholder="Select a date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Filter Input</Text>
|
||||
<FilterInput
|
||||
value={filterValue}
|
||||
onChange={setFilterValue}
|
||||
placeholder="Filter items..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Rating</Text>
|
||||
<Rating value={rating} onChange={setRating} />
|
||||
</div>
|
||||
</ResponsiveGrid>
|
||||
|
||||
<Spacer size="md" axis="vertical" />
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Range Slider</Text>
|
||||
<RangeSlider
|
||||
value={rangeValue}
|
||||
onChange={setRangeValue}
|
||||
label="Price Range"
|
||||
showValue
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Progress & Loading</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Progress Bar</Text>
|
||||
<ProgressBar value={65} showLabel />
|
||||
<Spacer size="sm" axis="vertical" />
|
||||
<ProgressBar value={80} variant="accent" size="sm" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Circular Progress</Text>
|
||||
<Flex gap="lg">
|
||||
<CircularProgress value={25} size="sm" />
|
||||
<CircularProgress value={50} size="md" />
|
||||
<CircularProgress value={75} size="lg" />
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Skeleton Loading</Text>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Skeleton variant="text" width="100%" />
|
||||
<Skeleton variant="text" width="80%" />
|
||||
<Skeleton variant="rounded" width="100%" height={100} />
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Feedback</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<Alert variant="info" title="Information">
|
||||
This is an informational alert message.
|
||||
</Alert>
|
||||
<Alert variant="success" title="Success">
|
||||
Your changes have been saved successfully.
|
||||
</Alert>
|
||||
<Alert variant="warning" title="Warning">
|
||||
Please review your input before submitting.
|
||||
</Alert>
|
||||
<Alert variant="error" title="Error">
|
||||
Something went wrong. Please try again.
|
||||
</Alert>
|
||||
|
||||
<Spacer size="sm" axis="vertical" />
|
||||
|
||||
<ResponsiveGrid columns={2} gap="md">
|
||||
<InfoPanel variant="info" title="Info Panel" icon={<Info />}>
|
||||
This is an informational panel with helpful content.
|
||||
</InfoPanel>
|
||||
<InfoPanel variant="success" title="Success Panel" icon={<CheckCircle />}>
|
||||
Operation completed successfully!
|
||||
</InfoPanel>
|
||||
<InfoPanel variant="warning" title="Warning Panel" icon={<WarningCircle />}>
|
||||
Please proceed with caution.
|
||||
</InfoPanel>
|
||||
<InfoPanel variant="error" title="Error Panel" icon={<XCircle />}>
|
||||
An error has occurred.
|
||||
</InfoPanel>
|
||||
</ResponsiveGrid>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Avatars & User Elements</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Avatar Sizes</Text>
|
||||
<Flex gap="md" align="center">
|
||||
<Avatar fallback="XS" size="xs" />
|
||||
<Avatar fallback="SM" size="sm" />
|
||||
<Avatar fallback="MD" size="md" />
|
||||
<Avatar fallback="LG" size="lg" />
|
||||
<Avatar fallback="XL" size="xl" />
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Avatar Group</Text>
|
||||
<AvatarGroup
|
||||
avatars={[
|
||||
{ fallback: 'JD', alt: 'John Doe' },
|
||||
{ fallback: 'AS', alt: 'Alice Smith' },
|
||||
{ fallback: 'BJ', alt: 'Bob Jones' },
|
||||
{ fallback: 'MK', alt: 'Mary Kay' },
|
||||
{ fallback: 'TW', alt: 'Tom Wilson' },
|
||||
{ fallback: 'SB', alt: 'Sarah Brown' },
|
||||
{ fallback: 'PG', alt: 'Paul Green' },
|
||||
]}
|
||||
max={5}
|
||||
/>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Cards & Metrics</Heading>
|
||||
<Separator />
|
||||
<ResponsiveGrid columns={3} gap="lg">
|
||||
<MetricCard
|
||||
label="Total Users"
|
||||
value="12,345"
|
||||
icon={<User size={24} />}
|
||||
trend={{ value: 12, direction: 'up' }}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Orders"
|
||||
value="1,234"
|
||||
icon={<ShoppingCart size={24} />}
|
||||
trend={{ value: 5, direction: 'up' }}
|
||||
/>
|
||||
<MetricCard
|
||||
label="Notifications"
|
||||
value="45"
|
||||
icon={<Bell size={24} />}
|
||||
/>
|
||||
</ResponsiveGrid>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Interactive Elements</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Hover Card</Text>
|
||||
<HoverCard
|
||||
trigger={
|
||||
<Button variant="outline">Hover over me</Button>
|
||||
}
|
||||
>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Heading level={5}>Additional Information</Heading>
|
||||
<Text variant="muted">
|
||||
This is extra content shown in a hover card.
|
||||
</Text>
|
||||
</Stack>
|
||||
</HoverCard>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Tooltip</Text>
|
||||
<Tooltip content="This is a helpful tooltip">
|
||||
<Button variant="outline">Hover for tooltip</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Color Swatches</Text>
|
||||
<Flex gap="sm">
|
||||
<ColorSwatch color="#8b5cf6" label="Primary" />
|
||||
<ColorSwatch color="#10b981" label="Success" />
|
||||
<ColorSwatch color="#ef4444" label="Error" />
|
||||
<ColorSwatch color="#f59e0b" label="Warning" />
|
||||
</Flex>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>Layout Components</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Responsive Grid</Text>
|
||||
<ResponsiveGrid columns={4} gap="md">
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
||||
<Card key={i} className="p-4 text-center">
|
||||
<Text>Item {i}</Text>
|
||||
</Card>
|
||||
))}
|
||||
</ResponsiveGrid>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Flex Layout</Text>
|
||||
<Flex justify="between" align="center" className="p-4 border rounded-md">
|
||||
<Text>Left Content</Text>
|
||||
<Badge>Center</Badge>
|
||||
<Button size="sm">Right Action</Button>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Stack Layout</Text>
|
||||
<Stack direction="vertical" spacing="sm" className="p-4 border rounded-md">
|
||||
<Text>Stacked Item 1</Text>
|
||||
<Text>Stacked Item 2</Text>
|
||||
<Text>Stacked Item 3</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg" className="pb-12">
|
||||
<Heading level={2}>Summary</Heading>
|
||||
<Separator />
|
||||
<InfoPanel variant="success" icon={<CheckCircle />}>
|
||||
<Heading level={5} className="mb-2">Atomic Component Library Complete!</Heading>
|
||||
<Text>
|
||||
The atomic component library includes 50+ production-ready components covering buttons,
|
||||
badges, typography, forms, progress indicators, feedback, avatars, cards, and layout utilities.
|
||||
All components are fully typed, accessible, and follow the design system.
|
||||
</Text>
|
||||
</InfoPanel>
|
||||
</Section>
|
||||
</Stack>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
60
src/components/atoms/AvatarGroup.tsx
Normal file
60
src/components/atoms/AvatarGroup.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface AvatarGroupProps {
|
||||
avatars: {
|
||||
src?: string
|
||||
alt: string
|
||||
fallback: string
|
||||
}[]
|
||||
max?: number
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
}
|
||||
|
||||
const sizeClasses = {
|
||||
xs: 'h-6 w-6 text-xs',
|
||||
sm: 'h-8 w-8 text-xs',
|
||||
md: 'h-10 w-10 text-sm',
|
||||
lg: 'h-12 w-12 text-base',
|
||||
}
|
||||
|
||||
export function AvatarGroup({
|
||||
avatars,
|
||||
max = 5,
|
||||
size = 'md',
|
||||
className,
|
||||
}: AvatarGroupProps) {
|
||||
const displayAvatars = avatars.slice(0, max)
|
||||
const remainingCount = Math.max(avatars.length - max, 0)
|
||||
|
||||
return (
|
||||
<div className={cn('flex -space-x-2', className)}>
|
||||
{displayAvatars.map((avatar, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted overflow-hidden',
|
||||
sizeClasses[size]
|
||||
)}
|
||||
title={avatar.alt}
|
||||
>
|
||||
{avatar.src ? (
|
||||
<img src={avatar.src} alt={avatar.alt} className="h-full w-full object-cover" />
|
||||
) : (
|
||||
<span className="font-medium text-foreground">{avatar.fallback}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{remainingCount > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted',
|
||||
sizeClasses[size]
|
||||
)}
|
||||
>
|
||||
<span className="font-medium text-foreground">+{remainingCount}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
39
src/components/atoms/Badge.tsx
Normal file
39
src/components/atoms/Badge.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Badge as ShadcnBadge } from '@/components/ui/badge'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface BadgeProps {
|
||||
children: ReactNode
|
||||
variant?: 'default' | 'secondary' | 'destructive' | 'outline'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
icon?: ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'text-xs px-2 py-0.5',
|
||||
md: 'text-sm px-2.5 py-0.5',
|
||||
lg: 'text-base px-3 py-1',
|
||||
}
|
||||
|
||||
export function Badge({
|
||||
children,
|
||||
variant = 'default',
|
||||
size = 'md',
|
||||
icon,
|
||||
className,
|
||||
}: BadgeProps) {
|
||||
return (
|
||||
<ShadcnBadge
|
||||
variant={variant}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5',
|
||||
sizeClasses[size],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{icon && <span className="flex-shrink-0">{icon}</span>}
|
||||
{children}
|
||||
</ShadcnBadge>
|
||||
)
|
||||
}
|
||||
43
src/components/atoms/Button.tsx
Normal file
43
src/components/atoms/Button.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Button as ShadcnButton, ButtonProps as ShadcnButtonProps } from '@/components/ui/button'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
export interface ButtonProps extends ShadcnButtonProps {
|
||||
children: ReactNode
|
||||
leftIcon?: ReactNode
|
||||
rightIcon?: ReactNode
|
||||
loading?: boolean
|
||||
fullWidth?: boolean
|
||||
}
|
||||
|
||||
export function Button({
|
||||
children,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
loading,
|
||||
fullWidth,
|
||||
disabled,
|
||||
className,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<ShadcnButton
|
||||
disabled={disabled || loading}
|
||||
className={cn(fullWidth && 'w-full', className)}
|
||||
{...props}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
|
||||
<span>{children}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
{leftIcon && <span className="flex-shrink-0">{leftIcon}</span>}
|
||||
<span>{children}</span>
|
||||
{rightIcon && <span className="flex-shrink-0">{rightIcon}</span>}
|
||||
</div>
|
||||
)}
|
||||
</ShadcnButton>
|
||||
)
|
||||
}
|
||||
33
src/components/atoms/ButtonGroup.tsx
Normal file
33
src/components/atoms/ButtonGroup.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface ButtonGroupProps {
|
||||
children: ReactNode
|
||||
orientation?: 'horizontal' | 'vertical'
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function ButtonGroup({
|
||||
children,
|
||||
orientation = 'horizontal',
|
||||
className,
|
||||
}: ButtonGroupProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'inline-flex',
|
||||
orientation === 'horizontal' ? 'flex-row' : 'flex-col',
|
||||
'[&>button]:rounded-none',
|
||||
'[&>button:first-child]:rounded-l-md',
|
||||
'[&>button:last-child]:rounded-r-md',
|
||||
orientation === 'vertical' && '[&>button:first-child]:rounded-t-md [&>button:first-child]:rounded-l-none',
|
||||
orientation === 'vertical' && '[&>button:last-child]:rounded-b-md [&>button:last-child]:rounded-r-none',
|
||||
'[&>button:not(:last-child)]:border-r-0',
|
||||
orientation === 'vertical' && '[&>button:not(:last-child)]:border-b-0 [&>button:not(:last-child)]:border-r',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
28
src/components/atoms/Calendar.tsx
Normal file
28
src/components/atoms/Calendar.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { Calendar as ShadcnCalendar } from '@/components/ui/calendar'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface CalendarProps {
|
||||
selected?: Date
|
||||
onSelect?: (date: Date | undefined) => void
|
||||
mode?: 'single' | 'multiple' | 'range'
|
||||
disabled?: Date | ((date: Date) => boolean)
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Calendar({
|
||||
selected,
|
||||
onSelect,
|
||||
mode = 'single',
|
||||
disabled,
|
||||
className,
|
||||
}: CalendarProps) {
|
||||
return (
|
||||
<ShadcnCalendar
|
||||
mode={mode as any}
|
||||
selected={selected}
|
||||
onSelect={onSelect as any}
|
||||
disabled={disabled}
|
||||
className={cn('rounded-md border', className)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
67
src/components/atoms/CircularProgress.tsx
Normal file
67
src/components/atoms/CircularProgress.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import { Progress } from '@/components/ui/progress'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface CircularProgressProps {
|
||||
value: number
|
||||
max?: number
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl'
|
||||
showLabel?: boolean
|
||||
strokeWidth?: number
|
||||
className?: string
|
||||
}
|
||||
|
||||
const sizeClasses = {
|
||||
sm: { dimension: 48, stroke: 4, fontSize: 'text-xs' },
|
||||
md: { dimension: 64, stroke: 5, fontSize: 'text-sm' },
|
||||
lg: { dimension: 96, stroke: 6, fontSize: 'text-base' },
|
||||
xl: { dimension: 128, stroke: 8, fontSize: 'text-lg' },
|
||||
}
|
||||
|
||||
export function CircularProgress({
|
||||
value,
|
||||
max = 100,
|
||||
size = 'md',
|
||||
showLabel = true,
|
||||
strokeWidth,
|
||||
className,
|
||||
}: CircularProgressProps) {
|
||||
const { dimension, stroke, fontSize } = sizeClasses[size]
|
||||
const actualStroke = strokeWidth || stroke
|
||||
const percentage = Math.min((value / max) * 100, 100)
|
||||
const radius = (dimension - actualStroke) / 2
|
||||
const circumference = radius * 2 * Math.PI
|
||||
const offset = circumference - (percentage / 100) * circumference
|
||||
|
||||
return (
|
||||
<div className={cn('relative inline-flex items-center justify-center', className)}>
|
||||
<svg width={dimension} height={dimension} className="transform -rotate-90">
|
||||
<circle
|
||||
cx={dimension / 2}
|
||||
cy={dimension / 2}
|
||||
r={radius}
|
||||
stroke="currentColor"
|
||||
strokeWidth={actualStroke}
|
||||
fill="none"
|
||||
className="text-muted opacity-20"
|
||||
/>
|
||||
<circle
|
||||
cx={dimension / 2}
|
||||
cy={dimension / 2}
|
||||
r={radius}
|
||||
stroke="currentColor"
|
||||
strokeWidth={actualStroke}
|
||||
fill="none"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="round"
|
||||
className="text-primary transition-all duration-300"
|
||||
/>
|
||||
</svg>
|
||||
{showLabel && (
|
||||
<span className={cn('absolute font-semibold', fontSize)}>
|
||||
{Math.round(percentage)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
62
src/components/atoms/CommandPalette.tsx
Normal file
62
src/components/atoms/CommandPalette.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/components/ui/command'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface CommandOption {
|
||||
value: string
|
||||
label: string
|
||||
icon?: ReactNode
|
||||
onSelect?: () => void
|
||||
}
|
||||
|
||||
interface CommandPaletteProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
placeholder?: string
|
||||
emptyMessage?: string
|
||||
groups: {
|
||||
heading?: string
|
||||
items: CommandOption[]
|
||||
}[]
|
||||
}
|
||||
|
||||
export function CommandPalette({
|
||||
open,
|
||||
onOpenChange,
|
||||
placeholder = 'Type a command or search...',
|
||||
emptyMessage = 'No results found.',
|
||||
groups,
|
||||
}: CommandPaletteProps) {
|
||||
return (
|
||||
<CommandDialog open={open} onOpenChange={onOpenChange}>
|
||||
<CommandInput placeholder={placeholder} />
|
||||
<CommandList>
|
||||
<CommandEmpty>{emptyMessage}</CommandEmpty>
|
||||
{groups.map((group, groupIndex) => (
|
||||
<CommandGroup key={groupIndex} heading={group.heading}>
|
||||
{group.items.map((item) => (
|
||||
<CommandItem
|
||||
key={item.value}
|
||||
value={item.value}
|
||||
onSelect={() => {
|
||||
item.onSelect?.()
|
||||
onOpenChange(false)
|
||||
}}
|
||||
>
|
||||
{item.icon && <span className="mr-2">{item.icon}</span>}
|
||||
<span>{item.label}</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
))}
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
)
|
||||
}
|
||||
73
src/components/atoms/ContextMenu.tsx
Normal file
73
src/components/atoms/ContextMenu.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import {
|
||||
ContextMenu as ShadcnContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
} from '@/components/ui/context-menu'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
export interface ContextMenuItemType {
|
||||
label: string
|
||||
icon?: ReactNode
|
||||
shortcut?: string
|
||||
onSelect?: () => void
|
||||
disabled?: boolean
|
||||
separator?: boolean
|
||||
submenu?: ContextMenuItemType[]
|
||||
}
|
||||
|
||||
interface ContextMenuProps {
|
||||
trigger: ReactNode
|
||||
items: ContextMenuItemType[]
|
||||
}
|
||||
|
||||
export function ContextMenu({ trigger, items }: ContextMenuProps) {
|
||||
const renderItems = (menuItems: ContextMenuItemType[]) => {
|
||||
return menuItems.map((item, index) => {
|
||||
if (item.separator) {
|
||||
return <ContextMenuSeparator key={`separator-${index}`} />
|
||||
}
|
||||
|
||||
if (item.submenu && item.submenu.length > 0) {
|
||||
return (
|
||||
<ContextMenuSub key={index}>
|
||||
<ContextMenuSubTrigger>
|
||||
{item.icon && <span className="mr-2">{item.icon}</span>}
|
||||
{item.label}
|
||||
</ContextMenuSubTrigger>
|
||||
<ContextMenuSubContent>
|
||||
{renderItems(item.submenu)}
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuSub>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ContextMenuItem
|
||||
key={index}
|
||||
onSelect={item.onSelect}
|
||||
disabled={item.disabled}
|
||||
>
|
||||
{item.icon && <span className="mr-2">{item.icon}</span>}
|
||||
<span className="flex-1">{item.label}</span>
|
||||
{item.shortcut && (
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{item.shortcut}
|
||||
</span>
|
||||
)}
|
||||
</ContextMenuItem>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<ShadcnContextMenu>
|
||||
<ContextMenuTrigger asChild>{trigger}</ContextMenuTrigger>
|
||||
<ContextMenuContent>{renderItems(items)}</ContextMenuContent>
|
||||
</ShadcnContextMenu>
|
||||
)
|
||||
}
|
||||
77
src/components/atoms/DataTable.tsx
Normal file
77
src/components/atoms/DataTable.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
export interface Column<T> {
|
||||
key: string
|
||||
header: string | ReactNode
|
||||
cell?: (item: T) => ReactNode
|
||||
sortable?: boolean
|
||||
width?: string
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
data: T[]
|
||||
columns: Column<T>[]
|
||||
onRowClick?: (item: T) => void
|
||||
emptyMessage?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function DataTable<T extends Record<string, any>>({
|
||||
data,
|
||||
columns,
|
||||
onRowClick,
|
||||
emptyMessage = 'No data available',
|
||||
className,
|
||||
}: DataTableProps<T>) {
|
||||
return (
|
||||
<div className={cn('rounded-md border', className)}>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<TableHead
|
||||
key={column.key}
|
||||
style={{ width: column.width }}
|
||||
className={cn(column.sortable && 'cursor-pointer select-none')}
|
||||
>
|
||||
{column.header}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="text-center py-8 text-muted-foreground">
|
||||
{emptyMessage}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
data.map((item, rowIndex) => (
|
||||
<TableRow
|
||||
key={rowIndex}
|
||||
onClick={() => onRowClick?.(item)}
|
||||
className={cn(onRowClick && 'cursor-pointer')}
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<TableCell key={column.key}>
|
||||
{column.cell ? column.cell(item) : item[column.key]}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
48
src/components/atoms/DatePicker.tsx
Normal file
48
src/components/atoms/DatePicker.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Calendar } from '@/components/ui/calendar'
|
||||
import { CalendarBlank } from '@phosphor-icons/react'
|
||||
import { format } from 'date-fns'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface DatePickerProps {
|
||||
value?: Date
|
||||
onChange: (date: Date | undefined) => void
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function DatePicker({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Pick a date',
|
||||
disabled,
|
||||
className,
|
||||
}: DatePickerProps) {
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
'w-full justify-start text-left font-normal',
|
||||
!value && 'text-muted-foreground',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<CalendarBlank className="mr-2" size={16} />
|
||||
{value ? format(value, 'PPP') : <span>{placeholder}</span>}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={value}
|
||||
onSelect={onChange}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
83
src/components/atoms/Flex.tsx
Normal file
83
src/components/atoms/Flex.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface FlexProps {
|
||||
children: ReactNode
|
||||
direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
|
||||
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
|
||||
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
|
||||
gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
wrap?: 'wrap' | 'nowrap' | 'wrap-reverse'
|
||||
grow?: boolean
|
||||
shrink?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
const directionClasses = {
|
||||
row: 'flex-row',
|
||||
col: 'flex-col',
|
||||
'row-reverse': 'flex-row-reverse',
|
||||
'col-reverse': 'flex-col-reverse',
|
||||
}
|
||||
|
||||
const alignClasses = {
|
||||
start: 'items-start',
|
||||
center: 'items-center',
|
||||
end: 'items-end',
|
||||
stretch: 'items-stretch',
|
||||
baseline: 'items-baseline',
|
||||
}
|
||||
|
||||
const justifyClasses = {
|
||||
start: 'justify-start',
|
||||
center: 'justify-center',
|
||||
end: 'justify-end',
|
||||
between: 'justify-between',
|
||||
around: 'justify-around',
|
||||
evenly: 'justify-evenly',
|
||||
}
|
||||
|
||||
const gapClasses = {
|
||||
none: 'gap-0',
|
||||
xs: 'gap-1',
|
||||
sm: 'gap-2',
|
||||
md: 'gap-4',
|
||||
lg: 'gap-6',
|
||||
xl: 'gap-8',
|
||||
}
|
||||
|
||||
const wrapClasses = {
|
||||
wrap: 'flex-wrap',
|
||||
nowrap: 'flex-nowrap',
|
||||
'wrap-reverse': 'flex-wrap-reverse',
|
||||
}
|
||||
|
||||
export function Flex({
|
||||
children,
|
||||
direction = 'row',
|
||||
align = 'stretch',
|
||||
justify = 'start',
|
||||
gap = 'md',
|
||||
wrap = 'nowrap',
|
||||
grow = false,
|
||||
shrink = false,
|
||||
className,
|
||||
}: FlexProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex',
|
||||
directionClasses[direction],
|
||||
alignClasses[align],
|
||||
justifyClasses[justify],
|
||||
gapClasses[gap],
|
||||
wrapClasses[wrap],
|
||||
grow && 'flex-grow',
|
||||
shrink && 'flex-shrink',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
30
src/components/atoms/Form.tsx
Normal file
30
src/components/atoms/Form.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import {
|
||||
Form as ShadcnForm,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import { UseFormReturn } from 'react-hook-form'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface FormProps {
|
||||
form: UseFormReturn<any>
|
||||
onSubmit: (values: any) => void | Promise<void>
|
||||
children: ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Form({ form, onSubmit, children, className }: FormProps) {
|
||||
return (
|
||||
<ShadcnForm {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className={className}>
|
||||
{children}
|
||||
</form>
|
||||
</ShadcnForm>
|
||||
)
|
||||
}
|
||||
|
||||
export { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage }
|
||||
32
src/components/atoms/HoverCard.tsx
Normal file
32
src/components/atoms/HoverCard.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import {
|
||||
HoverCard as ShadcnHoverCard,
|
||||
HoverCardContent,
|
||||
HoverCardTrigger,
|
||||
} from '@/components/ui/hover-card'
|
||||
import { ReactNode } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface HoverCardProps {
|
||||
trigger: ReactNode
|
||||
children: ReactNode
|
||||
side?: 'top' | 'right' | 'bottom' | 'left'
|
||||
align?: 'start' | 'center' | 'end'
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function HoverCard({
|
||||
trigger,
|
||||
children,
|
||||
side = 'bottom',
|
||||
align = 'center',
|
||||
className,
|
||||
}: HoverCardProps) {
|
||||
return (
|
||||
<ShadcnHoverCard>
|
||||
<HoverCardTrigger asChild>{trigger}</HoverCardTrigger>
|
||||
<HoverCardContent side={side} align={align} className={cn(className)}>
|
||||
{children}
|
||||
</HoverCardContent>
|
||||
</ShadcnHoverCard>
|
||||
)
|
||||
}
|
||||
44
src/components/atoms/InfoPanel.tsx
Normal file
44
src/components/atoms/InfoPanel.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface InfoPanelProps {
|
||||
children: ReactNode
|
||||
variant?: 'info' | 'warning' | 'success' | 'error' | 'default'
|
||||
title?: string
|
||||
icon?: ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
const variantClasses = {
|
||||
default: 'bg-card border-border',
|
||||
info: 'bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-300',
|
||||
warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-700 dark:text-yellow-300',
|
||||
success: 'bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-300',
|
||||
error: 'bg-red-500/10 border-red-500/20 text-red-700 dark:text-red-300',
|
||||
}
|
||||
|
||||
export function InfoPanel({
|
||||
children,
|
||||
variant = 'default',
|
||||
title,
|
||||
icon,
|
||||
className,
|
||||
}: InfoPanelProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-lg border p-4',
|
||||
variantClasses[variant],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{(title || icon) && (
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
{icon && <div className="flex-shrink-0">{icon}</div>}
|
||||
{title && <div className="font-semibold">{title}</div>}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface PageHeaderProps {
|
||||
interface BasicPageHeaderProps {
|
||||
title: string
|
||||
description?: string
|
||||
actions?: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
|
||||
export function BasicPageHeader({ title, description, actions, className }: BasicPageHeaderProps) {
|
||||
return (
|
||||
<div className={cn('flex items-start justify-between mb-6', className)}>
|
||||
<div className="space-y-1">
|
||||
|
||||
47
src/components/atoms/RangeSlider.tsx
Normal file
47
src/components/atoms/RangeSlider.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Slider } from '@/components/ui/slider'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface RangeSliderProps {
|
||||
value: [number, number]
|
||||
onChange: (value: [number, number]) => void
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
label?: string
|
||||
showValue?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function RangeSlider({
|
||||
value,
|
||||
onChange,
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
label,
|
||||
showValue = true,
|
||||
className,
|
||||
}: RangeSliderProps) {
|
||||
return (
|
||||
<div className={cn('space-y-2', className)}>
|
||||
{(label || showValue) && (
|
||||
<div className="flex items-center justify-between">
|
||||
{label && <span className="text-sm font-medium">{label}</span>}
|
||||
{showValue && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{value[0]} - {value[1]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Slider
|
||||
value={value}
|
||||
onValueChange={onChange as any}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
minStepsBetweenThumbs={1}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
src/components/atoms/ResponsiveGrid.tsx
Normal file
57
src/components/atoms/ResponsiveGrid.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
interface GridProps {
|
||||
children: ReactNode
|
||||
columns?: 1 | 2 | 3 | 4 | 5 | 6
|
||||
gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
responsive?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
const columnClasses = {
|
||||
1: 'grid-cols-1',
|
||||
2: 'grid-cols-2',
|
||||
3: 'grid-cols-3',
|
||||
4: 'grid-cols-4',
|
||||
5: 'grid-cols-5',
|
||||
6: 'grid-cols-6',
|
||||
}
|
||||
|
||||
const gapClasses = {
|
||||
none: 'gap-0',
|
||||
xs: 'gap-1',
|
||||
sm: 'gap-2',
|
||||
md: 'gap-4',
|
||||
lg: 'gap-6',
|
||||
xl: 'gap-8',
|
||||
}
|
||||
|
||||
const responsiveClasses = {
|
||||
2: 'grid-cols-1 sm:grid-cols-2',
|
||||
3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
|
||||
4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
|
||||
5: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
|
||||
6: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6',
|
||||
}
|
||||
|
||||
export function ResponsiveGrid({
|
||||
children,
|
||||
columns = 3,
|
||||
gap = 'md',
|
||||
responsive = true,
|
||||
className,
|
||||
}: GridProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'grid',
|
||||
responsive && columns > 1 ? responsiveClasses[columns] : columnClasses[columns],
|
||||
gapClasses[gap],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
22
src/components/atoms/Separator.tsx
Normal file
22
src/components/atoms/Separator.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Separator as ShadcnSeparator } from '@/components/ui/separator'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SeparatorProps {
|
||||
orientation?: 'horizontal' | 'vertical'
|
||||
decorative?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Separator({
|
||||
orientation = 'horizontal',
|
||||
decorative = true,
|
||||
className,
|
||||
}: SeparatorProps) {
|
||||
return (
|
||||
<ShadcnSeparator
|
||||
orientation={orientation}
|
||||
decorative={decorative}
|
||||
className={className}
|
||||
/>
|
||||
)
|
||||
}
|
||||
50
src/components/atoms/Switch.tsx
Normal file
50
src/components/atoms/Switch.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Switch as ShadcnSwitch } from '@/components/ui/switch'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface SwitchProps {
|
||||
checked: boolean
|
||||
onCheckedChange: (checked: boolean) => void
|
||||
label?: string
|
||||
description?: string
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function Switch({
|
||||
checked,
|
||||
onCheckedChange,
|
||||
label,
|
||||
description,
|
||||
disabled,
|
||||
className,
|
||||
}: SwitchProps) {
|
||||
if (!label) {
|
||||
return (
|
||||
<ShadcnSwitch
|
||||
checked={checked}
|
||||
onCheckedChange={onCheckedChange}
|
||||
disabled={disabled}
|
||||
className={className}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('flex items-center justify-between gap-4', className)}>
|
||||
<div className="flex-1 space-y-1">
|
||||
<Label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||
{label}
|
||||
</Label>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
<ShadcnSwitch
|
||||
checked={checked}
|
||||
onCheckedChange={onCheckedChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -25,6 +25,11 @@ export { EmptyState } from './EmptyState'
|
||||
export { DetailRow } from './DetailRow'
|
||||
export { CompletionCard } from './CompletionCard'
|
||||
export { TipsCard } from './TipsCard'
|
||||
export { CountBadge } from './CountBadge'
|
||||
export { ConfirmButton } from './ConfirmButton'
|
||||
export { FilterInput } from './FilterInput'
|
||||
export { BasicPageHeader } from './PageHeader'
|
||||
export { MetricCard } from './MetricCard'
|
||||
|
||||
export { Link } from './Link'
|
||||
export { Divider } from './Divider'
|
||||
@@ -75,3 +80,24 @@ export { Select } from './Select'
|
||||
export { Modal } from './Modal'
|
||||
export { Drawer } from './Drawer'
|
||||
export { Table } from './Table'
|
||||
|
||||
export { Button } from './Button'
|
||||
export { Badge } from './Badge'
|
||||
export { Switch } from './Switch'
|
||||
export { Separator } from './Separator'
|
||||
export { HoverCard } from './HoverCard'
|
||||
export { Calendar } from './Calendar'
|
||||
export { ButtonGroup } from './ButtonGroup'
|
||||
export { CommandPalette } from './CommandPalette'
|
||||
export { ContextMenu } from './ContextMenu'
|
||||
export type { ContextMenuItemType } from './ContextMenu'
|
||||
export { DataTable } from './DataTable'
|
||||
export type { Column } from './DataTable'
|
||||
export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './Form'
|
||||
export { DatePicker } from './DatePicker'
|
||||
export { RangeSlider } from './RangeSlider'
|
||||
export { InfoPanel } from './InfoPanel'
|
||||
export { ResponsiveGrid } from './ResponsiveGrid'
|
||||
export { Flex } from './Flex'
|
||||
export { CircularProgress } from './CircularProgress'
|
||||
export { AvatarGroup } from './AvatarGroup'
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { EmptyStateIcon } from '@/components/atoms'
|
||||
import { EmptyStateIcon, Stack, Heading, Text } from '@/components/atoms'
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon: React.ReactNode
|
||||
@@ -9,15 +9,21 @@ interface EmptyStateProps {
|
||||
|
||||
export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4 py-12 px-4 text-center">
|
||||
<Stack
|
||||
direction="vertical"
|
||||
align="center"
|
||||
justify="center"
|
||||
spacing="md"
|
||||
className="py-12 px-4 text-center"
|
||||
>
|
||||
<EmptyStateIcon icon={icon} />
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold">{title}</h3>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Heading level={3} className="text-lg">{title}</Heading>
|
||||
{description && (
|
||||
<p className="text-sm text-muted-foreground max-w-md">{description}</p>
|
||||
<Text variant="muted" className="max-w-md">{description}</Text>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
{action && <div className="mt-2">{action}</div>}
|
||||
</div>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { IconWrapper } from '@/components/atoms'
|
||||
import { Card, IconWrapper, Stack, Text } from '@/components/atoms'
|
||||
|
||||
interface StatCardProps {
|
||||
icon: React.ReactNode
|
||||
@@ -17,17 +16,17 @@ export function StatCard({ icon, label, value, variant = 'default' }: StatCardPr
|
||||
|
||||
return (
|
||||
<Card className={`p-4 ${variantClasses[variant]}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
<Stack direction="horizontal" align="center" spacing="md">
|
||||
<IconWrapper
|
||||
icon={icon}
|
||||
size="lg"
|
||||
variant={variant === 'default' ? 'muted' : variant}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
<p className="text-2xl font-bold">{value}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Stack direction="vertical" spacing="xs" className="flex-1">
|
||||
<Text variant="caption">{label}</Text>
|
||||
<Text className="text-2xl font-bold">{value}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { IconButton, Tooltip } from '@/components/atoms'
|
||||
import { TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
|
||||
interface ToolbarButtonProps {
|
||||
icon: React.ReactNode
|
||||
label: string
|
||||
onClick: () => void
|
||||
variant?: 'default' | 'outline' | 'ghost' | 'destructive'
|
||||
variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
}
|
||||
@@ -19,19 +19,14 @@ export function ToolbarButton({
|
||||
className = '',
|
||||
}: ToolbarButtonProps) {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={variant}
|
||||
size="icon"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`shrink-0 ${className}`}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{label}</TooltipContent>
|
||||
<Tooltip content={label}>
|
||||
<IconButton
|
||||
icon={icon}
|
||||
onClick={onClick}
|
||||
variant={variant}
|
||||
disabled={disabled}
|
||||
className={`shrink-0 ${className}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -365,6 +365,16 @@
|
||||
"toggleKey": "dockerDebugger",
|
||||
"order": 25,
|
||||
"props": {}
|
||||
},
|
||||
{
|
||||
"id": "atomic-library",
|
||||
"title": "Atomic Components",
|
||||
"icon": "Atom",
|
||||
"component": "AtomicLibraryShowcase",
|
||||
"enabled": true,
|
||||
"shortcut": "ctrl+shift+a",
|
||||
"order": 26,
|
||||
"props": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -156,6 +156,11 @@ export const ComponentRegistry = {
|
||||
() => import('@/components/DockerBuildDebugger').then(m => ({ default: m.DockerBuildDebugger })),
|
||||
'DockerBuildDebugger'
|
||||
),
|
||||
|
||||
AtomicLibraryShowcase: lazyWithPreload(
|
||||
() => import('@/components/AtomicLibraryShowcase').then(m => ({ default: m.AtomicLibraryShowcase })),
|
||||
'AtomicLibraryShowcase'
|
||||
),
|
||||
} as const
|
||||
|
||||
export const DialogRegistry = {
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
Faders,
|
||||
Lightbulb,
|
||||
PencilRuler,
|
||||
Atom,
|
||||
} from '@phosphor-icons/react'
|
||||
import { FeatureToggles } from '@/types/project'
|
||||
|
||||
@@ -152,6 +153,11 @@ export const tabInfo: Record<string, TabInfo> = {
|
||||
icon: <Code size={24} weight="duotone" />,
|
||||
description: 'JSON-driven UI examples',
|
||||
},
|
||||
'atomic-library': {
|
||||
title: 'Atomic Components',
|
||||
icon: <Atom size={24} weight="duotone" />,
|
||||
description: 'Comprehensive atomic component library',
|
||||
},
|
||||
}
|
||||
|
||||
export const navigationGroups: NavigationGroup[] = [
|
||||
|
||||
Reference in New Issue
Block a user