npm - @beknurakhmed/webforge-cli - Versions diffs - 0.1.0 - Mend

@beknurakhmed/webforge-cli 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/templates/angular/package.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "ng serve",
+    "build": "ng build",
+    "test": "ng test"
+  },
+  "dependencies": {
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.6.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "typescript": "~5.6.0"
+  }
+}

package/templates/angular/src/app/app.component.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  template: `
+    <div class="app">
+      <h1>{{projectName}}</h1>
+      <p>Welcome to your new project!</p>
+    </div>
+  `,
+  styles: [`
+    .app {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      text-align: center;
+    }
+    h1 {
+      font-size: 3.2em;
+      line-height: 1.1;
+    }
+  `]
+})
+export class AppComponent {
+  title = '{{projectName}}';
+}

package/templates/angular/src/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/templates/angular/src/main.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

package/templates/angular/src/styles.css ADDED Viewed

@@ -0,0 +1,24 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  min-height: 100vh;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+  }
+}

package/templates/angular/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"],
+    "skipLibCheck": true
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/templates/base/README.md ADDED Viewed

@@ -0,0 +1,16 @@
+# {{projectName}}
+Generated with [webforge-cli](https://www.npmjs.com/package/webforge-cli).
+## Getting Started
+```bash
+npm install
+npm run dev
+```
+## Scripts
+- `npm run dev` — Start development server
+- `npm run build` — Build for production
+- `npm run preview` — Preview production build

package/templates/base/_gitignore ADDED Viewed

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+.output/
+.nuxt/
+.next/
+.angular/
+*.local
+.env
+.env.*
+!.env.example
+.DS_Store

package/templates/extras/eslint/config/eslint.config.js ADDED Viewed

@@ -0,0 +1,18 @@
+import js from '@eslint/js';
+import globals from 'globals';
+export default [
+  js.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    rules: {
+      'no-unused-vars': 'warn',
+      'no-console': 'warn',
+    },
+  },
+];

package/templates/extras/eslint/deps.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "eslint": "^9.0.0",
+    "@eslint/js": "^9.0.0",
+    "globals": "^15.0.0"
+  }
+}

package/templates/extras/prettier/config/.prettierignore ADDED Viewed

@@ -0,0 +1,6 @@
+node_modules
+dist
+.output
+.nuxt
+.next
+.angular

package/templates/extras/prettier/config/.prettierrc ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

package/templates/extras/prettier/deps.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "prettier": "^3.4.0"
+  }
+}

package/templates/nextjs/next.config.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { NextConfig } from 'next';
+const nextConfig: NextConfig = {};
+export default nextConfig;

package/templates/nextjs/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/templates/nextjs/src/app/globals.css ADDED Viewed

@@ -0,0 +1,36 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  min-height: 100vh;
+}
+.app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+  }
+}

package/templates/nextjs/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './globals.css';
+export const metadata: Metadata = {
+  title: '{{projectName}}',
+  description: 'Generated with webforge-cli',
+};
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/nextjs/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <div className="app">
+      <h1>{{projectName}}</h1>
+      <p>Welcome to your new project!</p>
+    </div>
+  );
+}

package/templates/nextjs/tsconfig.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/templates/nuxt/app.vue ADDED Viewed

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

package/templates/nuxt/assets/css/main.css ADDED Viewed

@@ -0,0 +1,24 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: #213547;
+  background-color: #ffffff;
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  min-height: 100vh;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+  }
+}

package/templates/nuxt/nuxt.config.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2025-01-01',
+  devtools: { enabled: true },
+  css: ['~/assets/css/main.css'],
+});

package/templates/nuxt/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "nuxt": "^3.14.0",
+    "vue": "^3.5.0",
+    "vue-router": "^4.4.0"
+  }
+}

package/templates/nuxt/pages/index.vue ADDED Viewed

@@ -0,0 +1,20 @@
+<template>
+  <div class="app">
+    <h1>{{projectName}}</h1>
+    <p>Welcome to your new project!</p>
+  </div>
+</template>
+<style scoped>
+.app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+</style>

package/templates/nuxt/tsconfig.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

package/templates/overlays/blog/react/src/App.css ADDED Viewed

