@bronzelabs/oakma-ui 0.0.1 → 0.0.2

package/src/components/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export { default, type CheckboxProps } from "./Checkbox"
-export { CHECKBOX_SIZES, type CheckboxSize } from "./types"

package/src/components/Checkbox/types.ts

@@ -1,6 +0,0 @@
-export const CHECKBOX_SIZES = {
-  sm: "sm",
-  md: "md",
-} as const
-
-export type CheckboxSize = keyof typeof CHECKBOX_SIZES

package/src/components/Chip/Chip.stories.tsx

@@ -1,146 +0,0 @@
-import React from "react"
-
-// Components
-import Chip from "./Chip"
-
-// Types
-import type { Meta, StoryFn } from "@storybook/react-webpack5"
-import type { ChipProps } from "./Chip"
-import { CHIP_SIZES } from "./types"
-
-// Utils
-import { DummyPhoneIcon } from "../../../.storybook/components"
-
-/*
-
-
-
-
-*/
-
-const meta: Meta<ChipProps> = {
-  title: "Components/Chip",
-  component: Chip,
-  parameters: {
-    docs: {
-      description: {
-        component: "A compact label used to categorise, filter, or provide status context.",
-      },
-    },
-    controls: {
-      exclude: ["className", "ref"],
-    },
-  },
-  argTypes: {
-    size: {
-      type: "string",
-      description: "Size of the Chip.",
-      table: {
-        type: {
-          summary: Object.keys(CHIP_SIZES)
-            .map(s => `"${s}"`)
-            .join(" | "),
-        },
-        defaultValue: {
-          summary: `"sm"`,
-        },
-      },
-      options: Object.keys(CHIP_SIZES),
-      control: { type: "select" },
-    },
-    children: {
-      type: "string",
-      description: "The label text to display inside the Chip.",
-      table: {
-        type: { summary: "React.ReactNode" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    count: {
-      description: "Displays a count badge before the label.",
-      table: {
-        type: { summary: "number | string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-  },
-  args: {
-    size: "sm",
-    children: "Label",
-  },
-}
-
-const Template: StoryFn<ChipProps> = args => <Chip {...args} />
-
-const SizesTemplate: StoryFn<ChipProps> = args => (
-  <>
-    <Chip {...args} size="sm">
-      Small
-    </Chip>
-    <Chip {...args} size="lg">
-      Large
-    </Chip>
-  </>
-)
-
-const Default = Template.bind({})
-const Sizes = SizesTemplate.bind({})
-const WithLeadingIcon = Template.bind({})
-const WithTrailingIcon = Template.bind({})
-const WithCount = Template.bind({})
-
-// Args
-WithLeadingIcon.args = { leadingIcon: <DummyPhoneIcon /> }
-WithTrailingIcon.args = { trailingIcon: <DummyPhoneIcon /> }
-WithCount.args = { count: 2 }
-
-// Parameters
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: 'Chip renders in two sizes (`"sm"`, `"lg"`). Default is `"sm"`.',
-    },
-  },
-}
-
-WithLeadingIcon.parameters = {
-  docs: {
-    description: {
-      story: "Pass any React node to `leadingIcon` to render an icon before the label.",
-    },
-  },
-}
-
-WithTrailingIcon.parameters = {
-  docs: {
-    description: {
-      story: "Pass any React node to `trailingIcon` to render an icon after the label.",
-    },
-  },
-}
-
-WithCount.parameters = {
-  docs: {
-    description: {
-      story:
-        "Passing a `count` prop renders a small badge before the label, useful for indicating quantities.",
-    },
-  },
-}
-
-// Decorators
-Default.decorators = [
-  Story => (
-    <div className="flex flex-wrap items-center gap-4">
-      <Story />
-    </div>
-  ),
-]
-
-Sizes.decorators = [...Default.decorators]
-WithLeadingIcon.decorators = [...Default.decorators]
-WithTrailingIcon.decorators = [...Default.decorators]
-WithCount.decorators = [...Default.decorators]
-
-export { Default, Sizes, WithLeadingIcon, WithTrailingIcon, WithCount }
-export default meta

package/src/components/Chip/Chip.tsx

@@ -1,59 +0,0 @@
-import React from "react"
-
-// Types
-import type { ChipSize } from "./types"
-
-// Utils
-import { clsx } from "clsx"
-
-// Params
-export interface ChipProps extends React.ComponentPropsWithRef<"div"> {
-  size?: ChipSize
-  leadingIcon?: React.ReactNode
-  trailingIcon?: React.ReactNode
-  count?: number | string
-}
-
-/*
-
-
-
-
-
-*/
-
-const Chip: React.FC<ChipProps> = ({
-  size = "sm",
-  leadingIcon,
-  trailingIcon,
-  count,
-  children,
-  className,
-  ref,
-  ...rest
-}) => {
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        "inline-flex items-center gap-1 rounded-full bg-teal-100/20 font-medium whitespace-nowrap text-teal-100",
-        size === "sm" && "h-6 px-2 text-xs/3",
-        size === "lg" && "tracking-heading h-8 px-3 text-sm/6",
-        className,
-      )}
-      {...rest}
-    >
-      {leadingIcon && <span className="size-4 shrink-0">{leadingIcon}</span>}
-      {count !== undefined && (
-        <span className="flex size-4 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs/3 text-white">
-          {count}
-        </span>
-      )}
-      {children}
-      {trailingIcon && <span className="size-4 shrink-0">{trailingIcon}</span>}
-    </div>
-  )
-}
-
-Chip.displayName = "Chip"
-export default Chip

package/src/components/Chip/index.ts

@@ -1,2 +0,0 @@
-export { default, type ChipProps } from "./Chip"
-export { type ChipSize, CHIP_SIZES } from "./types"

package/src/components/Chip/types.ts

@@ -1,6 +0,0 @@
-export const CHIP_SIZES = {
-  sm: "sm",
-  lg: "lg",
-} as const
-
-export type ChipSize = keyof typeof CHIP_SIZES

package/src/components/Drawer/Drawer.docs.md

@@ -1,88 +0,0 @@
-## Usage
-
-The `Drawer` component's state is controlled by the `isOpen` and `onClose` props.
-
-<br>
-
-### Opening/Closing the Drawer
-
-To open and close the `Drawer`, create an external state that determines when the drawer is open:
-
-```tsx
-"use client"
-
-import { useState } from "react"
-import { Drawer } from "@bronnzelabs/oakma-ui"
-
-export default function Page() {
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(true)}>Open drawer</button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <div className="p-6">
-          <p>Some content</p>
-        </div>
-      </Drawer>
-    </>
-  )
-}
-```
-
-By default, `onClose` is called when the close button is clicked, when the user clicks outside the drawer, or when the Escape key is pressed.
-
-### Position
-
-Use the `position` prop to control which edge of the screen the Drawer slides in from. Accepted values are `"top"`, `"right"`, `"bottom"`, and `"left"` (default `"left"`).
-
-```tsx
-"use client"
-
-import { useState } from "react"
-import { Drawer } from "@bronnzelabs/oakma-ui"
-
-export default function Page() {
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(true)}>Open drawer</button>
-      <Drawer position="right" isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <div className="p-6">
-          <p>Some content</p>
-        </div>
-      </Drawer>
-    </>
-  )
-}
-```
-
-### Handling Focus
-
-By default, the `trapFocus` prop is set to `true`. This traps keyboard focus within the drawer, preventing the user from focusing outside it until it is closed.
-
-If you want to set the initial focus to a specific element inside the drawer, add the `data-autofocus` prop to it.
-
-```tsx
-"use client"
-
-import { useState } from "react"
-import { Drawer } from "@bronnzelabs/oakma-ui"
-
-export default function Page() {
-  const [isOpen, setIsOpen] = useState<boolean>(false)
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(true)}>Open drawer</button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <form className="p-6">
-          <input type="text" data-autofocus /> {/* <--- this will be focused first */}
-          <button onClick={() => setIsOpen(false)}>Submit</button>
-        </form>
-      </Drawer>
-    </>
-  )
-}
-```

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,239 +0,0 @@
-import React, { useState } from "react"
-
-// Components
-import Drawer from "./Drawer"
-import Modal from "../Modal"
-
-// Types
-import type { StoryFn, Meta } from "@storybook/react-webpack5"
-import type { DrawerProps } from "./Drawer"
-import { DRAWER_POSITIONS } from "./types"
-
-// Utils
-import { StorybookActionButton } from "../../../.storybook/components"
-import { renderDocsWithProps } from "../../../.storybook/utils"
-import extraDocs from "./Drawer.docs.md"
-
-/*
-
-
-
-
-*/
-
-const config: Meta<typeof Drawer> = {
-  title: "Components/Drawer",
-  component: Drawer,
-  parameters: {
-    controls: {
-      exclude: ["ref", "children"],
-    },
-    docs: {
-      description: {
-        component: "A panel that slides in from any edge of the screen, rendered in a portal.",
-      },
-      page: renderDocsWithProps({ extraDocs }),
-    },
-  },
-  argTypes: {
-    position: {
-      type: "string",
-      description: "Side of the screen on which the Drawer will be opened.",
-      table: {
-        type: { summary: DRAWER_POSITIONS.map(v => `"${v}"`).join(" | ") },
-        defaultValue: { summary: "right" },
-      },
-      control: "select",
-      options: DRAWER_POSITIONS,
-    },
-    isOpen: {
-      type: "boolean",
-      description: "Whether the Drawer is open.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-      control: false,
-    },
-    onClose: {
-      description: "Function called when the Drawer is closed.",
-      table: {
-        type: { summary: "() => void" },
-      },
-      control: false,
-    },
-    withBackdrop: {
-      type: "boolean",
-      description: "Whether the backdrop should be rendered.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-      control: "boolean",
-    },
-    withCloseButton: {
-      type: "boolean",
-      description: "Whether the close button should be rendered.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-      control: "boolean",
-    },
-    closeOnClickOutside: {
-      type: "boolean",
-      description: "Whether the Drawer should be closed when user clicks on the overlay.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-      control: "boolean",
-    },
-    closeOnEscape: {
-      type: "boolean",
-      description: "Whether `onClose` should be called when user presses the escape key.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-      control: "boolean",
-    },
-    lockScroll: {
-      type: "boolean",
-      description: "Whether scroll should be locked when `isOpen={true}`.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-      control: "boolean",
-    },
-    trapFocus: {
-      type: "boolean",
-      description: "Whether focus should be trapped within the drawer when `isOpen={true}`.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-      control: "boolean",
-    },
-    portal: {
-      description: "The portal the Drawer should be rendered inside.",
-      table: {
-        type: { summary: "Element | DocumentFragment" },
-      },
-      control: false,
-    },
-  },
-  args: {
-    position: "right",
-    withBackdrop: true,
-    withCloseButton: true,
-    closeOnClickOutside: true,
-    closeOnEscape: true,
-    lockScroll: true,
-    trapFocus: true,
-  },
-  decorators: [
-    (Story, context) => {
-      if (context.name === "Drawer With Modal") {
-        return <Story />
-      }
-      const [isOpen, setIsOpen] = useState(false)
-      return (
-        <>
-          <StorybookActionButton onClick={() => setIsOpen(true)}>Open Drawer</StorybookActionButton>
-          <Story args={{ ...context.args, isOpen: isOpen, onClose: () => setIsOpen(false) }} />
-        </>
-      )
-    },
-  ],
-}
-
-// Templates
-const Template: StoryFn<DrawerProps> = args => <Drawer {...args} />
-
-const DrawerWithModalTemplate: StoryFn<DrawerProps> = args => {
-  const [drawerOpen, setDrawerOpen] = useState(false)
-  const [modalOpen, setModalOpen] = useState(false)
-
-  return (
-    <>
-      <StorybookActionButton onClick={() => setDrawerOpen(true)}>Open Drawer</StorybookActionButton>
-      <Drawer {...args} isOpen={drawerOpen} onClose={() => setDrawerOpen(false)}>
-        <div className="flex flex-col gap-4 p-6">
-          <StorybookActionButton onClick={() => setModalOpen(true)}>
-            Open Modal
-          </StorybookActionButton>
-        </div>
-        <Modal
-          isOpen={modalOpen}
-          onClose={() => setModalOpen(false)}
-          title="Test Modal"
-          subTitle="Close me and the drawer should stay open"
-        >
-          <div className="p-4">Modal Content</div>
-        </Modal>
-      </Drawer>
-    </>
-  )
-}
-
-// Stories
-const Default = Template.bind({})
-const Scroll = Template.bind({})
-const TrapFocus = Template.bind({})
-const DrawerWithModal = DrawerWithModalTemplate.bind({})
-
-// Args
-Scroll.args = {
-  children: (
-    <div className="h-full overflow-scroll p-6">
-      {Array(100)
-        .fill(0)
-        .map((_, i) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <p key={i}>Drawer with scroll</p>
-        ))}
-    </div>
-  ),
-}
-
-TrapFocus.args = {
-  children: (
-    <div className="flex flex-col gap-8 p-6">
-      <button>Button 1</button>
-      <button>Button 2</button>
-      <button>Button 3</button>
-    </div>
-  ),
-}
-
-// Parameters
-Scroll.parameters = {
-  docs: {
-    description: {
-      story: "The drawer panel itself is fixed-size; overflowing content automatically scrolls.",
-    },
-  },
-}
-
-TrapFocus.parameters = {
-  docs: {
-    description: {
-      story:
-        "When `trapFocus={true}`, keyboard focus cycles only between the focusable elements inside the open Drawer.",
-    },
-  },
-}
-
-DrawerWithModal.parameters = {
-  docs: {
-    description: {
-      story:
-        "Demonstrates that opening a Modal from inside the Drawer does not trigger the Drawer's `closeOnClickOutside` or `closeOnEscape` handlers — closing the Modal leaves the Drawer open.",
-    },
-  },
-}
-
-export { Default, Scroll, TrapFocus, DrawerWithModal }
-export default config