xertica-ui 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -7,6 +7,19 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.1.2] — 2026-05-14
+
+### Fixed
+
+- **`MarkdownMessage` — suporte a tabelas GFM** — o parser regex do componente não convertia blocos de tabela Markdown (`| col | col |`) em HTML. Adicionada transformação de tabelas GFM completa (header, separador, linhas de dados) com estilos do design system (`border-border`, `hover:bg-muted/50`, `rounded-[var(--radius)]`, `overflow-x-auto`). A transformação roda antes das substituições de quebra de linha para evitar `<br/>` dentro das células.
+
+### Added
+
+- **Template — `AssistantPage`** — nova página de assistente completa: sidebar em modo `assistant` aberta por padrão (largura 320px), botão "Nova Conversa" (`variant="secondary"`), busca de conversas com filtro em tempo real, histórico de 8 conversas de exemplo em 3 grupos (Hoje / Ontem / Esta semana), modal de exclusão com `AlertDialog`, modal de renomeação com `Dialog` + `Input`, simulação de conteúdo ao selecionar conversa via `initialMessages`, botão "Voltar" em `variant` primário no `Header`.
+- **Template — `AppLayout`** — novas props `sidebarVariant?: 'default' | 'assistant'` e `sidebarProps?: Record<string, any>` para permitir que páginas customizem a sidebar sem quebrar o contrato do layout.
+
+---
+
 ## [2.1.1] — 2026-05-14
 
 ### Fixed

package/bin/cli.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('xertica-ui')
     .description('CLI to initialize Xertica UI projects')
-    .version('2.0.6');
+    .version('2.1.2');
 
 program
     .command('init')

package/components/assistant/markdown-message/MarkdownMessage.tsx

@@ -64,8 +64,34 @@ export function MarkdownMessage({ content, className = '' }: MarkdownMessageProp
       return `<ol class="list-decimal my-2">${items}</ol>`;
     });
     
+    // GFM Tables — must run before line-break transforms
+    html = html.replace(/((?:^\|.+\|[ \t]*(?:\r?\n|$))+)/gm, (match) => {
+      const rows = match.trim().split(/\r?\n/).filter(line => line.trim());
+      if (rows.length < 2) return match;
+
+      const isSeparatorRow = /^\|[\s\-:|]+\|$/.test(rows[1].trim());
+      if (!isSeparatorRow) return match;
+
+      const parseCells = (row: string) =>
+        row.split('|').slice(1, -1).map(cell => cell.trim());
+
+      const headerCells = parseCells(rows[0])
+        .map(cell => `<th class="px-3 py-2 text-left font-medium text-xs uppercase tracking-wide border-b border-border">${cell}</th>`)
+        .join('');
+
+      const bodyRows = rows.slice(2)
+        .map(row =>
+          `<tr class="border-b border-border last:border-0 hover:bg-muted/50">${
+            parseCells(row).map(cell => `<td class="px-3 py-2 text-sm">${cell}</td>`).join('')
+          }</tr>`
+        )
+        .join('');
+
+      return `<div class="overflow-x-auto my-3 rounded-[var(--radius)] border border-border"><table class="w-full text-sm"><thead class="bg-muted/50"><tr>${headerCells}</tr></thead><tbody>${bodyRows}</tbody></table></div>`;
+    });
+
     // Emojis and icons (keep as is)
-    
+
     // Line breaks (preserve double line breaks as paragraphs)
     html = html.replace(/\n\n/g, '</p><p class="mb-2 break-words">');
     html = html.replace(/\n/g, '<br/>');

package/components/ui/index.ts

@@ -85,7 +85,7 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger
 } from "./alert-dialog";