@@ -0,0 +1,41 @@
+.blog { min-height: 100vh; display: flex; flex-direction: column; }
+.blog-header { border-bottom: 1px solid #e5e7eb; }
+.blog-header .header-content { max-width: 1100px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; }
+.blog-title { font-size: 1.5rem; color: #111827; margin: 0; }
+.blog-nav { display: flex; gap: 1.5rem; }
+.blog-nav a { text-decoration: none; color: #6b7280; font-weight: 500; }
+.blog-nav a:hover, .blog-nav a.active { color: #4f46e5; }
+.blog-layout { max-width: 1100px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: 1fr 300px; gap: 3rem; flex: 1; }
+.post-card { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid #f3f4f6; }
+.post-image { font-size: 3rem; width: 80px; text-align: center; flex-shrink: 0; }
+.post-category { font-size: 0.75rem; color: #4f46e5; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+.post-title { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0.25rem 0 0.5rem; }
+.post-excerpt { color: #6b7280; line-height: 1.6; margin-bottom: 0.75rem; }
+.post-meta { display: flex; gap: 1rem; font-size: 0.8rem; color: #9ca3af; }
+.blog-sidebar { display: flex; flex-direction: column; gap: 2rem; }
+.sidebar-section { background: #f9fafb; padding: 1.5rem; border-radius: 12px; }
+.sidebar-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: #111827; }
+.sidebar-section p { color: #6b7280; font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.75rem; }
+.category-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.category-tag { background: white; border: 1px solid #e5e7eb; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; color: #374151; text-decoration: none; }
+.category-tag:hover { border-color: #4f46e5; color: #4f46e5; }
+.newsletter-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; margin-bottom: 0.5rem; }
+.newsletter-btn { width: 100%; background: #4f46e5; color: white; border: none; padding: 0.5rem; border-radius: 6px; cursor: pointer; font-weight: 600; }
+.blog-footer { border-top: 1px solid #e5e7eb; padding: 2rem; text-align: center; color: #9ca3af; font-size: 0.875rem; }
+@media (max-width: 768px) { .blog-layout { grid-template-columns: 1fr; } .post-card { flex-direction: column; } }
+@media (prefers-color-scheme: dark) {
+  .blog-header { border-color: #374151; }
+  .blog-title, .post-title, .sidebar-section h3 { color: white; }
+  .post-card { border-color: #374151; }
+  .sidebar-section { background: #1f2937; }
+  .category-tag { background: #1f2937; border-color: #374151; color: #d1d5db; }
+  .newsletter-input { background: #1f2937; border-color: #374151; color: white; }
+  .blog-footer { border-color: #374151; }
+}

package/templates/overlays/blog/react/src/App.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { BlogHeader } from './components/BlogHeader';
+import { PostList } from './components/PostList';
+import { BlogSidebar } from './components/BlogSidebar';
+import { BlogFooter } from './components/BlogFooter';
+import './App.css';
+export interface Post {
+  id: number;
+  title: string;
+  excerpt: string;
+  author: string;
+  date: string;
+  category: string;
+  readTime: string;
+  image: string;
+}
+const posts: Post[] = [
+  { id: 1, title: 'Getting Started with Modern Web Development', excerpt: 'Learn the fundamentals of modern web development including frameworks, build tools, and best practices.', author: 'Beknur', date: 'Feb 20, 2025', category: 'Tutorial', readTime: '5 min', image: '📘' },
+  { id: 2, title: 'Understanding TypeScript Generics', excerpt: 'A deep dive into TypeScript generics and how they can make your code more reusable and type-safe.', author: 'Beknur', date: 'Feb 18, 2025', category: 'TypeScript', readTime: '8 min', image: '📗' },
+  { id: 3, title: 'CSS Grid vs Flexbox: When to Use Which', excerpt: 'A practical comparison of CSS Grid and Flexbox with real-world examples and use cases.', author: 'Beknur', date: 'Feb 15, 2025', category: 'CSS', readTime: '6 min', image: '📙' },
+  { id: 4, title: 'Building Accessible Web Applications', excerpt: 'Best practices for building web applications that are accessible to everyone.', author: 'Beknur', date: 'Feb 12, 2025', category: 'Accessibility', readTime: '7 min', image: '📕' },
+  { id: 5, title: 'State Management in 2025', excerpt: 'An overview of state management solutions and when to use them in modern applications.', author: 'Beknur', date: 'Feb 10, 2025', category: 'Architecture', readTime: '10 min', image: '📓' },
+];
+function App() {
+  return (
+    <div className="blog">
+      <BlogHeader />
+      <div className="blog-layout">
+        <PostList posts={posts} />
+        <BlogSidebar />
+      </div>
+      <BlogFooter />
+    </div>
+  );
+}
+export default App;

package/templates/overlays/blog/react/src/components/BlogFooter.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+export function BlogFooter() {
+  return (
+    <footer className="blog-footer">
+      <p>&copy; 2025 {{projectName}}. Built with passion for the web.</p>
+    </footer>
+  );
+}

package/templates/overlays/blog/react/src/components/BlogHeader.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+export function BlogHeader() {
+  return (
+    <header className="blog-header">
+      <div className="header-content">
+        <h1 className="blog-title">{{projectName}}</h1>
+        <nav className="blog-nav">
+          <a href="#" className="active">Home</a>
+          <a href="#">Articles</a>
+          <a href="#">Categories</a>
+          <a href="#">About</a>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/templates/overlays/blog/react/src/components/BlogSidebar.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+const categories = ['Tutorial', 'TypeScript', 'CSS', 'Accessibility', 'Architecture', 'JavaScript', 'React'];
+export function BlogSidebar() {
+  return (
+    <aside className="blog-sidebar">
+      <div className="sidebar-section">
+        <h3>About</h3>
+        <p>A blog about modern web development, best practices, and software engineering.</p>
+      </div>
+      <div className="sidebar-section">
+        <h3>Categories</h3>
+        <div className="category-list">
+          {categories.map((cat, i) => (
+            <a key={i} href="#" className="category-tag">{cat}</a>
+          ))}
+        </div>
+      </div>
+      <div className="sidebar-section">
+        <h3>Newsletter</h3>
+        <p>Subscribe to get the latest posts delivered to your inbox.</p>
+        <input type="email" placeholder="your@email.com" className="newsletter-input" />
+        <button className="newsletter-btn">Subscribe</button>
+      </div>
+    </aside>
+  );
+}

package/templates/overlays/blog/react/src/components/PostList.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import type { Post } from '../App';
+interface PostListProps {
+  posts: Post[];
+}
+export function PostList({ posts }: PostListProps) {
+  return (
+    <main className="post-list">
+      {posts.map((post) => (
+        <article key={post.id} className="post-card">
+          <div className="post-image">{post.image}</div>
+          <div className="post-content">
+            <span className="post-category">{post.category}</span>
+            <h2 className="post-title">{post.title}</h2>
+            <p className="post-excerpt">{post.excerpt}</p>
+            <div className="post-meta">
+              <span className="post-author">By {post.author}</span>
+              <span className="post-date">{post.date}</span>
+              <span className="post-read-time">{post.readTime} read</span>
+            </div>
+          </div>
+        </article>
+      ))}
+    </main>
+  );
+}

package/templates/overlays/crm/react/src/App.css ADDED Viewed

@@ -0,0 +1,48 @@
+.crm { display: flex; min-height: 100vh; }
+.sidebar { width: 240px; background: #111827; color: white; padding: 1.5rem; flex-shrink: 0; }
+.sidebar-logo { font-size: 1.25rem; font-weight: 700; padding: 0.5rem 0.75rem; margin-bottom: 2rem; color: #4f46e5; }
+.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }
+.sidebar-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem; border-radius: 8px; color: #9ca3af; text-decoration: none; transition: all 0.15s; }
+.sidebar-item:hover { background: #1f2937; color: white; }
+.sidebar-item.active { background: #4f46e5; color: white; }
+.crm-main { flex: 1; background: #f9fafb; padding: 2rem; overflow-y: auto; }
+.crm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
+.crm-header h1 { font-size: 1.75rem; font-weight: 700; color: #111827; margin: 0; }
+.btn-primary { background: #4f46e5; color: white; border: none; padding: 0.6rem 1.25rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; }
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
+.stat-card { background: white; border-radius: 12px; padding: 1.25rem; border: 1px solid #e5e7eb; position: relative; overflow: hidden; }
+.stat-indicator { position: absolute; top: 0; left: 0; width: 4px; height: 100%; }
+.stat-label { font-size: 0.8rem; color: #6b7280; }
+.stat-value { font-size: 1.75rem; font-weight: 700; color: #111827; }
+.filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
+.filter-btn { background: white; border: 1px solid #d1d5db; padding: 0.4rem 1rem; border-radius: 20px; cursor: pointer; font-size: 0.85rem; color: #6b7280; transition: all 0.15s; }
+.filter-btn:hover { border-color: #4f46e5; color: #4f46e5; }
+.filter-btn.active { background: #4f46e5; color: white; border-color: #4f46e5; }
+.table-card { background: white; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; }
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table th { text-align: left; padding: 0.75rem 1.25rem; font-size: 0.8rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
+.data-table td { padding: 0.75rem 1.25rem; border-bottom: 1px solid #f3f4f6; font-size: 0.9rem; }
+.contact-name { font-weight: 600; color: #111827; }
+.contact-email { color: #6b7280; }
+.contact-value { font-weight: 600; color: #111827; }
+.contact-time { color: #9ca3af; font-size: 0.85rem; }
+.status-badge { padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
+.status-lead { background: #fef3c7; color: #92400e; }
+.status-prospect { background: #dbeafe; color: #1e40af; }
+.status-customer { background: #d1fae5; color: #065f46; }
+.status-churned { background: #fee2e2; color: #991b1b; }
+@media (max-width: 768px) { .crm { flex-direction: column; } .sidebar { width: 100%; } }
+@media (prefers-color-scheme: dark) {
+  .crm-main { background: #0f172a; }
+  .crm-header h1, .stat-value, .contact-name, .contact-value { color: white; }
+  .stat-card, .table-card { background: #1e293b; border-color: #334155; }
+  .data-table th { background: #1e293b; border-color: #334155; color: #94a3b8; }
+  .data-table td { border-color: #334155; color: #cbd5e1; }
+  .filter-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
+}