WIP

package.json

@@ -19,7 +19,7 @@
     "@ailiyah-ui/context": "^0.0.3",
     "@ailiyah-ui/factory": "^0.0.2",
     "@ailiyah-ui/navbar": "^0.0.2",
-    "@ailiyah-ui/utils": "^0.0.7",
+    "@ailiyah-ui/utils": "^0.0.8",
     "@radix-ui/react-icons": "^1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/assets/theme.ts

@@ -1,6 +1,7 @@
 import { PresetTheme } from "@ailiyah-ui/utils";
 import { defaultTheme } from "@ailiyah-ui/utils";
 import { formTheme, navbarTheme } from "../components";
+import { tableTheme } from "../components/table/theme";
 
 export const theme: PresetTheme = {
   ...defaultTheme,
@@ -10,4 +11,5 @@ export const theme: PresetTheme = {
   },
   ...navbarTheme,
   ...formTheme,
+  ...tableTheme,
 };

src/components/table/table.tsx

@@ -1,42 +1,101 @@
 import React from "react";
+import { TailwindComponentProps, styled } from "@ailiyah-ui/factory";
+import { Link } from "react-router-dom";
+import { AbstractDataType } from "../../handlers";
 
-interface TableObj {
-  [key: string]: any;
+const TBody = styled("tbody");
+const TFoot = styled("tfoot");
+const Tr = styled("tr");
+const Td = styled("td");
+const Th = styled("th");
+
+const Table = React.memo(
+  React.forwardRef<HTMLDivElement, TailwindComponentProps<"div">>(
+    (props, ref) => {
+      const { children, ...rest } = props;
+      return (
+        <styled.div themeName="TableRoot" {...rest} ref={ref}>
+          <styled.table themeName="Table">{children}</styled.table>
+        </styled.div>
+      );
+    }
+  )
+);
+
+interface HeaderOwnProps<T extends AbstractDataType> {
+  headers: Array<keyof T>;
+  title?: keyof T;
+}
+
+interface BodyOwnProps<T extends AbstractDataType> {
+  bodyData: Array<T>;
+  title?: keyof T;
 }
 
-function Table<T extends TableObj>({
-  data,
-  fields,
-}: {
-  data: Array<T> | null;
-  fields: Array<keyof T>;
-}) {
-  return (
-    <table>
-      <tbody>
-        <tr>
-          {fields ? (
-            fields.map((field) => (
-              <th key={field.toString()}>{field.toString()}</th>
-            ))
-          ) : (
-            <></>
-          )}
-        </tr>
-        {data &&
-          Object.entries(data).length > 0 &&
-          data.map((item) => (
-            <tr key={item.id}>
-              {fields.map((field) => (
-                <td key={field.toString()} className="py-2 px-4">
-                  {item[field] && item[field].toString()}
-                </td>
+const createHeaders = <T extends AbstractDataType>(
+  headerProps: HeaderOwnProps<T>
+) => {
+  const THead = React.memo(
+    React.forwardRef<HTMLTableRowElement, TailwindComponentProps<"thead">>(
+      (props, ref) => {
+        let { headers, title = "title" } = headerProps;
+        headers = headers.filter((item) => item !== title);
+        return (
+          <styled.thead themeName="TableHead" ref={ref} {...props}>
+            <styled.tr themeName="TableRow">
+              <styled.th colSpan={1} themeName="TableHeadHeader">
+                {title.toString()}
+              </styled.th>
+              {headers &&
+                headers.map((header) => (
+                  <styled.th colSpan={1} themeName="TableHeadHeader">
+                    {header.toString()}
+                  </styled.th>
+                ))}
+            </styled.tr>
+          </styled.thead>
+        );
+      }
+    )
+  );
+  return THead;
+};
+
+const createTitle = <T extends AbstractDataType>(
+  bodyProps: BodyOwnProps<T>
+) => {
+  const TBody = React.memo(
+    React.forwardRef<HTMLTableSectionElement, TailwindComponentProps<"tbody">>(
+      (props, ref) => {
+        let { bodyData, title = "title" } = bodyProps;
+        return (
+          <styled.tbody themeName="TableBody" {...props} ref={ref}>
+            {bodyData &&
+              bodyData &&
+              Object.entries(bodyData).length > 0 &&
+              Object.entries(bodyData).map((item) => (
+                <Tr key={item.id?.toString()} themeName="TableBodyRow">
+                  {fields.map((field) => (
+                    <Td
+                      key={field.toString()}
+                      themeName="TableBodyData"
+                      colSpan={1}
+                    >
+                      {item[field] &&
+                        (field === title ? (
+                          <Link to={item["id"]}>{item[field].toString()}</Link>
+                        ) : (
+                          item[field].toString()
+                        ))}
+                    </Td>
+                  ))}
+                </Tr>
               ))}
-            </tr>
-          ))}
-      </tbody>
-    </table>
+          </styled.tbody>
+        );
+      }
+    )
   );
-}
+};
 
-export { Table };
+// export { Table };

src/components/table/theme.ts

@@ -0,0 +1,40 @@
+import { PresetTheme } from "@ailiyah-ui/utils";
+
+const tableTheme: PresetTheme = {
+  TableRoot: {
+    twWidth: "w-full",
+    twBorderRadius: "rounded-md",
+    twBoxShadow: "shadow-md",
+    twBorderCollapse: "border-collapse",
+    twFontSize: "text-sm",
+    twPosition: "relative",
+    twOverflow: "overflow-x-auto",
+  },
+  Table: {
+    twWidth: "w-full",
+    twTextAlign: "text-left",
+    twTextColor: "text-neutral-500",
+    twOverflow: "overflow-x-auto",
+    twTableLayout: "table-auto md:table-fixed",
+  },
+  TableHead: {
+    twWidth: "w-full",
+    twFontSize: "text-md",
+    twBackgroundColor: "bg-neutral-400",
+  },
+  TableHeadRow: {
+    twTextColor: "text-neutral-700",
+    twTextTransform: "capitalize",
+  },
+  TableHeadHeader: {
+    twPadding: "py-2 px-2",
+  },
+  TableBodyRow: {
+    twBackgroundColor: "hover:bg-neutral-100",
+  },
+  TableBodyData: {
+    twPadding: "py-2 px-2",
+  },
+};
+
+export { tableTheme };

src/main.tsx

@@ -27,12 +27,20 @@ const router = createBrowserRouter([
             path: "/investigation",
             element: <InvestigationList />,
             loader: InvestigationActions.loaderAll,
+            children: [
+              {
+                path: "/investigation/:investigationId",
+                element: <InvestigationCreate />,
+                loader: InvestigationActions.loaderById,
+              },
+            ],
           },
           {
             path: "/investigation/create",
             element: <InvestigationCreate />,
             action: InvestigationActions.actionCreate,
           },
+
           /* the rest of the routes */
         ],
       },

src/routes/investigation/investigation.tsx

@@ -3,8 +3,7 @@ import React from "react";
 import { InvestigationForm } from "./form";
 import { InvestigationType } from "./investigation.types";
 import { Table } from "../../components/table/table";
-import { Form, useLoaderData, useSubmit } from "react-router-dom";
-import { string2Date } from "../../components";
+import { useLoaderData } from "react-router-dom";
 
 const [Box, useBoxContext] = createStateBox("Root");
 const Component = createStateBoxChildren("div", "Component", useBoxContext);
@@ -14,10 +13,12 @@ function InvestigationDetails(data: InvestigationType) {}
 function InvestigationList() {
   const data: Array<InvestigationType> | null =
     useLoaderData() as Array<InvestigationType>;
+  console.log(data);
   return (
     <Table
       data={data}
-      fields={["title", "funding", "license", "submissionDate"]}
+      fields={["title", "description", "funding", "license", "submissionDate"]}
+      titleField="title"
     />
   );
 }

tailwind.config.js

@@ -6,6 +6,10 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        "md": "840px"
+      }
+    },
   },
 }