@takaro/lib-components 0.0.1

package/src/components/data/Drawer/DrawerContext.tsx

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

package/src/components/data/Drawer/DrawerFooter.tsx

@@ -0,0 +1,19 @@
+import { FC, PropsWithChildren } from 'react';
+import { styled } from '../../../styled';
+
+export const Container = styled.div`
+  /* Should match width of drawercontent */
+  width: calc(700px - 1px);
+  position: fixed;
+  bottom: 0;
+  /* should be shown above the rest of drawer (this is relative to DrawerContent) */
+  z-index: 1;
+  border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+
+  padding: ${({ theme }) => theme.spacing[2]};
+  background-color: ${({ theme }) => theme.colors.background};
+`;
+
+export const DrawerFooter: FC<PropsWithChildren> = ({ children }) => {
+  return <Container>{children}</Container>;
+};

package/src/components/data/Drawer/DrawerHeading.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, HTMLProps, useId, useLayoutEffect } from 'react';
+import { useDrawerContext } from './DrawerContext';
+import { AiOutlineClose as CloseIcon } from 'react-icons/ai';
+import { styled } from '../../../styled';
+import { IconButton, Tooltip } from '../../../components';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: ${({ theme }) => theme.spacing[2]};
+  padding: ${({ theme }) => `${theme.spacing[2]} ${theme.spacing['2_5']}`};
+`;
+
+interface DialogHeadingProps extends HTMLProps<HTMLHeadingElement> {
+  hasClose?: boolean;
+}
+
+export const DrawerHeading = forwardRef<HTMLHeadingElement, DialogHeadingProps>(
+  ({ children, hasClose = true, ...props }, ref) => {
+    const { setLabelId, setOpen } = useDrawerContext();
+    const id = useId();
+
+    useLayoutEffect(() => {
+      setLabelId(id);
+      return () => setLabelId(undefined);
+    }, [id, setLabelId]);
+
+    return (
+      <Container>
+        <h2 {...props} ref={ref} id={id}>
+          {children}
+        </h2>
+        {hasClose && (
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <IconButton
+                onClick={() => setOpen(false)}
+                icon={<CloseIcon size={18} cursor="pointer" />}
+                ariaLabel="Close"
+              />
+            </Tooltip.Trigger>
+            <Tooltip.Content>Close</Tooltip.Content>
+          </Tooltip>
+        )}
+      </Container>
+    );
+  }
+);

package/src/components/data/Drawer/DrawerSkeleton.tsx

@@ -0,0 +1,29 @@
+import { Skeleton, Drawer } from '../../../components';
+import { styled } from '../../../styled';
+
+const Inner = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing[2]};
+  margin-top: ${({ theme }) => theme.spacing[2]};
+`;
+
+export const DrawerSkeleton = () => {
+  return (
+    <Drawer initialOpen>
+      <Drawer.Content>
+        <Drawer.Body>
+          <Inner>
+            <Skeleton width="100%" height="8vh" variant="rectangular" />
+            <Skeleton width="100%" height="12vh" variant="rectangular" />
+            <Skeleton width="100%" height="5vh" variant="rectangular" />
+            <Skeleton width="100%" height="10vh" variant="rectangular" />
+            <Skeleton width="100%" height="15vh" variant="rectangular" />
+            <Skeleton width="100%" height="16vh" variant="rectangular" />
+            <Skeleton width="100%" height="5vh" variant="rectangular" />
+          </Inner>
+        </Drawer.Body>
+      </Drawer.Content>
+    </Drawer>
+  );
+};

package/src/components/data/Drawer/index.tsx

@@ -0,0 +1,25 @@
+import { DrawerOptions, useDrawer } from './useDrawer';
+import { FC, PropsWithChildren } from 'react';
+import { DrawerContext } from './DrawerContext';
+import { DrawerContent } from './DrawerContent';
+import { DrawerHeading } from './DrawerHeading';
+import { DrawerBody } from './DrawerBody';
+import { DrawerFooter } from './DrawerFooter';
+
+type SubComponentTypes = {
+  Content: typeof DrawerContent;
+  Heading: typeof DrawerHeading;
+  Body: typeof DrawerBody;
+  Footer: typeof DrawerFooter;
+};
+
+export const Drawer: FC<PropsWithChildren<DrawerOptions>> & SubComponentTypes = ({ children, ...options }) => {
+  return <DrawerContext.Provider value={useDrawer(options)}>{children}</DrawerContext.Provider>;
+};
+
+Drawer.Content = DrawerContent;
+Drawer.Heading = DrawerHeading;
+Drawer.Body = DrawerBody;
+Drawer.Footer = DrawerFooter;
+
+export { DrawerSkeleton } from './DrawerSkeleton';

