ntc-dev-kit 1.0.0__py3-none-any.whl

ntc/templates/react_admin/src/index.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+* {
+  box-sizing: border-box;
+}

ntc/templates/react_admin/src/layouts/AuthLayout.tsx

@@ -0,0 +1,23 @@
+import { Outlet, Navigate, useLocation } from 'react-router-dom'
+import { useAuth } from '@/context/AuthContext'
+
+export function AuthLayout() {
+  const { authStatus } = useAuth()
+  const location = useLocation()
+
+  if (authStatus === 'loading') return null
+
+  if (authStatus === 'authenticated') {
+    const from = (location.state as { from?: { pathname?: string } } | null)?.from
+    const redirectTo = from?.pathname || '/'
+    return <Navigate to={redirectTo} replace />
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="w-full max-w-md">
+        <Outlet />
+      </div>
+    </div>
+  )
+}

ntc/templates/react_admin/src/layouts/DashboardLayout.tsx

@@ -0,0 +1,24 @@
+import { Outlet } from 'react-router-dom'
+import { Sidebar } from '@/components/Sidebar'
+import { TopNav } from '@/components/TopNav'
+import { useWorkspace } from '@/context/WorkspaceContext'
+
+export function DashboardLayout() {
+  const { sidebarCollapsed } = useWorkspace()
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-gray-100">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <TopNav />
+        <main
+          className={`relative flex-1 overflow-y-auto p-6 transition-all duration-300 ${
+            sidebarCollapsed ? 'ml-[72px]' : 'ml-[260px]'
+          }`}
+        >
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

ntc/templates/react_admin/src/main.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(<App />)

ntc/templates/react_admin/src/pages/DashboardPage.tsx

@@ -0,0 +1,10 @@
+export function DashboardPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h1>
+      <div className="bg-white rounded-lg shadow p-6">
+        <p className="text-gray-600">Welcome to the admin dashboard!</p>
+      </div>
+    </div>
+  )
+}

ntc/templates/react_admin/src/pages/auth/LoginPage.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { useAuth } from '@/context/AuthContext'
+
+export function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { login } = useAuth()
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      await login(email, password)
+      navigate('/')
+    } catch (err: any) {
+      setError(err.message || 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-8">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">Login</h1>
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-600 rounded">
+          {error}
+        </div>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            Password
+          </label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+        >
+          {loading ? 'Loading...' : 'Login'}
+        </button>
+      </form>
+      <p className="mt-4 text-center text-sm text-gray-600">
+        Don't have an account?{' '}
+        <Link to="/auth/register" className="text-blue-600 hover:underline">
+          Register
+        </Link>
+      </p>
+    </div>
+  )
+}

ntc/templates/react_admin/src/pages/auth/RegisterPage.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { useAuth } from '@/context/AuthContext'
+
+export function RegisterPage() {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { register } = useAuth()
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      await register(name, email, password)
+      navigate('/')
+    } catch (err: any) {
+      setError(err.message || 'Registration failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-8">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">Register</h1>
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-600 rounded">
+          {error}
+        </div>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+            Name
+          </label>
+          <input
+            type="text"
+            id="name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            Password
+          </label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+        >
+          {loading ? 'Loading...' : 'Register'}
+        </button>
+      </form>
+      <p className="mt-4 text-center text-sm text-gray-600">
+        Already have an account?{' '}
+        <Link to="/auth/login" className="text-blue-600 hover:underline">
+          Login
+        </Link>
+      </p>
+    </div>
+  )
+}

ntc/templates/react_admin/src/services/api.service.ts

@@ -0,0 +1,44 @@
+import type { AxiosInstance } from 'axios'
+import { get, post, put, patch, del, upload } from './base.service'
+
+export interface User {
+  id: string
+  name: string
+  email: string
+  avatar?: string | null
+  role?: string
+  created_at: string
+}
+
+export interface AuthResult {
+  access: string
+  refresh: string
+  user: User
+}
+
+export const authEndpoints = {
+  login: async (instance: AxiosInstance, email: string, password: string): Promise<AuthResult> => {
+    return post(instance, '/auth/login/', { email, password })
+  },
+  register: async (instance: AxiosInstance, name: string, email: string, password: string): Promise<AuthResult> => {
+    return post(instance, '/auth/register/', { name, email, password })
+  },
+  logout: async (instance: AxiosInstance): Promise<void> => {
+    return post(instance, '/auth/logout/')
+  },
+  refreshToken: async (instance: AxiosInstance): Promise<{ access: string }> => {
+    return post(instance, '/auth/refresh/')
+  },
+  verifyOTP: async (instance: AxiosInstance, email: string, code: string): Promise<AuthResult> => {
+    return post(instance, '/auth/verify-otp/', { email, code })
+  },
+}
+
+export const userEndpoints = {
+  getMe: async (instance: AxiosInstance): Promise<User> => {
+    return get(instance, '/users/me/')
+  },
+  updateProfile: async (instance: AxiosInstance, data: Partial<User>): Promise<User> => {
+    return patch(instance, '/users/me/', data)
+  },
+}

