@takaro/lib-components 0.0.13 → 0.0.15

package/src/components/inputs/Date/DatePicker/style.ts

@@ -18,10 +18,9 @@ export const ResultContainer = styled.div<{ readOnly: boolean; hasError: boolean
   z-index: ${({ theme }) => theme.zIndex.dropdown};
   cursor: ${({ readOnly }) => (readOnly ? 'not-allowed' : 'pointer')};
   user-select: none;
-
-  span {
-    color: ${({ theme }) => theme.colors.primary};
-  }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 export const ContentContainer = styled.div`

package/src/components/inputs/index.ts

@@ -1,3 +1,10 @@
+export interface PaginationProps {
+  isFetching: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void;
+}
+
 export { ControlledCheckBox as CheckBox } from './CheckBox';
 export type { ControlledCheckBoxProps as CheckBoxProps } from './CheckBox';
 export { GenericCheckBox as UnControlledCheckBox } from './CheckBox/Generic';

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

@@ -29,6 +29,11 @@ export const ControlledSelectQueryField: FC<ControlledSelectQueryFieldProps> & S
     inPortal,
     debounce,
     isLoadingData,
+    hasNextPage,
+    fetchNextPage,
+    isFetching,
+    isFetchingNextPage,
+    optionCount,
     handleInputValueChange,
   } = defaultsApplier(props);
 
@@ -85,7 +90,12 @@ export const ControlledSelectQueryField: FC<ControlledSelectQueryFieldProps> & S
           onFocus={handleOnFocus}
           value={field.value}
           debounce={debounce}
+          optionCount={optionCount}
           handleInputValueChange={handleInputValueChange}
+          isFetching={isFetching}
+          isFetchingNextPage={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
         >
           {children}
         </GenericSelectQueryField>

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

@@ -28,14 +28,15 @@ import { useDebounce } from '../../../../../hooks';
 import { setAriaDescribedBy } from '../../../layout';
 import { FeedBackContainer } from '../style';
 import { SelectItem, SelectContext, getLabelFromChildren } from '../../';
+import { PaginationProps } from '../../../';
 
 /* The SearchField depends on a few things of <Select/> */
 import { GroupLabel } from '../../SelectField/style';
 import { SelectContainer, SelectButton, StyledArrowIcon, StyledFloatingOverlay } from '../../sharedStyle';
-import { IconButton, Spinner } from '../../../../../components';
+import { IconButton, InfiniteScroll, Spinner } from '../../../../../components';
 import { GenericTextField } from '../../../TextField/Generic';
 
-interface SharedSelectQueryFieldProps {
+interface SharedSelectQueryFieldProps extends PaginationProps {
   // Enables loading data feedback for user
   isLoadingData?: boolean;
   /// The placeholder text to show when the input is empty
@@ -44,7 +45,7 @@ interface SharedSelectQueryFieldProps {
   debounce?: number;
   /// Triggered whenever the input value changes.
   /// This is used to trigger the API call to get the new options
-  handleInputValueChange: (value: string) => void;
+  handleInputValueChange?: (value: string) => void;
   /// render inPortal
   inPortal?: boolean;
 
@@ -53,6 +54,9 @@ interface SharedSelectQueryFieldProps {
 
   /// The selected items shown in the select field
   render?: (selectedItems: SelectItem[]) => React.ReactNode;
+
+  /// The total options that will be visible when fully loaded
+  optionCount?: number;
 }
 
 interface SingleSelectQueryFieldProps extends SharedSelectQueryFieldProps {
@@ -100,12 +104,17 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
       hasError,
       children,
       readOnly,
+      isFetchingNextPage,
+      isFetching,
+      fetchNextPage,
+      hasNextPage,
       render,
       multiple = false,
       canClear = false,
       debounce = 250,
       isLoadingData: isLoading = false,
       handleInputValueChange,
+      optionCount,
     } = defaultsApplier(props);
 
     const [open, setOpen] = useState<boolean>(false);
@@ -117,8 +126,10 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
     const listItemsRef = useRef<Array<HTMLLIElement | null>>([]);
 
     useEffect(() => {
-      if ((inputValue.shouldUpdate && debouncedValue) || (inputValue && debouncedValue === ''))
-        handleInputValueChange(debouncedValue);
+      if (handleInputValueChange) {
+        if ((inputValue.shouldUpdate && debouncedValue) || (inputValue && debouncedValue === ''))
+          handleInputValueChange(debouncedValue);
+      }
     }, [debouncedValue]);
 
     const { refs, strategy, x, y, context } = useFloating<HTMLInputElement>({
@@ -196,17 +207,21 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
               },
             })}
           >
-            <GenericTextField
-              id={`${name}-input`}
-              name={`${name}-input`}
-              hasDescription={false}
-              icon={<SearchIcon />}
-              hasError={hasError}
-              value={inputValue.value}
-              onChange={onInputChange}
-              placeholder={placeholder}
-              ref={ref}
-            />
+            {' '}
+            {handleInputValueChange && (
+              <GenericTextField
+                id={`${name}-input`}
+                name={`${name}-input`}
+                hasDescription={false}
+                icon={<SearchIcon />}
+                suffix={isLoading ? 'Loading' : optionCount !== undefined ? `Result: ${optionCount}` : undefined}
+                hasError={hasError}
+                value={inputValue.value}
+                onChange={onInputChange}
+                placeholder={placeholder}
+                ref={ref}
+              />
+            )}
             {/* it will always contain 1 because of the group label */}
             {isLoading && (
               <FeedBackContainer>
@@ -215,6 +230,14 @@ export const GenericSelectQueryField = forwardRef<HTMLInputElement, GenericSelec
               </FeedBackContainer>
             )}
             {hasOptions && options}
+            {hasOptions && !isLoading && (
+              <InfiniteScroll
+                isFetching={isFetching}
+                hasNextPage={hasNextPage}
+                fetchNextPage={fetchNextPage}
+                isFetchingNextPage={isFetchingNextPage}
+              />
+            )}
             {/* Basically first interaction */}
             {!hasOptions && inputValue.value === '' && <FeedBackContainer>Start typing to search</FeedBackContainer>}
             {/* When there is no result */}

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

@@ -69,6 +69,11 @@ export const ServerSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
           handleInputValueChange={mockAPICall}
           isLoadingData={loading}
           required={false}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
           name="film"
         >
           {/* In this case the label is the same as the value but ofcourse that can differ*/}
@@ -124,6 +129,11 @@ export const ClientSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
           handleInputValueChange={handleInputChange}
           required={false}
           debounce={0}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
           name="film"
         >
           {/* In this case the label is the same as the value but ofcourse that can differ*/}
@@ -186,6 +196,11 @@ export const ClientSideMultiSelectSubmit: StoryFn<SelectQueryFieldProps> = (args
           required={false}
           canClear={args.canClear}
           debounce={0}
+          hasNextPage={false}
+          optionCount={10}
+          isFetching={false}
+          isFetchingNextPage={false}
+          fetchNextPage={() => {}}
           multiple
           name="films"
         >
@@ -240,6 +255,11 @@ export const Generic: StoryFn<SelectQueryFieldProps> = () => {
         hasDescription={false}
         value={result}
         name="film"
+        hasNextPage={false}
+        optionCount={10}
+        isFetching={false}
+        isFetchingNextPage={false}
+        fetchNextPage={() => {}}
       >
         {/* In this case the label is the same as the value but ofcourse that can differ*/}
         <SelectQueryField.OptionGroup>

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

@@ -6,10 +6,12 @@ export interface OptionGroupProps extends PropsWithChildren {
 }
 
 export const OptionGroup: FC<OptionGroupProps> = ({ children, label }) => {
-  /* Currently this is actually never rendered. in Select.index.tsx the OptionGroup is built based on the props*/
+  {
+    /* This is actually never rendered, the optiongroup is build in the select fields themself*/
+  }
   return (
     <li>
-      {label} && <div>{label}</div>
+      {label && <div>{label}</div>}
       <ul>{children}</ul>
     </li>
   );

package/src/components/other/CollapseList/index.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, ReactElement, useState } from 'react';
 import { styled } from '../../../styled';
 import { IoMdArrowDropup as ArrowUp } from 'react-icons/io';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { useTheme } from '../../../hooks';
 
 const StyledList = styled.div`
@@ -78,36 +78,31 @@ const Item: FC<PropsWithChildren<ItemProps>> = ({ collapsed = false, title, chil
         <ArrowUp size={18} />
       </Header>
       {description && <p>{description}</p>}
-      <AnimatePresence>
-        {!isCollapsed && (
-          <motion.div
-            style={{ maxHeight: '100%', overflowY: 'hidden' }}
-            key={`collapse-item-${title}`}
-            variants={{
-              open: { opacity: 1, height: 'auto', flexGrow: 1, minHeight: 0, overflowY: 'auto' },
-              collapsed: { opacity: 0, height: 0 },
-            }}
-            initial="collapsed"
-            animate="open"
-            exit="collapsed"
-            transition={{ duration: 0.125, ease: 'linear' }}
-          >
-            <motion.div
-              variants={{
-                open: { y: 0 },
-                collapsed: { y: -6 },
-              }}
-              transition={{ duration: 0.125, ease: 'linear' }}
-              style={{
-                transformOrigin: 'top center',
-                padding: `${theme.spacing['0_75']} ${theme.spacing['0_5']} ${theme.spacing['1_5']} ${theme.spacing['1']}`,
-              }}
-            >
-              {children}
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <motion.div
+        style={{ maxHeight: '100%', overflowY: 'hidden' }}
+        key={`collapse-item-${title}`}
+        variants={{
+          open: { opacity: 1, height: 'auto', flexGrow: 1, minHeight: 0, overflowY: 'auto', visibility: 'visible' },
+          collapsed: { opacity: 0, height: 0, visibility: 'hidden' },
+        }}
+        initial="collapsed"
+        animate={isCollapsed ? 'collapsed' : 'open'}
+        transition={{ duration: 0.125, ease: 'linear' }}
+      >
+        <motion.div
+          variants={{
+            open: { y: 0 },
+            collapsed: { y: -6 },
+          }}
+          transition={{ duration: 0.125, ease: 'linear' }}
+          style={{
+            transformOrigin: 'top center',
+            padding: `${theme.spacing['0_75']} ${theme.spacing['0_5']} ${theme.spacing['1_5']} ${theme.spacing['1']}`,
+          }}
+        >
+          {children}
+        </motion.div>
+      </motion.div>
     </div>
   );
 };

package/src/components/visual/Card/Card.stories.tsx

@@ -13,7 +13,10 @@ export default {
 export const Default: StoryFn<CardProps> = (args) => {
   return (
     <Card variant={args.variant} onClick={() => {}}>
-      this is the content
+      <Card.Title label="This is the title">
+        <span>Here we can put logic that goes on the right side</span>
+      </Card.Title>
+      <Card.Body>this is the body</Card.Body>
     </Card>
   );
 };

package/src/components/visual/Card/CardBody.tsx

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  padding: ${({ theme }) => theme.spacing[2]};
+  min-width: 20rem;
+`;
+
+export const CardBody: FC<PropsWithChildren> = (props) => {
+  return <Container>{props.children}</Container>;
+};

package/src/components/visual/Card/CardTitle.tsx

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  padding: ${({ theme }) => theme.spacing[1]};
+`;
+
+interface CardTitleProps {
+  label: string;
+}
+
+export const CardTitle: FC<PropsWithChildren<CardTitleProps>> = (props) => {
+  return (
+    <Container>
+      <h2>{props.label}</h2>
+      <div>{props.children}</div>
+    </Container>
+  );
+};

package/src/components/visual/Card/index.tsx

@@ -1,5 +1,7 @@
-import { forwardRef, HTMLProps } from 'react';
+import { FC, HTMLProps, PropsWithChildren } from 'react';
 import { styled } from '../../../styled';
+import { CardTitle } from './CardTitle';
+import { CardBody } from './CardBody';
 
 type Variant = 'default' | 'outline';
 
@@ -8,8 +10,8 @@ const Container = styled.div<{ canClick: boolean; variant: Variant }>`
   background-color: ${({ theme, variant }) =>
     variant === 'outline' ? theme.colors.background : theme.colors.backgroundAlt};
   border: 0.1rem solid ${({ theme }) => theme.colors.backgroundAccent};
-  padding: ${({ theme }) => theme.spacing[2]};
   cursor: ${({ canClick }) => (canClick ? 'pointer' : 'default')};
+  height: fit-content;
 
   &:focus-within {
     border-color: none;
@@ -31,22 +33,27 @@ export interface CardProps extends HTMLProps<HTMLDivElement> {
   variant?: Variant;
 }
 
-// Forward ref and spread all props to the Container
-export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
-  { children, variant = 'default', ...props },
-  ref,
-) {
-  const canClick = 'onClick' in props;
+interface SubComponentTypes {
+  Title: typeof CardTitle;
+  Body: typeof CardBody;
+}
 
-  // Extract the className prop, if present
+export const Card: FC<PropsWithChildren<CardProps>> & SubComponentTypes = function Card({
+  children,
+  variant = 'default',
+  ...props
+}) {
+  const canClick = 'onClick' in props;
   const { className, ...restProps } = props;
 
   return (
-    // TODO: type this properly
-    //eslint-disable-next-line
-    //@ts-ignore
-    <Container ref={ref} canClick={canClick} variant={variant} className={className} {...restProps}>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Container canClick={canClick} variant={variant} className={className} {...restProps}>
       {children}
     </Container>
   );
-});
+};
+
+Card.Title = CardTitle;
+Card.Body = CardBody;