Merge pull request #17 from UgnisSoftware/UGN-218

feature UGN-218 - set up css grid template for ColumnMatch component

.github/workflows/test.yaml

@@ -17,5 +17,5 @@ jobs:
         with:
           node-version: "16.x"
       - run: npm ci
-      - run: npm ts
-      - run: npm test
+      - run: npm run ts
+      - run: npm run test

src/components/FadingWrapper.tsx

@@ -0,0 +1,18 @@
+import { Box } from "@chakra-ui/react"
+import React from "react"
+
+type FadingWrapperProps = {
+  gridColumn: string
+  gridRow: string
+}
+
+export const FadingWrapper = ({ gridColumn, gridRow }: FadingWrapperProps) => (
+  <>
+    <Box gridColumn={gridColumn} gridRow={gridRow} borderRadius="1.2rem" border="1px solid" borderColor="gray.200" />
+    <Box
+      gridColumn={gridColumn}
+      gridRow={gridRow}
+      bg="linear-gradient(rgba(255, 255, 255, 0), 90%, rgba(255, 255, 255, 1))"
+    />
+  </>
+)

src/components/MatchColumns.tsx

@@ -1,80 +1,50 @@
-import React, { useMemo } from "react"
-import { MatchColumnsFields } from "./MatchColumnsFields"
-import { generateOptions } from "../utils/generateOptions"
-import { Box, Text, Button } from "@chakra-ui/react"
+import React from "react"
+import { Box, Flex, Heading, Text } from "@chakra-ui/react"
+import { FadingWrapper } from "./FadingWrapper"
 
-const MATCH_COLUMNS_TITLE = "Validate if columns were matched correctly"
-const CANCEL_BUTTON_TITLE = "Cancel"
-const CONFIRM_BUTTON_TITLE = "Confirm and continue"
-const REQUIRED_ERROR_TEXT = "Required"
-const DUPLICATE_COLUMN_TEXT = "Duplicate column"
+const MATCH_COLUMNS_TITLE = "Validate column matching"
+const USER_TABLE_TITLE = "Your table"
+const TEMPLATE_TITLE = "Will become"
 
 type MatchColumnsProps = {
-  onCancel: () => void
-  headerValues: string[]
-  table: any
-  onContinue: (matchedColumns: object) => void
-  error?: string
-  values: object
-  loading: boolean
+  headerRow: string[]
 }
