mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-05 02:54:51 +00:00
Merge pull request #41 from johndoe6345789/codex/refactor-atomiccomponentshowcase-to-reduce-loc
Refactor atomic component showcase tabs into modules and externalize demo data
This commit is contained in:
GitHub
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"displayTitle": "Display Components",
|
||||
"avatarTitle": "Avatar",
|
||||
"avatarFallback": "JD",
|
||||
"ratingTitle": "Rating",
|
||||
"colorSwatchesTitle": "Color Swatches",
|
||||
"colorSwatches": [
|
||||
{ "color": "#8b5cf6", "label": "Primary" },
|
||||
{ "color": "#06b6d4", "label": "Accent" },
|
||||
{ "color": "#ef4444", "label": "Error" }
|
||||
],
|
||||
"timestampTitle": "Timestamp",
|
||||
"stepperTitle": "Stepper",
|
||||
"stepperSteps": [
|
||||
{ "label": "Account", "description": "Create your account" },
|
||||
{ "label": "Profile", "description": "Add personal details" },
|
||||
{ "label": "Complete", "description": "Finish setup" }
|
||||
],
|
||||
"timelineTitle": "Timeline",
|
||||
"timelineItems": [
|
||||
{
|
||||
"title": "Project Created",
|
||||
"description": "Initial setup completed",
|
||||
"timestamp": "2 hours ago",
|
||||
"status": "completed"
|
||||
},
|
||||
{
|
||||
"title": "Development",
|
||||
"description": "Currently building features",
|
||||
"timestamp": "now",
|
||||
"status": "current"
|
||||
},
|
||||
{
|
||||
"title": "Testing",
|
||||
"description": "QA phase",
|
||||
"status": "pending"
|
||||
}
|
||||
],
|
||||
"tableTitle": "Table",
|
||||
"tableColumns": [
|
||||
{ "key": "name", "header": "Name" },
|
||||
{ "key": "email", "header": "Email" },
|
||||
{ "key": "status", "header": "Status" }
|
||||
],
|
||||
"tableData": [
|
||||
{ "id": 1, "name": "John Doe", "email": "john@example.com", "status": "active" },
|
||||
{ "id": 2, "name": "Jane Smith", "email": "jane@example.com", "status": "inactive" },
|
||||
{ "id": 3, "name": "Bob Johnson", "email": "bob@example.com", "status": "active" }
|
||||
],
|
||||
"accordionTitle": "Accordion",
|
||||
"accordionItems": [
|
||||
{
|
||||
"id": "1",
|
||||
"title": "What is an atomic component?",
|
||||
"content": "Atomic components are the smallest building blocks in a design system, representing basic UI elements that cannot be broken down further."
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"title": "How do I use these components?",
|
||||
"content": "Import the components from the atoms folder and use them in your React components with full TypeScript support."
|
||||
}
|
||||
],
|
||||
"navigationTitle": "Navigation",
|
||||
"breadcrumbs": [
|
||||
{ "label": "Home" },
|
||||
{ "label": "Components" },
|
||||
{ "label": "Showcase" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"formTitle": "Form Components",
|
||||
"email": {
|
||||
"label": "Email",
|
||||
"placeholder": "you@example.com",
|
||||
"helperText": "Enter your email address"
|
||||
},
|
||||
"password": {
|
||||
"label": "Password",
|
||||
"helperText": "Must be at least 8 characters"
|
||||
},
|
||||
"search": {
|
||||
"placeholder": "Search components..."
|
||||
},
|
||||
"textArea": {
|
||||
"label": "Description",
|
||||
"placeholder": "Enter a description...",
|
||||
"helperText": "Optional field"
|
||||
},
|
||||
"select": {
|
||||
"label": "Framework",
|
||||
"placeholder": "Select a framework",
|
||||
"options": [
|
||||
{ "value": "react", "label": "React" },
|
||||
{ "value": "vue", "label": "Vue" },
|
||||
{ "value": "angular", "label": "Angular" }
|
||||
]
|
||||
},
|
||||
"toggle": {
|
||||
"label": "Enable notifications"
|
||||
},
|
||||
"checkbox": {
|
||||
"label": "I agree to the terms and conditions"
|
||||
},
|
||||
"radio": {
|
||||
"name": "size",
|
||||
"options": [
|
||||
{ "value": "sm", "label": "Small" },
|
||||
{ "value": "md", "label": "Medium" },
|
||||
{ "value": "lg", "label": "Large" }
|
||||
]
|
||||
},
|
||||
"slider": {
|
||||
"label": "Volume",
|
||||
"min": 0,
|
||||
"max": 100
|
||||
},
|
||||
"buttonTitle": "Button Components",
|
||||
"buttons": [
|
||||
{ "label": "Default" },
|
||||
{ "label": "Primary", "variant": "default" },
|
||||
{ "label": "Outline", "variant": "outline" },
|
||||
{ "label": "Ghost", "variant": "ghost" },
|
||||
{ "label": "Destructive", "variant": "destructive" }
|
||||
],
|
||||
"iconButtons": [
|
||||
{ "variant": "default" },
|
||||
{ "variant": "outline" },
|
||||
{ "variant": "destructive" }
|
||||
],
|
||||
"iconActions": [
|
||||
{ "label": "Like", "variant": "default" },
|
||||
{ "label": "Share", "variant": "outline" }
|
||||
],
|
||||
"copyButtonText": "Copy this text",
|
||||
"fileUploadTitle": "File Upload",
|
||||
"fileUploadAccept": "image/*"
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"title": "Atomic Component Library",
|
||||
"description": "A comprehensive showcase of all available atomic components"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
[
|
||||
{ "id": "typography", "label": "Typography", "icon": "house" },
|
||||
{ "id": "forms", "label": "Forms", "icon": "pencil" },
|
||||
{ "id": "display", "label": "Display", "icon": "user" }
|
||||
]
|
||||
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"sectionTitle": "Typography Components",
|
||||
"headingsTitle": "Headings",
|
||||
"headingSamples": [
|
||||
{ "level": 1, "text": "Heading Level 1" },
|
||||
{ "level": 2, "text": "Heading Level 2" },
|
||||
{ "level": 3, "text": "Heading Level 3" }
|
||||
],
|
||||
"textVariantsTitle": "Text Variants",
|
||||
"textVariants": [
|
||||
{ "variant": "body", "text": "Body text with default styling" },
|
||||
{ "variant": "muted", "text": "Muted text for less emphasis" },
|
||||
{ "variant": "caption", "text": "Caption text for descriptions" },
|
||||
{ "variant": "small", "text": "Small text for fine print" }
|
||||
],
|
||||
"linksCodeTitle": "Links & Code",
|
||||
"links": [
|
||||
{ "variant": "default", "label": "Default Link" },
|
||||
{ "variant": "accent", "label": "Accent Link" }
|
||||
],
|
||||
"codeSample": "npm install react",
|
||||
"kbd": {
|
||||
"prefix": "Press",
|
||||
"keys": ["Ctrl", "K"],
|
||||
"suffix": "to search"
|
||||
},
|
||||
"badgesTitle": "Badges & Indicators",
|
||||
"statusBadgesTitle": "Status Badges",
|
||||
"statusBadges": ["active", "inactive", "pending", "error", "success", "warning"],
|
||||
"tagsTitle": "Tags",
|
||||
"tags": [
|
||||
{ "variant": "default", "label": "Default" },
|
||||
{ "variant": "primary", "label": "Primary" },
|
||||
{ "variant": "secondary", "label": "Secondary" },
|
||||
{ "variant": "accent", "label": "Accent" },
|
||||
{ "variant": "destructive", "label": "Destructive" }
|
||||
],
|
||||
"dotsTitle": "Dots",
|
||||
"dots": [
|
||||
{ "variant": "default" },
|
||||
{ "variant": "primary" },
|
||||
{ "variant": "accent", "pulse": true },
|
||||
{ "variant": "success" },
|
||||
{ "variant": "warning", "pulse": true },
|
||||
{ "variant": "error" }
|
||||
],
|
||||
"chipsTitle": "Chips",
|
||||
"chips": [
|
||||
{ "variant": "default", "label": "React" },
|
||||
{ "variant": "primary", "label": "TypeScript" },
|
||||
{ "variant": "accent", "label": "Tailwind" }
|
||||
],
|
||||
"feedbackTitle": "Feedback Components",
|
||||
"alerts": [
|
||||
{ "variant": "info", "title": "Information", "message": "This is an informational message" },
|
||||
{ "variant": "success", "title": "Success", "message": "Operation completed successfully" },
|
||||
{ "variant": "warning", "title": "Warning", "message": "Please review this warning" },
|
||||
{ "variant": "error", "title": "Error", "message": "Something went wrong" }
|
||||
],
|
||||
"notification": {
|
||||
"type": "success",
|
||||
"title": "Notification",
|
||||
"message": "This is a notification with a close button"
|
||||
},
|
||||
"loadingTitle": "Loading States",
|
||||
"progressTitle": "Progress Bar",
|
||||
"progressBars": [
|
||||
{ "value": 35, "showLabel": true },
|
||||
{ "value": 65, "variant": "accent" },
|
||||
{ "value": 85, "variant": "destructive" }
|
||||
],
|
||||
"skeletonTitle": "Skeleton Loaders"
|
||||
}
|
||||
Reference in New Issue
Block a user