Split codebase (#455)

apps/yaak-client/components/responseViewers/CsvViewer.tsx

@@ -0,0 +1,57 @@
+import classNames from "classnames";
+import Papa from "papaparse";
+import { useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@yaakapp-internal/ui";
+
+interface Props {
+  text: string | null;
+  className?: string;
+}
+
+export function CsvViewer({ text, className }: Props) {
+  return (
+    <div className="overflow-auto h-full">
+      <CsvViewerInner text={text} className={className} />
+    </div>
+  );
+}
+
+export function CsvViewerInner({ text, className }: { text: string | null; className?: string }) {
+  const parsed = useMemo(() => {
+    if (text == null) return null;
+    return Papa.parse<Record<string, string>>(text, { header: true, skipEmptyLines: true });
+  }, [text]);
+
+  if (parsed === null) return null;
+
+  return (
+    <div className="overflow-auto h-full">
+      <Table className={classNames(className, "text-sm")}>
+        <TableHead>
+          <TableRow>
+            {parsed.meta.fields?.map((field) => (
+              <TableHeaderCell key={field}>{field}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {parsed.data.map((row, i) => (
+            // oxlint-disable-next-line react/no-array-index-key
+            <TableRow key={i}>
+              {parsed.meta.fields?.map((key) => (
+                <TableCell key={key}>{row[key] ?? ""}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}