-export const MatchColumns = ({
-  onCancel,
-  headerValues,
-  table,
-  onContinue,
-  error,
-  values,
-  loading,
-}: MatchColumnsProps) => {
-  const options = useMemo(() => generateOptions(table), [table])
-  // const generatedSchema = useMemo(
-  //   () =>
-  //     yup.object(
-  //       Object.fromEntries(
-  //         headerValues.map((headerValue) => [
-  //           headerValue,
-  //           yup
-  //             .string()
-  //             .required(REQUIRED_ERROR_TEXT)
-  //             .test(
-  //               "duplicate",
-  //               DUPLICATE_COLUMN_TEXT,
-  //               (value: string | undefined, context: { [key: string]: any }): any => {
-  //                 const isUnique =
-  //                   Object.values(context.parent).filter((parentValue) => value && parentValue === value).length <= 1
-  //                 return isUnique
-  //               },
-  //             ),
-  //         ]),
-  //       ),
-  //     ),
-  //   [headerValues],
-  // )
-
-  //<Form onSubmit={onContinue} initialValues={values} validation={generatedSchema}>
 
+export const MatchColumns = ({ headerRow }: MatchColumnsProps) => {
   return (
-    <>
-      <Box minH="5.375rem" display="flex" alignItems="center" px="0.75rem">
-        <Text variant="h5" mr="1rem">
-          {MATCH_COLUMNS_TITLE}
-        </Text>
-        <Box display="flex" flex={1} justifyContent="flex-end">
-          <Button variant="outline" mr="1rem" onClick={onCancel}>
-            {CANCEL_BUTTON_TITLE}
-          </Button>
-          <Button type="submit" isLoading={loading}>
-            {CONFIRM_BUTTON_TITLE}
-          </Button>
+    <Flex flex={1} flexDir="column" minH={"100vh"}>
+      <Heading size="lg" mb={8}>
+        {MATCH_COLUMNS_TITLE}
+      </Heading>
+      <Flex
+        flex={1}
+        display="grid"
+        gridTemplateRows="auto 1fr auto 1fr"
+        gridTemplateColumns={`repeat(${headerRow.length}, minmax(20rem, 1fr))`}
+      >
+        <Box gridColumn={`1/${headerRow.length + 1}`}>
+          <Text fontSize="2xl" lineHeight={8} fontWeight="semibold" mb={4}>
+            {USER_TABLE_TITLE}
+          </Text>
+        </Box>
+        <FadingWrapper gridColumn={`1/${headerRow.length + 1}`} gridRow="2/3" />
+        {headerRow.map((header, index) => (
+          <Box gridRow="2/3" gridColumn={`${index + 1}/${index + 2}`} key={header}>
+            {header}
+          </Box>
+        ))}
+        <Box gridColumn={`1/${headerRow.length + 1}`}>
+          <Text fontSize="2xl" lineHeight={8} fontWeight="semibold" mb={4} mt={8}>
+            {TEMPLATE_TITLE}
+          </Text>
         </Box>
-      </Box>
-      {error && (
-        <Text color="red.500" pl={1} pb={1}>
-          {error}
-        </Text>
-      )}
-      <MatchColumnsFields headerValues={headerValues} options={options} />
-    </>
+        <FadingWrapper gridColumn={`1/${headerRow.length + 1}`} gridRow="4/5" />
+        {headerRow.map((header, index) => (
+          <Box gridRow="4/5" gridColumn={`${index + 1}/${index + 2}`} key={header}>
+            {header}
+          </Box>
+        ))}
+      </Flex>
+    </Flex>
   )
 }

src/components/Providers.tsx

@@ -1,13 +1,13 @@
 import { ChakraProvider, CSSObject } from "@chakra-ui/react"
 import { createContext } from "react"
-import type { ReactSpreadsheetImportProps } from "./ReactSpreadsheetImport"
+import type { RsiProps } from "../types"
 
-export const RsiContext = createContext({} as ReactSpreadsheetImportProps)
+export const RsiContext = createContext({} as RsiProps)
 
 type ProvidersProps = {
   children: React.ReactNode
   theme: CSSObject
-  rsiValues: ReactSpreadsheetImportProps
+  rsiValues: RsiProps
 }
 
 export const Providers = ({ children, theme, rsiValues }: ProvidersProps) => (

src/components/ReactSpreadsheetImport.tsx

@@ -3,21 +3,11 @@ import { ModalCloseButton } from "./ModalCloseButton"
 import { Steps } from "./Steps"
 import { themeOverrides, colorSchemeOverrides } from "../theme"
 import { Providers } from "./Providers"
+import type { RsiProps } from "../types"
 
 export const theme = extendTheme(colorSchemeOverrides, themeOverrides)
 
-export type Config = {
-  // Title of importer modal
-  title?: string
-}
-
-export type ReactSpreadsheetImportProps = {
-  isOpen: boolean
-  onClose: () => void
-  config: Config
-}
-
-export const ReactSpreadsheetImport = (props: ReactSpreadsheetImportProps) => {
+export const ReactSpreadsheetImport = (props: RsiProps) => {
   const { isOpen, onClose } = props
   return (
     <Providers theme={theme} rsiValues={props}>

src/components/Upload.tsx

@@ -12,13 +12,11 @@ type UploadProps = {
 }
 
 export const Upload = ({ onContinue }: UploadProps) => {
-  const {
-    config: { title },
-  } = useRsi()
+  const { config } = useRsi()
   return (
     <Box minH="fit-content" display="flex" flex={1} p="2rem" flexDirection="column">
       <Heading size="lg" color="gray.700" mb="2rem">
-        {title || DEFAULT_TITLE}
+        {config?.title || DEFAULT_TITLE}
       </Heading>
       <Text fontSize="2xl" lineHeight={8} fontWeight="semibold" color="gray.700">
         {MANIFEST_TITLE}

src/components/UploadFlow.tsx

@@ -113,30 +113,6 @@ export const UploadFlow = ({ nextStep }: Props) => {
       )
     case Type.matchColumns:
     case Type.submitMatchColumns:
-    case Type.submitMatchColumnsError:
-      return (
-        <MatchColumns
-          headerValues={state.headerValues}
-          onCancel={() => {
-            setState({ type: Type.upload })
-          }}
-          values={state.values}
-          table={state.table}
-          loading={state.type === Type.submitMatchColumns}
-          error={state.type === Type.submitMatchColumnsError ? state.error : undefined}
-          onContinue={(values) => {
-            if (state.type === Type.matchColumns || state.type === Type.submitMatchColumnsError) {
-              setState({
-                type: Type.submitMatchColumns,
-                data: state.data,
-                headerValues: state.headerValues,
-                table: state.table,
-                values,
-              })
-            }
-          }}
-        />
-      )
     case Type.loadMatchColumns:
       return <Progress isIndeterminate />
     default:

src/stories/Default.stories.tsx

@@ -1,5 +1,7 @@
 import { ReactSpreadsheetImport } from "../components/ReactSpreadsheetImport"
 import { Button, useDisclosure } from "@chakra-ui/react"
+import { mockRsiValues } from "./mockRsiValues"
+
 export default {
   title: "React spreadsheet import",
 }
@@ -9,7 +11,7 @@ export const Basic = () => {
   return (
     <>
       <Button onClick={onOpen}>Open modal</Button>
-      <ReactSpreadsheetImport isOpen={isOpen} onClose={onClose} config={{ title: "Upload file" }} />
+      <ReactSpreadsheetImport {...mockRsiValues} isOpen={isOpen} onClose={onClose} config={{ title: "Upload file" }} />
     </>
   )
 }

src/stories/MatchColumns.stories.tsx

@@ -0,0 +1,16 @@
+import { theme } from "../components/ReactSpreadsheetImport"
+import { MatchColumns } from "../components/MatchColumns"
+import { Providers } from "../components/Providers"
+import { mockRsiValues } from "./mockRsiValues"
+
+export default {
+  title: "MatchColumns",
+}
+
+const headerRow = ["Name", "Surname", "Age", "Gender"]
+
+export const Basic = () => (
+  <Providers theme={theme} rsiValues={mockRsiValues}>
+    <MatchColumns headerRow={headerRow} />
+  </Providers>
+)

src/stories/mockRsiValues.ts

@@ -0,0 +1,39 @@
+import type { Field, RsiProps } from "../types"
+
+const fields: Field[] = [
+  {
+    label: "Name",
+    key: "name",
+    matches: ["first name"],
+    fieldType: {
+      type: "input",
+    },
+    examples: ["Teddy", "John", "Stephanie"],
+  },
+  {
+    label: "Surname",
+    key: "name",
+    matches: ["second name"],
+    fieldType: {
+      type: "input",
+    },
+    examples: ["McDonald", "Smith", "Chomsky"],
+  },
+  {
+    label: "Age",
+    key: "age",
+    matches: ["oldness"],
+    fieldType: {
+      type: "input",
+    },
+    examples: ["23", "77", "99"],
+  },
+]
+
+export const mockRsiValues: RsiProps = {
+  fields: fields,
+  onSubmit: () => {},
+  isOpen: true,
+  onClose: () => {},
+  config: {},
+}

src/types.ts

@@ -1,8 +1,10 @@
-export type Props = {
+export type RsiProps = {
   config?: Config
   fields: Fields
   hooks?: Hooks
   onSubmit: (data: Result) => void
+  isOpen: boolean
+  onClose: () => void
 }
 
 export type Config = {