@open-mercato/ui 0.6.3-develop.3901.1.ddad60693a → 0.6.3

package/src/backend/__tests__/lazy-heavy-libraries.test.ts

@@ -47,4 +47,57 @@ describe('heavy libraries are lazy-loaded', () => {
     expect(source).not.toMatch(/from\s+['"]remark-gfm['"]/)
     expect(source).toMatch(/markdownToPlainText/)
   })
+
+  it('BarChart wrapper does not statically import recharts', () => {
+    const source = read('packages/ui/src/backend/charts/BarChart.tsx')
+    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]recharts['"]/m)
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/BarChartImpl['"]\)/)
+  })
+
+  it('LineChart wrapper does not statically import recharts', () => {
+    const source = read('packages/ui/src/backend/charts/LineChart.tsx')
+    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]recharts['"]/m)
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/LineChartImpl['"]\)/)
+  })
+
+  it('PieChart wrapper does not statically import recharts', () => {
+    const source = read('packages/ui/src/backend/charts/PieChart.tsx')
+    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]recharts['"]/m)
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/PieChartImpl['"]\)/)
+  })
+
+  it('recharts is only imported by the chart *Impl modules', () => {
+    const impls = ['BarChartImpl', 'LineChartImpl', 'PieChartImpl']
+    for (const name of impls) {
+      const source = read(`packages/ui/src/backend/charts/${name}.tsx`)
+      expect(source).toMatch(/from\s+['"]recharts['"]/)
+    }
+  })
+
+  it('WorkflowGraph wrapper has only type-only @xyflow/react imports', () => {
+    const source = read(
+      'packages/core/src/modules/workflows/components/WorkflowGraph.tsx',
+    )
+    expect(source).not.toMatch(
+      /^[^\n/]*import\s+(?!type\b)[^'\n]+from\s+['"]@xyflow\/react['"]/m,
+    )
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/WorkflowGraphImpl['"]\)/)
+  })
+
+  it('WorkflowGraphImpl owns the @xyflow/react runtime import and CSS', () => {
+    const source = read(
+      'packages/core/src/modules/workflows/components/WorkflowGraphImpl.tsx',
+    )
+    expect(source).toMatch(/from\s+['"]@xyflow\/react['"]/)
+    expect(source).toMatch(/['"]@xyflow\/react\/dist\/style\.css['"]/)
+  })
+
+  it('globals.css no longer eagerly imports @xyflow/react styles', () => {
+    const source = read('apps/mercato/src/app/globals.css')
+    expect(source).not.toMatch(/@xyflow\/react\/dist\/style\.css/)
+  })
 })

package/src/backend/charts/BarChart.tsx

@@ -1,18 +1,8 @@
 "use client"
 
 import * as React from 'react'
-import {
-  BarChart as RechartsBarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts'
+import dynamic from 'next/dynamic'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
 
 export type BarChartDataItem = Record<string, string | number | null | undefined>
 
@@ -43,6 +33,15 @@ function defaultValueFormatter(value: number): string {
   return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
 }
 
+const BarChartImpl = dynamic(() => import('./BarChartImpl'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-40 sm:h-48 items-center justify-center">
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  ),
+})
+
 export function BarChart({
   title,
   data,
@@ -59,10 +58,6 @@ export function BarChart({
   emptyMessage = 'No data available',
   categoryLabels,
 }: BarChartProps) {
-  const getBarColor = (idx: number): string => {
-    return resolveChartColor(colors?.[idx], idx)
-  }
-
   const hasWrapper = !!title
   const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className
 
@@ -99,66 +94,20 @@ export function BarChart({
     )
   }
 
-  const isHorizontal = layout === 'horizontal'
-  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200
-
-  const chartContent = (
-    <ResponsiveContainer width="100%" height={chartHeight}>
-        <RechartsBarChart
-          data={data}
-          layout={isHorizontal ? 'vertical' : 'horizontal'}
-          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-        >
-          {showGridLines && (
-            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
-          )}
-          <XAxis
-            type={isHorizontal ? 'number' : 'category'}
-            dataKey={isHorizontal ? undefined : index}
-            tickFormatter={isHorizontal ? valueFormatter : undefined}
-            tick={{ fontSize: 11 }}
-          />
-          <YAxis
-            type={isHorizontal ? 'category' : 'number'}
-            dataKey={isHorizontal ? index : undefined}
-            tickFormatter={isHorizontal ? undefined : valueFormatter}
-            width={isHorizontal ? 90 : 50}
-            interval={0}
-            tick={{ fontSize: 10 }}
-          />
-          <Tooltip
-            content={
-              <ChartTooltipContent
-                valueFormatter={valueFormatter}
-                categoryLabels={categoryLabels}
-                labelFormatter={(label, payload) => {
-                  const entry = payload?.[0] as { payload?: BarChartDataItem } | undefined
-                  const item = entry?.payload
-                  return item?.[index] ? String(item[index]) : label
-                }}
-              />
-            }
-            cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}
-          />
-          {showLegend && categories.length > 1 && (
-            <Legend verticalAlign="top" height={36} />
-          )}
-          {categories.map((category, idx) => (
-            <Bar
-              key={category}
-              dataKey={category}
-              fill={getBarColor(idx)}
-              radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}
-            />
-          ))}
-        </RechartsBarChart>
-      </ResponsiveContainer>
-  )
-
   return (
     <div className={wrapperClass}>
       {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
-      {chartContent}
+      <BarChartImpl
+        data={data}
+        index={index}
+        categories={categories}
+        colors={colors}
+        layout={layout}
+        valueFormatter={valueFormatter}
+        showLegend={showLegend}
+        showGridLines={showGridLines}
+        categoryLabels={categoryLabels}
+      />
     </div>
   )
 }

package/src/backend/charts/BarChartImpl.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import * as React from 'react'
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
+import type { BarChartDataItem, BarChartProps } from './BarChart'
+
+type ImplProps = Pick<
+  BarChartProps,
+  | 'data'
+  | 'index'
+  | 'categories'
+  | 'colors'
+  | 'layout'
+  | 'valueFormatter'
+  | 'showLegend'
+  | 'showGridLines'
+  | 'categoryLabels'
+> & {
+  valueFormatter: (value: number) => string
+}
+
+export default function BarChartImpl({
+  data,
+  index,
+  categories,
+  colors,
+  layout = 'vertical',
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  categoryLabels,
+}: ImplProps) {
+  const isHorizontal = layout === 'horizontal'
+  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200
+  const getBarColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)
+
+  return (
+    <ResponsiveContainer width="100%" height={chartHeight}>
+      <RechartsBarChart
+        data={data}
+        layout={isHorizontal ? 'vertical' : 'horizontal'}
+        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+      >
+        {showGridLines && (
+          <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+        )}
+        <XAxis
+          type={isHorizontal ? 'number' : 'category'}
+          dataKey={isHorizontal ? undefined : index}
+          tickFormatter={isHorizontal ? valueFormatter : undefined}
+          tick={{ fontSize: 11 }}
+        />
+        <YAxis
+          type={isHorizontal ? 'category' : 'number'}
+          dataKey={isHorizontal ? index : undefined}
+          tickFormatter={isHorizontal ? undefined : valueFormatter}
+          width={isHorizontal ? 90 : 50}
+          interval={0}
+          tick={{ fontSize: 10 }}
+        />
+        <Tooltip
+          content={
+            <ChartTooltipContent
+              valueFormatter={valueFormatter}
+              categoryLabels={categoryLabels}
+              labelFormatter={(label, payload) => {
+                const entry = payload?.[0] as { payload?: BarChartDataItem } | undefined
+                const item = entry?.payload
+                return item?.[index] ? String(item[index]) : label
+              }}
+            />
+          }
+          cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}
+        />
+        {showLegend && categories.length > 1 && (
+          <Legend verticalAlign="top" height={36} />
+        )}
+        {categories.map((category, idx) => (
+          <Bar
+            key={category}
+            dataKey={category}
+            fill={getBarColor(idx)}
+            radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}
+          />
+        ))}
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}

package/src/backend/charts/LineChart.tsx

@@ -1,20 +1,8 @@
 "use client"
 
 import * as React from 'react'
-import {
-  LineChart as RechartsLineChart,
-  AreaChart as RechartsAreaChart,
-  Line,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-} from 'recharts'
+import dynamic from 'next/dynamic'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
 
 export type LineChartDataItem = Record<string, string | number | null | undefined>
 
@@ -47,6 +35,15 @@ function defaultValueFormatter(value: number): string {
   return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
 }
 
+const LineChartImpl = dynamic(() => import('./LineChartImpl'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-48 items-center justify-center">
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  ),
+})
+
 export function LineChart({
   title,
   data,
@@ -65,10 +62,6 @@ export function LineChart({
   emptyMessage = 'No data available',
   categoryLabels,
 }: LineChartProps) {
-  const getLineColor = (idx: number): string => {
-    return resolveChartColor(colors?.[idx], idx)
-  }
-
   if (error) {
     return (
       <div className={`rounded-lg border bg-card p-4 ${className}`}>
@@ -102,78 +95,23 @@ export function LineChart({
     )
   }
 
-  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart
-
   return (
     <div className={`rounded-lg border bg-card p-4 ${className}`}>
       {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
       <div className="h-52 w-full">
-        <ResponsiveContainer width="100%" height="100%">
-          <ChartComponent
-            data={data}
-            margin={{ top: 5, right: 10, left: 10, bottom: 5 }}
-          >
-            {showGridLines && (
-              <CartesianGrid
-                strokeDasharray="3 3"
-                stroke="hsl(var(--border))"
-              />
-            )}
-            <XAxis
-              dataKey={index}
-              tick={{ fontSize: 12 }}
-              tickLine={false}
-              axisLine={false}
-            />
-            <YAxis
-              tickFormatter={valueFormatter}
-              tick={{ fontSize: 12 }}
-              tickLine={false}
-              axisLine={false}
-              width={56}
-            />
-            <Tooltip
-              content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}
-              cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}
-            />
-            {showLegend && categories.length > 1 && (
-              <Legend
-                verticalAlign="top"
-                height={36}
-                formatter={(value) => (
-                  <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
-                )}
-              />
-            )}
-            {showArea
-              ? categories.map((category, idx) => (
-                  <Area
-                    key={category}
-                    type={curveType}
-                    dataKey={category}
-                    stroke={getLineColor(idx)}
-                    fill={getLineColor(idx)}
-                    fillOpacity={0.2}
-                    strokeWidth={2}
-                    connectNulls={connectNulls}
-                    dot={false}
-                    activeDot={{ r: 4, strokeWidth: 0 }}
-                  />
-                ))
-              : categories.map((category, idx) => (
-                  <Line
-                    key={category}
-                    type={curveType}
-                    dataKey={category}
-                    stroke={getLineColor(idx)}
-                    strokeWidth={2}
-                    connectNulls={connectNulls}
-                    dot={false}
-                    activeDot={{ r: 4, strokeWidth: 0 }}
-                  />
-                ))}
-          </ChartComponent>
-        </ResponsiveContainer>
+        <LineChartImpl
+          data={data}
+          index={index}
+          categories={categories}
+          colors={colors}
+          showArea={showArea}
+          valueFormatter={valueFormatter}
+          showLegend={showLegend}
+          showGridLines={showGridLines}
+          curveType={curveType}
+          connectNulls={connectNulls}
+          categoryLabels={categoryLabels}
+        />
       </div>
     </div>
   )

package/src/backend/charts/LineChartImpl.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from 'react'
+import {
+  LineChart as RechartsLineChart,
+  AreaChart as RechartsAreaChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts'
+import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
+import type { LineChartProps } from './LineChart'
+
+type ImplProps = Pick<
+  LineChartProps,
+  | 'data'
+  | 'index'
+  | 'categories'
+  | 'colors'
+  | 'showArea'
+  | 'valueFormatter'
+  | 'showLegend'
+  | 'showGridLines'
+  | 'curveType'
+  | 'connectNulls'
+  | 'categoryLabels'
+> & {
+  valueFormatter: (value: number) => string
+}
+
+export default function LineChartImpl({
+  data,
+  index,
+  categories,
+  colors,
+  showArea = false,
+  valueFormatter,
+  showLegend = true,
+  showGridLines = true,
+  curveType = 'monotone',
+  connectNulls = true,
+  categoryLabels,
+}: ImplProps) {
+  const getLineColor = (idx: number): string => resolveChartColor(colors?.[idx], idx)
+  const ChartComponent = showArea ? RechartsAreaChart : RechartsLineChart
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <ChartComponent
+        data={data}
+        margin={{ top: 5, right: 10, left: 10, bottom: 5 }}
+      >
+        {showGridLines && (
+          <CartesianGrid
+            strokeDasharray="3 3"
+            stroke="hsl(var(--border))"
+          />
+        )}
+        <XAxis
+          dataKey={index}
+          tick={{ fontSize: 12 }}
+          tickLine={false}
+          axisLine={false}
+        />
+        <YAxis
+          tickFormatter={valueFormatter}
+          tick={{ fontSize: 12 }}
+          tickLine={false}
+          axisLine={false}
+          width={56}
+        />
+        <Tooltip
+          content={<ChartTooltipContent valueFormatter={valueFormatter} categoryLabels={categoryLabels} />}
+          cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }}
+        />
+        {showLegend && categories.length > 1 && (
+          <Legend
+            verticalAlign="top"
+            height={36}
+            formatter={(value) => (
+              <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
+            )}
+          />
+        )}
+        {showArea
+          ? categories.map((category, idx) => (
+              <Area
+                key={category}
+                type={curveType}
+                dataKey={category}
+                stroke={getLineColor(idx)}
+                fill={getLineColor(idx)}
+                fillOpacity={0.2}
+                strokeWidth={2}
+                connectNulls={connectNulls}
+                dot={false}
+                activeDot={{ r: 4, strokeWidth: 0 }}
+              />
+            ))
+          : categories.map((category, idx) => (
+              <Line
+                key={category}
+                type={curveType}
+                dataKey={category}
+                stroke={getLineColor(idx)}
+                strokeWidth={2}
+                connectNulls={connectNulls}
+                dot={false}
+                activeDot={{ r: 4, strokeWidth: 0 }}
+              />
+            ))}
+      </ChartComponent>
+    </ResponsiveContainer>
+  )
+}

package/src/backend/charts/PieChart.tsx

@@ -1,17 +1,8 @@
 "use client"
 
 import * as React from 'react'
-import {
-  PieChart as RechartsPieChart,
-  Pie,
-  Cell,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-  Label,
-} from 'recharts'
+import dynamic from 'next/dynamic'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
 
 export type PieChartDataItem = {
   name: string
@@ -42,6 +33,15 @@ function defaultValueFormatter(value: number): string {
   return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
 }
 
+const PieChartImpl = dynamic(() => import('./PieChartImpl'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-48 items-center justify-center">
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  ),
+})
+
 export function PieChart({
   title,
   data,
@@ -55,10 +55,6 @@ export function PieChart({
   className = '',
   emptyMessage = 'No data available',
 }: PieChartProps) {
-  const getSliceColor = (idx: number): string => {
-    return resolveChartColor(colors?.[idx], idx)
-  }
-
   const total = React.useMemo(() => {
     return data.reduce((sum, item) => sum + item.value, 0)
   }, [data])
@@ -99,56 +95,19 @@ export function PieChart({
     )
   }
 
-  const innerRadius = variant === 'donut' ? '60%' : 0
-  const outerRadius = '80%'
-
   return (
     <div className={wrapperClass}>
       {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
       <div className="h-52 w-full">
-        <ResponsiveContainer width="100%" height="100%">
-          <RechartsPieChart>
-            <Pie
-              data={data}
-              dataKey="value"
-              nameKey="name"
-              cx="50%"
-              cy="40%"
-              innerRadius={innerRadius}
-              outerRadius={outerRadius}
-              paddingAngle={2}
-              strokeWidth={0}
-            >
-              {data.map((_, idx) => (
-                <Cell key={`cell-${idx}`} fill={getSliceColor(idx)} />
-              ))}
-              {showLabel && variant === 'donut' && (
-                <Label
-                  value={valueFormatter(total)}
-                  position="center"
-                  className="fill-foreground text-2xl font-bold"
-                />
-              )}
-            </Pie>
-            {showTooltip && (
-              <Tooltip
-                content={
-                  <ChartTooltipContent
-                    valueFormatter={valueFormatter}
-                    hideLabel
-                  />
-                }
-              />
-            )}
-            <Legend
-              verticalAlign="bottom"
-              height={36}
-              formatter={(value) => (
-                <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
-              )}
-            />
-          </RechartsPieChart>
-        </ResponsiveContainer>
+        <PieChartImpl
+          data={data}
+          colors={colors}
+          variant={variant}
+          valueFormatter={valueFormatter}
+          showLabel={showLabel}
+          showTooltip={showTooltip}
+          total={total}
+        />
       </div>
     </div>
   )