@tipp/ui 1.1.22 → 1.2.0

package/src/atoms/auto-sizing-input.tsx

@@ -0,0 +1,65 @@
+import type { DetailedHTMLProps } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export interface AutoSizingInputProps
+  extends DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  value?: string;
+  onChangeValue?: (value: string) => void;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+export const AutoSizingInput = forwardRef<
+  HTMLInputElement,
+  AutoSizingInputProps
+>(
+  (
+    { value: _value, onChangeValue, onChange, ...rest },
+    ref
+  ): React.ReactNode => {
+    const [value, setValue] = useState(_value);
+    const [width, setWidth] = useState(0);
+    const span = useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+      span.current && setWidth(span.current.offsetWidth);
+    }, [value]);
+
+    const changeHandler = useCallback<
+      React.ChangeEventHandler<HTMLInputElement>
+    >(
+      (evt) => {
+        onChange?.(evt);
+        setValue(evt.target.value);
+      },
+      [onChange]
+    );
+
+    useEffect(() => {
+      setValue(_value || '');
+    }, [_value]);
+
+    useEffect(() => {
+      onChangeValue?.(value || '');
+    }, [value, onChangeValue]);
+
+    return (
+      <div className="auto-sizing-input wrapper" style={{ width: width + 24 }}>
+        <input onChange={changeHandler} ref={ref} value={value} {...rest} />
+        <span aria-hidden="true" ref={span}>
+          {value}
+        </span>
+      </div>
+    );
+  }
+);
+
+AutoSizingInput.displayName = 'AutoSizingInput';

package/src/atoms/avatar.tsx

@@ -9,7 +9,7 @@ export type AvatarProps = Omit<RadixAvatarProps, 'size'> & {
 };
 
 export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
