@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/components/atoms/input/input-group.stories.tsx

@@ -0,0 +1,650 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+	InputGroupText,
+	InputGroupTextarea,
+} from "./input-group";
+
+const SearchIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M14 14L11.1 11.1"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+const MailIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M2.66667 2.66667H13.3333C14.0667 2.66667 14.6667 3.26667 14.6667 4V12C14.6667 12.7333 14.0667 13.3333 13.3333 13.3333H2.66667C1.93333 13.3333 1.33333 12.7333 1.33333 12V4C1.33333 3.26667 1.93333 2.66667 2.66667 2.66667Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+		<path
+			d="M14.6667 4L8 8.66667L1.33333 4"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+const CheckIcon = () => (
+	<svg
+		width="12"
+		height="12"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M13.3333 4L6 11.3333L2.66667 8"
+			stroke="currentColor"
+			strokeWidth="2"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+const CopyIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<rect
+			x="5.33333"
+			y="5.33333"
+			width="8"
+			height="8"
+			rx="1"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+		<path
+			d="M10.6667 5.33333V3.33333C10.6667 2.59695 10.0697 2 9.33333 2H3.33333C2.59695 2 2 2.59695 2 3.33333V9.33333C2 10.0697 2.59695 10.6667 3.33333 10.6667H5.33333"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+	</svg>
+);
+
+const PlusIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M8 3.33333V12.6667M3.33333 8H12.6667"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);
+
+const InfoIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
+		<path
+			d="M8 11V7M8 5V5.01"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+		/>
+	</svg>
+);
+
+const SendIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M8 3V13M8 3L4 7M8 3L12 7"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+const StarIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M8 1.33333L10.06 5.50667L14.6667 6.18L11.3333 9.42667L12.12 14.0133L8 11.8467L3.88 14.0133L4.66667 9.42667L1.33333 6.18L5.94 5.50667L8 1.33333Z"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+const CreditCardIcon = () => (
+	<svg
+		width="14"
+		height="14"
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<rect
+			x="1.33333"
+			y="3.33333"
+			width="13.3333"
+			height="9.33333"
+			rx="1.5"
+			stroke="currentColor"
+			strokeWidth="1.5"
+		/>
+		<path d="M1.33333 6H14.6667" stroke="currentColor" strokeWidth="1.5" />
+	</svg>
+);
+
+const meta: Meta<typeof InputGroup> = {
+	title: "Atoms/InputGroup",
+	component: InputGroup,
+} as Meta<typeof InputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+
+export const Playground: Story = {
+	render: (args) => (
+		<InputGroup {...args}>
+			<InputGroupInput placeholder="Search..." />
+			<InputGroupAddon>
+				<SearchIcon />
+			</InputGroupAddon>
+		</InputGroup>
+	),
+};
+Playground.argTypes = {
+	size: {
+		control: { type: "radio" },
+		options: ["sm", "default", "lg"],
+	},
+	disabled: {
+		control: { type: "boolean" },
+	},
+};
+Playground.args = {
+	size: "default",
+	disabled: false,
+};
+
+export const SearchWithResults = () => (
+	<InputGroup className="max-w-sm">
+		<InputGroupInput placeholder="Search..." />
+		<InputGroupAddon>
+			<SearchIcon />
+		</InputGroupAddon>
+		<InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+	</InputGroup>
+);
+
+export const URLWithTooltip = () => (
+	<InputGroup className="max-w-sm">
+		<InputGroupInput placeholder="example.com" className="!pl-2" />
+		<InputGroupAddon>
+			<InputGroupText>https://</InputGroupText>
+		</InputGroupAddon>
+		<InputGroupAddon align="inline-end">
+			<InputGroupButton
+				className="rounded-full"
+				size="icon-xs"
+				aria-label="Info"
+			>
+				<InfoIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const ChatInput = () => (
+	<InputGroup className="max-w-md">
+		<InputGroupTextarea
+			placeholder="Ask, Search or Chat..."
+			className="min-h-[80px]"
+		/>
+		<InputGroupAddon align="block-end">
+			<InputGroupButton
+				className="rounded-full"
+				size="icon-sm"
+				aria-label="Add attachment"
+			>
+				<PlusIcon />
+			</InputGroupButton>
+			<InputGroupText>52% used</InputGroupText>
+			<span className="ml-auto h-16 w-px bg-ui-color-border" />
+			<InputGroupButton
+				variant="solid"
+				className="rounded-full"
+				size="icon-sm"
+				aria-label="Send"
+			>
+				<SendIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const VerifiedUsername = () => (
+	<InputGroup className="max-w-sm">
+		<InputGroupInput placeholder="@shadcn" defaultValue="@shadcn" />
+		<InputGroupAddon align="inline-end">
+			<div className="flex size-16 items-center justify-center rounded-full bg-green-500 text-white">
+				<CheckIcon />
+			</div>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const CopyableLink = () => (
+	<InputGroup className="max-w-sm">
+		<InputGroupInput
+			placeholder="https://x.com/shadcn"
+			defaultValue="https://x.com/shadcn"
+			readOnly
+		/>
+		<InputGroupAddon align="inline-end">
+			<InputGroupButton aria-label="Copy" size="icon-xs">
+				<CopyIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const CurrencyInput = () => (
+	<InputGroup className="max-w-[200px]">
+		<InputGroupAddon>
+			<InputGroupText>$</InputGroupText>
+		</InputGroupAddon>
+		<InputGroupInput placeholder="0.00" type="number" />
+		<InputGroupAddon align="inline-end">
+			<InputGroupText>USD</InputGroupText>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const PasswordWithInfo = () => (
+	<InputGroup className="max-w-sm">
+		<InputGroupInput placeholder="Enter password" type="password" />
+		<InputGroupAddon align="inline-end">
+			<InputGroupButton aria-label="Password requirements" size="icon-xs">
+				<InfoIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const PillInput = () => (
+	<InputGroup className="max-w-sm rounded-full">
+		<InputGroupAddon>
+			<InputGroupButton
+				variant="outline"
+				size="icon-xs"
+				className="rounded-full"
+			>
+				<InfoIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+		<InputGroupAddon className="pl-4 text-text-muted">https://</InputGroupAddon>
+		<InputGroupInput id="input-secure-19" placeholder="example.com" />
+		<InputGroupAddon align="inline-end">
+			<InputGroupButton size="icon-xs" aria-label="Favorite">
+				<StarIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const WithIcons = () => (
+	<div className="grid w-full max-w-sm gap-24">
+		<InputGroup>
+			<InputGroupInput placeholder="Search..." />
+			<InputGroupAddon>
+				<SearchIcon />
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupInput type="email" placeholder="Enter your email" />
+			<InputGroupAddon>
+				<MailIcon />
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupInput placeholder="Card number" />
+			<InputGroupAddon>
+				<CreditCardIcon />
+			</InputGroupAddon>
+			<InputGroupAddon align="inline-end">
+				<CheckIcon />
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupInput placeholder="Card number" />
+			<InputGroupAddon align="inline-end">
+				<StarIcon />
+				<InfoIcon />
+			</InputGroupAddon>
+		</InputGroup>
+	</div>
+);
+
+export const WithText = () => (
+	<div className="grid w-full max-w-sm gap-24">
+		<InputGroup>
+			<InputGroupAddon>
+				<InputGroupText>$</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="0.00" />
+			<InputGroupAddon align="inline-end">
+				<InputGroupText>USD</InputGroupText>
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupAddon>
+				<InputGroupText>https://</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="example.com" className="!pl-2" />
+			<InputGroupAddon align="inline-end">
+				<InputGroupText>.com</InputGroupText>
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupInput placeholder="Enter your username" />
+			<InputGroupAddon align="inline-end">
+				<InputGroupText>@company.com</InputGroupText>
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupTextarea placeholder="Enter your message" />
+			<InputGroupAddon align="block-end">
+				<InputGroupText className="text-12 text-text-muted">
+					120 characters left
+				</InputGroupText>
+			</InputGroupAddon>
+		</InputGroup>
+	</div>
+);
+
+export const WithButtons = () => (
+	<div className="grid w-full max-w-sm gap-24">
+		<InputGroup>
+			<InputGroupInput placeholder="https://x.com/shadcn" readOnly />
+			<InputGroupAddon align="inline-end">
+				<InputGroupButton aria-label="Copy" size="icon-xs">
+					<CopyIcon />
+				</InputGroupButton>
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupInput placeholder="Type to search..." />
+			<InputGroupAddon align="inline-end">
+				<InputGroupButton>Search</InputGroupButton>
+			</InputGroupAddon>
+		</InputGroup>
+	</div>
+);
+
+export const TextareaWithActions = () => (
+	<InputGroup className="max-w-md">
+		<InputGroupAddon
+			align="block-start"
+			className="border-b border-ui-color-border pb-8"
+		>
+			<InputGroupText className="font-medium">
+				<span className="font-mono">script.js</span>
+			</InputGroupText>
+			<InputGroupButton className="ml-auto" size="icon-xs" aria-label="Refresh">
+				<PlusIcon />
+			</InputGroupButton>
+			<InputGroupButton size="icon-xs" aria-label="Copy">
+				<CopyIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+		<InputGroupTextarea
+			placeholder="console.log('Hello, world!');"
+			className="min-h-[120px] font-mono"
+		/>
+		<InputGroupAddon
+			align="block-end"
+			className="border-t border-ui-color-border pt-8"
+		>
+			<InputGroupText>Line 1, Column 1</InputGroupText>
+			<InputGroupButton className="ml-auto" size="sm" variant="solid">
+				Run <SendIcon />
+			</InputGroupButton>
+		</InputGroupAddon>
+	</InputGroup>
+);
+
+export const SpinnerLoading = () => (
+	<div className="grid w-full max-w-sm gap-24">
+		<InputGroup data-disabled>
+			<InputGroupInput placeholder="Searching..." disabled />
+			<InputGroupAddon align="inline-end">
+				<svg
+					className="size-14 animate-spin"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<circle
+						cx="8"
+						cy="8"
+						r="6"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeOpacity="0.25"
+					/>
+					<path
+						d="M14 8A6 6 0 0 0 8 2"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+					/>
+				</svg>
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup data-disabled>
+			<InputGroupInput placeholder="Saving changes..." disabled />
+			<InputGroupAddon align="inline-end">
+				<InputGroupText>Saving...</InputGroupText>
+				<svg
+					className="size-14 animate-spin"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<circle
+						cx="8"
+						cy="8"
+						r="6"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeOpacity="0.25"
+					/>
+					<path
+						d="M14 8A6 6 0 0 0 8 2"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+					/>
+				</svg>
+			</InputGroupAddon>
+		</InputGroup>
+	</div>
+);
+
+export const WithLabel = () => (
+	<div className="grid w-full max-w-sm gap-24">
+		<InputGroup>
+			<InputGroupInput id="email" placeholder="shadcn" />
+			<InputGroupAddon>
+				<label htmlFor="email" className="cursor-text">
+					@
+				</label>
+			</InputGroupAddon>
+		</InputGroup>
+		<InputGroup>
+			<InputGroupInput
+				id="email-2"
+				placeholder="shadcn@vercel.com"
+				className="!pl-12"
+			/>
+			<InputGroupAddon align="block-start">
+				<label
+					htmlFor="email-2"
+					className="text-14 font-semibold text-gray-900 cursor-text"
+				>
+					Email
+				</label>
+				<InputGroupButton
+					aria-label="Help"
+					className="ml-auto rounded-full"
+					size="icon-xs"
+				>
+					<InfoIcon />
+				</InputGroupButton>
+			</InputGroupAddon>
+		</InputGroup>
+	</div>
+);
+
+export const AllSizes = () => (
+	<div className="flex flex-col gap-24 max-w-sm">
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Small (32px)</p>
+			<InputGroup size="sm">
+				<InputGroupInput placeholder="Small" />
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Default (36px)</p>
+			<InputGroup size="default">
+				<InputGroupInput placeholder="Default" />
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Large (48px)</p>
+			<InputGroup size="lg">
+				<InputGroupInput placeholder="Large" />
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+	</div>
+);
+
+export const AllStates = () => (
+	<div className="flex flex-col gap-24 max-w-sm">
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Default</p>
+			<InputGroup>
+				<InputGroupInput placeholder="Search..." />
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Focus (click input)</p>
+			<InputGroup>
+				<InputGroupInput placeholder="Click to focus..." />
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Error</p>
+			<InputGroup>
+				<InputGroupInput aria-invalid="true" defaultValue="invalid" />
+				<InputGroupAddon>
+					<MailIcon />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Disabled</p>
+			<InputGroup disabled>
+				<InputGroupInput disabled placeholder="Disabled" />
+				<InputGroupAddon>
+					<SearchIcon />
+				</InputGroupAddon>
+			</InputGroup>
+		</div>
+	</div>
+);