diff --git a/src/components/atoms/AtomsSection.tsx b/src/components/atoms/AtomsSection.tsx index 5fcec1c..e8a0d59 100644 --- a/src/components/atoms/AtomsSection.tsx +++ b/src/components/atoms/AtomsSection.tsx @@ -1,21 +1,10 @@ -import { Button } from '@/components/ui/button' -import { Badge } from '@/components/ui/badge' -import { Input } from '@/components/ui/input' -import { Separator } from '@/components/ui/separator' -import { Card } from '@/components/ui/card' -import { - Heart, - Star, - Lightning, - Check, - X, - Plus, - Minus, - MagnifyingGlass, -} from '@phosphor-icons/react' -import { ComponentShowcase } from '@/components/demo/ComponentShowcase' -import { atomsCodeSnippets } from '@/lib/component-code-snippets' import { Snippet } from '@/lib/types' +import { ButtonsSection } from './ButtonsSection' +import { BadgesSection } from './BadgesSection' +import { InputsSection } from './InputsSection' +import { TypographySection } from './TypographySection' +import { IconsSection } from './IconsSection' +import { ColorsSection } from './ColorsSection' interface AtomsSectionProps { onSaveSnippet: (snippet: Omit) => void @@ -24,375 +13,12 @@ interface AtomsSectionProps { export function AtomsSection({ onSaveSnippet }: AtomsSectionProps) { return (
-
-
-

Buttons

-

- Interactive controls with multiple variants and states -

-
- - - -
-
-

- Variants -

-
- - - - - - -
-
- - - -
-

- Sizes -

-
- - - - -
-
- - - -
-

- With Icons -

-
- - - -
-
- - - -
-

- States -

-
- - -
-
-
- - -
- -
-
-

Badges

-

- Small status indicators and labels -

-
- - - -
-
-

- Variants -

-
- Default - Secondary - Destructive - Outline -
-
- - - -
-

- With Icons -

-
- - - Completed - - - - Failed - - - - Featured - -
-
-
- - -
- -
-
-

Inputs

-

- Form input fields for user data entry -

-
- - - -
-
-

- States -

-
- - -
- - -
-
-
- - - -
-

- Types -

-
- - - - -
-
-
- - -
- -
-
-

Typography

-

- Text styles and hierarchical type scale -

-
- - -
-
-

Heading 1

-

- Bricolage Grotesque Bold / 48px -

-
- -
-

Heading 2

-

- Bricolage Grotesque Semibold / 36px -

-
- -
-

Heading 3

-

- Bricolage Grotesque Semibold / 30px -

-
- -
-

Heading 4

-

- Bricolage Grotesque Medium / 24px -

-
- -
-

- Body text - The quick brown fox jumps over the lazy dog. This is - regular body text used for paragraphs and general content. -

-

Inter Regular / 16px

-
- -
-

- Small text - Additional information, captions, and secondary content. -

-

Inter Regular / 14px

-
- -
- - const example = "code text"; - -

- JetBrains Mono Regular / 14px -

-
-
- -
- -
-
-

Icons

-

- Phosphor icon set with multiple weights -

-
- - -
-
- - Heart -
-
- - Star -
-
- - Lightning -
-
- - Check -
-
- - X -
-
- - Plus -
-
- - Minus -
-
- - Search -
-
- -
- -
-
-

Colors

-

- Semantic color palette with accessibility in mind -

-
- - -
-
-
-
-

Primary

- - oklch(0.50 0.18 310) - -
-
-
-
-
-

Secondary

- - oklch(0.30 0.08 310) - -
-
-
-
-
-

Accent

- - oklch(0.72 0.20 25) - -
-
-
-
-
-

Destructive

- - oklch(0.577 0.245 27.325) - -
-
-
-
-
-

Muted

- - oklch(0.25 0.06 310) - -
-
-
-
-
-

Card

- - oklch(0.20 0.12 310) - -
-
-
- -
+ + + + + +
) } diff --git a/src/components/atoms/BadgesSection.tsx b/src/components/atoms/BadgesSection.tsx new file mode 100644 index 0000000..7b3c4eb --- /dev/null +++ b/src/components/atoms/BadgesSection.tsx @@ -0,0 +1,70 @@ +import { Badge } from '@/components/ui/badge' +import { Card } from '@/components/ui/card' +import { Separator } from '@/components/ui/separator' +import { Check, X, Star } from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/demo/ComponentShowcase' +import { atomsCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' + +interface BadgesSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function BadgesSection({ onSaveSnippet }: BadgesSectionProps) { + return ( +
+
+

Badges

+

+ Small status indicators and labels +

+
+ + + +
+
+

+ Variants +

+
+ Default + Secondary + Destructive + Outline +
+
+ + + +
+

+ With Icons +

+
+ + + Completed + + + + Failed + + + + Featured + +
+
+
+ + +
+ ) +} diff --git a/src/components/atoms/ButtonsSection.tsx b/src/components/atoms/ButtonsSection.tsx new file mode 100644 index 0000000..b2256dd --- /dev/null +++ b/src/components/atoms/ButtonsSection.tsx @@ -0,0 +1,107 @@ +import { Button } from '@/components/ui/button' +import { Card } from '@/components/ui/card' +import { Separator } from '@/components/ui/separator' +import { + Heart, + Star, + Lightning, + Plus, +} from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/demo/ComponentShowcase' +import { atomsCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' + +interface ButtonsSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function ButtonsSection({ onSaveSnippet }: ButtonsSectionProps) { + return ( +
+
+

Buttons

+

+ Interactive controls with multiple variants and states +

+
+ + + +
+
+

+ Variants +

+
+ + + + + + +
+
+ + + +
+

+ Sizes +

+
+ + + + +
+
+ + + +
+

+ With Icons +

+
+ + + +
+
+ + + +
+

+ States +

+
+ + +
+
+
+ + +
+ ) +} diff --git a/src/components/atoms/ColorsSection.tsx b/src/components/atoms/ColorsSection.tsx new file mode 100644 index 0000000..debbe3c --- /dev/null +++ b/src/components/atoms/ColorsSection.tsx @@ -0,0 +1,73 @@ +import { Card } from '@/components/ui/card' + +export function ColorsSection() { + return ( +
+
+

Colors

+

+ Semantic color palette with accessibility in mind +

+
+ + +
+
+
+
+

Primary

+ + oklch(0.50 0.18 310) + +
+
+
+
+
+

Secondary

+ + oklch(0.30 0.08 310) + +
+
+
+
+
+

Accent

+ + oklch(0.72 0.20 25) + +
+
+
+
+
+

Destructive

+ + oklch(0.577 0.245 27.325) + +
+
+
+
+
+

Muted

+ + oklch(0.25 0.06 310) + +
+
+
+
+
+

Card

+ + oklch(0.20 0.12 310) + +
+
+
+ +
+ ) +} diff --git a/src/components/atoms/IconsSection.tsx b/src/components/atoms/IconsSection.tsx new file mode 100644 index 0000000..f2ffe94 --- /dev/null +++ b/src/components/atoms/IconsSection.tsx @@ -0,0 +1,61 @@ +import { Card } from '@/components/ui/card' +import { + Heart, + Star, + Lightning, + Check, + X, + Plus, + Minus, + MagnifyingGlass, +} from '@phosphor-icons/react' + +export function IconsSection() { + return ( +
+
+

Icons

+

+ Phosphor icon set with multiple weights +

+
+ + +
+
+ + Heart +
+
+ + Star +
+
+ + Lightning +
+
+ + Check +
+
+ + X +
+
+ + Plus +
+
+ + Minus +
+
+ + Search +
+
+ +
+ ) +} diff --git a/src/components/atoms/InputsSection.tsx b/src/components/atoms/InputsSection.tsx new file mode 100644 index 0000000..1732daa --- /dev/null +++ b/src/components/atoms/InputsSection.tsx @@ -0,0 +1,64 @@ +import { Input } from '@/components/ui/input' +import { Card } from '@/components/ui/card' +import { Separator } from '@/components/ui/separator' +import { MagnifyingGlass } from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/demo/ComponentShowcase' +import { atomsCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' + +interface InputsSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function InputsSection({ onSaveSnippet }: InputsSectionProps) { + return ( +
+
+

Inputs

+

+ Form input fields for user data entry +

+
+ + + +
+
+

+ States +

+
+ + +
+ + +
+
+
+ + + +
+

+ Types +

+
+ + + + +
+
+
+ + +
+ ) +} diff --git a/src/components/atoms/TypographySection.tsx b/src/components/atoms/TypographySection.tsx new file mode 100644 index 0000000..c17454c --- /dev/null +++ b/src/components/atoms/TypographySection.tsx @@ -0,0 +1,71 @@ +import { Card } from '@/components/ui/card' +import { Separator } from '@/components/ui/separator' + +export function TypographySection() { + return ( +
+
+

Typography

+

+ Text styles and hierarchical type scale +

+
+ + +
+
+

Heading 1

+

+ Bricolage Grotesque Bold / 48px +

+
+ +
+

Heading 2

+

+ Bricolage Grotesque Semibold / 36px +

+
+ +
+

Heading 3

+

+ Bricolage Grotesque Semibold / 30px +

+
+ +
+

Heading 4

+

+ Bricolage Grotesque Medium / 24px +

+
+ +
+

+ Body text - The quick brown fox jumps over the lazy dog. This is + regular body text used for paragraphs and general content. +

+

Inter Regular / 16px

+
+ +
+

+ Small text - Additional information, captions, and secondary content. +

+

Inter Regular / 14px

+
+ +
+ + const example = "code text"; + +

+ JetBrains Mono Regular / 14px +

+
+
+ +
+ ) +} diff --git a/src/components/molecules/ContentPreviewCardsSection.tsx b/src/components/molecules/ContentPreviewCardsSection.tsx new file mode 100644 index 0000000..97e72b6 --- /dev/null +++ b/src/components/molecules/ContentPreviewCardsSection.tsx @@ -0,0 +1,72 @@ +import { Card } from '@/components/ui/card' +import { Badge } from '@/components/ui/badge' +import { Calendar } from '@phosphor-icons/react' + +export function ContentPreviewCardsSection() { + return ( +
+
+

Content Preview Cards

+

+ Compact cards displaying content with metadata +

+
+ +
+ +
+
+
+

+ Building Scalable Design Systems +

+

+ Learn how to create and maintain design systems that grow with your team. +

+
+
+
+
+ + Mar 15, 2024 +
+ • + 5 min read +
+
+ Design + System +
+
+ + + +
+
+
+

+ Advanced TypeScript Patterns +

+

+ Explore advanced type system features and practical patterns for production apps. +

+
+
+
+
+ + Mar 12, 2024 +
+ • + 8 min read +
+
+ TypeScript + Tutorial +
+
+ +
+
+ ) +} diff --git a/src/components/molecules/FormFieldsSection.tsx b/src/components/molecules/FormFieldsSection.tsx new file mode 100644 index 0000000..088df0b --- /dev/null +++ b/src/components/molecules/FormFieldsSection.tsx @@ -0,0 +1,60 @@ +import { Card } from '@/components/ui/card' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Envelope, Lock } from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/demo/ComponentShowcase' +import { moleculesCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' + +interface FormFieldsSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function FormFieldsSection({ onSaveSnippet }: FormFieldsSectionProps) { + return ( +
+
+

Form Fields

+

+ Input fields with labels and helper text +

+
+ + + +
+
+ + +
+ +
+ +
+ + +
+

+ We'll never share your email with anyone else. +

+
+ +
+ +
+ + +
+
+
+ + +
+ ) +} diff --git a/src/components/molecules/MoleculesSection.tsx b/src/components/molecules/MoleculesSection.tsx index c5a666a..6bf4baa 100644 --- a/src/components/molecules/MoleculesSection.tsx +++ b/src/components/molecules/MoleculesSection.tsx @@ -1,24 +1,10 @@ -import { Card } from '@/components/ui/card' -import { Button } from '@/components/ui/button' -import { Input } from '@/components/ui/input' -import { Label } from '@/components/ui/label' -import { Badge } from '@/components/ui/badge' -import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' -import { Separator } from '@/components/ui/separator' -import { - MagnifyingGlass, - Heart, - ChatCircle, - Share, - DotsThree, - User, - Envelope, - Lock, - Calendar, -} from '@phosphor-icons/react' -import { ComponentShowcase } from '@/components/demo/ComponentShowcase' -import { moleculesCodeSnippets } from '@/lib/component-code-snippets' import { Snippet } from '@/lib/types' +import { FormFieldsSection } from './FormFieldsSection' +import { SearchBarsSection } from './SearchBarsSection' +import { UserCardsSection } from './UserCardsSection' +import { SocialActionsSection } from './SocialActionsSection' +import { StatusIndicatorsSection } from './StatusIndicatorsSection' +import { ContentPreviewCardsSection } from './ContentPreviewCardsSection' interface MoleculesSectionProps { onSaveSnippet: (snippet: Omit) => void @@ -27,297 +13,12 @@ interface MoleculesSectionProps { export function MoleculesSection({ onSaveSnippet }: MoleculesSectionProps) { return (
-
-
-

Form Fields

-

- Input fields with labels and helper text -

-
- - - -
-
- - -
- -
- -
- - -
-

- We'll never share your email with anyone else. -

-
- -
- -
- - -
-
-
- - -
- -
-
-

Search Bars

-

- Combined search input with actions -

-
- - - -
-
- - -
- - - -
-
- - -
- -
- - - -
- - -
-
- - -
- -
-
-

User Cards

-

- Profile information with avatar and actions -

-
- -
- -
- - - AM - -
-

Alex Morgan

-

@alexmorgan

-

- Product designer passionate about creating delightful user experiences. -

-
- -
- - - -
- - - JD - -
-

Jordan Davis

-

Senior Developer

-
- React - TypeScript -
-
-
- -
-
- -
-
-

Social Actions

-

- Grouped interactive buttons for social features -

-
- - -
-
- - - -
- - - -
-
- - -
-
- - -
-
-
- -
- -
-
-

Status Indicators

-

- Combined elements showing status and information -

-
- - -
-
-
-
- System Online -
- Active -
- - - -
-
-
- Service Unavailable -
- Error -
- - - -
-
-
- Maintenance Mode -
- Scheduled -
-
- -
- -
-
-

Content Preview Cards

-

- Compact cards displaying content with metadata -

-
- -
- -
-
-
-

- Building Scalable Design Systems -

-

- Learn how to create and maintain design systems that grow with your team. -

-
-
-
-
- - Mar 15, 2024 -
- • - 5 min read -
-
- Design - System -
-
- - - -
-
-
-

- Advanced TypeScript Patterns -

-

- Explore advanced type system features and practical patterns for production apps. -

-
-
-
-
- - Mar 12, 2024 -
- • - 8 min read -
-
- TypeScript - Tutorial -
-
- -
-
+ + + + + +
) } diff --git a/src/components/molecules/SearchBarsSection.tsx b/src/components/molecules/SearchBarsSection.tsx new file mode 100644 index 0000000..5316298 --- /dev/null +++ b/src/components/molecules/SearchBarsSection.tsx @@ -0,0 +1,59 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Separator } from '@/components/ui/separator' +import { MagnifyingGlass } from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/demo/ComponentShowcase' +import { moleculesCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' + +interface SearchBarsSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function SearchBarsSection({ onSaveSnippet }: SearchBarsSectionProps) { + return ( +
+
+

Search Bars

+

+ Combined search input with actions +

+
+ + + +
+
+ + +
+ + + +
+
+ + +
+ +
+ + + +
+ + +
+
+ + +
+ ) +} diff --git a/src/components/molecules/SocialActionsSection.tsx b/src/components/molecules/SocialActionsSection.tsx new file mode 100644 index 0000000..43b1cf8 --- /dev/null +++ b/src/components/molecules/SocialActionsSection.tsx @@ -0,0 +1,59 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Separator } from '@/components/ui/separator' +import { Heart, ChatCircle, Share, DotsThree } from '@phosphor-icons/react' + +export function SocialActionsSection() { + return ( +
+
+

Social Actions

+

+ Grouped interactive buttons for social features +

+
+ + +
+
+ + + +
+ + + +
+
+ + +
+
+ + +
+
+
+ +
+ ) +} diff --git a/src/components/molecules/StatusIndicatorsSection.tsx b/src/components/molecules/StatusIndicatorsSection.tsx new file mode 100644 index 0000000..3f412c4 --- /dev/null +++ b/src/components/molecules/StatusIndicatorsSection.tsx @@ -0,0 +1,48 @@ +import { Card } from '@/components/ui/card' +import { Badge } from '@/components/ui/badge' +import { Separator } from '@/components/ui/separator' + +export function StatusIndicatorsSection() { + return ( +
+
+

Status Indicators

+

+ Combined elements showing status and information +

+
+ + +
+
+
+
+ System Online +
+ Active +
+ + + +
+
+
+ Service Unavailable +
+ Error +
+ + + +
+
+
+ Maintenance Mode +
+ Scheduled +
+
+ +
+ ) +} diff --git a/src/components/molecules/UserCardsSection.tsx b/src/components/molecules/UserCardsSection.tsx new file mode 100644 index 0000000..0d28342 --- /dev/null +++ b/src/components/molecules/UserCardsSection.tsx @@ -0,0 +1,55 @@ +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' + +export function UserCardsSection() { + return ( +
+
+

User Cards

+

+ Profile information with avatar and actions +

+
+ +
+ +
+ + + AM + +
+

Alex Morgan

+

@alexmorgan

+

+ Product designer passionate about creating delightful user experiences. +

+
+ +
+ + + +
+ + + JD + +
+

Jordan Davis

+

Senior Developer

+
+ React + TypeScript +
+
+
+ +
+
+ ) +}