modula-ui 1.0.0 → 1.0.3

package/README.md

@@ -1,36 +1,98 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-https://grok.com/c/8a8910e9-3c12-4eb9-8136-d8650eadb428
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+# Modula UI
+
+A library of modern UI patterns and complete interfaces built with [Shadcn](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/). Get beautiful, functional UIs without building from scratch.
+
+## ✨ Features
+
+- 🎨 **Complete UI Patterns** - Full-featured interfaces, not just individual components
+- 🚀 **Easy Integration** - Simple CLI to add entire UI blocks to your project
+- 📦 **Copy & Paste** - Browse interfaces in your browser and copy code directly
+- 🎯 **Modern Stack** - Built with Next.js, React 19, and Tailwind CSS 4
+- 🔧 **Customizable** - Full control over styling and behavior
+- 📱 **Responsive** - Mobile-first design approach
+
+## 🚀 Quick Start
+
+### Browse UI Patterns
+
+Run the library locally to browse all available UI patterns and interfaces:
+
+```bash
+npx modula-ui
+```
+
+This will start a local server at `http://localhost:3177` where you can:
+- Preview all UI patterns
+- Copy interface code
+- See live examples
+
+### Add UI Patterns to Your Project
+
+Use the CLI to add complete interfaces directly to your project:
+
+```bash
+npx modula-ui add <component-name>
+```
+
+The CLI will automatically:
+1. Install required dependencies
+2. Install necessary Shadcn UI components
+3. Copy the complete interface files to your project
+
+## 📦 Available UI Patterns
+
+- **video-conference** - Full-featured video conferencing interface with participant grid, controls, and animations
+- **group-chat** - Modern group chat interface with sidebar, message threads, and real-time feel
+
+
+## 🛠️ Installation
+
+### Prerequisites
+
+- Node.js >= 18.17.0
+- A Next.js or React project with Tailwind CSS configured
+
+### Example: Adding a UI Block
+
+```bash
+# Add the video conference page
+npx modula-ui add video-conference
+
+# Add the group chat interface
+npx modula-ui add group-chat
+```
+
+The interface will be added to `src/library/<type>/` (or `library/<type>/` if no `src` folder exists).
+
+## 🎯 Usage
+
+After adding a UI pattern, import and use it in your project:
+
+```jsx
+import VideoConferencePage from '@/library/pages/VideoConferencePage';
+
+export default function MyPage() {
+  return <VideoConferencePage />;
+}
+```
+
+## 🏗️ Tech Stack
+
+- **Framework:** Next.js 16
+- **UI Library:** React 19
+- **Styling:** Tailwind CSS 4
+- **Components:** Radix UI primitives
+- **Animations:** Framer Motion
+- **Icons:** Lucide React
+- **Charts:** Recharts
+
+## 📄 License
+
+MIT © Mary Ojo
+
+
+## 🔗 Links
+
+- [npm Package](https://www.npmjs.com/package/modula-ui)
+- [Shadcn UI](https://ui.shadcn.com/)
+- [Tailwind CSS](https://tailwindcss.com/)

package/bin/run.js

@@ -6,6 +6,7 @@ import { parse } from 'url';
 import fs from 'fs/promises';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const packageRoot = path.join(__dirname, '..');
@@ -13,11 +14,60 @@ const packageRoot = path.join(__dirname, '..');
 const args = process.argv.slice(2);
 const command = args[0];
 
+const getPackageManager = async () => {
+  const userRoot = process.cwd();
+  try {
+    await fs.access(path.join(userRoot, 'pnpm-lock.yaml'));
+    return 'pnpm';
+  } catch {}
+  try {
+    await fs.access(path.join(userRoot, 'yarn.lock'));
+    return 'yarn';
+  } catch {}
+  try {
+    await fs.access(path.join(userRoot, 'bun.lockb'));
+    return 'bun';
+  } catch {}
+  return 'npm';
+};
+
+const installDependencies = async (dependencies) => {
+  if (!dependencies || dependencies.length === 0) return;
+  
+  const pm = await getPackageManager();
+  const installCmd = pm === 'npm' ? 'install' : 'add';
+  const cmd = `${pm} ${installCmd} ${dependencies.join(' ')}`;
+  
+  console.log(`\n📦 Installing dependencies: ${dependencies.join(', ')}...`);
+  try {
+    execSync(cmd, { stdio: 'inherit', cwd: process.cwd() });
+    console.log('✅ Dependencies installed.');
+  } catch (error) {
+    console.error('❌ Failed to install dependencies.');
+    // Don't exit, just warn
+  }
+};
+
+const installRegistryDependencies = (dependencies) => {
+  if (!dependencies || dependencies.length === 0) return;
+
+  console.log(`\n🎨 Installing UI components: ${dependencies.join(', ')}...`);
+  try {
+    // Attempt to use shadcn CLI
+    // We add -y to accept defaults if possible, but shadcn might still prompt
+    execSync(`npx shadcn@latest add ${dependencies.join(' ')} -y`, { stdio: 'inherit', cwd: process.cwd() });
+    console.log('✅ UI components installed.');
+  } catch (error) {
+    console.warn('⚠️  Failed to install UI components via shadcn. You might need to install them manually.');
+    console.warn(`   Run: npx shadcn@latest add ${dependencies.join(' ')}`);
+  }
+};
+
 if (command === 'add') {
   const componentName = args[1];
   
   if (!componentName) {
-    console.error('Please specify a component name: npx nora-ui add <component-name>');
+    console.error('Please specify a component name: npx modula-ui add <component-name>');
     process.exit(1);
   }
 
@@ -34,10 +84,20 @@ if (command === 'add') {
       process.exit(1);
     }
 
-    const sourcePath = path.join(packageRoot, component.path);
+    // 1. Install External Dependencies
+    if (component.dependencies) {
+      await installDependencies(component.dependencies);
+    }
+
+    // 2. Install Registry Dependencies (Shadcn components)
+    if (component.registryDependencies) {
+      installRegistryDependencies(component.registryDependencies);
+    }
+
+    // 3. Copy Files
+    const filesToCopy = component.files || [component.path];
     
-    // Determine destination path
-    // Check if src directory exists in the user's project
+    // Determine destination directory
     const userProjectRoot = process.cwd();
     const hasSrc = await fs.access(path.join(userProjectRoot, 'src')).then(() => true).catch(() => false);
     
@@ -45,16 +105,20 @@ if (command === 'add') {
       ? path.join(userProjectRoot, 'src', 'library', component.type)
       : path.join(userProjectRoot, 'library', component.type);
 
-    const destPath = path.join(destDir, path.basename(sourcePath));
-
     // Ensure destination directory exists
     await fs.mkdir(destDir, { recursive: true });
 
-    // Read and write file
-    const content = await fs.readFile(sourcePath, 'utf-8');
-    await fs.writeFile(destPath, content);
+    for (const filePath of filesToCopy) {
+      const sourcePath = path.join(packageRoot, filePath);
+      const fileName = path.basename(sourcePath);
+      const destPath = path.join(destDir, fileName);
 
-    console.log(`✓ Component ${component.name} added to ${path.relative(userProjectRoot, destPath)}`);
+      // Read and write file
+      const content = await fs.readFile(sourcePath, 'utf-8');
+      await fs.writeFile(destPath, content);
+      
+      console.log(`\n✨ Component file ${fileName} added to ${path.relative(userProjectRoot, destPath)}`);
+    }
 
   } catch (error) {
     console.error('Error adding component:', error);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modula-ui",
-  "version": "1.0.0",
-  "description": "A library of modern interfaces with great UX built with Shadcn",
+  "version": "1.0.3",
+  "description": "A library of modern interfaces and UI patterns with great UX built with Shadcn",
   "keywords": [
     "tailwind",
     "components",
@@ -15,7 +15,7 @@
   "type": "module",
   "bin": {
     "maryojo": "./bin/run.js",
-    "nora-ui": "./bin/run.js"
+    "modula-ui": "./bin/run.js"
   },
   "files": [
     "src",
@@ -68,4 +68,4 @@
   "engines": {
     "node": ">=18.17.0"
   }
-}
+}

package/registry.json

@@ -2,11 +2,36 @@
     "video-conference": {
         "name": "VideoConference",
         "type": "pages",
-        "path": "src/library/pages/VideoConference/VideoConferencePage.jsx"
+        "path": "src/library/pages/VideoConference/VideoConferencePage.jsx",
+        "dependencies": [
+            "lucide-react",
+            "framer-motion",
+            "clsx",
+            "tailwind-merge"
+        ],
+        "registryDependencies": [
+            "avatar"
+        ]
     },
     "group-chat": {
         "name": "GroupChat",
         "type": "pages",
-        "path": "src/library/pages/GroupChat/GroupChatPage.jsx"
+        "path": "src/library/pages/GroupChat/GroupChat.jsx",
+        "files": [
+            "src/library/pages/GroupChat/GroupChat.jsx",
+            "src/library/pages/GroupChat/data.js"
+        ],
+        "dependencies": [
+            "lucide-react"
+        ],
+        "registryDependencies": [
+            "sidebar",
+            "avatar",
+            "badge",
+            "scroll-area",
+            "navigation-menu",
+            "input",
+            "button"
+        ]
     }
 }

package/src/app/layout.js

@@ -12,8 +12,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata = {
-  title: "Nora UI",
-  description: "A library of modern interfaces with great UX built with Shadcn",
+  title: "Modula UI",
+  description: "A library of modern interfaces and UI patterns with great UX built with Shadcn",
 };
 
 export default function RootLayout({ children }) {

package/src/components/Header.jsx

@@ -9,7 +9,7 @@ export default function Header({ sidebarOpen, toggleSidebar }) {
       <div className="mb-8 flex items-center justify-between">
         <div>
           <Logo />
-          <p className="text-gray-600">A library of modern interfaces with great UX built with Shadcn</p>
+          <p className="text-gray-600">A library of modern interfaces and UI patterns with great UX built with Shadcn</p>
         </div>
 
         <button

package/src/components/Logo.jsx

@@ -3,24 +3,24 @@ import React from 'react';
 const Logo = ({ className = '' }) => {
     return (
         <svg
-            width="180"
+            width="215"
             height="50"
-            viewBox="0 0 180 50"
+            viewBox="0 0 215 50"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             className={className}
         >
-            {/* Icon Element - Abstract 'N' or Tech shape */}
+            {/* Icon Element - Abstract 'M' */}
             <circle cx="25" cy="25" r="20" fill="url(#grad1)" opacity="0.2" />
             <path
-                d="M15 35V15L35 35V15"
+                d="M15 35V15L25 25L35 15V35"
                 stroke="url(#grad2)"
                 strokeWidth="4"
                 strokeLinecap="round"
                 strokeLinejoin="round"
             />
 
-            {/* Text 'nora' */}
+            {/* Text 'modula ui' */}
             <text
                 x="55"
                 y="32"
@@ -30,20 +30,7 @@ const Logo = ({ className = '' }) => {
                 fill="#111827"
                 letterSpacing="-1"
             >
-                nora
-            </text>
-
-            {/* Text '-ui' with different style */}
-            <text
-                x="115"
-                y="32"
-                fontFamily="system-ui, -apple-system, sans-serif"
-                fontWeight="800"
-                fontSize="28"
-                fill="#111827"
-                letterSpacing="-1"
-            >
-                ui
+                modula ui
             </text>
 
             {/* Gradients */}

package/src/library/pages/GroupChat/index.jsx

@@ -5,7 +5,7 @@ import GroupChatCode from './GroupChat'
 
 export const GroupChat = {
   name: "Group Chat",
-  code: "npx nora-ui add group-chat",
+  code: "npx modula-ui add group-chat",
   preview: (
     <GroupChatCode />
   )

package/src/library/pages/VideoConference/index.jsx

@@ -5,7 +5,7 @@ import VideoConferencePage from './VideoConferencePage'
 
 export const VideoConference = {
   name: "Video Conference",
-  code: "npx nora-ui add video-conference",
+  code: "npx modula-ui add video-conference",
   preview: (
     <VideoConferencePage />
   )