@takaro/lib-components 0.0.1 → 0.0.5

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.1",
+  "version": "0.0.5",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
-  "author": "Takaro Team",
   "license": "AGPL-3.0-or-later",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -26,7 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sort-package-json": "^1.53.1",
-    "storybook": "7.5.3"
+    "storybook": "7.6.20"
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.24.0 || ^0.26.0",
@@ -34,10 +33,9 @@
     "@rjsf/core": "^5.6.2",
     "@rjsf/utils": "^5.6.2",
     "@rjsf/validator-ajv8": "^5.6.2",
-    "@tanstack/react-query": "^4.26.1",
     "@tanstack/react-table": "^8.7.9",
-    "@tanstack/react-router": "^1.15.22",
-    "@types/luxon": "3.3.0",
+    "@tanstack/react-router": "1.35.3",
+    "@types/luxon": "3.4.2",
     "framer-motion": "^10.16.12",
     "luxon": "3.3.0",
     "notistack": "^3.0.1",
@@ -45,6 +43,7 @@
     "rc-slider": "^9.7.5",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
+    "@sentry/react": "^8.5.0",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",

package/src/components/actions/Button/index.tsx

@@ -1,4 +1,4 @@
-import { cloneElement, forwardRef, MouseEvent as ReactMouseEvent, ReactElement } from 'react';
+import { JSX, cloneElement, forwardRef, MouseEvent as ReactMouseEvent, ReactElement } from 'react';
 import { Spinner } from '../../../components';
 import { ButtonColor, Default, Outline, Clear, White } from './style';
 import { Size, Variant } from '../../../styled';
@@ -22,78 +22,76 @@ export interface ButtonProps {
   form?: string;
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      icon,
-      iconPosition = 'left',
-      size = 'medium',
-      type = 'button',
-      isLoading = false,
-      className,
-      form,
-      text,
-      color = 'primary',
-      disabled = false,
-      fullWidth = false,
-      variant = 'default',
-      onClick = () => {},
-    },
-    ref
-  ) => {
-    function getIcon(): JSX.Element {
-      if (isLoading) return <Spinner color={variant === 'default' ? 'white' : color} size="small" />;
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    icon,
+    iconPosition = 'left',
+    size = 'medium',
+    type = 'button',
+    isLoading = false,
+    className,
+    form,
+    text,
+    color = 'primary',
+    disabled = false,
+    fullWidth = false,
+    variant = 'default',
+    onClick = () => {},
+  },
+  ref,
+) {
+  function getIcon(): JSX.Element {
+    if (isLoading) return <Spinner color={variant === 'default' ? 'white' : color} size="small" />;
 
-      if (icon) return cloneElement(icon, { size: 20 });
+    if (icon) return cloneElement(icon, { size: 20 });
 
-      return <></>;
-    }
+    return <></>;
+  }
 
-    function getVariant(): JSX.Element {
-      const props = {
-        className: className,
-        color: color,
-        disabled: disabled,
-        iconPosition: iconPosition,
-        form: form,
-        icon: !!icon,
-        isLoading: isLoading,
-        onClick: !disabled || !isLoading ? onClick : undefined,
-        size: size,
-        fullWidth: fullWidth,
-        type: type,
-        ref: ref,
-        tabIndex: disabled ? -1 : 0,
-      };
+  function getVariant(): JSX.Element {
+    const props = {
+      className: className,
+      color: color,
+      disabled: disabled,
+      iconPosition: iconPosition,
+      form: form,
+      icon: !!icon,
+      isLoading: isLoading,
+      onClick: !disabled || !isLoading ? onClick : undefined,
+      size: size,
+      fullWidth: fullWidth,
+      type: type,
+      ref: ref,
+      tabIndex: disabled ? -1 : 0,
+    };
 
-      switch (variant) {
-        case 'default':
-          return (
-            <Default {...props}>
-              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
-            </Default>
-          );
-        case 'outline':
-          return (
-            <Outline {...props}>
-              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
-            </Outline>
-          );
-        case 'clear':
-          return (
-            <Clear {...props}>
-              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
-            </Clear>
-          );
-        case 'white':
-          return (
-            <White {...props}>
-              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
-            </White>
-          );
-      }
+    switch (variant) {
+      case 'default':
+        return (
+          <Default {...props}>
+            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+          </Default>
+        );
+      case 'outline':
+        return (
+          <Outline {...props}>
+            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+          </Outline>
+        );
+      case 'clear':
+        return (
+          <Clear {...props}>
+            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+          </Clear>
+        );
+      case 'white':
+        return (
+          <White {...props}>
+            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+          </White>
+        );
     }
-
-    return getVariant();
   }
-);
+
+  return getVariant();
+});

