@takaro/lib-components 0.0.1 → 0.0.4

package/src/components/feedback/Alert/index.tsx

@@ -26,84 +26,85 @@ export interface AlertProps {
   action?: Action;
 }
 
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ variant, title, text, dismiss = false, elevation = 4, action }, ref) => {
-    const [visible, setVisible] = useState(true);
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  { variant, title, text, dismiss = false, elevation = 4, action },
+  ref,
+) {
+  const [visible, setVisible] = useState(true);
 
-    const hasTitle = title ? true : false;
+  const hasTitle = title ? true : false;
 
-    const handleExecute = (e: MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      action?.execute();
-    };
+  const handleExecute = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    action?.execute();
+  };
 
-    const handleDismiss = (e: MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setVisible(false);
-    };
+  const handleDismiss = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setVisible(false);
+  };
 
-    function getIcon() {
-      switch (variant) {
-        case 'success':
-          return <Success size={24} />;
-        case 'error':
-          return <Error size={24} />;
-        case 'warning':
-          return <Warning size={24} />;
-        case 'info':
-          return <Info size={24} />;
-      }
+  function getIcon() {
+    switch (variant) {
+      case 'success':
+        return <Success size={24} />;
+      case 'error':
+        return <Error size={24} />;
+      case 'warning':
+        return <Warning size={24} />;
+      case 'info':
+        return <Info size={24} />;
     }
-    return (
-      <AnimatePresence>
-        {visible && (
-          <Container
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            $hasTitle={hasTitle}
-            initial={{ opacity: 0 }}
-            $variant={variant}
-            $elevation={elevation}
-            transition={{ duration: 0.2 }}
-            ref={ref}
-            role="status"
-          >
-            <Grid hasTitle={hasTitle}>
-              <IconContainer variant={variant}>{getIcon()}</IconContainer>
+  }
+  return (
+    <AnimatePresence>
+      {visible && (
+        <Container
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          $hasTitle={hasTitle}
+          initial={{ opacity: 0 }}
+          $variant={variant}
+          $elevation={elevation}
+          transition={{ duration: 0.2 }}
+          ref={ref}
+          role="status"
+        >
+          <Grid hasTitle={hasTitle}>
+            <IconContainer variant={variant}>{getIcon()}</IconContainer>
 
-              {/* If title is declared set title, otherwise put everything on single line */}
-              {title && (
-                <>
-                  <h2>{title}</h2>
-                  <div />
-                </>
+            {/* If title is declared set title, otherwise put everything on single line */}
+            {title && (
+              <>
+                <h2>{title}</h2>
+                <div />
+              </>
+            )}
+            {typeof text === 'string' ? (
+              <p>{text}</p>
+            ) : (
+              text && (
+                <ul>
+                  {text.map((message) => (
+                    <li key={'message-' + message}>{message}</li>
+                  ))}
+                </ul>
+              )
+            )}
+            {hasTitle ? <div /> : null}
+            <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
+              {action && (
+                <Button size="small" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
               )}
-              {typeof text === 'string' ? (
-                <p>{text}</p>
-              ) : (
-                text && (
-                  <ul>
-                    {text.map((message) => (
-                      <li>{message}</li>
-                    ))}
-                  </ul>
-                )
+              {dismiss && (
+                <Button size="small" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />
               )}
-              {hasTitle ? <div /> : null}
-              <ButtonContainer hasTitle={hasTitle} show={dismiss || action ? true : false} variant={variant}>
-                {action && (
-                  <Button size="small" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
-                )}
-                {dismiss && (
-                  <Button size="small" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />
-                )}
-              </ButtonContainer>
-            </Grid>
-          </Container>
-        )}
-      </AnimatePresence>
-    );
-  }
-);
+            </ButtonContainer>
+          </Grid>
+        </Container>
+      )}
+    </AnimatePresence>
+  );
+});

package/src/components/feedback/NotificationBanner/NotificationBanner.test.tsx

@@ -8,7 +8,7 @@ it('Should render <NotificationBanner/>', () => {
   document.body.appendChild(notificationBannerPortal);
 
   const { container } = render(
-    <NotificationBanner description="Notification banner description" title="Notification banner title" />
+    <NotificationBanner description="Notification banner description" title="Notification banner title" />,
   );
   expect(container).toMatchSnapshot();
 });

package/src/components/feedback/NotificationBanner/index.tsx

@@ -74,6 +74,6 @@ export const NotificationBanner: FC<NotificationBannerProps> = ({ title, descrip
         </Container>
       )}
     </AnimatePresence>,
-    document.querySelector('#notification-banner') as Element
+    document.querySelector('#notification-banner') as Element,
   );
 };

