feat: Added Chunk-Size edit facility (#288)

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}
                 />
                 <Input placeholder="Auth Header Name" register={register('authHeaderName')} />
+                <Controller
+                  control={control}
+                  name="chunkSize"
+                  render={({ field }) => (
+                    <NumberInput
+                      placeholder="100"
+                      register={{
+                        value: field.value,
+                        onChange: field.onChange,
+                      }}
+                      error={errors.chunkSize?.message}
+                    />
+                  )}
+                />
                 <Button loading={isUpdateImportLoading} type="submit">
                   Save
                 </Button>

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<typeof NumberInput>;
+
+const Template: ComponentStory<typeof NumberInput> = (args: any) => <NumberInput {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  placeholder: 'Price',
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  placeholder: 'Price',
+  error: 'This field is required',
+};

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<string, any> => {
+  return {
+    input: getInputStyles(theme),
+  };
+});

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 (
+    <MantineInput
+      size={size}
+      error={error}
+      required={required}
+      disabled={disabled}
+      classNames={classes}
+      placeholder={placeholder}
+      type="number"
+      {...register}
+    />
+  );
+}

apps/web/design-system/number-input/index.ts

@@ -0,0 +1 @@
+export * from './NumberInput';

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<UpdateDestinationData>();
@@ -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),