package/src/components/actions/Button/style.ts

@@ -94,7 +94,7 @@ export const Default = styled.button<{
       case 'huge':
         return `
           span {
-            font-size: 105%;
+            font-size: 125%;
           }
           padding: ${theme.spacing[1]} ${theme.spacing[2]}
         `;

package/src/components/actions/ContextMenu/Group.tsx

@@ -22,7 +22,7 @@ interface DropdownGroupProps {
   divider?: boolean;
 }
 
-export const ContextMenuGroup: FC<PropsWithChildren<DropdownGroupProps>> = ({ label, divider = false, children }) => {
+export const Group: FC<PropsWithChildren<DropdownGroupProps>> = ({ label, divider = false, children }) => {
   const showDivider = divider || label ? true : false;
 
   return (

package/src/components/actions/ContextMenu/MenuItem.tsx

@@ -44,7 +44,10 @@ export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElem
   disabled?: boolean;
 }
 
-export const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(({ label, shortcut, disabled, ...props }, ref) => {
+export const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(
+  { label, shortcut, disabled, ...props },
+  ref,
+) {
   const containerRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {

package/src/components/actions/ContextMenu/index.tsx

@@ -1,7 +1,6 @@
 import {
   Children,
   cloneElement,
-  forwardRef,
   isValidElement,
   useEffect,
   useRef,
@@ -9,6 +8,7 @@ import {
   HTMLProps,
   RefObject,
   ReactElement,
+  FC,
 } from 'react';
 import {
   useFloating,
@@ -25,7 +25,7 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react';
 import { MenuItem, MenuItemProps } from './MenuItem';
-import { ContextMenuGroup } from './Group';
+import { Group } from './Group';
 
 import { styled } from '../../../styled';
 
@@ -45,19 +45,18 @@ export interface ContextMenuProps extends HTMLProps<HTMLButtonElement> {
   targetRef?: RefObject<HTMLElement>;
 }
 
-type ContextMenuComponent = {
-  (props: ContextMenuProps, ref: React.Ref<HTMLButtonElement>): JSX.Element;
+type SubComponentTypes = {
   Item: typeof MenuItem;
-  Group: typeof ContextMenuGroup;
+  Group: typeof Group;
 };
 
-export const ContextMenu = forwardRef<HTMLButtonElement, ContextMenuProps>(({ children, targetRef }, _ref) => {
+export const ContextMenu: FC<ContextMenuProps> & SubComponentTypes = ({ children, targetRef }) => {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [isOpen, setIsOpen] = useState(false);
 
   const listItemsRef = useRef<Array<HTMLButtonElement | null>>([]);
   const listContentRef = useRef(
-    Children.map(children, (child) => (isValidElement(child) ? child.props.label : null)) as Array<string | null>
+    Children.map(children, (child) => (isValidElement(child) ? child.props.label : null)) as Array<string | null>,
   );
   const allowMouseUpCloseRef = useRef(false);
 
@@ -177,11 +176,11 @@ export const ContextMenu = forwardRef<HTMLButtonElement, ContextMenuProps>(({ ch
                               groupChild.props.onClick?.(e);
                               setIsOpen(false);
                             },
-                          })
+                          }),
                         );
                       }
                       return groupChild;
-                    }
+                    },
                   );
                   return <ContextMenu.Group {...child.props}>{newGroupChildren}</ContextMenu.Group>;
                 }
@@ -202,7 +201,7 @@ export const ContextMenu = forwardRef<HTMLButtonElement, ContextMenuProps>(({ ch
                       child.props.onClick?.(e);
                       setIsOpen(false);
                     },
-                  })
+                  }),
                 );
               }
             })}
