appos 0.4.3-0 → 0.5.1-0

package/src/web/ui/field.stories.tsx

@@ -0,0 +1,364 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	Checkbox,
+	Field,
+	FieldContent,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLabel,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldTitle,
+	Input,
+	RadioGroup,
+	RadioGroupItem,
+	Switch,
+} from "appos/web";
+
+const meta = {
+	title: "Base/Field",
+	component: Field,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"A comprehensive field component system for building accessible forms. Supports vertical, horizontal, and responsive orientations with labels, descriptions, and error states.",
+			},
+		},
+	},
+	argTypes: {
+		orientation: {
+			control: "select",
+			options: ["vertical", "horizontal", "responsive"],
+			description: "Layout orientation of the field",
+			table: { defaultValue: { summary: "vertical" } },
+		},
+	},
+} satisfies Meta<typeof Field>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<Field className="w-75">
+			<FieldLabel htmlFor="email">Email</FieldLabel>
+			<Input id="email" type="email" placeholder="Enter your email" />
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Default vertical field layout with label and input.",
+			},
+		},
+	},
+};
+
+export const WithDescription: Story = {
+	render: () => (
+		<Field className="w-75">
+			<FieldLabel htmlFor="username">Username</FieldLabel>
+			<Input id="username" placeholder="Enter username" />
+			<FieldDescription>
+				This will be your public display name.
+			</FieldDescription>
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Field with description text below the input for additional context.",
+			},
+		},
+	},
+};
+
+export const WithError: Story = {
+	render: () => (
+		<Field className="w-75" data-invalid="true">
+			<FieldLabel htmlFor="password">Password</FieldLabel>
+			<Input id="password" type="password" placeholder="Enter password" />
+			<FieldError>Password must be at least 8 characters.</FieldError>
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Field with error state and error message. Use data-invalid for styling.",
+			},
+		},
+	},
+};
+
+export const WithMultipleErrors: Story = {
+	render: () => (
+		<Field className="w-75" data-invalid="true">
+			<FieldLabel htmlFor="pass">Password</FieldLabel>
+			<Input id="pass" type="password" placeholder="Enter password" />
+			<FieldError
+				errors={[
+					{ message: "Must be at least 8 characters" },
+					{ message: "Must contain a number" },
+					{ message: "Must contain a special character" },
+				]}
+			/>
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Field with multiple error messages displayed as a list.",
+			},
+		},
+	},
+};
+
+export const ErrorWithoutIcon: Story = {
+	render: () => (
+		<Field className="w-75" data-invalid="true">
+			<FieldLabel htmlFor="name">Name</FieldLabel>
+			<Input id="name" placeholder="Enter your name" />
+			<FieldError showIcon={false}>Name is required.</FieldError>
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Error message without the alert icon for a cleaner look.",
+			},
+		},
+	},
+};
+
+export const HorizontalOrientation: Story = {
+	render: () => (
+		<Field orientation="horizontal" className="w-100">
+			<FieldLabel htmlFor="notify">Notifications</FieldLabel>
+			<Switch id="notify" />
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Horizontal field layout for switches and checkboxes.",
+			},
+		},
+	},
+};
+
+export const HorizontalWithContent: Story = {
+	render: () => (
+		<Field orientation="horizontal" className="w-100">
+			<Checkbox id="terms" />
+			<FieldContent>
+				<FieldTitle>Accept terms</FieldTitle>
+				<FieldDescription>
+					I agree to the terms of service and privacy policy.
+				</FieldDescription>
+			</FieldContent>
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Horizontal field with content block for title and description.",
+			},
+		},
+	},
+};
+
+export const FieldGroupVertical: Story = {
+	render: () => (
+		<FieldGroup className="w-75">
+			<Field>
+				<FieldLabel htmlFor="first">First Name</FieldLabel>
+				<Input id="first" placeholder="John" />
+			</Field>
+			<Field>
+				<FieldLabel htmlFor="last">Last Name</FieldLabel>
+				<Input id="last" placeholder="Doe" />
+			</Field>
+			<Field>
+				<FieldLabel htmlFor="email2">Email</FieldLabel>
+				<Input id="email2" type="email" placeholder="john@example.com" />
+			</Field>
+		</FieldGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Group of vertical fields for organizing related inputs.",
+			},
+		},
+	},
+};
+
+export const FieldSetWithLegend: Story = {
+	render: () => (
+		<FieldSet className="w-75">
+			<FieldLegend>Contact Information</FieldLegend>
+			<Field>
+				<FieldLabel htmlFor="phone">Phone</FieldLabel>
+				<Input id="phone" type="tel" placeholder="+1 (555) 000-0000" />
+			</Field>
+			<Field>
+				<FieldLabel htmlFor="address">Address</FieldLabel>
+				<Input id="address" placeholder="123 Main St" />
+			</Field>
+		</FieldSet>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"FieldSet with legend for grouping related fields with a heading.",
+			},
+		},
+	},
+};
+
+export const FieldSetWithRadioGroup: Story = {
+	render: () => (
+		<FieldSet className="w-75">
+			<FieldLegend>Notification Preferences</FieldLegend>
+			<FieldDescription>
+				Choose how you want to receive notifications.
+			</FieldDescription>
+			<RadioGroup defaultValue="email">
+				<Field orientation="horizontal">
+					<RadioGroupItem value="email" id="r1" />
+					<FieldContent>
+						<FieldTitle>Email</FieldTitle>
+						<FieldDescription>Get notified via email.</FieldDescription>
+					</FieldContent>
+				</Field>
+				<Field orientation="horizontal">
+					<RadioGroupItem value="sms" id="r2" />
+					<FieldContent>
+						<FieldTitle>SMS</FieldTitle>
+						<FieldDescription>Get notified via text message.</FieldDescription>
+					</FieldContent>
+				</Field>
+				<Field orientation="horizontal">
+					<RadioGroupItem value="push" id="r3" />
+					<FieldContent>
+						<FieldTitle>Push</FieldTitle>
+						<FieldDescription>
+							Get notified via push notification.
+						</FieldDescription>
+					</FieldContent>
+				</Field>
+			</RadioGroup>
+		</FieldSet>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "FieldSet with radio group for single-selection options.",
+			},
+		},
+	},
+};
+
+export const WithSeparator: Story = {
+	render: () => (
+		<FieldGroup className="w-75">
+			<Field>
+				<FieldLabel htmlFor="user">Username</FieldLabel>
+				<Input id="user" placeholder="Enter username" />
+			</Field>
+			<FieldSeparator />
+			<Field>
+				<FieldLabel htmlFor="pwd">Password</FieldLabel>
+				<Input id="pwd" type="password" placeholder="Enter password" />
+			</Field>
+		</FieldGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Fields separated by a visual divider.",
+			},
+		},
+	},
+};
+
+export const SeparatorWithText: Story = {
+	render: () => (
+		<FieldGroup className="w-75">
+			<Field>
+				<FieldLabel htmlFor="email3">Email</FieldLabel>
+				<Input id="email3" type="email" placeholder="you@example.com" />
+			</Field>
+			<FieldSeparator>or</FieldSeparator>
+			<Field>
+				<FieldLabel htmlFor="phone2">Phone</FieldLabel>
+				<Input id="phone2" type="tel" placeholder="+1 (555) 000-0000" />
+			</Field>
+		</FieldGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Separator with text content for alternative options.",
+			},
+		},
+	},
+};
+
+export const DisabledField: Story = {
+	render: () => (
+		<Field className="w-75" data-disabled="true">
+			<FieldLabel htmlFor="disabled">Disabled Field</FieldLabel>
+			<Input id="disabled" disabled placeholder="Cannot edit" />
+			<FieldDescription>This field is disabled.</FieldDescription>
+		</Field>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Disabled field with reduced opacity styling.",
+			},
+		},
+	},
+};
+
+export const ResponsiveOrientation: Story = {
+	render: () => (
+		<FieldGroup className="w-125">
+			<Field orientation="responsive">
+				<Checkbox id="marketing" />
+				<FieldContent>
+					<FieldTitle>Marketing emails</FieldTitle>
+					<FieldDescription>
+						Receive emails about new products, features, and more.
+					</FieldDescription>
+				</FieldContent>
+			</Field>
+			<Field orientation="responsive">
+				<Checkbox id="security" defaultChecked />
+				<FieldContent>
+					<FieldTitle>Security emails</FieldTitle>
+					<FieldDescription>
+						Receive emails about your account security.
+					</FieldDescription>
+				</FieldContent>
+			</Field>
+		</FieldGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Responsive orientation that switches between vertical and horizontal based on container width.",
+			},
+		},
+	},
+};

