From 7f82b2ca4671472b43487d594c2abf7b0e786b46 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Thu, 26 Sep 2024 21:21:18 +0530 Subject: [PATCH 01/32] feat: Basic layout setup --- .../widget/Phases/Phase1/Phase1.tsx | 99 +++++++++++++------ .../widget/Phases/Phase1/Styles.tsx | 7 -- apps/widget/src/config/colors.config.ts | 5 +- apps/widget/src/design-system/File/File.tsx | 5 +- .../FileDropzone/FileDropzone.tsx | 20 ++-- .../design-system/Stepper/Stepper.styles.ts | 1 - .../UploadDropzone/UploadDropzone.stories.tsx | 2 - .../UploadDropzone/UploadDropzone.styles.ts | 28 ++---- .../UploadDropzone/UploadDropzone.tsx | 47 +++------ apps/widget/src/icons/grid.icon.tsx | 32 ++++++ apps/widget/src/icons/index.ts | 1 + packages/client/src/config/texts.config.ts | 7 +- 12 files changed, 143 insertions(+), 111 deletions(-) create mode 100644 apps/widget/src/icons/grid.icon.tsx diff --git a/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx b/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx index 535b53f08..d33a1cde2 100644 --- a/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx +++ b/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx @@ -1,4 +1,4 @@ -import { Group } from '@mantine/core'; +import { Box, Divider, Flex, Group, Skeleton, Table, Text } from '@mantine/core'; import { Controller } from 'react-hook-form'; import { PhasesEnum } from '@types'; @@ -7,7 +7,7 @@ import { Button } from '@ui/Button'; import { variables } from '@config'; import { WIDGET_TEXTS } from '@impler/client'; -import { DownloadIcon, BackIcon } from '@icons'; +import { DownloadIcon, BackIcon, Warning, GridIcon } from '@icons'; import { UploadDropzone } from '@ui/UploadDropzone'; import { usePhase1 } from '@hooks/Phase1/usePhase1'; @@ -82,34 +82,73 @@ export function Phase1({ onNextClick: goNext, hasImageUpload, generateImageTempl - ( - { - setError('file', { - message: texts.PHASE1.SELECT_FILE_FORMAT_MSG, - type: 'manual', - }); - }} - className={classes.dropzone} - onDrop={(selectedFile) => { - field.onChange(selectedFile[variables.baseIndex]); - setError('file', {}); - }} - onClear={() => field.onChange(undefined)} - title={texts.PHASE1.SELECT_FILE_NAME} - file={field.value} - error={fieldState.error?.message} - /> - )} - /> + + ( + { + setError('file', { + message: texts.PHASE1.SELECT_FILE_FORMAT_MSG, + type: 'manual', + }); + }} + onDrop={(selectedFile) => { + field.onChange(selectedFile[variables.baseIndex]); + setError('file', {}); + }} + onClear={() => field.onChange(undefined)} + file={field.value} + error={fieldState.error?.message} + /> + )} + /> + + + + + Recommanded upto 1K records. + + + + + + + + + + + + + {Array.from({ length: 5 }).map((_, index) => ( + + + + + + + ))} + +
Element positionElement nameSymbolAtomic mass
+ + + + + + + +
+ + + ({ alignSelf: 'flex-end', }); -export const getDropzoneStyles = (theme: MantineTheme): React.CSSProperties => ({ - flexGrow: 1, - display: 'flex', - flexDirection: 'column', -}); - export default createStyles((theme: MantineTheme, params, getRef): Record => { return { container: getContainerStyles(theme), templateContainer: getTemplateContainerStyles(theme), download: getDownloadTemplateStyles(theme), - dropzone: getDropzoneStyles(theme), }; }); diff --git a/apps/widget/src/config/colors.config.ts b/apps/widget/src/config/colors.config.ts index 5f693781e..fe5e98c85 100644 --- a/apps/widget/src/config/colors.config.ts +++ b/apps/widget/src/config/colors.config.ts @@ -4,7 +4,6 @@ export const colors = { lightSuccess: '#F0FDF4', darkDeem: '#666666', lightDeem: '#CCCCCC', - lightGray: '#F8F8F8', black: '#000000', red: '#f03e3e', danger: '#AB3022', @@ -12,8 +11,10 @@ export const colors = { light: '#F2F9FE', white: '#FFFFFF', gray: '#ebebeb', + // lightGray: '#EFEFEF', + lightGray: '#F8F8F8', + lightBlue: '#5462ff', softBlue: '#edf3ff', - faintGrey: '#f2f2f2', softGrey: '#868e96', }; diff --git a/apps/widget/src/design-system/File/File.tsx b/apps/widget/src/design-system/File/File.tsx index 08745d630..38439bf31 100644 --- a/apps/widget/src/design-system/File/File.tsx +++ b/apps/widget/src/design-system/File/File.tsx @@ -1,9 +1,10 @@ -import { FileIcon, CrossIcon } from '../../icons'; import { Group, Text } from '@mantine/core'; + +import { variables } from '@config'; import useStyles from './File.style'; +import { FileIcon, CrossIcon } from '../../icons'; import { colors } from '../../config/colors.config'; import { formatBytes } from '../../util/helpers/common.helpers'; -import { variables } from '@config'; interface IFile { name: string; diff --git a/apps/widget/src/design-system/FileDropzone/FileDropzone.tsx b/apps/widget/src/design-system/FileDropzone/FileDropzone.tsx index 52e8e8d5b..5aa5d276e 100644 --- a/apps/widget/src/design-system/FileDropzone/FileDropzone.tsx +++ b/apps/widget/src/design-system/FileDropzone/FileDropzone.tsx @@ -1,9 +1,9 @@ -import { Group, Text } from '@mantine/core'; +import { Text } from '@mantine/core'; import { Dropzone as MantineDropzone, FileWithPath, MIME_TYPES } from '@mantine/dropzone'; -import { ImageIcon } from '../../icons'; +import { Button } from '@ui/Button'; +import { variables } from '../../config'; import { WIDGET_TEXTS } from '@impler/client'; import useStyles from './FileDropdown.styles'; -import { variables } from '../../config'; interface IDropzoneProps { loading?: boolean; @@ -37,15 +37,13 @@ export function FileDropzone(props: IDropzoneProps) { classNames={classes} maxSize={variables.LIMIT_5_MB} // 5 MB > - - - - - {texts.FILE_DROP_AREA.DROP_FILE}{' '} - - {texts.FILE_DROP_AREA.BROWSE_FILE} - + + {texts.FILE_DROP_AREA.DROP_FILE} + {texts.FILE_DROP_AREA.FILE_FORMATS} + + + {texts.FILE_DROP_AREA.IMAGE_FILE_SIZE} diff --git a/apps/widget/src/design-system/Stepper/Stepper.styles.ts b/apps/widget/src/design-system/Stepper/Stepper.styles.ts index c4a4026db..5bf5eb59b 100644 --- a/apps/widget/src/design-system/Stepper/Stepper.styles.ts +++ b/apps/widget/src/design-system/Stepper/Stepper.styles.ts @@ -6,7 +6,6 @@ export const getSeparatorStyles = () => ({ flex: 0, marginLeft: 7, marginRight: 7, - color: colors.lightGray, }); export const getStepLabelStyles = () => ({ diff --git a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx index 8eda1ba03..4ec093adc 100644 --- a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx +++ b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx @@ -27,7 +27,6 @@ export const Default = Template.bind({}); export const WithFile = Template.bind({}); WithFile.args = { - title: 'Select a file', file: { name: 'Document.tsx', size: 1200, @@ -36,6 +35,5 @@ WithFile.args = { export const WithError = Template.bind({}); WithError.args = { - title: 'Select a file', error: 'File is required', }; diff --git a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.styles.ts b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.styles.ts index 69abb8acd..80829611c 100644 --- a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.styles.ts +++ b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.styles.ts @@ -1,11 +1,10 @@ -/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */ import { createStyles, MantineTheme } from '@mantine/core'; import { colors } from '../../config/colors.config'; import { variables } from '../../config/variable.config'; export const getRootStyles = (theme: MantineTheme, hasError: boolean): React.CSSProperties => ({ borderColor: hasError ? colors.red : theme.colors.primary[variables.colorIndex], - flexGrow: 1, + backgroundColor: colors.lightGray, }); export const getSuccessRootStyles = (theme: MantineTheme): React.CSSProperties => ({ @@ -15,13 +14,12 @@ export const getSuccessRootStyles = (theme: MantineTheme): React.CSSProperties = padding: theme.spacing.md, borderRadius: 4, position: 'relative', - flexGrow: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', }); -export const getIconStyles = (theme) => ({ +export const getIconStyles = () => ({ height: 70, }); @@ -36,29 +34,19 @@ export const getCheckIconStyles = (theme) => ({ }, }); -export const getWrapperStyles = (theme) => ({ - width: '100%', -}); - -export const getDropzoneInnerStyles = (theme: MantineTheme): React.CSSProperties => ({ +export const getDropzoneInnerStyles = (): React.CSSProperties => ({ + height: '100%', display: 'flex', - justifyContent: 'center', alignItems: 'center', - height: '100%', -}); - -export const getBrowseTextStyles = (theme: MantineTheme): React.CSSProperties => ({ - color: theme.colors.primary[variables.colorIndex], + justifyContent: 'center', }); -export default createStyles((theme: MantineTheme, { hasError }: { hasError: boolean }, getRef): Record => { +export default createStyles((theme: MantineTheme, { hasError }: { hasError: boolean }): Record => { return { - icon: getIconStyles(theme), + icon: getIconStyles(), successRoot: getSuccessRootStyles(theme), root: getRootStyles(theme, hasError), checkIcon: getCheckIconStyles(theme), - wrapper: getWrapperStyles(theme), - browseText: getBrowseTextStyles(theme), - inner: getDropzoneInnerStyles(theme), + inner: getDropzoneInnerStyles(), }; }); diff --git a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx index c1e239d76..e101f638e 100644 --- a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx +++ b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx @@ -1,10 +1,11 @@ -import { Group, Text } from '@mantine/core'; +import { Group, Stack, Text } from '@mantine/core'; import { Dropzone as MantineDropzone, FileWithPath, MIME_TYPES } from '@mantine/dropzone'; +import { colors } from '@config'; +import { CheckIcon } from '../../icons'; +import { File as FileCMP } from '../File'; import { WIDGET_TEXTS } from '@impler/client'; import useStyles from './UploadDropzone.styles'; -import { FileIcon, CheckIcon } from '../../icons'; -import { File as FileCMP } from '../File'; -import { colors } from '@config'; +import { Button } from '@ui/Button'; interface IDropzoneProps { loading?: boolean; @@ -13,7 +14,6 @@ interface IDropzoneProps { onDrop: (files: FileWithPath[]) => void; onClear?: () => void; file?: FileWithPath; - title?: string; error?: string; className?: string; texts: typeof WIDGET_TEXTS; @@ -27,14 +27,11 @@ export function UploadDropzone(props: IDropzoneProps) { onClear, file, onReject, - title, className, error, texts, } = props; const { classes } = useStyles({ hasError: !!error }); - const wrapperClasses = [classes.wrapper]; - if (className) wrapperClasses.push(className); const isFileSelected = !!(file && file.name && file.size); @@ -60,35 +57,21 @@ export function UploadDropzone(props: IDropzoneProps) { const SelectFileContent = () => { return ( - -
- - {texts.FILE_DROP_AREA.DROP_FILE}{' '} - - {texts.FILE_DROP_AREA.BROWSE_FILE} - - - - - - - - - {texts.FILE_DROP_AREA.BRING_FILE} - -
- + + + {texts.FILE_DROP_AREA.DROP_FILE} + + {texts.FILE_DROP_AREA.FILE_FORMATS} + + + + ); }; return ( -
- {title ? ( - - {title} - - ) : null} +
{isFileSelected ? : } {error ? ( diff --git a/apps/widget/src/icons/grid.icon.tsx b/apps/widget/src/icons/grid.icon.tsx new file mode 100644 index 000000000..268990680 --- /dev/null +++ b/apps/widget/src/icons/grid.icon.tsx @@ -0,0 +1,32 @@ +import { IIcon } from '@types'; + +export function GridIcon(props: IIcon) { + return ( + + + + + + + + + + + + + ); +} diff --git a/apps/widget/src/icons/index.ts b/apps/widget/src/icons/index.ts index 77c04d265..d08afe81f 100644 --- a/apps/widget/src/icons/index.ts +++ b/apps/widget/src/icons/index.ts @@ -7,3 +7,4 @@ export * from './download.icon'; export * from './warning.icon'; export * from './image.icon'; export * from './back.icon'; +export * from './grid.icon'; diff --git a/packages/client/src/config/texts.config.ts b/packages/client/src/config/texts.config.ts index b8207cc76..a4b48e6aa 100644 --- a/packages/client/src/config/texts.config.ts +++ b/packages/client/src/config/texts.config.ts @@ -24,11 +24,11 @@ export const WIDGET_TEXTS = { CONFIRM_JOB: 'Confirm', }, FILE_DROP_AREA: { - DROP_FILE: 'Drop and drop a file here or ', - BROWSE_FILE: 'Browse from computer', + DROP_FILE: 'Drop and drop a file here', + CHOOSE_FILE: 'Choose a file', IMAGE_FILE_SIZE: 'Image size should be less than 5 MB. Supported formats are PNG, JPG and JPEG.', - BRING_FILE: 'Bring any .csv or .xlsx file here to start Import', + FILE_FORMATS: 'You can upload: CSV, xlsx, xlsm', FILE_SELECTED: 'File selected successfully', }, 'PHASE0-1': { @@ -52,7 +52,6 @@ export const WIDGET_TEXTS = { GENERATE_TEMPLATE: 'Generate Template', SEE_MAPPING: 'See Mapping', - SELECT_FILE_NAME: 'Select a file', SELECT_FILE_REQUIRED_MSG: 'Please select a file', SELECT_FILE_FORMAT_MSG: 'File type not supported! Please select a .csv or .xlsx file.', From 00737abdc94cdfbd8b78ef9fc306017da668ab36 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 30 Sep 2024 11:57:00 +0530 Subject: [PATCH 02/32] feat: Removed selected file item from dropzone --- .../UploadDropzone/UploadDropzone.stories.tsx | 9 +-- .../UploadDropzone/UploadDropzone.styles.ts | 56 +++++------------ .../UploadDropzone/UploadDropzone.tsx | 61 +++++++------------ 3 files changed, 40 insertions(+), 86 deletions(-) diff --git a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx index 4ec093adc..e20910939 100644 --- a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx +++ b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.stories.tsx @@ -25,13 +25,8 @@ const Template: ComponentStory = (args) => ({ - borderColor: hasError ? colors.red : theme.colors.primary[variables.colorIndex], - backgroundColor: colors.lightGray, -}); - -export const getSuccessRootStyles = (theme: MantineTheme): React.CSSProperties => ({ - borderColor: colors.success, - borderWidth: 2, - borderStyle: 'dashed', - padding: theme.spacing.md, - borderRadius: 4, - position: 'relative', +const getDropzoneInnerStyles = (): CSSObject => ({ + height: '100%', display: 'flex', - justifyContent: 'center', alignItems: 'center', + justifyContent: 'center', }); -export const getIconStyles = () => ({ - height: 70, -}); - -export const getCheckIconStyles = (theme) => ({ - height: 40, - backgroundColor: colors.success, - borderRadius: '50%', - color: 'white', - display: 'block', - [`@media (min-width: ${theme.breakpoints.md}px)`]: { - height: 50, - }, -}); - -export const getDropzoneInnerStyles = (): React.CSSProperties => ({ +const getRootStyles = (): CSSObject => ({ + flexGrow: 1, height: '100%', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', + borderRadius: 'var(--border-radius)', + backgroundColor: `var(--secondary-background)`, + '&:hover': { + backgroundColor: `var(--secondary-background-hover)`, + }, + '&[data-has-error]': { + borderColor: `var(--error-color)`, + }, }); -export default createStyles((theme: MantineTheme, { hasError }: { hasError: boolean }): Record => { +export default createStyles((): Record => { return { - icon: getIconStyles(), - successRoot: getSuccessRootStyles(theme), - root: getRootStyles(theme, hasError), - checkIcon: getCheckIconStyles(theme), + root: getRootStyles(), inner: getDropzoneInnerStyles(), }; }); diff --git a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx index e101f638e..adbcb3738 100644 --- a/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx +++ b/apps/widget/src/design-system/UploadDropzone/UploadDropzone.tsx @@ -1,22 +1,18 @@ -import { Group, Stack, Text } from '@mantine/core'; +import { Flex, Stack, Text } from '@mantine/core'; import { Dropzone as MantineDropzone, FileWithPath, MIME_TYPES } from '@mantine/dropzone'; -import { colors } from '@config'; -import { CheckIcon } from '../../icons'; -import { File as FileCMP } from '../File'; + +import { Button } from '@ui/Button'; import { WIDGET_TEXTS } from '@impler/client'; import useStyles from './UploadDropzone.styles'; -import { Button } from '@ui/Button'; interface IDropzoneProps { loading?: boolean; accept?: string[]; onReject?: () => void; onDrop: (files: FileWithPath[]) => void; - onClear?: () => void; - file?: FileWithPath; error?: string; - className?: string; texts: typeof WIDGET_TEXTS; + className?: string; } export function UploadDropzone(props: IDropzoneProps) { @@ -24,40 +20,27 @@ export function UploadDropzone(props: IDropzoneProps) { loading, accept = [MIME_TYPES.csv, MIME_TYPES.xlsx, 'application/vnd.ms-excel.sheet.macroenabled.12'], onDrop, - onClear, - file, onReject, - className, error, texts, + className, } = props; - const { classes } = useStyles({ hasError: !!error }); - - const isFileSelected = !!(file && file.name && file.size); - - const SelectedFileContent = () => { - return ( -
- -
- - - - - {texts.FILE_DROP_AREA.FILE_SELECTED} - - {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */} - -
- -
- ); - }; + const { classes } = useStyles(); const SelectFileContent = () => { return ( - - + + {texts.FILE_DROP_AREA.DROP_FILE} @@ -71,13 +54,13 @@ export function UploadDropzone(props: IDropzoneProps) { }; return ( -
- {isFileSelected ? : } + + {error ? ( - + {error} ) : null} -
+ ); } From b9854776c65807a85bee551e9ac646eea38afa82 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 30 Sep 2024 11:58:08 +0530 Subject: [PATCH 03/32] feat: Added Divider component --- .../design-system/Divider/Divider.styles.tsx | 24 +++++++++++++++++++ .../src/design-system/Divider/Divider.tsx | 20 ++++++++++++++++ .../widget/src/design-system/Divider/index.ts | 1 + 3 files changed, 45 insertions(+) create mode 100644 apps/widget/src/design-system/Divider/Divider.styles.tsx create mode 100644 apps/widget/src/design-system/Divider/Divider.tsx create mode 100644 apps/widget/src/design-system/Divider/index.ts diff --git a/apps/widget/src/design-system/Divider/Divider.styles.tsx b/apps/widget/src/design-system/Divider/Divider.styles.tsx new file mode 100644 index 000000000..1904d9dc1 --- /dev/null +++ b/apps/widget/src/design-system/Divider/Divider.styles.tsx @@ -0,0 +1,24 @@ +import { createStyles } from '@mantine/core'; + +export default createStyles( + (_, { orientation }: { orientation?: 'horizontal' | 'vertical'; size?: string | number }) => ({ + line: { + borderColor: 'var(--secondary-background)', + ...(orientation === 'horizontal' + ? { + borderTopWidth: 1, + borderTopStyle: 'solid', + zIndex: 0, + width: '43%', + } + : { + borderLeftWidth: 1, + borderLeftStyle: 'solid', + zIndex: 0, + marginLeft: 10, + marginRight: 10, + height: '43%', + }), + }, + }) +); diff --git a/apps/widget/src/design-system/Divider/Divider.tsx b/apps/widget/src/design-system/Divider/Divider.tsx new file mode 100644 index 000000000..9249899c8 --- /dev/null +++ b/apps/widget/src/design-system/Divider/Divider.tsx @@ -0,0 +1,20 @@ +import { Flex, Text } from '@mantine/core'; +import useStyles from './Divider.styles'; + +interface DividerProps { + label: string; + color?: string; + orientation?: 'horizontal' | 'vertical'; +} + +export function Divider({ label, orientation }: DividerProps) { + const { classes } = useStyles({ orientation, size: 1 }); + + return ( + +
+ {label} +
+ + ); +} diff --git a/apps/widget/src/design-system/Divider/index.ts b/apps/widget/src/design-system/Divider/index.ts new file mode 100644 index 000000000..1f84888dc --- /dev/null +++ b/apps/widget/src/design-system/Divider/index.ts @@ -0,0 +1 @@ +export * from './Divider'; From 6a767dbfa0e253af37f551dc1597e4d1b8a49852 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 30 Sep 2024 11:58:41 +0530 Subject: [PATCH 04/32] feat: Added ManualEntryView Component --- .../ManualEntryView/ManualEntryView.tsx | 53 +++++++++++++++++++ .../Phases/Phase1/ManualEntryView/index.ts | 1 + 2 files changed, 54 insertions(+) create mode 100644 apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx create mode 100644 apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/index.ts diff --git a/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx b/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx new file mode 100644 index 000000000..65ed6a76e --- /dev/null +++ b/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/ManualEntryView.tsx @@ -0,0 +1,53 @@ +import { GridIcon, Warning } from '@icons'; +import { Box, Group, Skeleton, Stack, Table, Text } from '@mantine/core'; +import { Button } from '@ui/Button'; +import { IColumn } from '@impler/shared'; + +interface ManaulEntryViewProps { + columns?: IColumn[]; + className?: string; +} + +export function ManaulEntryView({ columns, className }: ManaulEntryViewProps) { + return ( + + +
+ +
+ + Recommanded upto 1K records. + + + + + + {columns?.map((column) => ( + + ))} + + + + {Array.from({ length: 3 }).map((_, index) => ( + + {columns?.map((column) => ( + + ))} + + ))} + +
+ {column.name} +
+ +
+ + + + ); +} diff --git a/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/index.ts b/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/index.ts new file mode 100644 index 000000000..f416750cd --- /dev/null +++ b/apps/widget/src/components/widget/Phases/Phase1/ManualEntryView/index.ts @@ -0,0 +1 @@ +export * from './ManualEntryView'; From 171e3187f21b52d6b2f9c6268a1a76df89b625cb Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Mon, 30 Sep 2024 12:00:29 +0530 Subject: [PATCH 05/32] feat: Removed Submit Button on Upload Step --- apps/widget/src/components/Common/Footer/Footer.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/apps/widget/src/components/Common/Footer/Footer.tsx b/apps/widget/src/components/Common/Footer/Footer.tsx index 2f23dac57..8f88eea21 100644 --- a/apps/widget/src/components/Common/Footer/Footer.tsx +++ b/apps/widget/src/components/Common/Footer/Footer.tsx @@ -35,11 +35,6 @@ export function Footer({ ), - [PhasesEnum.UPLOAD]: ( - - ), [PhasesEnum.MAPPING]: ( <>
- - ( - { - setError('file', { - message: texts.PHASE1.SELECT_FILE_FORMAT_MSG, - type: 'manual', - }); - }} - onDrop={(selectedFile) => { - field.onChange(selectedFile[variables.baseIndex]); - setError('file', {}); - }} - onClear={() => field.onChange(undefined)} - file={field.value} - error={fieldState.error?.message} - /> - )} - /> - - - - - Recommanded upto 1K records. - - - - - - - - - - - - - {Array.from({ length: 5 }).map((_, index) => ( - - - - - - - ))} - -
Element positionElement nameSymbolAtomic mass
- - - - - - - -
- + + + ( + { + setError('file', { + message: texts.PHASE1.SELECT_FILE_FORMAT_MSG, + type: 'manual', + }); + }} + onDrop={(selectedFile) => { + field.onChange(selectedFile[variables.baseIndex]); + onSubmit(selectedFile[variables.baseIndex]); + }} + error={fieldState.error?.message} + /> + )} + /> + + + @@ -159,12 +129,7 @@ export function Phase1({ onNextClick: goNext, hasImageUpload, generateImageTempl onClose={onSelectSheetModalReset} /> -