@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/components/atoms/select/select.stories.tsx

@@ -0,0 +1,455 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Select, SelectOption, SelectPopup, SelectTrigger } from ".";
+
+const meta: Meta<typeof Select> = {
+	title: "Atoms/Select",
+	component: Select,
+} as Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+// Sample options for stories
+const states = [
+	{ value: "al", label: "Alabama" },
+	{ value: "ak", label: "Alaska" },
+	{ value: "az", label: "Arizona" },
+	{ value: "ar", label: "Arkansas" },
+	{ value: "ca", label: "California" },
+	{ value: "co", label: "Colorado" },
+	{ value: "ct", label: "Connecticut" },
+	{ value: "de", label: "Delaware" },
+	{ value: "fl", label: "Florida" },
+	{ value: "ga", label: "Georgia" },
+];
+
+// =============================================================================
+// Playground
+// =============================================================================
+
+export const Playground: Story = {
+	render: (args) => (
+		<Select {...args}>
+			<SelectTrigger placeholder="Select a state..." />
+			<SelectPopup>
+				{states.map((state) => (
+					<SelectOption key={state.value} value={state.value}>
+						{state.label}
+					</SelectOption>
+				))}
+			</SelectPopup>
+		</Select>
+	),
+};
+Playground.argTypes = {
+	disabled: {
+		control: {
+			type: "boolean",
+		},
+	},
+	defaultValue: {
+		control: {
+			type: "select",
+		},
+		options: ["", ...states.map((s) => s.value)],
+	},
+};
+Playground.args = {
+	disabled: false,
+	defaultValue: "",
+};
+
+// =============================================================================
+// States
+// =============================================================================
+
+/**
+ * Default state - white background with subtle border
+ */
+export const Default = () => (
+	<div className="w-[320px]">
+		<Select>
+			<SelectTrigger placeholder="Select option..." />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2">Option 2</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * With a selected value
+ */
+export const WithValue = () => (
+	<div className="w-[320px]">
+		<Select defaultValue="option2">
+			<SelectTrigger placeholder="Select option..." />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2">Option 2</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * Disabled state - grayed out and not interactive
+ */
+export const Disabled = () => (
+	<div className="w-[320px]">
+		<Select disabled>
+			<SelectTrigger placeholder="Select option..." />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2">Option 2</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * Error state - red border
+ */
+export const ErrorState = () => (
+	<div className="w-[320px]">
+		<Select>
+			<SelectTrigger placeholder="Select option..." error />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2">Option 2</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * All states comparison
+ */
+export const AllStates = () => (
+	<div className="flex flex-col gap-16 max-w-[320px]">
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Default</p>
+			<Select>
+				<SelectTrigger placeholder="Select option..." />
+				<SelectPopup>
+					<SelectOption value="option1">Option 1</SelectOption>
+					<SelectOption value="option2">Option 2</SelectOption>
+					<SelectOption value="option3">Option 3</SelectOption>
+				</SelectPopup>
+			</Select>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">With Value</p>
+			<Select defaultValue="option2">
+				<SelectTrigger placeholder="Select option..." />
+				<SelectPopup>
+					<SelectOption value="option1">Option 1</SelectOption>
+					<SelectOption value="option2">Option 2</SelectOption>
+					<SelectOption value="option3">Option 3</SelectOption>
+				</SelectPopup>
+			</Select>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Error</p>
+			<Select>
+				<SelectTrigger placeholder="Select option..." error />
+				<SelectPopup>
+					<SelectOption value="option1">Option 1</SelectOption>
+					<SelectOption value="option2">Option 2</SelectOption>
+					<SelectOption value="option3">Option 3</SelectOption>
+				</SelectPopup>
+			</Select>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Disabled</p>
+			<Select disabled>
+				<SelectTrigger placeholder="Select option..." />
+				<SelectPopup>
+					<SelectOption value="option1">Option 1</SelectOption>
+					<SelectOption value="option2">Option 2</SelectOption>
+					<SelectOption value="option3">Option 3</SelectOption>
+				</SelectPopup>
+			</Select>
+		</div>
+	</div>
+);
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+/**
+ * Small size - compact select for tight layouts
+ */
+export const Small = () => (
+	<div className="w-[320px]">
+		<Select>
+			<SelectTrigger size="sm" placeholder="Select option..." />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2">Option 2</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * Default size - standard 48px height
+ */
+export const Medium = () => (
+	<div className="w-[320px]">
+		<Select>
+			<SelectTrigger size="default" placeholder="Select option..." />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2">Option 2</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * Large size - more prominent select
+ */
+export const Large = () => (
+	<div className="w-[320px]">
+		<Select>
+			<SelectTrigger size="lg" placeholder="Select option..." />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2">Option 2</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * All sizes comparison
+ */
+export const AllSizes = () => (
+	<div className="flex flex-col gap-16 max-w-[320px]">
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Small (36px)</p>
+			<Select>
+				<SelectTrigger size="sm" placeholder="Select option..." />
+				<SelectPopup>
+					<SelectOption value="option1">Option 1</SelectOption>
+					<SelectOption value="option2">Option 2</SelectOption>
+					<SelectOption value="option3">Option 3</SelectOption>
+				</SelectPopup>
+			</Select>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Default (48px)</p>
+			<Select>
+				<SelectTrigger size="default" placeholder="Select option..." />
+				<SelectPopup>
+					<SelectOption value="option1">Option 1</SelectOption>
+					<SelectOption value="option2">Option 2</SelectOption>
+					<SelectOption value="option3">Option 3</SelectOption>
+				</SelectPopup>
+			</Select>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Large (56px)</p>
+			<Select>
+				<SelectTrigger size="lg" placeholder="Select option..." />
+				<SelectPopup>
+					<SelectOption value="option1">Option 1</SelectOption>
+					<SelectOption value="option2">Option 2</SelectOption>
+					<SelectOption value="option3">Option 3</SelectOption>
+				</SelectPopup>
+			</Select>
+		</div>
+	</div>
+);
+
+// =============================================================================
+// Examples
+// =============================================================================
+
+/**
+ * Form field example with label
+ */
+export const WithLabel = () => (
+	<div className="flex flex-col gap-8 max-w-[320px]">
+		<label
+			htmlFor="state-select"
+			className="text-14 font-medium text-text-primary"
+		>
+			State / Territory
+		</label>
+		<Select>
+			<SelectTrigger placeholder="Select a state..." />
+			<SelectPopup>
+				{states.map((state) => (
+					<SelectOption key={state.value} value={state.value}>
+						{state.label}
+					</SelectOption>
+				))}
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * Form field with error message
+ */
+export const WithErrorMessage = () => (
+	<div className="flex flex-col gap-8 max-w-[320px]">
+		<label
+			htmlFor="state-error"
+			className="text-14 font-medium text-text-primary"
+		>
+			State / Territory
+		</label>
+		<Select>
+			<SelectTrigger placeholder="Select a state..." error />
+			<SelectPopup>
+				{states.map((state) => (
+					<SelectOption key={state.value} value={state.value}>
+						{state.label}
+					</SelectOption>
+				))}
+			</SelectPopup>
+		</Select>
+		<p className="text-12 text-ui-error-color">Please select a state</p>
+	</div>
+);
+
+/**
+ * Required field indicator
+ */
+export const RequiredField = () => (
+	<div className="flex flex-col gap-8 max-w-[320px]">
+		<label
+			htmlFor="required-select"
+			className="text-14 font-medium text-text-primary"
+		>
+			State / Territory <span className="text-ui-error-color">*</span>
+		</label>
+		<Select required>
+			<SelectTrigger placeholder="Select a state..." />
+			<SelectPopup>
+				{states.map((state) => (
+					<SelectOption key={state.value} value={state.value}>
+						{state.label}
+					</SelectOption>
+				))}
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * With disabled options
+ */
+export const WithDisabledOptions = () => (
+	<div className="w-[320px]">
+		<Select>
+			<SelectTrigger placeholder="Select option..." />
+			<SelectPopup>
+				<SelectOption value="option1">Option 1</SelectOption>
+				<SelectOption value="option2" disabled>
+					Option 2 (Disabled)
+				</SelectOption>
+				<SelectOption value="option3">Option 3</SelectOption>
+				<SelectOption value="option4" disabled>
+					Option 4 (Disabled)
+				</SelectOption>
+				<SelectOption value="option5">Option 5</SelectOption>
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * Many options (scrollable)
+ */
+export const ManyOptions = () => (
+	<div className="w-[320px]">
+		<Select>
+			<SelectTrigger placeholder="Select a state..." />
+			<SelectPopup>
+				{states.map((state) => (
+					<SelectOption key={state.value} value={state.value}>
+						{state.label}
+					</SelectOption>
+				))}
+			</SelectPopup>
+		</Select>
+	</div>
+);
+
+/**
+ * Side by side with Input - demonstrating shared styling
+ */
+export const WithInputComparison = () => {
+	// Import Input dynamically to avoid circular deps in stories
+	const Input = require("../input").Input;
+	return (
+		<div className="flex flex-col gap-16 max-w-[500px]">
+			<p className="text-14 text-text-muted">
+				Select and Input share the same base styling for consistent forms
+			</p>
+			<div className="flex gap-12">
+				<div className="flex-1">
+					<p className="block mb-8 text-12 text-text-muted">Input</p>
+					<Input placeholder="Enter text..." />
+				</div>
+				<div className="flex-1">
+					<p className="block mb-8 text-12 text-text-muted">Select</p>
+					<Select>
+						<SelectTrigger placeholder="Select option..." />
+						<SelectPopup>
+							<SelectOption value="option1">Option 1</SelectOption>
+							<SelectOption value="option2">Option 2</SelectOption>
+						</SelectPopup>
+					</Select>
+				</div>
+			</div>
+			<div className="flex gap-12">
+				<div className="flex-1">
+					<p className="block mb-8 text-12 text-text-muted">Input (Error)</p>
+					<Input error placeholder="Enter text..." />
+				</div>
+				<div className="flex-1">
+					<p className="block mb-8 text-12 text-text-muted">Select (Error)</p>
+					<Select>
+						<SelectTrigger error placeholder="Select option..." />
+						<SelectPopup>
+							<SelectOption value="option1">Option 1</SelectOption>
+							<SelectOption value="option2">Option 2</SelectOption>
+						</SelectPopup>
+					</Select>
+				</div>
+			</div>
+			<div className="flex gap-12">
+				<div className="flex-1">
+					<p className="block mb-8 text-12 text-text-muted">Input (Disabled)</p>
+					<Input disabled placeholder="Enter text..." />
+				</div>
+				<div className="flex-1">
+					<p className="block mb-8 text-12 text-text-muted">
+						Select (Disabled)
+					</p>
+					<Select disabled>
+						<SelectTrigger placeholder="Select option..." />
+						<SelectPopup>
+							<SelectOption value="option1">Option 1</SelectOption>
+							<SelectOption value="option2">Option 2</SelectOption>
+						</SelectPopup>
+					</Select>
+				</div>
+			</div>
+		</div>
+	);
+};