react-admin-crud-manager 1.0.0

package/README.md

@@ -0,0 +1,40 @@
+# React Admin CRUD Manager
+
+A reusable React CRUD admin template with modular components for rapid admin dashboard development.
+
+## Features
+- Plug-and-play CRUD page component
+- Modular, customizable UI components (Table, Modal, Form, etc.)
+- Built with React 18+
+- Tailwind CSS for styling
+
+## Installation
+
+```
+npm install react-admin-crud-manager
+```
+
+## Usage
+
+```
+import { CrudPage } from 'react-admin-crud-manager';
+
+function App() {
+  const config = {
+    title: 'Users',
+    fetchData: async () => { /* fetch logic */ },
+    // ...other config options
+  };
+  return <CrudPage config={config} />;
+}
+```
+
+## Components
+- `CrudPage`: Main CRUD page component
+- `Table`, `Modal`, `Form`, etc.: Available for advanced use
+
+## Props
+See the source or future documentation for full prop details.
+
+## License
+MIT

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "react-admin-crud-manager",
+  "version": "1.0.0",
+  "description": "A reusable React CRUD admin template with modular components.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "admin",
+    "crud",
+    "template",
+    "component-library"
+  ],
+  "author": "Dev Flips",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devflips/react-admin-crud-manager.git"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@iconify/react": "^6.0.2",
+    "@tinymce/tinymce-react": "^6.3.0",
+    "axios": "^1.11.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "js-cookie": "^3.0.5",
+    "lucide-react": "^0.446.0",
+    "notistack": "^3.0.2",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^7.9.1",
+    "tinymce": "^8.3.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "10.4.15",
+    "tailwindcss": "3.3.3",
+    "vite": "^5.0.8"
+  }
+}

package/src/App.jsx

@@ -0,0 +1,5 @@
+import CrudPage from "./components/CrudPage";
+
+export default function App() {
+  return <CrudPage />;
+}

package/src/components/Button/Button.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+const Button = React.forwardRef(
+  (
+    {
+      className = "",
+      variant = "contained",
+      color = "default",
+      size = "default",
+      fullWidth = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const baseStyles =
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
+
+    const sizes = {
+      sm: "h-8 px-3 rounded-md text-sm",
+      md: "h-9 px-4 rounded-md text-sm",
+      lg: "h-11 px-6 rounded-md text-base",
+      xl: "h-12 px-8 rounded-lg text-lg",
+      default: "h-9 px-4 rounded-md text-sm",
+    };
+
+    const colorVariants = {
+      primary: {
+        contained:
+          "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm",
+        outlined:
+          "border border-blue-600 bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-blue-500",
+        text: "bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-blue-500",
+      },
+      success: {
+        contained:
+          "bg-green-600 text-white hover:bg-green-700 focus:ring-green-500 shadow-sm",
+        outlined:
+          "border border-green-600 bg-transparent text-green-600 hover:bg-green-50 focus:ring-green-500",
+        text: "bg-transparent text-green-600 hover:bg-green-50 focus:ring-green-500",
+      },
+      error: {
+        contained:
+          "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm",
+        outlined:
+          "border border-red-600 bg-transparent text-red-600 hover:bg-red-50 focus:ring-red-500",
+        text: "bg-transparent text-red-600 hover:bg-red-50 focus:ring-red-500",
+      },
+      default: {
+        contained:
+          "border bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600",
+        outlined:
+          "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-300 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-gray-500",
+        text: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-300 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-gray-500",
+      },
+    };
+
+    const colorStyles =
+      colorVariants[color]?.[variant] || colorVariants.default.contained;
+    const sizeStyles = sizes[size];
+
+    const combinedClassName = `
+      ${baseStyles} 
+      ${colorStyles} 
+      ${sizeStyles} 
+      ${fullWidth ? "w-full" : ""} 
+      ${className}
+    `.trim();
+
+    return (
+      <button
+        ref={ref}
+        type={props.type || "button"}
+        className={combinedClassName}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export default Button;

package/src/components/Chip/Chip.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+const BADGE_COLORS = {
+  blue: {
+    bg: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+    border:
+      "border border-blue-300 text-blue-700 dark:border-blue-700 dark:text-blue-300",
+  },
+  teal: {
+    bg: "bg-teal-100 text-teal-800 dark:bg-teal-900/30 dark:text-teal-300",
+    border:
+      "border border-teal-300 text-teal-700 dark:border-teal-700 dark:text-teal-300",
+  },
+  purple: {
+    bg: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
+    border:
+      "border border-purple-300 text-purple-700 dark:border-purple-700 dark:text-purple-300",
+  },
+  yellow: {
+    bg: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
+    border:
+      "border border-yellow-300 text-yellow-700 dark:border-yellow-700 dark:text-yellow-300",
+  },
+  green: {
+    bg: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+    border:
+      "border border-green-300 text-green-700 dark:border-green-700 dark:text-green-300",
+  },
+  red: {
+    bg: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+    border:
+      "border border-red-300 text-red-700 dark:border-red-700 dark:text-red-300",
+  },
+  gray: {
+    bg: "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300",
+    border:
+      "border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-300",
+  },
+};
+
+const BADGE_VARIANTS = {
+  contained: "bg",
+  outline: "border !bg-transparent",
+  soft: "bg opacity-90",
+};
+
+const Chip = ({
+  label,
+  variant = "contained", // contained | outline | soft
+  color = "green",
+  className = "",
+}) => {
+  const colorConfig = BADGE_COLORS[color] || BADGE_COLORS.green;
+  const variantKey = BADGE_VARIANTS[variant] || BADGE_VARIANTS.contained;
+
+  const variantClasses =
+    variant === "outline" ? colorConfig.border : colorConfig.bg;
+
+  return (
+    <span
+      className={`inline-flex justify-center items-center rounded-sm text-xs font-semibold px-3 py-1 min-w-[78px]
+        ${variantClasses}
+        ${variantKey}
+        ${className}`}
+    >
+      {label}
+    </span>
+  );
+};
+
+export default Chip;