fix(@h6s/table): Add import react statement (#166)

* chore(@h6s/calendar): add scope to test command

* chore: change cjs to esm

* docs: add calendar route

* docs: setup table example

* env: update next to 12.0.10

* ci: add working-directory to example job

* env: update dependencies of examples

* ci: fix working-directory path

* chore: move mock directory

* ci: add prebuild step

* fix(@h6s/table): Add import react statement

* docs: arrange code

.github/workflows/build-examples.yml

@@ -18,4 +18,5 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build
-        run: yarn build:examples
+        run: yarn prebuild && yarn build
+        working-directory: ./examples/react

examples/react/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

examples/react/next.config.js

@@ -1,4 +1,4 @@
-const withTM = require('next-transpile-modules')(['@h6s/calendar'])
+const withTM = require('next-transpile-modules')(['@h6s/calendar', '@h6s/table'])
 
 module.exports = withTM({
   reactStrictMode: true,

examples/react/package.json

@@ -15,15 +15,18 @@
   "dependencies": {
     "@babel/preset-env": "^7.16.5",
     "@chakra-ui/icons": "^1.1.1",
-    "@chakra-ui/react": "^1.7.3",
-    "@chakra-ui/system": "^1.8.3",
+    "@chakra-ui/react": "^1.8.1",
+    "@chakra-ui/system": "^1.10.1",
     "@chakra-ui/theme-tools": "1.3.1",
-    "@h6s/calendar": "latest",
+    "@h6s/calendar": "workspace:^",
+    "@h6s/table": "workspace:^",
     "babel-loader": "^8.2.3",
     "date-fns": "^2.27.0",
-    "next": "12.0.4"
+    "next": "12.0.10",
+    "react-hook-form": "7.17.5"
   },
   "devDependencies": {
+    "@faker-js/faker": "^6.0.0-alpha.5",
     "@types/node": "^17.0.4",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",

examples/react/src/components/Container.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, FlexProps, useColorMode } from '@chakra-ui/react'
+import { Flex, FlexProps, useColorMode } from '@chakra-ui/react'
 
 export const Container = ({ children, ...props }: FlexProps) => {
   const { colorMode } = useColorMode()
@@ -12,11 +12,10 @@ export const Container = ({ children, ...props }: FlexProps) => {
       direction="column"
       bg={bgColor[colorMode]}
       color={color[colorMode]}
+      paddingX={120}
       {...props}
     >
-      <Box maxW="640px" m="auto">
-        {children}
-      </Box>
+      {children}
     </Flex>
   )
 }

examples/react/src/components/Header.tsx

@@ -0,0 +1,25 @@
+import { Heading, Stack, Text } from '@chakra-ui/react'
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+export function Header({ title, description }: Props) {
+  return (
+    <Stack
+      padding={12}
+      justifyContent="center"
+      direction="column"
+      alignItems="center"
+      spacing={4}
+    >
+      <Heading as="h1" size="xl">
+        {title}
+      </Heading>
+      <Text color="gray.500">
+        {description} with <a href="https://chakra-ui.com/">chakra-ui</a>
+      </Text>
+    </Stack>
+  )
+}

examples/react/src/mocks/dataset.mock.tsx

@@ -0,0 +1,205 @@
+import faker from '@faker-js/faker'
+import { Cell, CellRendererProps, composeDataset, TableModel } from '@h6s/table'
+import { format } from 'date-fns'
+
+const TOTAL_BY_DATE = '#TOTAL_BY_DATE'
+const TOTAL_BY_DATE_AND_ID = '#TOTAL_BY_DATE_AND_ID'
+
+export interface DatasetType {
+  date: string;
+  id: string;
+  subId: string;
+  amount: number;
+  cancelAmount: number;
+  buyer: string;
+  plcc: number;
+  debit: number;
+  transfer: number;
+  meta: {
+    transactionId: string;
+  };
+  message: string;
+}
+
+export const DATASET: DatasetType[] = generateMockDataset()
+
+export const DATASET_WITH_SUMMARY = composeDataset(DATASET, {
+  groupBy: 'date',
+  compose: rows => {
+    const appended = composeDataset(rows, {
+      groupBy: 'id',
+      compose: rows => {
+        return rows.concat({
+          subId: TOTAL_BY_DATE_AND_ID,
+          amount: sum(rows.map(x => x.amount)),
+          cancelAmount: sum(rows.map(x => x.cancelAmount)),
+          buyer: '',
+          plcc: sum(rows.map(x => x.plcc)),
+          debit: sum(rows.map(x => x.debit)),
+          transfer: sum(rows.map(x => x.transfer)),
+          meta: {
+            transactionId: '',
+          },
+          message: '',
+        })
+      },
+    })
+
+    return appended.concat({
+      id: TOTAL_BY_DATE,
+      subId: '',
+      amount: sum(rows.map(x => x.amount)),
+      cancelAmount: sum(rows.map(x => x.cancelAmount)),
+      buyer: '',
+      plcc: sum(rows.map(x => x.plcc)),
+      debit: sum(rows.map(x => x.debit)),
+      transfer: sum(rows.map(x => x.transfer)),
+      meta: {
+        transactionId: '',
+      },
+      message: '',
+    })
+  },
+})
+
+function generateMockDataset() {
+  return [...new Array(30).keys()].map(() => {
+    return {
+      date: format(faker.date.between('2022-01-01', '2022-01-04'), 'yyyy-MM-dd'),
+      id: faker.datatype.number({ min: 103, max: 106 }).toString(),
+      subId: faker.datatype.number({ min: 9870, max: 9900 }).toString(),
+
+      amount: Number(faker.commerce.price()),
+      cancelAmount: Number(faker.commerce.price()),
+
+      buyer: faker.name.findName(),
+
+      plcc: Number(faker.commerce.price()),
+      debit: Number(faker.commerce.price()),
+      transfer: Number(faker.commerce.price()),
+
+      meta: {
+        transactionId: faker.lorem.slug(2),
+      },
+      message: faker.commerce.productName(),
+    }
+  })
+    .sort((a, b) => Number(b.subId) - Number(a.subId))
+    .sort((a, b) => Number(b.id) - Number(a.id))
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+}
+
+export const TABLE_MODEL: TableModel<DatasetType> = [
+  {
+    accessor: 'date',
+    label: 'Date',
+    cell: {
+      mergeRow: 'date',
+    },
+    foot: [() => <>{'Total'}</>],
+  },
+  {
+    accessor: 'id',
+    label: 'Id',
+    cell: {
+      mergeRow: ['date', 'id'],
+      colSpanAs: x => x.id === TOTAL_BY_DATE ? 2 : 1,
+      render: [({ cellProps, children }) => {
+        if (cellProps.value === TOTAL_BY_DATE) {
+          return <span>{format(new Date(cellProps.rowValues.date), 'M/d')} TOTAL</span>
+        }
+
+        return <>{children}</>
+      }],
+    },
+  },
+  {
+    accessor: 'subId',
+    label: 'Sub Id',
+    cell: {
+      mergeRow: ({ date, id, subId }) => date + id + subId,
+      colSpanAs: x => x.id === TOTAL_BY_DATE ? 0 : 1,
+      render: [({ cellProps, children }) => {
+        if (cellProps.value === TOTAL_BY_DATE_AND_ID) {
+          return <span>{cellProps.rowValues.id} TOTAL</span>
+        }
+
+        return <>{children}</>
+      }],
+    },
+  },
+  {
+    accessor: [
+      {
+        accessor: 'amount',
+        label: 'Paid',
+        cell: [CurrencyCellValue],
+        foot: [() => <>{sum(DATASET.map(x => x.amount)).toLocaleString()}</>],
+      },
+      {
+        accessor: 'cancelAmount',
+        label: 'Canceled',
+        cell: [CurrencyCellValue],
+        foot: {
+          render: [() => <>{sum(DATASET.map(x => x.cancelAmount)).toLocaleString()}</>],
+          extends: false,
+        },
+      },
+    ],
+    label: 'AMOUNT',
+  },
+  {
+    accessor: 'buyer',
+    label: 'Buyer',
+  },
+  {
+    accessor: [
+      {
+        accessor: [
+          {
+            accessor: 'plcc',
+            label: 'Plcc',
+            cell: [CurrencyCellValue],
+            foot: {
+              render: [() => <>{sum(DATASET.map(x => x.plcc)).toLocaleString()}</>],
+            },
+          },
+          {
+            accessor: 'debit',
+            label: 'Debit',
+            cell: [CurrencyCellValue],
+            foot: {
+              render: [() => <>{sum(DATASET.map(x => x.debit)).toLocaleString()}</>],
+            },
+          },
+        ],
+        label: 'CARD',
+      },
+      {
+        accessor: 'transfer',
+        label: 'Transfer',
+        cell: [CurrencyCellValue],
+        foot: {
+          render: [() => <>{sum(DATASET.map(x => x.transfer)).toLocaleString()}</>],
+        },
+      },
+    ],
+    label: 'PAY METHOD',
+  },
+  {
+    accessor: 'meta.transactionId',
+    label: 'Transaction Id',
+  },
+  {
+    accessor: 'message',
+    label: 'Message',
+  },
+]
+
+export function sum(...arr: number[] | number[][]) {
+  return arr.flat().reduce((a, b) => a + b, 0)
+}
+
+function CurrencyCellValue({ cellProps }: CellRendererProps<Cell<DatasetType>>) {
+  return <>{cellProps.value?.toLocaleString()}</>
+}

examples/react/src/pages/_document.tsx

@@ -7,7 +7,6 @@ export default class Document extends NextDocument {
       <Html>
         <Head />
         <body>
-          {/* Make Color mode to persists when you refresh the page. */}
           <ColorModeScript />
           <Main />
           <NextScript />