@bronzelabs/oakma-ui 0.0.1

package/src/components/TextField/index.ts

@@ -0,0 +1,14 @@
+export { default as Container } from "./Container"
+export { default as ErrorMessage } from "./ErrorMessage"
+export { default as Label } from "./Label"
+export { default as Icon } from "./Icon"
+export { default as NotchBorder } from "./NotchBorder"
+
+export { default as useInputKeyboardFocus } from "./useInputKeyboardFocus"
+
+export {
+  TEXT_FIELD_SIZES,
+  type TextFieldSize,
+  TEXT_FIELD_VARIANTS,
+  type TextFieldVariant,
+} from "./types"

package/src/components/TextField/types.ts

@@ -0,0 +1,15 @@
+/*
+
+
+
+
+
+*/
+
+export const TEXT_FIELD_SIZES = ["sm", "md"] as const
+
+export type TextFieldSize = (typeof TEXT_FIELD_SIZES)[number]
+
+export const TEXT_FIELD_VARIANTS = ["dark", "light"] as const
+
+export type TextFieldVariant = (typeof TEXT_FIELD_VARIANTS)[number]

package/src/components/TextField/useInputKeyboardFocus.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { useRef, useState, useCallback } from "react"
+
+// Params
+interface UseInputKeyboardFocusProps<T> {
+  onFocus?: React.FocusEventHandler<T>
+  onBlur?: React.FocusEventHandler<T>
+}
+
+/*
+
+
+
+
+
+*/
+
+const useInputKeyboardFocus = <T extends HTMLElement = HTMLInputElement>({
+  onFocus,
+  onBlur,
+}: UseInputKeyboardFocusProps<T>) => {
+  // Refs
+  const mouseDownRef = useRef(false)
+
+  // State
+  const [keyboardFocused, setKeyboardFocused] = useState(false)
+
+  // Functions
+  const handleMouseDown = useCallback(() => {
+    mouseDownRef.current = true
+  }, [])
+
+  const handleMouseUp = useCallback(() => {
+    mouseDownRef.current = false
+  }, [])
+
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<T>) => {
+      if (!mouseDownRef.current) setKeyboardFocused(true)
+      return onFocus?.(e)
+    },
+    [onFocus],
+  )
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<T>) => {
+      setKeyboardFocused(false)
+      return onBlur?.(e)
+    },
+    [onBlur],
+  )
+
+  return {
+    keyboardFocused,
+    handleMouseDown,
+    handleMouseUp,
+    handleFocus,
+    handleBlur,
+  }
+}
+
+export default useInputKeyboardFocus

