create-content-sdk-app 2.0.0-canary.8 → 2.0.0

package/dist/templates/nextjs/LLMs.txt

@@ -1,179 +1,179 @@
-# Claude/Windsurf Guidance for Sitecore Content SDK Next.js Project
-
-## Project Context
-This is a Sitecore Content SDK application built with Next.js, TypeScript, and React. The project integrates with Sitecore XM Cloud for headless content management and follows modern web development best practices.
-
-## Architecture Overview
-- **Framework**: Next.js with Page Router
-- **Language**: TypeScript with strict mode enabled
-- **CMS**: Sitecore XM Cloud (headless)
-- **SDK**: @sitecore-content-sdk for API integration
-- **Styling**: CSS Modules or Tailwind CSS
-- **State Management**: React Query/SWR for server state
-
-## Development Principles
-
-### Code Organization
-- Use modular, feature-based architecture
-- Separate concerns: components, utilities, types, hooks
-- Follow Next.js Page Router conventions
-- Implement proper error boundaries and loading states
-
-### TypeScript Standards
-- Enable strict mode and strict null checks
-- Use proper type definitions for Sitecore fields and components
-- Prefer type assertions over `any` type
-- Implement discriminated unions for complex state management
-
-### React Patterns
-- Server Components for data fetching and static content
-- Client Components only when interactivity is required
-- Use React.memo for expensive components
-- Implement proper dependency arrays in hooks
-
-## Sitecore Integration Patterns
-
-### Content Fetching
-- Use SitecoreClient for all API calls
-- Implement proper error handling with custom error classes
-- Cache responses using React Query or SWR
-- Handle preview vs. published content scenarios
-
-### Component Development
-- Always use Sitecore field components (Text, RichText, Image)
-- Validate field existence before rendering
-- Handle missing or empty fields gracefully
-- Export components with proper TypeScript interfaces
-
-### Field Handling
-```typescript
-interface ComponentProps {
-  fields: {
-    title: Field;
-    content: Field;
-    image: Field;
-  };
-}
-
-// Always validate fields
-<Text field={fields?.title} tag="h1" />
-<RichText field={fields?.content} />
-<Image field={fields?.image} />
-```
-
-## Performance Best Practices
-
-### Optimization Strategies
-- Use Next.js Image component for optimized images
-- Implement proper loading states and error boundaries
-- Cache expensive operations and API responses
-- Lazy-load non-critical components and modules
-- Leverage server-side rendering for better performance
-
-### Memory Management
-- Clean up subscriptions and event listeners
-- Use useCallback and useMemo appropriately
-- Avoid memory leaks in useEffect hooks
-- Implement proper cleanup in custom hooks
-
-## Security Guidelines
-
-### Input Validation
-- Sanitize all user inputs before processing
-- Validate data at application boundaries
-- Use type guards for runtime type checking
-- Escape content when rendering to prevent XSS
-
-### API Security
-- Use HTTPS for all Sitecore connections
-- Never expose API keys in client-side code
-- Implement proper authentication and authorization
-- Validate all data received from external sources
-
-## Code Quality Standards
-
-### Naming Conventions
-- Variables/Functions: camelCase (getUserData, isLoading)
-- Components: PascalCase (SitecoreComponent, PageLayout)
-- Constants: UPPER_SNAKE_CASE (API_ENDPOINT, MAX_RETRIES)
-- Types/Interfaces: PascalCase (ContentItem, LayoutProps)
-
-### Error Handling
-- Create custom error classes for different error types
-- Implement proper error boundaries in React components
-- Log errors appropriately for debugging
-- Provide fallback content when components fail
-
-### Testing Approach
-- Write testable code with minimal dependencies
-- Mock external services and Sitecore APIs
-- Test component behavior, not implementation details
-- Include tests for error scenarios and edge cases
-
-## Development Workflow
-
-### Environment Setup
-1. Install dependencies: `npm install`
-2. Configure environment variables (copy .env.example to .env.local)
-3. Set up Sitecore API credentials
-4. Start development server: `npm run dev`
-
-### Build Process
-- Use `npm run build` for production builds
-- Enable TypeScript strict mode
-- Run linting and type checking before commits
-
-## Common Patterns and Examples
-
-### Sitecore Component Structure
-```typescript
-interface HeroProps {
-  fields: {
-    title: Field;
-    subtitle: Field;
-    backgroundImage: Field;
-  };
-}
-
-export default function Hero({ fields }: HeroProps) {
-  return (
-    <section className="hero">
-      <Text field={fields?.title} tag="h1" />
-      <Text field={fields?.subtitle} tag="p" />
-      <Image field={fields?.backgroundImage} />
-    </section>
-  );
-}
-```
-
-### API Integration
-```typescript
-import { SitecoreClient } from '@sitecore-content-sdk/nextjs/client';
-import scConfig from 'sitecore.config';
-
-const client = new SitecoreClient({
-  ...scConfig,
-});
-
-async function fetchPageData(path: string) {
-  try {
-    const response = await client.getPage(path);
-    return response?.layout;
-  } catch (error) {
-    throw new SitecoreFetchError(`Failed to fetch page: ${path}`, error);
-  }
-}
-```
-
-## Best Practices Summary
-
-1. **Always validate Sitecore fields** before rendering
-2. **Use proper TypeScript types** for all components and functions
-3. **Implement error boundaries** for robust error handling
-4. **Cache API responses** to improve performance
-5. **Follow Next.js conventions** for routing and data fetching
-6. **Write testable code** with proper separation of concerns
-7. **Use Sitecore field components** instead of manual rendering
-8. **Implement proper loading states** for better UX
-9. **Follow security best practices** for input validation
-10. **Document public APIs** and complex functionality
+# Claude/Windsurf Guidance for Sitecore Content SDK Next.js Project
+
+## Project Context
+This is a Sitecore Content SDK application built with Next.js, TypeScript, and React. The project integrates with Sitecore XM Cloud for headless content management and follows modern web development best practices.
+
+## Architecture Overview
+- **Framework**: Next.js with Page Router
+- **Language**: TypeScript with strict mode enabled
+- **CMS**: Sitecore XM Cloud (headless)
+- **SDK**: @sitecore-content-sdk for API integration
+- **Styling**: CSS Modules or Tailwind CSS
+- **State Management**: React Query/SWR for server state
+
+## Development Principles
+
+### Code Organization
+- Use modular, feature-based architecture
+- Separate concerns: components, utilities, types, hooks
+- Follow Next.js Page Router conventions
+- Implement proper error boundaries and loading states
+
+### TypeScript Standards
+- Enable strict mode and strict null checks
+- Use proper type definitions for Sitecore fields and components
+- Prefer type assertions over `any` type
+- Implement discriminated unions for complex state management
+
+### React Patterns
+- Server Components for data fetching and static content
+- Client Components only when interactivity is required
+- Use React.memo for expensive components
+- Implement proper dependency arrays in hooks
+
+## Sitecore Integration Patterns
+
+### Content Fetching
+- Use SitecoreClient for all API calls
+- Implement proper error handling with custom error classes
+- Cache responses using React Query or SWR
+- Handle preview vs. published content scenarios
+
+### Component Development
+- Always use Sitecore field components (Text, RichText, Image)
+- Validate field existence before rendering
+- Handle missing or empty fields gracefully
+- Export components with proper TypeScript interfaces
+
+### Field Handling
+```typescript
+interface ComponentProps {
+  fields: {
+    title: Field;
+    content: Field;
+    image: Field;
+  };
+}
+
+// Always validate fields
+<Text field={fields?.title} tag="h1" />
+<RichText field={fields?.content} />
+<Image field={fields?.image} />
+```
+
+## Performance Best Practices
+
+### Optimization Strategies
+- Use Next.js Image component for optimized images
+- Implement proper loading states and error boundaries
+- Cache expensive operations and API responses
+- Lazy-load non-critical components and modules
+- Leverage server-side rendering for better performance
+
+### Memory Management
+- Clean up subscriptions and event listeners
+- Use useCallback and useMemo appropriately
+- Avoid memory leaks in useEffect hooks
+- Implement proper cleanup in custom hooks
+
+## Security Guidelines
+
+### Input Validation
+- Sanitize all user inputs before processing
+- Validate data at application boundaries
+- Use type guards for runtime type checking
+- Escape content when rendering to prevent XSS
+
+### API Security
+- Use HTTPS for all Sitecore connections
+- Never expose API keys in client-side code
+- Implement proper authentication and authorization
+- Validate all data received from external sources
+
+## Code Quality Standards
+
+### Naming Conventions
+- Variables/Functions: camelCase (getUserData, isLoading)
+- Components: PascalCase (SitecoreComponent, PageLayout)
+- Constants: UPPER_SNAKE_CASE (API_ENDPOINT, MAX_RETRIES)
+- Types/Interfaces: PascalCase (ContentItem, LayoutProps)
+
+### Error Handling
+- Create custom error classes for different error types
+- Implement proper error boundaries in React components
+- Log errors appropriately for debugging
+- Provide fallback content when components fail
+
+### Testing Approach
+- Write testable code with minimal dependencies
+- Mock external services and Sitecore APIs
+- Test component behavior, not implementation details
+- Include tests for error scenarios and edge cases
+
+## Development Workflow
+
+### Environment Setup
+1. Install dependencies: `npm install`
+2. Configure environment variables (copy .env.example to .env.local)
+3. Set up Sitecore API credentials
+4. Start development server: `npm run dev`
+
+### Build Process
+- Use `npm run build` for production builds
+- Enable TypeScript strict mode
+- Run linting and type checking before commits
+
+## Common Patterns and Examples
+
+### Sitecore Component Structure
+```typescript
+interface HeroProps {
+  fields: {
+    title: Field;
+    subtitle: Field;
+    backgroundImage: Field;
+  };
+}
+
+export default function Hero({ fields }: HeroProps) {
+  return (
+    <section className="hero">
+      <Text field={fields?.title} tag="h1" />
+      <Text field={fields?.subtitle} tag="p" />
+      <Image field={fields?.backgroundImage} />
+    </section>
+  );
+}
+```
+
+### API Integration
+```typescript
+import { SitecoreClient } from '@sitecore-content-sdk/nextjs/client';
+import scConfig from 'sitecore.config';
+
+const client = new SitecoreClient({
+  ...scConfig,
+});
+
+async function fetchPageData(path: string) {
+  try {
+    const response = await client.getPage(path);
+    return response?.layout;
+  } catch (error) {
+    throw new SitecoreFetchError(`Failed to fetch page: ${path}`, error);
+  }
+}
+```
+
+## Best Practices Summary
+
+1. **Always validate Sitecore fields** before rendering
+2. **Use proper TypeScript types** for all components and functions
+3. **Implement error boundaries** for robust error handling
+4. **Cache API responses** to improve performance
+5. **Follow Next.js conventions** for routing and data fetching
+6. **Write testable code** with proper separation of concerns
+7. **Use Sitecore field components** instead of manual rendering
+8. **Implement proper loading states** for better UX
+9. **Follow security best practices** for input validation
+10. **Document public APIs** and complex functionality

