@tipp/ui 1.0.14 → 1.0.16

package/src/atoms/button.tsx

@@ -1,32 +1,32 @@
-import {
-  Button as RadixButton,
-  type ButtonProps as RadixButtonProps,
-} from '@radix-ui/themes';
-import React, { forwardRef, useMemo } from 'react';
-
-export type ButtonProps = Omit<RadixButtonProps, 'size'> & {
-  size?: 'small' | 'medium' | 'large';
-};
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref): React.ReactNode => {
-    const { size, ...restProps } = props;
-
-    const radixSize = useMemo(() => {
-      switch (size) {
-        case 'small':
-          return '1';
-        case 'medium':
-          return '2';
-        case 'large':
-          return '3';
-        default:
-          return '2';
-      }
-    }, [size]);
-
-    return <RadixButton {...restProps} ref={ref} size={radixSize} />;
-  }
-);
-
-Button.displayName = 'Button';
+import {
+  Button as RadixButton,
+  type ButtonProps as RadixButtonProps,
+} from '@radix-ui/themes';
+import React, { forwardRef, useMemo } from 'react';
+
+export type ButtonProps = Omit<RadixButtonProps, 'size'> & {
+  size?: 'small' | 'medium' | 'large';
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref): React.ReactNode => {
+    const { size, ...restProps } = props;
+
+    const radixSize = useMemo(() => {
+      switch (size) {
+        case 'small':
+          return '1';
+        case 'medium':
+          return '2';
+        case 'large':
+          return '3';
+        default:
+          return '2';
+      }
+    }, [size]);
+
+    return <RadixButton {...restProps} ref={ref} size={radixSize} />;
+  }
+);
+
+Button.displayName = 'Button';

package/src/atoms/call-out.tsx

@@ -1 +1 @@
-export { Callout } from '@radix-ui/themes';
+export { Callout } from '@radix-ui/themes';

package/src/atoms/card.tsx

@@ -1 +1 @@
-export { Card, type CardProps } from '@radix-ui/themes';
+export { Card, type CardProps } from '@radix-ui/themes';

package/src/atoms/check-box-card.tsx

@@ -1 +1 @@
-export { CheckboxCards } from '@radix-ui/themes';
+export { CheckboxCards } from '@radix-ui/themes';

package/src/atoms/check-box-group.tsx

@@ -1,38 +1,38 @@
-import { CheckboxGroup as RadixCheckboxGroup } from '@radix-ui/themes';
-import React, { forwardRef, useMemo } from 'react';
-
-type RadixCheckboxGroupProps = React.ComponentPropsWithoutRef<
-  typeof RadixCheckboxGroup.Root
->;
-type CheckboxGroupProps = Omit<RadixCheckboxGroupProps, 'size'> & {
-  size: 'small' | 'medium' | 'large';
-};
-
-const Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
-  const { children, size, ...rest } = props;
-
-  const groupSize = useMemo<RadixCheckboxGroupProps['size']>(() => {
-    switch (size) {
-      case 'small':
-        return '1';
-      case 'large':
-        return '3';
-      case 'medium':
-      default:
-        return '2';
-    }
-  }, [size]);
-
-  return (
-    <RadixCheckboxGroup.Root {...rest} ref={ref} size={groupSize}>
-      {children}
-    </RadixCheckboxGroup.Root>
-  );
-});
-
-Root.displayName = 'CheckboxGroup.Root';
-
-export const CheckboxGroup = {
-  Root,
-  Item: RadixCheckboxGroup.Item,
-};
+import { CheckboxGroup as RadixCheckboxGroup } from '@radix-ui/themes';
+import React, { forwardRef, useMemo } from 'react';
+
+type RadixCheckboxGroupProps = React.ComponentPropsWithoutRef<
+  typeof RadixCheckboxGroup.Root
+>;
+type CheckboxGroupProps = Omit<RadixCheckboxGroupProps, 'size'> & {
+  size: 'small' | 'medium' | 'large';
+};
+
+const Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
+  const { children, size, ...rest } = props;
+
+  const groupSize = useMemo<RadixCheckboxGroupProps['size']>(() => {
+    switch (size) {
+      case 'small':
+        return '1';
+      case 'large':
+        return '3';
+      case 'medium':
+      default:
+        return '2';
+    }
+  }, [size]);
+
+  return (
+    <RadixCheckboxGroup.Root {...rest} ref={ref} size={groupSize}>
+      {children}
+    </RadixCheckboxGroup.Root>
+  );
+});
+
+Root.displayName = 'CheckboxGroup.Root';
+
+export const CheckboxGroup = {
+  Root,
+  Item: RadixCheckboxGroup.Item,
+};

