@bronzelabs/oakma-ui 0.0.1

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+import { createPortal } from "react-dom"
+
+// Components
+import { XMarkIcon } from "@heroicons/react/20/solid"
+
+// Types
+import type { DrawerPosition } from "./types"
+
+// Utils
+import { motion, AnimatePresence, Variants, HTMLMotionProps } from "motion/react"
+import clsx from "clsx"
+import {
+  useCombinedRefs,
+  useEventListener,
+  useLockBodyScroll,
+  useOnClickOutside,
+  useFocusTrap,
+} from "../../hooks"
+import { backdropVariants } from "../../utils/animation/variants"
+
+// Variants
+const initialCoords = {
+  top: { x: "0%", y: "calc(-100% - 1.5rem)" },
+  right: { x: "calc(100% + 1.5rem)", y: "0%" },
+  bottom: { x: "0%", y: "calc(100% + 1.5rem)" },
+  left: { x: "calc(-100% - 1.5rem)", y: "0%" },
+}
+
+const drawerVariants: Variants = {
+  initial: (position: DrawerPosition) => initialCoords[position],
+  animate: {
+    x: "0%",
+    y: "0%",
+    transition: {
+      duration: 0.3,
+      ease: [0.4, 0, 0.2, 1],
+    },
+  },
+  exit: (position: DrawerPosition) => ({
+    ...initialCoords[position],
+    transition: {
+      duration: 0.3,
+      ease: [0.4, 0, 0.2, 1],
+    },
+  }),
+}
+
+// Params
+interface DrawerProps extends HTMLMotionProps<"div"> {
+  /** Side of the screen on which the Drawer will be opened. */
+  position?: DrawerPosition
+  /** Whether the Drawer is open. */
+  isOpen?: boolean
+  /** Function called when the Drawer is closed. */
+  onClose: () => void
+  /** Whether the backdrop should be rendered. */
+  withBackdrop?: boolean
+  /** Whether the close button should be rendered. */
+  withCloseButton?: boolean
+  /** Whether the Drawer should be closed when user clicks on the overlay. */
+  closeOnClickOutside?: boolean
+  /** Whether `onClose` should be called when user presses the escape key. */
+  closeOnEscape?: boolean
+  /** Whether scroll should be locked when `isOpen={true}`. */
+  lockScroll?: boolean
+  /** Whether focus should be trapped within the drawer when `isOpen={true}`. */
+  trapFocus?: boolean
+  /** The portal the Drawer should be rendered inside.*/
+  portal?: Element | DocumentFragment
+  /** */
+  children?: React.ReactNode
+}
+
+const MODAL_EVENT = "tribe-modal-state"
+
+/*
+
+
+
+
+
+*/
+
+const Drawer: React.FC<DrawerProps> = ({
+  position = "left",
+  isOpen = false,
+  withBackdrop = true,
+  withCloseButton = true,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  trapFocus = true,
+  portal,
+  onClose,
+  className,
+  children,
+  ref,
+  ...rest
+}) => {
+  // Refs
+  const focusRef = useFocusTrap(trapFocus && isOpen)
+  const combinedRefs = useCombinedRefs<HTMLDivElement | null>(ref, focusRef)
+
+  // State
+  const [modalOpen, setModalOpen] = useState(false)
+
+  // Effects
+  useEffect(() => {
+    function handleModalEvent(e: Event): void {
+      const custom = e as CustomEvent
+      setModalOpen(!!custom.detail?.open)
+    }
+
+    window.addEventListener(MODAL_EVENT, handleModalEvent)
+
+    return () => {
+      window.removeEventListener(MODAL_EVENT, handleModalEvent)
+    }
+  }, [])
+
+  useOnClickOutside<HTMLDivElement | null>(combinedRefs, () => {
+    if (closeOnClickOutside && !modalOpen) onClose()
+  })
+
+  useEventListener("keydown", e => {
+    if (closeOnEscape && e.key === "Escape" && !modalOpen) onClose()
+  })
+
+  useLockBodyScroll(lockScroll && isOpen)
+
+  if (typeof window === "undefined") {
+    return null
+  }
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-9998">
+          {withBackdrop && (
+            <motion.div
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={backdropVariants}
+              role="presentation"
+              className="fixed inset-0 opacity-30 backdrop-blur-xs"
+              style={{ backgroundColor: "rgba(15 41 41 / 0.3)" }}
+            />
+          )}
+
+          <motion.div
+            ref={combinedRefs}
+            className={clsx(
+              "fixed flex flex-col overflow-hidden rounded-5xl bg-white",
+              position === "top" && "inset-x-3 top-3 h-[min(14rem,calc(100dvh-1.5rem))]",
+              position === "right" && "inset-y-3 right-3 w-[min(30rem,calc(100vw-1.5rem))]",
+              position === "bottom" && "inset-x-3 bottom-3 h-[min(14rem,calc(100dvh-1.5rem))]",
+              position === "left" && "inset-y-3 left-3 w-[min(30rem,calc(100vw-1.5rem))]",
+              isOpen && "shadow-md",
+              className,
+            )}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={drawerVariants}
+            custom={position}
+            {...rest}
+          >
+            {withCloseButton && (
+              <div className="sticky top-0 z-40 flex justify-end gap-6 bg-white px-4 pt-4.5 pb-2">
+                <button
+                  className="flex size-6 cursor-pointer items-center justify-center justify-self-end rounded-full text-neutral-50 transition-colors hover:bg-neutral-50/10 hover:text-neutral-100 focus-visible:bg-neutral-50/10 focus-visible:text-neutral-100 active:bg-neutral-50/20"
+                  onClick={onClose}
+                  title="Close drawer"
+                >
+                  <XMarkIcon className="size-5" />
+                </button>
+              </div>
+            )}
+            <>{children}</>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    portal || document?.body,
+  )
+}
+
+Drawer.displayName = "Drawer"
+export default Drawer
+export type { DrawerProps }