-export { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger } from "./sheet";
+export { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger } from "./sheet";
 export { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./drawer";
 export { Popover, PopoverContent, PopoverTrigger } from "./popover";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";

package/components/ui/route-map/route-map.stories.tsx

@@ -1,48 +1,54 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { RouteMap } from './route-map';
-import React from 'react';
-
-const meta: Meta<typeof RouteMap> = {
-  title: 'UI/RouteMap',
-  component: RouteMap,
-  render: (args) => <RouteMap {...args} />,
-  argTypes: {
-    travelMode: {
-      control: 'select',
-      options: ['DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'],
-    },
-    height: { control: 'text' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof RouteMap>;
-
-export const Default: Story = {
-  args: {
-    origin: { lat: -23.5505, lng: -46.6333 }, // São Paulo Center
-    destination: { lat: -23.5617, lng: -46.6560 }, // Avenida Paulista
-    height: "400px",
-  },
-  render: (args) => (
-    <div className="w-full max-w-4xl">
-      <RouteMap {...args} onRouteCalculated={(dist, dur) => console.log(`Distance: ${dist}, Duration: ${dur}`)} />
-    </div>
-  ),
-};
-
-export const WithWaypoints: Story = {
-  args: {
-    origin: { lat: -23.5505, lng: -46.6333 },
-    destination: { lat: -23.5617, lng: -46.6560 },
-    waypoints: [
-      { lat: -23.5550, lng: -46.6450 },
-    ],
-    height: "500px",
-  },
-  render: (args) => (
-    <div className="w-full max-w-4xl">
-      <RouteMap {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { RouteMap } from './route-map';
+import React from 'react';
+
+function MapStoryFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ width: 'min(100vw - 48px, 960px)', minWidth: 320 }}>
+      {children}
+    </div>
+  );
+}
+
+const meta: Meta<typeof RouteMap> = {
+  title: 'UI/RouteMap',
+  component: RouteMap,
+  render: (args) => (
+    <MapStoryFrame>
+      <RouteMap {...args} />
+    </MapStoryFrame>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    travelMode: {
+      control: 'select',
+      options: ['DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'],
+    },
+    height: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RouteMap>;
+
+export const Default: Story = {
+  args: {
+    origin: { lat: -23.5505, lng: -46.6333 },
+    destination: { lat: -23.5617, lng: -46.6560 },
+    height: "400px",
+    onRouteCalculated: (dist, dur) => console.log(`Distance: ${dist}, Duration: ${dur}`),
+  },
+};
+
+export const WithWaypoints: Story = {
+  args: {
+    origin: { lat: -23.5505, lng: -46.6333 },
+    destination: { lat: -23.5617, lng: -46.6560 },
+    waypoints: [
+      { lat: -23.5550, lng: -46.6450 },
+    ],
+    height: "500px",
+  },
+};

package/components/ui/sheet/sheet.stories.tsx

@@ -1,94 +1,95 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  SheetClose,
-} from './sheet';
-import { Button } from '../button';
-import { Input } from '../input';
-import { Label } from '../label';
-import React from 'react';
-
-const meta: Meta<typeof Sheet> = {
-  title: 'UI/Sheet',
-  component: Sheet,
-  render: (args) => <Sheet {...args} />,
-  argTypes: {
-    open: {
-      control: 'boolean',
-      description: 'Whether the sheet is open.',
-    },
-    modal: {
-      control: 'boolean',
-      description: 'Whether the sheet should be modal.',
-      defaultValue: true,
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Sheet>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Sheet {...args}>
-      <SheetTrigger asChild>
-        <Button variant="outline">Open Right Sheet</Button>
-      </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Edit profile</SheetTitle>
-          <SheetDescription>
-            Make changes to your profile here. Click save when you're done.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
-              Name
-            </Label>
-            <Input id="name" value="Pedro Duarte" className="col-span-3" />
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
-              Username
-            </Label>
-            <Input id="username" value="@peduarte" className="col-span-3" />
-          </div>
-        </div>
-        <SheetFooter>
-          <SheetClose asChild>
-            <Button type="submit">Save changes</Button>
-          </SheetClose>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  ),
-};
-
-export const SideBySide: Story = {
-  render: () => (
-    <div className="grid grid-cols-2 gap-2 w-fit">
-      {(["top", "bottom", "left", "right"] as const).map((side) => (
-        <Sheet key={side}>
-          <SheetTrigger asChild>
-            <Button variant="outline">{side}</Button>
-          </SheetTrigger>
-          <SheetContent side={side}>
-            <SheetHeader>
-              <SheetTitle>Edit profile</SheetTitle>
-              <SheetDescription>
-                This sheet pops out from the {side}.
-              </SheetDescription>
-            </SheetHeader>
-          </SheetContent>
-        </Sheet>
-      ))}
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetBody,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetClose,
+} from './sheet';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Label } from '../label';
+import React from 'react';
+
+const meta: Meta<typeof Sheet> = {
+  title: 'UI/Sheet',
+  component: Sheet,
+  render: (args) => <Sheet {...args} />,
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Whether the sheet is open.',
+    },
+    modal: {
+      control: 'boolean',
+      description: 'Whether the sheet should be modal.',
+      defaultValue: true,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Sheet>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Sheet {...args}>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Right Sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <SheetBody className="grid gap-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </SheetBody>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Save changes</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const SideBySide: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-2 w-fit">
+      {(["top", "bottom", "left", "right"] as const).map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button variant="outline">{side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>
+                This sheet pops out from the {side}.
+              </SheetDescription>
+            </SheetHeader>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  ),
+};

package/components/ui/sheet/sheet.tsx

@@ -102,6 +102,16 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+function SheetBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-body"
+      className={cn("flex-1 overflow-auto px-6", className)}
+      {...props}
+    />
+  );
+}
+
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -144,6 +154,7 @@ export {
   SheetClose,
   SheetContent,
   SheetHeader,
+  SheetBody,
   SheetFooter,
   SheetTitle,
   SheetDescription,

package/components/ui/simple-map/simple-map.stories.tsx

@@ -1,43 +1,48 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SimpleMap } from './simple-map';
-import React from 'react';
-
-const meta: Meta<typeof SimpleMap> = {
-  title: 'UI/SimpleMap',
-  component: SimpleMap,
-  render: (args) => <SimpleMap {...args} />,
-  argTypes: {
-    zoom: { control: { type: 'range', min: 1, max: 20 } },
-    height: { control: 'text' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SimpleMap>;
-
-export const Default: Story = {
-  args: {
-    center: { lat: -23.5505, lng: -46.6333 },
-    markerTitle: "Central Office",
-    markerInfo: "Paulista Ave, 1000",
-    zoom: 15,
-  },
-  render: (args) => (
-    <div className="w-full max-w-2xl">
-      <SimpleMap {...args} />
-    </div>
-  ),
-};
-
-export const WithoutMarker: Story = {
-  args: {
-    center: { lat: -23.5505, lng: -46.6333 },
-    showMarker: false,
-    zoom: 12,
-  },
-  render: (args) => (
-    <div className="w-full max-w-2xl">
-      <SimpleMap {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { SimpleMap } from './simple-map';
+import React from 'react';
+
+function MapStoryFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ width: 'min(100vw - 48px, 960px)', minWidth: 320 }}>
+      {children}
+    </div>
+  );
+}
+
+const meta: Meta<typeof SimpleMap> = {
+  title: 'UI/SimpleMap',
+  component: SimpleMap,
+  render: (args) => (
+    <MapStoryFrame>
+      <SimpleMap {...args} />
+    </MapStoryFrame>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    zoom: { control: { type: 'range', min: 1, max: 20 } },
+    height: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SimpleMap>;
+
+export const Default: Story = {
+  args: {
+    center: { lat: -23.5505, lng: -46.6333 },
+    markerTitle: "Central Office",
+    markerInfo: "Paulista Ave, 1000",
+    zoom: 15,
+  },
+};
+
+export const WithoutMarker: Story = {
+  args: {
+    center: { lat: -23.5505, lng: -46.6333 },
+    showMarker: false,
+    zoom: 12,
+  },
+};