Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit41b2165

Browse files
authored
feat: add textarea component (#17465)
This adds the shadcn textarea component along with storybook storiesFigma:https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=1949-13239&t=NSt5S88hAsE4Q9di-1<img width="612" alt="Screenshot 2025-04-18 at 12 16 57"src="https://github.com/user-attachments/assets/dcd0281f-5d80-4047-9ba4-e456290ceb61"/>
1 parent6e0e29a commit41b2165

File tree

2 files changed

+125
-0
lines changed

2 files changed

+125
-0
lines changed
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{expect,userEvent,within}from"@storybook/test";
3+
import{useState}from"react";
4+
import{Textarea}from"./Textarea";
5+
6+
constmeta:Meta<typeofTextarea>={
7+
title:"components/Textarea",
8+
component:Textarea,
9+
args:{},
10+
argTypes:{
11+
value:{
12+
control:"text",
13+
description:"The controlled value of the textarea",
14+
},
15+
defaultValue:{
16+
control:"text",
17+
description:"The default value when initially rendered",
18+
},
19+
disabled:{
20+
control:"boolean",
21+
description:
22+
"When true, prevents the user from interacting with the textarea",
23+
},
24+
placeholder:{
25+
control:"text",
26+
description:"Placeholder text displayed when the textarea is empty",
27+
},
28+
rows:{
29+
control:"number",
30+
description:"The number of rows to display",
31+
},
32+
},
33+
};
34+
35+
exportdefaultmeta;
36+
typeStory=StoryObj<typeofTextarea>;
37+
38+
exportconstWithPlaceholder:Story={
39+
args:{
40+
placeholder:"Enter your message here...",
41+
},
42+
};
43+
44+
exportconstDisabled:Story={
45+
args:{
46+
disabled:true,
47+
placeholder:"Placeholder",
48+
},
49+
};
50+
51+
exportconstWithDefaultValue:Story={
52+
args:{
53+
defaultValue:"This is some default text in the textarea.",
54+
},
55+
};
56+
57+
exportconstLarge:Story={
58+
args:{
59+
rows:8,
60+
placeholder:"Placeholder: A larger textarea with more rows",
61+
},
62+
};
63+
64+
constControlledTextarea=()=>{
65+
const[value,setValue]=useState("This is a controlled textarea.");
66+
return(
67+
<divclassName="space-y-2">
68+
<Textarea
69+
value={value}
70+
placeholder="Type something..."
71+
onChange={(e)=>setValue(e.target.value)}
72+
/>
73+
<divclassName="text-sm text-content-secondary">
74+
Character count:{value.length}
75+
</div>
76+
</div>
77+
);
78+
};
79+
80+
exportconstControlled:Story={
81+
render:()=><ControlledTextarea/>,
82+
};
83+
84+
exportconstTypeText:Story={
85+
args:{
86+
placeholder:"Type something here...",
87+
},
88+
play:async({ canvasElement})=>{
89+
constcanvas=within(canvasElement);
90+
consttextarea=canvas.getByRole("textbox");
91+
awaituserEvent.type(
92+
textarea,
93+
"Hello, this is some example text being typed into the textarea!",
94+
);
95+
expect(textarea).toHaveValue(
96+
"Hello, this is some example text being typed into the textarea!",
97+
);
98+
},
99+
};
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Copied from shadc/ui on 04/18/2025
3+
*@see {@link https://ui.shadcn.com/docs/components/textarea}
4+
*/
5+
import*asReactfrom"react";
6+
7+
import{cn}from"utils/cn";
8+
9+
exportconstTextarea=React.forwardRef<
10+
HTMLTextAreaElement,
11+
React.ComponentProps<"textarea">
12+
>(({ className, ...props},ref)=>{
13+
return(
14+
<textarea
15+
className={cn(
16+
`flex min-h-[60px] w-full px-3 py-2 text-sm shadow-sm text-content-primary
17+
rounded-md border border-border bg-transparent placeholder:text-content-secondary
18+
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
19+
disabled:cursor-not-allowed disabled:opacity-50 disabled:text-content-disabled md:text-sm`,
20+
className,
21+
)}
22+
ref={ref}
23+
{...props}
24+
/>
25+
);
26+
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp