base table

src/app/App.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+import { Route, Routes } from "react-router-dom";
+import { Layout } from "@/app/Layout";
+import { Home, NoMatch } from "@/pages";
+
+const App: FC = () => {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="*" element={<NoMatch />} />
+        </Route>
+      </Routes>
+    </>
+  );
+};
+
+export default App;

src/app/Layout/Layout.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { Outlet } from "react-router-dom";
+
+const Layout: FC = () => {
+  return (
+    <div className="h-screen overflow-hidden">
+      <main className="h-full">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
+
+export default Layout;

src/app/Layout/index.ts

@@ -0,0 +1,3 @@
+import Layout from "./Layout";
+
+export { Layout };

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from "react-redux";
+import type { TypedUseSelectorHook } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/app/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app/main.tsx

@@ -0,0 +1,15 @@
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { store } from "@/app/store";
+
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <BrowserRouter>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </BrowserRouter>,
+);

src/app/store.ts

@@ -0,0 +1,8 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+export const store = configureStore({
+  reducer: {},
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/pages/Home/index.ts

@@ -0,0 +1,3 @@
+import Home from "./ui/Page/Page";
+
+export { Home };

src/pages/Home/ui/Page/Page.tsx

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { Spreadsheet } from "../../../../widgets";
+
+const Home: FC = () => {
+  return (
+    <div className="h-screen bg-gray-50">
+      <Spreadsheet />
+    </div>
+  );
+};
+
+export default Home;

src/pages/NoMatch/index.ts

@@ -0,0 +1,3 @@
+import NoMatch from "./ui/Page/Page";
+
+export { NoMatch };

src/pages/NoMatch/ui/Page/Page.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { Link } from "react-router-dom";
+
+const NoMatch: FC = () => {
+  return (
+    <section>
+      <div className="flex min-h-screen w-screen flex-col items-center justify-center gap-y-5">
+        <h1 className="bg-gradient-to-l from-primary-content via-secondary to-primary bg-clip-text text-9xl font-bold text-transparent">
+          404
+        </h1>
+        <p className="text-3xl font-medium text-neutral">Page not found</p>
+        <Link className="btn-primary-content btn px-16" to="/">
+          Go back
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default NoMatch;

src/pages/index.ts

@@ -0,0 +1,4 @@
+import { Home } from "./Home";
+import { NoMatch } from "./NoMatch";
+
+export { Home, NoMatch };

src/widgets/Spreadsheet/index.ts

@@ -0,0 +1 @@
+export { default as Spreadsheet } from './ui/Spreadsheet/Spreadsheet';

src/widgets/Spreadsheet/ui/Spreadsheet/Spreadsheet.tsx

@@ -0,0 +1,112 @@
+import { FC, useState } from 'react';
+
+interface CellData {
+  value: string;
+  isSelected: boolean;
+}
+
+const Spreadsheet: FC = () => {
+  const [cells, setCells] = useState<CellData[][]>(() => {
+    // Создаем сетку 20x10 с пустыми ячейками
+    return Array(20).fill(null).map(() => 
+      Array(10).fill(null).map(() => ({ value: '', isSelected: false }))
+    );
+  });
+
+  const [selectedCell, setSelectedCell] = useState<{row: number, col: number} | null>(null);
+
+  const handleCellClick = (row: number, col: number) => {
+    setSelectedCell({ row, col });
+  };
+
+  const handleCellChange = (row: number, col: number, value: string) => {
+    setCells(prev => {
+      const newCells = [...prev];
+      newCells[row][col] = { ...newCells[row][col], value };
+      return newCells;
+    });
+  };
+
+  const getColumnLabel = (index: number) => {
+    return String.fromCharCode(65 + index); // A, B, C, ...
+  };
+
+  return (
+    <div className="w-full h-full bg-white">
+      {/* Formula bar */}
+      <div className="border-b border-gray-200 p-2 bg-white">
+        <div className="flex items-center space-x-2">
+          <div className="text-sm text-gray-600 min-w-[60px]">
+            {selectedCell ? `${getColumnLabel(selectedCell.col)}${selectedCell.row + 1}` : ''}
+          </div>
+          <div className="flex-1">
+            <input
+              type="text"
+              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Введите формулу..."
+              value={selectedCell ? cells[selectedCell.row][selectedCell.col].value : ''}
+              onChange={(e) => {
+                if (selectedCell) {
+                  handleCellChange(selectedCell.row, selectedCell.col, e.target.value);
+                }
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Spreadsheet */}
+      <div className="overflow-auto h-[calc(100vh-200px)]">
+        <table className="border-collapse">
+          <thead>
+            <tr>
+              {/* Empty corner cell */}
+              <th className="w-12 h-8 bg-gray-100 border border-gray-300 text-xs text-gray-600 font-medium sticky top-0 left-0 z-20"></th>
+              {/* Column headers */}
+              {Array.from({ length: 10 }, (_, i) => (
+                <th
+                  key={i}
+                  className="w-24 h-8 bg-gray-100 border border-gray-300 text-xs text-gray-600 font-medium text-center sticky top-0 z-10"
+                >
+                  {getColumnLabel(i)}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {cells.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {/* Row header */}
+                <td className="w-12 h-8 bg-gray-100 border border-gray-300 text-xs text-gray-600 font-medium text-center sticky left-0 z-10">
+                  {rowIndex + 1}
+                </td>
+                {/* Data cells */}
+                {row.map((cell, colIndex) => (
+                  <td
+                    key={colIndex}
+                    className={`w-24 h-8 border border-gray-300 relative cursor-cell ${
+                      selectedCell?.row === rowIndex && selectedCell?.col === colIndex
+                        ? 'bg-blue-100 border-blue-500 border-2'
+                        : 'hover:bg-gray-50'
+                    }`}
+                    onClick={() => handleCellClick(rowIndex, colIndex)}
+                  >
+                    <input
+                      type="text"
+                      className="w-full h-full px-1 text-sm bg-transparent border-none outline-none resize-none"
+                      value={cell.value}
+                      onChange={(e) => handleCellChange(rowIndex, colIndex, e.target.value)}
+                      onFocus={() => setSelectedCell({ row: rowIndex, col: colIndex })}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default Spreadsheet; 

src/widgets/index.ts

@@ -0,0 +1,2 @@
+export { Spreadsheet } from "./Spreadsheet";
+