matarial-init 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# matarial-init
+
+An NPM package that automatically installs the full `src` folder (featuring React Context dynamic workflow, public placeholder API integration, Library Management system, and interactive Dashboard) into any React project.
+
+---
+
+## 🚀 Quick Start
+
+### Option 1: Automatic installation via `npm install`
+Run inside your React project:
+```bash
+npm install matarial-init
+```
+During installation, the `postinstall` script will automatically copy the full `src/` directory into your project root.
+
+---
+
+### Option 2: Run via `npx`
+You can also run the initialization script directly anytime:
+```bash
+npx matarial-init
+```
+
+---
+
+## 📦 What gets installed in `src/`
+
+- **`src/context/`**:
+  - `dataContext.js`: `DataContext` declaration & default public placeholder API fetch handler (`https://jsonplaceholder.typicode.com`).
+  - `DataContext.jsx`: `DataProvider` component wrapping your React app.
+  - `useData.jsx`: Dynamic workflow hook supporting fetching, caching, loading/error states, and mutations (`addData`, `updateData`, `deleteData`, `refresh`).
+- **`src/pages/`**:
+  - `DashBoard.jsx`: Dynamic Dashboard with live public placeholder API integration, resource tabs (Posts, Todos, Users), metrics cards, search filter, pagination, record modals, and deletion.
+  - `Books.jsx`, `Members.jsx`, `MyBooks.jsx`, `Penalty.jsx`, `Home.jsx`, `Signin.jsx`, `SignUp.jsx`.
+- **`src/components/`**:
+  - `Table.jsx`, `Modal.jsx`, `Button.jsx`, `Input.jsx`, `Header.jsx`, `Sidebar.jsx`, `Navbar.jsx`.
+- **`src/layout/`**: `DashboardLayout.jsx`, `PublicLayout.jsx`.
+- **`src/routes/`**: `ProtectedRoute.jsx`, `PublicRoute.jsx`.
+- **`src/validation/`**: Yup validation schemas.
+- **`src/constants/`**: Permissions and storage keys.
+- **`src/uttils/`**: Local persistence helpers.
+
+---
+
+## ⚙️ Peer Dependencies
+Ensure your project has the required dependencies:
+```bash
+npm install react react-dom react-router-dom formik yup react-toastify
+```
+And include Tailwind CSS or styling support (e.g. in your `index.html` or CSS):
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+```
+
+---
+
+## 🚢 Publishing to NPM
+
+To publish this package to NPM:
+```bash
+npm login
+npm publish --access public
+```

package/bin/cli.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+import { installSrc } from "./copy-src.js"
+
+console.log("\x1b[36m🚀 Initializing matarial-init...\x1b[0m")
+const targetDir = process.cwd()
+installSrc(targetDir)

package/bin/copy-src.js

@@ -0,0 +1,86 @@
+import fs from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+/**
+ * Recursively copies all files and directories from source to destination.
+ */
+export function copyFolderSync(from, to) {
+  if (!fs.existsSync(to)) {
+    fs.mkdirSync(to, { recursive: true })
+  }
+
+  const entries = fs.readdirSync(from, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(from, entry.name)
+    const destPath = path.join(to, entry.name)
+
+    if (entry.isDirectory()) {
+      copyFolderSync(srcPath, destPath)
+    } else {
+      fs.copyFileSync(srcPath, destPath)
+    }
+  }
+}
+
+/**
+ * Detects the root directory of the consumer project.
+ */
+export function detectConsumerDir() {
+  const packageDir = path.resolve(__dirname, "..")
+
+  // Case 1: If installed inside node_modules, find the parent project root
+  const parts = packageDir.split(path.sep)
+  const nmIndex = parts.lastIndexOf("node_modules")
+  if (nmIndex > 0) {
+    const consumerRoot = parts.slice(0, nmIndex).join(path.sep)
+    if (consumerRoot && fs.existsSync(consumerRoot)) {
+      return consumerRoot
+    }
+  }
+
+  // Case 2: If invoked via npm install, npm sets INIT_CWD to the invoking directory
+  if (process.env.INIT_CWD) {
+    const initCwd = path.resolve(process.env.INIT_CWD)
+    if (initCwd !== packageDir) {
+      return initCwd
+    }
+  }
+
+  // Case 3: Direct CLI execution (e.g. npx matarial-init)
+  return process.cwd()
+}
+
+/**
+ * Installs the package's src directory into the target project directory.
+ */
+export function installSrc(targetBaseDir = null) {
+  const packageDir = path.resolve(__dirname, "..")
+  const resolvedTarget = path.resolve(targetBaseDir || detectConsumerDir())
+
+  // Skip if running within the package's own root during local development or build
+  if (resolvedTarget === packageDir) {
+    return
+  }
+
+  const sourceSrc = path.join(packageDir, "src")
+  const targetSrc = path.join(resolvedTarget, "src")
+
+  if (!fs.existsSync(sourceSrc)) {
+    console.error(`\x1b[31m[matarial-init] Error: Source 'src' directory not found at: ${sourceSrc}\x1b[0m`)
+    return
+  }
+
+  try {
+    console.log(`\x1b[36m[matarial-init] Installing 'src' folder into: ${targetSrc}...\x1b[0m`)
+    copyFolderSync(sourceSrc, targetSrc)
+    console.log(`\x1b[32m✔ [matarial-init] Successfully installed 'src' folder into your project!\x1b[0m`)
+    console.log(`\x1b[35m[matarial-init] Included: DataContext, useData, Dashboard, Components, Routes, Layout, and Utils.\x1b[0m`)
+  } catch (err) {
+    console.error(`\x1b[31m[matarial-init] Failed to copy 'src' folder: ${err.message}\x1b[0m`)
+  }
+}

package/bin/postinstall.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+import { installSrc } from "./copy-src.js"
+
+// Automatically detect consumer project root and install the src folder
+installSrc()

package/index.js

@@ -0,0 +1,9 @@
+export { DataContext, defaultSource } from "./src/context/dataContext.js"
+export { DataProvider } from "./src/context/DataContext.jsx"
+export { useData } from "./src/context/useData.jsx"
+export { default as Dashboard } from "./src/pages/DashBoard.jsx"
+export { default as Books } from "./src/pages/Books.jsx"
+export { default as Members } from "./src/pages/Members.jsx"
+export { default as MyBooks } from "./src/pages/MyBooks.jsx"
+export { default as SignIn } from "./src/pages/Signin.jsx"
+export { default as SignUp } from "./src/pages/SignUp.jsx"

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "matarial-init",
+  "version": "1.0.0",
+  "description": "Automatically installs the complete src folder with React Context dynamic workflow, components, and Dashboard into your project.",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "matarial-init": "./bin/cli.js"
+  },
+  "files": [
+    "src",
+    "bin",
+    "index.js",
+    "README.md"
+  ],
+  "scripts": {
+    "postinstall": "node ./bin/postinstall.js",
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "matarial-init",
+    "react",
+    "context",
+    "dashboard",
+    "dynamic-workflow"
+  ],
+  "dependencies": {
+    "formik": "^2.4.9",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.0",
+    "react-toastify": "^11.1.0",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^10.5.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.6.0",
+    "vite": "^8.1.0"
+  }
+}

package/src/App.css

@@ -0,0 +1,24 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  height: 40px;
+  background: gray;
+  text-align: center;
+  align-items: center;
+  padding-inline: 10px;
+  gap: 5px;
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+}
+
+.input {
+  border: solid 1px;
+  border-radius: 8px;
+  padding: 5px;
+  color: black;
+}

package/src/App.jsx

@@ -0,0 +1,51 @@
+import { Route, Routes } from "react-router-dom"
+import Home from "./pages/Home"
+import SignIn from "./pages/Signin"
+import SignUp from "./pages/SignUp"
+import Dashboard from "./pages/DashBoard"
+import { ToastContainer } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css";
+import { ProtectedRoute } from "./routes/ProtectedRoute"
+import { PublicRoute } from "./routes/PublicRoute"
+import { PublicLayout } from "./layout/PublicLayout"
+import { DashboardLayout } from "./layout/DashboardLayout"
+import Books from "./pages/Books"
+import Members from "./pages/Members"
+import Penalty from "./pages/Penalty"
+import MyBooks from "./pages/MyBooks"
+import { DataProvider } from "./context/DataContext.jsx"
+
+function App() {
+  return (
+    <DataProvider>
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        theme="colored"
+      />
+      <Routes>
+        <Route element={
+          <PublicRoute>
+            <PublicLayout />
+          </PublicRoute>}>
+          <Route path="/" element={<Home />} />
+          <Route path="/signin" element={<SignIn />} />
+          <Route path="/signup" element={<SignUp />} />
+        </Route>
+
+        <Route element={
+          <ProtectedRoute>
+            <DashboardLayout />
+          </ProtectedRoute>}>
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/books" element={<Books />} />
+          <Route path="/members" element={<Members />} />
+          <Route path="/penalty" element={<Penalty />} />
+          <Route path="/mybooks" element={<MyBooks />} />
+        </Route>
+      </Routes>
+    </DataProvider>
+  )
+}
+
+export default App

package/src/components/Button.jsx

@@ -0,0 +1,21 @@
+const Button = ({ className = "", text, type = "button", onClick, disabled = false }) => {
+    return (
+        <button
+            className={`
+                rounded-md
+                px-3
+                py-2
+                cursor-pointer
+                transition
+                ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+                ${className}
+            `}
+            type={type}
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    )
+}
+export default Button

package/src/components/Header.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react"
+import { clearData } from "../uttils/persistence"
+import Button from "./Button"
+import { Modal } from "./Modal"
+import { STORAGE_KEYS } from "../constants/storageKeys"
+import { useNavigate } from "react-router-dom"
+
+export const Header = () => {
+    const navigate = useNavigate()
+    const [open, setOpen] = useState(false)
+    const handleLogout = () => {
+        clearData(STORAGE_KEYS.CURRENT_USER)
+        navigate("/signin")
+        setOpen(false)
+    }
+    return (
+        <>
+            <header className="w-full flex justify-between items-center p-4">
+                <h1>My Header</h1>
+                <Button className="bg-gray-400 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded" text="Logout" onClick={() => setOpen(true)} />
+            </header>
+            <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm Logout" submit={handleLogout}>
+                <p className="text-gray-600 mb-4">
+                    Are you sure you want to logout?
+                </p>
+            </Modal>
+        </>
+    )
+}

package/src/components/Input.jsx

@@ -0,0 +1,33 @@
+const Input = ({ type, name, value, onChange, onBlur, placeholder, options, min, max }) => {
+  if (type === "select") {
+    return (
+      <select
+        className="input w-full"
+        name={name}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        placeholder={placeholder}
+      >
+        {options?.map((item, i) =>
+          <option key={i} value={item.value}>
+            {item.label}
+          </option>)}
+      </select>
+    )
+  }
+  return (
+    <input
+      className="input w-full"
+      type={type}
+      name={name}
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      min={min}
+      max={max}
+    />
+  )
+}
+export default Input

package/src/components/Modal.jsx

@@ -0,0 +1,43 @@
+import Button from "./Button";
+
+export const Modal = ({
+    isOpen,
+    onClose,
+    title,
+    children,
+    submit,
+}) => {
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black/50 flex justify-center items-center">
+
+            <div className="bg-white rounded-md p-5 min-w-[400px]">
+
+                {title &&
+                    <h2 className="text-xl text-gray-800 font-bold mb-4 border-b pb-2">
+                        {title}
+                    </h2>
+                }
+
+                {children}
+
+                <div className="flex justify-end gap-2">
+
+                    <Button
+                        className="bg-red-400 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+                        text="Close"
+                        onClick={onClose}
+                    />
+
+                    <Button
+                        className="bg-gray-400 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
+                        text="Submit"
+                        onClick={submit}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/components/Navbar.jsx

@@ -0,0 +1,19 @@
+import { Link, useNavigate } from "react-router-dom"
+import Button from "./Button"
+
+const Navbar = () => {
+    const navigate = useNavigate()
+    return (
+        <nav className="navbar">
+            <div className="logo" onClick={() => navigate("/")}>
+                Library
+            </div>
+            <div className="flex gap-2">
+                <Button text="Sign In" onClick={() => navigate("/signin")}/>
+                <Button text="Sign Up" onClick={() => navigate("/signup")} />
+            </div>
+        </nav>
+    )
+}
+
+export default Navbar

package/src/components/Sidebar.jsx

@@ -0,0 +1,30 @@
+import { useLocation, useNavigate } from "react-router-dom"
+import Button from "./Button"
+import { SIDEBAR_MENU } from "../constants/storageKeys"
+import { usePermission } from "../hooks/usePermission"
+
+export const Sidebar = () => {
+    const navigate = useNavigate()
+    const location = useLocation()
+    const { hashPermission } = usePermission()
+    return (
+        <div>
+            <div className="flex justify-start items-center h-16 px-4 text-black font-bold border-b">LOGO</div>
+            <div className="flex flex-col gap-2 p-2">
+                {SIDEBAR_MENU.filter((menu) => hashPermission(menu.permission)).map((item) => (
+                    <Button
+                        key={item.id}
+                        text={item.title}
+                        onClick={() => navigate(item.path)}
+                        className={
+                            location.pathname === item.path
+                                ? "bg-gray-400 text-white w-full"
+                                : "w-full bg-gray-200 hover:bg-gray-300"
+                        }
+                    />
+
+                ))}
+            </div>
+        </div>
+    )
+}

package/src/components/Table.jsx

@@ -0,0 +1,56 @@
+import Button from "./Button"
+
+export const Table = ({ data, column, action = [] }) => {
+    if (!data.length) {
+        return (
+            <div>
+                <h1>No records Found.</h1>
+            </div>
+        )
+    }
+    return (
+        <table className="table-auto border-collapse w-full">
+            <thead>
+                <tr>
+                    {column?.map((column) => (
+                        <th key={column.key} className="bg-gray-400 text-white px-4 py-2 text-left">
+                            {column.title.toUpperCase()}
+                        </th>
+                    ))}
+
+                    {action.length > 0 &&
+                        <th className="bg-gray-400 text-white px-4 py-2 text-left">
+                            Action
+                        </th>
+                    }
+
+                </tr>
+            </thead>
+            <tbody>
+                {data.map((item, index) => (
+                    <tr key={index}>
+                        {column?.map((column, idx) => (
+                            <td key={column.key} className="px-4 py-2">
+                                {item[column.key]}
+                            </td>
+                        ))}
+                        {action.length > 0 && (
+                            <td className="px-4 py-2">
+                                <div className="flex gap-2">
+                                    {action.map((actionItem, i) => (
+                                        <Button
+                                            key={i}
+                                            text={actionItem.label}
+                                            className={actionItem.className}
+                                            onClick={() => actionItem.onClick(item)}
+                                        />
+                                    ))}
+                                </div>
+                            </td>
+                        )}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    )
+}

package/src/constants/permissions.js

@@ -0,0 +1,27 @@
+import { Role } from "./storageKeys";
+
+export const PERMISSIONS = {
+    VIEW_DASHBOARD:[
+        Role.ADMIN,
+        Role.LIBRARIAN,
+        Role.Member
+    ],
+    VIEW_BOOKS:[
+        Role.ADMIN,
+        Role.LIBRARIAN,
+        Role.Member
+    ],
+    VIEW_MEMBER:[
+        Role.ADMIN,
+        Role.LIBRARIAN,
+    ],
+    VIEW_PANALTY:[
+        Role.ADMIN,
+        Role.LIBRARIAN,
+        Role.Member
+    ],
+    VIEW_MyBOOKS:[
+        Role.Member
+    ],
+
+}