Remove all obsolete authentication, settings, admin, and demo-related components and pages
- Eliminated redundant components, pages, and layouts related to authentication (`login`, `register`, `password-reset`, etc.), user settings, admin, and demos. - Simplified the frontend structure by removing unused dynamic imports, forms, and test code. - Refactored configurations and metadata imports to exclude references to removed features. - Streamlined the project for future development and improved maintainability by discarding legacy and unused code.
This commit is contained in:
Felipe Cardoso
502
frontend/src/app/[locale]/dev/spacing/page.tsx
Normal file
502
frontend/src/app/[locale]/dev/spacing/page.tsx
Normal file
@@ -0,0 +1,502 @@
|
||||
/**
|
||||
* Spacing Patterns Demo
|
||||
* Interactive demonstrations of spacing philosophy and best practices
|
||||
* Access: /dev/spacing
|
||||
*/
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Link } from '@/lib/i18n/routing';
|
||||
import { Ruler } from 'lucide-react';
|
||||
import { DevBreadcrumbs } from '@/components/dev/DevBreadcrumbs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
// Code-split heavy dev components
|
||||
const Example = dynamic(
|
||||
() => import('@/components/dev/Example').then((mod) => ({ default: mod.Example })),
|
||||
{ loading: () => <div className="animate-pulse h-32 bg-muted rounded" /> }
|
||||
);
|
||||
|
||||
const ExampleSection = dynamic(
|
||||
() => import('@/components/dev/Example').then((mod) => ({ default: mod.ExampleSection })),
|
||||
{ loading: () => <div className="animate-pulse h-24 bg-muted rounded" /> }
|
||||
);
|
||||
|
||||
const BeforeAfter = dynamic(
|
||||
() => import('@/components/dev/BeforeAfter').then((mod) => ({ default: mod.BeforeAfter })),
|
||||
{ loading: () => <div className="animate-pulse h-48 bg-muted rounded" /> }
|
||||
);
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Spacing Patterns | Dev',
|
||||
description: 'Parent-controlled spacing philosophy and visual demonstrations',
|
||||
};
|
||||
|
||||
export default function SpacingPage() {
|
||||
return (
|
||||
<div className="bg-background">
|
||||
{/* Breadcrumbs */}
|
||||
<DevBreadcrumbs items={[{ label: 'Spacing' }]} />
|
||||
|
||||
{/* Content */}
|
||||
<main className="container mx-auto px-4 py-12">
|
||||
<div className="space-y-12">
|
||||
{/* Introduction */}
|
||||
<div className="max-w-3xl space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
The Golden Rule: <strong>Parents control spacing, not children.</strong> Use gap,
|
||||
space-y, and space-x utilities on the parent container. Avoid margins on children
|
||||
except for exceptions.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline">gap</Badge>
|
||||
<Badge variant="outline">space-y</Badge>
|
||||
<Badge variant="outline">space-x</Badge>
|
||||
<Badge variant="destructive">avoid margin</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spacing Scale */}
|
||||
<ExampleSection
|
||||
id="spacing-scale"
|
||||
title="Spacing Scale"
|
||||
description="Multiples of 4px (Tailwind's base unit)"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Common Spacing Values</CardTitle>
|
||||
<CardDescription>Use consistent spacing values from the scale</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ class: '2', px: '8px', rem: '0.5rem', use: 'Tight (label → input)' },
|
||||
{ class: '4', px: '16px', rem: '1rem', use: 'Standard (form fields)' },
|
||||
{ class: '6', px: '24px', rem: '1.5rem', use: 'Section spacing' },
|
||||
{ class: '8', px: '32px', rem: '2rem', use: 'Large gaps' },
|
||||
{ class: '12', px: '48px', rem: '3rem', use: 'Section dividers' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.class}
|
||||
className="grid grid-cols-[80px_80px_100px_1fr] items-center gap-4"
|
||||
>
|
||||
<code className="text-sm font-mono">gap-{item.class}</code>
|
||||
<span className="text-sm text-muted-foreground">{item.px}</span>
|
||||
<span className="text-sm text-muted-foreground">{item.rem}</span>
|
||||
<span className="text-sm">{item.use}</span>
|
||||
<div className="col-span-4">
|
||||
<div className="h-2 rounded bg-primary" style={{ width: item.px }}></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</ExampleSection>
|
||||
|
||||
{/* Gap for Flex/Grid */}
|
||||
<ExampleSection
|
||||
id="gap"
|
||||
title="Gap: For Flex and Grid"
|
||||
description="Preferred method for spacing flex and grid children"
|
||||
>
|
||||
<Example
|
||||
title="Gap with Flex"
|
||||
description="Horizontal and vertical spacing"
|
||||
code={`{/* Horizontal */}
|
||||
<div className="flex gap-4">
|
||||
<Button>Cancel</Button>
|
||||
<Button>Save</Button>
|
||||
</div>
|
||||
|
||||
{/* Vertical */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{/* Cards */}
|
||||
</div>`}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{/* Horizontal */}
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">Horizontal (gap-4)</p>
|
||||
<div className="flex gap-4">
|
||||
<Button variant="outline">Cancel</Button>
|
||||
<Button>Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vertical */}
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">Vertical (gap-4)</p>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="rounded-lg border bg-muted p-3 text-sm">Item 1</div>
|
||||
<div className="rounded-lg border bg-muted p-3 text-sm">Item 2</div>
|
||||
<div className="rounded-lg border bg-muted p-3 text-sm">Item 3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-2">Grid (gap-6)</p>
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="rounded-lg border bg-muted p-3 text-center text-sm">
|
||||
Card {i}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
</ExampleSection>
|
||||
|
||||
{/* Space-y for Stacks */}
|
||||
<ExampleSection
|
||||
id="space-y"
|
||||
title="Space-y: For Vertical Stacks"
|
||||
description="Simple vertical spacing without flex/grid"
|
||||
>
|
||||
<Example
|
||||
title="Space-y Pattern"
|
||||
description="Adds margin-top to all children except first"
|
||||
code={`<div className="space-y-4">
|
||||
<div>First item (no margin)</div>
|
||||
<div>Second item (mt-4)</div>
|
||||
<div>Third item (mt-4)</div>
|
||||
</div>
|
||||
|
||||
{/* Form example */}
|
||||
<form className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Input />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Password</Label>
|
||||
<Input />
|
||||
</div>
|
||||
<Button>Submit</Button>
|
||||
</form>`}
|
||||
>
|
||||
<div className="max-w-md space-y-6">
|
||||
{/* Visual demo */}
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-4">Visual Demo (space-y-4)</p>
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-lg border bg-muted p-3 text-sm">
|
||||
First item (no margin)
|
||||
</div>
|
||||
<div className="rounded-lg border bg-muted p-3 text-sm">Second item (mt-4)</div>
|
||||
<div className="rounded-lg border bg-muted p-3 text-sm">Third item (mt-4)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form example */}
|
||||
<div>
|
||||
<p className="text-sm font-medium mb-4">Form Example (space-y-4)</p>
|
||||
<div className="space-y-4 rounded-lg border p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium">Email</div>
|
||||
<div className="h-10 rounded-md border bg-background"></div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium">Password</div>
|
||||
<div className="h-10 rounded-md border bg-background"></div>
|
||||
</div>
|
||||
<Button className="w-full">Submit</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
</ExampleSection>
|
||||
|
||||
{/* Anti-pattern: Child Margins */}
|
||||
<ExampleSection
|
||||
id="anti-patterns"
|
||||
title="Anti-patterns to Avoid"
|
||||
description="Common spacing mistakes"
|
||||
>
|
||||
<BeforeAfter
|
||||
title="Don't Let Children Control Spacing"
|
||||
description="Parent should control spacing, not children"
|
||||
before={{
|
||||
caption: 'Children control their own spacing with mt-4',
|
||||
content: (
|
||||
<div className="space-y-2 rounded-lg border p-4">
|
||||
<div className="rounded bg-muted p-2 text-xs">
|
||||
<div>Child 1</div>
|
||||
<code className="text-[10px] text-destructive">no margin</code>
|
||||
</div>
|
||||
<div className="rounded bg-muted p-2 text-xs">
|
||||
<div>Child 2</div>
|
||||
<code className="text-[10px] text-destructive">mt-4</code>
|
||||
</div>
|
||||
<div className="rounded bg-muted p-2 text-xs">
|
||||
<div>Child 3</div>
|
||||
<code className="text-[10px] text-destructive">mt-4</code>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
after={{
|
||||
caption: 'Parent controls spacing with space-y-4',
|
||||
content: (
|
||||
<div className="space-y-4 rounded-lg border p-4">
|
||||
<div className="rounded bg-muted p-2 text-xs">
|
||||
<div>Child 1</div>
|
||||
<code className="text-[10px] text-green-600">parent uses space-y-4</code>
|
||||
</div>
|
||||
<div className="rounded bg-muted p-2 text-xs">
|
||||
<div>Child 2</div>
|
||||
<code className="text-[10px] text-green-600">clean, no margin</code>
|
||||
</div>
|
||||
<div className="rounded bg-muted p-2 text-xs">
|
||||
<div>Child 3</div>
|
||||
<code className="text-[10px] text-green-600">clean, no margin</code>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<BeforeAfter
|
||||
title="Use Gap, Not Margin for Buttons"
|
||||
description="Button groups should use gap, not margins"
|
||||
before={{
|
||||
caption: 'Margin on children - harder to maintain',
|
||||
content: (
|
||||
<div className="flex rounded-lg border p-4">
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm" className="ml-4">
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
after={{
|
||||
caption: 'Gap on parent - clean and flexible',
|
||||
content: (
|
||||
<div className="flex gap-4 rounded-lg border p-4">
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Save</Button>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</ExampleSection>
|
||||
|
||||
{/* Decision Tree */}
|
||||
<ExampleSection
|
||||
id="decision-tree"
|
||||
title="Decision Tree: Which Spacing Method?"
|
||||
description="Choose the right spacing utility"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Ruler className="h-5 w-5 text-primary" />
|
||||
<CardTitle>Spacing Decision Tree</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
{/* Gap */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="default">Use gap</Badge>
|
||||
<span className="text-sm font-medium">When...</span>
|
||||
</div>
|
||||
<ul className="ml-6 space-y-1 text-sm text-muted-foreground list-disc">
|
||||
<li>Parent is flex or grid</li>
|
||||
<li>All children need equal spacing</li>
|
||||
<li>Responsive spacing (gap-4 md:gap-6)</li>
|
||||
</ul>
|
||||
<div className="rounded-lg border bg-muted/30 p-3 font-mono text-xs">
|
||||
flex gap-4
|
||||
<br />
|
||||
grid grid-cols-3 gap-6
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Space-y */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary">Use space-y</Badge>
|
||||
<span className="text-sm font-medium">When...</span>
|
||||
</div>
|
||||
<ul className="ml-6 space-y-1 text-sm text-muted-foreground list-disc">
|
||||
<li>Vertical stack without flex/grid</li>
|
||||
<li>Form fields</li>
|
||||
<li>Content sections</li>
|
||||
</ul>
|
||||
<div className="rounded-lg border bg-muted/30 p-3 font-mono text-xs">
|
||||
space-y-4
|
||||
<br />
|
||||
space-y-6
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Margin */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="destructive">Use margin</Badge>
|
||||
<span className="text-sm font-medium">Only when...</span>
|
||||
</div>
|
||||
<ul className="ml-6 space-y-1 text-sm text-muted-foreground list-disc">
|
||||
<li>Exception case (one child needs different spacing)</li>
|
||||
<li>Negative margin for overlap effects</li>
|
||||
<li>Cannot modify parent (external component)</li>
|
||||
</ul>
|
||||
<div className="rounded-lg border bg-muted/30 p-3 font-mono text-xs">
|
||||
mt-8 {/* exception */}
|
||||
<br />
|
||||
-mt-4 {/* overlap */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Padding */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">Use padding</Badge>
|
||||
<span className="text-sm font-medium">When...</span>
|
||||
</div>
|
||||
<ul className="ml-6 space-y-1 text-sm text-muted-foreground list-disc">
|
||||
<li>Internal spacing within a component</li>
|
||||
<li>Card/container padding</li>
|
||||
<li>Button padding</li>
|
||||
</ul>
|
||||
<div className="rounded-lg border bg-muted/30 p-3 font-mono text-xs">
|
||||
p-4 {/* all sides */}
|
||||
<br />
|
||||
px-4 py-2 {/* horizontal & vertical */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</ExampleSection>
|
||||
|
||||
{/* Common Patterns */}
|
||||
<ExampleSection
|
||||
id="common-patterns"
|
||||
title="Common Patterns"
|
||||
description="Real-world spacing examples"
|
||||
>
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Form Fields</CardTitle>
|
||||
<CardDescription>Parent: space-y-4, Field: space-y-2</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<code className="text-xs block mb-3">
|
||||
{`<form className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Input />
|
||||
</div>
|
||||
</form>`}
|
||||
</code>
|
||||
<div className="space-y-4 rounded-lg border bg-muted/30 p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium">Email</div>
|
||||
<div className="h-8 rounded border bg-background"></div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs font-medium">Password</div>
|
||||
<div className="h-8 rounded border bg-background"></div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Button Group</CardTitle>
|
||||
<CardDescription>Use flex gap-4</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<code className="text-xs block mb-3">
|
||||
{`<div className="flex gap-4">
|
||||
<Button variant="outline">Cancel</Button>
|
||||
<Button>Save</Button>
|
||||
</div>`}
|
||||
</code>
|
||||
<div className="flex gap-4 rounded-lg border bg-muted/30 p-4">
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Save</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Card Grid</CardTitle>
|
||||
<CardDescription>Use grid with gap-6</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<code className="text-xs block mb-3">
|
||||
{`<div className="grid grid-cols-2 gap-6">
|
||||
<Card>...</Card>
|
||||
</div>`}
|
||||
</code>
|
||||
<div className="grid grid-cols-2 gap-4 rounded-lg border bg-muted/30 p-4">
|
||||
<div className="h-16 rounded border bg-background"></div>
|
||||
<div className="h-16 rounded border bg-background"></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Content Stack</CardTitle>
|
||||
<CardDescription>Use space-y-6 for sections</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<code className="text-xs block mb-3">
|
||||
{`<div className="space-y-6">
|
||||
<section>...</section>
|
||||
<section>...</section>
|
||||
</div>`}
|
||||
</code>
|
||||
<div className="space-y-4 rounded-lg border bg-muted/30 p-4">
|
||||
<div className="h-12 rounded border bg-background"></div>
|
||||
<div className="h-12 rounded border bg-background"></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</ExampleSection>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mt-16 border-t py-6">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Learn more:{' '}
|
||||
<Link
|
||||
href="/dev/docs/design-system/04-spacing-philosophy"
|
||||
className="font-medium hover:text-foreground"
|
||||
>
|
||||
Spacing Philosophy Documentation
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user