From a6a8c8788aa2cbd8e5fad4e1f2324657e6c9c414 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 3 Jul 2023 16:49:41 +0530 Subject: [PATCH] feat: Added Chunk-Size edit facility --- apps/web/components/imports/Destination.tsx | 20 +++++++++++-- .../number-input/NumberInput.stories.tsx | 26 +++++++++++++++++ .../number-input/NumberInput.styles.tsx | 15 ++++++++++ .../number-input/NumberInput.tsx | 28 +++++++++++++++++++ apps/web/design-system/number-input/index.ts | 1 + apps/web/hooks/useDestination.tsx | 6 +++- 6 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 apps/web/design-system/number-input/NumberInput.stories.tsx create mode 100644 apps/web/design-system/number-input/NumberInput.styles.tsx create mode 100644 apps/web/design-system/number-input/NumberInput.tsx create mode 100644 apps/web/design-system/number-input/index.ts diff --git a/apps/web/components/imports/Destination.tsx b/apps/web/components/imports/Destination.tsx index 337296412..de7814ef6 100644 --- a/apps/web/components/imports/Destination.tsx +++ b/apps/web/components/imports/Destination.tsx @@ -1,11 +1,13 @@ import { Prism } from '@mantine/prism'; import { ITemplate } from '@impler/shared'; +import { Controller } from 'react-hook-form'; import { Code, Stack, Accordion, Title, useMantineColorScheme } from '@mantine/core'; -import { REGULAR_EXPRESSIONS, colors } from '@config'; import { Input } from '@ui/input'; import { Button } from '@ui/button'; import { APIBlock } from '@ui/api-block'; +import { NumberInput } from '@ui/number-input'; +import { REGULAR_EXPRESSIONS, colors } from '@config'; import { useDestination } from '@hooks/useDestination'; interface DestinationProps { @@ -15,7 +17,7 @@ interface DestinationProps { export function Destination({ template, accessToken }: DestinationProps) { const { colorScheme } = useMantineColorScheme(); - const { register, errors, onSubmit, isUpdateImportLoading } = useDestination({ template }); + const { register, control, errors, onSubmit, isUpdateImportLoading } = useDestination({ template }); return ( <> @@ -40,6 +42,20 @@ export function Destination({ template, accessToken }: DestinationProps) { error={errors.callbackUrl ? 'Please enter valid URL' : undefined} /> + ( + + )} + /> diff --git a/apps/web/design-system/number-input/NumberInput.stories.tsx b/apps/web/design-system/number-input/NumberInput.stories.tsx new file mode 100644 index 000000000..e058f9bee --- /dev/null +++ b/apps/web/design-system/number-input/NumberInput.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { NumberInput } from './NumberInput'; + +export default { + title: 'NumberInput', + component: NumberInput, + argTypes: { + placeholder: { type: 'string' }, + error: { type: 'string' }, + disabled: { type: 'boolean' }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args: any) => ; + +export const Primary = Template.bind({}); +Primary.args = { + placeholder: 'Price', +}; + +export const WithError = Template.bind({}); +WithError.args = { + placeholder: 'Price', + error: 'This field is required', +}; diff --git a/apps/web/design-system/number-input/NumberInput.styles.tsx b/apps/web/design-system/number-input/NumberInput.styles.tsx new file mode 100644 index 000000000..94f9376ec --- /dev/null +++ b/apps/web/design-system/number-input/NumberInput.styles.tsx @@ -0,0 +1,15 @@ +import { colors } from '@config'; +import { createStyles, MantineTheme } from '@mantine/core'; + +const getInputStyles = (theme: MantineTheme): React.CSSProperties => ({ + borderRadius: 0, + padding: theme.spacing.xs, + // border: `1px solid ${hasError ? colors.danger : colors.StrokeSecondaryDark}`, + backgroundColor: theme.colorScheme === 'dark' ? colors.BGPrimaryDark : colors.BGPrimaryLight, +}); + +export default createStyles((theme: MantineTheme): Record => { + return { + input: getInputStyles(theme), + }; +}); diff --git a/apps/web/design-system/number-input/NumberInput.tsx b/apps/web/design-system/number-input/NumberInput.tsx new file mode 100644 index 000000000..ee13ea30b --- /dev/null +++ b/apps/web/design-system/number-input/NumberInput.tsx @@ -0,0 +1,28 @@ +import useStyles from './NumberInput.styles'; +import { NumberInput as MantineInput, MantineSize } from '@mantine/core'; + +interface NumberInputProps { + error?: string; + register?: any; + required?: boolean; + size?: MantineSize; + disabled?: boolean; + placeholder?: string; +} + +export function NumberInput({ size, error, required, disabled, register, placeholder }: NumberInputProps) { + const { classes } = useStyles(); + + return ( + + ); +} diff --git a/apps/web/design-system/number-input/index.ts b/apps/web/design-system/number-input/index.ts new file mode 100644 index 000000000..6433506aa --- /dev/null +++ b/apps/web/design-system/number-input/index.ts @@ -0,0 +1 @@ +export * from './NumberInput'; diff --git a/apps/web/hooks/useDestination.tsx b/apps/web/hooks/useDestination.tsx index 897ccbd66..d3171359d 100644 --- a/apps/web/hooks/useDestination.tsx +++ b/apps/web/hooks/useDestination.tsx @@ -15,13 +15,15 @@ interface UseDestinationProps { interface UpdateDestinationData { authHeaderName: string; callbackUrl: string; + chunkSize: number; } export function useDestination({ template }: UseDestinationProps) { const queryClient = useQueryClient(); const { - register, reset, + control, + register, handleSubmit, formState: { errors }, } = useForm(); @@ -50,6 +52,7 @@ export function useDestination({ template }: UseDestinationProps) { reset({ authHeaderName: template.authHeaderName, callbackUrl: template.callbackUrl, + chunkSize: template.chunkSize, }); }, [template, reset]); @@ -66,6 +69,7 @@ export function useDestination({ template }: UseDestinationProps) { return { errors, + control, register, isUpdateImportLoading, onSubmit: handleSubmit(onSubmit),