@takaro/lib-components 0.0.0-next.0da151e

package/src/components/data/Table/subcomponents/Filter/index.tsx

@@ -0,0 +1,228 @@
+import { useForm, useFieldArray, SubmitHandler } from 'react-hook-form';
+import { Table } from '@tanstack/react-table';
+import { Button, IconButton, Popover, Tooltip } from '../../../../../components';
+import { AiOutlineFilter as FilterIcon, AiOutlineClose as RemoveIcon } from 'react-icons/ai';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ButtonContainer, Container, FilterActions, FilterContainer } from './style';
+import { FilterRow } from './field';
+import { Operators, FilterInputType } from './types';
+
+export interface IFormInputs {
+  filters: {
+    column: string;
+    operator: string;
+    value: string;
+    type: FilterInputType;
+  }[];
+}
+
+interface FilterProps<DataType extends object> {
+  table: Table<DataType>;
+}
+
+export function Filter<DataType extends object>({ table }: FilterProps<DataType>) {
+  const [open, setOpen] = useState<boolean>(false);
+
+  // Only get the columnIds on initial table render
+  const columnIds = useMemo(() => {
+    const ids = table
+      .getAllColumns()
+      .filter((column) => {
+        return column.getCanFilter();
+      })
+      .map((column) => column.id);
+
+    return ids;
+  }, [table.getAllColumns()]);
+
+  const basedShape = z.object({
+    column: z.string().refine((value) => columnIds.includes(value), {
+      message: 'Please select a valid column.',
+    }),
+    operator: z.nativeEnum(Operators, {
+      errorMap: () => {
+        return {
+          message: 'Condition is required.',
+        };
+      },
+    }),
+  });
+
+  const validationSchema = useMemo(() => {
+    return z.object({
+      filters: z.array(
+        z
+          .discriminatedUnion('type', [
+            z.object({
+              type: z.literal(FilterInputType.string),
+              value: z.string().min(1),
+            }),
+            z.object({
+              type: z.literal(FilterInputType.uuid),
+              value: z.string().uuid().min(1),
+            }),
+            z.object({
+              type: z.literal(FilterInputType.datetime),
+              value: z.string().datetime().min(1),
+            }),
+          ])
+          .and(basedShape),
+      ),
+    });
+  }, [columnIds]);
+
+  // these are the filters that are already applied to the table
+  const defaultColumnFilters = table
+    .getState()
+    .columnFilters.filter((filter) => Object.keys(filter).length)
+    .map(({ id, value }) => {
+      return {
+        column: id,
+        operator: Operators.is,
+        value: [...(value as string[])],
+      };
+    });
+
+  // these are the global filters (search in api) that are already applied to the table
+  const defaultGlobalFilters = table
+    .getState()
+    .globalFilter.filter((filter: { value: string; id: string }) => Object.keys(filter).length)
+    .map(({ value, id }: { value: string[]; id: string }) => {
+      return {
+        column: id,
+        operator: Operators.contains,
+        value: [...value],
+      };
+    });
+
+  const { control, handleSubmit, setValue } = useForm<IFormInputs>({
+    mode: 'onSubmit',
+
+    resolver: zodResolver(validationSchema),
+    defaultValues: {
+      filters: [...defaultColumnFilters, ...defaultGlobalFilters],
+    },
+  });
+
+  const { append, fields, remove } = useFieldArray({ name: 'filters', control });
+
+  const handleClearFilters = useCallback(() => {
+    table.resetColumnFilters();
+    table.resetGlobalFilter();
+    remove();
+    append({
+      column: '',
+      operator: '',
+      value: '',
+      type: FilterInputType.string,
+    });
+  }, [remove]);
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append({
+        column: '',
+        operator: '',
+        value: '',
+        type: FilterInputType.string,
+      });
+    }
+  }, [fields]);
+
+  // filters contains both column filters and global filters
+  const onSubmit: SubmitHandler<IFormInputs> = ({ filters }) => {
+    const columnFilters: Record<string, string[]> = {};
+    const globalFilters: Record<string, string[]> = {};
+
+    filters.forEach((filter) => {
+      const target = filter.operator === 'is' ? columnFilters : globalFilters;
+      if (!target[filter.column]) {
+        target[filter.column] = [];
+      }
+      target[filter.column].push(filter.value);
+    });
+
+    const columnFiltersArray = Object.entries(columnFilters).map(([id, values]) => ({ id, value: values }));
+    const globalFiltersArray = Object.entries(globalFilters).map(([id, values]) => ({ id, value: values }));
+
+    table.setColumnFilters(columnFiltersArray);
+    table.setGlobalFilter(globalFiltersArray);
+    table.resetPagination();
+
+    setOpen(false);
+  };
+
+  // const filterCount = table.getState().columnFilters.length + table.getState().globalFilter.length;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-end">
+      <Popover.Trigger asChild>
+        <IconButton icon={<FilterIcon />} onClick={() => setOpen(!open)} size="large" ariaLabel="filter" />
+      </Popover.Trigger>
+      <Popover.Content>
+        <Container>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            {fields.map((field, index) => {
+              return (
+                <FilterContainer key={field.id} hasMultipleFields={fields.length > 1}>
+                  {fields.length > 1 && (
+                    <Tooltip key={`remove-${field.id}`}>
+                      <Tooltip.Trigger asChild>
+                        <IconButton
+                          size="tiny"
+                          icon={<RemoveIcon />}
+                          ariaLabel="remove filter"
+                          onClick={() => {
+                            remove(index);
+                          }}
+                        />
+                      </Tooltip.Trigger>
+                      <Tooltip.Content>Remove filter</Tooltip.Content>
+                    </Tooltip>
+                  )}
+                  <FilterRow
+                    index={index}
+                    id={field.id}
+                    columnIds={columnIds}
+                    control={control}
+                    setValue={setValue}
+                    getColumn={table.getColumn}
+                  />
+                </FilterContainer>
+              );
+            })}
+            <ButtonContainer justifyContent={fields.length > 0 ? 'space-between' : 'flex-end'}>
+              {fields.length > 0 && (
+                <Button type="button" variant="clear" onClick={handleClearFilters}>
+                  Clear filters
+                </Button>
+              )}
+              <FilterActions>
+                <Button
+                  onClick={() =>
+                    append({
+                      column: '',
+                      operator: '',
+                      value: '',
+                      type: FilterInputType.string,
+                    })
+                  }
+                  variant="clear"
+                >
+                  Add filter
+                </Button>
+                <Button type="submit">Apply filters</Button>
+              </FilterActions>
+            </ButtonContainer>
+          </form>
+          {/* dropdown with all columns */}
+          {/* dropdown with all operators */}
+          {/* input for value */}
+          {/* when all fields are valid, considered a filter */}
+        </Container>
+      </Popover.Content>
+    </Popover>
+  );
+}