-  (props: AvatarProps, ref): React.ReactNode => {
+  (props: AvatarProps, ref): React.ReactElement => {
     const { children, size, variant = 'soft', ...rest } = props;
     const radixSize = useMemo<RadixAvatarProps['size']>(() => {
       switch (size) {

package/src/atoms/badge.tsx

@@ -10,7 +10,7 @@ export type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {
 };
 
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  (props: BadgeProps, ref): React.ReactNode => {
+  (props: BadgeProps, ref): React.ReactElement => {
     const { size = 'small', color = 'accent', ...rest } = props;
 
     const radixSize = useMemo(() => {

package/src/atoms/button.tsx

@@ -4,13 +4,14 @@ import {
 } from '@radix-ui/themes';
 import React, { forwardRef, useMemo } from 'react';
 
-export type ButtonProps = Omit<RadixButtonProps, 'size'> & {
+export type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {
   size?: 'small' | 'medium' | 'large' | 'largest';
+  variant?: RadixButtonProps['variant'] | 'transparent';
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref): React.ReactNode => {
-    const { size, style, ...restProps } = props;
+  (props, ref): React.ReactElement => {
+    const { size, style, variant, ...restProps } = props;
 
     const radixSize = useMemo(() => {
       switch (size) {
@@ -27,18 +28,29 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     }, [size]);
 
     const mergedStyle = useMemo<ButtonProps['style']>(() => {
-      if (size !== 'largest') return style;
-      return {
-        borderRadius: 'var(--radius-4)',
-        padding: 'var(--space-5)',
-        fontSize: 'var(--font-size-4)',
-        ...style,
+      const baseStyle = {
+        background: variant === 'transparent' ? 'transparent' : undefined,
       };
-    }, [size, style]);
+      if (size === 'largest')
+        return {
+          ...baseStyle,
+          borderRadius: 'var(--radius-4)',
+          padding: 'var(--space-5)',
+          fontSize: 'var(--font-size-4)',
+          ...style,
+        };
+      return { ...baseStyle, ...style };
+    }, [size, style, variant]);
+
+    const radixVariant = useMemo(() => {
+      if (variant === 'transparent') return 'ghost';
+      return variant;
+    }, [variant]);
 
     return (
       <RadixButton
         style={mergedStyle}
+        variant={radixVariant}
         {...restProps}
         ref={ref}
         size={radixSize}

package/src/atoms/check-box.tsx

@@ -9,7 +9,7 @@ export type CheckboxProps = Omit<RadixCheckboxProps, 'size'> & {
 };
 
 export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
-  (props, ref): React.ReactNode => {
+  (props, ref): React.ReactElement => {
     const { size = 'medium', ...rest } = props;
 
     const radixSize = useMemo<RadixCheckboxProps['size']>(() => {

package/src/atoms/index.ts

@@ -50,7 +50,6 @@ export * from './pagination';
 export * from './field-error-wrapper';
 export * from './ellipsis-tooltip';
 export * from './drawer';
-
 export * from './toast';
-
 export * from './form';
+export * from './auto-sizing-input';

package/src/atoms/link.tsx

@@ -10,7 +10,7 @@ export type LinkProps = RadixLinkProps & {
   variant?: 'caption' | 'body' | 'subtitle';
 };
 
-export function Link(props: LinkProps): React.ReactNode {
+export function Link(props: LinkProps): React.ReactElement {
   const { size, children, variant, ...rest } = props;
   const radixSize = useMemo<RadixLinkProps['size']>(() => {
     switch (variant) {

package/src/atoms/typo.tsx

@@ -7,7 +7,7 @@ export type TypoProps = RadixTextProps & {
 };
 
 export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
-  (props: TypoProps, ref): React.ReactNode => {
+  (props: TypoProps, ref): React.ReactElement => {
     const { size, variant, children, ...rest } = props;
 
     const radixSize = useMemo<RadixTextProps['size']>(() => {

package/src/icon.ts

@@ -28,4 +28,6 @@ export {
   GlobeIcon,
   BackpackIcon,
   CalendarIcon,
+  CheckIcon,
+  ArchiveIcon,
 } from '@radix-ui/react-icons';

package/src/molecules/date-picker/index.tsx

@@ -24,13 +24,13 @@ const ReactDatePicker = ((RDP.default as any).default ||
   (RDP as any)) as typeof RDP.default;
 
 export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
-  (props, ref): React.ReactNode => {
+  (props, ref): React.ReactElement => {
     const { size = 'medium', ...rest } = props;
     return (
       <ReactDatePicker
-        dateFormat="yyyy/MM/dd"
+        dateFormat="YYYY/MM/dd"
         nextMonthButtonLabel="다음 달"
-        placeholderText="yyyy/mm/dd"
+        placeholderText="YYYY/mm/dd"
         previousMonthButtonLabel="이전 달"
         ref={ref}
         renderCustomHeader={renderCustomHeader}

package/src/molecules/index.ts

@@ -2,3 +2,7 @@ export * from './expand-table';
 export * from './navigation';
 export * from './date-picker';
 export * from './dot-navigation';
+
+export * from './stepper';
+
+export * from './tag-selector';

package/src/molecules/stepper.tsx

@@ -0,0 +1,204 @@
+import React, { createContext, Children, useContext, useMemo } from 'react';
+import { Separator } from '@radix-ui/themes';
+import { Flex } from '../atoms/flex';
+import { Avatar } from '../atoms/avatar';
+import { CheckIcon } from '../icon';
+import { Typo } from '../atoms/typo';
+
+interface StepState extends Pick<StepperProps, 'direction'> {
+  active: boolean;
+  completed: boolean;
+  index: number;
+}
+
+const StepContext = createContext<StepState>({
+  active: false,
+  completed: false,
+  index: 0,
+});
+
+interface StepperProps {
+  // 활성화된 스텝 인덱스. 0부터 시작
+  activeStep?: number;
+  children: React.ReactElement | React.ReactElement[];
+  width: string;
+  maxWidth: string;
+  minWidth: string;
+  /** icon과 children의 배치 방향. 기본 값 vertical */
+  direction?: 'horizontal' | 'vertical';
+}
+
+function Root(props: StepperProps): React.ReactElement {
+  const {
+    activeStep = 0,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    direction = 'vertical',
+  } = props;
+
+  return (
+    <Flex
+      gap="3"
+      style={{
+        width,
+        minWidth,
+        maxWidth,
+      }}
+    >
+      {Children.map(children, (child, index) => {
+        return (
+          <StepContext.Provider
+            value={{
+              active: index === activeStep,
+              completed: index < activeStep,
+              index,
+              direction,
+            }}
+          >
+            {child}
+          </StepContext.Provider>
+        );
+      })}
+    </Flex>
+  );
+}
+
+interface StepProps {
+  children?: React.ReactNode;
+  /** 아이콘 커스텀 필요시 사용 */
+  Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;
+}
+
+function Step(props: StepProps): React.ReactNode {
+  const { Icon, children } = props;
+  const {
+    active,
+    completed,
+    index,
+    direction = 'vertical',
+  } = useContext(StepContext);
+
+  const connector =
+    index > 0 ? (
+      <Separator
+        style={{
+          width: `calc(100% - 40px)`,
+          position: 'absolute',
+          top: 16,
+          right: `calc(50% + 26px)`,
+        }}
+      />
+    ) : null;
+
+  const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {
+    if (active) {
+      return ActiveStep;
+    }
+    if (completed) {
+      return CompleteStep;
+    }
+    return IncompleteStep;
+  }, [completed, active]);
+
+  return (
+    <Flex
+      align="center"
+      direction={direction === 'horizontal' ? 'row' : 'column'}
+      gap="4"
+      position="relative"
+      style={{ flex: 1 }}
+    >
+      {connector}
+      <InnerStep Icon={Icon}>{children}</InnerStep>
+    </Flex>
+  );
+}
+
+function CompleteStep(props: StepProps): React.ReactElement {
+  const { Icon, children } = props;
+  const { completed, active } = useContext(StepContext);
+  const background = 'var(--accent-a4)';
+  const border = '1px solid var(--accent-7)';
+  const color = 'var(--accent-contrast)';
+
+  return (
+    <>
+      {Icon ? (
+        <Icon active={active} completed={completed} />
+      ) : (
+        <Avatar
+          fallback={<CheckIcon fill={color} height={16} width={16} />}
+          radius="full"
+          size="medium"
+          style={{
+            border,
+            background,
+          }}
+        />
+      )}
+      <Typo align="center">{children}</Typo>
+    </>
+  );
+}
+
+function IncompleteStep(props: StepProps): React.ReactElement {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = 'var(--gray-5)';
+  const color = 'var(--gray-a11)';
+  return (
+    <>
+      {Icon ? (
+        <Icon active={active} completed={completed} />
+      ) : (
+        <Avatar
+          fallback={<Typo style={{ color }}>{index + 1}</Typo>}
+          radius="full"
+          size="medium"
+          style={{
+            background,
+          }}
+        />
+      )}
+      <Typo align="center" style={{ color }}>
+        {children}
+      </Typo>
+    </>
+  );
+}
+
+function ActiveStep(props: StepProps): React.ReactElement {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = 'var(--accent-10)';
+  const color = 'var(--accent-contrast)';
+
+  return (
+    <>
+      {Icon ? (
+        <Icon active={active} completed={completed} />
+      ) : (
+        <Avatar
+          fallback={
+            <Typo style={{ color }} weight="bold">
+              {index + 1}
+            </Typo>
+          }
+          radius="full"
+          size="medium"
+          style={{ background }}
+        />
+      )}
+      <Typo align="center" weight="bold">
+        {children}
+      </Typo>
+    </>
+  );
+}
+
+export const Stepper = {
+  Root,
+  Step,
+};