package/src/components/feedback/Popover/PopoverContent.tsx

@@ -10,7 +10,10 @@ const Container = styled.div`
   border-radius: ${({ theme }) => theme.borderRadius.medium};
 `;
 
-export const PopoverContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ style, ...props }, propRef) => {
+export const PopoverContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function PopoverContent(
+  { style, ...props },
+  propRef,
+) {
   const theme = useTheme();
   const { context: floatingContext, arrowRef, ...context } = usePopoverContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);

package/src/components/feedback/Popover/PopoverTrigger.tsx

@@ -1,43 +1,45 @@
 import { forwardRef, cloneElement, isValidElement, HTMLProps, PropsWithChildren } from 'react';
 import { usePopoverContext } from './PopoverContext';
 import { useMergeRefs } from '@floating-ui/react';
+import { ReactNode } from '@tanstack/react-router';
 
 export type PopoverTriggerProps = HTMLProps<HTMLElement> &
   PropsWithChildren<{
     asChild?: boolean;
   }>;
 
-export const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>(
-  ({ children, asChild = false, ...props }, propRef) => {
-    const context = usePopoverContext();
-    const childrenRef = (children as any).ref;
-    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+export const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>(function PopoverTrigger(
+  { children, asChild = false, ...props },
+  propRef,
+) {
+  const context = usePopoverContext();
+  const childrenRef = (children as ReactNode).ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
-    // `asChild` allows the user to pass any element as the anchor
-    if (asChild && isValidElement(children)) {
-      return cloneElement(
-        children,
-        context.getReferenceProps({
-          ref,
-          ...props,
-          ...children.props,
-          'data-state': context.open ? 'open' : 'closed',
-          onFocus: props.onFocus,
-          onBlur: props.onBlur,
-        })
-      );
-    }
-
-    return (
-      <button
-        ref={ref}
-        type="button"
-        // The user can style the trigger based on the state
-        data-state={context.open ? 'open' : 'closed'}
-        {...context.getReferenceProps(props)}
-      >
-        {children}
-      </button>
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && isValidElement(children)) {
+    return cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        'data-state': context.open ? 'open' : 'closed',
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+      }),
     );
   }
-);
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      // The user can style the trigger based on the state
+      data-state={context.open ? 'open' : 'closed'}
+      {...context.getReferenceProps(props)}
+    >
+      {children}
+    </button>
+  );
+});

package/src/components/feedback/Popover/usePopover.tsx

@@ -82,6 +82,6 @@ export function usePopover({
       setDescriptionId,
       arrowRef,
     }),
-    [open, setOpen, interactions, data, modal, labelId, descriptionId]
+    [open, setOpen, interactions, data, modal, labelId, descriptionId],
   );
 }

package/src/components/feedback/ProgressBar/index.tsx

@@ -69,7 +69,7 @@ const Progress = styled.div<{ color: Color; progress: number }>`
         color
       ].slice(
         1,
-        theme.colors[color].length
+        theme.colors[color].length,
       )}' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E")`};
   }
 `;

package/src/components/feedback/QuestionTooltip/index.tsx

@@ -1,8 +1,7 @@
 import { FC } from 'react';
-import { Tooltip } from '../Tooltip';
+import { Tooltip, TooltipProps } from '../Tooltip';
 import { AiOutlineQuestion as QuestionIcon } from 'react-icons/ai';
 import { styled } from '../../../styled';
-import { TooltipProps } from '../Tooltip';
 
 const TriggerContainer = styled.div`
   background-color: ${({ theme }) => theme.colors.backgroundAlt};

