@bronzelabs/oakma-ui 0.0.1 → 0.0.2

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

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

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

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

package/src/components/MultiSelect/AsyncMultiSelect.tsx

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

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