package/src/web/ui/field.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertCircleIcon } from "lucide-react";
+import type * as React from "react";
+import { useMemo } from "react";
+import { cn } from "#src/web/lib/utils.ts";
+import { Label } from "#src/web/ui/label.tsx";
+import { Separator } from "#src/web/ui/separator.tsx";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLegend({
+	className,
+	variant = "legend",
+	...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn(
+				"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				"gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const fieldVariants = cva(
+	"data-[invalid=true]:text-destructive gap-3 group/field flex w-full",
+	{
+		variants: {
+			orientation: {
+				vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+				horizontal:
+					"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				responsive:
+					"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	},
+);
+
+function Field({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-content"
+			className={cn(
+				"gap-1 group/field-content flex flex-1 flex-col leading-snug",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof Label>) {
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				"has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug",
+				"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="field-label"
+			className={cn(
+				"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance",
+				"last:mt-0 nth-last-2:-mt-1",
+				"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FieldSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	children?: React.ReactNode;
+}) {
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn(
+				"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative",
+				className,
+			)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	);
+}
+
+function FieldError({
+	className,
+	children,
+	errors,
+	showIcon = true,
+	...props
+}: React.ComponentProps<"div"> & {
+	errors?: Array<{ message?: string } | undefined>;
+	/** Whether to show an icon alongside the error message. */
+	showIcon?: boolean;
+}) {
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
+
+		if (!errors?.length) {
+			return null;
+		}
+
+		const uniqueErrors = [
+			...new Map(errors.map((error) => [error?.message, error])).values(),
+		];
+
+		if (uniqueErrors?.length === 1) {
+			return uniqueErrors[0]?.message;
+		}
+
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map(
+					(error) =>
+						error?.message && <li key={error.message}>{error.message}</li>,
+				)}
+			</ul>
+		);
+	}, [children, errors]);
+
+	if (!content) {
+		return null;
+	}
+
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn(
+				"text-destructive text-sm font-normal",
+				showIcon && "flex items-start gap-1.5",
+				className,
+			)}
+			{...props}
+		>
+			{showIcon && (
+				<AlertCircleIcon
+					className="size-4 shrink-0 mt-0.5"
+					aria-hidden="true"
+				/>
+			)}
+			{showIcon ? <span>{content}</span> : content}
+		</div>
+	);
+}
+
+export {
+	Field,
+	FieldLabel,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldContent,
+	FieldTitle,
+};

package/src/web/ui/globals.css

@@ -2,7 +2,10 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
+@source ".";
 @source "../../../dist/exports/web";
+@source "../../storybook/components";
+@source "../../storybook/docs";
 
 @custom-variant dark (&:is(.dark *));