algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-28 04:33:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ui][text input] support element add ons

Browse Source
This commit is contained in:
Yangshun Tay
2022-10-06 20:02:55 +08:00
parent 0062199bd6
commit 2906dbdc75
3 changed files with 279 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
apps/storybook/stories/text-input.stories.tsx
View File

@ -5,7 +5,7 @@ import {
QuestionMarkCircleIcon,
} from '@heroicons/react/24/solid';
import type { ComponentMeta } from '@storybook/react';
import { TextInput } from '@tih/ui';
import { Select, TextInput } from '@tih/ui';
export default {
argTypes: {
@ -70,7 +70,8 @@ export function Email() {
<TextInput
label="Email"
placeholder="john.doe@email.com"
startIcon={EnvelopeIcon}
startAddOn={EnvelopeIcon}
startAddOnType="icon"
type="email"
value={value}
onChange={setValue}
@ -94,7 +95,8 @@ export function Icon() {
<TextInput
label="Account number"
placeholder="000-00-0000"
startIcon={QuestionMarkCircleIcon}
startAddOn={QuestionMarkCircleIcon}
startAddOnType="icon"
type="text"
value={value}
onChange={setValue}
@ -105,12 +107,44 @@ export function Icon() {
export function Disabled() {
return (
<TextInput
disabled={true}
label="Disabled input"
placeholder="John Doe"
type="text"
/>
<div className="space-y-4">
<TextInput
disabled={true}
label="Disabled input"
placeholder="John Doe"
type="text"
/>
<TextInput
disabled={true}
endAddOn={
<Select
borderStyle="borderless"
isLabelHidden={true}
label="Currency"
options={[
{
label: 'USD',
value: 'USD',
},
{
label: 'SGD',
value: 'SGD',
},
{
label: 'EUR',
value: 'EUR',
},
]}
/>
}
endAddOnType="element"
label="Price"
placeholder="0.00"
startAddOn="$"
startAddOnType="label"
type="text"
/>
</div>
);
}
@ -134,10 +168,97 @@ export function Error() {
value.length < 6 ? 'Password must be at least 6 characters' : undefined
}
label="Email"
startIcon={KeyIcon}
startAddOn={KeyIcon}
startAddOnType="icon"
type="password"
value={value}
onChange={setValue}
/>
);
}
export function AddOns() {
return (
<div className="space-y-4">
<TextInput
label="Price"
placeholder="0.00"
startAddOn="$"
startAddOnType="label"
type="text"
/>
<TextInput
endAddOn="USD"
endAddOnType="label"
label="Price"
placeholder="0.00"
type="text"
/>
<TextInput
endAddOn="USD"
endAddOnType="label"
label="Price"
placeholder="0.00"
startAddOn="$"
startAddOnType="label"
type="text"
/>
<TextInput
label="Phone Number"
placeholder="+1 (123) 456-7890"
startAddOn={
<Select
borderStyle="borderless"
isLabelHidden={true}
label="country"
options={[
{
label: 'US',
value: 'US',
},
{
label: 'SG',
value: 'SG',
},
{
label: 'JP',
value: 'JP',
},
]}
/>
}
startAddOnType="element"
type="text"
/>
<TextInput
endAddOn={
<Select
borderStyle="borderless"
isLabelHidden={true}
label="Currency"
options={[
{
label: 'USD',
value: 'USD',
},
{
label: 'SGD',
value: 'SGD',
},
{
label: 'EUR',
value: 'EUR',
},
]}
/>
}
endAddOnType="element"
label="Price"
placeholder="0.00"
startAddOn="$"
startAddOnType="label"
type="text"
/>
</div>
);
}