proje-react-panel 1.0.0 → 1.0.2

package/dist/screens/ControllerCreate.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '../styles/form.scss';
 import { Screen } from '../types/Screen';
 export declare function ControllerCreate({ screen }: {
     screen: Screen;

package/dist/{getFields.d.ts → utils/getFields.d.ts}

@@ -1,2 +1,2 @@
-import { ScreenCreatorData } from "./types/ScreenCreatorData";
+import { ScreenCreatorData } from "../types/ScreenCreatorData";
 export declare function getFields<T>(entityClass: T): ScreenCreatorData<T>;

package/dist/{storeData.d.ts → utils/storeData.d.ts}

@@ -1,4 +1,4 @@
-import { ScreenCreatorData } from "./types/ScreenCreatorData";
+import { ScreenCreatorData } from "../types/ScreenCreatorData";
 export declare const StoreData: {
     screens: Record<string, ScreenCreatorData<any>>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "author": "SEFA DEMİR",
   "license": "ISC",
@@ -14,17 +14,18 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c   ",
-    "lint": "eslint src --ext .ts,.tsx"
+    "lint": "eslint src --ext .ts,.tsx",
+    "generate-nestjs-entity": "node scripts/generate-nestjs-entity.js"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/demirsefa/react-panel.git"
+    "url": "git+https://github.com/demirsefa/proje-react-panel.git"
   },
   "keywords": [],
   "bugs": {
-    "url": "https://github.com/demirsefa/react-panel/issues"
+    "url": "https://github.com/demirsefa/proje-react-panel/issues"
   },
-  "homepage": "https://github.com/demirsefa/react-panel#readme",
+  "homepage": "https://github.com/demirsefa/proje-react-panel#readme",
   "dependencies": {
     "axios": "^1.8.3",
     "react-hook-form": "^7.54.2",
@@ -33,6 +34,7 @@
   "devDependencies": {
     "@hookform/resolvers": "^4.1.3",
     "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -41,11 +43,13 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "eslint": "^8.57.1",
+    "node-sass": "^9.0.0",
     "react": "^19.0.0",
     "react-router-dom": "^7.3.0",
     "reflect-metadata": "^0.2.2",
     "rollup": "^4.35.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.8.2"

package/src/api/crudApi.ts

@@ -0,0 +1,16 @@
+import axios from 'axios';
+
+export const CrudApi = {
+  getList: (api: string, page: number) => {
+    return axios.get(api, { data: { page } });
+  },
+  create: (api: string, data: any) => {
+    return axios.post(api, data);
+  },
+  details(api: string, id: any) {
+    return axios.get(api + '/' + id);
+  },
+  edit(api: string, data: any) {
+    return axios.put(api + '/' + data.id, data);
+  },
+};

package/src/components/Panel.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+type AppProps = {
+	children: React.ReactNode;
+};
+
+export function Panel({ children }: AppProps) {
+	return (
+		<>
+			{children}
+		</>
+	);
+}

package/src/components/layout/Layout.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { SideBar } from './SideBar';
+
+export function Layout({
+  children,
+  noSidebar = false,
+}: {
+  children?: React.ReactNode;
+  noSidebar?: boolean;
+}) {
+  return (
+    <div className="layout">
+      {!noSidebar && <SideBar />}
+      <main className="content">{children || <Outlet />}</main>
+    </div>
+  );
+}

package/src/components/layout/SideBar.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+
+export function SideBar() {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div className={`sidebar ${isOpen ? 'open' : 'closed'}`}>
+      <button className='toggle-button' onClick={() => setIsOpen(!isOpen)}>
+        {isOpen ? '<' : '>'}
+      </button>
+      <nav className='nav-links'>
+        <Link to='/'>Home</Link>
+        <Link to='/accounts'>Accounts</Link>
+        <Link to='/maps'>Maps</Link>
+        <div className='bottom-link'>
+          <Link to='/settings'>Settings</Link>
+        </div>
+      </nav>
+    </div>
+  );
+}

package/src/components/list/List.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { CellOptions } from '../../declerations/Cell';
+import { Link } from 'react-router-dom';
+import { Screen } from '../../types/Screen';
+
+interface ListProps<T> {
+  data: T[];
+  cells: CellOptions<T>[];
+  screen: Screen;
+}
+
+export function List<T>({ data, cells, screen }: ListProps<T>) {
+  if (!data || data.length === 0) {
+    return <div>No items available</div>;
+  }
+
+  return (
+    <div className='list-wrapper'>
+      <div className='header'>List</div>
+      <table className='list-table'>
+        <thead>
+        <tr>
+          {cells.map((cellOptions) => (
+            <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
+          ))}
+          <th />
+        </tr>
+        </thead>
+        <tbody>
+        {data.map((item, index) => (
+          <tr key={index}>
+            {cells.map((cellOptions) => {
+              // @ts-ignore
+              const value = item[cellOptions.name];
+              let formattedValue = value ?? '-'; // Default value if the field is undefined or null
+
+              switch (cellOptions.type) {
+                case 'date':
+                  if (value) {
+                    const date = new Date(value);
+                    formattedValue = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1)
+                      .toString()
+                      .padStart(2, '0')}/${date.getFullYear()} ${date.getHours().toString().padStart(2, '0')}:${date
+                      .getMinutes()
+                      .toString()
+                      .padStart(2, '0')}`;
+                  }
+                  break;
+
+                case 'number':
+                case 'string':
+                default:
+                  formattedValue = value ? value.toString() : (cellOptions?.placeHolder ?? '-'); // Handles string type or default fallback
+                  break;
+              }
+              let render = formattedValue;
+              if (cellOptions.linkTo) {
+                render = <Link to={cellOptions.linkTo(item)}>{formattedValue}</Link>;
+              }
+              return <td key={cellOptions.name}>{render}</td>;
+            })}
+            <td>
+              {/*@ts-ignore*/}
+              <Link to={'edit/' + (item?.id ?? '-')}>Edit</Link>
+              {/*@ts-ignore*/}
+              <Link to={'details/' + (item?.id ?? '-')}>Details</Link>
+            </td>
+          </tr>
+        ))}
+
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/declerations/Cell.ts

@@ -0,0 +1,37 @@
+import 'reflect-metadata';
+
+const CELL_KEY = Symbol('cell');
+
+export interface CellOptions<T> {
+  name?: string;
+  title?: string;
+  type?: 'string' | 'number' | 'date';
+  placeHolder?: string;
+  linkTo?: (item: T) => string;
+}
+
+export function Cell<T>(options?: CellOptions<T>): PropertyDecorator {
+  return (target, propertyKey) => {
+    const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
+    Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
+
+    if (options) {
+      const keyString = `${CELL_KEY.toString()}:${propertyKey.toString()}:options`;
+      Reflect.defineMetadata(keyString, options, target);
+    }
+  };
+}
+
+
+export function getCellFields<T>(entityClass: any): CellOptions<T> [] {
+  const prototype = entityClass.prototype;
+  const cellFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
+  return cellFields.map((field) => {
+    const fields = (Reflect.getMetadata(`${CELL_KEY.toString()}:${field}:options`, prototype) || {});
+    return {
+      ...fields,
+      name: fields?.name ?? field,
+    };
+
+  });
+}

package/src/declerations/Crud.ts

@@ -0,0 +1,20 @@
+import 'reflect-metadata';
+
+const CRUD_KEY = 'Crud'; // Changed from Symbol to string
+
+export interface CrudOptions {
+  controller: string;
+}
+
+export function Crud(options?: CrudOptions): ClassDecorator {
+  return (target: Function) => {
+    if (options) {
+      Reflect.defineMetadata(CRUD_KEY, options, target);
+    }
+  };
+}
+
+
+export function getClassCrudData(entityClass: any): CrudOptions | undefined {
+  return Reflect.getMetadata(CRUD_KEY, entityClass);
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import "./styles/index.scss"
+export { createScreens } from "./utils/createScreens";
+export { getScreenForRoutes } from "./utils/getScreenForRoutes";
+export { Layout } from "./components/layout/Layout";
+export { SideBar } from "./components/layout/SideBar";
+export {Panel} from "./components/Panel"

package/src/screens/ControllerCreate.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Screen } from '../types/Screen';
+import { Layout } from '../components/layout/Layout';
+import { Form } from './Form';
+
+export function ControllerCreate({ screen }: { screen: Screen }) {
+
+  return (
+    <Layout>
+      <Form screen={screen} />
+    </Layout>
+  );
+}

package/src/screens/ControllerDetails.tsx

@@ -0,0 +1,34 @@
+import { Layout } from '../components/layout/Layout';
+import { useParams } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { CrudApi } from '../api/crudApi';
+import { Screen } from '../types/Screen';
+
+export function ControllerDetails({ screen }: { screen: Screen }) {
+  const { id } = useParams();
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (screen.controller && id) {
+      CrudApi.details(screen.controller, id)
+        .then((res) => {
+          setData(res.data);
+        })
+        .catch((e: any) => {
+          setError(e);
+          console.error(e);
+        });
+    }
+  }, [id, screen]);
+
+  return (
+    <Layout>
+      <p
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(data, null, '   ' + '<br/>'),
+        }}
+      />
+    </Layout>
+  );
+}

package/src/screens/ControllerEdit.tsx

@@ -0,0 +1,31 @@
+import { Layout } from '../components/layout/Layout';
+import { Form } from './Form';
+import React, { useEffect, useState } from 'react';
+import { Screen } from '../types/Screen';
+import { useParams } from 'react-router-dom';
+import { CrudApi } from '../api/crudApi';
+
+export function ControllerEdit({ screen }: { screen: Screen }) {
+  const { id } = useParams();
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (screen.controller && id) {
+      CrudApi.details(screen.controller, id)
+        .then((res) => {
+          setData(res.data);
+        })
+        .catch((e: any) => {
+          setError(e);
+          console.error(e);
+        });
+    }
+  }, [id, screen]);
+
+  return (
+    <Layout>
+      <Form data={data} screen={screen} />
+    </Layout>
+  );
+}

package/src/screens/ControllerList.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Layout } from '../components/layout/Layout';
+import { Screen } from '../types/Screen';
+import { useEffect, useState } from 'react';
+import { CrudApi } from '../api/crudApi';
+import { Link } from 'react-router-dom';
+import { List } from '../components/list/List';
+
+import { StoreData } from "../utils/storeData";
+
+export function ControllerList({ screen }: { screen: Screen }) {
+  const [page, setPage] = useState(0);
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (screen.controller) {
+      CrudApi.getList(screen.controller, page)
+        .then((res) => {
+          setData(res.data);
+        })
+        .catch((e: any) => {
+          setError(e);
+          console.error(e);
+        });
+    }
+  }, [page, screen.controller]);
+
+  return (
+    <Layout>
+      <Link to={'/maps/create'}>Create</Link>
+      {error ? <p>Error {error}</p> : null}
+      <List
+        screen={screen}
+        cells={StoreData.screens[screen.key].cells}
+        data={data}
+      />
+    </Layout>
+  );
+}

package/src/screens/Form.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { Screen } from '../types/Screen';
+import { FieldErrors, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { CrudApi } from '../api/crudApi';
+import { StoreData } from "../utils/storeData";
+
+export function Form({ data, screen }: { data?: any; screen: Screen }) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<any>({
+    resolver: StoreData.screens[screen.controller].resolver,
+    defaultValues: data,
+  });
+  const navigate = useNavigate();
+  const fields = StoreData.screens[screen.controller].fields;
+  useEffect(() => {
+    reset(data);
+  }, [data, reset]);
+  return (
+    <div className="form-wrapper">
+      <form
+        onSubmit={handleSubmit((dataForm) => {
+          if (data) {
+            CrudApi.edit(screen.controller, dataForm).then(() => {
+              navigate('/' + screen.controller, {
+                replace: true,
+              });
+            });
+          } else {
+            CrudApi.create(screen.controller, dataForm).then(() => {
+              navigate('/' + screen.controller, {
+                replace: true,
+              });
+            });
+          }
+        })}
+      >
+        {fields.map((field) => (
+          <div className="form-field" key={field}>
+            <label htmlFor={field}>
+              {field.charAt(0).toUpperCase() + field.slice(1)}
+            </label>
+            <input
+              type="text"
+              {...register(field)}
+              placeholder={`Enter ${field}`}
+              id={field}
+            />
+            {errors[field] && (
+              <span className="error-message">
+                {/*@ts-ignore*/}
+                {(errors[field] as FieldErrors)?.message}
+              </span>
+            )}
+          </div>
+        ))}
+        <button type="submit" className="submit-button">
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/styles/form.scss

@@ -0,0 +1,58 @@
+.form-wrapper {
+  max-width: 400px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-field {
+    margin-bottom: 16px;
+
+    label {
+      font-weight: bold;
+      margin-bottom: 6px;
+      display: block;
+      color: #333;
+    }
+
+    input[type='text'] {
+      padding: 10px;
+      font-size: 16px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      width: 100%;
+      transition: border-color 0.2s;
+
+      &:focus {
+        border-color: #007bff;
+        outline: none;
+      }
+    }
+
+    .error-message {
+      margin-top: 4px;
+      font-size: 14px;
+      color: #ff4d4f;
+    }
+  }
+
+  .submit-button {
+    padding: 12px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,4 @@
+@import 'sidebar';
+@import 'form';
+@import 'layout';
+@import 'list';

package/src/styles/layout.scss

@@ -0,0 +1,13 @@
+
+.layout {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+
+  .content {
+    flex: 1;
+    padding: 1rem;
+    overflow-y: auto;
+    transition: margin-left 0.3s ease;
+  }
+}

package/src/styles/list.scss

@@ -0,0 +1,39 @@
+.list-wrapper {
+  width: 100%;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  .header {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .list-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid #ddd;
+    }
+
+    th {
+      background-color: #007bff;
+      color: white;
+    }
+
+    tr:nth-child(even) {
+      background-color: #f9f9f9;
+    }
+
+    tr:hover {
+      background-color: #e8f4ff;
+    }
+  }
+}

package/src/styles/sidebar.scss

@@ -0,0 +1,76 @@
+.sidebar {
+  position: relative;
+  background-color: #f5f5f5;
+  height: 100vh;
+  transition: width 0.3s ease;
+  border-right: 1px solid #e0e0e0;
+
+  &.open {
+    width: 250px;
+  }
+
+  &.closed {
+    width: 60px;
+
+    .nav-links {
+      a {
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .toggle-button {
+    position: absolute;
+    top: 10px;
+    right: -12px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+
+    &:hover {
+      background-color: #f0f0f0;
+    }
+  }
+
+  .nav-links {
+    display: flex;
+    flex-direction: column;
+    padding: 2rem 1rem;
+    height: 100%;
+
+    a {
+      padding: 0.75rem 1rem;
+      margin-bottom: 0.5rem;
+      color: #333;
+      text-decoration: none;
+      border-radius: 4px;
+      font-weight: 500;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      &.active {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .bottom-link {
+      margin-top: auto;
+
+      a {
+        color: #666;
+        font-weight: 400;
+      }
+    }
+  }
+}

package/src/types/Screen.ts

@@ -0,0 +1,4 @@
+export interface Screen {
+  key: string,
+  controller: string,
+}