Skip to content

Feature: Add form components #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
swayamk05 wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

Feature: Add form components #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d52ac6a
feat: Add Select, TextInput, and Textarea components
swayamkale Dec 23, 2025
66b5fd1
chore: restore package-lock.json
swayamkale Dec 23, 2025
a9f6db0
chore: revert root package.json and lockfile
swayamkale Dec 24, 2025
1ae3f0f
Merge branch 'develop' into feat/add-form-components
swayamk05 Dec 24, 2025
30037f2
chore: restore package-lock.json
swayamkale Dec 24, 2025
e3137a7
refactor: address code review (types, docs, and deprecations)
swayamkale Dec 25, 2025
864d34b
fix(components): align Select, TextArea, TextInput with Espresso Desi…
swayamkale Dec 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 134 additions & 69 deletions packages/frappe-ui-react/src/components/select/select.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,155 @@
import type { Meta } from "@storybook/react-vite";
import { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { SelectProps } from "./types";
import Select from "./select";
import { User } from "lucide-react";
import { Users, Calendar, Filter, ArrowUpDown, Circle } from "lucide-react";
import type { SelectOption, SelectProps } from "./types";

export default {
const meta: Meta<typeof Select> = {
title: "Components/Select",
component: Select,
parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
parameters: {
docs: { source: { type: "dynamic" } },
layout: "centered",
},
tags: ["autodocs"],
argTypes: {
size: {
control: { type: "select", options: ["sm", "md", "lg"] },
options: ["sm", "md", "lg"],
control: { type: "select" },
description: "Size of the select input",
table: { defaultValue: { summary: "md" } },
},
variant: {
control: { type: "select", options: ["outline", "subtle"] },
description: "Visual variant of the select input",
},
disabled: {
control: "boolean",
description: "If true, disables the select input",
},
value: {
control: "text",
description: "Current value of the select input",
},
placeholder: {
control: "text",
description: "Placeholder text when no value is selected",
},
options: {
control: "object",
description:
"Array of options to display in the dropdown, each with a label and value",
},
prefix: {
control: false,
description: "Element to display before the selected value",
options: ["subtle", "outline", "ghost"],
control: { type: "select" },
description: "Visual variant",
table: { defaultValue: { summary: "subtle" } },
},
htmlId: {
control: "text",
description: "HTML id attribute for the select input",
},
onChange: {
action: "changed",
description: "Callback function when the selected value changes",
state: {
options: ["success", "warning", "error", null],
control: { type: "select" },
description: "Visual state (colors)",
},
className: { control: "text", description: "Custom CSS class" },

label: { control: "text", description: "Label for the select input" },
placeholder: { control: "text", description: "Placeholder text" },
disabled: { control: "boolean", description: "Disables interaction" },
loading: { control: "boolean", description: "Shows loading spinner and disables input" },
value: { control: "object", description: "Current selected option" },
options: { control: "object", description: "Array of options" },
error: { control: "text", description: "Error message" },
prefix: { control: "text", description: "Element before value" },
onChange: { action: "changed", description: "Change callback" },
},
} as Meta<typeof Select>;
};

const Template: StoryObj<SelectProps> = {
args: {
value: "",
options: [
{ label: "John Doe", value: "john-doe" },
{ label: "Jane Doe", value: "jane-doe" },
{ label: "John Smith", value: "john-smith" },
{ label: "Jane Smith", value: "jane-smith", disabled: true },
{ label: "John Wayne", value: "john-wayne" },
{ label: "Jane Wayne", value: "jane-wayne" },
],
},
render: (args) => {
const [value, setValue] = useState(args.value || "");
export default meta;

return (
<div className="p-4 w-[300px]">
<Select
{...args}
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</div>
);
},
const options: SelectOption[] = [
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
{ label: "Option 3", value: "3" },
];

export const Default = (args: SelectProps) => {
const [selected, setSelected] = useState<SelectOption | undefined>(undefined);
return (
<div className="w-72">
<Select
{...args}
value={selected}
onChange={setSelected}
/>
</div>
);
};

export const Default = {
...Template,
Default.args = {
label: "Label",
placeholder: "Select...",
options: options,
disabled: false,
loading: false,
size: "md",
variant: "subtle"
};

export const WithPrefix = {
...Template,
args: {
...Template.args,
prefix: () => <User size={16} className="text-ink-gray-9" />,
},

export const AllOutline = () => {
return (
<div className="space-y-4 w-72 p-4 border rounded bg-white dark:bg-gray-900 dark:border-gray-700">
<h3 className="text-sm font-bold text-gray-900 dark:text-white uppercase">Outline Variants</h3>
<Select variant="outline" placeholder="Default" options={options} />
<Select variant="outline" state="success" placeholder="Success" options={options} />
<Select variant="outline" state="warning" placeholder="Warning" options={options} />
<Select variant="outline" state="error" placeholder="Error" options={options} />
</div>
)
}

export const AllSubtle = () => {
return (
<div className="space-y-4 w-72 p-4 border rounded bg-white dark:bg-gray-900 dark:border-gray-700">
<h3 className="text-sm font-bold text-gray-900 dark:text-white uppercase">Subtle Variants</h3>
<Select variant="subtle" placeholder="Default" options={options} />
<Select variant="subtle" state="success" placeholder="Success" options={options} />
<Select variant="subtle" state="warning" placeholder="Warning" options={options} />
<Select variant="subtle" state="error" placeholder="Error" options={options} />
</div>
)
}

export const AllGhost = () => {
return (
<div className="space-y-4 w-72 p-4 border rounded bg-white dark:bg-gray-900 dark:border-gray-700">
<h3 className="text-sm font-bold text-gray-900 dark:text-white uppercase">Ghost Variants</h3>
<Select variant="ghost" placeholder="Default" options={options} />
<Select variant="ghost" state="success" placeholder="Success" options={options} />
<Select variant="ghost" state="warning" placeholder="Warning" options={options} />
<Select variant="ghost" state="error" placeholder="Error" options={options} />
</div>
)
}

export const EspressoExamples = () => {
return (
<div className="p-10 space-y-10 bg-white dark:bg-gray-900 w-full">
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-6">Real-world Examples</h3>

<div className="flex flex-wrap gap-4 items-center justify-center">
<div className="w-32">
<Select variant="outline" size="sm" prefix={<Users size={14} />} placeholder="Teams" options={options} />
</div>
<div className="w-32">
<Select variant="outline" size="sm" prefix={<Calendar size={14} />} placeholder="Date" options={options} />
</div>
<div className="w-32">
<Select variant="subtle" size="sm" prefix={<Filter size={14} />} placeholder="Filter" options={options} />
</div>
<div className="w-32">
<Select variant="subtle" size="sm" prefix={<ArrowUpDown size={14} />} placeholder="Sort by" options={options} />
</div>
<div className="w-28">
<Select variant="outline" size="sm" placeholder="Dark" options={options} />
</div>
<div className="w-32">
<Select variant="ghost" size="sm" prefix={<Users size={14} />} placeholder="People" options={options} />
</div>
<div className="w-48">
<Select variant="subtle" size="md" placeholder="Select a plan" options={options} />
</div>
<div className="w-40">
<Select variant="ghost" state="warning" size="sm" prefix={<Circle size={10} fill="currentColor" />} placeholder="In progress" options={options} />
</div>
<div className="w-36">
<Select variant="subtle" size="sm" placeholder="Send invite" options={options} />
</div>
<div className="w-40">
<Select variant="outline" size="sm" prefix={<Circle size={10} fill="currentColor" />} placeholder="Qualification" options={options} />
</div>
</div>
</div>
)
};

Loading