@open-mercato/ui 0.6.4-develop.4199.1.86677441c2 → 0.6.4-develop.4210.1.d412061cfe

package/src/primitives/progress.tsx

@@ -1,28 +1,289 @@
 "use client"
+
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
 import { cn } from '@open-mercato/shared/lib/utils'
 
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+/**
+ * Determinate progress bar — both linear and circular. Linear is the
+ * default `Progress` export; circular is `CircularProgress`.
+ *
+ * Figma source: DS Open Mercato `Progress Bar` page (`450:17758`):
+ * `Progress Bar [1.1]` (`450:17821`), `Progress Bar Label [1.1]`
+ * (`515:3758`), `Progress Bar Line [1.1]` (`450:17810`, 5 tone
+ * variants: muted / accent / destructive / warning / success),
+ * `Circular Progress Bar [1.1]` (`466:4652`).
+ *
+ * Backward compatibility (Phase B rewrite): the original
+ * `<Progress value={n} max={100} className="..." />` API stays
+ * callable verbatim. The 3 existing call sites
+ * (`packages/ui/src/backend/NextStepCallout.tsx`,
+ * `packages/core/.../data_sync/.../runs/[id]/page.tsx`,
+ * `packages/sync-akeneo/.../akeneo-config/widget.client.tsx`)
+ * keep working without changes. New optional props (`size`, `tone`,
+ * `showValue`, `label`, `description`) are additive.
+ *
+ * ```tsx
+ * // Backward-compatible bare bar:
+ * <Progress value={50} />
+ *
+ * // Labelled variant per `Progress Bar Label [1.1]`:
+ * <Progress
+ *   value={80}
+ *   label="Data Storage"
+ *   showValue
+ *   description="Upgrade to unlock unlimited storage."
+ * />
+ *
+ * // Tone variants per `Progress Bar Line [1.1]`:
+ * <Progress value={42} tone="success" />
+ * <Progress value={42} tone="warning" />
+ * <Progress value={42} tone="destructive" />
+ *
+ * // Circular variant per `Circular Progress Bar [1.1]`:
+ * <CircularProgress value={75} size="default" showValue />
+ * ```
+ */
+
+export type ProgressTone =
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'destructive'
+  | 'muted'
+
+const PROGRESS_TONE_FILL: Record<ProgressTone, string> = {
+  accent: 'bg-accent-indigo',
+  success: 'bg-status-success-icon',
+  warning: 'bg-status-warning-icon',
+  destructive: 'bg-status-error-icon',
+  muted: 'bg-muted-foreground',
+}
+
+const progressTrackVariants = cva(
+  'relative w-full overflow-hidden rounded-full bg-input',
+  {
+    variants: {
+      size: {
+        sm: 'h-1',
+        default: 'h-2',
+        lg: 'h-3',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+const progressFillVariants = cva(
+  'h-full transition-all duration-300 ease-in-out',
+  {
+    variants: {
+      tone: {
+        accent: PROGRESS_TONE_FILL.accent,
+        success: PROGRESS_TONE_FILL.success,
+        warning: PROGRESS_TONE_FILL.warning,
+        destructive: PROGRESS_TONE_FILL.destructive,
+        muted: PROGRESS_TONE_FILL.muted,
+      },
+    },
+    defaultVariants: { tone: 'accent' },
+  },
+)
+
+export interface ProgressProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof progressTrackVariants> {
   value: number
   max?: number
+  /** Color of the filled portion. Default `accent` (indigo). */
+  tone?: ProgressTone
+  /** Show the percentage badge on the right of the label row. */
+  showValue?: boolean
+  /** Optional label rendered above the bar. */
+  label?: React.ReactNode
+  /** Optional description rendered below the bar in muted text. */
+  description?: React.ReactNode
+  /** Override the inner fill className (e.g. to apply a gradient). */
+  fillClassName?: string
 }
 
-export function Progress({ value, max = 100, className, ...props }: ProgressProps) {
+export function Progress({
+  value,
+  max = 100,
+  size,
+  tone,
+  showValue,
+  label,
+  description,
+  className,
+  fillClassName,
+  ...props
+}: ProgressProps) {
   const percentage = Math.min(100, Math.max(0, Math.round((value / max) * 100)))
-
-  return (
+  const hasLabelRow = label !== undefined || showValue === true
+  const bar = (
     <div
       role="progressbar"
       aria-valuenow={value}
       aria-valuemin={0}
       aria-valuemax={max}
-      className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}
+      data-slot="progress"
+      data-tone={tone ?? 'accent'}
+      className={cn(progressTrackVariants({ size }), className)}
       {...props}
     >
       <div
-        className="h-full bg-primary transition-all duration-300 ease-in-out"
+        data-slot="progress-fill"
+        className={cn(progressFillVariants({ tone }), fillClassName)}
         style={{ width: `${percentage}%` }}
       />
     </div>
   )
+
+  if (!hasLabelRow && description === undefined) return bar
+
+  return (
+    <div data-slot="progress-wrapper" className="flex w-full flex-col gap-1.5">
+      {hasLabelRow ? (
+        <div className="flex items-center justify-between gap-3 text-sm font-medium text-foreground">
+          <span data-slot="progress-label" className="min-w-0 truncate">
+            {label}
+          </span>
+          {showValue ? (
+            <span
+              data-slot="progress-value"
+              className="shrink-0 text-muted-foreground"
+            >
+              {percentage}%
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+      {bar}
+      {description !== undefined ? (
+        <div data-slot="progress-description" className="text-sm text-muted-foreground">
+          {description}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------
+// CircularProgress
+// ---------------------------------------------------------------------
+
+const CIRCULAR_SIZE_MAP = {
+  xs: { box: 24, stroke: 3, textClass: 'text-[9px]' },
+  sm: { box: 32, stroke: 3, textClass: 'text-[10px]' },
+  default: { box: 48, stroke: 4, textClass: 'text-xs' },
+  lg: { box: 64, stroke: 5, textClass: 'text-sm' },
+} as const
+
+export type CircularProgressSize = keyof typeof CIRCULAR_SIZE_MAP
+
+const CIRCULAR_TONE_STROKE: Record<ProgressTone, string> = {
+  accent: 'stroke-accent-indigo',
+  success: 'stroke-status-success-icon',
+  warning: 'stroke-status-warning-icon',
+  destructive: 'stroke-status-error-icon',
+  muted: 'stroke-muted-foreground',
+}
+
+export interface CircularProgressProps {
+  value: number
+  max?: number
+  size?: CircularProgressSize
+  tone?: ProgressTone
+  /** Render the percentage in the centre of the ring. */
+  showValue?: boolean
+  /** Override the inner content (replaces the default percentage label
+   * when `showValue` is true). Renders only when `showValue` is true. */
+  children?: React.ReactNode
+  /** Accessible label for the progressbar. Falls back to `${percentage}%`. */
+  ariaLabel?: string
+  className?: string
+  /** Override the track ring className (defaults to `stroke-input`). */
+  trackClassName?: string
+  /** Override the fill ring className (defaults per `tone`). */
+  fillClassName?: string
+}
+
+export function CircularProgress({
+  value,
+  max = 100,
+  size = 'default',
+  tone = 'accent',
+  showValue,
+  children,
+  ariaLabel,
+  className,
+  trackClassName,
+  fillClassName,
+}: CircularProgressProps) {
+  const percentage = Math.min(100, Math.max(0, Math.round((value / max) * 100)))
+  const { box, stroke, textClass } = CIRCULAR_SIZE_MAP[size]
+  const radius = (box - stroke) / 2
+  const circumference = 2 * Math.PI * radius
+  const dashOffset = circumference * (1 - percentage / 100)
+  const half = box / 2
+  return (
+    <div
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-label={ariaLabel ?? `${percentage}%`}
+      data-slot="circular-progress"
+      data-tone={tone}
+      data-size={size}
+      className={cn('relative inline-flex items-center justify-center', className)}
+    >
+      <svg
+        width={box}
+        height={box}
+        viewBox={`0 0 ${box} ${box}`}
+        className="-rotate-90"
+        aria-hidden="true"
+      >
+        <circle
+          data-slot="circular-progress-track"
+          cx={half}
+          cy={half}
+          r={radius}
+          fill="none"
+          strokeWidth={stroke}
+          className={cn('stroke-input', trackClassName)}
+        />
+        <circle
+          data-slot="circular-progress-fill"
+          cx={half}
+          cy={half}
+          r={radius}
+          fill="none"
+          strokeWidth={stroke}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+          className={cn(
+            CIRCULAR_TONE_STROKE[tone],
+            'transition-all duration-300 ease-in-out',
+            fillClassName,
+          )}
+        />
+      </svg>
+      {showValue ? (
+        <span
+          data-slot="circular-progress-value"
+          className={cn(
+            'absolute inset-0 inline-flex items-center justify-center font-medium text-foreground',
+            textClass,
+          )}
+        >
+          {children ?? `${percentage}%`}
+        </span>
+      ) : null}
+    </div>
+  )
 }

package/src/primitives/rating.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import * as React from 'react'
+import { Circle, Heart, Star, StarHalf } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+/**
+ * 1-to-N star / heart / dot rating per Figma `Rating & Review [1.0]`
+ * (DS Open Mercato componentSet `199969:1797`). Two distinct modes:
+ *
+ * - **Read-only display** — no `onChange` prop. Renders `role="img"` with
+ *   an `aria-label` like "4.5 out of 5 stars". Used in product reviews,
+ *   feedback summaries.
+ * - **Interactive input** — `onChange` provided. Renders as a row of
+ *   focusable buttons; arrow keys / number keys navigate, click /
+ *   Enter / Space commits. Used in submission forms.
+ *
+ * ```tsx
+ * // Read-only
+ * <Rating value={4.5} max={5} />
+ *
+ * // Interactive
+ * const [v, setV] = React.useState(0)
+ * <Rating value={v} onChange={setV} aria-label="Your rating" />
+ *
+ * // Half precision (stars only — Lucide ships StarHalf but not HeartHalf)
+ * <Rating value={3.5} max={5} allowHalf />
+ *
+ * // Heart variant
+ * <Rating value={3} max={5} icon="heart" />
+ * ```
+ */
+
+const ratingRootVariants = cva('inline-flex items-center gap-0.5', {
+  variants: {
+    size: {
+      sm: '[&>*]:size-4',
+      default: '[&>*]:size-5',
+      lg: '[&>*]:size-6',
+    },
+    disabled: {
+      true: 'cursor-not-allowed opacity-60',
+      false: '',
+    },
+  },
+  defaultVariants: { size: 'default', disabled: false },
+})
+
+const ratingItemColorVariants = cva('transition-colors', {
+  variants: {
+    fill: {
+      full: 'fill-status-warning-icon text-status-warning-icon',
+      half: 'fill-status-warning-icon text-status-warning-icon',
+      empty: 'fill-transparent text-muted-foreground/30',
+    },
+  },
+  defaultVariants: { fill: 'empty' },
+})
+
+type FillState = 'full' | 'half' | 'empty'
+
+function resolveFillState(index: number, value: number, allowHalf: boolean): FillState {
+  if (value >= index + 1) return 'full'
+  if (allowHalf && value >= index + 0.5) return 'half'
+  return 'empty'
+}
+
+function StarFull(props: React.ComponentProps<typeof Star>) {
+  return <Star aria-hidden="true" {...props} />
+}
+
+function StarHalfIcon(props: React.ComponentProps<typeof StarHalf>) {
+  return <StarHalf aria-hidden="true" {...props} />
+}
+
+function HeartIcon(props: React.ComponentProps<typeof Heart>) {
+  return <Heart aria-hidden="true" {...props} />
+}
+
+function CircleIcon(props: React.ComponentProps<typeof Circle>) {
+  return <Circle aria-hidden="true" {...props} />
+}
+
+function renderIcon(
+  iconType: 'star' | 'heart' | 'circle',
+  fill: FillState,
+  className: string,
+): React.ReactElement {
+  if (iconType === 'heart') {
+    // Lucide does not ship HeartHalf — half precision is treated as full
+    // for hearts (consumer should set allowHalf=false when icon="heart").
+    return <HeartIcon className={className} />
+  }
+  if (iconType === 'circle') {
+    return <CircleIcon className={className} />
+  }
+  // star
+  if (fill === 'half') return <StarHalfIcon className={className} />
+  return <StarFull className={className} />
+}
+
+export type RatingProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'> &
+  VariantProps<typeof ratingRootVariants> & {
+    /** Current rating value (0..max). Floats allowed when `allowHalf` is `true`. */
+    value: number
+    /** Total number of items. Defaults to 5. */
+    max?: number
+    /** Optional change handler. Presence flips the primitive into interactive mode. */
+    onChange?: (next: number) => void
+    /** Which icon glyph to render. Defaults to `'star'`. */
+    icon?: 'star' | 'heart' | 'circle'
+    /** Enable half-step precision (stars only — Lucide has no HeartHalf). */
+    allowHalf?: boolean
+    /** When true, dim the control and block clicks. Inherited via `disabled` prop on the root. */
+    disabled?: boolean
+    /** Required when interactive — screen-readers announce this as the group label. */
+    'aria-label'?: string
+  }
+
+export const Rating = React.forwardRef<HTMLSpanElement, RatingProps>(
+  (
+    {
+      className,
+      value,
+      max = 5,
+      onChange,
+      icon = 'star',
+      allowHalf = false,
+      size,
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const t = useT()
+    const interactive = typeof onChange === 'function'
+    const handleSelect = React.useCallback(
+      (next: number) => {
+        if (disabled) return
+        onChange?.(next)
+      },
+      [disabled, onChange],
+    )
+
+    // Read-only display path — plain span container with aria-label.
+    if (!interactive) {
+      return (
+        <span
+          ref={ref}
+          role="img"
+          aria-label={rest['aria-label'] ?? t('ui.rating.summary.ariaLabel', '{value} out of {max}', { value, max })}
+          data-slot="rating"
+          className={cn(ratingRootVariants({ size, disabled }), className)}
+          {...rest}
+        >
+          {Array.from({ length: max }).map((_, index) => {
+            const fill = resolveFillState(index, value, allowHalf)
+            return (
+              <span
+                key={index}
+                data-slot="rating-item"
+                data-fill={fill}
+                className="inline-flex items-center justify-center"
+              >
+                {renderIcon(icon, fill, ratingItemColorVariants({ fill }))}
+              </span>
+            )
+          })}
+        </span>
+      )
+    }
+
+    // Interactive path — N buttons. Arrow keys move focus between items;
+    // Home / End jump to first / last. Click / Enter / Space commits the
+    // value (index + 1 for full clicks; index + 0.5 if allowHalf && the
+    // click landed on the left half of the icon).
+    return (
+      <span
+        ref={ref}
+        role="radiogroup"
+        aria-label={rest['aria-label']}
+        data-slot="rating"
+        className={cn(ratingRootVariants({ size, disabled }), className)}
+        {...rest}
+      >
+        {Array.from({ length: max }).map((_, index) => {
+          const fill = resolveFillState(index, value, allowHalf)
+          // Empty rating (value === 0) falls back to the first item so it stays Tab-reachable.
+          const isCurrent = value === 0 ? index === 0 : Math.ceil(value) - 1 === index
+          return (
+            <button
+              key={index}
+              type="button"
+              role="radio"
+              aria-checked={fill !== 'empty'}
+              aria-label={t('ui.rating.item.ariaLabel', '{position} of {max}', { position: index + 1, max })}
+              tabIndex={isCurrent ? 0 : -1}
+              data-slot="rating-item"
+              data-fill={fill}
+              disabled={disabled}
+              onClick={(event) => {
+                if (!allowHalf) {
+                  handleSelect(index + 1)
+                  return
+                }
+                const rect = event.currentTarget.getBoundingClientRect()
+                const isLeftHalf = event.clientX - rect.left < rect.width / 2
+                handleSelect(isLeftHalf ? index + 0.5 : index + 1)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+                  event.preventDefault()
+                  handleSelect(Math.min(max, value + (allowHalf ? 0.5 : 1)))
+                } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+                  event.preventDefault()
+                  handleSelect(Math.max(0, value - (allowHalf ? 0.5 : 1)))
+                } else if (event.key === 'Home') {
+                  event.preventDefault()
+                  handleSelect(allowHalf ? 0.5 : 1)
+                } else if (event.key === 'End') {
+                  event.preventDefault()
+                  handleSelect(max)
+                }
+              }}
+              className={cn(
+                'inline-flex items-center justify-center rounded-sm outline-none',
+                'focus-visible:shadow-focus',
+                'enabled:hover:scale-110 enabled:hover:transition-transform',
+                'disabled:cursor-not-allowed',
+              )}
+            >
+              {renderIcon(icon, fill, ratingItemColorVariants({ fill }))}
+            </button>
+          )
+        })}
+      </span>
+    )
+  },
+)
+Rating.displayName = 'Rating'
+
+export { ratingRootVariants, ratingItemColorVariants }