ntc/templates/react_admin/src/services/base.service.ts

@@ -0,0 +1,193 @@
+import axios from 'axios'
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
+
+/**
+ * Determines the API base URL based on the current environment.
+ */
+function resolveBaseUrl(): string {
+  const envOverride = import.meta.env.VITE_API_BASE_URL
+  if (envOverride) return envOverride
+
+  const hostname = window.location.hostname
+
+  if (hostname === 'localhost' || hostname === '127.0.0.1') {
+    return 'http://127.0.0.1:8000/v1'
+  }
+
+  return 'https://api.{project_name}.com/v1'
+}
+
+export const BASE_URL = resolveBaseUrl()
+
+/**
+ * Base Axios instance shared across all service layers.
+ */
+export const baseAxios: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+})
+
+/**
+ * Axios instance for authentication endpoints.
+ */
+export const authAxios: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+})
+
+export type ApiResponse<T> = {
+  data: T
+  message?: string
+  status: number
+}
+
+export type ApiError = {
+  message: string
+  status: number
+  errors?: Record<string, string[]>
+}
+
+function humanizeFieldName(field: string): string {
+  return field
+    .split('.')
+    .at(-1)
+    ?.replace(/_/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase()) ?? field
+}
+
+function getPrimaryValidationMessage(
+  errors?: Record<string, string[]>,
+): string | null {
+  if (!errors) return null
+
+  for (const [field, messages] of Object.entries(errors)) {
+    const firstMessage = messages.find(Boolean)
+    if (firstMessage) {
+      return `${humanizeFieldName(field)}: ${firstMessage}`
+    }
+  }
+
+  return null
+}
+
+/**
+ * Extracts a normalized ApiError from an Axios error response.
+ */
+export function extractApiError(error: unknown): ApiError {
+  if (axios.isAxiosError(error)) {
+    const data = error.response?.data
+    const validationMessage = getPrimaryValidationMessage(data?.errors)
+    const rawMessage = data?.message || error.message || 'An unexpected error occurred'
+    const message =
+      rawMessage === 'Validation error' && validationMessage
+        ? validationMessage
+        : rawMessage
+
+    return {
+      message,
+      status: error.response?.status || 500,
+      errors: data?.errors,
+    }
+  }
+  return {
+    message: error instanceof Error ? error.message : 'An unexpected error occurred',
+    status: 500,
+  }
+}
+
+/**
+ * Extracts a human-readable error message string from an unknown error.
+ */
+export function extractErrorMessage(error: unknown, fallback = 'An unexpected error occurred'): string {
+  return extractApiError(error).message || fallback
+}
+
+/**
+ * Generic GET helper.
+ */
+export async function get<T>(
+  instance: AxiosInstance,
+  url: string,
+  config?: AxiosRequestConfig,
+): Promise<T> {
+  const response: AxiosResponse<ApiResponse<T>> = await instance.get(url, config)
+  return response.data.data
+}
+
+/**
+ * Generic POST helper.
+ */
+export async function post<T>(
+  instance: AxiosInstance,
+  url: string,
+  data?: unknown,
+  config?: AxiosRequestConfig,
+): Promise<T> {
+  const response: AxiosResponse<ApiResponse<T>> = await instance.post(url, data, config)
+  return response.data.data
+}
+
+/**
+ * Generic PUT helper.
+ */
+export async function put<T>(
+  instance: AxiosInstance,
+  url: string,
+  data?: unknown,
+  config?: AxiosRequestConfig,
+): Promise<T> {
+  const response: AxiosResponse<ApiResponse<T>> = await instance.put(url, data, config)
+  return response.data.data
+}
+
+/**
+ * Generic PATCH helper.
+ */
+export async function patch<T>(
+  instance: AxiosInstance,
+  url: string,
+  data?: unknown,
+  config?: AxiosRequestConfig,
+): Promise<T> {
+  const response: AxiosResponse<ApiResponse<T>> = await instance.patch(url, data, config)
+  return response.data.data
+}
+
+/**
+ * Generic DELETE helper.
+ */
+export async function del<T>(
+  instance: AxiosInstance,
+  url: string,
+  config?: AxiosRequestConfig,
+): Promise<T> {
+  const response: AxiosResponse<ApiResponse<T>> = await instance.delete(url, config)
+  return response.data.data
+}
+
+/**
+ * Multipart form-data POST (for file uploads).
+ */
+export async function upload<T>(
+  instance: AxiosInstance,
+  url: string,
+  formData: FormData,
+  config?: AxiosRequestConfig,
+): Promise<T> {
+  const response: AxiosResponse<ApiResponse<T>> = await instance.post(url, formData, {
+    ...config,
+    headers: {
+      ...config?.headers,
+      'Content-Type': 'multipart/form-data',
+    },
+  })
+  return response.data.data
+}