package/src/components/data/Drawer/useDrawer.tsx

@@ -0,0 +1,52 @@
+import { useMemo, useState } from 'react';
+import { useClick, useDismiss, useFloating, useInteractions } from '@floating-ui/react';
+
+export interface DrawerOptions {
+  open?: boolean;
+  initialOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  canDrag?: boolean;
+}
+
+export function useDrawer({
+  initialOpen = false,
+  canDrag = false,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}: DrawerOptions) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [labelId, setLabelId] = useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = useState<string | undefined>();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    open,
+    onOpenChange: setOpen,
+  });
+
+  const context = data.context;
+
+  const interactions = useInteractions([
+    useClick(context, {
+      enabled: controlledOpen == null,
+    }),
+    useDismiss(context, { outsidePressEvent: 'mousedown' }),
+  ]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+      canDrag,
+    }),
+    [open, setOpen, interactions, data, labelId, descriptionId]
+  );
+}

package/src/components/data/InfiniteScroll/InfiniteScroll.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { InfiniteScroll, InfiniteScrollProps } from '.';
+import { styled } from '../../../styled';
+
+const Wrapper = styled.div`
+  height: 100vh;
+  overflow: scroll;
+`;
+
+const Filler = styled.div`
+  height: 100vh;
+`;
+
+export default {
+  title: 'Data/InfiniteScroll',
+  component: InfiniteScroll,
+  args: {
+    hasNextPage: true,
+    isFetching: false,
+    isFetchingNextPage: false,
+    fetchNextPage: () => {},
+  },
+} as Meta<InfiniteScrollProps>;
+
+export const Default: StoryFn<InfiniteScrollProps> = (args) => {
+  return (
+    <Wrapper>
+      <Filler />
+      <InfiniteScroll {...args} />
+    </Wrapper>
+  );
+};

package/src/components/data/InfiniteScroll/index.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { useMergeRefs } from '@floating-ui/react';
+import { Button, Spinner } from '../../../components';
+
+export interface InfiniteScrollProps {
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void;
+  isFetching: boolean;
+  hasNextPage?: boolean;
+}
+
+export const InfiniteScroll = forwardRef<HTMLElement, InfiniteScrollProps>(
+  ({ hasNextPage = false, fetchNextPage, isFetching, isFetchingNextPage }, propRef) => {
+    const { ref: viewRef, inView } = useInView();
+    const ref = useMergeRefs([propRef, viewRef]);
+
+    useEffect(() => {
+      if (inView) {
+        fetchNextPage();
+      }
+    }, [inView]);
+
+    // Fallback: sometimes the inView event does not trigger automatically.
+    // the user will have to manually click the button to fetch the next page.
+    const handleOnClick = () => {
+      fetchNextPage();
+    };
+
+    return (
+      <>
+        {!isFetchingNextPage && hasNextPage && !isFetching && (
+          <div
+            ref={ref}
+            style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
+          >
+            <Button text="Load more" ref={ref} onClick={handleOnClick} />
+          </div>
+        )}
+        {hasNextPage && isFetchingNextPage && (
+          <div
+            ref={ref}
+            style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
+          >
+            <Spinner size="medium" />
+          </div>
+        )}
+      </>
+    );
+  }
+);

package/src/components/data/LinkCard/index.tsx

@@ -0,0 +1,28 @@
+import { FC, ReactElement } from 'react';
+import { styled } from '../../../styled';
+import { AiOutlineLink as LinkIcon } from 'react-icons/ai';
+import { FiExternalLink as ExternalLinkIcon } from 'react-icons/fi';
+
+const Container = styled.li`
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border: 1px solid ${({ theme }) => theme.colors.secondary};
+  padding: ${({ theme }) => theme.spacing['1']};
+`;
+
+export interface LinkCardProps {
+  icon?: ReactElement;
+  label: string;
+  href: string;
+}
+
+export const LinkCard: FC<LinkCardProps> = ({ label, href, icon }) => {
+  return (
+    <Container>
+      {icon || <LinkIcon />}
+      <span>{label}</span>
+      <a href={href}>
+        <ExternalLinkIcon />
+      </a>
+    </Container>
+  );
+};

package/src/components/data/Stats/Stat.tsx

