@bronzelabs/oakma-ui 0.0.1 → 0.0.2

package/src/components/Drawer/Drawer.tsx

@@ -1,194 +0,0 @@
-"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

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

package/src/components/Drawer/types.ts

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

package/src/components/Dropdown/AsyncDropdown.tsx

@@ -1,105 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-## 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" }]
-```