matarial-init 1.0.0 → 1.0.1

package/README.md

@@ -1,62 +1,97 @@
 # 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.
+A standard NPM package providing a dynamic workflow React Context, components, and interactive Dashboard with live public placeholder API integration.
+
+Installs strictly into `node_modules` without modifying your project's folders, and removes completely on `npm uninstall`.
 
 ---
 
-## 🚀 Quick Start
+## 📦 Installation
 
-### Option 1: Automatic installation via `npm install`
-Run inside your React project:
+Install into your project's `node_modules`:
 ```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:
+To remove:
 ```bash
-npx matarial-init
+npm uninstall matarial-init
 ```
+*(Removes the package cleanly from `node_modules` without leaving any artifacts in your project).*
 
 ---
 
-## 📦 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.
+## 🚀 Usage
 
----
+You can import any of the components, contexts, hooks, or pages directly from `"matarial-init"`:
 
-## ⚙️ Peer Dependencies
-Ensure your project has the required dependencies:
-```bash
-npm install react react-dom react-router-dom formik yup react-toastify
+### 1. Wrap your application with `DataProvider`
+```jsx
+import React from "react"
+import { DataProvider } from "matarial-init"
+import App from "./App"
+
+export default function Root() {
+  return (
+    <DataProvider>
+      <App />
+    </DataProvider>
+  )
+}
 ```
-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>
+
+### 2. Use the `useData` dynamic workflow hook
+```jsx
+import { useData } from "matarial-init"
+
+export function PostList() {
+  // Automatically fetches from https://jsonplaceholder.typicode.com/posts
+  const { collection, loading, error, refresh, addData, deleteData } = useData("posts")
+
+  if (loading) return <p>Loading...</p>
+  if (error) return <p>Error loading data</p>
+
+  return (
+    <div>
+      <button onClick={refresh}>Refresh</button>
+      <ul>
+        {collection.map(post => (
+          <li key={post.id}>
+            {post.title}
+            <button onClick={() => deleteData(p => p.id !== post.id)}>Delete</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+```
+
+### 3. Use the dynamic `Dashboard` page
+```jsx
+import { Dashboard } from "matarial-init"
+
+export function DashboardPage() {
+  return <Dashboard />
+}
 ```
 
 ---
 
-## 🚢 Publishing to NPM
+## 🧩 Exported Members
+
+- **Context & Hooks**: `DataProvider`, `DataContext`, `defaultSource`, `useData`, `usePermission`
+- **Pages**: `Dashboard`, `Books`, `Members`, `MyBooks`, `Penalty`, `Home`, `SignIn`, `SignUp`
+- **Components**: `Table`, `Modal`, `Button`, `Input`, `Header`, `Sidebar`, `Navbar`
+- **Layouts & Routes**: `DashboardLayout`, `PublicLayout`, `ProtectedRoute`, `PublicRoute`
+- **Utilities**: `getData`, `setData`, `getCollection`, `addData`, `updateData`, `deleteData`, `clearData`
+- **Constants**: `STORAGE_KEYS`, `SIDEBAR_MENU`, `PERMISSIONS`, `Role`
+
+---
+
+## 🚢 Publishing
 
-To publish this package to NPM:
+To publish to the npm registry:
 ```bash
 npm login
 npm publish --access public

package/index.js

@@ -1,9 +1,35 @@
+// Context & Hooks
 export { DataContext, defaultSource } from "./src/context/dataContext.js"
 export { DataProvider } from "./src/context/DataContext.jsx"
 export { useData } from "./src/context/useData.jsx"
+export { usePermission } from "./src/hooks/usePermission.jsx"
+
+// UI Components
+export { default as Button } from "./src/components/Button.jsx"
+export { default as Input } from "./src/components/Input.jsx"
+export { Modal } from "./src/components/Modal.jsx"
+export { Table } from "./src/components/Table.jsx"
+export { Header } from "./src/components/Header.jsx"
+export { Sidebar } from "./src/components/Sidebar.jsx"
+export { default as Navbar } from "./src/components/Navbar.jsx"
+
+// Layouts & Routes
+export { DashboardLayout } from "./src/layout/DashboardLayout.jsx"
+export { PublicLayout } from "./src/layout/PublicLayout.jsx"
+export { ProtectedRoute } from "./src/routes/ProtectedRoute.jsx"
+export { PublicRoute } from "./src/routes/PublicRoute.jsx"
+
+// Pages
 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 Penalty } from "./src/pages/Penalty.jsx"
+export { default as Home } from "./src/pages/Home.jsx"
 export { default as SignIn } from "./src/pages/Signin.jsx"
 export { default as SignUp } from "./src/pages/SignUp.jsx"
+
+// Constants & Utilities
+export * from "./src/constants/storageKeys.js"
+export * from "./src/constants/permissions.js"
+export * from "./src/uttils/persistence.js"

package/package.json

@@ -1,20 +1,20 @@
 {
   "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.",
+  "version": "1.0.1",
+  "description": "Dynamic workflow React Context, components, and Dashboard library.",
   "type": "module",
   "main": "index.js",
-  "bin": {
-    "matarial-init": "./bin/cli.js"
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./*": "./*"
   },
   "files": [
     "src",
-    "bin",
     "index.js",
     "README.md"
   ],
   "scripts": {
-    "postinstall": "node ./bin/postinstall.js",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",

package/bin/cli.js

@@ -1,7 +0,0 @@
-#!/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

@@ -1,86 +0,0 @@
-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

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