@@ -0,0 +1,99 @@
+import { FC, useContext } from 'react';
+import { styled } from '../../../styled';
+import { StatContext, Direction } from './context';
+
+const Container = styled.div<{ hasBorder: boolean; direction: Direction }>`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  padding: ${({ theme }) => theme.spacing['2']};
+
+  ${({ hasBorder, direction, theme }) => {
+    if (hasBorder) {
+      if (direction === 'vertical') {
+        return `
+          &:not(:last-child) {
+            border-bottom: 1px solid ${theme.colors.secondary};
+          }
+          &:first-child {
+            border-top-left-radius: ${theme.borderRadius.medium};
+            border-top-right-radius: ${theme.borderRadius.medium};
+          }
+          &:last-child {
+            border-bottom-left-radius: ${theme.borderRadius.medium};
+            border-bottom-right-radius: ${theme.borderRadius.medium};
+          }
+        `;
+      } else if (direction === 'horizontal') {
+        return `
+          &:not(:last-child) {
+            border-right: 1px solid ${theme.colors.secondary};
+          }
+          &:first-child {
+            border-top-left-radius: ${theme.borderRadius.medium};
+            border-bottom-left-radius: ${theme.borderRadius.medium};
+          }
+          &:last-child {
+            border-top-right-radius: ${theme.borderRadius.medium};
+            border-bottom-right-radius: ${theme.borderRadius.medium};
+          }
+        `;
+      }
+    } else {
+      return `
+        border-radius: ${theme.borderRadius.medium};
+        border: 1px solid ${theme.colors.secondary};
+      `;
+    }
+  }};
+
+  dt {
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    font-color: ${({ theme }) => theme.colors.secondary};
+    margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+  }
+
+  dd {
+    font-weight: bold;
+    color: ${({ theme }) => theme.colors.white};
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    letter-spacing: 1px;
+    margin: 0;
+    padding: 0;
+
+    &.placeholder {
+      min-width: 80%;
+      min-height: 25px;
+    }
+  }
+`;
+
+export interface StatProps {
+  description: string;
+  value: string;
+  // TODO: Add icon support when needed
+  // icon?: ReactNode
+  isLoading?: boolean;
+}
+
+export const Stat: FC<StatProps> = ({ description, value, isLoading }) => {
+  const { border, direction } = useContext(StatContext);
+
+  if (isLoading) {
+    return (
+      <Container hasBorder={border} direction={direction}>
+        <div>
+          <dt>{description}</dt>
+          <dd className="placeholder"></dd>
+        </div>
+      </Container>
+    );
+  }
+
+  return (
+    <Container hasBorder={border} direction={direction}>
+      <div>
+        <dt>{description}</dt>
+        <dd>{value}</dd>
+      </div>
+    </Container>
+  );
+};

package/src/components/data/Stats/Stats.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Stats, StatsProps } from '../../../components';
+
+export default {
+  title: 'Data/Stat',
+  component: Stats,
+  args: {
+    direction: 'horizontal',
+    border: false,
+  },
+} as Meta<StatsProps>;
+
+export const HorizontalWithBorder: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" border>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const HorizontalWithoutBorder: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" border={false}>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const VerticalWithBorder: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '300px' }}>
+      <Stats direction="vertical" border>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const VerticalWithoutBorder: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '300px' }}>
+      <Stats direction="vertical" border={false}>
+        <Stats.Stat description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};
+
+export const LoadingWithoutBorder: StoryFn<StatsProps> = (args) => {
+  return (
+    <div style={{ width: '700px' }}>
+      <Stats direction={args.direction} border={args.border}>
+        <Stats.Stat isLoading description="Credits" value="$0.00" />
+        <Stats.Stat description="Current month so far" value="$0.00" />
+        <Stats.Stat description="Last invoice" value="$0.00" />
+      </Stats>
+    </div>
+  );
+};

package/src/components/data/Stats/context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export type Direction = 'horizontal' | 'vertical';
+
+interface StatsContextValue {
+  border: boolean;
+  direction: Direction;
+  // TODO: size?: Size;
+}
+
+export const StatContext = createContext<StatsContextValue>(null as any);

package/src/components/data/Stats/index.tsx