package/src/atoms/check-box.tsx

@@ -1,30 +1,30 @@
-import {
-  Checkbox as RadixCheckbox,
-  type CheckboxProps as RadixCheckboxProps,
-} from '@radix-ui/themes';
-import { useMemo, forwardRef } from 'react';
-
-export type CheckboxProps = Omit<RadixCheckboxProps, 'size'> & {
-  size?: 'small' | 'medium' | 'large';
-};
-
-export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
-  (props, ref): React.ReactNode => {
-    const { size = 'medium', ...rest } = props;
-
-    const radixSize = useMemo<RadixCheckboxProps['size']>(() => {
-      switch (size) {
-        case 'small':
-          return '1';
-        case 'medium':
-          return '2';
-        case 'large':
-          return '3';
-      }
-    }, [size]);
-
-    return <RadixCheckbox {...rest} ref={ref} size={radixSize} />;
-  }
-);
-
-Checkbox.displayName = 'Checkbox';
+import {
+  Checkbox as RadixCheckbox,
+  type CheckboxProps as RadixCheckboxProps,
+} from '@radix-ui/themes';
+import { useMemo, forwardRef } from 'react';
+
+export type CheckboxProps = Omit<RadixCheckboxProps, 'size'> & {
+  size?: 'small' | 'medium' | 'large';
+};
+
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  (props, ref): React.ReactNode => {
+    const { size = 'medium', ...rest } = props;
+
+    const radixSize = useMemo<RadixCheckboxProps['size']>(() => {
+      switch (size) {
+        case 'small':
+          return '1';
+        case 'medium':
+          return '2';
+        case 'large':
+          return '3';
+      }
+    }, [size]);
+
+    return <RadixCheckbox {...rest} ref={ref} size={radixSize} />;
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/atoms/code.tsx

@@ -1 +1 @@
-export { Code, type CodeProps } from '@radix-ui/themes';
+export { Code, type CodeProps } from '@radix-ui/themes';

package/src/atoms/collapse.tsx

@@ -1,32 +1,32 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-export interface CollapseProps {
-  children: React.ReactNode;
-  open?: boolean;
-  defaultOpen?: boolean;
-}
-
-export function Collapse(props: CollapseProps): React.ReactNode {
-  const { children } = props;
-  const [open, setOpen] = useState(() => {
-    return props.open || props.defaultOpen || false;
-  });
-
-  useEffect(() => {
-    if (props.open === undefined) return;
-    setOpen(props.open);
-  }, [props.open]);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!ref.current) return;
-    ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : '0';
-  }, [open]);
-
-  return (
-    <div className="collapse" ref={ref}>
-      {children}
-    </div>
-  );
-}
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface CollapseProps {
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+}
+
+export function Collapse(props: CollapseProps): React.ReactNode {
+  const { children } = props;
+  const [open, setOpen] = useState(() => {
+    return props.open || props.defaultOpen || false;
+  });
+
+  useEffect(() => {
+    if (props.open === undefined) return;
+    setOpen(props.open);
+  }, [props.open]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : '0';
+  }, [open]);
+
+  return (
+    <div className="collapse" ref={ref}>
+      {children}
+    </div>
+  );
+}

package/src/atoms/container.tsx

@@ -1 +1 @@
-export { Container, type ContainerProps } from '@radix-ui/themes';
+export { Container, type ContainerProps } from '@radix-ui/themes';

package/src/atoms/data-list.tsx

@@ -1 +1 @@
-export { DataList } from '@radix-ui/themes';
+export { DataList } from '@radix-ui/themes';

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

