@takaro/lib-components 0.0.1

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

@@ -0,0 +1,239 @@
+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';
+
+export enum Operators {
+  is = 'is',
+  contains = 'contains',
+}
+
+export enum FilterInputType {
+  string = 'string',
+  uuid = 'uuid',
+  datetime = 'datetime',
+}
+
+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().nonempty({
+                message: 'Value is required.',
+              }),
+            }),
+            z.object({
+              type: z.literal(FilterInputType.uuid),
+              value: z.string().uuid().nonempty({
+                message: 'Value is required.',
+              }),
+            }),
+            z.object({
+              type: z.literal(FilterInputType.datetime),
+              value: z.string().datetime().nonempty({
+                message: 'Value is required.',
+              }),
+            }),
+          ])
+          .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);
+    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" text="Clear filters" onClick={handleClearFilters} />
+              )}
+              <FilterActions>
+                <Button
+                  onClick={() =>
+                    append({
+                      column: '',
+                      operator: '',
+                      value: '',
+                      type: FilterInputType.string,
+                    })
+                  }
+                  variant="clear"
+                  text="Add filter"
+                />
+                <Button type="submit" text="Apply filters" />
+              </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/Pagination/index.tsx

@@ -0,0 +1,108 @@
+import { FC, useMemo } from 'react';
+import { Button, IconButton } from '../../../../../components';
+import { PaginationContainer } 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 };
+  } else {
+    return { start: currentPage - ceiling + 1, end: currentPage + floor + 1 };
+  }
+};
+
+export interface PaginationProps {
+  setPageIndex: (index: number) => void;
+  pageIndex: number;
+  hasPrevious: boolean;
+  previousPage: () => void;
+  nextPage: () => void;
+  hasNext: boolean;
+  pageCount: number;
+}
+
+export const Pagination: FC<PaginationProps> = ({
+  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 (
+    <PaginationContainer 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
+            variant="outline"
+            onClick={() => setPageIndex(i - 1)}
+            className={i === pageIndex + 1 ? 'active' : ''}
+            text={`${i}`}
+          />
+        ))}
+      {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"
+        />
+      )}
+    </PaginationContainer>
+  );
+};

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

@@ -0,0 +1,49 @@
+import { styled } from '../../../../../styled';
+
+export const PaginationContainer = 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/Table/subcomponents/index.ts

@@ -0,0 +1,4 @@
+export { Pagination } from './Pagination';
+export { Filter } from './Filter';
+export { ColumnHeader } from './ColumnHeader';
+export { ColumnVisibility } from './ColumnVisibility';

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 { LinkCard } from './LinkCard';
+export type { LinkCardProps } from './LinkCard';
+
+export { DateFormatter } from './DateFormatter';
+export type { DateFormatterProps } from './DateFormatter';
+
+export { CopyId } from './CopyId';
+export type { CopyIdProps } from './CopyId';

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { 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)} text="Open dialog" />
+      <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 text="Create module" type="submit" fullWidth />
+            </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)} text="Open dialog" />
+      <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 text="Go back to dashboard" />
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+};

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

@@ -0,0 +1,62 @@
+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%;
+  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>>(
+  ({ 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,46 @@
+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;
+`;
+
+const CardBody = styled.div`
+  min-width: 300px;
+`;
+
+export const DialogContent = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((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,
+              })}
+            >
+              <CardBody>{props.children}</CardBody>
+            </Card>
+          </FloatingFocusManager>
+        </StyledFloatingOverlay>
+      )}
+    </FloatingPortal>
+  );
+});

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

@@ -0,0 +1,21 @@
+import { useContext, createContext } from 'react';
+import { useDialog } from './useDialog';
+
+type ContextType =
+  | (ReturnType<typeof useDialog> & {
+      setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+      setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    })
+  | null;
+
+export const DialogContext = createContext<ContextType>(null);
+
+export const useDialogContext = () => {
+  const context = useContext(DialogContext);
+
+  if (context == null) {
+    throw new Error('Dialog components must be wrapped in <Dialog />');
+  }
+
+  return context;
+};