Merge pull request #25 from UgnisSoftware/UGN-221

feat UGN-221  - add column matching

src/components/CheckIcon.tsx

@@ -0,0 +1,11 @@
+import { createIcon } from "@chakra-ui/icon"
+import * as React from "react"
+
+export const CheckIcon = createIcon({
+  viewBox: "0 0 14 14",
+  path: (
+    <g fill="currentColor">
+      <polygon points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039" />
+    </g>
+  ),
+})

src/components/MatchColumns.tsx

@@ -1,7 +1,10 @@
-import React from "react"
+import React, { useCallback, useState } from "react"
 import { Box, Flex, Heading, Text } from "@chakra-ui/react"
 import { FadingWrapper } from "./FadingWrapper"
 import { UserTableColumn } from "./UserTableColumn"
+import { useRsi } from "../hooks/useRsi"
+import { TemplateColumn } from "./TemplateColumn"
+import type { Field } from "../types"
 
 const MATCH_COLUMNS_TITLE = "Validate column matching"
 const USER_TABLE_TITLE = "Your table"
@@ -12,9 +15,49 @@ type MatchColumnsProps = {
   headerIndex: number
 }
 
+export enum ColumnType {
+  empty,
+  ignored,
+  matched,
+  enumMatched,
+}
+
+export type Column =
+  | { type: ColumnType.empty; index: number; header: string }
+  | { type: ColumnType.ignored; index: number; header: string }
+  | { type: ColumnType.matched; index: number; header: string; value: string }
+  | { type: ColumnType.enumMatched; index: number; header: string; value: string }
+
+type Columns = Column[]
+
+const setColumn = (field: Field<any> | undefined, oldColumn: Column): Column => {
+  switch (field?.fieldType.type) {
+    case "select":
+      return { ...oldColumn, type: ColumnType.enumMatched, value: field.key }
+    case "checkbox":
+    case "input":
+      return { ...oldColumn, type: ColumnType.matched, value: field.key }
+    default:
+      return { index: oldColumn.index, header: oldColumn.header, type: ColumnType.empty }
+  }
+}
+
 export const MatchColumns = ({ data, headerIndex }: MatchColumnsProps) => {
-  const header = data[headerIndex]
+  const header = data[headerIndex].map((el) => el.toString())
   const dataExample = data.slice(headerIndex + 1, 3)
+  const [columns, setColumns] = useState<Columns>(
+    header.map((headerValues, index) => ({ type: ColumnType.empty, index, header: headerValues })),
+  )
+  const { fields } = useRsi()
+
+  const onChange = useCallback(
+    (value, columnIndex) => {
+      const field = fields.find((field) => field.key === value)
+
+      setColumns(columns.map((column, index) => (columnIndex === index ? setColumn(field, column) : column)))
+    },
+    [columns],
+  )
 
   return (
     <Flex flex={1} flexDir="column" minH={"100vh"} px={4}>
@@ -44,9 +87,9 @@ export const MatchColumns = ({ data, headerIndex }: MatchColumnsProps) => {
           </Text>
         </Box>
         <FadingWrapper gridColumn={`1/${header.length + 3}`} gridRow="4/5" />
-        {header.map((header, index) => (
-          <Box gridRow="4/5" gridColumn={`${index + 2}/${index + 3}`} key={header} py={3}>
-            {header}
+        {columns.map((column, index) => (
+          <Box gridRow="4/5" gridColumn={`${index + 2}/${index + 3}`} key={column.index} py={3} pl={2} pr={3}>
+            <TemplateColumn column={column} onChange={onChange} />
           </Box>
         ))}
       </Flex>

src/components/MatchIcon.tsx

@@ -0,0 +1,31 @@
+import { chakra, useStyleConfig, Flex } from "@chakra-ui/react"
+import { dataAttr } from "@chakra-ui/utils"
+import { motion } from "framer-motion"
+import { CheckIcon } from "./CheckIcon"
+
+const MotionFlex = motion(Flex)
+
+const animationConfig = {
+  transition: {
+    duration: 0.1,
+  },
+  exit: { scale: 0.5, opacity: 0 },
+  initial: { scale: 0.5, opacity: 0 },
+  animate: { scale: 1, opacity: 1 },
+}
+type MatchIconProps = {
+  matched: boolean
+}
+
+export const MatchIcon = (props: MatchIconProps) => {
+  const style = useStyleConfig("MatchIcon", props)
+  return (
+    <chakra.div __css={style} minW={6} minH={6} w={6} h={6} data-highlighted={dataAttr(props.matched)} ml={'0.875rem'} mr={3}>
+      {props.matched && (
+        <MotionFlex {...animationConfig}>
+          <CheckIcon width={3} height={3} />
+        </MotionFlex>
+      )}
+    </chakra.div>
+  )
+}

src/components/TemplateColumn.tsx

@@ -0,0 +1,29 @@
+import type { Column } from "./MatchColumns"
+import { Flex, Select } from "@chakra-ui/react"
+import { useRsi } from "../hooks/useRsi"
+import { MatchIcon } from "./MatchIcon"
+
+const SELECT_PLACEHOLDER = "Select column..."
+
+type TemplateColumnProps = {
+  onChange: (val: string, index: number) => void
+  column: Column
+}
+
+export const TemplateColumn = ({ column, onChange }: TemplateColumnProps) => {
+  const { fields } = useRsi()
+  return (
+    <Flex alignItems='center'>
+      <Select
+        placeholder={SELECT_PLACEHOLDER}
+        value={"value" in column ? column.value : undefined}
+        onChange={(event) => onChange(event.target.value, column.index)}
+      >
+        {fields.map(({ label, key }) => (
+          <option value={key}>{label}</option>
+        ))}
+      </Select>
+      <MatchIcon matched={"value" in column ? !!column.value : false} />
+    </Flex>
+  )
+}

src/components/UserTableColumn.tsx

@@ -15,7 +15,7 @@ export const UserTableColumn = ({ header, entries }: UserTableColumnProps) => {
         <CloseButton size="sm" bg="gray.100" />
       </Flex>
       {entries.map((entry) => (
-        <Text fontSize="sm" lineHeight={5} fontWeight="medium" px={6} py={4}>
+        <Text fontSize="sm" lineHeight={5} fontWeight="medium" px={6} py={4} key={entry}>
           {entry}
         </Text>
       ))}

src/stories/SelectHeader.stories.tsx

@@ -11,7 +11,7 @@ const theme = extendTheme(colorSchemeOverrides, themeOverrides)
 export const Table = () => (
   <ChakraProvider theme={theme}>
     <div style={{ blockSize: "calc(100vh - 32px)" }}>
-      <SelectHeaderTable initialData={headerSelectionTableFields} />
+      <SelectHeaderTable data={headerSelectionTableFields} />
     </div>
   </ChakraProvider>
 )

src/stories/mockRsiValues.ts

@@ -12,7 +12,7 @@ const fields: Field<any>[] = [
   },
   {
     label: "Surname",
-    key: "name",
+    key: "surname",
     alternateMatches: ["second name"],
     fieldType: {
       type: "input",

src/theme.ts

@@ -24,6 +24,22 @@ export const themeOverrides = {
     outline: 0,
   },
   components: {
+    MatchIcon: {
+      baseStyle: (props: any) => {
+        return {
+          ...StepsStyleConfig.baseStyle(props).stepIconContainer,
+          borderWidth: "2px",
+          bg: "white",
+          borderColor: "yellow.500",
+          color: "white",
+          transitionDuration: 'ultra-fast',
+        }
+      },
+      defaultProps: {
+        size: "md",
+        colorScheme: "green",
+      },
+    },
     Steps: {
       ...StepsStyleConfig,
       baseStyle: (props: any) => {