ntc/templates/react_admin/structure.json

@@ -0,0 +1,52 @@
+{
+  "{project_name}": {
+    "package.json": { "template": "react_admin/package.json" },
+    ".gitignore": "node_modules/\ndist/\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.DS_Store\n",
+    "README.md": "# {project_name} Admin Dashboard\n\nA React + TypeScript + Vite admin dashboard initialized by `ntc react init`.\n\n## Tech Stack\n\n- React 19\n- TypeScript\n- Vite 8\n- Tailwind CSS 4\n- React Router 7\n- TanStack Query\n- Axios\n- Lucide React\n\n## Getting Started\n\n```bash\nnpm install\nnpm run dev\n```\n\n## Available Scripts\n\n- `npm run dev` - Runs the app in development mode\n- `npm run build` - Builds the app for production\n- `npm run lint` - Runs ESLint\n- `npm run preview` - Previews the production build\n",
+    "index.html": { "template": "react_admin/index.html" },
+    "vite.config.ts": { "template": "react_admin/vite.config.ts" },
+    "tsconfig.json": { "template": "react_admin/tsconfig.json" },
+    "tsconfig.app.json": { "template": "react_admin/tsconfig.app.json" },
+    "tsconfig.node.json": { "template": "react_admin/tsconfig.node.json" },
+    ".env.example": "VITE_API_BASE_URL=http://localhost:8000/v1\n",
+    "CLAUDE.md": { "template": "react_admin/CLAUDE.md" },
+    ".knowledge": {
+      "knowledge_structure.md": { "template": "react_admin/knowledge/knowledge_structure.md" },
+      "knowledge_description.md": { "template": "react_admin/knowledge/knowledge_description.md" },
+      "knowledge_design_pattern.md": { "template": "react_admin/knowledge/knowledge_design_pattern.md" }
+    },
+    "src": {
+      "main.tsx": { "template": "react_admin/src/main.tsx" },
+      "index.css": { "template": "react_admin/src/index.css" },
+      "App.tsx": { "template": "react_admin/src/App.tsx" },
+      "services": {
+        "base.service.ts": { "template": "react_admin/src/services/base.service.ts" },
+        "api.service.ts": { "template": "react_admin/src/services/api.service.ts" }
+      },
+      "context": {
+        "AuthContext.tsx": { "template": "react_admin/src/context/AuthContext.tsx" },
+        "ThemeContext.tsx": { "template": "react_admin/src/context/ThemeContext.tsx" },
+        "WorkspaceContext.tsx": { "template": "react_admin/src/context/WorkspaceContext.tsx" }
+      },
+      "layouts": {
+        "DashboardLayout.tsx": { "template": "react_admin/src/layouts/DashboardLayout.tsx" },
+        "AuthLayout.tsx": { "template": "react_admin/src/layouts/AuthLayout.tsx" }
+      },
+      "components": {
+        "ProtectedRoute.tsx": { "template": "react_admin/src/components/ProtectedRoute.tsx" },
+        "Sidebar.tsx": { "template": "react_admin/src/components/Sidebar.tsx" },
+        "TopNav.tsx": { "template": "react_admin/src/components/TopNav.tsx" }
+      },
+      "pages": {
+        "DashboardPage.tsx": { "template": "react_admin/src/pages/DashboardPage.tsx" },
+        "auth": {
+          "LoginPage.tsx": { "template": "react_admin/src/pages/auth/LoginPage.tsx" },
+          "RegisterPage.tsx": { "template": "react_admin/src/pages/auth/RegisterPage.tsx" }
+        }
+      },
+      "hooks": {
+        "useApi.ts": { "template": "react_admin/src/hooks/useApi.ts" }
+      }
+    }
+  }
+}

ntc/templates/react_admin/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

ntc/templates/react_admin/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

ntc/templates/react_admin/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

ntc/templates/react_admin/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})