@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

package/src/components/Checkbox/Checkbox.tsx

@@ -1,20 +1,23 @@
-import * as React from "react";
-import { cloneElement, isValidElement, type CSSProperties, type ReactElement } from "react";
+import * as React from "@lynx-js/react";
+import { isValidElement, type ReactElement } from "@lynx-js/react";
 import clsx from "clsx";
-import type { MainThread } from "@lynx-js/types";
 
 import { checkbox } from "@seed-design/lynx-css/recipes/checkbox";
 import type { CheckboxVariantProps } from "@seed-design/lynx-css/recipes/checkbox";
 import { checkmark } from "@seed-design/lynx-css/recipes/checkmark";
 import type { CheckmarkVariantProps } from "@seed-design/lynx-css/recipes/checkmark";
 import { checkboxGroup } from "@seed-design/lynx-css/recipes/checkbox-group";
-import { vars as checkmarkVars } from "@seed-design/lynx-css/vars/component/checkmark";
 
-import { useControllableState } from "../../hooks/use-controllable-state";
-import { useIconColor } from "../../hooks/use-icon-color";
-import { usePressTap } from "../../hooks/use-press-tap";
-import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxIconElementProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+import { InternalIcon } from "../Icon/Icon";
 
 /**
  * @platform Lynx
@@ -30,20 +33,14 @@ import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-
  * recipe 의 `color` 토큰을 `tint-color` 로 동기화한다. raw SVG 주입은 Lynx 범위 밖.
  */
 
-type CheckboxSize = NonNullable<CheckboxVariantProps["size"]>;
-type CheckboxWeight = NonNullable<CheckboxVariantProps["weight"]>;
-type CheckmarkTone = NonNullable<CheckmarkVariantProps["tone"]>;
-type CheckmarkVariant = NonNullable<CheckmarkVariantProps["variant"]>;
-
 interface CheckboxContextValue {
   checked: boolean;
   indeterminate: boolean;
   disabled: boolean;
   pressed: boolean;
-  size: CheckboxSize;
-  weight: CheckboxWeight;
-  tone: CheckmarkTone;
-  variant: CheckmarkVariant;
+  checkboxVariantProps: CheckboxVariantProps;
+  checkmarkVariantProps: CheckmarkVariantProps;
+  toggle: () => void;
 }
 
 const CheckboxContext = React.createContext<CheckboxContextValue | null>(null);
@@ -56,10 +53,15 @@ function useCheckboxContext(consumer: string): CheckboxContextValue {
   return ctx;
 }
 
-const CheckmarkIconClassContext = React.createContext<string | null>(null);
+interface CheckmarkControlContextValue {
+  iconClassName: string;
+  checkmarkVariantProps: CheckmarkVariantProps;
+}
+
+const CheckmarkControlContext = React.createContext<CheckmarkControlContextValue | null>(null);
 
