76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
|
import { ComponentMeta, ComponentStory } from "@storybook/react";
|
|
import { Copy } from "react-feather";
|
|
|
|
import { TextAreaField, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
|
|
import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
|
|
|
|
export default {
|
|
title: "Inputs",
|
|
component: TextField,
|
|
argTypes: {
|
|
disabled: {
|
|
options: [false, true],
|
|
},
|
|
},
|
|
} as ComponentMeta<typeof TextField>;
|
|
|
|
const TextInputTemplate: ComponentStory<typeof TextField> = (args) => <TextField {...args} />;
|
|
// name="demo" label="Demo Label" hint="Hint text"
|
|
export const TextInput = TextInputTemplate.bind({});
|
|
TextInput.args = {
|
|
name: "demo",
|
|
label: "Demo Label",
|
|
hint: "Hint Text",
|
|
disabled: false,
|
|
};
|
|
|
|
export const TextInputPrefix = TextInputTemplate.bind({});
|
|
TextInputPrefix.args = {
|
|
name: "demo",
|
|
label: "Demo Label",
|
|
hint: "Hint Text",
|
|
addOnLeading: "https://",
|
|
disabled: false,
|
|
};
|
|
|
|
export const TextInputSuffix = TextInputTemplate.bind({});
|
|
TextInputSuffix.args = {
|
|
name: "demo",
|
|
label: "Demo Label",
|
|
hint: "Hint Text",
|
|
addOnSuffix: "Minutes",
|
|
disabled: false,
|
|
};
|
|
|
|
export const TextInputPrefixIcon = TextInputTemplate.bind({});
|
|
TextInputPrefixIcon.args = {
|
|
name: "demo",
|
|
label: "Demo Label",
|
|
hint: "Hint Text",
|
|
addOnFilled: false,
|
|
addOnSuffix: <Copy />,
|
|
disabled: false,
|
|
};
|
|
export const TextInputSuffixIcon = TextInputTemplate.bind({});
|
|
TextInputSuffixIcon.args = {
|
|
name: "demo",
|
|
label: "Demo Label",
|
|
hint: "Hint Text",
|
|
addOnFilled: false,
|
|
addOnLeading: <Copy />,
|
|
disabled: false,
|
|
};
|
|
|
|
export const TextAreaInput: ComponentStory<typeof TextAreaField> = () => (
|
|
<TextAreaField name="Text-area-input" label="Text Area" />
|
|
);
|
|
|
|
export const DatePickerInput: ComponentStory<typeof DatePicker> = () => <DatePicker date={new Date()} />;
|
|
|
|
export const PasswordInput: ComponentStory<typeof PasswordField> = () => (
|
|
<TooltipProvider>
|
|
<PasswordField />
|
|
</TooltipProvider>
|
|
);
|