diff --git a/src/App.tsx b/src/App.tsx index 454cf19..5991044 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ -import { useState } from 'react' +import { useState, useCallback } from 'react' +import { useKV } from '@github/spark/hooks' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { motion } from 'framer-motion' import { @@ -13,12 +14,25 @@ import { MoleculesSection } from '@/components/molecules/MoleculesSection' import { OrganismsSection } from '@/components/organisms/OrganismsSection' import { TemplatesSection } from '@/components/templates/TemplatesSection' import { SnippetManager } from '@/components/SnippetManager' -import type { AtomicLevel } from '@/lib/types' +import type { AtomicLevel, Snippet } from '@/lib/types' +import { toast } from 'sonner' type TabValue = AtomicLevel | 'snippets' function App() { const [activeTab, setActiveTab] = useState('atoms') + const [snippets, setSnippets] = useKV('snippets', []) + + const handleSaveSnippet = useCallback((snippetData: Omit) => { + const newSnippet: Snippet = { + ...snippetData, + id: Date.now().toString(), + createdAt: Date.now(), + updatedAt: Date.now(), + } + setSnippets((currentSnippets) => [newSnippet, ...(currentSnippets || [])]) + toast.success('Component saved as snippet!') + }, [setSnippets]) return (
@@ -112,7 +126,7 @@ function App() { The fundamental building blocks - basic HTML elements styled as reusable components

- + @@ -122,7 +136,7 @@ function App() { Simple groups of atoms functioning together as a unit - form fields, search bars, and cards

- + @@ -132,7 +146,7 @@ function App() { Complex UI components composed of molecules and atoms - headers, forms, and data displays

- + @@ -142,7 +156,7 @@ function App() { Page-level layouts that combine organisms into complete user interfaces

- + diff --git a/src/components/ComponentShowcase.tsx b/src/components/ComponentShowcase.tsx new file mode 100644 index 0000000..1196e8c --- /dev/null +++ b/src/components/ComponentShowcase.tsx @@ -0,0 +1,88 @@ +import { useState } from 'react' +import { Card } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { FloppyDisk } from '@phosphor-icons/react' +import { SnippetDialog } from '@/components/SnippetDialog' +import { Snippet } from '@/lib/types' + +interface ComponentShowcaseProps { + children: React.ReactNode + code: string + title: string + description?: string + language?: string + category: string + onSaveSnippet: (snippet: Omit) => void +} + +export function ComponentShowcase({ + children, + code, + title, + description = '', + language = 'tsx', + category, + onSaveSnippet, +}: ComponentShowcaseProps) { + const [dialogOpen, setDialogOpen] = useState(false) + const [prefilledData, setPrefilledData] = useState<{ + title: string + description: string + code: string + language: string + category: string + } | null>(null) + + const handleSaveClick = () => { + setPrefilledData({ + title, + description, + code, + language, + category, + }) + setDialogOpen(true) + } + + const handleSave = (snippetData: Omit) => { + onSaveSnippet(snippetData) + setDialogOpen(false) + setPrefilledData(null) + } + + return ( + <> + +
+ +
+ {children} + + {prefilledData && ( + + )} + + ) +} diff --git a/src/components/atoms/AtomsSection.tsx b/src/components/atoms/AtomsSection.tsx index 8c40ff6..28a180c 100644 --- a/src/components/atoms/AtomsSection.tsx +++ b/src/components/atoms/AtomsSection.tsx @@ -13,8 +13,15 @@ import { Minus, MagnifyingGlass, } from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/ComponentShowcase' +import { atomsCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' -export function AtomsSection() { +interface AtomsSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function AtomsSection({ onSaveSnippet }: AtomsSectionProps) { return (
@@ -25,75 +32,83 @@ export function AtomsSection() {

- -
-
-

- Variants -

-
- - - - - - + + +
+
+

+ Variants +

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

+ Sizes +

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

+ With Icons +

+
+ + + +
+
+ + + +
+

+ States +

+
+ + +
- - - -
-

- Sizes -

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

- With Icons -

-
- - - -
-
- - - -
-

- States -

-
- - -
-
-
- + +
@@ -104,43 +119,51 @@ export function AtomsSection() {

- -
-
-

- Variants -

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

+ Variants +

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

+ With Icons +

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

- With Icons -

-
- - - Completed - - - - Failed - - - - Featured - -
-
-
- + +
@@ -151,37 +174,45 @@ export function AtomsSection() {

- -
-
-

- States -

-
- - -
- - + + +
+
+

+ States +

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

+ Types +

+
+ + + +
- - - -
-

- Types -

-
- - - - -
-
-
- + +
diff --git a/src/components/molecules/MoleculesSection.tsx b/src/components/molecules/MoleculesSection.tsx index 119f455..9fbd883 100644 --- a/src/components/molecules/MoleculesSection.tsx +++ b/src/components/molecules/MoleculesSection.tsx @@ -16,8 +16,15 @@ import { Lock, Calendar, } from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/ComponentShowcase' +import { moleculesCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' -export function MoleculesSection() { +interface MoleculesSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function MoleculesSection({ onSaveSnippet }: MoleculesSectionProps) { return (
@@ -28,33 +35,41 @@ export function MoleculesSection() {

- -
-
- - -
- -
- -
- - + + +
+
+ +
-

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

-
-
- -
- - +
+ +
+ + +
+

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

+
+ +
+ +
+ + +
-
- + +
@@ -65,31 +80,39 @@ export function MoleculesSection() {

- -
-
- - -
- - - -
-
+ + +
+
- -
- + -
- - +
+
+ + +
+ +
+ + + +
+ + +
-
- + +
diff --git a/src/components/organisms/OrganismsSection.tsx b/src/components/organisms/OrganismsSection.tsx index 618a06d..f00ce9c 100644 --- a/src/components/organisms/OrganismsSection.tsx +++ b/src/components/organisms/OrganismsSection.tsx @@ -32,8 +32,15 @@ import { Plus, } from '@phosphor-icons/react' import { useState } from 'react' +import { ComponentShowcase } from '@/components/ComponentShowcase' +import { organismsCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' -export function OrganismsSection() { +interface OrganismsSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function OrganismsSection({ onSaveSnippet }: OrganismsSectionProps) { const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid') return ( @@ -46,47 +53,55 @@ export function OrganismsSection() {

- -
-
-
-

BrandName

- +
+
+ - - - -
-
- - - - - U - + + + U + +
-
-
-

- Primary navigation with user menu and notifications -

-
- +
+

+ Primary navigation with user menu and notifications +

+
+ +
diff --git a/src/components/templates/TemplatesSection.tsx b/src/components/templates/TemplatesSection.tsx index 1f9f6dd..8932151 100644 --- a/src/components/templates/TemplatesSection.tsx +++ b/src/components/templates/TemplatesSection.tsx @@ -17,8 +17,15 @@ import { Users, ShoppingCart, } from '@phosphor-icons/react' +import { ComponentShowcase } from '@/components/ComponentShowcase' +import { templatesCodeSnippets } from '@/lib/component-code-snippets' +import { Snippet } from '@/lib/types' -export function TemplatesSection() { +interface TemplatesSectionProps { + onSaveSnippet: (snippet: Omit) => void +} + +export function TemplatesSection({ onSaveSnippet }: TemplatesSectionProps) { return (
@@ -29,26 +36,33 @@ export function TemplatesSection() {

- -
-
-
-

Dashboard

-
-
- - - - - U - + + +
+
+
+

Dashboard

+
+
+ + + + + U + +
-
+
@@ -185,100 +200,108 @@ export function TemplatesSection() {

- -
-
-
-
-

ProductName

-
-
- - - - + + +
+
+
+
+

ProductName

+
+
+ + + + +
-
-
- New Release -

- Build Amazing Products Faster -

-

- The complete toolkit for modern product development. Ship faster with our - component library and design system. -

-
- + +
+
+ +
+
+

Features

+

+ Everything you need to build production-ready applications +

+
+ +
+ +
+ +
+

Analytics

+

+ Track and analyze your product metrics in real-time +

+ + + +
+ +
+

Collaboration

+

+ Work together with your team seamlessly +

+ + + +
+ +
+

Customizable

+

+ Adapt the platform to your specific needs +

+ +
+
+ +
+

Ready to get started?

+

+ Join thousands of teams already building with our platform +

+ -
-
- -
-
-

Features

-

- Everything you need to build production-ready applications -

-
- -
- -
- -
-

Analytics

-

- Track and analyze your product metrics in real-time -

- - - -
- -
-

Collaboration

-

- Work together with your team seamlessly -

- - - -
- -
-

Customizable

-

- Adapt the platform to your specific needs -

- -
-
- -
-

Ready to get started?

-

- Join thousands of teams already building with our platform -

- -
- + +
diff --git a/src/lib/component-code-snippets.ts b/src/lib/component-code-snippets.ts new file mode 100644 index 0000000..33c20d8 --- /dev/null +++ b/src/lib/component-code-snippets.ts @@ -0,0 +1,416 @@ +export const atomsCodeSnippets = { + buttonDefault: ``, + buttonSecondary: ``, + buttonDestructive: ``, + buttonOutline: ``, + buttonGhost: ``, + buttonLink: ``, + buttonSizes: ` + + +`, + buttonWithIcons: ` +`, + badgeVariants: `Default +Secondary +Destructive +Outline`, + badgeWithIcons: ` + + Completed + + + + Failed +`, + inputBasic: ``, + inputWithIcon: `
+ + +
`, + inputTypes: ` + + +`, +} + +export const moleculesCodeSnippets = { + formField: `
+ +
+ + +
+

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

+
`, + searchBar: `
+ + +
`, + searchBarWithButton: `
+
+ + +
+ +
`, + userCard: ` +
+ + + AM + +
+

Alex Morgan

+

@alexmorgan

+

+ Product designer passionate about creating delightful user experiences. +

+
+ +
+`, + socialActions: `
+ + + +
`, + statusIndicator: `
+
+
+ System Online +
+ Active +
`, + contentCard: ` +
+
+
+

+ 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 +
+
+`, +} + +export const organismsCodeSnippets = { + navigationBar: `
+
+
+

BrandName

+ +
+
+ + + + + U + +
+
+
`, + dataTable: ` +
+
+

Recent Transactions

+ +
+
+ + + + Status + Transaction + Date + Amount + + + + + + Completed + + Payment received + Mar 15, 2024 + $250.00 + + +
+`, + form: ` +
+
+

Create Account

+

+ Fill in your details to get started +

+
+ +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ +
+ + +
+ +
`, + taskList: ` +
+
+

Project Tasks

+ +
+
+
+
+
+ +
+

Design system documentation

+

+ Complete the component library documentation +

+
+ Design + Completed +
+
+
+
+
+`, + sidebarNavigation: `
+ +
+

+ Main content area +

+
+
`, +} + +export const templatesCodeSnippets = { + dashboardLayout: `
+
+
+

Dashboard

+
+ + + U + +
+
+
+
+ +
+

Overview

+
+ +

Total Revenue

+

$45,231

+ +
+
+
+
`, + landingPage: `
+
+
+
+
+

ProductName

+
+
+ + +
+
+
+
+ New Release +

+ Build Amazing Products Faster +

+

+ The complete toolkit for modern product development. +

+ +
+
`, + ecommercePage: `
+
+
+

Store

+ +
+
+
+
+
+
+ New Arrival +

Premium Product

+ $299.00 + +
+
+
+
`, + blogArticle: `
+
+

Blog

+
+
+
+
+ Design + Tutorial +
+

+ Building a Comprehensive Component Library +

+
+ + AW + +
+

Alex Writer

+

+ March 15, 2024 · 10 min read +

+
+
+
+

+ Design systems have become an essential part of modern product development. +

+
+
+
`, +}