-function useCheckmarkIconClass(consumer: string): string {
-  const ctx = React.useContext(CheckmarkIconClassContext);
+function useCheckmarkControlContext(consumer: string): CheckmarkControlContextValue {
+  const ctx = React.useContext(CheckmarkControlContext);
   if (!ctx) {
     throw new Error(`<${consumer}/> must be rendered inside <CheckboxControl/>.`);
   }
@@ -70,9 +72,8 @@ function useCheckmarkIconClass(consumer: string): string {
 
 export interface CheckboxRootProps
   extends CheckboxVariantProps,
-    Omit<CheckmarkVariantProps, "size" | "checked" | "disabled" | "indeterminate"> {
-  children?: React.ReactNode;
-  className?: string;
+    Omit<CheckmarkVariantProps, "size" | "checked" | "disabled" | "indeterminate">,
+    LynxStyledElementProps {
   checked?: boolean;
   defaultChecked?: boolean;
   indeterminate?: boolean;
@@ -93,10 +94,6 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
   } = props;
   const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, nativeProps] =
     splitMultipleVariantsProps(restProps, { checkbox, checkmark });
-  const weight: CheckboxWeight = checkboxVariantProps.weight ?? "regular";
-  const size: CheckboxSize = checkboxVariantProps.size ?? "medium";
-  const tone: CheckmarkTone = checkmarkVariantProps.tone ?? "brand";
-  const variant: CheckmarkVariant = checkmarkVariantProps.variant ?? "square";
 
   const [checked, setChecked] = useControllableState({
     value: checkedProp,
@@ -104,22 +101,40 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
     onChange: onCheckedChange,
   });
 
+  const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
+
   const { pressed, ...pressHandlers } = usePressTap({
     disabled,
-    onTap: () => setChecked(!checked),
+    onTap: toggle,
   });
 
-  const rootClassName = checkbox({ weight, size, disabled }).root;
-
-  const ctx = React.useMemo<CheckboxContextValue>(
-    () => ({ checked, indeterminate, disabled, pressed, size, weight, tone, variant }),
-    [checked, indeterminate, disabled, pressed, size, weight, tone, variant],
+  const rootClassName = checkbox({ ...checkboxVariantProps, disabled }).root;
+
+  const contextValue = React.useMemo<CheckboxContextValue>(
+    () => ({
+      checked,
+      indeterminate,
+      disabled,
+      pressed,
+      checkboxVariantProps,
+      checkmarkVariantProps,
+      toggle,
+    }),
+    [
+      checked,
+      indeterminate,
+      disabled,
+      pressed,
+      checkboxVariantProps,
+      checkmarkVariantProps,
+      toggle,
+    ],
   );
 
   return (
-    <CheckboxContext.Provider value={ctx}>
+    <CheckboxContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(rootClassName, className)}
         {...pressHandlers}
         {...nativeProps}
@@ -134,64 +149,49 @@ CheckboxRoot.displayName = "CheckboxRoot";
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface CheckboxControlProps
-  extends Pick<CheckmarkVariantProps, "tone" | "variant" | "size"> {
-  children?: React.ReactNode;
-  className?: string;
-}
+  extends Pick<CheckmarkVariantProps, "tone" | "variant" | "size">,
+    LynxStyledElementProps {}
 
 export const CheckboxControl = React.forwardRef<unknown, CheckboxControlProps>((props, ref) => {
   const [variantProps, restProps] = checkmark.splitVariantProps(props);
   const { children, className, ...nativeProps } = restProps;
-  const {
-    checked,
-    indeterminate,
-    disabled,
-    pressed,
-    tone: ctxTone,
-    variant: ctxVariant,
-    size: ctxSize,
-  } = useCheckboxContext("CheckboxControl");
-
-  const tone: CheckmarkTone = variantProps.tone ?? ctxTone;
-  const variant: CheckmarkVariant = variantProps.variant ?? ctxVariant;
-  const size: CheckboxSize = (variantProps.size as CheckboxSize | undefined) ?? ctxSize;
-
-  const classes = React.useMemo(
-    () => checkmark({ variant, tone, size, checked, disabled, indeterminate, pressed }),
-    [variant, tone, size, checked, disabled, indeterminate, pressed],
-  );
+  const context = useCheckboxContext("CheckboxControl");
+  const checkmarkVariantProps: CheckmarkVariantProps = {
+    ...context.checkmarkVariantProps,
+    ...variantProps,
+    checked: context.checked,
+    disabled: context.disabled,
+    indeterminate: context.indeterminate,
+    pressed: context.pressed,
+  };
+  const classes = checkmark(checkmarkVariantProps);
 
   return (
-    <CheckmarkIconClassContext.Provider value={classes.icon}>
+    <CheckmarkControlContext.Provider
+      value={{ iconClassName: classes.icon, checkmarkVariantProps }}
+    >
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(classes.root, className)}
         {...nativeProps}
       >
         {children}
       </view>
-    </CheckmarkIconClassContext.Provider>
+    </CheckmarkControlContext.Provider>
   );
 });
 CheckboxControl.displayName = "CheckboxControl";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-type IconElementProps = {
-  className?: string;
-  style?: CSSProperties;
-  ref?: React.Ref<MainThread.Element>;
-};
-
-export interface CheckboxIndicatorProps {
+export interface CheckboxIndicatorProps
+  extends Pick<LynxStyledElementProps, "className" | "style"> {
   /** Icon rendered when neither checked nor indeterminate. Optional. */
-  unchecked?: ReactElement<IconElementProps>;
+  unchecked?: ReactElement<LynxIconElementProps>;
   /** Icon rendered when `checked=true` and `indeterminate=false`. */
-  checked: ReactElement<IconElementProps>;
+  checked: ReactElement<LynxIconElementProps>;
   /** Icon rendered when `indeterminate=true`. */
-  indeterminate?: ReactElement<IconElementProps>;
-  className?: string;
-  style?: CSSProperties;
+  indeterminate?: ReactElement<LynxIconElementProps>;
 }
 
 export function CheckboxIndicator(props: CheckboxIndicatorProps) {
@@ -202,62 +202,56 @@ export function CheckboxIndicator(props: CheckboxIndicatorProps) {
     className,
     style,
   } = props;
-  const { checked, indeterminate, disabled, pressed, tone, variant, size } =
-    useCheckboxContext("CheckboxIndicator");
-  const iconClassName = useCheckmarkIconClass("CheckboxIndicator");
-  const { ref: tintRef } = useIconColor([
-    checked,
-    indeterminate,
-    disabled,
-    pressed,
-    tone,
-    variant,
-    size,
-  ]);
+  const context = useCheckboxContext("CheckboxIndicator");
+  const { iconClassName, checkmarkVariantProps } = useCheckmarkControlContext("CheckboxIndicator");
 
-  if (process.env.NODE_ENV !== "production" && indeterminate && !indeterminateIcon) {
+  if (process.env.NODE_ENV !== "production" && context.indeterminate && !indeterminateIcon) {
     console.warn(
       "[seed-design] CheckboxIndicator: `indeterminate` prop must be provided when the checkbox is in an indeterminate state.",
     );
   }
 
-  const icon = indeterminate ? indeterminateIcon : checked ? checkedIcon : unchecked;
-  if (!icon || !isValidElement<IconElementProps>(icon)) return null;
-
-  // lynx-monochrome-icon 이 `<image style={{ width, height, ...style }}>` 로 자체 default size 를 박으므로
-  // recipe 토큰에서 꺼낸 사이즈를 inline 으로 주입해 덮는다.
-  const iconSize = resolveRecipeToken(checkmarkVars, [
-    `variant${capitalize(variant)}Size${capitalize(size)}`,
-    "enabled",
-    "icon",
-    "size",
-  ]);
-
-  return cloneElement(icon, {
-    className: clsx(iconClassName, icon.props.className, className),
-    style: iconSize
-      ? { width: iconSize, height: iconSize, ...icon.props.style, ...style }
-      : { ...icon.props.style, ...style },
-    ref: tintRef,
-  });
+  const icon = context.indeterminate
+    ? indeterminateIcon
+    : context.checked
+      ? checkedIcon
+      : unchecked;
+  if (!icon || !isValidElement<LynxIconElementProps>(icon)) return null;
+
+  return (
+    <InternalIcon
+      icon={icon}
+      className={clsx(iconClassName, className)}
+      style={style}
+      deps={[
+        context.checked,
+        context.indeterminate,
+        context.disabled,
+        context.pressed,
+        checkmarkVariantProps.tone,
+        checkmarkVariantProps.variant,
+        checkmarkVariantProps.size,
+      ]}
+    />
+  );
 }
 CheckboxIndicator.displayName = "CheckboxIndicator";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface CheckboxLabelProps {
-  children?: React.ReactNode;
-  className?: string;
-}
+export interface CheckboxLabelProps extends LynxStyledElementProps {}
 
 export const CheckboxLabel = React.forwardRef<unknown, CheckboxLabelProps>((props, ref) => {
   const { children, className, ...nativeProps } = props;
-  const { disabled, weight, size } = useCheckboxContext("CheckboxLabel");
-  const labelClassName = checkbox({ weight, size, disabled }).label;
+  const context = useCheckboxContext("CheckboxLabel");
+  const labelClassName = checkbox({
+    ...context.checkboxVariantProps,
+    disabled: context.disabled,
+  }).label;
 
   return (
     <text
-      {...(ref ? { ref: ref as React.Ref<SVGTextElement> } : {})}
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
       className={clsx(labelClassName, className)}
       {...nativeProps}
     >
@@ -269,10 +263,7 @@ CheckboxLabel.displayName = "CheckboxLabel";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface CheckboxGroupProps {
-  children?: React.ReactNode;
-  className?: string;
-}
+export interface CheckboxGroupProps extends LynxStyledElementProps {}
 
 export const CheckboxGroup = React.forwardRef<unknown, CheckboxGroupProps>((props, ref) => {
   const { children, className, ...nativeProps } = props;
@@ -280,8 +271,8 @@ export const CheckboxGroup = React.forwardRef<unknown, CheckboxGroupProps>((prop
 
   return (
     <view
-      {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
-      className={clsx(classes, className)}
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.root, className)}
       {...nativeProps}
     >
       {children}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,265 @@
+import { useMainThreadRef } from "@lynx-js/react";
+import type { CSSProperties, MainThread } from "@lynx-js/types";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import {
+  cloneElement,
+  isValidElement,
+  type DependencyList,
+  type ReactElement,
+} from "@lynx-js/react";
+
+import { useIconColor } from "../../hooks/useIconColor";
+import type { LynxIconElementProps, LynxStyledElementProps, LynxViewRef } from "../../types";
+import { handleColor, handleDimension, type StyleProps } from "../../utils/styled";
+
+export type IconSlotName = "icon" | "prefixIcon" | "suffixIcon";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+interface IconSlotContextValue {
+  classNames?: Partial<Record<IconSlotName, string>>;
+  deps?: DependencyList;
+}
+
+const IconSlotContext = React.createContext<IconSlotContextValue | null>(null);
+
+interface IconRequiredContextValue {
+  register: () => void;
+  unregister: () => void;
+}
+
+const IconRequiredContext = React.createContext<IconRequiredContextValue | null>(null);
+
+export function IconRequired({
+  children,
+  enabled,
+}: {
+  children: React.ReactNode;
+  enabled: boolean;
+}) {
+  const registeredCountRef = React.useRef(0);
+  const parentContext = React.useContext(IconRequiredContext);
+
+  const register = React.useCallback(() => {
+    registeredCountRef.current += 1;
+
+    if (process.env.NODE_ENV !== "production" && registeredCountRef.current > 1) {
+      throw new Error(
+        "Icon-only Component must render only one <Icon /> under children. Check if you are rendering multiple <Icon />.",
+      );
+    }
+  }, []);
+
+  const unregister = React.useCallback(() => {
+    registeredCountRef.current = Math.max(0, registeredCountRef.current - 1);
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (!enabled) return;
+
+    if (process.env.NODE_ENV !== "production") {
+      if (parentContext) {
+        throw new Error(
+          "Icon-only Component must not be nested within another Icon-Only. Check if you are using Icon-Only inside another Icon-Only.",
+        );
+      }
+      if (registeredCountRef.current === 0) {
+        throw new Error(
+          "Icon-only Component must render <Icon /> as a child. Check if you are using raw icon element instead of <Icon icon={} />.",
+        );
+      }
+    }
+  }, [enabled, parentContext]);
+
+  const value = React.useMemo<IconRequiredContextValue | null>(() => {
+    if (!enabled) return parentContext ?? null;
+    return { register, unregister };
+  }, [enabled, parentContext, register, unregister]);
+
+  return <IconRequiredContext.Provider value={value}>{children}</IconRequiredContext.Provider>;
+}
+
+export function IconSlotProvider({
+  value,
+  children,
+}: {
+  value: IconSlotContextValue;
+  children: React.ReactNode;
+}) {
+  return <IconSlotContext.Provider value={value}>{children}</IconSlotContext.Provider>;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+const iconSlotMarker = Symbol.for("@seed-design/lynx-react/icon-slot");
+
+interface IconSlotComponent {
+  [iconSlotMarker]?: IconSlotName;
+}
+
+export function getIconSlotName(node: React.ReactNode): IconSlotName | null {
+  if (!isValidElement(node)) return null;
+
+  return ((node.type as IconSlotComponent)[iconSlotMarker] ?? null) as IconSlotName | null;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface IconProps extends LynxStyledElementProps {
+  icon: ReactElement<LynxIconElementProps>;
+  size?: StyleProps["height"] | number;
+  color?: StyleProps["color"];
+}
+
+export interface PrefixIconProps extends IconProps {}
+
+export interface SuffixIconProps extends IconProps {}
+
+interface IconSlotBaseProps extends IconProps {
+  slot: IconSlotName | null;
+  baseClassName?: string;
+}
+
+function mergeWrapperStyle({
+  size,
+  color,
+  style,
+}: Pick<IconProps, "size" | "color" | "style">): CSSProperties | undefined {
+  const dimension = handleDimension(size);
+  const resolvedColor = handleColor(color);
+
+  if (dimension == null && resolvedColor == null) return style;
+
+  return {
+    ...(dimension != null ? { width: dimension, height: dimension } : {}),
+    ...(resolvedColor != null ? { color: resolvedColor } : {}),
+    ...style,
+  };
+}
+
+function getStyleColor(style: CSSProperties | undefined): CSSProperties["color"] {
+  return style?.color;
+}
+
+const IconSlotBase = React.forwardRef<unknown, IconSlotBaseProps>((props, ref) => {
+  const {
+    icon,
+    slot,
+    baseClassName,
+    className,
+    style,
+    size,
+    color,
+    children: _children,
+    ...nativeProps
+  } = props;
+  const context = React.useContext(IconSlotContext);
+  const iconRequiredContext = React.useContext(IconRequiredContext);
+  const sourceRef = useMainThreadRef<MainThread.Element>(null);
+  const slotClassName = slot != null ? context?.classNames?.[slot] : undefined;
+  const styleColor = getStyleColor(style);
+  const iconColor = useIconColor(
+    [baseClassName, slotClassName, className, size, color, styleColor, ...(context?.deps ?? [])],
+    { sourceRef },
+  );
+  const hasValidIcon = isValidElement<LynxIconElementProps>(icon);
+
+  React.useLayoutEffect(() => {
+    if (slot !== "icon" || !hasValidIcon) return;
+
+    iconRequiredContext?.register();
+    return () => {
+      iconRequiredContext?.unregister();
+    };
+  }, [hasValidIcon, iconRequiredContext, slot]);
+
+  if (!hasValidIcon) return null;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      main-thread:ref={sourceRef}
+      className={clsx(baseClassName, slotClassName, className)}
+      style={mergeWrapperStyle({ size, color, style })}
+    >
+      {cloneElement(icon, {
+        ...iconColor,
+        className: icon.props.className,
+        style: {
+          ...icon.props.style,
+          width: "100%",
+          height: "100%",
+        },
+      })}
+    </view>
+  );
+});
+IconSlotBase.displayName = "IconSlotBase";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+function createIconComponent<Props extends IconProps>(
+  displayName: string,
+  slot: IconSlotName,
+  baseClassName: string,
+) {
+  const Component = React.forwardRef<unknown, Props>((props, ref) => {
+    return <IconSlotBase ref={ref} slot={slot} baseClassName={baseClassName} {...props} />;
+  });
+
+  Component.displayName = displayName;
+  (Component as IconSlotComponent)[iconSlotMarker] = slot;
+
+  return Component;
+}
+
+export const Icon = createIconComponent<IconProps>("Icon", "icon", "seed-icon");
+export const PrefixIcon = createIconComponent<PrefixIconProps>(
+  "PrefixIcon",
+  "prefixIcon",
+  "seed-prefix-icon",
+);
+export const SuffixIcon = createIconComponent<SuffixIconProps>(
+  "SuffixIcon",
+  "suffixIcon",
+  "seed-suffix-icon",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface InternalIconProps extends LynxStyledElementProps {
+  icon: ReactElement<LynxIconElementProps>;
+  deps?: DependencyList;
+}
+
+export const InternalIcon = React.forwardRef<unknown, InternalIconProps>((props, ref) => {
+  const { icon, deps = [], className, style, children: _children, ...nativeProps } = props;
+  const sourceRef = useMainThreadRef<MainThread.Element>(null);
+  const styleColor = getStyleColor(style);
+  const iconColor = useIconColor([className, styleColor, ...(deps ?? [])], { sourceRef });
+
+  if (!isValidElement<LynxIconElementProps>(icon)) return null;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      main-thread:ref={sourceRef}
+      className={className}
+      style={style}
+    >
+      {cloneElement(icon, {
+        ...iconColor,
+        className: icon.props.className,
+        style: {
+          ...icon.props.style,
+          width: "100%",
+          height: "100%",
+        },
+      })}
+    </view>
+  );
+});
+InternalIcon.displayName = "InternalIcon";

package/src/components/Icon/index.ts

@@ -0,0 +1,8 @@
+export {
+  Icon,
+  PrefixIcon,
+  SuffixIcon,
+  type IconProps,
+  type PrefixIconProps,
+  type SuffixIconProps,
+} from "./Icon";