@bronzelabs/oakma-ui 0.0.1

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,318 @@
+import React from "react"
+
+// Components
+import Modal from "./Modal"
+import Button from "../Button"
+import TextInput from "../TextInput"
+
+// Types
+import type { StoryFn, Meta } from "@storybook/react-webpack5"
+
+// Utils
+import { StorybookActionButton } from "../../../.storybook/components"
+import { renderDocsWithProps } from "../../../.storybook/utils"
+import extraDocs from "./Modal.docs.md"
+
+const lorem = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`
+
+/*
+
+
+
+
+*/
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+  parameters: {
+    controls: {
+      exclude: ["ref", "children"],
+    },
+    docs: {
+      description: {
+        component: "A component that can be used to display content in a modal.",
+      },
+      page: renderDocsWithProps({ extraDocs }),
+    },
+  },
+  argTypes: {
+    isOpen: {
+      description: "Controls whether the Modal is visible.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    onClose: {
+      description:
+        "Callback fired when the Modal should close (close button, outside click, or Escape key).",
+      control: false,
+      table: {
+        type: { summary: "() => void" },
+      },
+    },
+    withBackdrop: {
+      description: "Renders a blurred backdrop behind the Modal.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    withCloseButton: {
+      description: "Renders an X button in the top-right corner of the Modal.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    closeOnClickOutside: {
+      description: "Calls `onClose` when the user clicks outside the Modal.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    closeOnEscape: {
+      description: "Calls `onClose` when the user presses the Escape key.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    lockScroll: {
+      description: "Locks body scroll while the Modal is open.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    trapFocus: {
+      description: "Traps keyboard focus inside the Modal while it is open.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    portal: {
+      description:
+        "DOM element or DocumentFragment to render the Modal portal into. Defaults to `document.body`.",
+      control: false,
+      table: {
+        type: { summary: "Element | DocumentFragment" },
+        defaultValue: { summary: "document.body" },
+      },
+    },
+    header: {
+      description: "Replaces the default title/subtitle area with a custom React node.",
+      control: false,
+      table: {
+        type: { summary: "ReactNode" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    footer: {
+      description: "Renders a sticky footer area at the bottom of the Modal.",
+      control: false,
+      table: {
+        type: { summary: "ReactNode" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    contentClassName: {
+      description: "Additional CSS class applied to the scrollable content wrapper.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    title: {
+      description:
+        "@deprecated — not currently rendered. Use `header` to display a custom heading.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+        category: "Deprecated",
+      },
+    },
+    subTitle: {
+      description:
+        "@deprecated — not currently rendered. Use `header` to display a custom subheading.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "undefined" },
+        category: "Deprecated",
+      },
+    },
+  },
+  args: {
+    withBackdrop: true,
+    withCloseButton: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    lockScroll: true,
+    trapFocus: true,
+    children: <p>{lorem}</p>,
+  },
+  decorators: [
+    (Story, { args: { onClose, ...rest } }) => {
+      const [isOpen, setIsOpen] = React.useState(false)
+
+      return (
+        <>
+          <StorybookActionButton onClick={() => setIsOpen(true)}>Open modal</StorybookActionButton>
+          {Story({
+            args: {
+              isOpen: isOpen,
+              onClose: () => {
+                setIsOpen(false)
+                onClose?.()
+              },
+              ...rest,
+            },
+          })}
+        </>
+      )
+    },
+  ],
+} satisfies Meta<typeof Modal>
+
+// Templates
+const DummyContent = () => (
+  <div className="flex flex-col pb-6 text-center">
+    <h2 className="mb-6 font-lora text-2xl font-medium text-neutral-100">Change account photo</h2>
+    <div className="mb-3 flex flex-col items-center gap-3 rounded-3xl border border-stroke-dark p-8">
+      <h3 className="font-inter text-lg font-medium text-neutral-100">Upload your photo</h3>
+      <Button size="sm" variant="secondary">
+        Select File
+      </Button>
+    </div>
+    <p className="text-xs text-neutral-50">
+      It should be smaller than 2MB, and it should show your face.
+    </p>
+  </div>
+)
+
+const Template: StoryFn<typeof Modal> = args => <Modal {...args} />
+
+const CustomFooterTemplate: StoryFn<typeof Modal> = args => (
+  <Modal
+    {...args}
+    footer={
+      <div className="flex gap-1.5">
+        <Button className="w-full" size="md" variant="secondary" onClick={args.onClose}>
+          Accept
+        </Button>
+        <Button className="w-full" size="md" variant="danger" onClick={args.onClose} data-autofocus>
+          Decline
+        </Button>
+      </div>
+    }
+  />
+)
+
+const WithFormTemplate: StoryFn<typeof Modal> = args => (
+  <Modal {...args}>
+    <form
+      className="grid gap-6"
+      onSubmit={e => {
+        e.preventDefault()
+        args.onClose()
+        alert("submitted")
+      }}
+    >
+      <TextInput id="example" type="email" label="Email" placeholder="Enter your email" required />
+      <Button className="w-full">Finish</Button>
+    </form>
+  </Modal>
+)
+
+// Stories
+const Default = Template.bind({})
+const CustomHeader = Template.bind({})
+const CustomFooter = CustomFooterTemplate.bind({})
+const Wide = Template.bind({})
+const Long = Template.bind({})
+const WithForm = WithFormTemplate.bind({})
+
+// Args
+Default.args = {
+  children: <DummyContent />,
+}
+
+CustomHeader.args = {
+  header: (
+    <header
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        padding: 24,
+        background:
+          "linear-gradient(90deg, rgb(2 0 36 / 1) 0%, rgb(9 9 121 / 1) 35%, rgb(0 212 255 / 1) 100%)",
+      }}
+    >
+      <h5 style={{ margin: 0, color: "white" }}>This is a custom header</h5>
+    </header>
+  ),
+}
+
+Wide.args = {
+  children: <DummyContent />,
+  className: "sm:w-[600px]",
+}
+
+Long.args = {
+  title: "Title",
+  subTitle: "Subtitle",
+  children: (
+    <div className="grid gap-3">
+      <p>{lorem}</p>
+      <p>{lorem}</p>
+      <p>{lorem}</p>
+      <p>{lorem}</p>
+      <p>{lorem}</p>
+      <p>{lorem}</p>
+    </div>
+  ),
+}
+
+// Parameters
+CustomHeader.parameters = {
+  docs: {
+    description: {
+      story:
+        "The `header` prop can be used to render a custom header. (e.g. `header={<h1>Custom header</h1>}`)",
+    },
+  },
+}
+
+CustomFooter.parameters = {
+  docs: {
+    description: {
+      story:
+        "The `footer` prop can be used to render a custom footer. (e.g. `footer={<h1>Custom footer</h1>}`)",
+    },
+  },
+}
+
+Wide.parameters = {
+  docs: {
+    description: {
+      story:
+        "To set a custom width for the Modal pass a tailwind width class to the className prop (e.g. `w-96` or `w-[64rem]`).",
+    },
+  },
+}
+
+export { Default, CustomHeader, CustomFooter, Wide, Long, WithForm }
+export default meta

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,217 @@
+"use client"
+
+import React, { useEffect } from "react"
+import { createPortal } from "react-dom"
+
+// Components
+import { XMarkIcon } from "@heroicons/react/20/solid"
+
+// 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 modalVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    x: "-50%",
+    y: "-45%",
+    transition: {
+      duration: 0.15,
+      ease: [0.4, 0, 0.2, 1],
+    },
+  },
+  visible: {
+    opacity: 1,
+    x: "-50%",
+    y: "-50%",
+    transition: {
+      duration: 0.15,
+      ease: [0.4, 0, 0.2, 1],
+    },
+  },
+}
+
+// Params
+interface ModalProps extends HTMLMotionProps<"div"> {
+  /** */
+  isOpen?: boolean
+  /** Callback function that's called when the Modal is closed. */
+  onClose: () => void
+  /** */
+  withBackdrop?: boolean
+  /** */
+  withCloseButton?: boolean
+  /** */
+  closeOnClickOutside?: boolean
+  /** */
+  closeOnEscape?: boolean
+  /** */
+  lockScroll?: boolean
+  /** */
+  trapFocus?: boolean
+  /** */
+  portal?: Element | DocumentFragment
+  /** @deprecated Not currently in use */
+  /** Title to use at the top of the Modal. */
+  title?: string
+  /** @deprecated Not currently in use */
+  /** Subtitle to use at the top of the Modal. */
+  subTitle?: string
+  /** A React Node that's displayed in place of the default `title` and `subTitle`. */
+  header?: React.ReactNode
+  /** A React Node that's displayed at the bottom of the Modal. */
+  footer?: React.ReactNode
+  /** */
+  children?: React.ReactNode
+  /** */
+  contentClassName?: string
+}
+
+const MODAL_EVENT = "oakma-modal-state"
+
+/*
+
+
+
+
+
+*/
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen = false,
+  withBackdrop = true,
+  withCloseButton = true,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  trapFocus = true,
+  portal,
+  onClose,
+  title, // eslint-disable-line
+  subTitle, // eslint-disable-line
+  className,
+  children,
+  header,
+  footer,
+  contentClassName,
+  ref,
+  ...rest
+}) => {
+  // Refs
+  const focusRef = useFocusTrap(trapFocus && isOpen)
+  const combinedRefs = useCombinedRefs<HTMLDivElement | null>(ref, focusRef)
+
+  // Events
+  useOnClickOutside<HTMLDivElement | null>(combinedRefs, () => {
+    if (closeOnClickOutside) onClose()
+  })
+
+  useEventListener("keydown", e => {
+    if (closeOnEscape && e.key === "Escape") onClose()
+  })
+
+  useLockBodyScroll(lockScroll && isOpen)
+
+  // Effects
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent(MODAL_EVENT, { detail: { open: isOpen } }))
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent(MODAL_EVENT, { detail: { open: false } }))
+      }
+    }
+  }, [isOpen])
+
+  if (typeof window === "undefined") {
+    return null
+  }
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-9998">
+          {withBackdrop && (
+            <motion.div
+              className="fixed inset-0 opacity-30 backdrop-blur-xs"
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={backdropVariants}
+              role="presentation"
+              style={{ backgroundColor: "rgba(15 41 41 / 0.3)" }}
+            />
+          )}
+
+          <motion.div
+            className={clsx(
+              "fixed top-1/2 left-1/2 flex max-h-[90vh] w-[calc(100vw-3rem)] shrink-0 flex-col gap-4 overflow-hidden rounded-5xl bg-white shadow-md sm:w-96",
+              className,
+            )}
+            ref={combinedRefs}
+            role="dialog"
+            aria-modal
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={modalVariants}
+            {...rest}
+          >
+            <header
+              className={clsx(
+                "sticky top-0 grid w-full grid-cols-[auto_min-content] items-start gap-4 bg-transparent pt-4 pl-6",
+                withCloseButton ? "pr-4" : "p-6",
+              )}
+            >
+              {header && <>{header}</>}
+
+              {/* {!header && !!title && (
+                <div className="flex flex-col pt-1">
+                  <h2 className="font-lora text-2xl font-medium text-neutral-100">{title}</h2>
+                  {subTitle && <p className="text-neutral-50">{subTitle}</p>}
+                </div>
+              )} */}
+
+              {withCloseButton && (
+                <button
+                  className="col-start-2 -mt-0.5 -mr-0.5 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 modal"
+                >
+                  <XMarkIcon className="size-6" />
+                </button>
+              )}
+            </header>
+
+            <div
+              className={clsx(
+                "size-full overflow-scroll px-6",
+                !footer && "pb-6",
+                contentClassName,
+              )}
+            >
+              {children}
+            </div>
+
+            {footer && <footer className="bg-transparent px-6 pb-4">{footer}</footer>}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>,
+    portal || document.body,
+  )
+}
+
+Modal.displayName = "Modal"
+export default Modal
+export type { ModalProps }

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { default, type ModalProps } from "./Modal"

package/src/components/MultiSelect/AsyncMultiSelect.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import React from "react"
+
+// Components
+import { AsyncDropdown, type AsyncDropdownProps } from "../Dropdown"
+import { MultiSelectOption } from "./MultiSelect"
+
+// Props
+interface AsyncMultiSelectProps extends Omit<AsyncDropdownProps, "isMulti"> {
+  cy?: string
+}
+
+const multiSelectComponents = { Option: MultiSelectOption }
+
+/*
+
+
+
+
+
+*/
+
+const AsyncMultiSelect: React.FC<AsyncMultiSelectProps> = ({
+  tabSelectsValue = false,
+  closeMenuOnSelect = false,
+  hideSelectedOptions = false,
+  isClearable = false,
+  ...rest
+}) => {
+  return (
+    <AsyncDropdown
+      closeMenuOnSelect={closeMenuOnSelect}
+      hideSelectedOptions={hideSelectedOptions}
+      tabSelectsValue={tabSelectsValue}
+      // @ts-expect-error - The `isMulti` prop is not supported when used by external consumers, however it is required internally to render the correct components and behavior.
+      isMulti
+      isClearable={isClearable}
+      components={multiSelectComponents}
+      {...rest}
+    />
+  )
+}
+
+AsyncMultiSelect.displayName = "AsyncMultiSelect"
+export default AsyncMultiSelect
+export type { AsyncMultiSelectProps }

package/src/components/MultiSelect/MultiSelect.docs.md

@@ -0,0 +1,37 @@
+## Usage with `react-hook-form`
+
+Due to the nature of the component should, you want to use the MultiSelect 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-multi-select"
+        control={control}
+        render={({ field }) => {
+          return <MultiSelect {...multiSelectProps} {...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 multi select
+[
+  { "label": "Item 1", "value": "item-1" },
+  { "label": "Item 2", "value": "item-2" },
+  { "label": "Item 3", "value": "item-3" }
+]
+```