@nationaldesignstudio/react 0.5.2 → 0.5.3

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

@@ -1,646 +0,0 @@
-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="primary"
-				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="primary-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="primary">
-				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" />
-			<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>
-);