@@ -211,7 +210,7 @@ export const ContextMenu = forwardRef<HTMLButtonElement, ContextMenuProps>(({ ch
       )}
     </FloatingPortal>
   );
-}) as unknown as ContextMenuComponent;
+};
 
 ContextMenu.Item = MenuItem;
-ContextMenu.Group = ContextMenuGroup;
+ContextMenu.Group = Group;

package/src/components/actions/Dropdown/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, HTMLProps, Ref } from 'react';
+import { forwardRef, HTMLProps, Ref, JSX } from 'react';
 import {
   useMergeRefs,
   FloatingPortal,
@@ -24,7 +24,10 @@ type DropdownMenuComponent = {
   Group: typeof DropdownMenuGroup;
 };
 
-export const DropdownMenu = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ children, ...props }, propRef) => {
+export const DropdownMenu = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(function DropdownMenu(
+  { children, ...props },
+  propRef,
+) {
   const { context, floatingStyles, elementsRef, labelsRef, getFloatingProps, descriptionId, labelId } =
     useDropdownContext();
 

package/src/components/actions/Dropdown/DropdownTrigger.tsx

@@ -19,71 +19,69 @@ export type DropdownTriggerProps = HTMLProps<HTMLElement> &
     tooltipOptions?: TooltipOptions & { content: ReactNode };
   }>;
 
-export const DropdownTrigger = forwardRef<HTMLElement, DropdownTriggerProps>(
-  (
-    {
-      children,
-      asChild = false,
-      tooltipOptions = {
-        initialOpen: false,
-        placement: 'top', // because dropdown will be below by default
-      },
-      ...props
+export const DropdownTrigger = forwardRef<HTMLElement, DropdownTriggerProps>(function DropdownTrigger(
+  {
+    children,
+    asChild = false,
+    tooltipOptions = {
+      initialOpen: false,
+      placement: 'top', // because dropdown will be below by default
     },
-    propRef
-  ) => {
-    const context = useDropdownContext();
-    const childrenRef = (children as any).ref;
-    const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    ...props
+  },
+  propRef,
+) {
+  const context = useDropdownContext();
+  const childrenRef = (children as any).ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
-    const [unControlledOpen, setUncontrolledOpen] = useState<boolean>(tooltipOptions?.initialOpen ?? false);
+  const [unControlledOpen, setUncontrolledOpen] = useState<boolean>(tooltipOptions?.initialOpen ?? false);
 
-    const open = tooltipOptions.open ?? unControlledOpen;
-    const setOpen = tooltipOptions.onOpenChange ?? setUncontrolledOpen;
+  const open = tooltipOptions.open ?? unControlledOpen;
+  const setOpen = tooltipOptions.onOpenChange ?? setUncontrolledOpen;
 
-    let inner: ReactElement;
+  let inner: ReactElement;
 
-    // `asChild` allows the user to pass any element as the anchor
-    if (asChild && isValidElement(children)) {
-      inner = cloneElement(
-        children,
-        context.getReferenceProps({
-          ref,
+  // `asChild` allows the user to pass any element as the anchor
+  if (asChild && isValidElement(children)) {
+    inner = cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        onClick(event) {
+          event.stopPropagation();
+        },
+      }),
+    );
+  } else {
+    inner = (
+      <button
+        ref={ref}
+        type="button"
+        // The user can style the trigger based on the state
+        {...context.getReferenceProps({
           ...props,
-          ...children.props,
+          ref,
           onClick(event) {
             event.stopPropagation();
           },
-        })
-      );
-    } else {
-      inner = (
-        <button
-          ref={ref}
-          type="button"
-          // The user can style the trigger based on the state
-          {...context.getReferenceProps({
-            ...props,
-            ref,
-            onClick(event) {
-              event.stopPropagation();
-            },
-          })}
-        >
-          {children}
-        </button>
-      );
-    }
-
-    if (tooltipOptions && tooltipOptions.content) {
-      return (
-        <Tooltip open={open} onOpenChange={setOpen} placement={tooltipOptions.placement}>
-          <Tooltip.Trigger>{inner}</Tooltip.Trigger>
-          <Tooltip.Content>{tooltipOptions.content}</Tooltip.Content>
-        </Tooltip>
-      );
-    }
+        })}
+      >
+        {children}
+      </button>
+    );
+  }
 
-    return inner;
+  if (tooltipOptions && tooltipOptions.content) {
+    return (
+      <Tooltip open={open} onOpenChange={setOpen} placement={tooltipOptions.placement}>
+        <Tooltip.Trigger>{inner}</Tooltip.Trigger>
+        <Tooltip.Content>{tooltipOptions.content}</Tooltip.Content>
+      </Tooltip>
+    );
   }
-);
+
+  return inner;
+});

package/src/components/actions/Dropdown/useDropdown.tsx

@@ -77,6 +77,6 @@ export function useDropdown({
       labelsRef,
       elementsRef,
     }),
-    [open, setOpen, data, context, labelId, descriptionId, interactions]
+    [open, setOpen, data, context, labelId, descriptionId, interactions],
   );
 }

