diff --git a/src/data/seed-snippets.json b/src/data/seed-snippets.json new file mode 100644 index 0000000..0637a08 --- /dev/null +++ b/src/data/seed-snippets.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/src/data/seed-templates.json b/src/data/seed-templates.json new file mode 100644 index 0000000..0637a08 --- /dev/null +++ b/src/data/seed-templates.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/src/data/snippets/atoms.json b/src/data/snippets/atoms.json new file mode 100644 index 0000000..293c806 --- /dev/null +++ b/src/data/snippets/atoms.json @@ -0,0 +1,15 @@ +{ + "buttonDefault": "interface ButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction DefaultButton({ children = \"Default\", onClick }: ButtonProps) {\n return \n}", + "buttonSecondary": "interface ButtonProps {\n children?: string\n variant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\" | \"ghost\" | \"link\"\n onClick?: () => void\n}\n\nfunction CustomButton({ children = \"Secondary\", variant = \"secondary\", onClick }: ButtonProps) {\n return \n}", + "buttonDestructive": "interface DestructiveButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction DestructiveButton({ children = \"Destructive\", onClick }: DestructiveButtonProps) {\n return \n}", + "buttonOutline": "interface OutlineButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction OutlineButton({ children = \"Outline\", onClick }: OutlineButtonProps) {\n return \n}", + "buttonGhost": "interface GhostButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction GhostButton({ children = \"Ghost\", onClick }: GhostButtonProps) {\n return \n}", + "buttonLink": "interface LinkButtonProps {\n children?: string\n onClick?: () => void\n}\n\nfunction LinkButton({ children = \"Link\", onClick }: LinkButtonProps) {\n return \n}", + "buttonSizes": "interface ButtonSizesProps {\n smallText?: string\n defaultText?: string\n largeText?: string\n onSmallClick?: () => void\n onDefaultClick?: () => void\n onLargeClick?: () => void\n onIconClick?: () => void\n}\n\nfunction ButtonSizes({ \n smallText = \"Small\", \n defaultText = \"Default\", \n largeText = \"Large\",\n onSmallClick,\n onDefaultClick,\n onLargeClick,\n onIconClick\n}: ButtonSizesProps) {\n return (\n <>\n \n \n \n \n \n )\n}", + "buttonWithIcons": "interface IconButtonProps {\n primaryText?: string\n secondaryText?: string\n onPrimaryClick?: () => void\n onSecondaryClick?: () => void\n}\n\nfunction IconButtons({ \n primaryText = \"Favorite\", \n secondaryText = \"Add Item\",\n onPrimaryClick,\n onSecondaryClick\n}: IconButtonProps) {\n return (\n <>\n \n \n \n )\n}", + "badgeVariants": "interface BadgeVariantsProps {\n defaultText?: string\n secondaryText?: string\n destructiveText?: string\n outlineText?: string\n}\n\nfunction BadgeVariants({ \n defaultText = \"Default\",\n secondaryText = \"Secondary\",\n destructiveText = \"Destructive\",\n outlineText = \"Outline\"\n}: BadgeVariantsProps) {\n return (\n <>\n {defaultText}\n {secondaryText}\n {destructiveText}\n {outlineText}\n \n )\n}", + "badgeWithIcons": "interface IconBadgeProps {\n completedText?: string\n failedText?: string\n}\n\nfunction IconBadges({ \n completedText = \"Completed\",\n failedText = \"Failed\"\n}: IconBadgeProps) {\n return (\n <>\n \n \n {completedText}\n \n \n \n {failedText}\n \n \n )\n}", + "inputBasic": "interface InputProps {\n placeholder?: string\n value?: string\n onChange?: (e: React.ChangeEvent) => void\n}\n\nfunction BasicInput({ placeholder = \"Default input\", value, onChange }: InputProps) {\n return \n}", + "inputWithIcon": "interface SearchInputProps {\n placeholder?: string\n value?: string\n onChange?: (e: React.ChangeEvent) => void\n}\n\nfunction SearchInput({ placeholder = \"Search...\", value, onChange }: SearchInputProps) {\n return (\n
\n \n \n
\n )\n}", + "inputTypes": "interface TypedInputsProps {\n textPlaceholder?: string\n emailPlaceholder?: string\n passwordPlaceholder?: string\n numberPlaceholder?: string\n onTextChange?: (e: React.ChangeEvent) => void\n onEmailChange?: (e: React.ChangeEvent) => void\n onPasswordChange?: (e: React.ChangeEvent) => void\n onNumberChange?: (e: React.ChangeEvent) => void\n}\n\nfunction TypedInputs({ \n textPlaceholder = \"Text input\",\n emailPlaceholder = \"email@example.com\",\n passwordPlaceholder = \"Password\",\n numberPlaceholder = \"123\",\n onTextChange,\n onEmailChange,\n onPasswordChange,\n onNumberChange\n}: TypedInputsProps) {\n return (\n <>\n \n \n \n \n \n )\n}" +} \ No newline at end of file diff --git a/src/data/snippets/molecules.json b/src/data/snippets/molecules.json new file mode 100644 index 0000000..2e1809a --- /dev/null +++ b/src/data/snippets/molecules.json @@ -0,0 +1,9 @@ +{ + "formField": "interface FormFieldProps {\n label?: string\n placeholder?: string\n helperText?: string\n id?: string\n value?: string\n onChange?: (e: React.ChangeEvent) => void\n}\n\nfunction EmailFormField({ \n label = \"Email Address\",\n placeholder = \"john@example.com\",\n helperText = \"We'll never share your email with anyone else.\",\n id = \"email\",\n value,\n onChange\n}: FormFieldProps) {\n return (\n
\n \n
\n \n \n
\n

\n {helperText}\n

\n
\n )\n}", + "searchBar": "interface SearchBarProps {\n placeholder?: string\n value?: string\n onChange?: (e: React.ChangeEvent) => void\n}\n\nfunction SearchBar({ placeholder = \"Search...\", value, onChange }: SearchBarProps) {\n return (\n
\n \n \n
\n )\n}", + "searchBarWithButton": "interface SearchBarWithButtonProps {\n placeholder?: string\n buttonText?: string\n value?: string\n onChange?: (e: React.ChangeEvent) => void\n onSearch?: () => void\n}\n\nfunction SearchBarWithButton({ \n placeholder = \"Search...\",\n buttonText = \"Search\",\n value,\n onChange,\n onSearch\n}: SearchBarWithButtonProps) {\n return (\n
\n
\n \n \n
\n \n
\n )\n}", + "userCard": "interface UserCardProps {\n name?: string\n username?: string\n bio?: string\n avatarUrl?: string\n avatarFallback?: string\n buttonText?: string\n onButtonClick?: () => void\n}\n\nfunction UserCard({ \n name = \"Alex Morgan\",\n username = \"@alexmorgan\",\n bio = \"Product designer passionate about creating delightful user experiences.\",\n avatarUrl = \"https://i.pravatar.cc/150?img=1\",\n avatarFallback = \"AM\",\n buttonText = \"Follow\",\n onButtonClick\n}: UserCardProps) {\n return (\n \n
\n \n \n {avatarFallback}\n \n
\n

{name}

\n

{username}

\n

\n {bio}\n

\n
\n \n
\n \n )\n}", + "socialActions": "interface SocialActionsProps {\n likeText?: string\n commentText?: string\n shareText?: string\n onLike?: () => void\n onComment?: () => void\n onShare?: () => void\n}\n\nfunction SocialActions({ \n likeText = \"Like\",\n commentText = \"Comment\",\n shareText = \"Share\",\n onLike,\n onComment,\n onShare\n}: SocialActionsProps) {\n return (\n
\n \n \n \n
\n )\n}", + "statusIndicator": "interface StatusIndicatorProps {\n statusText?: string\n badgeText?: string\n isActive?: boolean\n}\n\nfunction StatusIndicator({ \n statusText = \"System Online\",\n badgeText = \"Active\",\n isActive = true\n}: StatusIndicatorProps) {\n return (\n
\n
\n
\n {statusText}\n
\n {badgeText}\n
\n )\n}", + "contentCard": "interface ContentCardProps {\n title?: string\n description?: string\n date?: string\n readTime?: string\n tags?: string[]\n}\n\nfunction ContentCard({ \n title = \"Building Scalable Design Systems\",\n description = \"Learn how to create and maintain design systems that grow with your team.\",\n date = \"Mar 15, 2024\",\n readTime = \"5 min read\",\n tags = [\"Design\", \"System\"]\n}: ContentCardProps) {\n return (\n \n
\n
\n
\n

\n {title}\n

\n

\n {description}\n

\n
\n
\n
\n
\n \n {date}\n
\n •\n {readTime}\n
\n
\n {tags.map((tag) => (\n {tag}\n ))}\n
\n
\n \n )\n}" +} \ No newline at end of file diff --git a/src/data/snippets/organisms.json b/src/data/snippets/organisms.json new file mode 100644 index 0000000..e93e96a --- /dev/null +++ b/src/data/snippets/organisms.json @@ -0,0 +1,7 @@ +{ + "navigationBar": "interface NavigationBarProps {\n brandName?: string\n navItems?: Array<{ label: string; icon: React.ReactNode; onClick?: () => void }>\n avatarUrl?: string\n avatarFallback?: string\n onNotificationClick?: () => void\n onSettingsClick?: () => void\n}\n\nfunction NavigationBar({ \n brandName = \"BrandName\",\n navItems = [\n { label: \"Home\", icon: },\n { label: \"Analytics\", icon: },\n { label: \"Projects\", icon: }\n ],\n avatarUrl = \"https://i.pravatar.cc/150?img=3\",\n avatarFallback = \"U\",\n onNotificationClick,\n onSettingsClick\n}: NavigationBarProps) {\n return (\n
\n
\n
\n

{brandName}

\n \n
\n
\n \n \n \n \n {avatarFallback}\n \n
\n
\n
\n )\n}", + "dataTable": "interface Transaction {\n id: string\n status: string\n statusVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n description: string\n date: string\n amount: string\n isNegative?: boolean\n}\n\ninterface DataTableProps {\n title?: string\n exportButtonText?: string\n transactions?: Transaction[]\n onExport?: () => void\n}\n\nfunction DataTable({ \n title = \"Recent Transactions\",\n exportButtonText = \"Export\",\n transactions = [\n { id: \"1\", status: \"Completed\", description: \"Payment received\", date: \"Mar 15, 2024\", amount: \"$250.00\" }\n ],\n onExport\n}: DataTableProps) {\n return (\n \n
\n
\n

{title}

\n \n
\n
\n \n \n \n Status\n Transaction\n Date\n Amount\n \n \n \n {transactions.map((transaction) => (\n \n \n {transaction.status}\n \n {transaction.description}\n {transaction.date}\n {transaction.amount}\n \n ))}\n \n
\n \n )\n}", + "form": "interface CreateAccountFormProps {\n title?: string\n description?: string\n firstNameLabel?: string\n lastNameLabel?: string\n emailLabel?: string\n firstNamePlaceholder?: string\n lastNamePlaceholder?: string\n emailPlaceholder?: string\n cancelButtonText?: string\n submitButtonText?: string\n onCancel?: () => void\n onSubmit?: (data: { firstName: string; lastName: string; email: string }) => void\n}\n\nfunction CreateAccountForm({ \n title = \"Create Account\",\n description = \"Fill in your details to get started\",\n firstNameLabel = \"First Name\",\n lastNameLabel = \"Last Name\",\n emailLabel = \"Email\",\n firstNamePlaceholder = \"John\",\n lastNamePlaceholder = \"Doe\",\n emailPlaceholder = \"john@example.com\",\n cancelButtonText = \"Cancel\",\n submitButtonText = \"Create Account\",\n onCancel,\n onSubmit\n}: CreateAccountFormProps) {\n const [firstName, setFirstName] = useState(\"\")\n const [lastName, setLastName] = useState(\"\")\n const [email, setEmail] = useState(\"\")\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault()\n onSubmit?.({ firstName, lastName, email })\n }\n\n return (\n \n
\n
\n

{title}

\n

\n {description}\n

\n
\n \n
\n
\n \n setFirstName(e.target.value)}\n />\n
\n
\n \n setLastName(e.target.value)}\n />\n
\n
\n
\n \n
\n \n setEmail(e.target.value)}\n />\n
\n
\n \n
\n \n \n
\n \n
\n )\n}", + "taskList": "interface Task {\n id: string\n title: string\n description: string\n status: string\n statusColor?: \"accent\" | \"destructive\"\n badgeText: string\n badgeVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n icon: React.ReactNode\n}\n\ninterface TaskListProps {\n title?: string\n addButtonText?: string\n tasks?: Task[]\n onAddTask?: () => void\n}\n\nfunction TaskList({ \n title = \"Project Tasks\",\n addButtonText = \"Add Task\",\n tasks = [\n {\n id: \"1\",\n title: \"Design system documentation\",\n description: \"Complete the component library documentation\",\n status: \"Completed\",\n statusColor: \"accent\" as const,\n badgeText: \"Design\",\n badgeVariant: \"secondary\" as const,\n icon: \n }\n ],\n onAddTask\n}: TaskListProps) {\n return (\n \n
\n
\n

{title}

\n \n
\n
\n
\n {tasks.map((task) => (\n
\n
\n {task.icon}\n
\n

{task.title}

\n

\n {task.description}\n

\n
\n {task.badgeText}\n {task.status}\n
\n
\n
\n
\n ))}\n
\n \n )\n}", + "sidebarNavigation": "interface SidebarNavItem {\n label: string\n icon: React.ReactNode\n variant?: \"default\" | \"ghost\"\n onClick?: () => void\n}\n\ninterface SidebarNavigationProps {\n title?: string\n navItems?: SidebarNavItem[]\n contentText?: string\n}\n\nfunction SidebarNavigation({ \n title = \"Dashboard\",\n navItems = [\n { label: \"Home\", icon: , variant: \"ghost\" as const },\n { label: \"Analytics\", icon: , variant: \"default\" as const },\n { label: \"Projects\", icon: , variant: \"ghost\" as const }\n ],\n contentText = \"Main content area\"\n}: SidebarNavigationProps) {\n return (\n
\n \n
\n

\n {contentText}\n

\n
\n
\n )\n}" +} \ No newline at end of file diff --git a/src/data/snippets/templates.json b/src/data/snippets/templates.json new file mode 100644 index 0000000..9c959f4 --- /dev/null +++ b/src/data/snippets/templates.json @@ -0,0 +1,6 @@ +{ + "dashboardLayout": "interface StatCard {\n label: string\n value: string\n trend?: string\n}\n\ninterface DashboardLayoutProps {\n title?: string\n navItems?: Array<{ label: string; icon: React.ReactNode; variant?: \"default\" | \"ghost\" }>\n avatarUrl?: string\n avatarFallback?: string\n stats?: StatCard[]\n onNotificationClick?: () => void\n}\n\nfunction DashboardLayout({ \n title = \"Dashboard\",\n navItems = [\n { label: \"Overview\", icon: , variant: \"default\" as const },\n { label: \"Analytics\", icon: , variant: \"ghost\" as const }\n ],\n avatarUrl,\n avatarFallback = \"U\",\n stats = [\n { label: \"Total Revenue\", value: \"$45,231\", trend: \"+20.1% from last month\" }\n ],\n onNotificationClick\n}: DashboardLayoutProps) {\n return (\n
\n
\n
\n

{title}

\n
\n \n \n {avatarUrl && }\n {avatarFallback}\n \n
\n
\n
\n
\n \n
\n

Overview

\n
\n {stats.map((stat) => (\n \n

{stat.label}

\n

{stat.value}

\n {stat.trend && (\n

{stat.trend}

\n )}\n \n ))}\n
\n
\n
\n
\n )\n}", + "landingPage": "interface LandingPageProps {\n brandName?: string\n navItems?: string[]\n badge?: string\n headline?: string\n description?: string\n primaryCta?: string\n secondaryCta?: string\n onPrimaryCta?: () => void\n onSecondaryCta?: () => void\n}\n\nfunction LandingPage({ \n brandName = \"ProductName\",\n navItems = [\"Features\", \"Sign Up\"],\n badge = \"New Release\",\n headline = \"Build Amazing Products Faster\",\n description = \"The complete toolkit for modern product development.\",\n primaryCta = \"Get Started\",\n secondaryCta,\n onPrimaryCta,\n onSecondaryCta\n}: LandingPageProps) {\n return (\n
\n
\n
\n
\n
\n

{brandName}

\n
\n
\n {navItems.map((item) => (\n \n ))}\n
\n
\n
\n
\n {badge}\n

\n {headline}\n

\n

\n {description}\n

\n
\n \n {secondaryCta && (\n \n )}\n
\n
\n
\n )\n}", + "ecommercePage": "interface EcommercePageProps {\n storeName?: string\n productBadge?: string\n productName?: string\n productPrice?: string\n originalPrice?: string\n onAddToCart?: () => void\n}\n\nfunction EcommercePage({ \n storeName = \"Store\",\n productBadge = \"New Arrival\",\n productName = \"Premium Product\",\n productPrice = \"$299.00\",\n originalPrice,\n onAddToCart\n}: EcommercePageProps) {\n return (\n
\n
\n
\n

{storeName}

\n \n
\n
\n
\n
\n
\n
\n {productBadge}\n

{productName}

\n
\n {productPrice}\n {originalPrice && (\n \n {originalPrice}\n \n )}\n
\n \n
\n
\n
\n
\n )\n}", + "blogArticle": "interface BlogArticleProps {\n blogName?: string\n tags?: string[]\n title?: string\n authorName?: string\n authorAvatar?: string\n authorFallback?: string\n date?: string\n readTime?: string\n excerpt?: string\n}\n\nfunction BlogArticle({ \n blogName = \"Blog\",\n tags = [\"Design\", \"Tutorial\"],\n title = \"Building a Comprehensive Component Library\",\n authorName = \"Alex Writer\",\n authorAvatar,\n authorFallback = \"AW\",\n date = \"March 15, 2024\",\n readTime = \"10 min read\",\n excerpt = \"Design systems have become an essential part of modern product development.\"\n}: BlogArticleProps) {\n return (\n
\n
\n

{blogName}

\n
\n
\n
\n
\n {tags.map((tag, idx) => (\n \n {tag}\n \n ))}\n
\n

\n {title}\n

\n
\n \n {authorAvatar && }\n {authorFallback}\n \n
\n

{authorName}

\n

\n {date} · {readTime}\n

\n
\n
\n
\n

\n {excerpt}\n

\n
\n
\n
\n )\n}" +} \ No newline at end of file diff --git a/src/lib/snippets/atoms.ts b/src/lib/snippets/atoms.ts index 3d33b94..6050cec 100644 --- a/src/lib/snippets/atoms.ts +++ b/src/lib/snippets/atoms.ts @@ -1,209 +1,9 @@ /** * Atoms - Basic UI building blocks code snippets + * Data loaded from JSON for better maintainability */ -export const atomsCodeSnippets = { - buttonDefault: `interface ButtonProps { - children?: string - onClick?: () => void -} +import atomsData from '@/data/snippets/atoms.json' -function DefaultButton({ children = "Default", onClick }: ButtonProps) { - return -}`, - buttonSecondary: `interface ButtonProps { - children?: string - variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" - onClick?: () => void -} - -function CustomButton({ children = "Secondary", variant = "secondary", onClick }: ButtonProps) { - return -}`, - buttonDestructive: `interface DestructiveButtonProps { - children?: string - onClick?: () => void -} - -function DestructiveButton({ children = "Destructive", onClick }: DestructiveButtonProps) { - return -}`, - buttonOutline: `interface OutlineButtonProps { - children?: string - onClick?: () => void -} - -function OutlineButton({ children = "Outline", onClick }: OutlineButtonProps) { - return -}`, - buttonGhost: `interface GhostButtonProps { - children?: string - onClick?: () => void -} - -function GhostButton({ children = "Ghost", onClick }: GhostButtonProps) { - return -}`, - buttonLink: `interface LinkButtonProps { - children?: string - onClick?: () => void -} - -function LinkButton({ children = "Link", onClick }: LinkButtonProps) { - return -}`, - buttonSizes: `interface ButtonSizesProps { - smallText?: string - defaultText?: string - largeText?: string - onSmallClick?: () => void - onDefaultClick?: () => void - onLargeClick?: () => void - onIconClick?: () => void -} - -function ButtonSizes({ - smallText = "Small", - defaultText = "Default", - largeText = "Large", - onSmallClick, - onDefaultClick, - onLargeClick, - onIconClick -}: ButtonSizesProps) { - return ( - <> - - - - - - ) -}`, - buttonWithIcons: `interface IconButtonProps { - primaryText?: string - secondaryText?: string - onPrimaryClick?: () => void - onSecondaryClick?: () => void -} - -function IconButtons({ - primaryText = "Favorite", - secondaryText = "Add Item", - onPrimaryClick, - onSecondaryClick -}: IconButtonProps) { - return ( - <> - - - - ) -}`, - badgeVariants: `interface BadgeVariantsProps { - defaultText?: string - secondaryText?: string - destructiveText?: string - outlineText?: string -} - -function BadgeVariants({ - defaultText = "Default", - secondaryText = "Secondary", - destructiveText = "Destructive", - outlineText = "Outline" -}: BadgeVariantsProps) { - return ( - <> - {defaultText} - {secondaryText} - {destructiveText} - {outlineText} - - ) -}`, - badgeWithIcons: `interface IconBadgeProps { - completedText?: string - failedText?: string -} - -function IconBadges({ - completedText = "Completed", - failedText = "Failed" -}: IconBadgeProps) { - return ( - <> - - - {completedText} - - - - {failedText} - - - ) -}`, - inputBasic: `interface InputProps { - placeholder?: string - value?: string - onChange?: (e: React.ChangeEvent) => void -} - -function BasicInput({ placeholder = "Default input", value, onChange }: InputProps) { - return -}`, - inputWithIcon: `interface SearchInputProps { - placeholder?: string - value?: string - onChange?: (e: React.ChangeEvent) => void -} - -function SearchInput({ placeholder = "Search...", value, onChange }: SearchInputProps) { - return ( -
- - -
- ) -}`, - inputTypes: `interface TypedInputsProps { - textPlaceholder?: string - emailPlaceholder?: string - passwordPlaceholder?: string - numberPlaceholder?: string - onTextChange?: (e: React.ChangeEvent) => void - onEmailChange?: (e: React.ChangeEvent) => void - onPasswordChange?: (e: React.ChangeEvent) => void - onNumberChange?: (e: React.ChangeEvent) => void -} - -function TypedInputs({ - textPlaceholder = "Text input", - emailPlaceholder = "email@example.com", - passwordPlaceholder = "Password", - numberPlaceholder = "123", - onTextChange, - onEmailChange, - onPasswordChange, - onNumberChange -}: TypedInputsProps) { - return ( - <> - - - - - - ) -}`, -} +export const atomsCodeSnippets: Record = atomsData diff --git a/src/lib/snippets/molecules.ts b/src/lib/snippets/molecules.ts index d01b800..c0383cf 100644 --- a/src/lib/snippets/molecules.ts +++ b/src/lib/snippets/molecules.ts @@ -1,219 +1,8 @@ /** * Molecules - Composite UI components code snippets + * Data loaded from JSON for better maintainability */ -export const moleculesCodeSnippets = { - formField: `interface FormFieldProps { - label?: string - placeholder?: string - helperText?: string - id?: string - value?: string - onChange?: (e: React.ChangeEvent) => void -} - -function EmailFormField({ - label = "Email Address", - placeholder = "john@example.com", - helperText = "We'll never share your email with anyone else.", - id = "email", - value, - onChange -}: FormFieldProps) { - return ( -
- -
- - -
-

- {helperText} -

-
- ) -}`, - searchBar: `interface SearchBarProps { - placeholder?: string - value?: string - onChange?: (e: React.ChangeEvent) => void -} - -function SearchBar({ placeholder = "Search...", value, onChange }: SearchBarProps) { - return ( -
- - -
- ) -}`, - searchBarWithButton: `interface SearchBarWithButtonProps { - placeholder?: string - buttonText?: string - value?: string - onChange?: (e: React.ChangeEvent) => void - onSearch?: () => void -} - -function SearchBarWithButton({ - placeholder = "Search...", - buttonText = "Search", - value, - onChange, - onSearch -}: SearchBarWithButtonProps) { - return ( -
-
- - -
- -
- ) -}`, - userCard: `interface UserCardProps { - name?: string - username?: string - bio?: string - avatarUrl?: string - avatarFallback?: string - buttonText?: string - onButtonClick?: () => void -} - -function UserCard({ - name = "Alex Morgan", - username = "@alexmorgan", - bio = "Product designer passionate about creating delightful user experiences.", - avatarUrl = "https://i.pravatar.cc/150?img=1", - avatarFallback = "AM", - buttonText = "Follow", - onButtonClick -}: UserCardProps) { - return ( - -
- - - {avatarFallback} - -
-

{name}

-

{username}

-

- {bio} -

-
- -
- - ) -}`, - socialActions: `interface SocialActionsProps { - likeText?: string - commentText?: string - shareText?: string - onLike?: () => void - onComment?: () => void - onShare?: () => void -} - -function SocialActions({ - likeText = "Like", - commentText = "Comment", - shareText = "Share", - onLike, - onComment, - onShare -}: SocialActionsProps) { - return ( -
- - - -
- ) -}`, - statusIndicator: `interface StatusIndicatorProps { - statusText?: string - badgeText?: string - isActive?: boolean -} - -function StatusIndicator({ - statusText = "System Online", - badgeText = "Active", - isActive = true -}: StatusIndicatorProps) { - return ( -
-
-
- {statusText} -
- {badgeText} -
- ) -}`, - contentCard: `interface ContentCardProps { - title?: string - description?: string - date?: string - readTime?: string - tags?: string[] -} - -function ContentCard({ - title = "Building Scalable Design Systems", - description = "Learn how to create and maintain design systems that grow with your team.", - date = "Mar 15, 2024", - readTime = "5 min read", - tags = ["Design", "System"] -}: ContentCardProps) { - return ( - -
-
-
-

- {title} -

-

- {description} -

-
-
-
-
- - {date} -
- • - {readTime} -
-
- {tags.map((tag) => ( - {tag} - ))} -
-
- - ) -}`, -} +import moleculesData from '@/data/snippets/molecules.json' +export const moleculesCodeSnippets: Record = moleculesData diff --git a/src/lib/snippets/organisms.ts b/src/lib/snippets/organisms.ts index 49af3e4..c99f710 100644 --- a/src/lib/snippets/organisms.ts +++ b/src/lib/snippets/organisms.ts @@ -1,338 +1,8 @@ /** * Organisms - Complex UI patterns code snippets + * Data loaded from JSON for better maintainability */ -export const organismsCodeSnippets = { - navigationBar: `interface NavigationBarProps { - brandName?: string - navItems?: Array<{ label: string; icon: React.ReactNode; onClick?: () => void }> - avatarUrl?: string - avatarFallback?: string - onNotificationClick?: () => void - onSettingsClick?: () => void -} - -function NavigationBar({ - brandName = "BrandName", - navItems = [ - { label: "Home", icon: }, - { label: "Analytics", icon: }, - { label: "Projects", icon: } - ], - avatarUrl = "https://i.pravatar.cc/150?img=3", - avatarFallback = "U", - onNotificationClick, - onSettingsClick -}: NavigationBarProps) { - return ( -
-
-
-

{brandName}

- -
-
- - - - - {avatarFallback} - -
-
-
- ) -}`, - dataTable: `interface Transaction { - id: string - status: string - statusVariant?: "default" | "secondary" | "destructive" | "outline" - description: string - date: string - amount: string - isNegative?: boolean -} - -interface DataTableProps { - title?: string - exportButtonText?: string - transactions?: Transaction[] - onExport?: () => void -} - -function DataTable({ - title = "Recent Transactions", - exportButtonText = "Export", - transactions = [ - { id: "1", status: "Completed", description: "Payment received", date: "Mar 15, 2024", amount: "$250.00" } - ], - onExport -}: DataTableProps) { - return ( - -
-
-

{title}

- -
-
- - - - Status - Transaction - Date - Amount - - - - {transactions.map((transaction) => ( - - - {transaction.status} - - {transaction.description} - {transaction.date} - {transaction.amount} - - ))} - -
- - ) -}`, - form: `interface CreateAccountFormProps { - title?: string - description?: string - firstNameLabel?: string - lastNameLabel?: string - emailLabel?: string - firstNamePlaceholder?: string - lastNamePlaceholder?: string - emailPlaceholder?: string - cancelButtonText?: string - submitButtonText?: string - onCancel?: () => void - onSubmit?: (data: { firstName: string; lastName: string; email: string }) => void -} - -function CreateAccountForm({ - title = "Create Account", - description = "Fill in your details to get started", - firstNameLabel = "First Name", - lastNameLabel = "Last Name", - emailLabel = "Email", - firstNamePlaceholder = "John", - lastNamePlaceholder = "Doe", - emailPlaceholder = "john@example.com", - cancelButtonText = "Cancel", - submitButtonText = "Create Account", - onCancel, - onSubmit -}: CreateAccountFormProps) { - const [firstName, setFirstName] = useState("") - const [lastName, setLastName] = useState("") - const [email, setEmail] = useState("") - - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault() - onSubmit?.({ firstName, lastName, email }) - } - - return ( - -
-
-

{title}

-

- {description} -

-
- -
-
- - setFirstName(e.target.value)} - /> -
-
- - setLastName(e.target.value)} - /> -
-
-
- -
- - setEmail(e.target.value)} - /> -
-
- -
- - -
- -
- ) -}`, - taskList: `interface Task { - id: string - title: string - description: string - status: string - statusColor?: "accent" | "destructive" - badgeText: string - badgeVariant?: "default" | "secondary" | "destructive" | "outline" - icon: React.ReactNode -} - -interface TaskListProps { - title?: string - addButtonText?: string - tasks?: Task[] - onAddTask?: () => void -} - -function TaskList({ - title = "Project Tasks", - addButtonText = "Add Task", - tasks = [ - { - id: "1", - title: "Design system documentation", - description: "Complete the component library documentation", - status: "Completed", - statusColor: "accent" as const, - badgeText: "Design", - badgeVariant: "secondary" as const, - icon: - } - ], - onAddTask -}: TaskListProps) { - return ( - -
-
-

{title}

- -
-
-
- {tasks.map((task) => ( -
-
- {task.icon} -
-

{task.title}

-

- {task.description} -

-
- {task.badgeText} - {task.status} -
-
-
-
- ))} -
- - ) -}`, - sidebarNavigation: `interface SidebarNavItem { - label: string - icon: React.ReactNode - variant?: "default" | "ghost" - onClick?: () => void -} - -interface SidebarNavigationProps { - title?: string - navItems?: SidebarNavItem[] - contentText?: string -} - -function SidebarNavigation({ - title = "Dashboard", - navItems = [ - { label: "Home", icon: , variant: "ghost" as const }, - { label: "Analytics", icon: , variant: "default" as const }, - { label: "Projects", icon: , variant: "ghost" as const } - ], - contentText = "Main content area" -}: SidebarNavigationProps) { - return ( -
- -
-

- {contentText} -

-
-
- ) -}`, -} +import organismsData from '@/data/snippets/organisms.json' +export const organismsCodeSnippets: Record = organismsData diff --git a/src/lib/snippets/templates.ts b/src/lib/snippets/templates.ts index 76ee6ea..cada463 100644 --- a/src/lib/snippets/templates.ts +++ b/src/lib/snippets/templates.ts @@ -1,256 +1,8 @@ /** * Templates - Complete page layouts code snippets + * Data loaded from JSON for better maintainability */ -export const templatesCodeSnippets = { - dashboardLayout: `interface StatCard { - label: string - value: string - trend?: string -} +import templatesData from '@/data/snippets/templates.json' -interface DashboardLayoutProps { - title?: string - navItems?: Array<{ label: string; icon: React.ReactNode; variant?: "default" | "ghost" }> - avatarUrl?: string - avatarFallback?: string - stats?: StatCard[] - onNotificationClick?: () => void -} - -function DashboardLayout({ - title = "Dashboard", - navItems = [ - { label: "Overview", icon: , variant: "default" as const }, - { label: "Analytics", icon: , variant: "ghost" as const } - ], - avatarUrl, - avatarFallback = "U", - stats = [ - { label: "Total Revenue", value: "$45,231", trend: "+20.1% from last month" } - ], - onNotificationClick -}: DashboardLayoutProps) { - return ( -
-
-
-

{title}

-
- - - {avatarUrl && } - {avatarFallback} - -
-
-
-
- -
-

Overview

-
- {stats.map((stat) => ( - -

{stat.label}

-

{stat.value}

- {stat.trend && ( -

{stat.trend}

- )} - - ))} -
-
-
-
- ) -}`, - landingPage: `interface LandingPageProps { - brandName?: string - navItems?: string[] - badge?: string - headline?: string - description?: string - primaryCta?: string - secondaryCta?: string - onPrimaryCta?: () => void - onSecondaryCta?: () => void -} - -function LandingPage({ - brandName = "ProductName", - navItems = ["Features", "Sign Up"], - badge = "New Release", - headline = "Build Amazing Products Faster", - description = "The complete toolkit for modern product development.", - primaryCta = "Get Started", - secondaryCta, - onPrimaryCta, - onSecondaryCta -}: LandingPageProps) { - return ( -
-
-
-
-
-

{brandName}

-
-
- {navItems.map((item) => ( - - ))} -
-
-
-
- {badge} -

- {headline} -

-

- {description} -

-
- - {secondaryCta && ( - - )} -
-
-
- ) -}`, - ecommercePage: `interface EcommercePageProps { - storeName?: string - productBadge?: string - productName?: string - productPrice?: string - originalPrice?: string - onAddToCart?: () => void -} - -function EcommercePage({ - storeName = "Store", - productBadge = "New Arrival", - productName = "Premium Product", - productPrice = "$299.00", - originalPrice, - onAddToCart -}: EcommercePageProps) { - return ( -
-
-
-

{storeName}

- -
-
-
-
-
-
- {productBadge} -

{productName}

-
- {productPrice} - {originalPrice && ( - - {originalPrice} - - )} -
- -
-
-
-
- ) -}`, - blogArticle: `interface BlogArticleProps { - blogName?: string - tags?: string[] - title?: string - authorName?: string - authorAvatar?: string - authorFallback?: string - date?: string - readTime?: string - excerpt?: string -} - -function BlogArticle({ - blogName = "Blog", - tags = ["Design", "Tutorial"], - title = "Building a Comprehensive Component Library", - authorName = "Alex Writer", - authorAvatar, - authorFallback = "AW", - date = "March 15, 2024", - readTime = "10 min read", - excerpt = "Design systems have become an essential part of modern product development." -}: BlogArticleProps) { - return ( -
-
-

{blogName}

-
-
-
-
- {tags.map((tag, idx) => ( - - {tag} - - ))} -
-

- {title} -

-
- - {authorAvatar && } - {authorFallback} - -
-

{authorName}

-

- {date} · {readTime} -

-
-
-
-

- {excerpt} -

-
-
-
- ) -}`, -} +export const templatesCodeSnippets: Record = templatesData