431 lines
14 KiB
TypeScript
431 lines
14 KiB
TypeScript
/**
|
|
* UI Components Example
|
|
*
|
|
* This file demonstrates how to use all the UI components in the design system.
|
|
* Each component is shown with various props and configurations.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardHeader,
|
|
CardBody,
|
|
CardFooter,
|
|
CardImage,
|
|
Container,
|
|
Grid,
|
|
GridItem,
|
|
Badge,
|
|
BadgeGroup,
|
|
Loading,
|
|
LoadingButton,
|
|
LoadingSkeleton,
|
|
} from './index';
|
|
|
|
// Example Icons (using simple SVG)
|
|
const ArrowRightIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
);
|
|
|
|
const CheckIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
);
|
|
|
|
const StarIcon = () => (
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
|
</svg>
|
|
);
|
|
|
|
// Button Examples
|
|
export const ButtonExamples = () => (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold mb-2">Buttons</h3>
|
|
|
|
{/* Primary Buttons */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
<Button variant="primary" size="sm">Small Primary</Button>
|
|
<Button variant="primary" size="md">Medium Primary</Button>
|
|
<Button variant="primary" size="lg">Large Primary</Button>
|
|
<Button variant="primary" icon={<ArrowRightIcon />} iconPosition="right">With Icon</Button>
|
|
<Button variant="primary" loading>Loading</Button>
|
|
<Button variant="primary" disabled>Disabled</Button>
|
|
</div>
|
|
|
|
{/* Secondary Buttons */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
<Button variant="secondary" size="md">Secondary</Button>
|
|
<Button variant="secondary" icon={<CheckIcon />}>Success</Button>
|
|
</div>
|
|
|
|
{/* Outline Buttons */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
<Button variant="outline" size="md">Outline</Button>
|
|
<Button variant="outline" icon={<StarIcon />}>With Icon</Button>
|
|
</div>
|
|
|
|
{/* Ghost Buttons */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
<Button variant="ghost" size="md">Ghost</Button>
|
|
<Button variant="ghost" fullWidth>Full Width Ghost</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Card Examples
|
|
export const CardExamples = () => (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold mb-2">Cards</h3>
|
|
|
|
<Grid cols={1} colsMd={2} gap="md">
|
|
{/* Basic Card */}
|
|
<Card variant="elevated" padding="lg">
|
|
<CardHeader
|
|
title="Basic Card"
|
|
subtitle="With header and content"
|
|
/>
|
|
<CardBody>
|
|
<p>This is a basic card with elevated variant. It includes a header, body content, and footer.</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Button variant="primary" size="sm">Action</Button>
|
|
<Button variant="ghost" size="sm">Cancel</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
{/* Card with Image */}
|
|
<Card variant="flat" padding="none">
|
|
<CardImage
|
|
src="https://via.placeholder.com/400x200/0056b3/ffffff?text=Card+Image"
|
|
alt="Card image"
|
|
height="md"
|
|
/>
|
|
<div className="p-4">
|
|
<CardHeader
|
|
title="Card with Image"
|
|
subtitle="Image at the top"
|
|
/>
|
|
<CardBody>
|
|
<p>Cards can include images for visual appeal.</p>
|
|
</CardBody>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Bordered Card */}
|
|
<Card variant="bordered" padding="md">
|
|
<CardHeader
|
|
title="Bordered Card"
|
|
icon={<StarIcon />}
|
|
action={<Badge variant="success">New</Badge>}
|
|
/>
|
|
<CardBody>
|
|
<p>This card has a strong border and includes an icon in the header.</p>
|
|
</CardBody>
|
|
<CardFooter align="right">
|
|
<Button variant="outline" size="sm">Learn More</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
{/* Hoverable Card */}
|
|
<Card variant="elevated" padding="lg" hoverable>
|
|
<CardHeader title="Hoverable Card" />
|
|
<CardBody>
|
|
<p>Hover over this card to see the effect!</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<BadgeGroup gap="sm">
|
|
<Badge variant="primary">React</Badge>
|
|
<Badge variant="secondary">TypeScript</Badge>
|
|
<Badge variant="info">Tailwind</Badge>
|
|
</BadgeGroup>
|
|
</CardFooter>
|
|
</Card>
|
|
</Grid>
|
|
</div>
|
|
);
|
|
|
|
// Container Examples
|
|
export const ContainerExamples = () => (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold mb-2">Containers</h3>
|
|
|
|
<Container maxWidth="lg" padding="lg" className="bg-gray-50 rounded-lg">
|
|
<p className="text-center">Default Container (max-width: lg, padding: lg)</p>
|
|
</Container>
|
|
|
|
<Container maxWidth="md" padding="md" className="bg-accent rounded-lg">
|
|
<p className="text-center">Medium Container (max-width: md, padding: md)</p>
|
|
</Container>
|
|
|
|
<Container fluid className="bg-primary text-white rounded-lg py-4">
|
|
<p className="text-center">Fluid Container (full width)</p>
|
|
</Container>
|
|
</div>
|
|
);
|
|
|
|
// Grid Examples
|
|
export const GridExamples = () => (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold mb-2">Grid System</h3>
|
|
|
|
{/* Basic Grid */}
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-gray-600">12-column responsive grid:</p>
|
|
<Grid cols={2} colsMd={4} gap="sm">
|
|
{[1, 2, 3, 4, 5, 6, 7, 8].map((item) => (
|
|
<div key={item} className="bg-primary text-white p-4 rounded text-center">
|
|
{item}
|
|
</div>
|
|
))}
|
|
</Grid>
|
|
</div>
|
|
|
|
{/* Grid with Span */}
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-gray-600">Grid with column spans:</p>
|
|
<Grid cols={3} gap="md">
|
|
<GridItem colSpan={2} className="bg-secondary text-white p-4 rounded">
|
|
Span 2 columns
|
|
</GridItem>
|
|
<GridItem className="bg-accent p-4 rounded">1 column</GridItem>
|
|
<GridItem className="bg-warning p-4 rounded">1 column</GridItem>
|
|
<GridItem colSpan={2} className="bg-success text-white p-4 rounded">
|
|
Span 2 columns
|
|
</GridItem>
|
|
</Grid>
|
|
</div>
|
|
|
|
{/* Responsive Grid */}
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-gray-600">Responsive (1 col mobile, 2 tablet, 3 desktop):</p>
|
|
<Grid cols={1} colsSm={2} colsLg={3} gap="lg">
|
|
{[1, 2, 3, 4, 5, 6].map((item) => (
|
|
<div key={item} className="bg-gray-200 p-6 rounded text-center font-medium">
|
|
Item {item}
|
|
</div>
|
|
))}
|
|
</Grid>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Badge Examples
|
|
export const BadgeExamples = () => (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold mb-2">Badges</h3>
|
|
|
|
<div className="space-y-3">
|
|
{/* Badge Variants */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">Color Variants:</p>
|
|
<BadgeGroup gap="sm">
|
|
<Badge variant="primary">Primary</Badge>
|
|
<Badge variant="secondary">Secondary</Badge>
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="warning">Warning</Badge>
|
|
<Badge variant="error">Error</Badge>
|
|
<Badge variant="info">Info</Badge>
|
|
<Badge variant="neutral">Neutral</Badge>
|
|
</BadgeGroup>
|
|
</div>
|
|
|
|
{/* Badge Sizes */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">Sizes:</p>
|
|
<BadgeGroup gap="md">
|
|
<Badge variant="primary" size="sm">Small</Badge>
|
|
<Badge variant="primary" size="md">Medium</Badge>
|
|
<Badge variant="primary" size="lg">Large</Badge>
|
|
</BadgeGroup>
|
|
</div>
|
|
|
|
{/* Badges with Icons */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">With Icons:</p>
|
|
<BadgeGroup gap="sm">
|
|
<Badge variant="success" icon={<CheckIcon />}>Success</Badge>
|
|
<Badge variant="primary" icon={<StarIcon />} iconPosition="right">Star</Badge>
|
|
<Badge variant="warning" icon={<ArrowRightIcon />}>Next</Badge>
|
|
</BadgeGroup>
|
|
</div>
|
|
|
|
{/* Rounded Badges */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">Rounded:</p>
|
|
<BadgeGroup gap="sm">
|
|
<Badge variant="primary" rounded={true}>Rounded</Badge>
|
|
<Badge variant="secondary" rounded={false}>Squared</Badge>
|
|
</BadgeGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Loading Examples
|
|
export const LoadingExamples = () => (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold mb-2">Loading Components</h3>
|
|
|
|
<div className="space-y-4">
|
|
{/* Spinner Sizes */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">Spinner Sizes:</p>
|
|
<div className="flex gap-4 items-center flex-wrap">
|
|
<Loading size="sm" />
|
|
<Loading size="md" />
|
|
<Loading size="lg" />
|
|
<Loading size="xl" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Spinner Variants */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">Spinner Variants:</p>
|
|
<div className="flex gap-4 items-center flex-wrap">
|
|
<Loading size="md" variant="primary" />
|
|
<Loading size="md" variant="secondary" />
|
|
<Loading size="md" variant="neutral" />
|
|
<Loading size="md" variant="contrast" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Loading with Text */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">With Text:</p>
|
|
<Loading size="md" text="Loading data..." />
|
|
</div>
|
|
|
|
{/* Loading Button */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">Loading Button:</p>
|
|
<LoadingButton size="md" text="Processing..." />
|
|
</div>
|
|
|
|
{/* Loading Skeleton */}
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-2">Skeleton Loaders:</p>
|
|
<div className="space-y-2">
|
|
<LoadingSkeleton width="100%" height="1rem" />
|
|
<LoadingSkeleton width="80%" height="1rem" />
|
|
<LoadingSkeleton width="60%" height="1rem" rounded />
|
|
<LoadingSkeleton width="100%" height="4rem" rounded />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// Combined Example - Full Page Layout
|
|
export const FullPageExample = () => (
|
|
<Container maxWidth="6xl" padding="lg">
|
|
<div className="space-y-8">
|
|
{/* Header Section */}
|
|
<div className="text-center space-y-2">
|
|
<h1 className="text-4xl font-bold text-gray-900">UI Components Showcase</h1>
|
|
<p className="text-lg text-gray-600">
|
|
A comprehensive design system for your Next.js application
|
|
</p>
|
|
</div>
|
|
|
|
{/* Hero Card */}
|
|
<Card variant="elevated" padding="xl">
|
|
<CardImage
|
|
src="https://via.placeholder.com/1200x400/0056b3/ffffff?text=Hero+Image"
|
|
alt="Hero"
|
|
height="lg"
|
|
/>
|
|
<CardHeader
|
|
title="Welcome to the Design System"
|
|
subtitle="Built with accessibility and responsiveness in mind"
|
|
icon={<StarIcon />}
|
|
/>
|
|
<CardBody>
|
|
<p>
|
|
This design system provides a complete set of reusable components
|
|
that follow modern design principles and accessibility standards.
|
|
</p>
|
|
</CardBody>
|
|
<CardFooter align="center">
|
|
<Button variant="primary" size="lg" icon={<ArrowRightIcon />} iconPosition="right">
|
|
Get Started
|
|
</Button>
|
|
<Button variant="outline" size="lg">Learn More</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
{/* Feature Grid */}
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-4 text-center">Features</h2>
|
|
<Grid cols={1} colsMd={2} colsLg={3} gap="lg">
|
|
<Card variant="bordered" padding="md">
|
|
<CardHeader title="Responsive" icon={<StarIcon />} />
|
|
<CardBody>
|
|
<p>Works perfectly on all devices from mobile to desktop.</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Badge variant="success">Ready</Badge>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card variant="bordered" padding="md">
|
|
<CardHeader title="Accessible" icon={<CheckIcon />} />
|
|
<CardBody>
|
|
<p>Follows WCAG guidelines with proper ARIA attributes.</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Badge variant="info">WCAG 2.1</Badge>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<Card variant="bordered" padding="md">
|
|
<CardHeader title="TypeScript" icon={<ArrowRightIcon />} />
|
|
<CardBody>
|
|
<p>Fully typed with TypeScript for better developer experience.</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Badge variant="primary">TypeScript</Badge>
|
|
</CardFooter>
|
|
</Card>
|
|
</Grid>
|
|
</div>
|
|
|
|
{/* Action Section */}
|
|
<div className="text-center space-y-3">
|
|
<p className="text-gray-700">Ready to start building?</p>
|
|
<div className="flex gap-2 justify-center flex-wrap">
|
|
<Button variant="primary" size="lg">Start Building</Button>
|
|
<Button variant="secondary" size="lg">View Documentation</Button>
|
|
<Button variant="ghost" size="lg" icon={<StarIcon />}>Star on GitHub</Button>
|
|
</div>
|
|
<BadgeGroup gap="sm" className="justify-center">
|
|
<Badge variant="primary">React</Badge>
|
|
<Badge variant="secondary">Next.js</Badge>
|
|
<Badge variant="info">TypeScript</Badge>
|
|
<Badge variant="success">Tailwind CSS</Badge>
|
|
</BadgeGroup>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
);
|
|
|
|
// Main Export - All Components
|
|
export const AllComponentsExample = () => {
|
|
return (
|
|
<div className="space-y-12 py-8">
|
|
<ButtonExamples />
|
|
<CardExamples />
|
|
<ContainerExamples />
|
|
<GridExamples />
|
|
<BadgeExamples />
|
|
<LoadingExamples />
|
|
<FullPageExample />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AllComponentsExample; |