package/src/components/actions/IconButton/index.tsx

@@ -28,13 +28,14 @@ const getSize = (size: Size) => {
   }
 };
 
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, color = 'primary', size = 'medium', disabled, onClick = () => {}, ariaLabel, badge }, ref) => {
-    return (
-      <Default type="button" color={color} onClick={onClick} ref={ref} disabled={disabled} aria-label={ariaLabel}>
-        {cloneElement(icon, { size: getSize(size) })}
-        {badge && <div>{badge}</div>}
-      </Default>
-    );
-  }
-);
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { icon, color = 'primary', size = 'medium', disabled, onClick = () => {}, ariaLabel, badge },
+  ref,
+) {
+  return (
+    <Default type="button" color={color} onClick={onClick} ref={ref} disabled={disabled} aria-label={ariaLabel}>
+      {cloneElement(icon, { size: getSize(size) })}
+      {badge && <div>{badge}</div>}
+    </Default>
+  );
+});

package/src/components/actions/IconButton/style.ts

@@ -5,13 +5,16 @@ export const Default = styled.button<{ color: Color }>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 150ms ease, fill 150ms ease, stroke 150ms ease;
+  transition:
+    background-color 150ms ease,
+    fill 150ms ease,
+    stroke 150ms ease;
   border-radius: ${({ theme }) => theme.borderRadius.small};
   border: 0.01rem solid transparent;
   background-clip: padding-box;
   cursor: pointer;
   background-color: transparent;
