initrajs/dist/src/templates/page-templates.js

⚡ InitraJS - JavaScript CLI Toolkit | Lightning-fast scaffolding for React, Next.js, Node.js with TypeScript | The future of JavaScript development | 10x faster than create-react-app | Ultimate developer productivity tool

// src/templates/page-templates.ts
// React Page Templates (for regular React apps)
export const reactPageTemplate = (options) => {
    const { name, typescript, includeCss } = options;
    const cssImport = includeCss ? `import './${name}Page.scss';` : '';
    const cssClass = includeCss ? ` className="${name.toLowerCase()}-page"` : '';
    if (typescript) {
        return `import React from 'react';
${cssImport}

interface ${name}PageProps {
  // Add your props here
}

const ${name}Page: React.FC<${name}PageProps> = () => {
  return (
    <div${cssClass}>
      <div className="container">
        <header className="page-header">
          <h1>${name} Page</h1>
        </header>
        
        <main className="page-content">
          <section className="hero-section">
            <h2>Welcome to ${name}</h2>
            <p>This is your ${name.toLowerCase()} page content.</p>
          </section>
          
          <section className="content-section">
            {/* Add your content here */}
          </section>
        </main>
      </div>
    </div>
  );
};

export default ${name}Page;`;
    }
    else {
        return `import React from 'react';
${cssImport}

const ${name}Page = () => {
  return (
    <div${cssClass}>
      <div className="container">
        <header className="page-header">
          <h1>${name} Page</h1>
        </header>
        
        <main className="page-content">
          <section className="hero-section">
            <h2>Welcome to ${name}</h2>
            <p>This is your ${name.toLowerCase()} page content.</p>
          </section>
          
          <section className="content-section">
            {/* Add your content here */}
          </section>
        </main>
      </div>
    </div>
  );
};

export default ${name}Page;`;
    }
};
// Next.js Page Templates
export const nextPageTemplate = (options) => {
    const { name, typescript, includeCss } = options;
    const cssImport = includeCss ? `import './${name.toLowerCase()}.scss';` : '';
    const cssClass = includeCss ? ` className="${name.toLowerCase()}-page"` : '';
    if (typescript) {
        return `import { Metadata } from 'next';
${cssImport}

export const metadata: Metadata = {
  title: '${name} | Your App',
  description: '${name} page description',
};

interface ${name}PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}

export default function ${name}Page({ params, searchParams }: ${name}PageProps) {
  return (
    <div${cssClass}>
      <div className="container">
        <header className="page-header">
          <h1>${name} Page</h1>
        </header>
        
        <main className="page-content">
          <section className="hero-section">
            <h2>Welcome to ${name}</h2>
            <p>This is your ${name.toLowerCase()} page content.</p>
          </section>
          
          <section className="content-section">
            {/* Add your content here */}
          </section>
        </main>
      </div>
    </div>
  );
}`;
    }
    else {
        return `${cssImport}

export const metadata = {
  title: '${name} | Your App',
  description: '${name} page description',
};

export default function ${name}Page({ params, searchParams }) {
  return (
    <div${cssClass}>
      <div className="container">
        <header className="page-header">
          <h1>${name} Page</h1>
        </header>
        
        <main className="page-content">
          <section className="hero-section">
            <h2>Welcome to ${name}</h2>
            <p>This is your ${name.toLowerCase()} page content.</p>
          </section>
          
          <section className="content-section">
            {/* Add your content here */}
          </section>
        </main>
      </div>
    </div>
  );
}`;
    }
};
// Next.js Layout Template
export const nextLayoutTemplate = (options) => {
    const { name, typescript } = options;
    if (typescript) {
        return `import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: '${name} App',
  description: 'Generated by InitraJS',
};

interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="app-wrapper">
          <nav className="main-nav">
            {/* Navigation content */}
          </nav>
          <main className="main-content">
            {children}
          </main>
          <footer className="main-footer">
            {/* Footer content */}
          </footer>
        </div>
      </body>
    </html>
  );
}`;
    }
    else {
        return `import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: '${name} App',
  description: 'Generated by InitraJS',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="app-wrapper">
          <nav className="main-nav">
            {/* Navigation content */}
          </nav>
          <main className="main-content">
            {children}
          </main>
          <footer className="main-footer">
            {/* Footer content */}
          </footer>
        </div>
      </body>
    </html>
  );
}`;
    }
};
// Simplified Page CSS Template - only main class selector
export const pageScssTemplate = (name) => {
    return `.${name.toLowerCase()}-page {
  
}`;
};
// Page Test Template
export const pageTestTemplate = (name, isTypeScript, isNext) => {
    const importExt = isTypeScript ? '' : '.js';
    const componentName = isNext ? `${name}Page` : `${name}Page`;
    return `import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
${isNext ? `import { jest } from '@jest/globals';` : ''}
import ${componentName} from './${isNext ? 'page' : `${name}Page`}${importExt}';

${isNext ? `// Mock Next.js router
jest.mock('next/navigation', () => ({
  useRouter: () => ({
    push: jest.fn(),
    pathname: '/',
  }),
}));` : ''}

describe('${componentName}', () => {
  it('renders the page title', () => {
    ${isNext ? `render(<${componentName} params={{}} searchParams={{}} />);` : `render(<${componentName} />);`}
    expect(screen.getByText('${name} Page')).toBeInTheDocument();
  });

  it('renders the welcome message', () => {
    ${isNext ? `render(<${componentName} params={{}} searchParams={{}} />);` : `render(<${componentName} />);`}
    expect(screen.getByText('Welcome to ${name}')).toBeInTheDocument();
  });

  it('has correct CSS class', () => {
    const { container } = ${isNext ? `render(<${componentName} params={{}} searchParams={{}} />);` : `render(<${componentName} />);`}
    expect(container.firstChild).toHaveClass('${name.toLowerCase()}-page');
 })
};`;
};