nsgm-cli 2.1.13 → 2.1.14

package/README.md

@@ -1,237 +1,452 @@
 # NSGM CLI
 
-A full-stack development framework with code template generation capabilities, helping developers efficiently build web applications.
+<div align="center">
 
-## Tech Stack
+![NSGM CLI](https://img.shields.io/npm/v/nsgm-cli?style=flat-square&logo=npm)
+![License](https://img.shields.io/github/license/erishen/nsgm?style=flat-square)
+![Node.js](https://img.shields.io/node/v/nsgm-cli?style=flat-square&logo=node.js)
+![Downloads](https://img.shields.io/npm/dm/nsgm-cli?style=flat-square)
 
-- [Next.js](https://github.com/vercel/next.js) - React framework
-- [Styled-components](https://github.com/styled-components/styled-components) - CSS-in-JS solution
-- [GraphQL](https://graphql.org/) - API query language
-- [MySQL](https://www.mysql.com/) - Relational database
+**A powerful full-stack development framework with intelligent code generation**
+
+[Installation](#installation) • [Quick Start](#quick-start) • [Features](#features) • [Documentation](#documentation) • [Contributing](#contributing)
+
+</div>
 
-## Features
+## 🚀 Overview
 
-- Full-stack architecture design
-- Automatic code template generation
-- Rapid development workflow
-- Integrated GraphQL API
-- MySQL database support
-- Secure login system with bcrypt encryption
+NSGM CLI is a comprehensive full-stack development framework that combines the power of modern web technologies with intelligent code generation capabilities. It helps developers rapidly build scalable web applications through an interactive CLI wizard and automated code templates.
 
-## Command Line Tools
+### 🏗️ Architecture
 
-### Basic Commands
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Frontend      │    │   Backend       │    │   Database      │
+│   Next.js       │◄──►│   Express.js    │◄──►│   MySQL         │
+│   React         │    │   GraphQL       │    │   Native SQL    │
+│   Styled-Comp   │    │   REST API      │    │   Relations     │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+```
 
-| Command         | Description                             |
-| --------------- | --------------------------------------- |
-| `nsgm init`     | Initialize project                      |
-| `nsgm upgrade`  | Upgrade project base files              |
-| `nsgm create`   | Create template page                    |
-| `nsgm delete`   | Delete template page                    |
-| `nsgm deletedb` | Delete template page and database table |
-| `nsgm dev`      | Development mode                        |
-| `nsgm start`    | Production mode                         |
-| `nsgm build`    | Build project                           |
-| `nsgm export`   | Export static pages                     |
+## 🎯 Key Features
 
-### Parameter Description
+### 🧙‍♂️ **Intelligent CLI Wizard**
+- **Smart Mode Detection**: Automatically switches between interactive and command-line modes
+- **Beginner-Friendly**: Step-by-step guided setup for newcomers
+- **Expert-Efficient**: Quick command-line shortcuts for experienced developers
 
-- **dictionary**: Used with `export`/`init` commands, default value is `webapp`
+### ⚡ **Rapid Development**
+- **Code Generation**: Automatic CRUD operations, API endpoints, and database schemas
+- **Hot Reload**: Instant development feedback
+- **Type Safety**: Full TypeScript support throughout the stack
 
-  ```
-  nsgm init dictionary=webapp
-  # or simplified as
-  nsgm init webapp
-  ```
+### 🔒 **Production-Ready Security**
+- **CSRF Protection**: Built-in cross-site request forgery prevention
+- **Password Encryption**: bcrypt-based secure authentication
+- **Session Management**: Robust user session handling
+- **CSP Headers**: Content Security Policy implementation
 
-- **controller**: Used with `create`/`delete` commands, required parameter
+### 🏗️ **Modern Tech Stack**
+- **Frontend**: Next.js 13+, React 18+, Styled-components, Redux Toolkit
+- **Backend**: Express.js, GraphQL, REST APIs
+- **Database**: MySQL with native drivers
+- **DevTools**: TypeScript, ESLint, Prettier, Jest
 
-  ```
-  nsgm create math
-  ```
+## 📦 Installation
 
-- **action**: Used with `create`/`delete` commands, default value is `manage`, follows the controller
-  ```
-  nsgm create math test
-  ```
+### Global Installation (Recommended)
 
-## Security Configuration
+```bash
+# Using npm
+npm install -g nsgm-cli
 
-For security setup and login configuration, please refer to [SECURITY.md](./SECURITY.md).
+# Using yarn
+yarn global add nsgm-cli
 
-### Quick Setup
+# Using pnpm
+pnpm add -g nsgm-cli
+```
 
-1. Generate password hash:
+### Verify Installation
 
-   ```bash
-   # Using npm script
-   npm run generate-password yourSecurePassword
-   ```
+```bash
+nsgm --version
+# Should output: 2.1.13
+```
 
-2. Create `.env` file:
+## 🚀 Quick Start
 
-   ```bash
-   LOGIN_USERNAME=admin
-   LOGIN_PASSWORD_HASH=your_generated_hash_here
-   ```
+### 1. Initialize Your First Project
 
-3. Make sure `.env` is in your `.gitignore` file.
+```bash
+# Start the interactive wizard (recommended for beginners)
+nsgm init
 
-**⚠️ Important:** Never commit passwords or `.env` files to version control.
+# Or specify project name directly
+nsgm init my-awesome-app
+```
 
-## Project Configuration
+The wizard will guide you through:
+- ✅ Project name and directory
+- ✅ Database configuration
+- ✅ Security settings
+- ✅ Initial controller setup
 
-### next.config.js
+### 2. Environment Setup
 
-```javascript
-const { nextConfig } = require('nsgm-cli')
-const projectConfig = require('./project.config')
+```bash
+cd your-project-name
 
-const { version, prefix, protocol, host } = projectConfig
+# Copy environment template
+cp .env.example .env
 
-module.exports = (phase, defaultConfig) => {
-  let configObj = nextConfig(phase, defaultConfig, {
-    version,
-    prefix,
-    protocol,
-    host
-  })
+# Generate secure password hash
+npm run generate-password your-secure-password
 
-  return configObj
-}
+# Edit .env file with generated hash
+nano .env
 ```
 
-### mysql.config.js
+### 3. Start Development
 
-```javascript
-const { mysqlConfig } = require('nsgm-cli')
-const { mysqlOptions } = mysqlConfig
-const { user, password, host, port, database } = mysqlOptions
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Your application will be available at `http://localhost:3000` with:
+- 🎛️ Admin dashboard with CRUD interface
+- 📊 Data import/export functionality
+- 🗑️ Batch operations support
+- 🔐 Secure login system
+
+## 🛠️ CLI Commands
+
+### Core Commands
+
+| Command | Description | Mode | Example |
+|---------|-------------|------|---------|
+| `nsgm init` | Initialize new project | Interactive/CLI | `nsgm init blog-app` |
+| `nsgm create` | Generate controller with CRUD | Interactive/CLI | `nsgm create user` |
+| `nsgm delete` | Remove controller and files | Interactive/CLI | `nsgm delete product` |
+| `nsgm dev` | Start development server | CLI | `nsgm dev` |
+| `nsgm build` | Build for production | CLI | `nsgm build` |
+| `nsgm start` | Start production server | CLI | `nsgm start` |
+
+### Advanced Commands
+
+```bash
+# Database operations
+nsgm deletedb user           # Delete controller + database table
+
+# Project maintenance
+nsgm upgrade                 # Upgrade project base files
+nsgm export                  # Export static pages
+
+# Development tools
+npm run lint                 # Code linting
+npm run test                 # Run tests
+npm run test:coverage        # Test coverage report
+```
+
+## 🎨 Generated Controller Features
 
+Each controller created with `nsgm create` includes:
+
+### 🔧 **Backend Components**
+- **GraphQL Schema**: Typed queries and mutations
+- **GraphQL Resolvers**: Business logic implementation
+- **REST API Endpoints**: RESTful service layer
+- **Database Models**: MySQL schema definitions
+- **Data Validation**: Input sanitization and validation
+
+### 🎯 **Frontend Components**
+- **React Components**: Modern functional components with hooks
+- **Styled Components**: CSS-in-JS styling
+- **Redux Integration**: State management
+- **Form Handling**: Create, edit, and validation forms
+- **Data Tables**: Sortable, filterable data grids
+
+### 📊 **CRUD Operations**
+- **Create**: Add new records with validation
+- **Read**: List, search, and pagination
+- **Update**: Edit existing records
+- **Delete**: Single and batch deletion
+- **Import/Export**: CSV and JSON data handling
+
+## 🏗️ Project Structure
+
+```
+your-project/
+├── client/                 # Frontend code
+│   ├── components/         # React components
+│   ├── layout/            # Layout components
+│   ├── redux/             # State management
+│   ├── service/           # API services
+│   ├── styled/            # Styled components
+│   └── utils/             # Utility functions
+├── server/                # Backend code
+│   ├── apis/              # REST API routes
+│   ├── modules/           # GraphQL modules
+│   ├── sql/               # Database scripts
+│   └── utils/             # Server utilities
+├── pages/                 # Next.js pages
+├── public/                # Static assets
+├── scripts/               # Build and deployment scripts
+├── __tests__/             # Test files
+├── .env.example           # Environment template
+├── next.config.js         # Next.js configuration
+├── mysql.config.js        # Database configuration
+└── package.json           # Dependencies
+```
+
+## ⚙️ Configuration
+
+### Environment Variables
+
+```bash
+# .env file
+NODE_ENV=development
+LOGIN_USERNAME=admin
+LOGIN_PASSWORD_HASH=your_generated_hash
+DATABASE_URL=mysql://user:password@localhost:3306/dbname
+
+# Optional
+PORT=3000
+NEXT_PUBLIC_API_URL=http://localhost:3000
+```
+
+### Database Configuration
+
+```javascript
+// mysql.config.js
 module.exports = {
   mysqlOptions: {
-    user,
-    password,
-    host,
-    port,
-    database
+    host: process.env.DB_HOST || 'localhost',
+    port: process.env.DB_PORT || 3306,
+    user: process.env.DB_USER || 'root',
+    password: process.env.DB_PASSWORD || '',
+    database: process.env.DB_NAME || 'nsgm_db'
   }
 }
 ```
 
-### project.config.js
+## 🔒 Security Setup
 
-```javascript
-const { projectConfig } = require('nsgm-cli')
-const pkg = require('./package.json')
+### Password Generation
 
-const { prefix, protocol, host, port } = projectConfig
-const { version } = pkg
+```bash
+# Generate secure hash
+npm run generate-password your-secure-password
 
-module.exports = {
-  version,
-  prefix,
-  protocol,
-  host,
-  port
-}
+# Add to .env file
+LOGIN_PASSWORD_HASH=your_generated_hash_here
 ```
 
-## Server Directory Structure
+### CSRF Protection
 
-The `server` folder in the project root contains the following:
+NSGM CLI includes built-in CSRF protection:
 
-### Directory Description
+```javascript
+// Automatic CSRF token generation
+app.use(csrfProtection)
+
+// Custom CSP headers
+app.use(createCSPMiddleware({
+  directives: {
+    defaultSrc: ["'self'"],
+    styleSrc: ["'self'", "'unsafe-inline'"],
+    scriptSrc: ["'self'"]
+  }
+}))
+```
 
-- `apis/` - Stores REST API interfaces
-- `modules/` - Stores GraphQL resolvers and schemas
-- `plugins/` - Stores GraphQL plugins
-- `*.js` - Route files
+## 🧪 Testing
 
-### Example Code
+```bash
+# Run all tests
+npm test
 
-#### Route File Example (server/csrf-test.js)
+# Watch mode
+npm run test:watch
 
-```javascript
-const express = require('express')
-const moment = require('moment')
+# Coverage report
+npm run test:coverage
 
-const router = express.Router()
+# Lint code
+npm run lint
 
-router.use((req, res, next) => {
-  const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl
-  console.log(moment().format('YYYY-MM-DD HH:mm:ss') + ' ' + fullUrl)
-  next()
-})
+# Format code
+npm run format
+```
 
-router.get('/*', (req, res) => {
-  res.statusCode = 200
-  res.json({ name: 'TEST' })
-})
+## 📚 Examples
 
-module.exports = router
+### Creating a Blog System
+
+```bash
+# 1. Initialize project
+nsgm init my-blog
+
+# 2. Create controllers
+cd my-blog
+nsgm create post
+nsgm create category
+nsgm create user
+
+# 3. Start development
+npm run dev
 ```
 
-#### REST API Example (server/apis/hello.js)
+### Adding Custom API Endpoint
 
 ```javascript
+// server/apis/custom.js
 const express = require('express')
 const router = express.Router()
 
-router.get('/*', (req, res) => {
-  res.statusCode = 200
-  res.json({ name: 'Hello' })
+router.get('/stats', (req, res) => {
+  res.json({
+    totalPosts: 42,
+    totalUsers: 15,
+    lastUpdate: new Date()
+  })
 })
 
 module.exports = router
 ```
 
-#### GraphQL Schema Example (server/modules/link/schema.js)
+### Custom GraphQL Schema
 
 ```javascript
+// server/modules/blog/schema.js
 module.exports = {
   query: `
-        link: String
-    `,
+    posts(limit: Int, offset: Int): [Post]
+    post(id: ID!): Post
+  `,
   mutation: `
-        linkUpdate(link: Date): String
-    `,
-  subscription: ``,
-  type: ``
+    createPost(title: String!, content: String!): Post
+    updatePost(id: ID!, title: String, content: String): Post
+    deletePost(id: ID!): Boolean
+  `,
+  type: `
+    type Post {
+      id: ID!
+      title: String!
+      content: String!
+      createdAt: Date!
+      updatedAt: Date!
+    }
+  `
 }
 ```
 
-#### GraphQL Resolver Example (server/modules/link/resolver.js)
+## 🚀 Performance & Production
 
-```javascript
-let localLink = ''
+### Build Optimization
 
-module.exports = {
-  link: () => {
-    return localLink
-  },
-  linkUpdate: ({ link }) => {
-    console.log('link', link)
-    localLink = link
-    return localLink
-  }
-}
+```bash
+# Production build
+npm run build
+
+# Analyze bundle size
+npm run analyze
+
+# Export static site
+npm run export
 ```
 
-#### GraphQL Plugin Example (server/plugins/date.js)
+### Production Deployment
 
-```javascript
-const moment = require('moment')
-const { Kind } = require('graphql/language')
-const { GraphQLScalarType } = require('graphql')
-
-const customScalarDate = new GraphQLScalarType({
-  name: 'Date',
-  description: 'Date custom scalar type',
-  parseValue: (value) => moment(value).valueOf(),
-  serialize: (value) => moment(value).format('YYYY-MM-DD HH:mm:ss:SSS'),
-  parseLiteral: (ast) => (ast.kind === Kind.INT ? parseInt(ast.value, 10) : null)
-})
+```bash
+# Start production server
+npm start
+
+# Or use PM2
+pm2 start npm --name "nsgm-app" -- start
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+### Development Setup
+
+```bash
+# Clone repository
+git clone https://github.com/erishen/nsgm.git
+cd nsgm
+
+# Install dependencies
+npm install
+
+# Run tests
+npm test
 
-module.exports = { Date: customScalarDate }
+# Build CLI
+npm run tsbuild
 ```
+
+## 📖 Documentation
+
+- [Security Guide](SECURITY.md) - Security best practices
+- [API Reference](docs/api.md) - Complete API documentation
+- [Migration Guide](docs/migration.md) - Upgrade instructions
+- [Troubleshooting](docs/troubleshooting.md) - Common issues and solutions
+
+## 🐛 Troubleshooting
+
+### Common Issues
+
+**Port already in use**
+```bash
+# Kill process on port 3000
+lsof -ti:3000 | xargs kill -9
+
+# Or use different port
+PORT=3001 npm run dev
+```
+
+**Database connection failed**
+```bash
+# Check MySQL service
+sudo systemctl status mysql
+
+# Verify credentials in .env
+cat .env | grep DB_
+```
+
+**Permission denied**
+```bash
+# Fix npm permissions
+sudo chown -R $(whoami) ~/.npm
+
+# Or use different install location
+npm config set prefix '~/.local'
+```
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- [Next.js](https://nextjs.org/) - React framework
+- [GraphQL](https://graphql.org/) - Query language
+- [Styled Components](https://styled-components.com/) - CSS-in-JS
+- [MySQL](https://www.mysql.com/) - Relational database
+
+---
+
+<div align="center">
+
+**Made with ❤️ by the NSGM Team**
+
+[GitHub](https://github.com/erishen/nsgm) • [npm](https://www.npmjs.com/package/nsgm-cli) • [Issues](https://github.com/erishen/nsgm/issues)
+
+</div>
+

package/client/components/Button.tsx

@@ -1,8 +1,6 @@
 // src/components/Button.js
-import React from 'react';
+import React from 'react'
 
-const Button = ({ onClick, children }) => (
-  <button onClick={onClick}>{children}</button>
-);
+const Button = ({ onClick, children }) => <button onClick={onClick}>{children}</button>
 
-export default Button;
+export default Button

package/client/components/__tests__/Button.test.tsx

@@ -1,15 +1,15 @@
 // src/components/Button.test.js
-import { render, screen, fireEvent } from '@testing-library/react';
-import Button from '../Button';
+import { render, screen, fireEvent } from '@testing-library/react'
+import Button from '../Button'
 
 test('renders button with text', () => {
-  render(<Button>Click me</Button>);
-  expect(screen.getByText('Click me')).toBeInTheDocument();
-});
+  render(<Button>Click me</Button>)
+  expect(screen.getByText('Click me')).toBeInTheDocument()
+})
 
 test('calls onClick when clicked', () => {
-  const handleClick = jest.fn();
-  render(<Button onClick={handleClick}>Click me</Button>);
-  fireEvent.click(screen.getByText('Click me'));
-  expect(handleClick).toHaveBeenCalledTimes(1);
-});
+  const handleClick = jest.fn()
+  render(<Button onClick={handleClick}>Click me</Button>)
+  fireEvent.click(screen.getByText('Click me'))
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})