package/dist/templates/nextjs/eslint.config.mjs

@@ -1,81 +1,81 @@
-// packages/create-content-sdk-app/src/templates/nextjs/eslint.config.mjs
-import { defineConfig } from 'eslint/config'
-import js from '@eslint/js'
-import * as nextEslintPlugin from '@next/eslint-plugin-next'
-import tsParser from '@typescript-eslint/parser'
-import * as tsEslintPlugin from '@typescript-eslint/eslint-plugin'
-import * as importEslintPlugin from 'eslint-plugin-import'
-import * as reactHooksEslintPlugin from 'eslint-plugin-react-hooks'
-import globals from 'globals'
-
-// Normalize ESM/CJS shapes to plugin objects
-const nextPlugin = nextEslintPlugin.default ?? nextEslintPlugin
-const tsPlugin = tsEslintPlugin.default ?? tsEslintPlugin
-const importPlugin = importEslintPlugin.default ?? importEslintPlugin
-const reactHooksPlugin = reactHooksEslintPlugin.default ?? reactHooksEslintPlugin
-
-export default defineConfig([
-  // ignores
-  { ignores: ['node_modules/**', '.next/**', 'dist/**', 'build/**', 'coverage/**'] },
-
-  // core ESLint recommended
-  js.configs.recommended,
-
-  // register plugins (applies to all files)
-  {
-    plugins: {
-      '@next/next': nextPlugin,
-      '@typescript-eslint': tsPlugin,
-      import: importPlugin,
-      'react-hooks': reactHooksPlugin,
-    },
-  },
-
-  // project rules
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      parser: tsParser,
-      parserOptions: {
-        ecmaVersion: 2021,
-        sourceType: 'module',
-        ecmaFeatures: { jsx: true },
-      },
-      globals: {
-        ...(globals.node ?? {}),
-        ...(globals.browser ?? {}),
-        ...(globals.es2021 ?? {}), // guarded to avoid "Cannot convert undefined or null to object"
-        URL: 'readonly',
-      },
-    },
-    settings: {
-      'import/resolver': { typescript: {} },
-    },
-    rules: {
-      // Next.js
-      ...(nextPlugin.configs?.recommended?.rules ?? {}),
-      ...(nextPlugin.configs?.['core-web-vitals']?.rules ?? {}),
-      '@next/next/no-html-link-for-pages': 'off',
-      '@next/next/no-img-element': 'off',
-      '@next/next/no-sync-scripts': 'off',
-      '@next/next/no-assign-module-variable': 'off',
-
-      // TypeScript
-      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-      'no-unused-vars': 'off',
-      'no-undef': 'off',
-
-      // Plugins
-      'import/no-anonymous-default-export': 'error',
-      'react-hooks/exhaustive-deps': 'warn',
-      'react-hooks/rules-of-hooks': 'error',
-
-      // Preferences
-      'prefer-const': 'error',
-      'no-var': 'error',
-
-      // Temporary: ignore escapes in strings/regex to align with new-starter components
-      'no-useless-escape': 'off',
-    },
-  },
-])
+// packages/create-content-sdk-app/src/templates/nextjs/eslint.config.mjs
+import { defineConfig } from 'eslint/config'
+import js from '@eslint/js'
+import * as nextEslintPlugin from '@next/eslint-plugin-next'
+import tsParser from '@typescript-eslint/parser'
+import * as tsEslintPlugin from '@typescript-eslint/eslint-plugin'
+import * as importEslintPlugin from 'eslint-plugin-import'
+import * as reactHooksEslintPlugin from 'eslint-plugin-react-hooks'
+import globals from 'globals'
+
+// Normalize ESM/CJS shapes to plugin objects
+const nextPlugin = nextEslintPlugin.default ?? nextEslintPlugin
+const tsPlugin = tsEslintPlugin.default ?? tsEslintPlugin
+const importPlugin = importEslintPlugin.default ?? importEslintPlugin
+const reactHooksPlugin = reactHooksEslintPlugin.default ?? reactHooksEslintPlugin
+
+export default defineConfig([
+  // ignores
+  { ignores: ['node_modules/**', '.next/**', 'dist/**', 'build/**', 'coverage/**'] },
+
+  // core ESLint recommended
+  js.configs.recommended,
+
+  // register plugins (applies to all files)
+  {
+    plugins: {
+      '@next/next': nextPlugin,
+      '@typescript-eslint': tsPlugin,
+      import: importPlugin,
+      'react-hooks': reactHooksPlugin,
+    },
+  },
+
+  // project rules
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...(globals.node ?? {}),
+        ...(globals.browser ?? {}),
+        ...(globals.es2021 ?? {}), // guarded to avoid "Cannot convert undefined or null to object"
+        URL: 'readonly',
+      },
+    },
+    settings: {
+      'import/resolver': { typescript: {} },
+    },
+    rules: {
+      // Next.js
+      ...(nextPlugin.configs?.recommended?.rules ?? {}),
+      ...(nextPlugin.configs?.['core-web-vitals']?.rules ?? {}),
+      '@next/next/no-html-link-for-pages': 'off',
+      '@next/next/no-img-element': 'off',
+      '@next/next/no-sync-scripts': 'off',
+      '@next/next/no-assign-module-variable': 'off',
+
+      // TypeScript
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+
+      // Plugins
+      'import/no-anonymous-default-export': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+
+      // Preferences
+      'prefer-const': 'error',
+      'no-var': 'error',
+
+      // Temporary: ignore escapes in strings/regex to align with new-starter components
+      'no-useless-escape': 'off',
+    },
+  },
+])

package/dist/templates/nextjs/gitignore

@@ -1,28 +1,28 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# next.js
-/.next*/
-/out/
-
-# misc
-.DS_Store
-
-# local env files
-.env.local
-.env.*.local
-.env
-
-# Log files
-*.log*
-
-# vercel
-.vercel
-
-# sitecore temp files
-.sitecore/*
-# except for component-map
-!.sitecore/component-map.ts
-!.sitecore/import-map.ts
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next*/
+/out/
+
+# misc
+.DS_Store
+
+# local env files
+.env.local
+.env.*.local
+.env
+
+# Log files
+*.log*
+
+# vercel
+.vercel
+
+# sitecore temp files
+.sitecore/*
+# except for component-map
+!.sitecore/component-map.ts
+!.sitecore/import-map.ts