@tipp/ui 1.1.23 → 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/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.ReactElement => {
-    const { size, style, ...restProps } = props;
+    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/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/icon.ts

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

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,
+};

package/src/molecules/tag-selector.tsx

@@ -0,0 +1,314 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ChevronRightIcon,
+  Cross1Icon,
+  MagnifyingGlassIcon,
+} from '@radix-ui/react-icons';
+import { Popover } from '../atoms/popover';
+import { Flex } from '../atoms/flex';
+import { Button } from '../atoms/button';
+import { Badge } from '../atoms/badge';
+import { CheckIcon } from '../icon';
+import { ScrollArea } from '../atoms/scroll-area';
+import { Grid } from '../atoms/grid';
+import { AutoSizingInput } from '../atoms';
+
+type ID = string;
+interface Item {
+  name: string;
+  id: ID;
+}
+
+const OPTION_HEIGHT = 32;
+
+export interface TagSelectorProps<T extends Item> {
+  options?: T[];
+  selected?: ID[];
+  placeholder?: string;
+  disabled?: boolean;
+  maxCount?: number;
+  style?: React.CSSProperties;
+
+  onChange?: (selected: ID[]) => void;
+  tagRender?: (item: T) => React.ReactElement;
+  DropdownContainer?: DropdownContainer<T>;
+}
+type DropdownContainer<T> = (props: {
+  items: T[];
+  children: React.ReactElement;
+  currentItem?: T;
+}) => React.ReactElement;
+
+const DefaultDropdownContainer = (props: {
+  children: React.ReactElement;
+}): React.ReactElement => {
+  return props.children;
+};
+
+export function TagSelector<T extends Item>(
+  props: TagSelectorProps<T>
+): React.ReactElement {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    maxCount = 0,
+    DropdownContainer = DefaultDropdownContainer,
+  } = props;
+  const [selected, setSelected] = useState<string[]>(props.selected || []);
+  const [value, setValue] = useState<string>('');
+  const [focusIndex, setFocusIndex] = useState<number | null>(null);
+  const [open, setOpen] = useState(false);
+  const [focus, setFocus] = useState(false);
+
+  const fieldRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const closeRef = useRef<number>(0);
+
+  const onFocus = useCallback(() => {
+    clearTimeout(closeRef.current);
+    setFocus(true);
+    setOpen(true);
+  }, []);
+
+  const onBlur = useCallback(() => {
+    closeRef.current = setTimeout(() => {
+      setFocus(false);
+      setOpen(false);
+      setTimeout(() => {
+        setValue('');
+      }, 100);
+    }, 100);
+  }, []);
+
+  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+
+  const filteredOptions = useMemo<T[]>(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+
+  const selectedItem = useMemo<T[]>(() => {
+    const result = [] as T[];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem) result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+
+  const onDelete = useCallback((id: string) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+
+  const onSelect = useCallback(
+    (id: string) => {
+      if (maxCount && selected.length + 1 > maxCount) return;
+      setSelected((prev) => [...prev, id]);
+    },
+    [maxCount, selected]
+  );
+
+  const toggleItem = useCallback(
+    (id: string) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+
+  const setScroll = useCallback((index: number): void => {
+    if (scrollRef.current) {
+      const scrollTop = scrollRef.current.scrollTop;
+      const clientHeight = scrollRef.current.clientHeight;
+      const focusTop = index * OPTION_HEIGHT;
+      if (focusTop < scrollTop) {
+        scrollRef.current.scrollTop = focusTop;
+      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
+        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
+      }
+    }
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const key = e.key;
+
+      switch (key) {
+        case 'ArrowDown': {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === 'number') {
+            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+
+        case 'ArrowUp': {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === 'number') {
+            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+
+        case 'Enter':
+          setValue('');
+          if (focusIndex !== null) {
+            toggleItem(filteredOptions[focusIndex]?.id);
+          }
+          break;
+
+        case 'Backspace':
+          if (value.length === 0) {
+            setSelected((prev) => prev.slice(0, -1));
+          }
+          break;
+
+        case 'Escape':
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      focusIndex,
+      value.length,
+      setScroll,
+      options.length,
+      toggleItem,
+      filteredOptions,
+    ]
+  );
+
+  useEffect(() => {
+    setFocusIndex(null);
+  }, [open]);
+
+  useEffect(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+
+  return (
+    <Popover.Root open={Boolean(filteredOptions.length) && open}>
+      <Popover.Trigger>
+        <Grid
+          align="center"
+          className={`tag-selector ${focus ? 'focused' : ''}`}
+          columns="1fr auto"
+          gap="1"
+          onClick={() => fieldRef.current?.focus()}
+        >
+          <Flex
+            align="center"
+            gap="1"
+            maxWidth="100%"
+            overflow="hidden"
+            wrap="wrap"
+          >
+            {selectedItem.map((item) => {
+              return tagRender ? (
+                tagRender(item)
+              ) : (
+                <Badge key={item.id}>
+                  {item.name}
+                  <Button
+                    onClick={() => {
+                      onDelete(item.id);
+                    }}
+                    variant="transparent"
+                  >
+                    <Cross1Icon />
+                  </Button>
+                </Badge>
+              );
+            })}
+            <AutoSizingInput
+              onBlur={onBlur}
+              onChange={onChangeValue}
+              onFocus={onFocus}
+              onKeyDown={handleKeyDown}
+              placeholder={placeholder}
+              ref={fieldRef}
+              value={value}
+            />
+          </Flex>
+          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}
+        </Grid>
+      </Popover.Trigger>
+
+      <Popover.Content
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DropdownContainer
+          currentItem={filteredOptions[focusIndex || 0]}
+          items={filteredOptions}
+        >
+          <ScrollArea
+            ref={scrollRef}
+            scrollbars="vertical"
+            style={{ height: OPTION_HEIGHT * 8 }}
+            type="auto"
+          >
+            <Flex direction="column">
+              {filteredOptions.map((item, i) => {
+                const isSelected = Boolean(
+                  selected.find((el) => el === item.id)
+                );
+                const isFocus = i === focusIndex;
+
+                return (
+                  <Button
+                    key={item.id}
+                    onClick={() => {
+                      toggleItem(item.id);
+                      fieldRef.current?.focus();
+                    }}
+                    onMouseEnter={() => {
+                      setFocusIndex(i);
+                    }}
+                    style={{
+                      width: '100%',
+                      background: isFocus ? 'var(--accent-a3)' : undefined,
+                      color: 'var(--gray-12)',
+                      fontWeight: 400,
+                      boxShadow: 'none',
+                    }}
+                    variant={isSelected ? 'soft' : 'outline'}
+                  >
+                    <Flex justify="between" width="100%">
+                      {item.name}
+                      {isSelected ? <CheckIcon /> : null}
+                    </Flex>
+                  </Button>
+                );
+              })}
+            </Flex>
+          </ScrollArea>
+        </DropdownContainer>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}