Merge pull request #10 from StreetSupport/staging

Merge staging to main

Author: o-seliuchenko

.github/workflows/test-and-deploy.yml

@@ -1,13 +1,33 @@
-name: Deploy to Staging
+name: Test & Deploy
 
 on:
-  push:
-    branches: [staging, main]
   pull_request:
     branches: [staging, main]
+  push:
+    branches: [staging, main]
 
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    name: test
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests and build
+        run: npm run build
+
   deploy:
+    needs: test
     if: github.ref == 'refs/heads/staging'
     runs-on: ubuntu-latest
     name: deploy
@@ -40,4 +60,4 @@ jobs:
               target_url: `https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`,
               description: 'Vercel deployment triggered',
               context: 'ci/deployment-triggered'
-            })
+              })

.gitignore

@@ -55,4 +55,4 @@ next-env.d.ts
 .vscode/*
 !.vscode/extensions.json
 # Sentry Config File
-.env.sentry-build-plugin
+.env.sentry-build-plugin

config/jest.config.cjs

@@ -0,0 +1,40 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  // Ensure <rootDir> is the project root (one level up from /config)
+  rootDir: '../',
+  setupFilesAfterEnv: ['<rootDir>/config/jest.setup.js'],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you based on your tsconfig.json paths)
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.stories.{js,jsx,ts,tsx}',
+    '!src/**/index.{js,jsx,ts,tsx}',
+  ],
+  testPathIgnorePatterns: [
+    '<rootDir>/.next/',
+    '<rootDir>/node_modules/',
+    '<rootDir>/tests/e2e/',
+  ],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

config/jest.setup.js

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom';
+
+// Mock Next.js router
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      pathname: '/',
+      query: {},
+      asPath: '/',
+      push: jest.fn(),
+      pop: jest.fn(),
+      reload: jest.fn(),
+      back: jest.fn(),
+      prefetch: jest.fn().mockResolvedValue(undefined),
+      beforePopState: jest.fn(),
+      events: {
+        on: jest.fn(),
+        off: jest.fn(),
+        emit: jest.fn(),
+      },
+      isFallback: false,
+    };
+  },
+}));

config/playwright.config.ts

@@ -0,0 +1,71 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: '../tests/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

eslint.config.mjs

@@ -64,9 +64,16 @@ const config = [
       "no-console": "off"
     }
   },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {
+      "@typescript-eslint/no-empty-interface": "off",
+      "@typescript-eslint/no-empty-object-type": "off"
+    }
+  },
   {
     ignores: ["**/node_modules/**", "**/.next/**", "**/out/**", "**/public/**", "**/coverage/**"]
   }
 ];
 
-export default config;
+export default config;

eslintignore

@@ -2,4 +2,4 @@ node_modules/
 .next/
 out/
 coverage/
-public/
+public/

next.config.ts

@@ -0,0 +1,120 @@
+import {withSentryConfig} from '@sentry/nextjs';
+import dotenv from 'dotenv';
+dotenv.config({ path: '.env.local' });
+
+const nextConfig = {
+  reactStrictMode: true, // Temporarily disabled for testing
+
+  // Enable response compression for better performance
+  compress: true,
+  
+  // Performance optimizations
+  poweredByHeader: false, // Remove X-Powered-By header for security and performance
+  
+  // Build optimizations (swcMinify is now default in Next.js 15)
+  
+  images: {
+    // Enable modern image formats for better compression
+    formats: ['image/avif', 'image/webp'],
+    
+    // Allowed remote image sources (domains is deprecated)
+    remotePatterns: process.env.BLOB_STORAGE_HOSTNAME
+      ? [
+        {
+          protocol: 'https',
+          hostname: process.env.BLOB_STORAGE_HOSTNAME,
+          pathname: '/**',
+        },
+      ]
+      : [],
+    
+    // Device sizes for responsive images
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
+    
+    // Image sizes for different breakpoints
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    
+    // Minimize layout shift by enforcing size requirements
+    minimumCacheTTL: 60,
+  },
+  
+  // Enable experimental features for better performance
+  experimental: {
+    // Optimize server components
+    optimizeServerReact: true,
+  },
+  
+  // Turbopack configuration (moved from experimental.turbo)
+  turbopack: {
+    resolveAlias: {
+      // Reduce bundle size by aliasing large dependencies
+      'react-icons/lib': 'react-icons',
+    },
+  },
+
+  // Production optimizations
+  ...(process.env.NODE_ENV === 'production' && {
+    output: 'standalone', // Optimize for deployment
+    
+    // Webpack optimizations
+    webpack: (config: any) => {
+      // Enable module concatenation for smaller bundles
+      config.optimization = {
+        ...config.optimization,
+        usedExports: true,
+        sideEffects: false,
+        
+        // Split chunks for better caching
+        splitChunks: {
+          ...config.optimization?.splitChunks,
+          chunks: 'all',
+          cacheGroups: {
+            ...config.optimization?.splitChunks?.cacheGroups,
+            // Separate vendor chunks
+            vendor: {
+              test: /[\\/]node_modules[\\/]/,
+              name: 'vendors',
+              chunks: 'all',
+              priority: 10,
+            },
+          },
+        }
+      };
+      
+      return config;
+    },
+  }),
+};
+
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: process.env.SENTRY_ORG,
+
+  project: process.env.SENTRY_PROJECT,
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  // tunnelRoute: "/monitoring",
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+});