@bronzelabs/oakma-ui 0.0.1 → 0.0.3

package/src/components/Notifications/NotificationsContext.tsx

@@ -1,90 +0,0 @@
-import React, { useCallback, useState, use } from "react"
-
-// Types
-import type { NotificationData } from "../Notification"
-import type { PickPartial, SingleOrArray } from "../../types/helpers"
-
-export type NotificationsContextType = {
-  /** Array of notifications. */
-  notifications: NotificationData[]
-  /** Function to add a notification to the state. */
-  addNotification: (
-    notifications: SingleOrArray<PickPartial<NotificationData, "id" | "timestamp">>,
-    withTimeout?: boolean,
-  ) => void
-  /** Function to remove a notification from the state. */
-  removeNotification: (id?: string) => void
-}
-
-// Utils
-import { uniqBy } from "../../utils/array"
-
-// Context
-const NotificationsContext = React.createContext<NotificationsContextType>({
-  notifications: [],
-  addNotification: () => {
-    return
-  },
-  removeNotification: () => {
-    return
-  },
-})
-
-/*
-
-
-
-
-*/
-
-const NotificationsProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
-  // State
-  const [notificationsState, setNotificationsState] = useState<NotificationData[]>([])
-
-  // Functions
-  const removeNotification = useCallback((id?: string) => {
-    if (typeof id !== "string") return
-
-    setNotificationsState(curr => curr.filter(n => n?.id !== id))
-  }, [])
-
-  const addNotification = useCallback<NotificationsContextType["addNotification"]>(
-    (notifications, withTimeout = true) => {
-      const data = Array.isArray(notifications) ? notifications : [notifications]
-
-      data.forEach(n => {
-        n.timestamp ??= Date.now()
-        n.id ??= crypto.randomUUID()
-
-        if (withTimeout) {
-          setTimeout(() => removeNotification(n.id), 5000)
-        }
-      })
-
-      setNotificationsState(curr =>
-        uniqBy(
-          // It's ok to cast this now as we know missing properties will have been added above
-          [...(data as NotificationData[]), ...curr].sort((a, b) => a.timestamp - b.timestamp),
-          "id",
-        ),
-      )
-    },
-    [removeNotification],
-  )
-
-  return (
-    <NotificationsContext.Provider
-      value={{
-        notifications: notificationsState,
-        addNotification,
-        removeNotification,
-      }}
-    >
-      {children}
-    </NotificationsContext.Provider>
-  )
-}
-
-const useNotifications = () => use(NotificationsContext)
-
-export { NotificationsContext, NotificationsProvider, useNotifications }

package/src/components/Notifications/index.ts

@@ -1,7 +0,0 @@
-export { default, type NotificationsProps } from "./Notifications"
-export {
-  NotificationsProvider,
-  NotificationsContext,
-  useNotifications,
-  type NotificationsContextType,
-} from "./NotificationsContext"

package/src/components/Select/Select.stories.tsx

