@tipp/ui 1.6.34 → 2.0.0

package/src/app/platform/on-offline-radio-card.tsx

@@ -12,8 +12,8 @@ const SERVICE_TYPE = {
 const breakpoint = 'sm';
 
 function HideSmallBox(props: {
-  children: React.ReactElement;
-}): React.ReactElement {
+  children: React.ReactNode;
+}): React.ReactNode {
   return (
     <Box display={{ initial: 'none', [breakpoint]: 'block' }}>
       {props.children}
@@ -25,10 +25,10 @@ export function OnOfflineRadioCard(
   props: RadioButtonCardRootProps & {
     response?: boolean;
   }
-): React.ReactElement {
+): React.ReactNode {
   const Wrapper = props.response
     ? HideSmallBox
-    : (p: { children: React.ReactElement }): React.ReactElement => p.children;
+    : (p: { children: React.ReactNode }): React.ReactNode => p.children;
   const columns = props.response ? { initial: '2', [breakpoint]: '1' } : '1';
   const justify = props.response
     ? { initial: 'center', [breakpoint]: 'between' }

package/src/app/platform/report-card.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Button, Card, Flex, Heading } from '@/atoms';
+import { Box, Button, Card, Flex, Heading, Typo } from '@/atoms';
 import type { Attachment } from '@/molecules';
 import { DownloadIcon } from '@/icon';
 
@@ -8,10 +8,11 @@ export interface ReportCardProps {
   title?: string;
   file?: File;
   status?: React.ReactNode;
+  subtitle?: string;
 }
 
-export function ReportCard(props: ReportCardProps): React.ReactElement {
-  const { title, file, status } = props;
+export function ReportCard(props: ReportCardProps): React.ReactNode {
+  const { title, file, status, subtitle } = props;
 
   const onClickDownload = useCallback(() => {
     if (!file) return;
@@ -44,7 +45,10 @@ export function ReportCard(props: ReportCardProps): React.ReactElement {
         gapY="2"
         justify="between"
       >
-        <Heading variant="heading4">{title}</Heading>
+        <Box>
+          <Heading variant="heading4">{title}</Heading>
+          {subtitle ? <Typo color="gray">{subtitle}</Typo> : null}
+        </Box>
         <Button key={file?.url} onClick={onClickDownload} variant="surface">
           <Flex gap="2" width="100%">
             <DownloadIcon />

package/src/app/platform/reservation-card.tsx

@@ -43,7 +43,7 @@ export interface ReservationCardProps {
 
 export function ReservationCard(
   props: ReservationCardProps
-): React.ReactElement {
+): React.ReactNode {
   const {
     sessionNumber,
     customerName,

package/src/app/platform/session-card.tsx

@@ -33,7 +33,7 @@ export type SessionCardProps = Omit<CardProps, 'error'> & {
   onSaveSessionType?: (sessionType: string) => void;
 };
 
-export function SessionCard(props: SessionCardProps): React.ReactElement {
+export function SessionCard(props: SessionCardProps): React.ReactNode {
   const {
     sessionNumber,
     userName,
@@ -49,7 +49,7 @@ export function SessionCard(props: SessionCardProps): React.ReactElement {
     ...rest
   } = props;
 
-  const renderEditButton = useCallback((): JSX.Element => {
+  const renderEditButton = useCallback((): React.ReactNode => {
     return (
       <Button color="gray" ml="2" variant="transparent">
         <Pencil1Icon />

package/src/app/platform/session-review-simple-read.tsx

@@ -13,7 +13,7 @@ function SubTitleWrapper({
 }: {
   children: React.ReactNode;
   title: string;
-}): JSX.Element {
+}): React.ReactNode {
   return (
     <Flex direction="column" gap="2">
       <Heading mb="2" variant="heading5" weight="regular">
@@ -28,7 +28,7 @@ function SubTitleWrapper({
 export function SessionReviewSimpleRead({
   helpfulness,
   review,
-}: SessionReviewSimpleReadProps): React.ReactElement {
+}: SessionReviewSimpleReadProps): React.ReactNode {
   const helpfulnessMeta = useMemo<{
     text: string;
     color: BadgeProps['color'];

package/src/app/platform/userInfos/coaching-customer-info/index.tsx

@@ -15,7 +15,7 @@ export { type CoachingCustomerInfoProps };
 
 export function CoachingCustomerInfo(
   props: CoachingCustomerInfoProps
-): React.ReactElement {
+): React.ReactNode {
   return (
     <>
       <Box display={{ initial: 'block', sm: 'none', md: 'none' }}>

package/src/app/platform/userInfos/coaching-customer-info/large.tsx

@@ -16,7 +16,7 @@ export function CoachingCustomerInfoLarge({
   children,
   badge,
   onClickCopy,
-}: CoachingCustomerInfoProps): React.ReactElement {
+}: CoachingCustomerInfoProps): React.ReactNode {
   return (
     <Flex direction="column" gap="5">
       {/* 이름, 사명 */}

package/src/app/platform/userInfos/coaching-customer-info/medium.tsx

@@ -23,7 +23,7 @@ export function CoachingCustomerInfoMedium({
   children,
   badge,
   onClickCopy,
-}: CoachingCustomerInfoProps): React.ReactElement {
+}: CoachingCustomerInfoProps): React.ReactNode {
   return (
     <Flex direction="column" gap="5">
       {/* 이름, 사명 */}

package/src/app/platform/userInfos/coaching-customer-info/small.tsx

@@ -6,7 +6,7 @@ export function CoachingCustomerInfoSmall({
   customer,
   children,
   badge,
-}: CoachingCustomerInfoProps): React.ReactElement {
+}: CoachingCustomerInfoProps): React.ReactNode {
   return (
     <Flex
       direction={{ initial: 'column', xs: 'row' }}

package/src/app/platform/userInfos/session-user-info-detail.tsx

@@ -14,8 +14,8 @@ function SectionWrapper({
   children,
 }: {
   title: string;
-  children: React.ReactElement;
-}): JSX.Element {
+  children: React.ReactNode;
+}): React.ReactNode {
   return (
     <Box>
       <Grid align="center" columns="auto 1fr" gap="3" mb="5">
@@ -32,7 +32,7 @@ export function SessionUserInfoDetail({
   customer,
   session,
   onClickCopy,
-}: SessionUserInfoDetailProps): React.ReactElement {
+}: SessionUserInfoDetailProps): React.ReactNode {
   return (
     <Flex direction="column" gap="6">
       <SectionWrapper title="세션 정보">

package/src/app/platform/userInfos/utils.tsx

@@ -6,8 +6,8 @@ import { Button, DataList } from '../../../atoms';
 export interface CoachingCustomerInfoProps {
   customer?: Customer;
   session?: Session;
-  children?: React.ReactElement;
-  badge?: React.ReactElement;
+  children?: React.ReactNode;
+  badge?: React.ReactNode;
   onClickCopy: (value: string) => void;
 }
 
@@ -115,7 +115,7 @@ export const renderItem = <T extends object>(args: {
   info: DataListItems<T>;
   data?: T;
   onClickCopy: (value: string) => void;
-}): JSX.Element => {
+}): React.ReactNode => {
   const { info, data, onClickCopy } = args;
   const value = info.getValue(data);
   return (
@@ -132,7 +132,7 @@ export const renderDataListItem = <T extends object>(args: {
   info: DataListItems<T>;
   data?: T;
   onClickCopy: (value: string) => void;
-}): React.ReactElement => {
+}): React.ReactNode => {
   const { info, data, onClickCopy } = args;
   return (
     <DataList.Item key={info.label}>
@@ -145,7 +145,7 @@ export const renderDataListItem = <T extends object>(args: {
 export function CopyButton(props: {
   value: string;
   onClickCopy: (value: string) => void;
-}): JSX.Element {
+}): React.ReactNode {
   const { value, onClickCopy } = props;
   return (
     <Button

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

@@ -24,7 +24,7 @@ export const AutoSizingInput = forwardRef<
   (
     { value: _value, onChangeValue, onChange, ...rest },
     ref
-  ): React.ReactElement => {
+  ): React.ReactNode => {
     const [value, setValue] = useState(_value);
     const [width, setWidth] = useState(0);
     const span = useRef<HTMLSpanElement>(null);

package/src/atoms/avatar.tsx

@@ -13,7 +13,7 @@ export type AvatarProps = Omit<RadixAvatarProps, 'size'> & {
 };
 
 export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
-  (props: AvatarProps, ref): React.ReactElement => {
+  (props: AvatarProps, ref): React.ReactNode => {
     const { children, size, variant = 'soft', ...rest } = props;
     const getOriginalSize = useCallback((value?: Size): OriginalSize => {
       switch (value) {

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.ReactElement => {
+  (props: BadgeProps, ref): React.ReactNode => {
     const { size = 'small', color = 'accent', ...rest } = props;
 
     const radixSize = useMemo(() => {

package/src/atoms/bullet-text.tsx

@@ -8,7 +8,7 @@ export type BulletTextProps = TypoProps;
 export function BulletText({
   children,
   ...rest
-}: BulletTextProps): React.ReactElement {
+}: BulletTextProps): React.ReactNode {
   return (
     <Flex gap="1" ml="2">
       <Typo {...rest}>•</Typo>

package/src/atoms/button.tsx

@@ -5,7 +5,7 @@ import { convertSize } from '../utils/convert-button-size';
 import type { ButtonProps } from './button.type';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref): React.ReactElement => {
+  (props, ref): React.ReactNode => {
     const { size, style, variant, ...restProps } = props;
 
     const radixSize = useMemo(() => {

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.ReactElement => {
+  (props, ref): React.ReactNode => {
     const { size = 'medium', ...rest } = props;
 
     const radixSize = useMemo<RadixCheckboxProps['size']>(() => {

package/src/atoms/collapse.tsx

@@ -8,7 +8,7 @@ export interface CollapseProps {
   closedHeight?: string;
 }
 
-export function Collapse(props: CollapseProps): React.ReactElement {
+export function Collapse(props: CollapseProps): React.ReactNode {
   const { children, closedHeight = '0' } = props;
   const [open, setOpen] = useState(() => {
     return props.open || props.defaultOpen || false;

package/src/atoms/dialog.tsx

@@ -14,7 +14,7 @@ type ContentProps = RadixDialog.DialogContentProps & {
   minHeight?: string;
   title?: string;
   hideCloseButton?: boolean;
-  buttons?: React.ReactElement;
+  buttons?: React.ReactNode;
 };
 
 const preventDefault: RadixDialog.DialogContentProps['onPointerDownOutside'] = (
@@ -23,7 +23,7 @@ const preventDefault: RadixDialog.DialogContentProps['onPointerDownOutside'] = (
   e.preventDefault();
 };
 
-function Content(props: ContentProps): React.ReactElement {
+function Content(props: ContentProps): React.ReactNode {
   const {
     children,
     style = {},
@@ -93,7 +93,7 @@ function Content(props: ContentProps): React.ReactElement {
 function Close({
   children,
   ...rest
-}: RadixDialog.DialogCloseProps): React.ReactElement {
+}: RadixDialog.DialogCloseProps): React.ReactNode {
   return (
     <RadixDialog.Close asChild {...rest}>
       {children}
@@ -104,7 +104,7 @@ function Close({
 function Trigger({
   children,
   ...rest
-}: RadixDialog.DialogTriggerProps): React.ReactElement {
+}: RadixDialog.DialogTriggerProps): React.ReactNode {
   return (
     <RadixDialog.Trigger asChild {...rest}>
       {children}

package/src/atoms/drawer.tsx

@@ -7,7 +7,7 @@ import { Flex } from './flex';
 import { Separator } from './separator';
 import { IconButton } from './icon-button';
 
-export function Root(props: Dialog.DialogProps): React.ReactElement {
+export function Root(props: Dialog.DialogProps): React.ReactNode {
   return <Dialog.Root {...props} />;
 }
 
@@ -23,7 +23,7 @@ const preventDefault: Dialog.DialogContentProps['onPointerDownOutside'] = (
   e.preventDefault();
 };
 
-export function Content(props: ContentProps): React.ReactElement {
+export function Content(props: ContentProps): React.ReactNode {
   const {
     position = 'right',
     className,
@@ -71,7 +71,7 @@ export function Content(props: ContentProps): React.ReactElement {
   );
 }
 
-export function Trigger(props: Dialog.DialogTriggerProps): React.ReactElement {
+export function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {
   return <Dialog.Trigger asChild {...props} />;
 }
 

package/src/atoms/ellipsis-tooltip.tsx

@@ -9,7 +9,7 @@ export type EllipsisTooltipProps = TypoProps & {
 
 export function EllipsisTooltip(
   props: EllipsisTooltipProps
-): React.ReactElement {
+): React.ReactNode {
   const { children, style, lineClamp = 2, ...rest } = props;
   const ref = useRef<HTMLSpanElement>(null);
 

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

@@ -10,7 +10,7 @@ export interface FieldErrorWrapperProps {
 export function FieldErrorWrapper({
   children,
   error,
-}: FieldErrorWrapperProps): JSX.Element {
+}: FieldErrorWrapperProps): React.ReactNode {
   return (
     <Flex direction="column" gap="1">
       {children}

package/src/atoms/heading.tsx

@@ -36,7 +36,7 @@ const mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {
   }
 };
 
-export function Heading(props: HeadingProps): React.ReactElement {
+export function Heading(props: HeadingProps): React.ReactNode {
   const { size, children, variant, ...rest } = props;
   const radixSize = useMemo<RadixHeadingProps['size']>(() => {
     return variant

package/src/atoms/link.tsx

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

package/src/atoms/pagination.tsx

@@ -23,7 +23,7 @@ export interface PaginationProps {
   siblingCount?: number;
 }
 
-export function Pagination(props: PaginationProps): React.ReactElement {
+export function Pagination(props: PaginationProps): React.ReactNode {
   const { onChange, count = 0, siblingCount = 2 } = props;
 
   const [page, setPage] = useState(() => props.page || props.defaultPage || 1);

package/src/atoms/select.tsx

@@ -50,7 +50,7 @@ export type SelectRootProps = RadixSelect.RootProps & {
   error?: boolean;
 };
 
-function Root(props: SelectRootProps): React.ReactElement {
+function Root(props: SelectRootProps): React.ReactNode {
   const { error, ...rest } = props;
 
   return (

package/src/atoms/toast.tsx

@@ -2,15 +2,16 @@ import { InfoCircledIcon } from '@radix-ui/react-icons';
 import {
   ToastContainer as ToastifyContainer,
   type ToastContainerProps,
+  type CloseButtonProps,
 } from 'react-toastify';
 
 export { toast } from 'react-toastify';
 
-function CloseButton(): React.ReactNode {
+function CloseButton(props: CloseButtonProps): React.ReactNode {
   return null;
 }
 
-export function ToastContainer(props: ToastContainerProps): React.ReactElement {
+export function ToastContainer(props: ToastContainerProps): React.ReactNode {
   return (
     <ToastifyContainer
       autoClose={5000}

package/src/atoms/typo.tsx

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

package/src/charts/horizontal-bar-chart.tsx

@@ -15,7 +15,7 @@ export interface HorizontalBarChartProps {
 
 export function HorizontalBarChart(
   props: HorizontalBarChartProps
-): React.ReactElement {
+): React.ReactNode {
   const { total, value, backgroundColor, barColor, height } = props;
   return (
     <div

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

@@ -15,7 +15,7 @@ export type DatePickerButtonProps = DatePickerProps & {
 
 export function DatePickerButton(
   props: DatePickerButtonProps
-): React.ReactElement {
+): React.ReactNode {
   const { size, placeholder, format: formatProps, disabled, ...rest } = props;
 
   const buttonProps = useMemo(() => {

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

@@ -24,7 +24,7 @@ const ReactDatePicker = ((RDP.default as any).default ||
   (RDP as any)) as typeof RDP.default;
 
 export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
-  (props, ref): React.ReactElement => {
+  (props, ref): React.ReactNode => {
     const { fullWidth, ...rest } = props;
     const fullWidthClassName = fullWidth ? 'full-width' : '';
     return (

package/src/molecules/dot-navigation.tsx

@@ -15,7 +15,7 @@ export interface DotNavigationProps {
   onChangeDotIndex?: (index: number) => void;
 }
 
-export function DotNavigation(props: DotNavigationProps): React.ReactElement {
+export function DotNavigation(props: DotNavigationProps): React.ReactNode {
   const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } =
     props;
 

package/src/molecules/download-card.tsx

@@ -17,7 +17,7 @@ export function DownloadCard({
   url,
   createdAt,
   size,
-}: Attachment): React.ReactElement {
+}: Attachment): React.ReactNode {
   return (
     <Link download={fileName} href={url} key={createdAt?.valueOf() + fileName}>
       <IconButton

package/src/molecules/expand-table/index.tsx

@@ -51,7 +51,7 @@ export interface ExpandTableProps<Datum extends RowData> {
 
 export function ExpandTable<Datum extends RowData>(
   props: ExpandTableProps<Datum>
-): React.ReactElement {
+): React.ReactNode {
   const {
     data,
     columns,

package/src/molecules/expand-table/row.tsx

@@ -22,7 +22,7 @@ interface RowProps<Datum extends RowData> {
 
 export function Row<Datum extends RowData>(
   props: RowProps<Datum>
-): React.ReactElement {
+): React.ReactNode {
   const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } =
     props;
   const [open, setOpen] = useState(false);

package/src/molecules/force-refresh.tsx

@@ -5,7 +5,7 @@ import { Code } from '../atoms/code';
 import { Kbd } from '../atoms/kbd';
 import { Flex } from '../atoms/flex';
 
-function CodeSize3(props: { children: React.ReactNode }): React.ReactElement {
+function CodeSize3(props: { children: React.ReactNode }): React.ReactNode {
   return (
     <Code
       style={{
@@ -19,7 +19,7 @@ function CodeSize3(props: { children: React.ReactNode }): React.ReactElement {
   );
 }
 
-export function ForceRefresh(): React.ReactElement {
+export function ForceRefresh(): React.ReactNode {
   return (
     <Flex direction="column" gap="2">
       <Typo>

package/src/molecules/form/form.tsx

@@ -47,7 +47,7 @@ export type FormLabelProps = RadixForm.FormLabelProps & {
   variant?: 'title' | 'body' | 'caption';
 };
 
-function HeadingLabel(props: HeadingProps): React.ReactElement {
+function HeadingLabel(props: HeadingProps): React.ReactNode {
   return (
     <Heading variant="heading5" {...props}>
       {props.children}
@@ -55,7 +55,7 @@ function HeadingLabel(props: HeadingProps): React.ReactElement {
   );
 }
 
-function CaptionLabel(props: TypoProps): React.ReactElement {
+function CaptionLabel(props: TypoProps): React.ReactNode {
   return (
     <Typo color="gray" variant="caption" {...props}>
       {props.children}
@@ -132,7 +132,7 @@ const Control = forwardRef<HTMLInputElement, ControlProps>(
 Control.displayName = 'FORM_Control';
 
 interface FormItemProps extends FormFieldProps {
-  children: React.ReactElement;
+  children: React.ReactNode;
   label: string;
   labelVariant?: FormLabelProps['variant'];
   errorMessage?: string;
@@ -144,7 +144,7 @@ export function FormItem({
   children,
   errorMessage,
   ...fieldProps
-}: FormItemProps): React.JSX.Element {
+}: FormItemProps): React.ReactNode {
   return (
     <Form.Field {...fieldProps}>
       <Form.Label variant={labelVariant}>{label}</Form.Label>

package/src/molecules/ghost-post.tsx

@@ -10,11 +10,11 @@ export interface GhostPostProps {
   defaultThemeProps?: Partial<ThemeProviderProps>;
   html?: string;
   title?: string;
-  children?: React.ReactElement;
+  children?: React.ReactNode;
   onPageBack?: () => void;
 }
 
-export function GhostPost(props: GhostPostProps): React.ReactElement {
+export function GhostPost(props: GhostPostProps): React.ReactNode {
   const { defaultThemeProps, html, onPageBack } = props;
   return (
     <ThemeProvider

package/src/molecules/learning-post.tsx

@@ -20,13 +20,13 @@ export interface LearningPostProps {
   title?: string;
   metaDescription?: string;
   /** 섬네일에 해당하는 이미지 컴포넌트 */
-  imageComp?: React.ReactElement;
+  imageComp?: React.ReactNode;
   tags?: Tag[];
-  children?: React.ReactElement;
+  children?: React.ReactNode;
   onPageBack?: () => void;
 }
 
-export function LearningPost(props: LearningPostProps): React.ReactElement {
+export function LearningPost(props: LearningPostProps): React.ReactNode {
   const {
     defaultThemeProps,
     html,

package/src/molecules/navigation.tsx

@@ -22,7 +22,7 @@ export function Navigation({
   fontColor,
   backgroundColor,
   activeKey,
-}: NavigationProps): React.ReactElement {
+}: NavigationProps): React.ReactNode {
   return (
     <Flex
       direction="column"

package/src/molecules/radio-button-card.tsx

@@ -14,7 +14,7 @@ type RadioButtonCardRootProps = RadioCards.RootProps & {
 };
 const RadioCardContext = createContext<RadioButtonCardRootProps>({});
 
-function Root(props: RadioCards.RootProps): React.ReactElement {
+function Root(props: RadioCards.RootProps): React.ReactNode {
   const [value, setValue] = useState(props.value || props.defaultValue);
 
   const onValueChange = useCallback(
@@ -36,7 +36,7 @@ type RadioButtonCardItemProps = RadioCards.ItemProps;
 function Item({
   children,
   ...itemRest
-}: RadioCards.ItemProps): React.ReactElement {
+}: RadioCards.ItemProps): React.ReactNode {
   const {
     value,
     justify,