package/src/components/Drawer/index.ts

@@ -0,0 +1,3 @@
+export { default, type DrawerProps } from "./Drawer"
+
+export { DRAWER_POSITIONS, type DrawerPosition } from "./types"

package/src/components/Drawer/types.ts

@@ -0,0 +1,3 @@
+export const DRAWER_POSITIONS = ["top", "right", "bottom", "left"] as const
+
+export type DrawerPosition = (typeof DRAWER_POSITIONS)[number]

package/src/components/Dropdown/AsyncDropdown.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import React from "react"
+
+// Components
+import { Container, ErrorMessage, Label } from "../TextField"
+import AsyncReactSelect, { type AsyncProps } from "react-select/async"
+
+// Types
+import type { DropdownSharedProps } from "./types"
+import type { GroupBase } from "react-select"
+
+// Utils
+import { useDropdown } from "./useDropdown"
+
+// Params
+interface AsyncDropdownProps
+  extends Omit<AsyncProps<unknown, boolean, GroupBase<unknown>>, "isMulti">, DropdownSharedProps {
+  ref?: React.Ref<React.ComponentRef<typeof AsyncReactSelect>>
+  /**
+   * The `isMulti` prop is not supported in the `AsyncDropdown` component. Please use the `MultiSelect` component for multi-select functionality.
+   */
+  isMulti?: never
+}
+
+/*
+
+
+
+
+
+*/
+
+const AsyncDropdown: React.FC<AsyncDropdownProps> = ({
+  id,
+  label,
+  leadingIcon,
+  showOptional = true,
+  className,
+  required,
+  error,
+  size = "md",
+  // variant = "dark",
+  onMenuOpen,
+  inputId: _inputId,
+  instanceId: _instanceId,
+  components: _components,
+  classNames,
+  openMenuOnFocus = true,
+  showSelectedCount = true,
+  ...rest
+}) => {
+  const { fieldId, instanceId, inputId, handleMenuOpen, stableComponents, selectClassNames } =
+    useDropdown({
+      id,
+      leadingIcon,
+      onMenuOpen,
+      required,
+      classNames,
+      size,
+      showSelectedCount,
+      components: _components,
+      inputId: _inputId,
+      instanceId: _instanceId,
+    })
+
+  return (
+    <div className={className} id={fieldId}>
+      <Container
+        size={size}
+        hasButton={false}
+        label={label}
+        showOptional={showOptional}
+        required={required}
+        variant={"dark"}
+      >
+        {label && (
+          <Label
+            inputId={inputId}
+            label={label}
+            showOptional={showOptional}
+            required={required}
+            variant={"dark"}
+          />
+        )}
+
+        <AsyncReactSelect
+          unstyled
+          inputId={inputId}
+          required={required}
+          onMenuOpen={handleMenuOpen}
+          openMenuOnFocus={openMenuOnFocus}
+          components={stableComponents}
+          classNames={selectClassNames}
+          instanceId={instanceId}
+          {...rest}
+        />
+      </Container>
+      {error && <ErrorMessage id={inputId} error={error} />}
+    </div>
+  )
+}
+
+export default AsyncDropdown
+export type { AsyncDropdownProps }

package/src/components/Dropdown/Dropdown.docs.md

@@ -0,0 +1,33 @@
+## Usage with `react-hook-form`
+
+Due to the nature of the component should, you want to use the Dropdown within a form managed by `react-hook-form`, you'll need to use their `Controller` component:
+
+```tsx
+"use client"
+
+import React from "react"
+import { useForm, Controller } from "react-hook-form"
+
+export default function MyForm() {
+  const { control, handleSubmit } = useForm()
+
+  return (
+    <form onSubmit={handleSubmit(data => console.log(data))}>
+      <Controller
+        name="controlled-dropdown"
+        control={control}
+        render={({ field }) => {
+          return <Dropdown {...dropdownProps} {...field} />
+        }}
+      />
+    </form>
+  )
+}
+```
+
+Doing this will mean that the result from the component will be correctly passed to `rhf`'s submit handler.
+
+```json
+// example result from single item select
+[{ "label": "Item 1", "value": "item-1" }]
+```