package/src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,384 @@
+import React from "react"
+
+// Components
+import TextInput from "./TextInput"
+
+// Types
+import type { Meta, StoryFn } from "@storybook/react-webpack5"
+import { TEXT_FIELD_SIZES, TEXT_FIELD_VARIANTS } from "../TextField"
+
+// Utils
+import {
+  DummyPhoneIcon,
+  DummyChevronDownIcon,
+  StorybookActionButton,
+} from "../../../.storybook/components"
+
+/*
+
+
+
+
+*/
+
+type TextInputStoryProps = React.ComponentProps<typeof TextInput>
+
+const meta: Meta<TextInputStoryProps> = {
+  title: "Components/TextInput",
+  component: TextInput,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A labelled text field with optional error state and an optional inline action button.",
+      },
+    },
+    controls: {
+      exclude: ["className", "ref"],
+    },
+  },
+  argTypes: {
+    label: {
+      type: "string",
+      description: "Visible label rendered above the input.",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    size: {
+      type: "string",
+      description: "Determines the size of the input 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 input field.",
+      table: {
+        type: { summary: TEXT_FIELD_VARIANTS.map(variant => `"${variant}"`).join(" | ") },
+        defaultValue: { summary: '"dark"' },
+      },
+      options: TEXT_FIELD_VARIANTS,
+      control: { type: "select" },
+    },
+    type: {
+      type: "string",
+      description: "The HTML input type.",
+      table: {
+        type: {
+          summary:
+            '"text" | "email" | "password" | "number" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "time" | "week" | "range"',
+        },
+        defaultValue: { summary: '"text"' },
+      },
+      options: [
+        "text",
+        "email",
+        "password",
+        "number",
+        "search",
+        "tel",
+        "url",
+        "date",
+        "datetime-local",
+        "month",
+        "time",
+        "week",
+        "range",
+      ],
+      control: { type: "select" },
+    },
+    placeholder: {
+      type: "string",
+      description: "Placeholder text shown when the input is empty.",
+      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 input.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    leadingIcon: {
+      type: "function",
+      description: "Renders an icon inside the input, aligned to the left.",
+      table: {
+        type: { summary: "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" },
+      },
+    },
+    button: {
+      description: "Renders an inline action button inside the field.",
+      table: {
+        type: { summary: "Omit<ButtonProps, 'children'> & { label: string }" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+  },
+  args: {
+    id: "text-input",
+    label: "Label",
+    showOptional: true,
+    required: false,
+    disabled: false,
+    type: "text",
+    size: "md",
+    variant: "dark",
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: 450 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+const Template: StoryFn<TextInputStoryProps> = args => <TextInput {...args} />
+
+const LeadingIconTemplate: StoryFn<TextInputStoryProps> = args => (
+  <div className="flex flex-col gap-6">
+    <TextInput {...args} leadingIcon={{ icon: <DummyPhoneIcon className="size-5" /> }} />
+    <TextInput {...args} leadingIcon={{ icon: <DummyPhoneIcon className="size-5" /> }} />
+  </div>
+)
+
+const TrailingIconTemplate: StoryFn<TextInputStoryProps> = args => (
+  <div className="flex flex-col gap-6">
+    <TextInput {...args} trailingIcon={{ icon: <DummyChevronDownIcon className="size-6" /> }} />
+    <TextInput
+      {...args}
+      trailingIcon={{
+        icon: <DummyChevronDownIcon className="size-6" />,
+        onClick: () => alert("Trailing icon clicked!"),
+      }}
+    />
+  </div>
+)
+
+const VariantsTemplate: StoryFn<TextInputStoryProps> = args => (
+  <div className="flex flex-col">
+    <div className="bg-[#fff] p-6">
+      <TextInput {...args} variant="dark" label="Dark Variant" />
+    </div>
+    <div className="bg-[#333] p-6">
+      <TextInput {...args} variant="light" label="Light Variant" />
+    </div>
+  </div>
+)
+
+const TemporalTemplate: StoryFn<TextInputStoryProps> = args => {
+  return (
+    <div className="flex flex-col gap-6">
+      <TextInput {...args} type="date" label="Date" />
+      <TextInput {...args} type="time" label="Time" />
+      <TextInput {...args} type="datetime-local" label="Date & Time" />
+      <TextInput {...args} type="month" label="Month" />
+      <TextInput {...args} type="week" label="Week" />
+    </div>
+  )
+}
+
+const RequiredTemplate: StoryFn<TextInputStoryProps> = args => {
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        const formData = new FormData(e.currentTarget)
+        alert(`Form submitted: ${formData.get("required-field")}`)
+      }}
+      className="flex flex-col gap-3"
+    >
+      <TextInput {...args} required label="Required Field" name="required-field" />
+      <StorybookActionButton>Submit</StorybookActionButton>
+    </form>
+  )
+}
+
+const Default = Template.bind({})
+const Small = Template.bind({})
+const Variants = VariantsTemplate.bind({})
+const WithLeadingIcon = LeadingIconTemplate.bind({})
+const WithTrailingIcon = TrailingIconTemplate.bind({})
+const WithButton = Template.bind({})
+const Required = RequiredTemplate.bind({})
+const WithError = Template.bind({})
+const Disabled = Template.bind({})
+const Password = Template.bind({})
+const Temporal = TemporalTemplate.bind({})
+
+// Args
+Default.args = {
+  placeholder: "e.g. TF1 AAA",
+}
+
+WithLeadingIcon.args = {
+  placeholder: "Search…",
+  leadingIcon: { icon: <DummyPhoneIcon className="size-6" /> },
+}
+
+WithButton.args = {
+  id: "text-input-button",
+  placeholder: "Search…",
+  button: { label: "Search", variant: "primary" },
+}
+
+Small.args = {
+  size: "sm",
+  placeholder: "e.g. TF1 AAA",
+}
+
+Required.args = {
+  required: true,
+}
+
+WithError.args = {
+  error: { message: "This field is required." },
+}
+
+Disabled.args = {
+  disabled: true,
+  placeholder: "Disabled",
+}
+
+Variants.args = {
+  placeholder: "e.g. TF1 AAA",
+}
+
+Password.args = {
+  type: "password",
+  placeholder: "Enter your password",
+}
+
+// Parameters
+Required.parameters = {
+  docs: {
+    description: {
+      story: 'Setting `required` hides the "Optional" tag and marks the input as required.',
+    },
+  },
+}
+
+WithError.parameters = {
+  docs: {
+    description: {
+      story: "Pass an `error` object with a `message` string to display an inline error.",
+    },
+  },
+}
+
+WithLeadingIcon.parameters = {
+  docs: {
+    description: {
+      story: "The `leadingIcon` prop renders an icon inside the field, aligned to the left.",
+    },
+  },
+}
+
+WithButton.parameters = {
+  docs: {
+    description: {
+      story: "The `button` prop renders an inline action button inside the field.",
+    },
+  },
+}
+
+Small.parameters = {
+  docs: {
+    description: {
+      story: 'Setting `size="sm"` renders a more compact version of the input field.',
+    },
+  },
+}
+
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: "Setting `disabled` prevents interaction and visually dims the field.",
+    },
+  },
+}
+
+Variants.parameters = {
+  docs: {
+    description: {
+      story:
+        'The `variant` prop controls the color scheme of the input. Use `"dark"` on light backgrounds and `"light"` on dark backgrounds.',
+    },
+  },
+}
+
+WithTrailingIcon.parameters = {
+  docs: {
+    description: {
+      story:
+        "The `trailingIcon` prop renders an icon inside the field, aligned to the right. Providing an `onClick` handler makes the icon interactive.",
+    },
+  },
+}
+
+Temporal.parameters = {
+  docs: {
+    description: {
+      story:
+        "The input supports all native temporal types (`date`, `time`, `datetime-local`, `month`, `week`) via the `type` prop.",
+    },
+  },
+}
+
+Password.parameters = {
+  docs: {
+    description: {
+      story: 'Setting `type="password"` masks the input value for sensitive fields.',
+    },
+  },
+}
+
+export {
+  Default,
+  Small,
+  Variants,
+  WithLeadingIcon,
+  WithTrailingIcon,
+  WithButton,
+  Temporal,
+  Password,
+  WithError,
+  Required,
+  Disabled,
+}
+export default meta