From 0ac7fcbbe279addb722c65a044053490f873752a Mon Sep 17 00:00:00 2001 From: Ashmit JaiSarita Gupta <43639341+devilkiller-ag@users.noreply.github.com> Date: Sat, 24 Aug 2024 17:36:23 +0530 Subject: [PATCH] feat: created input box component and stories for it (#3093) Co-authored-by: akshatnema --- components/InputBox.stories.tsx | 52 + components/InputBox.tsx | 21 + components/NewsletterSubscribe.tsx | 28 +- package-lock.json | 1951 +++++-------------- package.json | 3 +- types/components/FigurePropsType.ts | 4 +- types/components/InputBoxPropsType.ts | 23 + types/components/community/CardPropsType.ts | 2 +- types/components/dashboard/TableTypes.ts | 4 +- 9 files changed, 556 insertions(+), 1532 deletions(-) create mode 100644 components/InputBox.stories.tsx create mode 100644 components/InputBox.tsx create mode 100644 types/components/InputBoxPropsType.ts diff --git a/components/InputBox.stories.tsx b/components/InputBox.stories.tsx new file mode 100644 index 000000000000..f30247a7b83b --- /dev/null +++ b/components/InputBox.stories.tsx @@ -0,0 +1,52 @@ +import { useArgs } from '@storybook/preview-api'; +import type { Meta, StoryObj } from '@storybook/react'; + +import type { InputBoxProps } from '@/types/components/InputBoxPropsType'; +import { InputTypes } from '@/types/components/InputBoxPropsType'; + +import InputBox from './InputBox'; + +const meta: Meta = { + title: 'Components/InputBox', + component: InputBox +}; + +export default meta; + +type Story = StoryObj; + +const Input: Story = { + args: { + inputValue: '' + }, + + render: (args: InputBoxProps) => { + const [{ inputValue }, updateArgs] = useArgs(); + + const setValue = (newValue: string) => { + updateArgs({ inputValue: newValue }); + }; + + return ; + } +}; + +export const TextInput: Story = { + ...Input, + + args: { + inputType: InputTypes.TEXT, + inputName: 'Name', + placeholder: 'AsyncAPI Initiative' + } +}; + +export const EmailInput: Story = { + ...Input, + + args: { + inputType: InputTypes.EMAIL, + inputName: 'Email', + placeholder: 'press@asyncapi.io' + } +}; diff --git a/components/InputBox.tsx b/components/InputBox.tsx new file mode 100644 index 000000000000..446068f963ad --- /dev/null +++ b/components/InputBox.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import type { InputBoxProps } from '@/types/components/InputBoxPropsType'; + +/** + * This component renders input box. + */ +export default function InputBox({ inputType, inputName, placeholder, inputValue, setInput }: InputBoxProps) { + return ( + setInput(e.target.value)} + className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1' + required + data-testid={`NewsletterSubscribe-${inputType}-input`} + /> + ); +} diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx index 5b7c70aae7e0..80ce7474a19d 100644 --- a/components/NewsletterSubscribe.tsx +++ b/components/NewsletterSubscribe.tsx @@ -1,10 +1,12 @@ import { useState } from 'react'; import { ButtonType } from '@/types/components/buttons/ButtonPropsType'; +import { InputTypes } from '@/types/components/InputBoxPropsType'; import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; import { useTranslation } from '../utils/i18n'; import Button from './buttons/Button'; +import InputBox from './InputBox'; import Loader from './Loader'; import Heading from './typography/Heading'; import Paragraph from './typography/Paragraph'; @@ -128,25 +130,19 @@ export default function NewsletterSubscribe({ ) : (
- setName(e.target.value)} - className='form-input block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1' - required - data-testid='NewsletterSubscribe-text-input' + inputValue={name} + setInput={setName} /> - setEmail(e.target.value)} - className='form-input mt-2 block w-full rounded-md sm:text-sm sm:leading-5 md:mt-0 md:flex-1' - required - data-testid='NewsletterSubscribe-email-input' + inputValue={email} + setInput={setEmail} />