@@ -0,0 +1,50 @@
+import { FC, PropsWithChildren, Children, isValidElement } from 'react';
+import { styled } from '../../../styled';
+import { Stat } from './Stat';
+import { StatContext, Direction } from './context';
+
+export const Container = styled.dl<{ direction: Direction; border: boolean; count: number }>`
+  display: grid;
+  ${({ direction, count }) => {
+    return direction === 'horizontal'
+      ? `grid-template-columns: repeat(${count},1fr)`
+      : `grid-template-rows: repeat(${count},1fr)`;
+  }};
+  border: ${({ border, theme }) => (border ? `1px solid ${theme.colors.secondary}` : 'none')};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  gap: ${({ theme, direction }) => (direction === 'vertical' ? theme.spacing['2'] : 0)}
+    ${({ theme, direction }) => (direction === 'horizontal' ? theme.spacing['2'] : 0)};
+`;
+
+export interface StatsProps {
+  direction?: Direction;
+  border: boolean;
+}
+
+interface SubComponents {
+  Stat: typeof Stat;
+}
+
+export const Stats: FC<PropsWithChildren<StatsProps>> & SubComponents = ({
+  direction = 'vertical',
+  border,
+  children,
+}) => {
+  // throw error if child is not a Stat component
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (child.type !== Stat) {
+      throw new Error(`Stats component only accepts Stat components as children. Received ${child.type} instead.`);
+    }
+  });
+
+  return (
+    <Container direction={direction} border={border} count={Children.count(children)}>
+      <StatContext.Provider value={{ border, direction }}>{children}</StatContext.Provider>
+    </Container>
+  );
+};
+
+Stats.Stat = Stat;

package/src/components/data/Table/Table.stories.tsx

@@ -0,0 +1,142 @@
+import React, { FC, useEffect } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Table, TableProps } from '.';
+import { createColumnHelper } from '@tanstack/react-table';
+import { Chip } from '../../../components';
+import { useTableActions } from '../../../hooks';
+
+type User = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  status: string;
+  progress: number;
+};
+
+const data: User[] = [
+  {
+    firstName: 'John',
+    lastName: 'Doe',
+    age: 32,
+    visits: 32,
+    status: 'complicated',
+    progress: 66,
+  },
+  {
+    firstName: 'Jane',
+    lastName: 'Doe',
+    age: 30,
+    visits: 30,
+    status: 'single',
+    progress: 100,
+  },
+  {
+    firstName: 'Sam',
+    lastName: 'Doe',
+    age: 28,
+    visits: 28,
+    status: 'married',
+    progress: 0,
+  },
+  {
+    firstName: 'Sally',
+    lastName: 'Doe',
+    age: 26,
+    visits: 26,
+    status: 'single',
+    progress: 100,
+  },
+  {
+    firstName: 'Bob',
+    lastName: 'Doe',
+    age: 24,
+    visits: 24,
+    status: 'single',
+    progress: 100,
+  },
+  {
+    firstName: 'Barbara',
+    lastName: 'Doe',
+    age: 22,
+    visits: 22,
+    status: 'single',
+    progress: 100,
+  },
+];
+
+const columnHelper = createColumnHelper<User>();
+const columns = [
+  columnHelper.accessor('firstName', {
+    id: 'firstName',
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastName', {
+    id: 'lastName',
+    header: 'Last Name',
+    cell: (info) => <i>{info.getValue()}</i>,
+  }),
+  columnHelper.accessor('age', {
+    id: 'age',
+    header: 'Age',
+    cell: (info) => info.renderValue(),
+  }),
+  columnHelper.accessor('visits', {
+    id: 'visits',
+    header: 'Visits',
+  }),
+  columnHelper.accessor('status', {
+    id: 'status',
+    header: 'Status',
+    cell: (info) => <Chip variant="outline" color="primary" label={info.getValue()} />,
+  }),
+  columnHelper.accessor('progress', {
+    id: 'progress',
+    header: 'Profile Progress',
+  }),
+];
+
+export default {
+  title: 'Data/Table',
+  component: Table,
+  args: {
+    sort: false,
+    refetching: true,
+    isLoading: false,
+  },
+} as Meta<TableProps<User>>;
+
+const Users: FC<TableProps<User>> = (args) => {
+  const { pagination, sorting, columnSearch, columnFilters, rowSelection } = useTableActions<User>();
+
+  useEffect(() => {
+    pagination.setPaginationState({
+      ...pagination.paginationState,
+      pageSize: 1,
+    });
+  }, []);
+
+  return (
+    <Table
+      id="story-table"
+      data={data}
+      columns={columns}
+      pagination={{
+        ...pagination,
+        pageOptions: {
+          pageCount: 10,
+          total: 20,
+        },
+      }}
+      isLoading={args.isLoading}
+      columnFiltering={columnFilters}
+      columnSearch={columnSearch}
+      rowSelection={rowSelection}
+      sorting={sorting}
+    />
+  );
+};
+
+export const TableExample: StoryFn<TableProps<User>> = (args) => <Users {...args} />;