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

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

@@ -0,0 +1,155 @@
+import React, { useState, useMemo } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button, TextField, CollapseList, Chip, RadioGroup, Switch, Drawer, DrawerSkeleton } from '../../../components';
+import { styled } from '../../../styled';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DrawerOptions } from './useDrawer';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing[2]};
+`;
+const Status = styled.div`
+  margin-bottom: ${({ theme }) => theme.spacing[2]};
+`;
+
+export default {
+  title: 'data/Drawer',
+  component: Drawer,
+  args: {
+    promptCloseConfirmation: false,
+  },
+} as Meta<DrawerOptions>;
+
+export const Loading: StoryFn = () => {
+  return <DrawerSkeleton />;
+};
+
+interface FormFields {
+  name: string;
+  description: string;
+  priceType: 'fixed' | 'variable';
+  generateLicenseKeys: boolean;
+  redirectAfterPurchase: boolean;
+  onStoreFront: boolean;
+}
+
+export const Default: StoryFn<DrawerOptions> = ({ promptCloseConfirmation }) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        name: z.string().min(1, 'Name field is required'),
+        description: z.string().min(20, 'description must be at least 20 characters'),
+        priceType: z.enum(['fixed', 'variable']),
+      }),
+    [],
+  );
+
+  const { handleSubmit, control } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+
+  const onSubmit: SubmitHandler<FormFields> = async () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open drawer</Button>
+      <Drawer open={open} onOpenChange={setOpen} promptCloseConfirmation={promptCloseConfirmation}>
+        <Drawer.Content>
+          <Drawer.Heading>Product Details</Drawer.Heading>
+          <Drawer.Body>
+            <Status>
+              Status: <Chip label="active" color="success" variant="outline" />
+            </Status>
+            <form id="myform" onSubmit={handleSubmit(onSubmit)}>
+              <CollapseList>
+                <CollapseList.Item title="General">
+                  <TextField
+                    label="Name"
+                    name="name"
+                    required
+                    control={control}
+                    description={
+                      'Give your product a short and clear name.\n50-60 characters is the recommended length for search engines.'
+                    }
+                  />
+                  <TextField
+                    label="Description"
+                    name="description"
+                    required
+                    control={control}
+                    description="Give your product a short and clear description. 120-160 characters is the recommended length for search engines"
+                  />
+                </CollapseList.Item>
+                <CollapseList.Item title="Pricing">
+                  <RadioGroup control={control} label="Selection a price type" name="priceType">
+                    {[
+                      {
+                        label: 'Fixed',
+                        labelPosition: 'left',
+                        value: 'fixed',
+                      },
+                      {
+                        label: 'Variable',
+                        labelPosition: 'left',
+                        value: 'variable',
+                      },
+                    ].map(({ value, label }) => (
+                      <div
+                        key={`gender-${value}`}
+                        style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}
+                      >
+                        <RadioGroup.Item value={value} id={value} />
+                        <label htmlFor={value}>{label}</label>
+                      </div>
+                    ))}
+                  </RadioGroup>
+                </CollapseList.Item>
+              </CollapseList>
+              <CollapseList.Item title="Settings">
+                <Switch
+                  control={control}
+                  label="Generate License Keys"
+                  name="generateLicenseKeys"
+                  size="tiny"
+                  description="Issue each sutomer a unique license key after purchase"
+                />
+                <Switch
+                  control={control}
+                  label="Redirect customers after purchase"
+                  name="redirectAfterPurchase"
+                  size="small"
+                  description="Redirect customers to a custom URL after making a purchase"
+                />
+                <Switch
+                  control={control}
+                  label="Display product on storefront?"
+                  name="onStoreFront"
+                  description="Show this product on your storefront"
+                  size="small"
+                />
+              </CollapseList.Item>
+            </form>
+          </Drawer.Body>
+          <Drawer.Footer>
+            <ButtonContainer>
+              <Button onClick={() => setOpen(false)} color="background">
+                Cancel
+              </Button>
+              <Button fullWidth type="submit" form="myform">
+                Save changes
+              </Button>
+            </ButtonContainer>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer>
+    </>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren, useId, useLayoutEffect } from 'react';
+import { useDrawerContext } from './DrawerContext';
+import { styled } from '../../../styled';
+
+const Container = styled.div<{ canDrag: boolean }>`
+  position: relative;
+  /* Large left padding is for the drawer handle */
+  padding: ${({ theme, canDrag }) =>
+    `0 ${theme.spacing['2_5']} ${theme.spacing[2]} ${canDrag ? theme.spacing['4'] : theme.spacing['2_5']}`};
+`;
+
+export const DrawerBody: FC<PropsWithChildren> = ({ children }) => {
+  const { setLabelId, canDrag } = useDrawerContext();
+  const id = useId();
+
+  useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(undefined);
+  }, [id, setLabelId]);
+
+  return <Container canDrag={canDrag}>{children}</Container>;
+};

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

@@ -0,0 +1,169 @@
+import { forwardRef, HTMLProps, useState } from 'react';
+import { styled } from '../../../styled';
+import { Button } from '../../../components';
+import { AnimatePresence, motion, PanInfo } from 'framer-motion';
+import SimpleBar from 'simplebar-react';
+
+import { FloatingFocusManager, FloatingPortal, useMergeRefs, FloatingOverlay } from '@floating-ui/react';
+import { useDrawerContext } from './DrawerContext';
+
+const Container = styled(motion.div)`
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.background};
+  width: 700px;
+  height: 100%;
+  z-index: ${({ theme }) => theme.zIndex.drawer};
+  border-left: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${({ theme }) => theme.spacing[1]};
+`;
+
+const CloseConfirmationWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+`;
+
+const CloseConfirmationContainer = styled.div`
+  height: 150px;
+  padding: ${({ theme }) => theme.spacing[2]};
+  width: calc(100% - 200px);
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+
+  h2,
+  p {
+    margin-bottom: ${({ theme }) => theme.spacing[1]};
+  }
+`;
+
+export const HandleContainer = styled.div`
+  height: 80vh;
+  top: 10vh;
+  width: 15px;
+  left: 5px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  justify-content: center;
+
+  /* handle */
+  div {
+    background-color: ${({ theme }) => theme.colors.backgroundAccent};
+    height: 100px;
+    width: 0.8rem;
+    border-radius: 9999px;
+  }
+`;
+
+export const DrawerContent = forwardRef<HTMLElement, HTMLProps<HTMLDivElement>>(function DrawerContent(props, propRef) {
+  const {
+    context,
+    labelId,
+    descriptionId,
+    getFloatingProps,
+    setOpen,
+    canDrag,
+    showConfirmDialog,
+    setShowConfirmDialog,
+  } = useDrawerContext();
+
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  const [dragPosition, setDragPosition] = useState<number>(0);
+
+  const root = document.getElementById('drawer');
+  if (!root) {
+    throw new Error('Drawer needs to render in a <div id="drawer"></div>');
+  }
+
+  const handleDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    const newPosition = Math.min(Math.max(info.offset.x / 650, 0), 1);
+    setDragPosition(newPosition);
+  };
+
+  const handleDragEnd = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    // Snap back to position if dragged to the right
+    if (info.offset.x > 450) {
+      setOpen(false);
+    } else if (info.offset.x >= 0) {
+      setDragPosition(0);
+    }
+  };
+
+  return (
+    <FloatingPortal root={root}>
+      <AnimatePresence>
+        {context.open && (
+          <FloatingOverlay
+            lockScroll
+            style={{
+              placeItems: 'end',
+              maxHeight: '100vh',
+              maxWidth: '100vw',
+              overflow: 'hidden!important',
+              display: 'grid',
+              background: `rgba(0, 0, 0, ${Math.max(0.8 - dragPosition, 0.4)})`,
+            }}
+          >
+            <FloatingFocusManager context={context}>
+              <Container
+                ref={ref}
+                aria-labelledby={labelId}
+                aria-describedby={descriptionId}
+                {...getFloatingProps(props)}
+                initial={{ x: '100%' }}
+                animate={{
+                  x: 0,
+                }}
+                exit={{
+                  x: '100%',
+                }}
+                drag={canDrag ? 'x' : false}
+                dragConstraints={{ left: 0, right: 0 }}
+                onDrag={handleDrag}
+                onDragEnd={handleDragEnd}
+                dragElastic={{ left: 0, right: 0.4 }}
+                layout
+              >
+                {canDrag && (
+                  <HandleContainer>
+                    <div />
+                  </HandleContainer>
+                )}
+                <SimpleBar style={{ maxHeight: '92vh' }}>{props.children}</SimpleBar>
+                {showConfirmDialog && (
+                  <CloseConfirmationWrapper>
+                    <CloseConfirmationContainer>
+                      <h2>Your progress will be lost</h2>
+                      <p>Are you sure you want to exit? Your progress will not be saved.</p>
+                      <ButtonContainer>
+                        <Button color="secondary" onClick={() => setShowConfirmDialog(false)}>
+                          Cancel
+                        </Button>
+                        <Button onClick={() => setOpen(false)} color="error">
+                          Discard changes
+                        </Button>
+                      </ButtonContainer>
+                    </CloseConfirmationContainer>
+                  </CloseConfirmationWrapper>
+                )}
+              </Container>
+            </FloatingFocusManager>
+          </FloatingOverlay>
+        )}
+      </AnimatePresence>
+    </FloatingPortal>
+  );
+});

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,50 @@
+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>(function DrawerHeading(
+  { 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,66 @@
+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;
+  promptCloseConfirmation?: boolean;
+}
+
+export function useDrawer({
+  initialOpen = false,
+  canDrag = false,
+  open: controlledOpen,
+  promptCloseConfirmation = false,
+  onOpenChange: setControlledOpen,
+}: DrawerOptions) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const [labelId, setLabelId] = useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = useState<string | undefined>();
+  const [showConfirmDialog, setShowConfirmDialog] = useState<boolean>(false);
+
+  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',
+      outsidePress: (_mouseEvent) => {
+        if (promptCloseConfirmation === true) {
+          setShowConfirmDialog(true);
+          return false;
+        }
+        return true;
+      },
+    }),
+  ]);
+
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      showConfirmDialog,
+      setShowConfirmDialog,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+      canDrag,
+    }),
+    [open, setOpen, interactions, data, labelId, descriptionId, showConfirmDialog],
+  );
+}

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,54 @@
+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>(function InfiniteScroll(
+  { 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 ref={ref} onClick={handleOnClick}>
+            Load more
+          </Button>
+        </div>
+      )}
+      {hasNextPage && isFetchingNextPage && (
+        <div
+          ref={ref}
+          style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
+        >
+          <Spinner size="medium" />
+        </div>
+      )}
+    </>
+  );
+});