@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react-ui/ui/DataCard/index.tsx

@@ -0,0 +1,406 @@
+'use client';
+
+import * as React from 'react';
+import { motion, useMotionValue, useSpring } from 'motion/react';
+import { cn } from '@/react-ui/lib/utils';
+import { getStrictContext } from '@/react-ui/lib/get-strict-context';
+import { useControlledState } from '@/react-ui/hooks/State/UseControlledState';
+
+// Import from existing components
+import { CornerBracket } from '@/react-ui/ui/CornerBracket';
+import { CountingNumber } from '@/react-ui/primitives/CountingNumber';
+import { Switch, SwitchThumb } from '@/react-ui/ui/Switch';
+
+import { dataCardVariants, dataCardStyles, bracketVariants, dataCardStateStyles } from './DataCard.styles';
+import type { SlotOverrides } from '@/core/types';
+import type {
+  IDataCardProps,
+  IDataCardValueProps,
+  IDataCardLabelProps,
+  IDataCardToggleProps,
+  IDataCardActionsProps,
+  IDataCardBracketProps,
+  IDataCardState,
+  DataCardSlot,
+} from './DataCard.types';
+
+/**
+ * Context type for DataCard state management.
+ */
+type DataCardContextType = {
+  /** Current variant of: card. */
+  variant: IDataCardProps['variant'];
+  /** Current size of: card. */
+  size: IDataCardProps['size'];
+  /** Whether card is disabled. */
+  disabled: boolean;
+  /** Whether glass effect is enabled. */
+  glass: boolean;
+  /** Slot overrides from parent. */
+  slots?: SlotOverrides<DataCardSlot>;
+  /** Update interaction state. */
+  setState: React.Dispatch<React.SetStateAction<IDataCardState>>;
+};
+
+const [DataCardProvider, useDataCard] =
+  getStrictContext<DataCardContextType>('DataCardContext');
+
+/**
+ * DataCard — comprehensive showcase component demonstrating mks-ui patterns.
+ *
+ * Features:
+ * - Slot overrides for customization
+ * - State-based styling (hover, pressed, disabled)
+ * - CVA variants (size, color variant)
+ * - asChild composition pattern
+ * - Motion/animation integration
+ * - Custom render functions
+ * - Form field integration
+ * - Icon composition
+ * - Glassmorphism effects
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardValue number={1234} />
+ *   <DataCardToggle />
+ * </DataCard>
+ * ```
+ */
+function DataCard({
+  variant = 'default',
+  size = 'default',
+  disabled = false,
+  glass = true,
+  showBrackets = true,
+  className,
+  style,
+  slots,
+  config,
+  children,
+  ...props
+}: IDataCardProps) {
+  const [state, setState] = React.useState<IDataCardState>({
+    hovered: false,
+    pressed: false,
+    disabled: disabled ?? false,
+  });
+
+  const contextValue: DataCardContextType = React.useMemo(
+    () => ({ variant, size, disabled: disabled ?? false, glass, slots, setState }),
+    [variant, size, disabled, glass, slots]
+  );
+
+  const computedClassName = React.useMemo(() => {
+    if (typeof className === 'function') {
+      return className(state);
+    }
+    return className;
+  }, [className, state]);
+
+  const computedStyle = React.useMemo(() => {
+    if (typeof style === 'function') {
+      return style(state);
+    }
+    return style;
+  }, [style, state]);
+
+  return (
+    <DataCardProvider value={contextValue}>
+      <motion.div
+        data-slot="data-card"
+        data-variant={variant}
+        data-size={size}
+        data-disabled={disabled || undefined}
+        aria-disabled={disabled || undefined}
+        className={cn(
+          dataCardVariants({ variant, size, glass }),
+          slots?.root,
+          computedClassName,
+          state.hovered && dataCardStateStyles.hovered,
+          state.pressed && dataCardStateStyles.pressed,
+          disabled && dataCardStateStyles.disabled
+        )}
+        style={computedStyle}
+        onHoverStart={() => setState((prev) => ({ ...prev, hovered: true }))}
+        onHoverEnd={() => setState((prev) => ({ ...prev, hovered: false }))}
+        onTapStart={() => setState((prev) => ({ ...prev, pressed: true }))}
+        onTap={() => setState((prev) => ({ ...prev, pressed: false }))}
+        onTapCancel={() => setState((prev) => ({ ...prev, pressed: false }))}
+        {...props}
+      >
+        {showBrackets && (
+          <>
+            <DataCardBracket
+              position="tl"
+              variant={variant === 'accent' ? 'accent' : 'default'}
+            />
+            <DataCardBracket
+              position="tr"
+              variant={variant === 'accent' ? 'accent' : 'default'}
+            />
+            <DataCardBracket
+              position="bl"
+              variant={variant === 'accent' ? 'accent' : 'default'}
+            />
+            <DataCardBracket
+              position="br"
+              variant={variant === 'accent' ? 'accent' : 'default'}
+            />
+          </>
+        )}
+        {children}
+      </motion.div>
+    </DataCardProvider>
+  );
+}
+
+/**
+ * DataCardValue — displays animated number with CountingNumber.
+ *
+ * @example
+ * ```tsx
+ * <DataCardValue
+ *   number={1234}
+ *   label="Active Users"
+ *   unit="users"
+ * />
+ * ```
+ */
+function DataCardValue({
+  number,
+  label,
+  unit,
+  decimalPlaces = 0,
+  padStart = false,
+}: IDataCardValueProps) {
+  const { variant, size } = useDataCard();
+
+  return (
+    <div data-slot="data-card-value" className={cn(dataCardStyles.value)}>
+      {label && (
+        <span className="text-muted-foreground text-xs uppercase tracking-wider font-mono">
+          {label}
+        </span>
+      )}
+      <CountingNumber
+        number={number}
+        decimalPlaces={decimalPlaces}
+        padStart={padStart}
+        transition={{
+          stiffness: variant === 'accent' ? 150 : 90,
+          damping: variant === 'accent' ? 20 : 10,
+        }}
+        className={
+          size === 'compact'
+            ? 'text-3xl font-bold'
+            : size === 'spacious'
+              ? 'text-5xl font-bold'
+              : 'text-4xl font-bold'
+        }
+      />
+      {unit && (
+        <span className="text-muted-foreground text-lg ml-1">{unit}</span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * DataCardLabel — displays title and description.
+ *
+ * @example
+ * ```tsx
+ * <DataCardLabel
+ *   title="Revenue"
+ *   description="This month"
+ * />
+ * ```
+ */
+function DataCardLabel({
+  title,
+  description,
+  className,
+  ...props
+}: IDataCardLabelProps) {
+  const { slots } = useDataCard();
+
+  return (
+    <div
+      data-slot="data-card-label"
+      className={cn(
+        dataCardStyles.label,
+        slots?.label,
+        className
+      )}
+      {...props}
+    >
+      {title && (
+        <h3 className="text-foreground font-semibold">{title}</h3>
+      )}
+      {description && (
+        <p className="text-muted-foreground text-sm">{description}</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * DataCardToggle — interactive switch element.
+ *
+ * Uses asChild pattern for composition with Switch component.
+ *
+ * @example
+ * ```tsx
+ * <DataCardToggle
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ *   label="Enable notifications"
+ *   checkedIcon={<BellIcon />}
+ *   uncheckedIcon={<BellOffIcon />}
+ * />
+ * ```
+ */
+function DataCardToggle({
+  checked,
+  onCheckedChange,
+  checkedIcon,
+  uncheckedIcon,
+  label,
+}: IDataCardToggleProps) {
+  const { disabled, variant, size, glass, slots } = useDataCard();
+
+  return (
+    <div data-slot="data-card-toggle" className={cn(dataCardStyles.toggle, slots?.toggle)}>
+      {label && <span className="text-sm text-muted-foreground">{label}</span>}
+      <Switch
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+      >
+        <SwitchThumb />
+        {checkedIcon && (
+          <div className="text-primary">{checkedIcon}</div>
+        )}
+        {!checkedIcon && (
+          <div className="text-muted-foreground">{uncheckedIcon}</div>
+        )}
+      </Switch>
+    </div>
+  );
+}
+
+/**
+ * DataCardActions — container for action buttons.
+ *
+ * @example
+ * ```tsx
+ * <DataCardActions align="end">
+ *   <Button size="sm">Edit</Button>
+ *   <Button size="sm" variant="ghost">Delete</Button>
+ * </DataCardActions>
+ * ```
+ */
+function DataCardActions({
+  align = 'end',
+  className,
+  children,
+  ...props
+}: IDataCardActionsProps) {
+  const { variant, size, glass, slots } = useDataCard();
+
+  return (
+    <div
+      data-slot="data-card-actions"
+      data-align={align}
+      className={cn(
+        dataCardStyles.actions,
+        align === 'center' && 'justify-center',
+        align === 'start' && 'justify-start',
+        align === 'end' && 'justify-end',
+        slots?.actions,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * DataCardBracket — decorative corner bracket.
+ *
+ * Wraps CornerBracket with motion animations.
+ *
+ * @example
+ * ```tsx
+ * <DataCardBracket position="tl" variant="accent" />
+ * ```
+ */
+function DataCardBracket({
+  position,
+  variant = 'default',
+  className,
+}: IDataCardBracketProps) {
+  const { size, glass, slots } = useDataCard();
+
+  const sizeMap = {
+    compact: 16,
+    default: 20,
+    spacious: 24,
+  } as const;
+
+  return (
+    <div className={cn(dataCardStyles.bracket, slots?.bracket, className)}>
+      <CornerBracket
+        position={position}
+        variant={variant}
+        size={sizeMap[size ?? 'default']}
+      />
+    </div>
+  );
+}
+
+/**
+ * Hook to access DataCard context.
+ * Must be used within DataCard provider.
+ *
+ * @returns The current DataCard context
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { variant, size, disabled } = useDataCard();
+ *   return <div>Current variant: {variant}</div>;
+ * }
+ * ```
+ */
+export { useDataCard };
+
+export {
+  DataCard,
+  DataCardValue,
+  DataCardLabel,
+  DataCardToggle,
+  DataCardActions,
+  DataCardBracket,
+  dataCardVariants,
+};
+
+// Re-export types
+export type {
+  IDataCardProps,
+  IDataCardValueProps,
+  IDataCardLabelProps,
+  IDataCardToggleProps,
+  IDataCardActionsProps,
+  IDataCardBracketProps,
+  IDataCardState,
+  IDataCardConfig,
+  DataCardVariant,
+  DataCardSize,
+  DataCardSlot,
+} from './DataCard.types';
+
+export { dataCardStyles } from './DataCard.styles';