Restore Ultracite + fix sidebar (#1233)

components/sheet-editor.tsx

@@ -1,46 +1,43 @@
-'use client';
+"use client";
 
-import React, { memo, useEffect, useMemo, useState } from 'react';
-import DataGrid, { textEditor } from 'react-data-grid';
-import { parse, unparse } from 'papaparse';
-import { useTheme } from 'next-themes';
-import { cn } from '@/lib/utils';
+import { useTheme } from "next-themes";
+import { parse, unparse } from "papaparse";
+import { memo, useEffect, useMemo, useState } from "react";
+import DataGrid, { textEditor } from "react-data-grid";
+import { cn } from "@/lib/utils";
 
-import 'react-data-grid/lib/styles.css';
+import "react-data-grid/lib/styles.css";
 
 type SheetEditorProps = {
   content: string;
   saveContent: (content: string, isCurrentVersion: boolean) => void;
-  status: string;
-  isCurrentVersion: boolean;
   currentVersionIndex: number;
+  isCurrentVersion: boolean;
+  status: string;
 };
 
 const MIN_ROWS = 50;
 const MIN_COLS = 26;
 
-const PureSpreadsheetEditor = ({
-  content,
-  saveContent,
-  status,
-  isCurrentVersion,
-}: SheetEditorProps) => {
+const PureSpreadsheetEditor = ({ content, saveContent }: SheetEditorProps) => {
   const { resolvedTheme } = useTheme();
 
   const parseData = useMemo(() => {
-    if (!content) return Array(MIN_ROWS).fill(Array(MIN_COLS).fill(''));
+    if (!content) {
+      return new Array(MIN_ROWS).fill(new Array(MIN_COLS).fill(""));
+    }
     const result = parse<string[]>(content, { skipEmptyLines: true });
 
     const paddedData = result.data.map((row) => {
       const paddedRow = [...row];
       while (paddedRow.length < MIN_COLS) {
-        paddedRow.push('');
+        paddedRow.push("");
       }
       return paddedRow;
     });
 
     while (paddedData.length < MIN_ROWS) {
-      paddedData.push(Array(MIN_COLS).fill(''));
+      paddedData.push(new Array(MIN_COLS).fill(""));
     }
 
     return paddedData;
@@ -48,13 +45,13 @@ const PureSpreadsheetEditor = ({
 
   const columns = useMemo(() => {
     const rowNumberColumn = {
-      key: 'rowNumber',
-      name: '',
+      key: "rowNumber",
+      name: "",
       frozen: true,
       width: 50,
       renderCell: ({ rowIdx }: { rowIdx: number }) => rowIdx + 1,
-      cellClass: 'border-t border-r dark:bg-zinc-950 dark:text-zinc-50',
-      headerCellClass: 'border-t border-r dark:bg-zinc-900 dark:text-zinc-50',
+      cellClass: "border-t border-r dark:bg-zinc-950 dark:text-zinc-50",
+      headerCellClass: "border-t border-r dark:bg-zinc-900 dark:text-zinc-50",
     };
 
     const dataColumns = Array.from({ length: MIN_COLS }, (_, i) => ({
@@ -62,11 +59,11 @@ const PureSpreadsheetEditor = ({
       name: String.fromCharCode(65 + i),
       renderEditCell: textEditor,
       width: 120,
-      cellClass: cn(`border-t dark:bg-zinc-950 dark:text-zinc-50`, {
-        'border-l': i !== 0,
+      cellClass: cn("border-t dark:bg-zinc-950 dark:text-zinc-50", {
+        "border-l": i !== 0,
       }),
-      headerCellClass: cn(`border-t dark:bg-zinc-900 dark:text-zinc-50`, {
-        'border-l': i !== 0,
+      headerCellClass: cn("border-t dark:bg-zinc-900 dark:text-zinc-50", {
+        "border-l": i !== 0,
       }),
     }));
 
@@ -81,7 +78,7 @@ const PureSpreadsheetEditor = ({
       };
 
       columns.slice(1).forEach((col, colIndex) => {
-        rowData[col.key] = row[colIndex] || '';
+        rowData[col.key] = row[colIndex] || "";
       });
 
       return rowData;
@@ -102,7 +99,7 @@ const PureSpreadsheetEditor = ({
     setLocalRows(newRows);
 
     const updatedData = newRows.map((row) => {
-      return columns.slice(1).map((col) => row[col.key] || '');
+      return columns.slice(1).map((col) => row[col.key] || "");
     });
 
     const newCsvContent = generateCsv(updatedData);
@@ -111,21 +108,21 @@ const PureSpreadsheetEditor = ({
 
   return (
     <DataGrid
-      className={resolvedTheme === 'dark' ? 'rdg-dark' : 'rdg-light'}
+      className={resolvedTheme === "dark" ? "rdg-dark" : "rdg-light"}
       columns={columns}
-      rows={localRows}
-      enableVirtualization
-      onRowsChange={handleRowsChange}
-      onCellClick={(args) => {
-        if (args.column.key !== 'rowNumber') {
-          args.selectCell(true);
-        }
-      }}
-      style={{ height: '100%' }}
       defaultColumnOptions={{
         resizable: true,
         sortable: true,
       }}
+      enableVirtualization
+      onCellClick={(args) => {
+        if (args.column.key !== "rowNumber") {
+          args.selectCell(true);
+        }
+      }}
+      onRowsChange={handleRowsChange}
+      rows={localRows}
+      style={{ height: "100%" }}
     />
   );
 };
@@ -134,7 +131,7 @@ function areEqual(prevProps: SheetEditorProps, nextProps: SheetEditorProps) {
   return (
     prevProps.currentVersionIndex === nextProps.currentVersionIndex &&
     prevProps.isCurrentVersion === nextProps.isCurrentVersion &&
-    !(prevProps.status === 'streaming' && nextProps.status === 'streaming') &&
+    !(prevProps.status === "streaming" && nextProps.status === "streaming") &&
     prevProps.content === nextProps.content &&
     prevProps.saveContent === nextProps.saveContent
   );