@godxjp/ui-mcp 0.4.2 → 0.6.0

package/dist/index.js

@@ -314,7 +314,7 @@ const columns: ColumnDef<Member>[] = [
   {
     name: "Card",
     group: "data-display",
-    tagline: "Surface container with optional accent stripe, variant fill, size, and density. Compose with CardHeader/CardTitle/CardContent/CardFooter.",
+    tagline: 'Surface container with optional accent stripe, variant fill, size, and density. \u26A0\uFE0F The bare <Card> has NO inner padding \u2014 body content MUST be wrapped in <CardContent> (titles in <CardHeader>), or it sits FLUSH against the card edges. Never hand-roll padding with className="p-4"; use <CardContent>. Compose with CardHeader/CardTitle/CardContent/CardFooter.',
     props: [
       { name: "accent", type: '"primary" | "success" | "warning" | "info" | "attention" | "destructive"', description: "3px left-edge semantic accent stripe." },
       { name: "variant", type: '"default" | "muted" | "outline" | "featured"', defaultValue: '"default"', description: "Surface fill style." },
@@ -1252,6 +1252,75 @@ function findRule(num) {
 
 // src/data/patterns.ts
 var PATTERNS = [
+  {
+    name: "common-fixes",
+    tagline: "Fix the most common @godxjp/ui consumer mistakes & visual bugs (CardStat double-border, grey StatusBadge, crushed/empty table headers, washed-out sidebar footer, Inertia layout crash, SSR hydration). Before \u2192 after.",
+    tags: ["fixes", "migration", "bug", "cardstat", "statusbadge", "datatable", "sidebar", "gotcha", "review"],
+    code: `// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+// 0) \u2605 MOST COMMON: <Card> body has NO padding (content is flush against the edges)
+//    Cause: the bare <Card> has ZERO inner padding \u2014 it MUST contain <CardContent>.
+//    Don't hand-roll padding with className="p-4" on the Card either.
+// \u274C  <Card><Stack gap="md">\u2026fields\u2026</Stack></Card>          // flush, no padding
+// \u274C  <Card className="p-4">\u2026fields\u2026</Card>                   // hand-rolled padding
+// \u2705  <Card><CardContent><Stack gap="md">\u2026fields\u2026</Stack></CardContent></Card>
+//    Titles \u2192 <CardHeader><CardTitle>. Only go flush deliberately for a full-bleed table:
+// \u2705  <Card><CardContent flush><DataTable/></CardContent></Card>
+//    GENERAL RULE \u2014 compose godx-ui primitives FULLY; never hand-roll what one ships:
+//      padding \u2192 CardContent (not p-4) \xB7 controls \u2192 Input/Select/Button (not raw <input>/<select>/<button>)
+//      empty rows \u2192 DataTable's built-in empty / <EmptyState> (not a custom data.length===0 guard).
+//    If a primitive exists, USE it \u2014 don't reinvent it.
+
+// 1) CardStat shows a DOUBLE border (too thick)
+//    Cause: CardStat IS already a bordered Card. Don't wrap it.
+// \u274C  <Card><CardContent><CardStat label="x" value="1" /></CardContent></Card>
+// \u2705  <ResponsiveGrid columns={4}><CardStat label="x" value="1" /></ResponsiveGrid>
+//    Need a section title? Use a heading, NOT a Card:
+// \u2705  <Stack gap="sm"><div className="text-sm font-medium">KPI</div>
+//        <ResponsiveGrid columns={4}><CardStat .../></ResponsiveGrid></Stack>
+
+// 2) StatusBadge renders grey with a \u25CB (no colour) for localized/tier labels
+//    Cause: it auto-maps only English lifecycle keys. (@godxjp/ui >= 6.1)
+// \u274C  <StatusBadge status="\u30D7\u30EC\u30DF\u30A2\u30E0" />
+// \u2705  <StatusBadge status="\u30D7\u30EC\u30DF\u30A2\u30E0" tone="success" icon={null} />   // tier \u2192 pill, no icon
+// \u2705  <StatusBadge status="active" label="\u516C\u958B\u4E2D" />                   // lifecycle \u2192 keep icon
+
+// 3) Table text collapses to one char per line, or a chip wraps
+//    Cause: pre-6.1.2. (@godxjp/ui >= 6.1.2 \u2192 cells + chips are nowrap)
+// \u2705  npm i @godxjp/ui@^6.2.0
+// \u2705  give long columns a width:  { key: "name", header: "\u6C0F\u540D", width: "w-64" }
+
+// 4) Empty (icon/action) column header shows a blank grey block
+//    (@godxjp/ui >= 6.2.0 auto-hides it: [data-slot=table-head][data-empty] \u2192 transparent)
+// \u2705  npm i @godxjp/ui@^6.2.0   // header: "" now renders a transparent cell
+
+// 5) DataTable columns are crushed / squeezed
+//    Cause: the table is nested in a narrow grid column.
+// \u274C  <ResponsiveGrid columns={3}><div className="lg:col-span-2"><Card><DataTable/></Card></div></ResponsiveGrid>
+// \u2705  Table gets its OWN full-width row: <Card><CardContent flush><DataTable/></CardContent></Card>
+
+// 6) FilterBar has no padding (sticks to the edge)
+//    Cause: it's inside CardContent flush (flush strips padding \u2014 that's for tables).
+// \u274C  <Card><CardContent flush><FilterBar/><DataTable/></CardContent></Card>
+// \u2705  <FilterBar/>  then  <Card><CardContent flush><DataTable/></CardContent></Card>
+
+// 7) Sidebar footer looks washed-out / off-design
+//    Cause: raw opacity-*/text-[11px]. Use semantic tokens.
+// \u2705  <div className="text-muted-foreground text-xs">
+//        <div className="text-foreground font-medium">{name}</div><div>{role}</div></div>
+
+// 8) Inertia: "Objects are not valid as a React child {errors, auth, \u2026}"
+//    Cause: persistent layout passed as a render fn. Use the ARRAY form.
+// \u274C  Page.layout = (page) => <Layout>{page}</Layout>
+// \u2705  Page.layout = [Layout]            // Layout is ({children}) => ...
+
+// 9) Inertia v3 hydration mismatch ("server rendered text didn't match the client")
+//    Cause: Math.random()/argless new Date() during render (SSR \u2260 client).
+// \u2705  seed deterministically by index, or compute in an event handler.
+
+// 10) Hide a column on mobile / sign-aware KPI delta (@godxjp/ui >= 6.2.0)
+// \u2705  columns: [{ key: "email", header: "\u30E1\u30FC\u30EB", hiddenOnMobile: true }]
+// \u2705  <CardStat label="\u58F2\u4E0A" value="\xA58.2M" delta="+12%" />   // + green / - red; inverse flips`
+  },
   {
     name: "signup-form",
     tagline: "Card-wrapped sign-up form using react-hook-form + zod with FormField/Input and a CardFooter action bar (real @godxjp/ui API).",