feat: Create a separate "InputForm" molecule component
- Develop the "InputForm" molecule component - Remove empty modal-gacha component stories and test files that prevent Storybook from running
This commit is contained in:
@@ -1 +1 @@
|
||||
export {};
|
||||
export * from './input-form';
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './input-form';
|
||||
@@ -0,0 +1,51 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { InputForm } from './input-form';
|
||||
|
||||
const meta = {
|
||||
title: 'Molecules/InputForm',
|
||||
component: InputForm,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof InputForm>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
label: 'Email',
|
||||
placeholder: 'Enter your email',
|
||||
type: 'email',
|
||||
size: 'md',
|
||||
},
|
||||
};
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: 'Username',
|
||||
placeholder: 'Enter your username',
|
||||
type: 'text',
|
||||
size: 'md',
|
||||
error: 'This field is required',
|
||||
},
|
||||
};
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
label: 'Full Name',
|
||||
placeholder: 'Enter your full name',
|
||||
type: 'text',
|
||||
size: 'lg',
|
||||
},
|
||||
};
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
label: 'Phone',
|
||||
placeholder: 'Enter your phone number',
|
||||
type: 'text',
|
||||
size: 'sm',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
import {
|
||||
DetailedHTMLProps,
|
||||
FC,
|
||||
InputHTMLAttributes,
|
||||
ReactElement,
|
||||
} from 'react';
|
||||
import { Input } from '../../atoms';
|
||||
|
||||
type TInputType = 'text' | 'email';
|
||||
type TInputSize = 'sm' | 'md' | 'lg';
|
||||
|
||||
type TInputFormProps = Omit<
|
||||
DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
|
||||
'size' | 'type'
|
||||
> & {
|
||||
label: string;
|
||||
type?: TInputType;
|
||||
size?: TInputSize;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
export const InputForm: FC<TInputFormProps> = ({
|
||||
label,
|
||||
placeholder,
|
||||
type = 'text',
|
||||
size = 'md',
|
||||
error,
|
||||
...rest
|
||||
}): ReactElement => {
|
||||
return (
|
||||
<div className="flex gap-[8px] flex-col">
|
||||
<div className="self-start text-p3 font-medium">{label}</div>
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
type={type}
|
||||
size={size}
|
||||
error={error}
|
||||
{...rest}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputForm;
|
||||
Reference in New Issue
Block a user