package/src/components/data/Table/subcomponents/Filter/style.ts

@@ -0,0 +1,26 @@
+import { styled } from '../../../../../styled';
+
+export const Container = styled.div`
+  padding: ${({ theme }) => theme.spacing['1_5']};
+`;
+
+export const FilterContainer = styled.div<{ hasMultipleFields: boolean }>`
+  display: grid;
+  grid-template-columns: ${({ hasMultipleFields }) => (hasMultipleFields ? '20px 1fr 1fr 1fr' : '1fr 1fr 1fr')};
+  gap: ${({ theme }) => theme.spacing['1_5']};
+  align-items: center;
+`;
+
+export const ButtonContainer = styled.div<{ justifyContent: string }>`
+  display: flex;
+  flex-direction: row;
+  justify-content: ${({ justifyContent }) => justifyContent};
+  gap: ${({ theme }) => theme.spacing['1_5']};
+`;
+
+export const FilterActions = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing['1_5']};
+`;

package/src/components/data/Table/subcomponents/Filter/types.ts

@@ -0,0 +1,10 @@
+export enum Operators {
+  is = 'is',
+  contains = 'contains',
+}
+
+export enum FilterInputType {
+  string = 'string',
+  uuid = 'uuid',
+  datetime = 'datetime',
+}

package/src/components/data/Table/subcomponents/Pagination/PagePicker.tsx

@@ -0,0 +1,109 @@
+import { FC, useMemo } from 'react';
+import { Button, IconButton } from '../../../../../components';
+import { PagePickerContainer } from './style';
+import {
+  FaAngleRight as NextIcon,
+  FaAnglesRight as LastIcon,
+  FaChevronLeft as PreviousIcon,
+  FaAnglesLeft as FirstIcon,
+} from 'react-icons/fa6';
+
+const range = (start: number, end: number) => {
+  return Array.from({ length: end - start }, (_, index) => index + start);
+};
+
+const getPageWindow = (pageCount: number, windowSize: number, currentPage: number): { start: number; end: number } => {
+  const ceiling = Math.ceil(windowSize / 2);
+  const floor = Math.floor(windowSize / 2);
+
+  if (pageCount < windowSize) {
+    return { start: 1, end: pageCount + 1 };
+  } else if (currentPage >= 1 && currentPage <= ceiling) {
+    return { start: 1, end: windowSize + 1 };
+  } else if (currentPage + floor >= pageCount) {
+    return { start: pageCount - windowSize + 1, end: pageCount + 1 };
+  }
+  return { start: currentPage - ceiling + 1, end: currentPage + floor + 1 };
+};
+
+export interface PagePickerProps {
+  setPageIndex: (index: number) => void;
+  pageIndex: number;
+  hasPrevious: boolean;
+  previousPage: () => void;
+  nextPage: () => void;
+  hasNext: boolean;
+  pageCount: number;
+}
+
+export const PagePicker: FC<PagePickerProps> = ({
+  setPageIndex,
+  hasPrevious,
+  pageIndex,
+  hasNext,
+  pageCount,
+  previousPage,
+  nextPage,
+}) => {
+  const windowSize = 5;
+  const pageWindow = getPageWindow(pageCount, windowSize, pageIndex + 1);
+  const pages = range(pageWindow.start, pageWindow.end);
+
+  const showButtons = useMemo(() => {
+    return pageCount > 1;
+  }, [pageCount]);
+
+  const showJumps = useMemo(() => {
+    return showButtons && pageCount > windowSize;
+  }, [showButtons, pageCount, windowSize]);
+
+  const handlePreviousPageClick = () => {
+    previousPage();
+  };
+
+  return (
+    <PagePickerContainer border={false}>
+      {showJumps && (
+        <IconButton
+          size="tiny"
+          onClick={() => setPageIndex(0)}
+          icon={<FirstIcon />}
+          disabled={!hasPrevious}
+          ariaLabel="First page"
+        />
+      )}
+      {showButtons && (
+        <IconButton
+          size="tiny"
+          onClick={handlePreviousPageClick}
+          icon={<PreviousIcon />}
+          disabled={!hasPrevious}
+          ariaLabel="Previous page"
+        />
+      )}
+      {showButtons &&
+        pages.map((i) => (
+          <Button
+            key={`page-${i}`}
+            variant="outline"
+            onClick={() => setPageIndex(i - 1)}
+            className={i === pageIndex + 1 ? 'active' : ''}
+          >
+            {i}
+          </Button>
+        ))}
+      {showButtons && (
+        <IconButton size="tiny" icon={<NextIcon />} onClick={nextPage} disabled={!hasNext} ariaLabel="next page" />
+      )}
+      {showJumps && (
+        <IconButton
+          size="tiny"
+          icon={<LastIcon />}
+          onClick={() => setPageIndex(pageCount - 1)}
+          disabled={!hasNext}
+          ariaLabel="Last page"
+        />
+      )}
+    </PagePickerContainer>
+  );
+};

package/src/components/data/Table/subcomponents/Pagination/PageSizeSelect.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { UnControlledSelectField } from '../../../../../components';
+
+interface PageSizeSelectProps {
+  onPageSizeChange: (pageSize: string) => void;
+  pageSize: string;
+}
+
+export const PageSizeSelect: FC<PageSizeSelectProps> = ({ onPageSizeChange, pageSize }) => {
+  return (
+    <UnControlledSelectField
+      hasError={false}
+      hasDescription={false}
+      id="page-size"
+      multiple={false}
+      name="pageSize"
+      value={pageSize.toString() || '10'}
+      onChange={onPageSizeChange}
+      render={(selectedItems) => {
+        if (selectedItems.length === 0) {
+          return <div>Select...</div>;
+        }
+        return <div>{selectedItems[0].label} items</div>;
+      }}
+    >
+      <UnControlledSelectField.OptionGroup label="Options">
+        {[5, 10, 25, 50, 100, 200].map((val: number) => (
+          <UnControlledSelectField.Option key={`${val}-table`} value={val.toString()} label={val.toString()}>
+            <div>
+              <span>{val} items</span>
+            </div>
+          </UnControlledSelectField.Option>
+        ))}
+      </UnControlledSelectField.OptionGroup>
+    </UnControlledSelectField>
+  );
+};

package/src/components/data/Table/subcomponents/Pagination/style.ts

@@ -0,0 +1,49 @@
+import { styled } from '../../../../../styled';
+
+export const PagePickerContainer = styled.div<{ border?: boolean }>`
+  display: flex;
+  justify-content: flex-end;
+
+  span {
+    color: ${({ theme }) => theme.colors.text};
+  }
+
+  button {
+    background-color: ${({ theme }) => theme.colors.background};
+    padding: ${({ theme }) => `${theme.spacing['0_5']} ${theme.spacing[1]}`};
+    font-weight: 400;
+    border-color: ${({ theme }) => theme.colors.textAlt};
+    border-right: 0;
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+
+    margin-left: ${({ theme }) => theme.spacing['0_25']};
+    margin-right: ${({ theme }) => theme.spacing['0_25']};
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &.active {
+      border: 1px solid ${({ theme }) => theme.colors.primary};
+      span {
+        color: ${({ theme }) => theme.colors.text};
+      }
+    }
+
+    ${({ border }) => !border && 'border: 0;'}
+  }
+
+  button:first-of-type {
+    border-radius: 0.25rem 0 0 0.25rem;
+  }
+
+  button:last-of-type {
+    border-right: ${({ theme }) => `solid 1px ${theme.colors.textAlt}`};
+    border-radius: 0 0.25rem 0.25rem 0;
+
+    ${({ border }) => !border && 'border: 0;'}
+  }
+`;

package/src/components/data/index.ts

@@ -0,0 +1,28 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';
+
+export { Table } from './Table';
+export type { TableProps } from './Table';
+
+export { Console } from './Console';
+export type { ConsoleProps, Message } from './Console';
+
+export { InfiniteScroll } from './InfiniteScroll';
+export type { InfiniteScrollProps } from './InfiniteScroll';
+
+export { Drawer, DrawerSkeleton } from './Drawer';
+
+export { Stats } from './Stats';
+export type { StatsProps } from './Stats/';
+
+export { DateFormatter } from './DateFormatter';
+export type { DateFormatterProps } from './DateFormatter';
+
+export { CopyId } from './CopyId';
+export type { CopyIdProps } from './CopyId';
+
+export { CountryList } from './CountryList';
+export type { CountryListProps } from './CountryList';

package/src/components/dialogs/Dialog/Dialog.stories.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Dialog } from '.';
+import { Button, TextField } from '../../../components';
+
+export default {
+  title: 'Dialogs/Default',
+  component: Dialog,
+} as Meta;
+
+export const Default: StoryFn = () => {
+  interface IFormInputs {
+    moduleName: string;
+  }
+
+  const [open, setOpen] = useState<boolean>(false);
+  const [data, setData] = useState<IFormInputs>();
+  const { control, handleSubmit } = useForm<IFormInputs>();
+
+  const onSubmit: SubmitHandler<IFormInputs> = (data) => {
+    setData(data);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog.Content>
+          <Dialog.Heading>New Module</Dialog.Heading>
+          <Dialog.Body>
+            <h2>Create module</h2>
+            <p>Modules are what makes Takaro great.</p>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <TextField label="Module name" name="moduleName" placeholder="cute kittens" control={control} />
+              <Button type="submit" fullWidth>
+                Create module
+              </Button>
+            </form>
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog>
+      <pre>result: {data?.moduleName}</pre>
+    </>
+  );
+};
+
+export const SingleActionDialog: StoryFn = () => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const handleAction = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog.Content>
+          <Dialog.Heading>New Module</Dialog.Heading>
+          <Dialog.Body size="small">
+            <h2>Go back to dashboard!</h2>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+            <Button onClick={handleAction} size="large" fullWidth>
+              Go back to dashboard
+            </Button>
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+};

package/src/components/dialogs/Dialog/DialogBody.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, PropsWithChildren, useId, useLayoutEffect } from 'react';
+import { useDialogContext } from './DialogContext';
+import { Size, styled } from '../../../styled';
+
+const Container = styled.div<{ size: Size }>`
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  width: 100%;
+  min-width: 350px;
+  margin: 0 auto;
+  padding: ${({ theme }) => theme.spacing[4]};
+
+  & > p {
+    margin-bottom: ${({ theme }) => theme.spacing[2]};
+  }
+
+  ${({ size, theme }) => {
+    switch (size) {
+      case 'tiny':
+      case 'small':
+        return `
+            max-width: 450px;
+            padding: ${theme.spacing[2]};
+          `;
+      case 'medium':
+        return `
+          max-width: 500px;
+          padding: ${theme.spacing[3]};
+         `;
+      case 'large':
+      case 'huge':
+        return `
+          max-width: 600px;
+          padding: ${theme.spacing[4]};
+          `;
+    }
+  }};
+`;
+
+export interface DialogBodyProps {
+  size?: Size;
+}
+
+export const DialogBody = forwardRef<HTMLParagraphElement, PropsWithChildren<DialogBodyProps>>(function DialogBody(
+  { children, size = 'medium', ...props },
+  ref,
+) {
+  const { setDescriptionId } = useDialogContext();
+  const id = useId();
+
+  // Only sets `aria-describedby` on the Dialog root element
+  // if this component is mounted inside it.
+  useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(undefined);
+  }, [id, setDescriptionId]);
+
+  return (
+    <Container {...props} ref={ref} id={id} size={size}>
+      {children}
+    </Container>
+  );
+});

package/src/components/dialogs/Dialog/DialogContent.tsx

@@ -0,0 +1,44 @@
+import { styled } from '../../../styled';
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useMergeRefs } from '@floating-ui/react';
+import { Card } from '../../../components';
+import { forwardRef } from 'react';
+import { useDialogContext } from './DialogContext';
+
+const StyledFloatingOverlay = styled(FloatingOverlay)`
+  background: rgba(0, 0, 0, 0.8);
+  display: grid;
+  place-items: center;
+`;
+
+export const DialogContent = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
+  function DialogContent(props, propRef) {
+    const { context: floatingContext, ...context } = useDialogContext();
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+
+    const root = document.getElementById('dialog');
+    if (!root) {
+      throw new Error('Dialog need to render in a <div id="dialog"></div>');
+    }
+
+    return (
+      <FloatingPortal root={root}>
+        {context.open && (
+          <StyledFloatingOverlay lockScroll>
+            <FloatingFocusManager context={floatingContext}>
+              <Card
+                ref={ref}
+                aria-labelledby={context.labelId}
+                aria-describedby={context.descriptionId}
+                {...context.getFloatingProps({
+                  ...props,
+                })}
+              >
+                <Card.Body>{props.children}</Card.Body>
+              </Card>
+            </FloatingFocusManager>
+          </StyledFloatingOverlay>
+        )}
+      </FloatingPortal>
+    );
+  },
+);