package/src/components/feedback/Tooltip/TooltipContent.tsx

@@ -17,7 +17,10 @@ const Container = styled.div<{ elevation: Elevation }>`
   z-index: ${({ theme }) => theme.zIndex.tooltip};
 `;
 
-export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ style, ...props }, propRef) => {
+export const TooltipContent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function TooltipContent(
+  { style, ...props },
+  propRef,
+) {
   const theme = useTheme();
   const { floatingStyles, open, arrowRef, context, getFloatingProps } = useTooltipContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);

package/src/components/feedback/Tooltip/TooltipTrigger.tsx

@@ -12,7 +12,7 @@ interface TooltipTriggerProps {
 }
 
 export const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & TooltipTriggerProps>(
-  ({ children, asChild = false, ...props }, propRef) => {
+  function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
     const context = useTooltipContext();
     const childrenRef = (children as any).ref;
     const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
@@ -26,7 +26,7 @@ export const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & T
           ...children.props,
           ref,
           'data-state': context.open ? 'open' : 'closed',
-        })
+        }),
       );
     }
 
@@ -35,5 +35,5 @@ export const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement> & T
         {children}
       </Container>
     );
-  }
+  },
 );

package/src/components/feedback/Tooltip/useTooltip.tsx

@@ -74,6 +74,6 @@ export function useTooltip({
       ...interactions,
       ...data,
     }),
-    [open, setOpen, interactions, data]
+    [open, setOpen, interactions, data],
   );
 }

package/src/components/feedback/snacks/CookieConsent/index.tsx

@@ -20,7 +20,10 @@ type FormInputs = {
   analytical: boolean;
 };
 
