@takaro/lib-components 0.0.1 → 0.0.4

package/src/components/inputs/selects/SelectQueryField/Generic/index.tsx

@@ -42,7 +42,7 @@ interface SharedSelectQueryFieldProps {
   placeholder?: string;
   /// Debounce time in milliseconds (when clientside data it should be 0)
   debounce?: number;
-  /// Triggered whenever the input value changes, debounced by 0.5 seconds.
+  /// Triggered whenever the input value changes.
   /// This is used to trigger the API call to get the new options
   handleInputValueChange: (value: string) => void;
   /// render inPortal
@@ -84,217 +84,220 @@ export interface InputValue {
   shouldUpdate: boolean;
 }
 
-export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelectQueryFieldProps>((props, ref) => {
-  const {
-    onBlur = () => {},
-    onFocus = () => {},
-    onChange,
-    name,
-    disabled,
-    value,
-    id,
-    placeholder = 'Search field',
-    hasDescription,
-    inPortal = false,
-    hasError,
-    children,
-    readOnly,
-    render,
-    multiple = false,
-    canClear = false,
-    debounce = 250,
-    isLoadingData: isLoading = false,
-    handleInputValueChange,
-  } = defaultsApplier(props);
+export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelectQueryFieldProps>(
+  function GenericSelectQueryField(props, ref) {
+    const {
+      onBlur = () => {},
+      onFocus = () => {},
+      onChange,
+      name,
+      disabled,
+      value,
+      id,
+      placeholder = 'Search field',
+      hasDescription,
+      inPortal = false,
+      hasError,
+      children,
+      readOnly,
+      render,
+      multiple = false,
+      canClear = false,
+      debounce = 250,
+      isLoadingData: isLoading = false,
+      handleInputValueChange,
+    } = defaultsApplier(props);
 
-  const [open, setOpen] = useState<boolean>(false);
-  const [inputValue, setInputValue] = useState<InputValue>({ value: '', shouldUpdate: false, label: '' });
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const [selectedItems, setSelectedItems] = useState<SelectItem[]>([]);
+    const [open, setOpen] = useState<boolean>(false);
+    const [inputValue, setInputValue] = useState<InputValue>({ value: '', shouldUpdate: false, label: '' });
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const [selectedItems, setSelectedItems] = useState<SelectItem[]>([]);
 
-  const debouncedValue = useDebounce(inputValue.value, debounce);
-  const listItemsRef = useRef<Array<HTMLLIElement | null>>([]);
+    const debouncedValue = useDebounce(inputValue.value, debounce);
+    const listItemsRef = useRef<Array<HTMLLIElement | null>>([]);
 
-  useEffect(() => {
-    if (debouncedValue && inputValue.shouldUpdate) handleInputValueChange(debouncedValue);
-  }, [debouncedValue]);
+    useEffect(() => {
+      if ((inputValue.shouldUpdate && debouncedValue) || (inputValue && debouncedValue === ''))
+        handleInputValueChange(debouncedValue);
+    }, [debouncedValue]);
 
-  const { refs, strategy, x, y, context } = useFloating<HTMLInputElement>({
-    whileElementsMounted: autoUpdate,
-    open,
-    onOpenChange: readOnly || disabled ? () => {} : setOpen,
-    middleware: [
-      offset(5),
-      size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            maxHeight: '255px',
-          });
-        },
-        padding: 10,
-      }),
-    ],
-  });
+    const { refs, strategy, x, y, context } = useFloating<HTMLInputElement>({
+      whileElementsMounted: autoUpdate,
+      open,
+      onOpenChange: readOnly || disabled ? () => {} : setOpen,
+      middleware: [
+        offset(5),
+        size({
+          apply({ rects, elements }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`,
+              maxHeight: '255px',
+            });
+          },
+          padding: 10,
+        }),
+      ],
+    });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-    useClick(context),
-    useRole(context, { role: 'listbox' }),
-    useDismiss(context),
-  ]);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+      useClick(context),
+      useRole(context, { role: 'listbox' }),
+      useDismiss(context),
+    ]);
 
-  function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const value = event.target.value;
-    setInputValue({ value, shouldUpdate: true, label: value });
-    if (value) {
-      setActiveIndex(0);
+    function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+      const value = event.target.value;
+      setInputValue({ value, shouldUpdate: true, label: value });
+      if (value) {
+        setActiveIndex(0);
+      }
     }
-  }
 
-  const handleClear = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setSelectedItems([]);
+    const handleClear = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setSelectedItems([]);
 
-    // the undefined is an expection
-    if (onChange) onChange(multiple ? ([] as string[]) : (undefined as any));
-  };
+      // the undefined is an expection
+      if (onChange) onChange(multiple ? ([] as string[]) : (undefined as any));
+    };
 
-  /* This handles the case where the value is changed externally (e.g. from a parent component) */
-  /* onChange propagates the value to the parent component, but since the value prop is not a required prop, the parent might not reflect the change
-   * which ends up not running this useEffect. Meaning we still need to update the selectedIndex when clicked on an option.
-   */
-  useEffect(() => {
-    // Function to create an item with a value and label
-    const createItem = (v: string) => ({ value: v, label: getLabelFromChildren(children, v) as unknown as string });
+    /* This handles the case where the value is changed externally (e.g. from a parent component) */
+    /* onChange propagates the value to the parent component, but since the value prop is not a required prop, the parent might not reflect the change
+     * which ends up not running this useEffect. Meaning we still need to update the selectedIndex when clicked on an option.
+     */
+    useEffect(() => {
+      // Function to create an item with a value and label
+      const createItem = (v: string) => ({ value: v, label: getLabelFromChildren(children, v) as unknown as string });
 
-    if (Array.isArray(value)) {
-      const items = value.map(createItem);
-      setSelectedItems(items);
-    } else if (typeof value === 'string' && value !== '') {
-      setSelectedItems([createItem(value)]);
-    }
-  }, [value, children]);
+      if (Array.isArray(value)) {
+        const items = value.map(createItem);
+        setSelectedItems(items);
+      } else if (typeof value === 'string' && value !== '') {
+        setSelectedItems([createItem(value)]);
+      }
+    }, [value, children]);
+
+    const renderSelect = () => {
+      const hasOptions = options && Children.count(options[0].props.children) > 1;
+
+      // initialFocus=-1 is used to prevent the first item from being focused when the list opens
+      return (
+        <FloatingFocusManager context={context} visuallyHiddenDismiss initialFocus={-1}>
+          <SelectContainer
+            {...getFloatingProps({
+              ref: refs.setFloating,
+              style: {
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                overflow: 'auto',
+                borderBottom: '10px solid transparent',
+              },
+            })}
+          >
+            <GenericTextField
+              id={`${name}-input`}
+              name={`${name}-input`}
+              hasDescription={false}
+              icon={<SearchIcon />}
+              hasError={hasError}
+              value={inputValue.value}
+              onChange={onInputChange}
+              placeholder={placeholder}
+              ref={ref}
+            />
+            {/* it will always contain 1 because of the group label */}
+            {isLoading && (
+              <FeedBackContainer>
+                <Spinner size="small" />
+                <span style={{ marginLeft: '10px' }}>loading results</span>
+              </FeedBackContainer>
+            )}
+            {hasOptions && options}
+            {/* Basically first interaction */}
+            {!hasOptions && inputValue.value === '' && <FeedBackContainer>Start typing to search</FeedBackContainer>}
+            {/* When there is no result */}
+            {!hasOptions && !isLoading && inputValue.value !== '' && (
+              <FeedBackContainer>No results found</FeedBackContainer>
+            )}
+          </SelectContainer>
+        </FloatingFocusManager>
+      );
+    };
 
-  const renderSelect = () => {
-    const hasOptions = options && Children.count(options[0].props.children) > 1;
+    const options = useMemo(() => {
+      return [
+        ...(Children.map(
+          children,
+          (child) =>
+            isValidElement(child) && (
+              <ul key={child.props.label} role="group" aria-labelledby={`select-${child.props.label}`}>
+                {child.props.label && (
+                  <GroupLabel role="presentation" id={`select-${child.props.label}`} aria-hidden="true">
+                    {child.props.label}
+                  </GroupLabel>
+                )}
+                {Children.map(child.props.children, (option) => {
+                  return cloneElement(option, {
+                    onChange: onChange,
+                  });
+                })}
+              </ul>
+            ),
+        ) ?? []),
+      ];
+    }, [children]);
 
-    // initialFocus=-1 is used to prevent the first item from being focused when the list opens
     return (
-      <FloatingFocusManager context={context} visuallyHiddenDismiss initialFocus={-1}>
-        <SelectContainer
-          {...getFloatingProps({
-            ref: refs.setFloating,
-            style: {
-              position: strategy,
-              top: y ?? 0,
-              left: x ?? 0,
-              overflow: 'auto',
-              borderBottom: '10px solid transparent',
-            },
-          })}
+      <SelectContext.Provider
+        value={{
+          listRef: listItemsRef,
+          setOpen,
+          getItemProps,
+          setActiveIndex,
+          activeIndex,
+          dataRef: context.dataRef,
+          multiple,
+          selectedItems,
+          setSelectedItems,
+          name,
+        }}
+      >
+        <SelectButton
+          id={id}
+          ref={refs.setReference}
+          disabled={disabled}
+          readOnly={readOnly}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          isOpen={open}
+          tabIndex={disabled ? -1 : 0}
+          hasError={hasError}
+          aria-describedby={setAriaDescribedBy(name, hasDescription)}
+          {...getReferenceProps()}
         >
-          <GenericTextField
-            id={`${name}-input`}
-            name={`${name}-input`}
-            hasDescription={false}
-            icon={<SearchIcon />}
-            hasError={hasError}
-            value={inputValue.value}
-            onChange={onInputChange}
-            placeholder={placeholder}
-            ref={ref}
-          />
-          {/* it will always contain 1 because of the group label */}
-          {isLoading && (
-            <FeedBackContainer>
-              <Spinner size="small" />
-              <span style={{ marginLeft: '10px' }}>loading results</span>
-            </FeedBackContainer>
+          {render ? (
+            render(selectedItems)
+          ) : (
+            <div>{selectedItems.length === 0 ? 'Select' : selectedItems.map((item) => item.label).join(', ')}</div>
           )}
-          {hasOptions && options}
-          {/* Basically first interaction */}
-          {!hasOptions && inputValue.value === '' && <FeedBackContainer>Start typing to search</FeedBackContainer>}
-          {/* When there is no result */}
-          {!hasOptions && !isLoading && inputValue.value !== '' && (
-            <FeedBackContainer>No results found</FeedBackContainer>
+
+          {!readOnly && canClear && selectedItems.length > 0 && !open ? (
+            <IconButton size="tiny" icon={<ClearIcon />} ariaLabel="clear" onClick={(e) => handleClear(e)} />
+          ) : (
+            <StyledArrowIcon size={16} />
           )}
-        </SelectContainer>
-      </FloatingFocusManager>
+        </SelectButton>
+        {open &&
+          (!inPortal ? (
+            <StyledFloatingOverlay lockScroll style={{ zIndex: 1000 }}>
+              {renderSelect()}
+            </StyledFloatingOverlay>
+          ) : (
+            <FloatingPortal>{renderSelect()}</FloatingPortal>
+          ))}
+      </SelectContext.Provider>
     );
-  };
-
-  const options = useMemo(() => {
-    return [
-      ...(Children.map(
-        children,
-        (child) =>
-          isValidElement(child) && (
-            <ul key={child.props.label} role="group" aria-labelledby={`select-${child.props.label}`}>
-              {child.props.label && (
-                <GroupLabel role="presentation" id={`select-${child.props.label}`} aria-hidden="true">
-                  {child.props.label}
-                </GroupLabel>
-              )}
-              {Children.map(child.props.children, (option) => {
-                return cloneElement(option, {
-                  onChange: onChange,
-                });
-              })}
-            </ul>
-          )
-      ) ?? []),
-    ];
-  }, [children]);
-
-  return (
-    <SelectContext.Provider
-      value={{
-        listRef: listItemsRef,
-        setOpen,
-        getItemProps,
-        setActiveIndex,
-        activeIndex,
-        dataRef: context.dataRef,
-        multiple,
-        selectedItems,
-        setSelectedItems,
-        name,
-      }}
-    >
-      <SelectButton
-        id={id}
-        ref={refs.setReference}
-        disabled={disabled}
-        readOnly={readOnly}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        isOpen={open}
-        tabIndex={disabled ? -1 : 0}
-        hasError={hasError}
-        aria-describedby={setAriaDescribedBy(name, hasDescription)}
-        {...getReferenceProps()}
-      >
-        {render ? (
-          render(selectedItems)
-        ) : (
-          <div>{selectedItems.length === 0 ? 'Select' : selectedItems.map((item) => item.label).join(', ')}</div>
-        )}
-
-        {!readOnly && canClear && selectedItems.length > 0 && !open ? (
-          <IconButton size="tiny" icon={<ClearIcon />} ariaLabel="clear" onClick={(e) => handleClear(e)} />
-        ) : (
-          <StyledArrowIcon size={16} />
-        )}
-      </SelectButton>
-      {open &&
-        (!inPortal ? (
-          <StyledFloatingOverlay lockScroll style={{ zIndex: 1000 }}>
-            {renderSelect()}
-          </StyledFloatingOverlay>
-        ) : (
-          <FloatingPortal>{renderSelect()}</FloatingPortal>
-        ))}
-    </SelectContext.Provider>
-  );
-});
+  },
+);

package/src/components/inputs/selects/SelectQueryField/SelectQueryField.stories.tsx

@@ -42,7 +42,7 @@ export const ServerSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
 
     setTimeout(() => {
       const filteredOptions = films.filter((film) =>
-        film.name.toLowerCase().trim().includes(debouncedValue.toLowerCase())
+        film.name.toLowerCase().trim().includes(debouncedValue.toLowerCase()),
       );
       setOptions(filteredOptions);
       setLoading(false);

package/src/components/inputs/selects/SubComponents/Option.tsx

@@ -26,10 +26,9 @@ function toggleSelectedItem(selectedValues: SelectItem[], itemToToggle: SelectIt
   if (existingIndex > -1) {
     // If it exists, remove it from the array
     return selectedValues.filter((_, index) => index !== existingIndex);
-  } else {
-    // If it doesn't exist, add it to the array
-    return [...selectedValues, itemToToggle];
   }
+  // If it doesn't exist, add it to the array
+  return [...selectedValues, itemToToggle];
 }
 
 function hasSelectedItem(selectedItems: SelectItem[], itemToCheck: SelectItem) {
@@ -84,6 +83,7 @@ export const Option: FC<OptionProps> = ({ children, index = 0, value, onChange,
       tabIndex={activeIndex === index ? 0 : 1}
       isMultiSelect={multiple}
       isActive={activeIndex === index}
+      disabled={disabled}
       aria-disabled={disabled}
       isGrouped={false}
       aria-selected={activeIndex === index}

package/src/components/inputs/selects/SubComponents/OptionGroup.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, JSX } from 'react';
 
 export interface OptionGroupProps extends PropsWithChildren {
   label?: string;

package/src/components/inputs/selects/SubComponents/style.ts

@@ -1,6 +1,11 @@
 import { styled } from '../../../../styled';
 
-export const OptionContainer = styled.li<{ isActive: boolean; isMultiSelect: boolean; isGrouped: boolean }>`
+export const OptionContainer = styled.li<{
+  isActive: boolean;
+  isMultiSelect: boolean;
+  isGrouped: boolean;
+  disabled: boolean;
+}>`
   padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['1']}`};
   min-height: ${({ theme }) => theme.spacing[4]};
   cursor: default;
@@ -15,12 +20,13 @@ export const OptionContainer = styled.li<{ isActive: boolean; isMultiSelect: boo
   scroll-margin: ${({ theme }) => theme.spacing['0_75']};
   padding-left: ${({ isGrouped, theme }) => (isGrouped ? `calc(1.7 * ${theme.spacing['2']})` : theme.spacing['1'])}};
 
+
   &:focus {
     border-color: ${({ theme }) => theme.colors.primary};
   }
 
   &:hover {
-    border-color: ${({ theme }) => theme.colors.backgroundAccent};
+    border-color: ${({ theme, disabled }) => (disabled ? theme.colors.backgroundAlt : theme.colors.backgroundAccent)};
     span {
       color: white;
     }
@@ -32,8 +38,16 @@ export const OptionContainer = styled.li<{ isActive: boolean; isMultiSelect: boo
     gap: ${({ theme }) => theme.spacing[1]};
 
     span {
-      cursor: pointer;
-      color: ${({ theme, isActive }) => (isActive ? theme.colors.white : theme.colors.text)};
+      cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+      color: ${({ theme, isActive, disabled }) => {
+        if (disabled) {
+          return theme.colors.backgroundAccent;
+        }
+        if (isActive) {
+          return theme.colors.white;
+        }
+        return theme.colors.text;
+      }};
     }
   }
 `;

package/src/components/inputs/selects/index.tsx

@@ -41,7 +41,10 @@ export const getLabelFromChildren = (children: ReactNode, value: string) => {
       return matchedOption.props.label;
     }
   }
-  throw new Error(
-    `No label found for value ${value}. This occurs when a value is passed through the defaultValue prop of useForm, but the value is not present in the options.`
+
+  // eslint-disable-next-line no-console
+  console.error(
+    `No label found for value ${value}. This occurs when a value is passed through the defaultValue prop of useForm, but the value is not present in the options.`,
   );
+  return undefined;
 };

package/src/components/inputs/selects/sharedStyle.ts

@@ -4,6 +4,7 @@ import { AiOutlineDown as ArrowIcon } from 'react-icons/ai';
 
 export const Container = styled.div`
   position: relative;
+  width: 100%;
 `;
 
 export const SelectContainer = styled.div`

package/src/components/navigation/HorizontalNav/index.tsx

@@ -1,40 +1,13 @@
-import { FC } from 'react';
-import { Link, LinkProps } from '@tanstack/react-router';
-import { Block, NavBar, Underline } from './style';
+import { FC, ReactNode } from 'react';
+import { NavBar } from './style';
 
 export type HorizontalNavVariant = 'underline' | 'block';
 
-export type HorizontalNavLink = Partial<LinkProps> & {
-  text: string;
-  to: string;
-  params?: Record<string, string>;
-};
-
 export interface HorizontalNavProps {
-  links: HorizontalNavLink[];
+  children: ReactNode;
   variant: HorizontalNavVariant;
 }
 
-export const HorizontalNav: FC<HorizontalNavProps> = ({ links, variant }) => {
-  return (
-    <NavBar variant={variant}>
-      {links.map(({ text, ...rest }) => {
-        return (
-          <>
-            {/*eslint-disable-next-line @typescript-eslint/ban-ts-comment*/}
-            {/*@ts-ignore reusable link*/}
-            <Link key={`${rest.to}-${text}`} {...rest}>
-              {({ isActive }) => (
-                <>
-                  {isActive && variant === 'block' && <Block layoutId="block" />}
-                  {isActive && variant === 'underline' && <Underline layoutId="underline" />}
-                  <span>{text}</span>
-                </>
-              )}
-            </Link>
-          </>
-        );
-      })}
-    </NavBar>
-  );
+export const HorizontalNav: FC<HorizontalNavProps> = ({ children, variant }) => {
+  return <NavBar variant={variant}>{children}</NavBar>;
 };

package/src/components/navigation/HorizontalNav/style.ts

@@ -1,5 +1,4 @@
 import { styled } from '../../../styled';
-import { motion } from 'framer-motion';
 import { HorizontalNavVariant } from '.';
 
 export const NavBar = styled.nav<{ variant: HorizontalNavVariant }>`
@@ -53,31 +52,17 @@ export const NavBar = styled.nav<{ variant: HorizontalNavVariant }>`
 
     &.active {
       color: ${({ theme }) => theme.colors.text};
+
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -8px;
+        left: 0;
+        right: 0;
+        height: 1px;
+        width: 100%;
+        background-color: ${({ theme }) => theme.colors.primary};
+      }
     }
   }
 `;
-
-export const Underline = styled(motion.div)`
-  position: absolute;
-  bottom: -${({ theme }) => theme.spacing['0_75']};
-  left: 0px;
-  display: block;
-  height: 2px;
-  background-color: ${({ theme }) => theme.colors.primary};
-  content: '';
-  width: 100%;
-`;
-
-export const Block = styled(motion.div)`
-  position: absolute;
-  top: 0;
-  left: 0px;
-  z-index: 1;
-  display: block;
-  height: 100%;
-  border: 1px solid ${({ theme }) => theme.colors.primary};
-  background-color: ${({ theme }) => theme.colors.primaryShade};
-  border-radius: ${({ theme }) => theme.borderRadius.medium};
-  content: '';
-  width: 100%;
-`;

package/src/components/navigation/IconNav/index.tsx

@@ -1,4 +1,4 @@
-import { FC, cloneElement } from 'react';
+import { JSX, FC, cloneElement } from 'react';
 import { styled } from '../../../styled';
 import { Link, LinkProps } from '@tanstack/react-router';
 import { Tooltip } from '../../../components';

package/src/components/navigation/Steppers/SlimStepper/index.tsx

@@ -26,7 +26,7 @@ const StepperSteps: FC<PropsWithChildren<void>> = ({ children }) => {
       {children &&
         Children.map(
           children,
-          (child) => steps.length !== 0 && isValidElement(child) && child.props.id === steps[currentStep].id && child
+          (child) => steps.length !== 0 && isValidElement(child) && child.props.id === steps[currentStep].id && child,
         )}
     </div>
   );

package/src/components/navigation/Steppers/SlimStepper/style.ts

@@ -28,9 +28,8 @@ export const StepperHeaderItem = styled.div<{
   ${({ theme, stepState }) => {
     if (stepState === StepStates.COMPLETE) {
       return `border-right: .6rem solid ${lighten(0.15, theme.colors.primary)}`;
-    } else {
-      return 'border-right: .6rem solid transparent';
     }
+    return 'border-right: .6rem solid transparent';
   }};
 
   cursor: ${({ stepState, canStepBack }) => (stepState === StepStates.COMPLETE && canStepBack ? 'pointer' : 'inherit')};

package/src/components/navigation/Steppers/Stepper/index.tsx

@@ -27,7 +27,7 @@ const StepperSteps: FC<PropsWithChildren<void>> = ({ children }) => {
       {children &&
         Children.map(
           children,
-          (child) => steps.length !== 0 && isValidElement(child) && child.props.id === steps[currentStep].id && child
+          (child) => steps.length !== 0 && isValidElement(child) && child.props.id === steps[currentStep].id && child,
         )}
     </div>
   );