@@ -1,25 +1,78 @@
-import type { ElementRef } from 'react';
-import React, { forwardRef } from 'react';
-import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
-import ReactDatePicker from 'react-datepicker';
-
-type DatePickerProps = ReactDatePickerProps;
-type DatePickerRef = ElementRef<typeof ReactDatePicker>;
-
-const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
-  (props: DatePickerProps, ref): React.ReactNode => {
-    return (
-      <ReactDatePicker
-        {...props}
-        // calendarClassName="tipp_datepicker__calendar"
-        open
-        ref={ref}
-        wrapperClassName="tipp_datePicker"
-      />
-    );
-  }
-);
-
-DatePicker.displayName = 'DatePicker';
-
-export { DatePicker, type DatePickerProps };
+import type { ElementRef } from 'react';
+import React, { forwardRef } from 'react';
+import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
+import ReactDatePicker from 'react-datepicker';
+import { IconButton } from '../icon-button';
+import { Flex } from '../flex';
+import { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
+import { Heading } from '../heading';
+
+export type DatePickerProps = ReactDatePickerProps & {
+  size?: 'small' | 'medium' | 'large';
+};
+type DatePickerRef = ElementRef<typeof ReactDatePicker>;
+
+export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
+  (props, ref): React.ReactNode => {
+    const { size = 'medium', ...rest } = props;
+
+    return (
+      <ReactDatePicker
+        placeholderText="yyyy/mm/dd"
+        ref={ref}
+        showPopperArrow={false}
+        {...rest}
+        calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}
+        dateFormat="yyyy/MM/dd"
+        nextMonthButtonLabel="다음 달"
+        previousMonthButtonLabel="이전 달"
+        renderCustomHeader={renderCustomHeader}
+        wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}
+      />
+    );
+  }
+);
+const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (
+  props
+) => {
+  const {
+    date,
+    decreaseMonth,
+    increaseMonth,
+    prevMonthButtonDisabled,
+    nextMonthButtonDisabled,
+  } = props;
+
+  const year = date.getFullYear();
+  const month = date.getMonth();
+
+  return (
+    <Flex align="center" justify="between" pb="2" pl="2" pr="2">
+      <IconButton
+        disabled={prevMonthButtonDisabled}
+        onClick={decreaseMonth}
+        variant="ghost"
+      >
+        <ChevronLeftIcon />
+      </IconButton>
+      <Flex gap="3">
+        <Heading variant="subtitle1" weight="regular">
+          {year}년
+        </Heading>
+        <Heading variant="subtitle1" weight="regular">
+          {month + 1}월
+        </Heading>
+      </Flex>
+
+      <IconButton
+        disabled={nextMonthButtonDisabled}
+        onClick={increaseMonth}
+        variant="ghost"
+      >
+        <ChevronRightIcon />
+      </IconButton>
+    </Flex>
+  );
+};
+
+DatePicker.displayName = 'DatePicker';

package/src/atoms/dialog.tsx

@@ -1 +1 @@
-export { Dialog } from '@radix-ui/themes';
+export { Dialog } from '@radix-ui/themes';

package/src/atoms/drawer.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { ThemeProvider } from '../theme/theme-provider';
-
-export function Root(props: Dialog.DialogProps): React.ReactNode {
-  return <Dialog.Root {...props} />;
-}
-
-type ContentProps = Dialog.DialogContentProps & {
-  /** Drawer가 붙는 위치, 기본값 right */
-  position?: 'left' | 'right' | 'bottom' | 'top';
-};
-
-export function Content(props: ContentProps): React.ReactNode {
-  const { position = 'right', className, ...rest } = props;
-  return (
-    <Dialog.Portal>
-      <ThemeProvider>
-        <Dialog.Overlay className="DrawerOverlay" />
-        <Dialog.Content
-          className={`DrawerContent ${position} ${className || ''}`}
-          {...rest}
-        />
-      </ThemeProvider>
-    </Dialog.Portal>
-  );
-}
-
-export function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {
-  return <Dialog.Trigger asChild {...props} />;
-}
-
-export const Drawer = {
-  Root: Dialog.Root,
-  Trigger,
-  Content,
-  Close: Dialog.Close,
-  Title: Dialog.Title,
-  Description: Dialog.Description,
-};
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { ThemeProvider } from '../theme/theme-provider';
+
+export function Root(props: Dialog.DialogProps): React.ReactNode {
+  return <Dialog.Root {...props} />;
+}
+
+type ContentProps = Dialog.DialogContentProps & {
+  /** Drawer가 붙는 위치, 기본값 right */
+  position?: 'left' | 'right' | 'bottom' | 'top';
+};
+
+export function Content(props: ContentProps): React.ReactNode {
+  const { position = 'right', className, ...rest } = props;
+  return (
+    <Dialog.Portal>
+      <ThemeProvider>
+        <Dialog.Overlay className="DrawerOverlay" />
+        <Dialog.Content
+          className={`DrawerContent ${position} ${className || ''}`}
+          {...rest}
+        />
+      </ThemeProvider>
+    </Dialog.Portal>
+  );
+}
+
+export function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {
+  return <Dialog.Trigger asChild {...props} />;
+}
+
+export const Drawer = {
+  Root: Dialog.Root,
+  Trigger,
+  Content,
+  Close: Dialog.Close,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+};

package/src/atoms/dropdown-menu.tsx

