@tipp/ui 1.5.10 → 1.6.0

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

@@ -1,24 +1,12 @@
-import React, { useMemo } from 'react';
-import {
-  getColorFromProjectState,
-  getTextFromProjectState,
-} from '@tipp/biz-utils';
-import { Badge, Box, Flex, Grid, Heading, Typo } from '../../../../atoms';
+import React from 'react';
+import { Box, Flex, Grid, Heading, Typo } from '../../../../atoms';
 import type { CoachingCustomerInfoProps } from '../utils';
 
 export function CoachingCustomerInfoSmall({
   customer,
-  session,
   children,
+  badge,
 }: CoachingCustomerInfoProps): React.ReactElement {
-  const badgeColor = useMemo(() => {
-    return getColorFromProjectState(session?.state);
-  }, [session?.state]);
-
-  const sessionText = useMemo(() => {
-    return getTextFromProjectState(session?.state);
-  }, [session?.state]);
-
   return (
     <Flex
       direction={{ initial: 'column', xs: 'row' }}
@@ -34,9 +22,7 @@ export function CoachingCustomerInfoSmall({
           <Typo color="gray" truncate variant="body">
             {customer?.company}
           </Typo>
-          <Box style={{ justifySelf: 'end' }}>
-            <Badge color={badgeColor}>{sessionText}</Badge>
-          </Box>
+          <Box style={{ justifySelf: 'end' }}>{badge}</Box>
         </Grid>
       </Box>
       {children}

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

@@ -7,6 +7,7 @@ export interface CoachingCustomerInfoProps {
   customer?: Customer;
   session?: Session;
   children?: React.ReactElement;
+  badge?: React.ReactElement;
 }
 
 export interface Customer {

package/src/atoms/drawer.tsx

@@ -5,6 +5,7 @@ import { ClosePanelArrowIcon } from '../icons/close-panel-arrow';
 import { Flex } from './flex';
 import { Separator } from './separator';
 import { IconButton } from './icon-button';
+import { ToastContainer } from './toast';
 
 export function Root(props: Dialog.DialogProps): React.ReactNode {
   return <Dialog.Root {...props} />;
@@ -37,6 +38,7 @@ export function Content(props: ContentProps): React.ReactElement {
     <Dialog.Portal container={containerRef.current}>
       <Theme>
         <Dialog.Overlay className="DrawerOverlay" />
+        <ToastContainer />
         <Dialog.Content
           className={`DrawerContent ${position} ${className || ''}`}
           onPointerDownOutside={preventDefault}

package/src/atoms/index.ts

@@ -52,6 +52,6 @@ export * from './field-error-wrapper';
 export * from './ellipsis-tooltip';
 export * from './drawer';
 export * from './toast';
-export * from '../molecules/form';
+export * from '../molecules/form/form';
 export * from './auto-sizing-input';
 export * from './bullet-text';

package/src/index.ts

@@ -7,4 +7,3 @@ export * from './icon';
 export * from './charts';
 export * from './utils';
 export * from './app';
-export * from './layouts';

package/src/molecules/{form.tsx → form/form.tsx}

@@ -1,9 +1,9 @@
 import * as RadixForm from '@radix-ui/react-form';
 import { createContext, forwardRef, useContext, useMemo } from 'react';
 import type { HeadingProps } from '@radix-ui/themes';
-import { Heading } from '../atoms/heading';
-import type { TypoProps } from '../atoms/typo';
-import { Typo } from '../atoms/typo';
+import { Heading } from '../../atoms/heading';
+import type { TypoProps } from '../../atoms/typo';
+import { Typo } from '../../atoms/typo';
 
 const Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(
   ({ children, className, ...rest }, ref) => {
@@ -21,7 +21,7 @@ const Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(
 
 Root.displayName = 'FORM_ROOT';
 
-type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };
+export type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };
 
 const FieldContext = createContext<FormFieldProps>({
   name: '',
@@ -42,7 +42,7 @@ const Field = forwardRef<HTMLDivElement, FormFieldProps>(
 );
 Field.displayName = 'FORM_FIELD';
 
-type LabelProps = RadixForm.FormLabelProps & {
+export type FormLabelProps = RadixForm.FormLabelProps & {
   /** label의 타입을 지정  */
   variant?: 'title' | 'body' | 'caption';
 };
@@ -63,7 +63,7 @@ function CaptionLabel(props: TypoProps): React.ReactElement {
   );
 }
 
-const Label = forwardRef<HTMLLabelElement, LabelProps>(
+const Label = forwardRef<HTMLLabelElement, FormLabelProps>(
   ({ children, className, variant, ...rest }, ref) => {
     const Comp = useMemo(() => {
       switch (variant) {
@@ -131,6 +131,31 @@ const Control = forwardRef<HTMLInputElement, ControlProps>(
 );
 Control.displayName = 'FORM_Control';
 
+interface FormItemProps extends FormFieldProps {
+  children: React.ReactElement;
+  label: string;
+  labelVariant?: FormLabelProps['variant'];
+  errorMessage?: string;
+}
+
+export function FormItem({
+  label,
+  labelVariant,
+  children,
+  errorMessage,
+  ...fieldProps
+}: FormItemProps): React.JSX.Element {
+  return (
+    <Form.Field {...fieldProps}>
+      <Form.Label variant={labelVariant}>{label}</Form.Label>
+      {children}
+      <Form.Message forceMatch={Boolean(errorMessage)}>
+        {errorMessage}
+      </Form.Message>
+    </Form.Field>
+  );
+}
+
 export const Form = {
   Root,
   Field,
@@ -138,4 +163,5 @@ export const Form = {
   Message,
   Control: RadixForm.Control,
   Submit: RadixForm.Submit,
+  FormItem,
 };

package/src/molecules/form/index.ts

@@ -0,0 +1 @@
+export * from './form';

package/src/molecules/time-select.tsx

@@ -1,27 +1,58 @@
 import React, { useMemo } from 'react';
+import { format } from 'date-fns';
 import type { SelectRootProps } from '../atoms';
 import { Flex, Select } from '../atoms';
 import { getTimeOptions } from '../utils';
 
+interface TimeSelectProps extends SelectRootProps {
+  maxTime?: Date;
+  minTime?: Date;
+  time?: Date;
+}
+
+const getOptionValue = (date?: Date, timeValue?: Date): string | undefined => {
+  if (date && timeValue) {
+    if (format(date, 'yyyyMMdd') === format(timeValue, 'yyyyMMdd')) {
+      return format(date, 'HH:mm');
+    }
+  }
+};
+
 export function TimeSelect({
   value,
+  maxTime,
+  minTime,
+  time,
   ...rest
-}: SelectRootProps): React.ReactElement {
+}: TimeSelectProps): React.ReactElement {
   const timeOptions = useMemo(() => {
     return getTimeOptions();
   }, []);
 
+  const [minOption, maxOption] = useMemo(() => {
+    return [getOptionValue(minTime, time), getOptionValue(maxTime, time)];
+  }, [maxTime, minTime, time]);
+
   return (
     <Select.Root value={value} {...rest}>
       <Flex direction="column" width="100%">
         <Select.Trigger placeholder="-        " style={{ minWidth: '100px' }} />
       </Flex>
       <Select.Content>
-        {timeOptions.map((time) => (
-          <Select.Item key={time} value={time}>
-            {time}
-          </Select.Item>
-        ))}
+        {timeOptions.map((option) => {
+          const visible =
+            (!minOption || option >= minOption) &&
+            (!maxOption || option <= maxOption);
+
+          if (!visible) {
+            return null;
+          }
+          return (
+            <Select.Item key={option} value={option}>
+              {option}
+            </Select.Item>
+          );
+        })}
       </Select.Content>
     </Select.Root>
   );

package/src/layouts/index.ts

@@ -1 +0,0 @@
-export * from './response-display';

package/src/layouts/response-display.tsx

@@ -1,62 +0,0 @@
-import type { Breakpoint, Responsive } from '@radix-ui/themes/props';
-import React from 'react';
-import type { BoxProps } from '../atoms';
-import { Box } from '../atoms';
-
-type Children = React.ReactElement;
-export type ResponseDisplayProps = Responsive<Children>;
-
-const breakpoints: Breakpoint[] = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];
-
-const sortByBreakpoint = (
-  a: [string, Children],
-  b: [string, Children]
-): number => {
-  return (
-    breakpoints.indexOf(a[0] as Breakpoint) -
-    breakpoints.indexOf(b[0] as Breakpoint)
-  );
-};
-
-const getDisplay = (
-  prev: Breakpoint | undefined,
-  cur: Breakpoint | undefined,
-  index: Breakpoint | undefined
-): BoxProps['display'] => {
-  const result: BoxProps['display'] = {};
-  if (prev) {
-    result.initial = 'none';
-  }
-  if (cur) {
-    result[cur] = 'block';
-  }
-  if (index) {
-    result[index] = 'none';
-  }
-  return result;
-};
-
-export function ResponseDisplay(
-  props: ResponseDisplayProps
-): React.ReactElement {
-  const sortedChildren = Object.entries(props).sort(sortByBreakpoint);
-
-  return (
-    <>
-      {sortedChildren.map(([key, value], index) => {
-        return (
-          <Box
-            display={getDisplay(
-              sortedChildren[index - 1]?.[0] as Breakpoint,
-              sortedChildren[index]?.[0] as Breakpoint,
-              sortedChildren[index + 1]?.[0] as Breakpoint
-            )}
-            key={key}
-          >
-            {value}
-          </Box>
-        );
-      })}
-    </>
-  );
-}