-export const CookieConsentSnack = forwardRef<HTMLDivElement, CustomContentProps>(({ id }, ref) => {
+export const CookieConsentSnack = forwardRef<HTMLDivElement, CustomContentProps>(function CookieConsentSnack(
+  { id },
+  ref,
+) {
   const { closeSnackbar } = useSnackbar();
   const [showDetails, setShowDetails] = useState<boolean>(false);
 
@@ -30,7 +33,7 @@ export const CookieConsentSnack = forwardRef<HTMLDivElement, CustomContentProps>
         functional: z.boolean(),
         analytical: z.boolean(),
       }),
-    []
+    [],
   );
 
   const onSubmit: SubmitHandler<FormInputs> = async () => {

package/src/components/feedback/snacks/Default/index.tsx

@@ -22,56 +22,57 @@ export interface DefaultSnackProps extends CustomContentProps {
   icon?: ReactElement;
 }
 
-export const DefaultSnack = forwardRef<HTMLDivElement, DefaultSnackProps>(
-  ({ id, message, title, button1, button2, type = 'info', icon }, ref) => {
-    const { closeSnackbar } = useSnackbar();
-    const theme = useTheme();
+export const DefaultSnack = forwardRef<HTMLDivElement, DefaultSnackProps>(function DefaultSnack(
+  { id, message, title, button1, button2, type = 'info', icon },
+  ref,
+) {
+  const { closeSnackbar } = useSnackbar();
+  const theme = useTheme();
 
-    const getIcon = () => {
-      switch (type) {
-        case 'info':
-          return <InfoIcon fill={theme.colors.info} size={15} />;
-        case 'success':
-          return <CheckMarkIcon fill={theme.colors.success} size={15} />;
-        case 'warning':
-          return <WarningIcon fill={theme.colors.warning} size={15} />;
-        case 'error':
-          return <ErrorIcon fill={theme.colors.warning} size={15} />;
-      }
-    };
+  const getIcon = () => {
+    switch (type) {
+      case 'info':
+        return <InfoIcon fill={theme.colors.info} size={15} />;
+      case 'success':
+        return <CheckMarkIcon fill={theme.colors.success} size={15} />;
+      case 'warning':
+        return <WarningIcon fill={theme.colors.warning} size={15} />;
+      case 'error':
+        return <ErrorIcon fill={theme.colors.warning} size={15} />;
+    }
+  };
 
-    const handleDismiss = useCallback(() => {
-      closeSnackbar(id);
-    }, [id, closeSnackbar]);
+  const handleDismiss = useCallback(() => {
+    closeSnackbar(id);
+  }, [id, closeSnackbar]);
 
-    return (
-      <Wrapper ref={ref}>
-        <ContentContainer>
-          <IconContainer variant={type}>
-            {icon ? cloneElement(icon, { size: 15, fill: theme.colors[type] }) : getIcon()}
-          </IconContainer>
-          <TextContainer>
-            {title && <h3>{title}</h3>}
-            <h5>{message}</h5>
-            {button1 && (
-              <ButtonContainer>
-                <>
-                  {button1}
-                  {button2 && button2}
-                </>
-              </ButtonContainer>
-            )}
-          </TextContainer>
-          <div style={{ width: '25px' }}>
-            <Tooltip>
-              <Tooltip.Trigger asChild>
-                <IconButton icon={<CloseIcon />} ariaLabel="Dismiss snack popup" onClick={handleDismiss} />
-              </Tooltip.Trigger>
-              <Tooltip.Content>Dismiss</Tooltip.Content>
-            </Tooltip>
-          </div>
-        </ContentContainer>
-      </Wrapper>
-    );
-  }
-);
+  return (
+    <Wrapper ref={ref}>
+      <ContentContainer>
+        <IconContainer variant={type}>
+          {icon ? cloneElement(icon, { size: 15, fill: theme.colors[type] }) : getIcon()}
+        </IconContainer>
+        <TextContainer>
+          {title && <h3>{title}</h3>}
+          <h5>{message}</h5>
+          {button1 && (
+            <ButtonContainer>
+              <>
+                {button1}
+                {button2 && button2}
+              </>
+            </ButtonContainer>
+          )}
+        </TextContainer>
+        <div style={{ width: '25px' }}>
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <IconButton icon={<CloseIcon />} ariaLabel="Dismiss snack popup" onClick={handleDismiss} />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Dismiss</Tooltip.Content>
+          </Tooltip>
+        </div>
+      </ContentContainer>
+    </Wrapper>
+  );
+});

package/src/components/feedback/snacks/Drawer/index.tsx

@@ -45,26 +45,27 @@ const Content = styled.div<{ expanded: boolean }>`
   border-radius-top-right: 0;
 `;
 
-export const DrawerSnack = forwardRef<HTMLDivElement, PropsWithChildren<CustomContentProps>>(
-  ({ id, message, children }, ref) => {
-    const { closeSnackbar } = useSnackbar();
-    const [expanded, setExpanded] = useState<boolean>(false);
+export const DrawerSnack = forwardRef<HTMLDivElement, PropsWithChildren<CustomContentProps>>(function DrawerSnack(
+  { id, message, children },
+  ref,
+) {
+  const { closeSnackbar } = useSnackbar();
+  const [expanded, setExpanded] = useState<boolean>(false);
 
-    const handleClose = () => {
-      closeSnackbar(id);
-    };
+  const handleClose = () => {
+    closeSnackbar(id);
+  };
 
-    return (
-      <Wrapper ref={ref} data-testid={id}>
-        <Container expanded={expanded}>
-          <h4>{message}</h4>
-          <div>
-            <ArrowDownIcon onClick={() => setExpanded(!expanded)} size={16} />
-            <CloseIcon onClick={handleClose} size={16} />
-          </div>
-        </Container>
-        <Content expanded={expanded}>{children}</Content>
-      </Wrapper>
-    );
-  }
-);
+  return (
+    <Wrapper ref={ref} data-testid={id}>
+      <Container expanded={expanded}>
+        <h4>{message}</h4>
+        <div>
+          <ArrowDownIcon onClick={() => setExpanded(!expanded)} size={16} />
+          <CloseIcon onClick={handleClose} size={16} />
+        </div>
+      </Container>
+      <Content expanded={expanded}>{children}</Content>
+    </Wrapper>
+  );
+});

package/src/components/feedback/snacks/NetworkDetector/index.tsx

@@ -32,39 +32,43 @@ const CloseIconContainer = styled.div`
   }
 `;
 
-export const NetworkDetectorOfflineSnack = forwardRef<HTMLDivElement, CustomContentProps>(({ id, message }, ref) => {
-  const { closeSnackbar } = useSnackbar();
+export const NetworkDetectorOfflineSnack = forwardRef<HTMLDivElement, CustomContentProps>(
+  function NetworkDetectorOfflineSnack({ id, message }, ref) {
+    const { closeSnackbar } = useSnackbar();
 
-  const handleClose = () => {
-    closeSnackbar(id);
-  };
+    const handleClose = () => {
+      closeSnackbar(id);
+    };
 
-  return (
-    <Container ref={ref}>
-      <WifiOffIcon size={18} style={{ stroke: 'black' }} />
-      <p>{message}</p>
-      <CloseIconContainer>
-        <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
-      </CloseIconContainer>
-    </Container>
-  );
-});
+    return (
+      <Container ref={ref}>
+        <WifiOffIcon size={18} style={{ stroke: 'black' }} />
+        <p>{message}</p>
+        <CloseIconContainer>
+          <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
+        </CloseIconContainer>
+      </Container>
+    );
+  },
+);
 
-export const NetworkDetectorOnlineSnack = forwardRef<HTMLDivElement, CustomContentProps>(({ id, message }, ref) => {
-  const theme = useTheme();
-  const { closeSnackbar } = useSnackbar();
+export const NetworkDetectorOnlineSnack = forwardRef<HTMLDivElement, CustomContentProps>(
+  function NetworkDetectorOnlineSnack({ id, message }, ref) {
+    const theme = useTheme();
+    const { closeSnackbar } = useSnackbar();
 
-  const handleClose = () => {
-    closeSnackbar(id);
-  };
+    const handleClose = () => {
+      closeSnackbar(id);
+    };
 
-  return (
-    <Container ref={ref}>
-      <WifiIcon size={20} style={{ stroke: theme.colors.success }} />
-      <p>{message}</p>
-      <CloseIconContainer>
-        <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
-      </CloseIconContainer>
-    </Container>
-  );
-});
+    return (
+      <Container ref={ref}>
+        <WifiIcon size={20} style={{ stroke: theme.colors.success }} />
+        <p>{message}</p>
+        <CloseIconContainer>
+          <CloseIcon onClick={handleClose} size={18} style={{ cursor: 'pointer' }} />
+        </CloseIconContainer>
+      </Container>
+    );
+  },
+);

package/src/components/inputs/CheckBox/Controlled.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { useController } from 'react-hook-form';
 import { GenericCheckBox } from '.';
-import { Container, CheckboxContainer } from './style';
+import { Container, LoadingCheckBox } from './style';
 
 import { defaultInputProps, defaultInputPropsFactory, ControlledInputProps } from '../InputProps';
 import { Label, ErrorMessage, InputWrapper, Description } from '../layout';
@@ -54,7 +54,7 @@ export const ControlledCheckBox: FC<ControlledCheckBoxProps> = (props) => {
               htmlFor={name}
             />
           )}
-          <CheckboxContainer className="placeholder" readOnly={readOnly} hasError={!!error} disabled={disabled} />
+          <LoadingCheckBox className="placeholder" />
           {/* CASE: show label after <CheckBox /> */}
           {labelPosition === 'right' && label && (
             <Label
@@ -101,7 +101,6 @@ export const ControlledCheckBox: FC<ControlledCheckBoxProps> = (props) => {
           onChange={field.onChange}
           onBlur={field.onBlur}
           value={field.value}
-          ref={field.ref}
         />
 
         {/* CASE: show label after <CheckBox /> */}