@@ -1 +1 @@
-export { DropdownMenu } from '@radix-ui/themes';
+export { DropdownMenu } from '@radix-ui/themes';

package/src/atoms/ellipsis-tooltip.tsx

@@ -1,57 +1,57 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Tooltip } from './tooltip';
-import { Typo, type TypoProps } from './typo';
-
-export type EllipsisTooltipProps = TypoProps & {
-  lineClamp?: number;
-  children?: string;
-};
-
-export function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {
-  const { children, style, lineClamp = 2, ...rest } = props;
-  const ref = useRef<HTMLSpanElement>(null);
-
-  const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(
-    'none'
-  );
-
-  useEffect(() => {
-    if (ref.current) {
-      const typo = ref.current;
-      const mouseOver = (): void => {
-        if (typo.clientHeight < typo.scrollHeight) {
-          setTooltipDisplay('block');
-        }
-      };
-
-      const mouseOut = (): void => {
-        setTooltipDisplay('none');
-      };
-
-      ref.current.addEventListener('mouseenter', mouseOver);
-      ref.current.addEventListener('mouseleave', mouseOut);
-    }
-  }, [children]);
-
-  return (
-    <Tooltip content={children} style={{ display: tooltipDisplay }}>
-      <Typo
-        {...rest}
-        ref={ref}
-        style={{
-          width: '100%',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          WebkitLineClamp: lineClamp,
-
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
-          wordBreak: 'break-word',
-          ...style,
-        }}
-      >
-        {children}
-      </Typo>
-    </Tooltip>
-  );
-}
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip } from './tooltip';
+import { Typo, type TypoProps } from './typo';
+
+export type EllipsisTooltipProps = TypoProps & {
+  lineClamp?: number;
+  children?: string;
+};
+
+export function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {
+  const { children, style, lineClamp = 2, ...rest } = props;
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(
+    'none'
+  );
+
+  useEffect(() => {
+    if (ref.current) {
+      const typo = ref.current;
+      const mouseOver = (): void => {
+        if (typo.clientHeight < typo.scrollHeight) {
+          setTooltipDisplay('block');
+        }
+      };
+
+      const mouseOut = (): void => {
+        setTooltipDisplay('none');
+      };
+
+      ref.current.addEventListener('mouseenter', mouseOver);
+      ref.current.addEventListener('mouseleave', mouseOut);
+    }
+  }, [children]);
+
+  return (
+    <Tooltip content={children} style={{ display: tooltipDisplay }}>
+      <Typo
+        {...rest}
+        ref={ref}
+        style={{
+          width: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          WebkitLineClamp: lineClamp,
+
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          wordBreak: 'break-word',
+          ...style,
+        }}
+      >
+        {children}
+      </Typo>
+    </Tooltip>
+  );
+}

package/src/atoms/em.tsx

@@ -1 +1 @@
-export { Em, type EmProps } from '@radix-ui/themes';
+export { Em, type EmProps } from '@radix-ui/themes';

package/src/atoms/field-error-wrapper.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Flex } from './flex';
-import { Typo } from './typo';
-
-export interface FieldErrorWrapperProps {
-  children?: React.ReactNode;
-  error?: React.ReactNode;
-}
-
-export function FieldErrorWrapper({
-  children,
-  error,
-}: FieldErrorWrapperProps): JSX.Element {
-  return (
-    <Flex direction="column" gap="1">
-      {children}
-      {error ? (
-        <Typo color="red" variant="caption">
-          {error}
-        </Typo>
-      ) : null}
-    </Flex>
-  );
-}
+import React from 'react';
+import { Flex } from './flex';
+import { Typo } from './typo';
+
+export interface FieldErrorWrapperProps {
+  children?: React.ReactNode;
+  error?: React.ReactNode;
+}
+
+export function FieldErrorWrapper({
+  children,
+  error,
+}: FieldErrorWrapperProps): JSX.Element {
+  return (
+    <Flex direction="column" gap="1">
+      {children}
+      {error ? (
+        <Typo color="red" variant="caption">
+          {error}
+        </Typo>
+      ) : null}
+    </Flex>
+  );
+}

package/src/atoms/flex.tsx

@@ -1 +1 @@
-export { Flex, type FlexProps } from '@radix-ui/themes';
+export { Flex, type FlexProps } from '@radix-ui/themes';

package/src/atoms/grid.tsx

@@ -1 +1 @@
-export { Grid, type GridProps } from '@radix-ui/themes';
+export { Grid, type GridProps } from '@radix-ui/themes';