-  padding: ${({ theme }) => theme.spacing['0_5']};
+  padding: ${({ theme }) => theme.spacing['0_25']};
   line-height: 1.6rem;
 
   &:hover {

package/src/components/actions/ToggleButton/ToggleButton.tsx

@@ -13,36 +13,34 @@ export interface ToggleButtonProps {
   tooltip?: string;
 }
 
-export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
-  (
-    { selected = false, disabled = false, onClick = undefined, value, parentClickEvent = () => {}, children, tooltip },
-    ref
-  ) => {
-    const handleOnClick = () => {
-      if (disabled) return;
-      parentClickEvent(value);
-      if (onClick) {
-        onClick();
-      }
-    };
-
-    if (tooltip) {
-      return (
-        <Tooltip>
-          <Tooltip.Trigger asChild>
-            <Item isSelected={selected} isDisabled={disabled} onClick={handleOnClick} ref={ref}>
-              {children}
-            </Item>
-          </Tooltip.Trigger>
-          <Tooltip.Content>{tooltip}</Tooltip.Content>
-        </Tooltip>
-      );
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(
+  { selected = false, disabled = false, onClick = undefined, value, parentClickEvent = () => {}, children, tooltip },
+  ref,
+) {
+  const handleOnClick = () => {
+    if (disabled) return;
+    parentClickEvent(value);
+    if (onClick) {
+      onClick();
     }
+  };
 
+  if (tooltip) {
     return (
-      <Item isSelected={selected} isDisabled={disabled} onClick={handleOnClick} ref={ref}>
-        {children}
-      </Item>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <Item isSelected={selected} isDisabled={disabled} onClick={handleOnClick} ref={ref}>
+            {children}
+          </Item>
+        </Tooltip.Trigger>
+        <Tooltip.Content>{tooltip}</Tooltip.Content>
+      </Tooltip>
     );
   }
-);
+
+  return (
+    <Item isSelected={selected} isDisabled={disabled} onClick={handleOnClick} ref={ref}>
+      {children}
+    </Item>
+  );
+});

package/src/components/actions/ToggleButton/ToggleButtonGroup.tsx

@@ -40,13 +40,11 @@ export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
   fullWidth = false,
 }) => {
   const [selected, setSelected] = useState<string | Map<string, boolean>>(
-    exclusive ? defaultValue || '' : handleDefaultValueNonExclusive()
+    exclusive ? defaultValue || '' : handleDefaultValueNonExclusive(),
   );
 
   function handleDefaultValueNonExclusive() {
     const m = new Map<string, boolean>();
-    selected as Map<string, boolean>;
-
     Children.forEach(children, (child) => {
       if (isValidElement(child)) {
         m.set(child.props.value, false);
@@ -66,12 +64,9 @@ export const ToggleButtonGroup: FC<ToggleButtonGroupProps> & SubComponents = ({
         return setSelected('');
       }
       return setSelected(value);
-    } else {
-      // handle case that each button has a seperate state
-      setSelected(
-        new Map((selected as Map<string, boolean>).set(value, !(selected as Map<string, boolean>).get(value)))
-      );
     }
+    // handle case that each button has a seperate state
+    setSelected(new Map((selected as Map<string, boolean>).set(value, !(selected as Map<string, boolean>).get(value))));
   };
 
   useEffect(() => {

package/src/components/actions/ToggleButton/style.ts

@@ -27,12 +27,11 @@ export const Container = styled.div<{
             border-top-left-radius: ${theme.borderRadius.small};
             border-bottom-left-radius: ${theme.borderRadius.small};
           `;
-        } else {
-          return `
+        }
+        return `
         border-top-left-radius: ${theme.borderRadius.small};
         border-top-right-radius: ${theme.borderRadius.small};
           `;
-        }
       }}
     }
 
@@ -44,13 +43,12 @@ export const Container = styled.div<{
             border-bottom-right-radius: ${theme.borderRadius.small};
             border-right: 0.1rem solid ${theme.colors.backgroundAccent};
           `;
-        } else {
-          return `
+        }
+        return `
             border-bottom-right-radius: ${theme.borderRadius.small};
             border-bottom-left-radius: ${theme.borderRadius.small};
             border-bottom: 0.1rem solid ${theme.colors.backgroundAccent};
       `;
-        }
       }}
     }
   }
@@ -67,7 +65,7 @@ export const Item = styled.button<{ isSelected: boolean; isDisabled: boolean }>`
   font-weight: 400;
   border-left: none;
   background-color: ${({ theme, isSelected, isDisabled }) =>
-    isSelected ? theme.colors.primary : isDisabled ? theme.colors.disabled : theme.colors.background};
+    isDisabled ? theme.colors.disabled : isSelected ? theme.colors.primary : theme.colors.background};
   cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
 
   svg {