mobigrid-module 1.0.0

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "mobigrid-module",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.tsx",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@tanstack/react-table": "^8.20.5",
+    "axios": "^1.7.8",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.462.0",
+    "next-themes": "^0.4.3",
+    "react-day-picker": "8.10.1",
+    "react-feather": "^2.0.10",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "sonner": "^1.7.0",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@eslint/js": "^9.13.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@shadcn/ui": "^0.0.4",
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "lucide-react": "^0.456.0",
+    "postcss": "^8.4.47",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,35 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import typescript from "@rollup/plugin-typescript";
+import { terser } from "rollup-plugin-terser";
+import json from '@rollup/plugin-json';
+
+export default {
+  input: "src/index.tsx",
+  output: [
+    {
+      file: "dist/index.tsx",
+      format: "cjs",
+      sourcemap: true,
+    },
+    {
+      file: "dist/index.esm.js",
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript({ 
+      tsconfig: "./tsconfig.json",
+      outDir: "./dist",
+      declarationDir: "./dist"
+    }),
+    terser(),
+    json(),
+  ],
+  external: ["react", "react-dom"],
+};

package/src/components/CustomTable/CustomTable.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import { format } from "date-fns";
+import Icon from "../Icon";
+
+interface TableProps {
+  data: any[];
+  columns: any[];
+  isLoading: boolean;
+}
+
+export function CustomTable({ data, columns, isLoading }: TableProps) {
+  const table = useReactTable({
+    data: isLoading ? [] : data,
+    columns: columns.map((col) => ({
+      accessorKey: col.key,
+      header: col.title,
+      cell: (info) => {
+        if (col.key === "ACTIONS_BUTTONS") {
+          return (
+            <div className="flex gap-2 justify-end">
+              {col.actions?.map((action: any, index: number) => (
+                <button
+                  key={index}
+                  className={`inline-flex items-center px-2 py-1 text-sm rounded-full transition-colors duration-200 ${
+                    index === 0
+                      ? "text-blue-700 bg-blue-50 border border-blue-200 hover:bg-blue-100"
+                      : index === 1
+                      ? "text-green-700 bg-green-50 border border-green-200 hover:bg-green-100"
+                      : index === 2
+                      ? "text-purple-700 bg-purple-50 border border-purple-200 hover:bg-purple-100"
+                      : index === 3
+                      ? "text-orange-700 bg-orange-50 border border-orange-200 hover:bg-orange-100"
+                      : "text-gray-700 bg-gray-50 border border-gray-200 hover:bg-gray-100"
+                  }`}
+                  onClick={() => {
+                    console.log(action.action, info.row.original);
+                  }}
+                >
+                  {action.icon && (
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="mr-2"
+                      >
+                        <Icon name={action.icon.replace(/^icon-/, '')} className="mr-2" />
+                      </svg>
+                    )}
+                  {action.label}
+                </button>
+              ))}
+            </div>
+          );
+        }
+        if (col.type === "status") {
+          const statusColors: { [key: string]: string } = {
+            PENDING: "bg-yellow-100 text-yellow-800",
+            PAID: "bg-green-100 text-green-800",
+            CANCELLED: "bg-red-100 text-red-800",
+            CANCEL_STARTED: "bg-orange-100 text-orange-800",
+            ECHEC: "bg-gray-100 text-gray-800",
+          };
+          const status = info.getValue() as string;
+          return (
+            <div className="flex items-center justify-center">
+              <span
+                className={`px-2 py-1 rounded-full text-xs font-medium text-center ${
+                  statusColors[status] || "bg-gray-100 text-gray-800"
+                }`}
+              >
+                {status || "-"}
+              </span>
+            </div>
+          );
+        }
+        if (col.type === "money") {
+          return `${info.getValue()} ${col.currency}`;
+        }
+        if (col.type === "date") {
+          return format(new Date(info.getValue() as string), "dd-MM-yyyy");
+        }
+        if (col.scroll) {
+          return (
+            <div className="max-h-24 overflow-y-auto">
+              {info.getValue()}
+            </div>
+          );
+        }
+        return info.getValue();
+      },
+    })),
+    getCoreRowModel: getCoreRowModel(),
+    enableMultiRowSelection: true,
+    enableRowSelection: true,
+    state: {
+      rowSelection: {},
+    },
+  });
+
+  return (
+    <Table className="border border-gray-200 rounded-md">
+      <TableHeader className="bg-gray-50">
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <TableHead key={header.id} className="font-medium text-gray-800 py-2">
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )}
+              </TableHead>
+            ))}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {isLoading ? (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="text-center py-4">
+              <svg
+                className="animate-spin h-5 w-5 mx-auto mb-2"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+              Chargement des données...
+            </TableCell>
+          </TableRow>
+        ) : !data || data.length === 0 ? (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="text-center py-4">
+              Aucune donnée disponible
+            </TableCell>
+          </TableRow>
+        ) : (
+          table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id} className="bg-white hover:bg-gray-100">
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/CustomTable/Pagination.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../../components/ui/pagination";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationProps) {
+  const renderPaginationItems = () => {
+    const items = [];
+
+    // Previous button
+    items.push(
+      <PaginationItem key="prev">
+        <PaginationPrevious 
+          href="#" 
+          onClick={(e) => {
+            e.preventDefault();
+            if (currentPage > 1) onPageChange(currentPage - 1);
+          }}
+        />
+      </PaginationItem>
+    );
+
+    // First page
+    items.push(
+      <PaginationItem key={1}>
+        <PaginationLink 
+          href="#" 
+          isActive={currentPage === 1}
+          onClick={(e) => {
+            e.preventDefault();
+            onPageChange(1);
+          }}
+        >
+          1
+        </PaginationLink>
+      </PaginationItem>
+    );
+
+    // Calculate visible page range
+    let startPage = Math.max(2, currentPage - 1);
+    let endPage = Math.min(totalPages - 1, currentPage + 1);
+
+    // Add ellipsis after first page if needed
+    if (startPage > 2) {
+      items.push(
+        <PaginationItem key="ellipsis1">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+
+    // Add middle pages
+    for (let i = startPage; i <= endPage; i++) {
+      items.push(
+        <PaginationItem key={i}>
+          <PaginationLink 
+            href="#" 
+            isActive={currentPage === i}
+            onClick={(e) => {
+              e.preventDefault();
+              onPageChange(i);
+            }}
+          >
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    // Add ellipsis before last page if needed
+    if (endPage < totalPages - 1) {
+      items.push(
+        <PaginationItem key="ellipsis2">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+
+    // Last page (if not already included)
+    if (totalPages > 1) {
+      items.push(
+        <PaginationItem key={totalPages}>
+          <PaginationLink 
+            href="#" 
+            isActive={currentPage === totalPages}
+            onClick={(e) => {
+              e.preventDefault();
+              onPageChange(totalPages);
+            }}
+          >
+            {totalPages}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    // Next button
+    items.push(
+      <PaginationItem key="next">
+        <PaginationNext 
+          href="#" 
+          onClick={(e) => {
+            e.preventDefault();
+            if (currentPage < totalPages) onPageChange(currentPage + 1);
+          }}
+        />
+      </PaginationItem>
+    );
+
+    return items;
+  };
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        {renderPaginationItems()}
+      </PaginationContent>
+    </Pagination>
+  );
+}

package/src/components/Icon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import * as FeatherIcons from 'react-feather';
+import { IconProps as FeatherIconProps } from 'react-feather';
+
+interface IconProps extends Omit<FeatherIconProps, 'ref'> {
+  name: string;
+}
+
+const Icon = ({ name, ...props }: IconProps): JSX.Element | null => {
+  const formatIconName = (iconName: string): string => {
+    return iconName
+      .split(/[-_]/)
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+      .join('');
+  };
+
+  const IconComponent = FeatherIcons[formatIconName(name) as keyof typeof FeatherIcons];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found in react-feather library`);
+    return null;
+  }
+
+  return <IconComponent {...props} />;
+};
+
+export default Icon;