@godxjp/ui-mcp 0.4.2 → 0.5.0

package/dist/index.js

@@ -1252,6 +1252,62 @@ 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
+// 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).",