@@ -1,234 +0,0 @@
-import React from "react"
-
-// Components
-import Select, { type SelectProps } from "./Select"
-
-// Types
-import type { Meta, StoryFn } from "@storybook/react-webpack5"
-import { TEXT_FIELD_SIZES, TEXT_FIELD_VARIANTS } from "../TextField"
-
-// Utils
-import { DummyPhoneIcon } from "../../../.storybook/components"
-
-/*
-
-
-
-
-*/
-
-const meta: Meta<SelectProps> = {
-  title: "Components/Select",
-  component: Select,
-  parameters: {
-    docs: {
-      description: {
-        component: "A labelled select field with optional leading icon and error state.",
-      },
-    },
-    controls: {
-      exclude: ["className", "ref", "children"],
-    },
-  },
-  argTypes: {
-    label: {
-      type: "string",
-      description: "Visible label rendered above the select.",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    size: {
-      type: "string",
-      description: "Determines the size of the select field.",
-      table: {
-        type: { summary: TEXT_FIELD_SIZES.map(size => `"${size}"`).join(" | ") },
-        defaultValue: { summary: '"md"' },
-      },
-      options: TEXT_FIELD_SIZES,
-      control: { type: "select" },
-    },
-    variant: {
-      type: "string",
-      description: "Determines the color scheme of the select.",
-      table: {
-        type: { summary: TEXT_FIELD_VARIANTS.map(variant => `"${variant}"`).join(" | ") },
-        defaultValue: { summary: '"dark"' },
-      },
-      options: TEXT_FIELD_VARIANTS,
-      control: { type: "select" },
-    },
-    placeholder: {
-      type: "string",
-      description: "Renders a disabled placeholder option shown before a value is selected.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    showOptional: {
-      type: "boolean",
-      description: 'Shows an "Optional" tag next to the label when the field is not required.',
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
-      },
-    },
-    required: {
-      type: "boolean",
-      description: 'Marks the field as required and hides the "Optional" tag.',
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    disabled: {
-      type: "boolean",
-      description: "Disables the select.",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-    leadingIcon: {
-      description: "Renders an icon inside the field, aligned to the left.",
-      table: {
-        type: { summary: "{ icon: ReactNode }" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    error: {
-      description: "Renders the field in an error state and displays the provided message.",
-      table: {
-        type: { summary: "{ message: string }" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-  },
-  args: {
-    id: "select",
-    label: "Label",
-    showOptional: true,
-    required: false,
-    disabled: false,
-    size: "md",
-  },
-  decorators: [
-    Story => (
-      <div className="w-80">
-        <Story />
-      </div>
-    ),
-  ],
-}
-
-const SampleOptions = () => (
-  <>
-    <option value="apple">Apple</option>
-    <option value="banana">Banana</option>
-    <option value="cherry">Cherry</option>
-    <option value="date">Date</option>
-  </>
-)
-
-const Template: StoryFn<SelectProps> = args => (
-  <Select {...args}>
-    <SampleOptions />
-  </Select>
-)
-
-const LeadingIconTemplate: StoryFn<SelectProps> = args => (
-  <Select {...args} leadingIcon={{ icon: <DummyPhoneIcon className="size-5" /> }}>
-    <SampleOptions />
-  </Select>
-)
-
-const Default = Template.bind({})
-const WithPlaceholder = Template.bind({})
-const WithLeadingIcon = LeadingIconTemplate.bind({})
-const Small = Template.bind({})
-const Required = Template.bind({})
-const WithError = Template.bind({})
-const Disabled = Template.bind({})
-
-// Args
-Default.args = {}
-
-WithPlaceholder.args = {
-  placeholder: "Select a fruit…",
-}
-
-WithLeadingIcon.args = {
-  placeholder: "Select a fruit…",
-}
-
-Small.args = {
-  size: "sm",
-  placeholder: "Select a fruit…",
-}
-
-Required.args = {
-  required: true,
-  placeholder: "Select a fruit…",
-}
-
-WithError.args = {
-  error: { message: "Please select an option." },
-}
-
-Disabled.args = {
-  disabled: true,
-  placeholder: "Select a fruit…",
-}
-
-// Parameters
-WithPlaceholder.parameters = {
-  docs: {
-    description: {
-      story: "The `placeholder` prop renders a disabled option shown before a value is selected.",
-    },
-  },
-}
-
-WithLeadingIcon.parameters = {
-  docs: {
-    description: {
-      story: "The `leadingIcon` prop renders an icon inside the field, aligned to the left.",
-    },
-  },
-}
-
-Small.parameters = {
-  docs: {
-    description: {
-      story: 'Setting `size="sm"` renders a more compact version of the select field.',
-    },
-  },
-}
-
-Required.parameters = {
-  docs: {
-    description: {
-      story: 'Setting `required` hides the "Optional" tag and marks the select as required.',
-    },
-  },
-}
-
-WithError.parameters = {
-  docs: {
-    description: {
-      story: "Pass an `error` object with a `message` string to display an inline error.",
-    },
-  },
-}
-
-Disabled.parameters = {
-  docs: {
-    description: {
-      story: "Setting `disabled` prevents interaction and visually dims the field.",
-    },
-  },
-}
-
-export { Default, WithPlaceholder, WithLeadingIcon, Small, Required, WithError, Disabled }
-export default meta

package/src/components/Select/Select.tsx

@@ -1,129 +0,0 @@
-"use client"
-
-import React from "react"
-
-// Components
-import { ChevronDownIcon } from "@heroicons/react/20/solid"
-import { Container, ErrorMessage, Icon, Label, useInputKeyboardFocus } from "../TextField"
-
-// Types
-import type { SelectSize, SelectVariant } from "./types"
-
-// Utils
-import clsx from "clsx"
-
-// Params
-interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "id" | "size"> {
-  id: string
-  label?: string
-  size?: SelectSize
-  variant?: SelectVariant
-  leadingIcon?: { icon: React.ReactNode }
-  placeholder?: string
-  showOptional?: boolean
-  error?: {
-    message: string
-  }
-  children: React.ReactNode
-}
-
-/*
-
-
-
-
-*/
-
-const Select: React.FC<SelectProps> = ({
-  id,
-  label,
-  size = "md",
-  variant = "dark",
-  error,
-  leadingIcon,
-  placeholder,
-  showOptional = true,
-  className,
-  required,
-  disabled,
-  onFocus,
-  onBlur,
-  defaultValue,
-  children,
-  ...rest
-}) => {
-  const { keyboardFocused, handleMouseDown, handleMouseUp, handleFocus, handleBlur } =
-    useInputKeyboardFocus({ onFocus, onBlur })
-
-  return (
-    <div className={className}>
-      <Container
-        keyboardFocused={keyboardFocused}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
-        size={size}
-        hasButton={false}
-        label={label}
-        showOptional={showOptional}
-        required={required}
-        variant={variant}
-      >
-        {label && (
-          <Label
-            inputId={id}
-            label={label}
-            showOptional={showOptional}
-            required={required}
-            variant={variant}
-          />
-        )}
-
-        {leadingIcon?.icon && (
-          <Icon position="leading" disabled={disabled} fieldSize={size} variant={variant}>
-            {leadingIcon.icon}
-          </Icon>
-        )}
-
-        <select
-          id={id}
-          className={clsx(
-            "h-full min-w-0 grow appearance-none bg-transparent focus:outline-hidden has-[option[value='']:checked]:text-neutral-30",
-            variant === "dark" && "text-neutral-100",
-            variant === "light" && "text-white",
-            size === "sm" && ["min-h-6 text-sm", !!leadingIcon?.icon ? "pl-10" : "pl-3", "pr-10"],
-            size === "md" && ["min-h-12 text-base", !!leadingIcon?.icon ? "pl-12" : "pl-5", "pr-0"],
-          )}
-          aria-describedby={error ? `${id}-error` : undefined}
-          aria-invalid={!!error}
-          required={required}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          disabled={disabled}
-          defaultValue={defaultValue || placeholder ? "" : undefined}
-          {...rest}
-        >
-          {placeholder && (
-            <option value="" disabled hidden>
-              {placeholder}
-            </option>
-          )}
-          {children}
-        </select>
-
-        <Icon
-          position="trailing"
-          disabled={disabled}
-          fieldSize={size}
-          variant={variant}
-          className="pointer-events-none"
-        >
-          <ChevronDownIcon className="size-5" />
-        </Icon>
-      </Container>
-      {error && <ErrorMessage id={id} error={error} />}
-    </div>
-  )
-}
-
-export default Select
-export type { SelectProps }

package/src/components/Select/index.ts

@@ -1,2 +0,0 @@
-export { default, type SelectProps } from "./Select"
-export type { SelectSize, SelectVariant } from "./types"

package/src/components/Select/types.ts

@@ -1 +0,0 @@
-export type { TextFieldSize as SelectSize, TextFieldVariant as SelectVariant } from "../TextField"

package/src/components/Spinner/Spinner.stories.tsx

@@ -1,55 +0,0 @@
-import React from "react"
-
-// Components
-import Spinner from "./Spinner"
-
-// Types
-import type { StoryFn, Meta } from "@storybook/react-webpack5"
-import type { SpinnerProps } from "."
-
-/*
-
-
-
-
-*/
-
-const meta: Meta<typeof Spinner> = {
-  title: "Components/Spinner",
-  component: Spinner,
-  parameters: {
-    docs: {
-      description: {
-        component: "A spinner component to indicate loading.",
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      type: "string",
-      description: "Size of the spinner.",
-      table: {
-        type: {
-          summary: '"xs" | "sm" | "md" | "lg"',
-        },
-        defaultValue: {
-          summary: '"md"',
-        },
-      },
-      options: ["xs", "sm", "md", "lg"],
-      control: { type: "select" },
-    },
-  },
-  args: {
-    size: "md",
-  },
-}
-
-// Templates
-const Template: StoryFn<SpinnerProps> = args => <Spinner {...args} />
-
-// Stories
-const Default = Template.bind({})
-
-export { Default }
-export default meta

package/src/components/Spinner/Spinner.tsx

@@ -1,48 +0,0 @@
-import React from "react"
-
-// Types
-import type { SpinnerSize } from "./types"
-
-// Utils
-import { clsx } from "clsx"
-
-// Props
-export interface SpinnerProps extends Omit<React.ComponentProps<"div">, "color"> {
-  /** Size of the spinner.  */
-  size?: SpinnerSize
-}
-/*
-
-
- 
-
-*/
-
-const Spinner: React.FC<SpinnerProps> = ({ className, size = "md", ref, ...rest }) => {
-  return (
-    <div
-      className={clsx(
-        {
-          xs: "[--spinner-size:1rem]",
-          sm: "[--spinner-size:1.5rem]",
-          md: "[--spinner-size:2rem]",
-          lg: "[--spinner-size:3rem]",
-        }[size],
-        "relative box-border size-(--spinner-size) shrink-0 grow-0 animate-spin-outer",
-        className,
-      )}
-      ref={ref}
-      role="status"
-      {...rest}
-    >
-      <span
-        className={clsx(
-          "absolute inset-0 m-auto block size-full animate-spin-inner [clip:rect(0,var(--spinner-size),var(--spinner-size),calc(var(--spinner-size)/2))] after:absolute after:inset-0 after:m-auto after:size-full after:animate-spin-after after:rounded-full after:border-[clamp(0.125rem,var(--spinner-size)/10,0.325rem)] after:border-solid after:border-current after:[clip:inherit]",
-        )}
-      />
-    </div>
-  )
-}
-
-Spinner.displayName = "Spinner"
-export default Spinner

package/src/components/Spinner/index.ts

@@ -1,2 +0,0 @@
-export { default, type SpinnerProps } from "./Spinner"
-export { SPINNER_SIZES, type SpinnerSize } from "./types"

package/src/components/Spinner/types.ts

@@ -1,8 +0,0 @@
-export const SPINNER_SIZES = {
-  xs: "xs", // --> 1.6rem x 1.6rem
-  sm: "sm", // --> 2.4rem x 2.4rem
-  md: "md", // --> 3.2rem x 3.2rem
-  lg: "lg", // --> 4.8rem x 4.8rem
-} as const
-
-export type SpinnerSize = keyof typeof SPINNER_SIZES