Update Modal Component (#27)

* feature(modal): add drag to close functionality

* feat(commitlint): add feat rule

* fix: update lock file

* refactor(modal): update drag constraints

* feat(hooks): add custom breakpoint hooks

* feat(hooks): add custom useIsMobile hook

* refactor(modal): update content to only be draggable on mobile screens

* style(modal): refactor styles

* ci(changesets): add changeset for modal refactor

* style(modal): adjust styles for better mobile response

.changeset/shaggy-roses-walk.md

@@ -0,0 +1,5 @@
+---
+"@hobbescodes/tigris-ui": patch
+---
+
+Update responsive design of `Modal` component

commitlint.config.ts

@@ -23,6 +23,7 @@ const commitlintConfig: CommitlintUserConfig = {
         "chore", // maintenance
         "ci", // continuous integration
         "docs", // update documentation
+        "feat", // add a new "feature
         "feature", // add a feature
         "fix", // fix a bug
         "perf", // performance improvement

docs/usage.md

@@ -58,7 +58,7 @@ Now you are ready to install the UI library. You can either install it [from the
 
 ## Remote
 
-Install from remote repository along with required dependencies: `bun add @hobbescodes/tigris-ui @ark-ui/react`
+Install from remote repository along with required dependencies: `bun add @hobbescodes/tigris-ui @ark-ui/react framer-motion`
 
 ## Local
 

package.json

@@ -89,6 +89,7 @@
     "eslint-plugin-testing-library": "^6.1.0",
     "eslint-plugin-typescript-sort-keys": "^3.1.0",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "framer-motion": "^10.16.4",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.2",

src/components/Modal/Modal.tsx

@@ -9,21 +9,28 @@ import {
   DialogTrigger,
   Portal,
 } from "@ark-ui/react";
+import { motion } from "framer-motion";
+import { useState } from "react";
 import { FiX as CloseIcon } from "react-icons/fi";
 
 import Icon from "components/Icon/Icon";
+import { panda } from "generated/panda/jsx";
 import { modal } from "generated/panda/recipes";
+import { useIsMobile } from "lib/hooks";
 import { getContextualChildren } from "lib/util";
 
 import type { DialogProps } from "@ark-ui/react";
+import type { ModalVariantProps } from "generated/panda/recipes";
 import type { ReactNode } from "react";
 
-export interface ModalProps extends DialogProps {
+export interface ModalProps extends DialogProps, ModalVariantProps {
   trigger?: ReactNode;
   title?: string;
   description?: string;
 }
 
+const PandaMotionContainer = panda(motion.div);
+
 /**
  * A modal window that appears on top of the main content.
  */
@@ -32,9 +39,14 @@ const Modal = ({
   title,
   description,
   children,
+  variant,
   ...rest
 }: ModalProps) => {
-  const classes = modal();
+  const classes = modal({ variant });
+
+  const [isTapped, setIsTapped] = useState(false);
+
+  const isMobile = useIsMobile();
 
   return (
     <Dialog {...rest}>
@@ -50,27 +62,51 @@ const Modal = ({
             <DialogBackdrop className={classes.backdrop} />
 
             <DialogContainer className={classes.container}>
-              <DialogContent className={classes.content}>
-                {title && (
-                  <DialogTitle className={classes.title}>{title}</DialogTitle>
-                )}
+              <DialogContent className={classes.content} unmountOnExit asChild>
+                <PandaMotionContainer
+                  drag={isMobile ? "y" : false}
+                  dragConstraints={{ top: 0, bottom: 500 }}
+                  dragElastic={false}
+                  dragSnapToOrigin
+                  onDrag={(_e, info) => {
+                    if (info.offset.y > 250) ctx.close();
+                  }}
+                  onTapStart={() => setIsTapped(true)}
+                  onTap={() => setIsTapped(false)}
+                  cursor={isMobile ? "pointer" : "default"}
+                >
+                  <panda.div
+                    display={{ base: "block", sm: "none" }}
+                    w="20%"
+                    borderRadius="full"
+                    mx="auto"
+                    my={3}
+                    h={2}
+                    bgColor="border.primary"
+                    opacity={isTapped ? 0.8 : 1}
+                  />
 
-                {description && (
-                  <DialogDescription className={classes.description}>
-                    {description}
-                  </DialogDescription>
-                )}
+                  {title && (
+                    <DialogTitle className={classes.title}>{title}</DialogTitle>
+                  )}
 
-                {getContextualChildren({ ctx, children })}
+                  {description && (
+                    <DialogDescription className={classes.description}>
+                      {description}
+                    </DialogDescription>
+                  )}
 
-                <DialogCloseTrigger
-                  aria-label="close button"
-                  className={classes.closeTrigger}
-                >
-                  <Icon color="fg.primary">
-                    <CloseIcon />
-                  </Icon>
-                </DialogCloseTrigger>
+                  {getContextualChildren({ ctx, children })}
+
+                  <DialogCloseTrigger
+                    aria-label="close button"
+                    className={classes.closeTrigger}
+                  >
+                    <Icon color="fg.primary">
+                      <CloseIcon />
+                    </Icon>
+                  </DialogCloseTrigger>
+                </PandaMotionContainer>
               </DialogContent>
             </DialogContainer>
           </Portal>

src/index.ts

@@ -1,11 +1,16 @@
 // inject root cascade layers
 import "lib/styles/main.css";
 
+// export preset
 export { tigrisPreset } from "lib/theme/presets";
 
 // 🐼 export backfill of Panda components
 export * from "generated/panda/css";
 export * from "generated/panda/jsx";
 export type { JsxStyleProps } from "generated/panda/types";
 
+// export components
 export * from "components";
+
+// export hooks
+export * from "lib/hooks";

src/lib/hooks/index.ts

@@ -0,0 +1,3 @@
+export { default as useBreakpoint } from "./useBreakpoint/useBreakpoint";
+export { default as useBreakpointValue } from "./useBreakpointValue/useBreakpointValue";
+export { default as useIsMobile } from "./useIsMobile/useIsMobile";

src/lib/hooks/useBreakpoint/useBreakpoint.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+
+import { breakpoints } from "lib/theme/extensions/base";
+import { emToPx } from "lib/util";
+
+import type { BreakpointToken } from "generated/panda/tokens";
+
+interface WindowDimensions {
+  width: typeof window.innerWidth;
+  height: typeof window.innerHeight;
+}
+
+export interface Options {
+  /** Fallback breakpoint to use if no match is found, or if `window` is undefined as in server-side contexts. Defaults to "base". */
+  fallback?: BreakpointToken;
+}
+
+/**
+ * Get the current theme breakpoint.
+ */
+const useBreakpoint = ({ fallback = "base" }: Options = {}) => {
+  const [breakpoint, setBreakpoint] = useState<BreakpointToken>(fallback),
+    [windowDimensions, setWindowDimensions] = useState<WindowDimensions>({
+      width: 0,
+      height: 0,
+    });
+
+  const handleResize = () => {
+    setWindowDimensions({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  };
+
+  useEffect(() => {
+    // attach listener to window `resize` event
+    window.addEventListener("resize", handleResize);
+    handleResize();
+
+    // create tuple mapping of semantic breakpoint keys with their values
+    const range = Object.entries(breakpoints)
+      .map(([key, breakpoint]) => [key, emToPx(breakpoint as `${number}em`)])
+      // reverse to set largest breakpoint at the start (top-down; decreasing order)
+      .reverse();
+
+    setBreakpoint(
+      // find the first "floored" breakpoint below the window width
+      range.find(
+        ([, breakpoint]) => +breakpoint <= windowDimensions.width
+      )?.[0] as BreakpointToken
+    );
+
+    // clean up listener
+    return () => window.removeEventListener("resize", handleResize);
+  }, [windowDimensions.width]);
+
+  return breakpoint;
+};
+
+export default useBreakpoint;

src/lib/hooks/useBreakpointValue/useBreakpointValue.tsx

@@ -0,0 +1,51 @@
+import useBreakpoint from "../useBreakpoint/useBreakpoint";
+import { breakpoints as defaultBreakpoints } from "lib/theme/extensions/base";
+
+import type { BreakpointToken } from "generated/panda/tokens";
+
+/**
+ * Get the closest value to the current breakpoint. This logic is taken from Chakra UI's `getClosestValue` function.
+ * @see https://github.com/chakra-ui/chakra-ui/blob/bd3d0fd2f444be2ba23764d7c86906cb488fb409/packages/components/media-query/src/media-query.utils.ts#L3-L32
+ * @param values The arbitrary values to compare against.
+ * @param breakpoint The current breakpoint.
+ * @returns The closest value to the current breakpoint.
+ */
+const getClosestValue = <T,>(values: Record<string, T>, breakpoint: string) => {
+  const breakpoints = Object.keys(defaultBreakpoints);
+
+  let index = Object.keys(values).indexOf(breakpoint);
+
+  if (index !== -1) return values[breakpoint];
+
+  let stopIndex = breakpoints.indexOf(breakpoint);
+
+  while (stopIndex >= 0) {
+    const key = breakpoints[stopIndex];
+
+    if (values.hasOwnProperty(key)) {
+      index = stopIndex;
+      break;
+    }
+    stopIndex -= 1;
+  }
+
+  if (index !== -1) {
+    const key = breakpoints[index];
+    return values[key];
+  }
+
+  return undefined;
+};
+
+export type Options<V> = Partial<Record<BreakpointToken, V>>;
+
+/**
+ * Get conditional value based on theme breakpoints.
+ */
+const useBreakpointValue = <V,>(values: Options<V>): V | undefined => {
+  const breakpoint = useBreakpoint();
+
+  return getClosestValue(values, breakpoint);
+};
+
+export default useBreakpointValue;

src/lib/hooks/useIsMobile/useIsMobile.tsx

@@ -0,0 +1,5 @@
+import useBreakpointValue from "lib/hooks/useBreakpointValue/useBreakpointValue";
+
+const useIsMobile = () => useBreakpointValue({ base: true, sm: false });
+
+export default useIsMobile;

src/lib/theme/extensions/base/breakpoints.base.ts

@@ -0,0 +1,13 @@
+/**
+ * Device breakpoints for responsive design.
+ */
+const breakpoints = {
+  base: "0em",
+  sm: "40em",
+  md: "48em",
+  lg: "64em",
+  xl: "80em",
+  "2xl": "96em",
+};
+
+export default breakpoints;

src/lib/theme/extensions/base/index.ts

@@ -1 +1,2 @@
+export { default as breakpoints } from "./breakpoints.base";
 export { default as keyframes } from "./keyframes.base";

src/lib/theme/extensions/base/keyframes.base.ts

@@ -38,7 +38,6 @@ const keyframes = defineKeyframes({
     "100%": { transform: "translateY(0)" },
   },
   "slide-out-bottom": {
-    "0%": { transform: "translateY(0)" },
     "100%": { transform: "translateY(100%)" },
   },
   "slide-in-top": {

src/lib/theme/extensions/slotRecipes/modal.slotRecipe.ts

@@ -32,22 +32,16 @@ const modal = defineSlotRecipe({
       zIndex: "modal",
     },
     content: {
-      position: "relative",
       mx: 1,
-      p: 6,
+      pt: { base: 0, sm: 6 },
+      px: 6,
+      pb: 6,
       bgColor: "bg.primary",
       boxShadow: "lg",
-      borderRadius: "md",
       borderWidth: "1px",
       borderColor: "border.primary",
       color: "fg.primary",
-      w: { base: "xs", sm: "sm" },
-      _open: {
-        animation: "slide-in",
-      },
-      _closed: {
-        animation: "slide-out",
-      },
+      w: { base: "full", sm: "sm" },
     },
     title: {
       color: "fg.primary",
@@ -69,8 +63,42 @@ const modal = defineSlotRecipe({
       borderRadius: "sm",
       p: 2,
       bgColor: { base: "inherit", _hover: "bg.subtle" },
+      display: { base: "none", sm: "inline-flex" },
     },
   },
+  variants: {
+    variant: {
+      primary: {
+        content: {
+          position: "relative",
+          borderRadius: "md",
+          _open: {
+            animation: "slide-in",
+          },
+          _closed: {
+            animation: "slide-out",
+          },
+        },
+      },
+      mobile: {
+        content: {
+          position: "absolute",
+          bottom: 0,
+          borderTopRadius: "xl",
+          minH: "50vh",
+          _open: {
+            animation: "slide-in-bottom",
+          },
+          _closed: {
+            animation: "slide-out-bottom",
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: { base: "mobile", sm: "primary" },
+  },
 });
 
 export default modal;

src/lib/theme/extensions/tokens/animations.tokens.ts

@@ -29,7 +29,7 @@ const animations = defineTokens.animations({
     value: "slide-in-bottom 400ms {easings.emphasized-in}",
   },
   "slide-out-bottom": {
-    value: "slide-out-bottom 200ms {easings.emphasized-out}",
+    value: "slide-out-bottom 200ms",
   },
   "slide-in-top": {
     value: "slide-in-top 400ms {easings.emphasized-in}",