mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-24 21:54:56 +00:00
Merge pull request #42 from johndoe6345789/codex/refactor-atomiclibraryshowcase-into-subcomponents
Refactor atomic library showcase into section components
This commit is contained in:
GitHub
@@ -1,70 +1,18 @@
|
||||
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,
|
||||
NumberInput,
|
||||
TextGradient,
|
||||
Pulse,
|
||||
QuickActionButton,
|
||||
PanelHeader,
|
||||
LiveIndicator,
|
||||
Sparkle,
|
||||
GlowCard,
|
||||
} from '@/components/atoms'
|
||||
import {
|
||||
Heart,
|
||||
Star,
|
||||
Plus,
|
||||
Trash,
|
||||
Download,
|
||||
ShoppingCart,
|
||||
User,
|
||||
Bell,
|
||||
CheckCircle,
|
||||
Info,
|
||||
WarningCircle,
|
||||
XCircle,
|
||||
Rocket,
|
||||
Code as CodeIcon,
|
||||
} from '@phosphor-icons/react'
|
||||
import { BasicPageHeader, Container, Stack } from '@/components/atoms'
|
||||
import data from '@/data/atomic-library-showcase.json'
|
||||
import { AvatarsUserElementsSection } from '@/components/atomic-library/AvatarsUserElementsSection'
|
||||
import { BadgesIndicatorsSection } from '@/components/atomic-library/BadgesIndicatorsSection'
|
||||
import { ButtonsActionsSection } from '@/components/atomic-library/ButtonsActionsSection'
|
||||
import { CardsMetricsSection } from '@/components/atomic-library/CardsMetricsSection'
|
||||
import { EnhancedComponentsSection } from '@/components/atomic-library/EnhancedComponentsSection'
|
||||
import { FeedbackSection } from '@/components/atomic-library/FeedbackSection'
|
||||
import { FormControlsSection } from '@/components/atomic-library/FormControlsSection'
|
||||
import { InteractiveElementsSection } from '@/components/atomic-library/InteractiveElementsSection'
|
||||
import { LayoutComponentsSection } from '@/components/atomic-library/LayoutComponentsSection'
|
||||
import { ProgressLoadingSection } from '@/components/atomic-library/ProgressLoadingSection'
|
||||
import { SummarySection } from '@/components/atomic-library/SummarySection'
|
||||
import { TypographySection } from '@/components/atomic-library/TypographySection'
|
||||
|
||||
export function AtomicLibraryShowcase() {
|
||||
const [switchChecked, setSwitchChecked] = useState(false)
|
||||
@@ -74,553 +22,41 @@ export function AtomicLibraryShowcase() {
|
||||
const [rating, setRating] = useState(3)
|
||||
const [numberValue, setNumberValue] = useState(10)
|
||||
|
||||
const { pageHeader, sections } = data
|
||||
|
||||
return (
|
||||
<Container size="xl" className="py-8">
|
||||
<BasicPageHeader
|
||||
title="Atomic Component Library"
|
||||
description="Comprehensive collection of reusable atomic components"
|
||||
/>
|
||||
<BasicPageHeader title={pageHeader.title} description={pageHeader.description} />
|
||||
|
||||
<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">
|
||||
<Heading level={2}>Enhanced Components</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="lg">
|
||||
<div>
|
||||
<PanelHeader
|
||||
title="Panel Header Component"
|
||||
subtitle="A reusable header with optional icon and actions"
|
||||
icon={<Rocket size={24} weight="duotone" />}
|
||||
actions={
|
||||
<Button size="sm" variant="outline">Action</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Number Input</Text>
|
||||
<NumberInput
|
||||
label="Quantity"
|
||||
value={numberValue}
|
||||
onChange={setNumberValue}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Text Gradient</Text>
|
||||
<Heading level={2}>
|
||||
<TextGradient from="from-primary" to="to-accent">
|
||||
Beautiful Gradient Text
|
||||
</TextGradient>
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Status Indicators</Text>
|
||||
<Flex gap="lg" align="center">
|
||||
<Flex gap="sm" align="center">
|
||||
<Pulse variant="success" />
|
||||
<Text variant="small">Active</Text>
|
||||
</Flex>
|
||||
<LiveIndicator />
|
||||
<Flex gap="sm" align="center">
|
||||
<Sparkle variant="gold" />
|
||||
<Text variant="small">Featured</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Quick Action Buttons</Text>
|
||||
<ResponsiveGrid columns={4} gap="md">
|
||||
<QuickActionButton
|
||||
icon={<CodeIcon size={32} weight="duotone" />}
|
||||
label="Code"
|
||||
description="Edit files"
|
||||
variant="primary"
|
||||
onClick={() => alert('Code clicked')}
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon={<Rocket size={32} weight="duotone" />}
|
||||
label="Deploy"
|
||||
description="Launch app"
|
||||
variant="accent"
|
||||
onClick={() => alert('Deploy clicked')}
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon={<Star size={32} weight="duotone" />}
|
||||
label="Favorite"
|
||||
description="Save for later"
|
||||
variant="default"
|
||||
onClick={() => alert('Favorite clicked')}
|
||||
/>
|
||||
<QuickActionButton
|
||||
icon={<ShoppingCart size={32} weight="duotone" />}
|
||||
label="Shop"
|
||||
description="Browse items"
|
||||
variant="muted"
|
||||
onClick={() => alert('Shop clicked')}
|
||||
/>
|
||||
</ResponsiveGrid>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">Glow Cards</Text>
|
||||
<ResponsiveGrid columns={3} gap="md">
|
||||
<GlowCard glowColor="primary" intensity="medium">
|
||||
<div className="p-4">
|
||||
<Heading level={4}>Primary Glow</Heading>
|
||||
<Text variant="muted" className="mt-2">
|
||||
Card with primary glow effect
|
||||
</Text>
|
||||
</div>
|
||||
</GlowCard>
|
||||
<GlowCard glowColor="accent" intensity="high">
|
||||
<div className="p-4">
|
||||
<Heading level={4}>Accent Glow</Heading>
|
||||
<Text variant="muted" className="mt-2">
|
||||
Card with accent glow effect
|
||||
</Text>
|
||||
</div>
|
||||
</GlowCard>
|
||||
<GlowCard glowColor="success" intensity="medium">
|
||||
<div className="p-4">
|
||||
<Heading level={4}>Success Glow</Heading>
|
||||
<Text variant="muted" className="mt-2">
|
||||
Card with success glow effect
|
||||
</Text>
|
||||
</div>
|
||||
</GlowCard>
|
||||
</ResponsiveGrid>
|
||||
</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 60+ production-ready components covering buttons,
|
||||
badges, typography, forms, progress indicators, feedback, avatars, cards, enhanced inputs,
|
||||
gradient effects, and layout utilities. All components are fully typed, accessible, and follow the design system.
|
||||
</Text>
|
||||
</InfoPanel>
|
||||
</Section>
|
||||
<ButtonsActionsSection content={sections.buttonsActions} />
|
||||
<BadgesIndicatorsSection content={sections.badgesIndicators} />
|
||||
<TypographySection content={sections.typography} />
|
||||
<FormControlsSection
|
||||
content={sections.formControls}
|
||||
switchChecked={switchChecked}
|
||||
onSwitchChange={setSwitchChecked}
|
||||
selectedDate={selectedDate}
|
||||
onDateChange={setSelectedDate}
|
||||
filterValue={filterValue}
|
||||
onFilterChange={setFilterValue}
|
||||
rating={rating}
|
||||
onRatingChange={setRating}
|
||||
rangeValue={rangeValue}
|
||||
onRangeChange={setRangeValue}
|
||||
/>
|
||||
<ProgressLoadingSection content={sections.progressLoading} />
|
||||
<FeedbackSection content={sections.feedback} />
|
||||
<AvatarsUserElementsSection content={sections.avatarsUserElements} />
|
||||
<CardsMetricsSection content={sections.cardsMetrics} />
|
||||
<InteractiveElementsSection content={sections.interactiveElements} />
|
||||
<LayoutComponentsSection content={sections.layoutComponents} />
|
||||
<EnhancedComponentsSection
|
||||
content={sections.enhancedComponents}
|
||||
numberValue={numberValue}
|
||||
onNumberChange={setNumberValue}
|
||||
/>
|
||||
<SummarySection content={sections.summary} />
|
||||
</Stack>
|
||||
</Container>
|
||||
)
|
||||
|
||||
38
src/components/atomic-library/AvatarsUserElementsSection.tsx
Normal file
38
src/components/atomic-library/AvatarsUserElementsSection.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { Avatar, AvatarGroup, Flex, Heading, Section, Separator, Stack, Text } from '@/components/atoms'
|
||||
|
||||
type AvatarsUserElementsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['avatarsUserElements']
|
||||
|
||||
interface AvatarsUserElementsSectionProps {
|
||||
content: AvatarsUserElementsSectionContent
|
||||
}
|
||||
|
||||
const avatarSizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl']
|
||||
|
||||
export function AvatarsUserElementsSection({ content }: AvatarsUserElementsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.avatarSizesLabel}
|
||||
</Text>
|
||||
<Flex gap="md" align="center">
|
||||
{content.avatarFallbacks.map((fallback, index) => (
|
||||
<Avatar key={fallback} fallback={fallback} size={avatarSizes[index]} />
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.avatarGroupLabel}
|
||||
</Text>
|
||||
<AvatarGroup avatars={content.avatarGroup} max={5} />
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
91
src/components/atomic-library/BadgesIndicatorsSection.tsx
Normal file
91
src/components/atomic-library/BadgesIndicatorsSection.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { Badge, Chip, CountBadge, Dot, Flex, Heading, Section, Separator, Stack, StatusBadge, Text } from '@/components/atoms'
|
||||
import { Star } from '@phosphor-icons/react'
|
||||
|
||||
type BadgesIndicatorsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['badgesIndicators']
|
||||
|
||||
interface BadgesIndicatorsSectionProps {
|
||||
content: BadgesIndicatorsSectionContent
|
||||
}
|
||||
|
||||
export function BadgesIndicatorsSection({ content }: BadgesIndicatorsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.badgesLabel}
|
||||
</Text>
|
||||
<Flex gap="sm" wrap="wrap">
|
||||
{content.badges.map((badge) => (
|
||||
<Badge key={badge.label} variant={badge.variant} size={badge.size} icon={badge.icon ? <Star /> : undefined}>
|
||||
{badge.label}
|
||||
</Badge>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.statusBadgesLabel}
|
||||
</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">
|
||||
{content.chipsLabel}
|
||||
</Text>
|
||||
<Flex gap="sm" wrap="wrap">
|
||||
{content.chips.map((chip) => (
|
||||
<Chip
|
||||
key={chip.label}
|
||||
variant={chip.variant}
|
||||
onRemove={chip.removable ? () => {} : undefined}
|
||||
>
|
||||
{chip.label}
|
||||
</Chip>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.dotsLabel}
|
||||
</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">
|
||||
{content.countBadgeLabel}
|
||||
</Text>
|
||||
<Flex gap="md">
|
||||
{content.countItems.map((item) => (
|
||||
<div key={item.label} className="flex items-center">
|
||||
<Text>{item.label}</Text>
|
||||
<CountBadge count={item.count} max={item.max} variant={item.variant} />
|
||||
</div>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
89
src/components/atomic-library/ButtonsActionsSection.tsx
Normal file
89
src/components/atomic-library/ButtonsActionsSection.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { ActionButton, Button, ButtonGroup, Flex, Heading, IconButton, Section, Separator, Stack, Text } from '@/components/atoms'
|
||||
import { Download, Heart, Plus, Star, Trash } from '@phosphor-icons/react'
|
||||
|
||||
const iconMap = {
|
||||
download: <Download />,
|
||||
plus: <Plus />,
|
||||
star: <Star />,
|
||||
heart: <Heart />,
|
||||
trash: <Trash />,
|
||||
}
|
||||
|
||||
type ButtonsActionsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['buttonsActions']
|
||||
|
||||
interface ButtonsActionsSectionProps {
|
||||
content: ButtonsActionsSectionContent
|
||||
}
|
||||
|
||||
export function ButtonsActionsSection({ content }: ButtonsActionsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.buttonVariantsLabel}
|
||||
</Text>
|
||||
<Flex gap="md" wrap="wrap">
|
||||
{content.buttonVariants.map((variant) => (
|
||||
<Button
|
||||
key={variant.label}
|
||||
variant={variant.variant}
|
||||
loading={variant.loading}
|
||||
leftIcon={variant.iconPosition === 'left' ? iconMap[variant.icon ?? 'plus'] : undefined}
|
||||
rightIcon={variant.iconPosition === 'right' ? iconMap[variant.icon ?? 'download'] : undefined}
|
||||
>
|
||||
{variant.label}
|
||||
</Button>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.buttonGroupLabel}
|
||||
</Text>
|
||||
<ButtonGroup>
|
||||
{content.buttonGroupButtons.map((label) => (
|
||||
<Button key={label} variant="outline" size="sm">
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.iconButtonsLabel}
|
||||
</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">
|
||||
{content.actionButtonsLabel}
|
||||
</Text>
|
||||
<Flex gap="md" wrap="wrap">
|
||||
{content.actionButtons.map((action) => (
|
||||
<ActionButton
|
||||
key={action.label}
|
||||
icon={iconMap[action.icon]}
|
||||
label={action.label}
|
||||
onClick={() => {}}
|
||||
tooltip={action.tooltip}
|
||||
variant={action.variant}
|
||||
/>
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
35
src/components/atomic-library/CardsMetricsSection.tsx
Normal file
35
src/components/atomic-library/CardsMetricsSection.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Heading, MetricCard, ResponsiveGrid, Section, Separator } from '@/components/atoms'
|
||||
import { Bell, ShoppingCart, User } from '@phosphor-icons/react'
|
||||
|
||||
type CardsMetricsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['cardsMetrics']
|
||||
|
||||
interface CardsMetricsSectionProps {
|
||||
content: CardsMetricsSectionContent
|
||||
}
|
||||
|
||||
const metricIcons = {
|
||||
user: <User size={24} />,
|
||||
cart: <ShoppingCart size={24} />,
|
||||
bell: <Bell size={24} />,
|
||||
}
|
||||
|
||||
export function CardsMetricsSection({ content }: CardsMetricsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<ResponsiveGrid columns={3} gap="lg">
|
||||
{content.metrics.map((metric) => (
|
||||
<MetricCard
|
||||
key={metric.label}
|
||||
label={metric.label}
|
||||
value={metric.value}
|
||||
icon={metricIcons[metric.icon]}
|
||||
trend={metric.trend}
|
||||
/>
|
||||
))}
|
||||
</ResponsiveGrid>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
140
src/components/atomic-library/EnhancedComponentsSection.tsx
Normal file
140
src/components/atomic-library/EnhancedComponentsSection.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
GlowCard,
|
||||
Heading,
|
||||
LiveIndicator,
|
||||
NumberInput,
|
||||
PanelHeader,
|
||||
Pulse,
|
||||
QuickActionButton,
|
||||
ResponsiveGrid,
|
||||
Section,
|
||||
Separator,
|
||||
Sparkle,
|
||||
Stack,
|
||||
Text,
|
||||
TextGradient,
|
||||
} from '@/components/atoms'
|
||||
import { Code as CodeIcon, Rocket, ShoppingCart, Star } from '@phosphor-icons/react'
|
||||
|
||||
type EnhancedComponentsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['enhancedComponents']
|
||||
|
||||
interface EnhancedComponentsSectionProps {
|
||||
content: EnhancedComponentsSectionContent
|
||||
numberValue: number
|
||||
onNumberChange: (value: number) => void
|
||||
}
|
||||
|
||||
const quickActionIcons = [
|
||||
<CodeIcon key="code" size={32} weight="duotone" />,
|
||||
<Rocket key="rocket" size={32} weight="duotone" />,
|
||||
<Star key="star" size={32} weight="duotone" />,
|
||||
<ShoppingCart key="cart" size={32} weight="duotone" />,
|
||||
]
|
||||
|
||||
export function EnhancedComponentsSection({
|
||||
content,
|
||||
numberValue,
|
||||
onNumberChange,
|
||||
}: EnhancedComponentsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="lg">
|
||||
<div>
|
||||
<PanelHeader
|
||||
title={content.panelHeader.title}
|
||||
subtitle={content.panelHeader.subtitle}
|
||||
icon={<Rocket size={24} weight="duotone" />}
|
||||
actions={
|
||||
<Button size="sm" variant="outline">
|
||||
{content.panelHeader.actionLabel}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.numberInputLabel}
|
||||
</Text>
|
||||
<NumberInput
|
||||
label={content.numberInput.label}
|
||||
value={numberValue}
|
||||
onChange={onNumberChange}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.textGradientLabel}
|
||||
</Text>
|
||||
<Heading level={2}>
|
||||
<TextGradient from="from-primary" to="to-accent">
|
||||
{content.textGradientText}
|
||||
</TextGradient>
|
||||
</Heading>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.statusIndicatorsLabel}
|
||||
</Text>
|
||||
<Flex gap="lg" align="center">
|
||||
<Flex gap="sm" align="center">
|
||||
<Pulse variant="success" />
|
||||
<Text variant="small">{content.statusActiveLabel}</Text>
|
||||
</Flex>
|
||||
<LiveIndicator />
|
||||
<Flex gap="sm" align="center">
|
||||
<Sparkle variant="gold" />
|
||||
<Text variant="small">{content.statusFeaturedLabel}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.quickActionButtonsLabel}
|
||||
</Text>
|
||||
<ResponsiveGrid columns={4} gap="md">
|
||||
{content.quickActionButtons.map((button, index) => (
|
||||
<QuickActionButton
|
||||
key={button.label}
|
||||
icon={quickActionIcons[index]}
|
||||
label={button.label}
|
||||
description={button.description}
|
||||
variant={button.variant}
|
||||
onClick={() => alert(button.alertMessage)}
|
||||
/>
|
||||
))}
|
||||
</ResponsiveGrid>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.glowCardsLabel}
|
||||
</Text>
|
||||
<ResponsiveGrid columns={3} gap="md">
|
||||
{content.glowCards.map((card) => (
|
||||
<GlowCard key={card.title} glowColor={card.glowColor} intensity={card.intensity}>
|
||||
<div className="p-4">
|
||||
<Heading level={4}>{card.title}</Heading>
|
||||
<Text variant="muted" className="mt-2">
|
||||
{card.description}
|
||||
</Text>
|
||||
</div>
|
||||
</GlowCard>
|
||||
))}
|
||||
</ResponsiveGrid>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
47
src/components/atomic-library/FeedbackSection.tsx
Normal file
47
src/components/atomic-library/FeedbackSection.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Alert, Heading, InfoPanel, ResponsiveGrid, Section, Separator, Spacer, Stack } from '@/components/atoms'
|
||||
import { CheckCircle, Info, WarningCircle, XCircle } from '@phosphor-icons/react'
|
||||
|
||||
type FeedbackSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['feedback']
|
||||
|
||||
interface FeedbackSectionProps {
|
||||
content: FeedbackSectionContent
|
||||
}
|
||||
|
||||
const infoPanelIcons = {
|
||||
info: <Info />,
|
||||
success: <CheckCircle />,
|
||||
warning: <WarningCircle />,
|
||||
error: <XCircle />,
|
||||
}
|
||||
|
||||
export function FeedbackSection({ content }: FeedbackSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
{content.alerts.map((alert) => (
|
||||
<Alert key={alert.title} variant={alert.variant} title={alert.title}>
|
||||
{alert.message}
|
||||
</Alert>
|
||||
))}
|
||||
|
||||
<Spacer size="sm" axis="vertical" />
|
||||
|
||||
<ResponsiveGrid columns={2} gap="md">
|
||||
{content.infoPanels.map((panel) => (
|
||||
<InfoPanel
|
||||
key={panel.title}
|
||||
variant={panel.variant}
|
||||
title={panel.title}
|
||||
icon={infoPanelIcons[panel.variant]}
|
||||
>
|
||||
{panel.message}
|
||||
</InfoPanel>
|
||||
))}
|
||||
</ResponsiveGrid>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
94
src/components/atomic-library/FormControlsSection.tsx
Normal file
94
src/components/atomic-library/FormControlsSection.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import {
|
||||
DatePicker,
|
||||
FilterInput,
|
||||
Heading,
|
||||
RangeSlider,
|
||||
Rating,
|
||||
ResponsiveGrid,
|
||||
Section,
|
||||
Separator,
|
||||
Spacer,
|
||||
Switch,
|
||||
Text,
|
||||
} from '@/components/atoms'
|
||||
|
||||
type FormControlsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['formControls']
|
||||
|
||||
interface FormControlsSectionProps {
|
||||
content: FormControlsSectionContent
|
||||
switchChecked: boolean
|
||||
onSwitchChange: (value: boolean) => void
|
||||
selectedDate: Date | undefined
|
||||
onDateChange: (value: Date | undefined) => void
|
||||
filterValue: string
|
||||
onFilterChange: (value: string) => void
|
||||
rating: number
|
||||
onRatingChange: (value: number) => void
|
||||
rangeValue: [number, number]
|
||||
onRangeChange: (value: [number, number]) => void
|
||||
}
|
||||
|
||||
export function FormControlsSection({
|
||||
content,
|
||||
switchChecked,
|
||||
onSwitchChange,
|
||||
selectedDate,
|
||||
onDateChange,
|
||||
filterValue,
|
||||
onFilterChange,
|
||||
rating,
|
||||
onRatingChange,
|
||||
rangeValue,
|
||||
onRangeChange,
|
||||
}: FormControlsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<ResponsiveGrid columns={2} gap="lg">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.switchLabel}
|
||||
</Text>
|
||||
<Switch
|
||||
checked={switchChecked}
|
||||
onCheckedChange={onSwitchChange}
|
||||
label={content.switch.label}
|
||||
description={content.switch.description}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.datePickerLabel}
|
||||
</Text>
|
||||
<DatePicker value={selectedDate} onChange={onDateChange} placeholder={content.datePlaceholder} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.filterInputLabel}
|
||||
</Text>
|
||||
<FilterInput value={filterValue} onChange={onFilterChange} placeholder={content.filterPlaceholder} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.ratingLabel}
|
||||
</Text>
|
||||
<Rating value={rating} onChange={onRatingChange} />
|
||||
</div>
|
||||
</ResponsiveGrid>
|
||||
|
||||
<Spacer size="md" axis="vertical" />
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.rangeSliderLabel}
|
||||
</Text>
|
||||
<RangeSlider value={rangeValue} onChange={onRangeChange} label={content.rangeSlider.label} showValue />
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
61
src/components/atomic-library/InteractiveElementsSection.tsx
Normal file
61
src/components/atomic-library/InteractiveElementsSection.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import {
|
||||
Button,
|
||||
ColorSwatch,
|
||||
Flex,
|
||||
Heading,
|
||||
HoverCard,
|
||||
Section,
|
||||
Separator,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from '@/components/atoms'
|
||||
|
||||
type InteractiveElementsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['interactiveElements']
|
||||
|
||||
interface InteractiveElementsSectionProps {
|
||||
content: InteractiveElementsSectionContent
|
||||
}
|
||||
|
||||
export function InteractiveElementsSection({ content }: InteractiveElementsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.hoverCardLabel}
|
||||
</Text>
|
||||
<HoverCard trigger={<Button variant="outline">{content.hoverCardTrigger}</Button>}>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Heading level={5}>{content.hoverCardTitle}</Heading>
|
||||
<Text variant="muted">{content.hoverCardDescription}</Text>
|
||||
</Stack>
|
||||
</HoverCard>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.tooltipLabel}
|
||||
</Text>
|
||||
<Tooltip content={content.tooltipContent}>
|
||||
<Button variant="outline">{content.tooltipTrigger}</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.colorSwatchesLabel}
|
||||
</Text>
|
||||
<Flex gap="sm">
|
||||
{content.colorSwatches.map((swatch) => (
|
||||
<ColorSwatch key={swatch.label} color={swatch.color} label={swatch.label} />
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
57
src/components/atomic-library/LayoutComponentsSection.tsx
Normal file
57
src/components/atomic-library/LayoutComponentsSection.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { Badge, Button, Card, Flex, Heading, ResponsiveGrid, Section, Separator, Stack, Text } from '@/components/atoms'
|
||||
|
||||
type LayoutComponentsSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['layoutComponents']
|
||||
|
||||
interface LayoutComponentsSectionProps {
|
||||
content: LayoutComponentsSectionContent
|
||||
}
|
||||
|
||||
const gridItems = [1, 2, 3, 4, 5, 6, 7, 8]
|
||||
|
||||
export function LayoutComponentsSection({ content }: LayoutComponentsSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.responsiveGridLabel}
|
||||
</Text>
|
||||
<ResponsiveGrid columns={4} gap="md">
|
||||
{gridItems.map((item) => (
|
||||
<Card key={item} className="p-4 text-center">
|
||||
<Text>
|
||||
{content.gridItemLabel} {item}
|
||||
</Text>
|
||||
</Card>
|
||||
))}
|
||||
</ResponsiveGrid>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.flexLayoutLabel}
|
||||
</Text>
|
||||
<Flex justify="between" align="center" className="p-4 border rounded-md">
|
||||
<Text>{content.flexLeft}</Text>
|
||||
<Badge>{content.flexCenter}</Badge>
|
||||
<Button size="sm">{content.flexRightAction}</Button>
|
||||
</Flex>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.stackLayoutLabel}
|
||||
</Text>
|
||||
<Stack direction="vertical" spacing="sm" className="p-4 border rounded-md">
|
||||
{content.stackItems.map((item) => (
|
||||
<Text key={item}>{item}</Text>
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
60
src/components/atomic-library/ProgressLoadingSection.tsx
Normal file
60
src/components/atomic-library/ProgressLoadingSection.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import {
|
||||
CircularProgress,
|
||||
Heading,
|
||||
ProgressBar,
|
||||
Section,
|
||||
Separator,
|
||||
Spacer,
|
||||
Stack,
|
||||
Text,
|
||||
Flex,
|
||||
Skeleton,
|
||||
} from '@/components/atoms'
|
||||
|
||||
type ProgressLoadingSectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['progressLoading']
|
||||
|
||||
interface ProgressLoadingSectionProps {
|
||||
content: ProgressLoadingSectionContent
|
||||
}
|
||||
|
||||
export function ProgressLoadingSection({ content }: ProgressLoadingSectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.progressBarLabel}
|
||||
</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">
|
||||
{content.circularProgressLabel}
|
||||
</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">
|
||||
{content.skeletonLabel}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
23
src/components/atomic-library/SummarySection.tsx
Normal file
23
src/components/atomic-library/SummarySection.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Heading, InfoPanel, Section, Separator, Text } from '@/components/atoms'
|
||||
import { CheckCircle } from '@phosphor-icons/react'
|
||||
|
||||
type SummarySectionContent = (typeof import('@/data/atomic-library-showcase.json'))['sections']['summary']
|
||||
|
||||
interface SummarySectionProps {
|
||||
content: SummarySectionContent
|
||||
}
|
||||
|
||||
export function SummarySection({ content }: SummarySectionProps) {
|
||||
return (
|
||||
<Section spacing="lg" className="pb-12">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<InfoPanel variant="success" icon={<CheckCircle />}>
|
||||
<Heading level={5} className="mb-2">
|
||||
{content.panelHeading}
|
||||
</Heading>
|
||||
<Text>{content.panelText}</Text>
|
||||
</InfoPanel>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
64
src/components/atomic-library/TypographySection.tsx
Normal file
64
src/components/atomic-library/TypographySection.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { Code, Heading, Kbd, Link, Section, Separator, Stack, Text } from '@/components/atoms'
|
||||
|
||||
type TypographySectionContent =
|
||||
(typeof import('@/data/atomic-library-showcase.json'))['sections']['typography']
|
||||
|
||||
interface TypographySectionProps {
|
||||
content: TypographySectionContent
|
||||
}
|
||||
|
||||
export function TypographySection({ content }: TypographySectionProps) {
|
||||
return (
|
||||
<Section spacing="lg">
|
||||
<Heading level={2}>{content.title}</Heading>
|
||||
<Separator />
|
||||
<Stack direction="vertical" spacing="md">
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.headingsLabel}
|
||||
</Text>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
{content.headings.map((label, index) => (
|
||||
<Heading key={label} level={(index + 1) as 1 | 2 | 3 | 4 | 5 | 6}>
|
||||
{label}
|
||||
</Heading>
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.textVariantsLabel}
|
||||
</Text>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Text variant="body">{content.textVariants[0]}</Text>
|
||||
<Text variant="caption">{content.textVariants[1]}</Text>
|
||||
<Text variant="muted">{content.textVariants[2]}</Text>
|
||||
<Text variant="small">{content.textVariants[3]}</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Text variant="muted" className="mb-2">
|
||||
{content.inlineElementsLabel}
|
||||
</Text>
|
||||
<Stack direction="vertical" spacing="sm">
|
||||
<Text>
|
||||
{content.inlineElements.kbd.before} <Kbd>{content.inlineElements.kbd.keys[0]}</Kbd> +
|
||||
<Kbd>{content.inlineElements.kbd.keys[1]}</Kbd> {content.inlineElements.kbd.after}
|
||||
</Text>
|
||||
<Text>
|
||||
{content.inlineElements.code.before} <Code inline>{content.inlineElements.code.content}</Code>{' '}
|
||||
{content.inlineElements.code.after}
|
||||
</Text>
|
||||
<Text>
|
||||
{content.inlineElements.link.before}{' '}
|
||||
<Link href="#">{content.inlineElements.link.content}</Link>{' '}
|
||||
{content.inlineElements.link.after}
|
||||
</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
246
src/data/atomic-library-showcase.json
Normal file
246
src/data/atomic-library-showcase.json
Normal file
@@ -0,0 +1,246 @@
|
||||
{
|
||||
"pageHeader": {
|
||||
"title": "Atomic Component Library",
|
||||
"description": "Comprehensive collection of reusable atomic components"
|
||||
},
|
||||
"sections": {
|
||||
"buttonsActions": {
|
||||
"title": "Buttons & Actions",
|
||||
"buttonVariantsLabel": "Button Variants",
|
||||
"buttonVariants": [
|
||||
{ "label": "Default", "variant": "default" },
|
||||
{ "label": "Secondary", "variant": "secondary" },
|
||||
{ "label": "Outline", "variant": "outline" },
|
||||
{ "label": "Ghost", "variant": "ghost" },
|
||||
{ "label": "Destructive", "variant": "destructive" },
|
||||
{ "label": "Loading", "variant": "default", "loading": true },
|
||||
{ "label": "With Icon", "variant": "default", "icon": "plus", "iconPosition": "left" },
|
||||
{ "label": "Download", "variant": "default", "icon": "download", "iconPosition": "right" }
|
||||
],
|
||||
"buttonGroupLabel": "Button Group",
|
||||
"buttonGroupButtons": ["Left", "Middle", "Right"],
|
||||
"iconButtonsLabel": "Icon Buttons",
|
||||
"actionButtonsLabel": "Action Buttons",
|
||||
"actionButtons": [
|
||||
{ "label": "Like", "tooltip": "Like this item", "variant": "default", "icon": "heart" },
|
||||
{ "label": "Favorite", "variant": "outline", "icon": "star" }
|
||||
]
|
||||
},
|
||||
"badgesIndicators": {
|
||||
"title": "Badges & Indicators",
|
||||
"badgesLabel": "Badges",
|
||||
"badges": [
|
||||
{ "label": "Default", "variant": "default" },
|
||||
{ "label": "Secondary", "variant": "secondary" },
|
||||
{ "label": "Destructive", "variant": "destructive" },
|
||||
{ "label": "Outline", "variant": "outline" },
|
||||
{ "label": "With Icon", "variant": "default", "icon": "star" },
|
||||
{ "label": "Small", "variant": "default", "size": "sm" },
|
||||
{ "label": "Large", "variant": "default", "size": "lg" }
|
||||
],
|
||||
"statusBadgesLabel": "Status Badges",
|
||||
"chipsLabel": "Chips",
|
||||
"chips": [
|
||||
{ "label": "React", "variant": "primary" },
|
||||
{ "label": "TypeScript", "variant": "accent" },
|
||||
{ "label": "Tailwind", "variant": "muted" },
|
||||
{ "label": "Removable", "variant": "default", "removable": true }
|
||||
],
|
||||
"dotsLabel": "Dots",
|
||||
"countBadgeLabel": "Count Badge",
|
||||
"countItems": [
|
||||
{ "label": "Notifications", "count": 5 },
|
||||
{ "label": "Messages", "count": 99, "max": 99, "variant": "destructive" }
|
||||
]
|
||||
},
|
||||
"typography": {
|
||||
"title": "Typography",
|
||||
"headingsLabel": "Headings",
|
||||
"headings": ["Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
|
||||
"textVariantsLabel": "Text Variants",
|
||||
"textVariants": [
|
||||
"Body text - regular content",
|
||||
"Caption text - smaller descriptive text",
|
||||
"Muted text - less important information",
|
||||
"Small text - compact information"
|
||||
],
|
||||
"inlineElementsLabel": "Inline Elements",
|
||||
"inlineElements": {
|
||||
"kbd": {
|
||||
"before": "Press",
|
||||
"after": "to search",
|
||||
"keys": ["Ctrl", "K"]
|
||||
},
|
||||
"code": {
|
||||
"before": "Run",
|
||||
"content": "npm install",
|
||||
"after": "to get started"
|
||||
},
|
||||
"link": {
|
||||
"before": "Visit",
|
||||
"content": "our documentation",
|
||||
"after": "to learn more"
|
||||
}
|
||||
}
|
||||
},
|
||||
"formControls": {
|
||||
"title": "Form Controls",
|
||||
"switchLabel": "Switch",
|
||||
"switch": {
|
||||
"label": "Enable notifications",
|
||||
"description": "Receive updates about your account"
|
||||
},
|
||||
"datePickerLabel": "Date Picker",
|
||||
"datePlaceholder": "Select a date",
|
||||
"filterInputLabel": "Filter Input",
|
||||
"filterPlaceholder": "Filter items...",
|
||||
"ratingLabel": "Rating",
|
||||
"rangeSliderLabel": "Range Slider",
|
||||
"rangeSlider": {
|
||||
"label": "Price Range"
|
||||
}
|
||||
},
|
||||
"progressLoading": {
|
||||
"title": "Progress & Loading",
|
||||
"progressBarLabel": "Progress Bar",
|
||||
"circularProgressLabel": "Circular Progress",
|
||||
"skeletonLabel": "Skeleton Loading"
|
||||
},
|
||||
"feedback": {
|
||||
"title": "Feedback",
|
||||
"alerts": [
|
||||
{ "variant": "info", "title": "Information", "message": "This is an informational alert message." },
|
||||
{ "variant": "success", "title": "Success", "message": "Your changes have been saved successfully." },
|
||||
{ "variant": "warning", "title": "Warning", "message": "Please review your input before submitting." },
|
||||
{ "variant": "error", "title": "Error", "message": "Something went wrong. Please try again." }
|
||||
],
|
||||
"infoPanels": [
|
||||
{ "variant": "info", "title": "Info Panel", "message": "This is an informational panel with helpful content." },
|
||||
{ "variant": "success", "title": "Success Panel", "message": "Operation completed successfully!" },
|
||||
{ "variant": "warning", "title": "Warning Panel", "message": "Please proceed with caution." },
|
||||
{ "variant": "error", "title": "Error Panel", "message": "An error has occurred." }
|
||||
]
|
||||
},
|
||||
"avatarsUserElements": {
|
||||
"title": "Avatars & User Elements",
|
||||
"avatarSizesLabel": "Avatar Sizes",
|
||||
"avatarFallbacks": ["XS", "SM", "MD", "LG", "XL"],
|
||||
"avatarGroupLabel": "Avatar Group",
|
||||
"avatarGroup": [
|
||||
{ "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" }
|
||||
]
|
||||
},
|
||||
"cardsMetrics": {
|
||||
"title": "Cards & Metrics",
|
||||
"metrics": [
|
||||
{ "label": "Total Users", "value": "12,345", "icon": "user", "trend": { "value": 12, "direction": "up" } },
|
||||
{ "label": "Orders", "value": "1,234", "icon": "cart", "trend": { "value": 5, "direction": "up" } },
|
||||
{ "label": "Notifications", "value": "45", "icon": "bell" }
|
||||
]
|
||||
},
|
||||
"interactiveElements": {
|
||||
"title": "Interactive Elements",
|
||||
"hoverCardLabel": "Hover Card",
|
||||
"hoverCardTrigger": "Hover over me",
|
||||
"hoverCardTitle": "Additional Information",
|
||||
"hoverCardDescription": "This is extra content shown in a hover card.",
|
||||
"tooltipLabel": "Tooltip",
|
||||
"tooltipContent": "This is a helpful tooltip",
|
||||
"tooltipTrigger": "Hover for tooltip",
|
||||
"colorSwatchesLabel": "Color Swatches",
|
||||
"colorSwatches": [
|
||||
{ "label": "Primary", "color": "#8b5cf6" },
|
||||
{ "label": "Success", "color": "#10b981" },
|
||||
{ "label": "Error", "color": "#ef4444" },
|
||||
{ "label": "Warning", "color": "#f59e0b" }
|
||||
]
|
||||
},
|
||||
"layoutComponents": {
|
||||
"title": "Layout Components",
|
||||
"responsiveGridLabel": "Responsive Grid",
|
||||
"gridItemLabel": "Item",
|
||||
"flexLayoutLabel": "Flex Layout",
|
||||
"flexLeft": "Left Content",
|
||||
"flexCenter": "Center",
|
||||
"flexRightAction": "Right Action",
|
||||
"stackLayoutLabel": "Stack Layout",
|
||||
"stackItems": ["Stacked Item 1", "Stacked Item 2", "Stacked Item 3"]
|
||||
},
|
||||
"enhancedComponents": {
|
||||
"title": "Enhanced Components",
|
||||
"panelHeader": {
|
||||
"title": "Panel Header Component",
|
||||
"subtitle": "A reusable header with optional icon and actions",
|
||||
"actionLabel": "Action"
|
||||
},
|
||||
"numberInputLabel": "Number Input",
|
||||
"numberInput": {
|
||||
"label": "Quantity"
|
||||
},
|
||||
"textGradientLabel": "Text Gradient",
|
||||
"textGradientText": "Beautiful Gradient Text",
|
||||
"statusIndicatorsLabel": "Status Indicators",
|
||||
"statusActiveLabel": "Active",
|
||||
"statusFeaturedLabel": "Featured",
|
||||
"quickActionButtonsLabel": "Quick Action Buttons",
|
||||
"quickActionButtons": [
|
||||
{
|
||||
"label": "Code",
|
||||
"description": "Edit files",
|
||||
"variant": "primary",
|
||||
"alertMessage": "Code clicked"
|
||||
},
|
||||
{
|
||||
"label": "Deploy",
|
||||
"description": "Launch app",
|
||||
"variant": "accent",
|
||||
"alertMessage": "Deploy clicked"
|
||||
},
|
||||
{
|
||||
"label": "Favorite",
|
||||
"description": "Save for later",
|
||||
"variant": "default",
|
||||
"alertMessage": "Favorite clicked"
|
||||
},
|
||||
{
|
||||
"label": "Shop",
|
||||
"description": "Browse items",
|
||||
"variant": "muted",
|
||||
"alertMessage": "Shop clicked"
|
||||
}
|
||||
],
|
||||
"glowCardsLabel": "Glow Cards",
|
||||
"glowCards": [
|
||||
{
|
||||
"title": "Primary Glow",
|
||||
"description": "Card with primary glow effect",
|
||||
"glowColor": "primary",
|
||||
"intensity": "medium"
|
||||
},
|
||||
{
|
||||
"title": "Accent Glow",
|
||||
"description": "Card with accent glow effect",
|
||||
"glowColor": "accent",
|
||||
"intensity": "high"
|
||||
},
|
||||
{
|
||||
"title": "Success Glow",
|
||||
"description": "Card with success glow effect",
|
||||
"glowColor": "success",
|
||||
"intensity": "medium"
|
||||
}
|
||||
]
|
||||
},
|
||||
"summary": {
|
||||
"title": "Summary",
|
||||
"panelHeading": "Atomic Component Library Complete!",
|
||||
"panelText": "The atomic component library includes 60+ production-ready components covering buttons, badges, typography, forms, progress indicators, feedback, avatars, cards, enhanced inputs, gradient effects, and layout utilities. All components are fully typed, accessible, and follow the design system."
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user