CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update text input component

Browse Source
This commit is contained in:
adilallo
2026-02-04 11:29:51 -07:00
parent d8fa525514
commit 255f16477c
20 changed files with 589 additions and 949 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/Create.stories.js
+4 -4
View File
@@ -1,5 +1,5 @@
import Create from "../app/components/Create";
import Input from "../app/components/Input";
import TextInput from "../app/components/TextInput";
export default {
title: "Components/Create",
@@ -57,7 +57,7 @@ Default.args = {
description: "You can also combine or add new approaches to the list",
children: (
<div className="space-y-4">
<Input label="Label" placeholder="Policy name" value="" />
<TextInput label="Label" placeholder="Policy name" value="" />
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
0/48
</p>
@@ -77,7 +77,7 @@ WithStepper.args = {
description: "You can also combine or add new approaches to the list",
children: (
<div className="space-y-4">
<Input label="Label" placeholder="Policy name" value="" />
<TextInput label="Label" placeholder="Policy name" value="" />
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
0/48
</p>
@@ -155,7 +155,7 @@ NextButtonDisabled.args = {
description: "You can also combine or add new approaches to the list",
children: (
<div className="space-y-4">
<Input label="Label" placeholder="Policy name" value="" />
<TextInput label="Label" placeholder="Policy name" value="" />
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
0/48
</p>
stories/Select.stories.js → stories/SelectInput.stories.js
+58 -52
View File
@@ -1,9 +1,9 @@
import React, { useState } from "react";
import Select from "../app/components/Select";
import SelectInput from "../app/components/SelectInput";
export default {
title: "Forms/Select",
component: Select,
title: "Forms/SelectInput",
component: SelectInput,
argTypes: {
size: {
control: { type: "select" },
@@ -35,10 +35,10 @@ export default {
const Template = (args) => {
const [value, setValue] = useState("");
return (
<Select
<SelectInput
{...args}
value={value}
onChange={setValue}
onChange={(data) => setValue(data.target.value)}
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
@@ -50,27 +50,27 @@ const Template = (args) => {
export const Default = Template.bind({});
Default.args = {
label: "Default Select",
label: "Default Select Input",
placeholder: "Select",
};
export const Small = Template.bind({});
Small.args = {
label: "Small Select",
label: "Small Select Input",
size: "small",
placeholder: "Select",
};
export const Medium = Template.bind({});
Medium.args = {
label: "Medium Select",
label: "Medium Select Input",
size: "medium",
placeholder: "Select",
};
export const Large = Template.bind({});
Large.args = {
label: "Large Select",
label: "Large Select Input",
size: "large",
placeholder: "Select",
};
@@ -126,7 +126,7 @@ Disabled.args = {
export const Interactive = Template.bind({});
Interactive.args = {
label: "Interactive Select",
label: "Interactive Select Input",
placeholder: "Choose an option",
};
@@ -138,39 +138,42 @@ export const AllSizes = () => {
return (
<div className="space-y-4">
<Select
<SelectInput
label="Small"
size="small"
value={smallValue}
onChange={(e) => setSmallValue(e.target.value)}
onChange={(data) => setSmallValue(data.target.value)}
placeholder="Select"
>
<option value="item1">Context Menu Item 1</option>
<option value="item2">Context Menu Item 2</option>
<option value="item3">Context Menu Item 3</option>
</Select>
<Select
options={[
{ value: "item1", label: "Context Menu Item 1" },
{ value: "item2", label: "Context Menu Item 2" },
{ value: "item3", label: "Context Menu Item 3" },
]}
/>
<SelectInput
label="Medium"
size="medium"
value={mediumValue}
onChange={(e) => setMediumValue(e.target.value)}
onChange={(data) => setMediumValue(data.target.value)}
placeholder="Select"
>
<option value="item1">Context Menu Item 1</option>
<option value="item2">Context Menu Item 2</option>
<option value="item3">Context Menu Item 3</option>
</Select>
<Select
options={[
{ value: "item1", label: "Context Menu Item 1" },
{ value: "item2", label: "Context Menu Item 2" },
{ value: "item3", label: "Context Menu Item 3" },
]}
/>
<SelectInput
label="Large"
size="large"
value={largeValue}
onChange={(e) => setLargeValue(e.target.value)}
onChange={(data) => setLargeValue(data.target.value)}
placeholder="Select"
>
<option value="item1">Context Menu Item 1</option>
<option value="item2">Context Menu Item 2</option>
<option value="item3">Context Menu Item 3</option>
</Select>
options={[
{ value: "item1", label: "Context Menu Item 1" },
{ value: "item2", label: "Context Menu Item 2" },
{ value: "item3", label: "Context Menu Item 3" },
]}
/>
</div>
);
};
@@ -182,38 +185,41 @@ export const AllStates = () => {
return (
<div className="space-y-4">
<Select
<SelectInput
label="Default State"
value={defaultValue}
onChange={(e) => setDefaultValue(e.target.value)}
onChange={(data) => setDefaultValue(data.target.value)}
placeholder="Select"
>
<option value="item1">Context Menu Item 1</option>
<option value="item2">Context Menu Item 2</option>
<option value="item3">Context Menu Item 3</option>
</Select>
<Select
options={[
{ value: "item1", label: "Context Menu Item 1" },
{ value: "item2", label: "Context Menu Item 2" },
{ value: "item3", label: "Context Menu Item 3" },
]}
/>
<SelectInput
label="Error State"
error={true}
value={errorValue}
onChange={(e) => setErrorValue(e.target.value)}
onChange={(data) => setErrorValue(data.target.value)}
placeholder="Select"
>
<option value="item1">Context Menu Item 1</option>
<option value="item2">Context Menu Item 2</option>
<option value="item3">Context Menu Item 3</option>
</Select>
<Select
options={[
{ value: "item1", label: "Context Menu Item 1" },
{ value: "item2", label: "Context Menu Item 2" },
{ value: "item3", label: "Context Menu Item 3" },
]}
/>
<SelectInput
label="Disabled State"
disabled={true}
value={disabledValue}
onChange={(e) => setDisabledValue(e.target.value)}
onChange={(data) => setDisabledValue(data.target.value)}
placeholder="Select"
>
<option value="item1">Context Menu Item 1</option>
<option value="item2">Context Menu Item 2</option>
<option value="item3">Context Menu Item 3</option>
</Select>
options={[
{ value: "item1", label: "Context Menu Item 1" },
{ value: "item2", label: "Context Menu Item 2" },
{ value: "item3", label: "Context Menu Item 3" },
]}
/>
</div>
);
};
stories/Input.stories.js → stories/TextInput.stories.js
+22 -22
View File
@@ -1,9 +1,9 @@
import React from "react";
import Input from "../app/components/Input";
import TextInput from "../app/components/TextInput";
export default {
title: "Forms/Input",
component: Input,
title: "Forms/TextInput",
component: TextInput,
parameters: {
layout: "centered",
},
@@ -38,12 +38,12 @@ export default {
},
};
const Template = (args) => <Input {...args} />;
const Template = (args) => <TextInput {...args} />;
// Default story
export const Default = Template.bind({});
Default.args = {
label: "Default Input",
label: "Default Text Input",
placeholder: "Enter text...",
size: "medium",
labelVariant: "default",
@@ -53,7 +53,7 @@ Default.args = {
// Size variants
export const Small = Template.bind({});
Small.args = {
label: "Small Input",
label: "Small Text Input",
placeholder: "Small size",
size: "small",
labelVariant: "default",
@@ -62,7 +62,7 @@ Small.args = {
export const Medium = Template.bind({});
Medium.args = {
label: "Medium Input",
label: "Medium Text Input",
placeholder: "Medium size",
size: "medium",
labelVariant: "default",
@@ -71,7 +71,7 @@ Medium.args = {
export const Large = Template.bind({});
Large.args = {
label: "Large Input",
label: "Large Text Input",
placeholder: "Large size",
size: "large",
labelVariant: "default",
@@ -151,7 +151,7 @@ export const Interactive = (args) => {
return (
<div className="space-y-4">
<Input
<TextInput
{...args}
value={value}
onChange={(e) => setValue(e.target.value)}
@@ -161,7 +161,7 @@ export const Interactive = (args) => {
);
};
Interactive.args = {
label: "Interactive Input",
label: "Interactive Text Input",
placeholder: "Type something...",
size: "medium",
labelVariant: "default",
@@ -174,7 +174,7 @@ export const AllSizes = () => (
<div>
<h3 className="text-lg font-semibold mb-4">Small Size</h3>
<div className="space-y-4">
<Input
<TextInput
label="Small Default"
placeholder="Small with top label"
size="small"
@@ -186,13 +186,13 @@ export const AllSizes = () => (
<div>
<h3 className="text-lg font-semibold mb-4">Medium Size</h3>
<div className="space-y-4">
<Input
<TextInput
label="Medium Default"
placeholder="Medium with top label"
size="medium"
labelVariant="default"
/>
<Input
<TextInput
label="Medium Horizontal"
placeholder="Medium with left label"
size="medium"
@@ -204,13 +204,13 @@ export const AllSizes = () => (
<div>
<h3 className="text-lg font-semibold mb-4">Large Size</h3>
<div className="space-y-4">
<Input
<TextInput
label="Large Default"
placeholder="Large with top label"
size="large"
labelVariant="default"
/>
<Input
<TextInput
label="Large Horizontal"
placeholder="Large with left label"
size="large"
@@ -225,39 +225,39 @@ export const AllSizes = () => (
export const AllStates = () => (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-4">Input States</h3>
<h3 className="text-lg font-semibold mb-4">Text Input States</h3>
<div className="space-y-4">
<Input
<TextInput
label="Default State"
placeholder="Default input"
size="medium"
state="default"
/>
<Input
<TextInput
label="Active State"
placeholder="Active input"
size="medium"
state="active"
/>
<Input
<TextInput
label="Hover State"
placeholder="Hover input"
size="medium"
state="hover"
/>
<Input
<TextInput
label="Focus State"
placeholder="Focused input"
size="medium"
state="focus"
/>
<Input
<TextInput
label="Error State"
placeholder="Error input"
size="medium"
error={true}
/>
<Input
<TextInput
label="Disabled State"
placeholder="Disabled input"
size="medium"