xertica-ui 2.7.0 → 2.8.0

package/templates/src/features/template/ui/TemplateContent.tsx

@@ -1,21 +1,120 @@
-import React from 'react';
-import { Button, Input, Label, Card, CardHeader, CardTitle, CardContent } from 'xertica-ui/ui';
+import React, { useState } from 'react';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertTitle,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+  PageHeader,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Slider,
+  StatsCard,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from 'xertica-ui/ui';
 import { Header } from 'xertica-ui/layout';
 import { useLayout } from 'xertica-ui/hooks';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import {
+  Activity,
+  DollarSign,
+  Mail,
+  Search,
+  Settings,
+  ThumbsUp,
+  Users,
+} from 'lucide-react';
+
+interface MockUser {
+  id: string;
+  name: string;
+  email: string;
+  status: 'active' | 'invited' | 'inactive';
+}
+
+const MOCK_USERS: MockUser[] = [
+  { id: '1', name: 'Ana Souza', email: 'ana.souza@example.com', status: 'active' },
+  { id: '2', name: 'Bruno Lima', email: 'bruno.lima@example.com', status: 'invited' },
+  { id: '3', name: 'Carla Dias', email: 'carla.dias@example.com', status: 'active' },
+  { id: '4', name: 'Diego Alves', email: 'diego.alves@example.com', status: 'inactive' },
+];
 
 /**
- * Template page content — starter placeholder.
+ * Template page content — Design System showcase.
  *
- * Replace this with your own page content. It shows a few basic
- * `xertica-ui/ui` components wired up as a starting point; delete or expand
- * as needed.
+ * Curated overview of the most common `xertica-ui/ui` primitives, grouped by
+ * category. Replace this with your own page content — keep the `Header` +
+ * `useLayout()` wiring below if you want the sidebar-aware layout to keep
+ * working.
  */
 export function TemplateContent() {
   const { t } = useTranslation();
   const { sidebarExpanded, sidebarWidth } = useLayout();
 
+  const [progress, setProgress] = useState(45);
+  const [volume, setVolume] = useState([60]);
+  const [tableFilter, setTableFilter] = useState('');
+
+  const filteredUsers = MOCK_USERS.filter(user =>
+    `${user.name} ${user.email}`.toLowerCase().includes(tableFilter.toLowerCase())
+  );
+
+  const handleFormSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    toast.success(t('templates.forms.submitSuccess'));
+  };
+
   return (
     <div
       style={{
@@ -39,26 +138,470 @@ export function TemplateContent() {
         <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
           <div className="p-5 sm:p-4 md:p-6">
             <div className="max-w-6xl mx-auto space-y-8">
-              <div className="space-y-2">
-                <h2>{t('templates.title')}</h2>
-                <p className="text-muted-foreground">{t('templates.subtitle')}</p>
-              </div>
-
-              {/* Replace this with your own page content */}
-              <Card>
-                <CardHeader>
-                  <CardTitle>{t('templates.exampleTitle')}</CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="template-example-input">
-                      {t('templates.exampleInputLabel')}
-                    </Label>
-                    <Input id="template-example-input" placeholder={t('templates.exampleInputPlaceholder')} />
-                  </div>
-                  <Button>{t('templates.exampleButton')}</Button>
-                </CardContent>
-              </Card>
+              <PageHeader title={t('templates.title')} subtitle={t('templates.subtitle')} />
+
+              {/* Replace this with your own page content — everything below is a Design System showcase */}
+
+              {/* Overview */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.overview')}</h3>
+                <div className="grid gap-4 md:grid-cols-3">
+                  <StatsCard
+                    title={t('templates.overview.activeUsers')}
+                    value="1,234"
+                    icon={<Users className="size-5" />}
+                    iconColor="text-primary"
+                    iconBg="bg-primary/10"
+                    trend={{ value: 12 }}
+                  />
+                  <StatsCard
+                    title={t('templates.overview.revenue')}
+                    value="$45.2k"
+                    icon={<DollarSign className="size-5" />}
+                    iconColor="text-success"
+                    iconBg="bg-success/10"
+                    trend={{ value: 8 }}
+                  />
+                  <StatsCard
+                    title={t('templates.overview.engagement')}
+                    value="3.2%"
+                    icon={<Activity className="size-5" />}
+                    iconColor="text-info"
+                    iconBg="bg-info/10"
+                    trend={{ value: -2 }}
+                  />
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Buttons */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.buttons.title')}</CardTitle>
+                    <CardDescription>{t('templates.buttons.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-6">
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.variants')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button variant="default">Default</Button>
+                        <Button variant="secondary">Secondary</Button>
+                        <Button variant="outline">Outline</Button>
+                        <Button variant="ghost">Ghost</Button>
+                        <Button variant="link">Link</Button>
+                        <Button variant="destructive">Destructive</Button>
+                        <Button variant="success">Success</Button>
+                        <Button variant="info">Info</Button>
+                        <Button variant="warning">Warning</Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.sizes')}</Label>
+                      <div className="flex flex-wrap items-center gap-3">
+                        <Button size="sm">Small</Button>
+                        <Button size="default">Default</Button>
+                        <Button size="lg">Large</Button>
+                        <Button size="icon" aria-label={t('nav.settings')}>
+                          <Settings className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.withIcons')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button>
+                          <Mail className="mr-2 h-4 w-4" />
+                          {t('templates.buttons.sendEmail')}
+                        </Button>
+                        <Button variant="outline" loading>
+                          {t('templates.buttons.loading')}
+                        </Button>
+                        <Button disabled>{t('templates.buttons.disabled')}</Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Badges */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.badges')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.badges.title')}</CardTitle>
+                    <CardDescription>{t('templates.badges.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-wrap gap-3">
+                      <Badge variant="default">Default</Badge>
+                      <Badge variant="secondary">Secondary</Badge>
+                      <Badge variant="outline">Outline</Badge>
+                      <Badge variant="destructive">Destructive</Badge>
+                      <Badge className="bg-success text-success-foreground">Success</Badge>
+                      <Badge className="bg-warning text-warning-foreground">Warning</Badge>
+                      <Badge className="bg-info text-info-foreground">Info</Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Alerts */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Alert variant="info">
+                    <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
+                  </Alert>
+                  <Alert variant="success">
+                    <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
+                  </Alert>
+                  <Alert variant="warning">
+                    <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
+                  </Alert>
+                  <Alert variant="destructive">
+                    <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
+                  </Alert>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Form Elements */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.forms')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.forms.title')}</CardTitle>
+                    <CardDescription>{t('templates.forms.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <form onSubmit={handleFormSubmit} className="space-y-4">
+                      <div className="grid gap-4 md:grid-cols-2">
+                        <div className="space-y-2">
+                          <Label htmlFor="tpl-name">{t('templates.forms.name')}</Label>
+                          <Input id="tpl-name" placeholder={t('templates.forms.namePlaceholder')} />
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="tpl-role">{t('templates.forms.role')}</Label>
+                          <Select>
+                            <SelectTrigger id="tpl-role">
+                              <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="developer">
+                                {t('templates.forms.roles.developer')}
+                              </SelectItem>
+                              <SelectItem value="designer">
+                                {t('templates.forms.roles.designer')}
+                              </SelectItem>
+                              <SelectItem value="manager">
+                                {t('templates.forms.roles.manager')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="tpl-bio">{t('templates.forms.bio')}</Label>
+                        <Textarea
+                          id="tpl-bio"
+                          placeholder={t('templates.forms.bioPlaceholder')}
+                          rows={3}
+                        />
+                      </div>
+
+                      <Separator />
+
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-2">
+                          <Checkbox id="tpl-newsletter" />
+                          <Label htmlFor="tpl-newsletter" className="font-normal">
+                            {t('templates.forms.newsletter')}
+                          </Label>
+                        </div>
+
+                        <div className="flex items-center justify-between">
+                          <Label htmlFor="tpl-notifications" className="font-normal">
+                            {t('templates.forms.pushNotifications')}
+                          </Label>
+                          <Switch id="tpl-notifications" defaultChecked />
+                        </div>
+                      </div>
+
+                      <Separator />
+
+                      <div className="space-y-3">
+                        <Label>{t('templates.forms.accountType')}</Label>
+                        <RadioGroup defaultValue="personal" aria-label={t('templates.forms.accountType')}>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="personal" id="tpl-personal" />
+                            <Label htmlFor="tpl-personal" className="font-normal">
+                              {t('templates.forms.accountPersonal')}
+                            </Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="business" id="tpl-business" />
+                            <Label htmlFor="tpl-business" className="font-normal">
+                              {t('templates.forms.accountBusiness')}
+                            </Label>
+                          </div>
+                        </RadioGroup>
+                      </div>
+                    </form>
+                  </CardContent>
+                  <CardFooter className="flex justify-between">
+                    <Button variant="outline">{t('templates.forms.cancel')}</Button>
+                    <Button onClick={handleFormSubmit}>{t('templates.forms.submit')}</Button>
+                  </CardFooter>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Data Table */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.data')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.data.title')}</CardTitle>
+                    <CardDescription>{t('templates.data.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="mb-4 relative">
+                      <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                      <Input
+                        value={tableFilter}
+                        onChange={event => setTableFilter(event.target.value)}
+                        placeholder={t('templates.data.searchPlaceholder')}
+                        aria-label={t('templates.data.searchPlaceholder')}
+                        className="pl-10"
+                      />
+                    </div>
+
+                    <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>{t('templates.data.columns.name')}</TableHead>
+                            <TableHead>{t('templates.data.columns.email')}</TableHead>
+                            <TableHead className="text-right">
+                              {t('templates.data.columns.status')}
+                            </TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {filteredUsers.map(user => (
+                            <TableRow key={user.id}>
+                              <TableCell>{user.name}</TableCell>
+                              <TableCell>{user.email}</TableCell>
+                              <TableCell className="text-right">
+                                <Badge
+                                  variant={
+                                    user.status === 'active'
+                                      ? 'default'
+                                      : user.status === 'invited'
+                                        ? 'secondary'
+                                        : 'outline'
+                                  }
+                                >
+                                  {t(`templates.data.status.${user.status}`)}
+                                </Badge>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Dialogs */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
+                      <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px]">
+                          <DialogHeader>
+                            <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
+                            <DialogDescription>
+                              {t('templates.dialogs.editProfileDescription')}
+                            </DialogDescription>
+                          </DialogHeader>
+                          <div className="grid gap-4 py-4">
+                            <div className="space-y-2">
+                              <Label htmlFor="tpl-dialog-name">{t('templates.dialogs.name')}</Label>
+                              <Input id="tpl-dialog-name" defaultValue="Ana Souza" />
+                            </div>
+                          </div>
+                          <DialogFooter>
+                            <Button type="submit">{t('templates.dialogs.update')}</Button>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
+                      <CardDescription>
+                        {t('templates.dialogs.alertDialogDescription')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="destructive">
+                            {t('templates.dialogs.deleteAccount')}
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent className="sm:max-w-[425px]">
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              {t('templates.dialogs.deleteWarning')}
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
+                            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                              {t('templates.dialogs.continue')}
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </CardContent>
+                  </Card>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Overlays & Feedback */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.overlays')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.overlays.title')}</CardTitle>
+                    <CardDescription>{t('templates.overlays.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-6">
+                    <div className="flex flex-wrap items-center gap-6">
+                      <div className="flex items-center gap-3">
+                        <Avatar>
+                          <AvatarImage src="https://github.com/shadcn.png" alt="Avatar" />
+                          <AvatarFallback>AS</AvatarFallback>
+                        </Avatar>
+                        <span className="text-muted-foreground">{t('templates.overlays.avatarLabel')}</span>
+                      </div>
+
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button variant="outline" size="icon" aria-label={t('templates.overlays.tooltipLabel')}>
+                            <ThumbsUp className="h-4 w-4" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>{t('templates.overlays.tooltipContent')}</TooltipContent>
+                      </Tooltip>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <Label>{t('templates.overlays.progressLabel')}</Label>
+                        <span className="text-sm text-muted-foreground">{progress}%</span>
+                      </div>
+                      <Progress value={progress} className="w-full" />
+                      <div className="flex gap-2">
+                        <Button size="sm" onClick={() => setProgress(value => Math.max(0, value - 10))}>
+                          -10%
+                        </Button>
+                        <Button size="sm" onClick={() => setProgress(value => Math.min(100, value + 10))}>
+                          +10%
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <Label>{t('templates.overlays.sliderLabel')}</Label>
+                        <span className="text-sm text-muted-foreground">{volume[0]}%</span>
+                      </div>
+                      <Slider
+                        value={volume}
+                        onValueChange={setVolume}
+                        min={0}
+                        max={100}
+                        step={1}
+                        className="w-full"
+                        aria-label={t('templates.overlays.sliderLabel')}
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Accordion */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.accordion')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.accordion.title')}</CardTitle>
+                    <CardDescription>{t('templates.accordion.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Accordion type="single" collapsible>
+                      <AccordionItem value="item-1">
+                        <AccordionTrigger>{t('templates.accordion.q1')}</AccordionTrigger>
+                        <AccordionContent>{t('templates.accordion.a1')}</AccordionContent>
+                      </AccordionItem>
+                      <AccordionItem value="item-2">
+                        <AccordionTrigger>{t('templates.accordion.q2')}</AccordionTrigger>
+                        <AccordionContent>{t('templates.accordion.a2')}</AccordionContent>
+                      </AccordionItem>
+                      <AccordionItem value="item-3">
+                        <AccordionTrigger>{t('templates.accordion.q3')}</AccordionTrigger>
+                        <AccordionContent>{t('templates.accordion.a3')}</AccordionContent>
+                      </AccordionItem>
+                    </Accordion>
+                  </CardContent>
+                </Card>
+              </section>
             </div>
           </div>
         </div>