@akinon/projectzero 2.0.0-beta.8 → 2.0.0

package/app-template/tailwind.config.js

@@ -1,4 +1,6 @@
+const getAkinonNextContent = require('@akinon/next/tailwind/content');
 const deepMerge = require('@akinon/next/utils/deep-merge');
+const defaultTheme = require('tailwindcss/defaultTheme');
 const plugins = require('./src/plugins');
 const fs = require('fs');
 const path = require('path');
@@ -18,13 +20,159 @@ if (themeName !== 'default' && fs.existsSync(themeConfigPath)) {
 
 const defaultConfig = {
   content: [
-    ...plugins
-      .map((plugin) => [
-        `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
-        `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
-      ])
-      .flat()
-  ]
+    './node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
+    '../../node_modules/@akinon/next/**/*.{js,ts,jsx,tsx}',
+    './src/app/**/*.{js,ts,jsx,tsx}',
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
+    './src/views/**/*.{js,ts,jsx,tsx}',
+    './src/widgets/**/*.{js,ts,jsx,tsx}',
+    './src/hooks/**/*.{js,ts,jsx,tsx}',
+    './src/utils/**/*.{js,ts,jsx,tsx}',
+    ...getAkinonNextContent(plugins)
+  ],
+  theme: {
+    extend: {
+      fontSize: {
+        '2xs': '0.5rem'
+      },
+      outline: {
+        off: 'none'
+      },
+      width: {
+        '1/10': '10%',
+        '2/10': '20%',
+        '3/10': '30%',
+        '4/10': '40%',
+        '5/10': '50%',
+        '6/10': '60%',
+        '7/10': '70%',
+        '8/10': '80%',
+        '9/10': '90%'
+      },
+      transitionProperty: {
+        'max-width': 'max-width'
+      },
+      backgroundImage: {
+        'skeleton-shimmer':
+          'linear-gradient(90deg, #d7d7d7 0%, #ebebeb 40%, #eeeeee 60%, #d7d7d7)'
+      },
+      keyframes: {
+        'skeleton-shimmer': {
+          '100%': {
+            transform: 'translateX(100%)'
+          }
+        },
+        'slide-in': {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0)' }
+        },
+        'slide-out': {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-100%)' }
+        }
+      },
+      animation: {
+        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite',
+        'slide-in': 'slide-in 0.4s ease-out forwards',
+        'slide-out': 'slide-out 0.4s ease-out forwards'
+      }
+    },
+    colors: {
+      transparent: 'transparent',
+      white: '#ffffff',
+      primary: {
+        DEFAULT: '#000000',
+        hover: '#181818',
+        foreground: '#ffffff',
+        100: '#525252',
+        200: '#404040',
+        300: '#3d3d3d',
+        400: '#333333',
+        500: '#2d2d2d',
+        600: '#292929',
+        700: '#2b2b2b',
+        800: '#181818',
+        900: '#000000'
+      },
+      secondary: {
+        DEFAULT: '#e95151',
+        hover: '#d03838',
+        foreground: '#ffffff',
+        100: '#ffb7b7',
+        200: '#ff9e9e',
+        300: '#ff8484',
+        400: '#ff6b6b',
+        500: '#e95151',
+        600: '#d72b01',
+        700: '#b61e1e',
+        800: '#9d0505',
+        900: '#830000'
+      },
+      black: {
+        DEFAULT: '#000000',
+        100: '#525252',
+        200: '#404040',
+        300: '#3d3d3d',
+        400: '#333333',
+        500: '#2d2d2d',
+        600: '#292929',
+        700: '#2b2b2b',
+        750: '#121212',
+        800: '#181818',
+        850: '#0a0a0a',
+        900: '#000000'
+      },
+      gray: {
+        DEFAULT: '#ebebeb',
+        25: '#fdfdfd',
+        30: '#fafafa',
+        50: '#f7f7f7',
+        100: '#f5f5f5',
+        150: '#f4f4f4',
+        200: '#eeeeee',
+        300: '#ebebeb',
+        400: '#d7d7d7',
+        450: '#d4d4d4',
+        500: '#c9c9c9',
+        600: '#9d9d9d',
+        650: '#7d7d7d',
+        700: '#686868',
+        800: '#615f62',
+        850: '#58585a',
+        900: '#4a4f54',
+        950: '#424242'
+      },
+      error: {
+        DEFAULT: '#d72b01',
+        100: '#e20008'
+      },
+      success: {
+        DEFAULT: '#7b9d76',
+        100: '#7b9d76'
+      }
+    },
+    container: {
+      center: true,
+      padding: {
+        DEFAULT: '0rem',
+        sm: '2rem',
+        '2xl': '0rem'
+      }
+    },
+    fontFamily: {
+      sans: ['Jost'].concat(defaultTheme.fontFamily.sans)
+    },
+    screens: {
+      xs: '575px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1170px',
+      '2xl': '1370px'
+    }
+  },
+  plugins: [require('@tailwindcss/typography')]
 };
 
 if (Object.keys(themeOverrides).length === 0) {

package/app-template/tsconfig.json

@@ -4,17 +4,27 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
-      "@theme/*": ["./*"],
-      "@root/*": ["./app/[commerce]/[locale]/[currency]/*"],
-      "@product/*": ["./app/[commerce]/[locale]/[currency]/product/*"],
+      "@theme/*": [
+        "./*"
+      ],
+      "@root/*": [
+        "./app/[pz]/*"
+      ],
+      "@product/*": [
+        "./app/[pz]/product/*"
+      ],
       "@group-product/*": [
-        "./app/[commerce]/[locale]/[currency]/group-product/*"
+        "./app/[pz]/group-product/*"
+      ],
+      "@category/*": [
+        "./app/[pz]/category/*"
       ],
-      "@category/*": ["./app/[commerce]/[locale]/[currency]/category/*"],
       "@special-page/*": [
-        "./app/[commerce]/[locale]/[currency]/special-page/*"
+        "./app/[pz]/special-page/*"
       ],
-      "@flat-page/*": ["./app/[commerce]/[locale]/[currency]/flat-page/*"]
+      "@flat-page/*": [
+        "./app/[pz]/flat-page/*"
+      ]
     },
     "allowSyntheticDefaultImports": true,
     "composite": false,
@@ -26,7 +36,11 @@
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -37,7 +51,7 @@
     "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "plugins": [
       {
         "name": "next"
@@ -50,7 +64,11 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../../packages/**/*"
+    "../../packages/**/*",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "../../packages/projectzero/app-template"]
+  "exclude": [
+    "node_modules",
+    "../../packages/projectzero/app-template"
+  ]
 }

package/codemods/migrate-auth-v5/index.js

@@ -0,0 +1,339 @@
+/**
+ * next-auth v4 -> v5 migration codemod for Project Zero brands.
+ *
+ * Handles two brand patterns:
+ *   Tip A (re-export only): brand's [...nextauth].ts is a 3-line
+ *     `import Auth from '@akinon/next/api/auth'; export default Auth;`
+ *     → fully automated; brand's auth.ts + route.ts are generated.
+ *
+ *   Tip B (custom nextAuthOptions): brand has its own config using
+ *     Pages API req/res. Skeleton is generated and original logic is
+ *     transferred with TODO markers. Manual conversion of req/res to
+ *     cookies()/headers() is required afterwards.
+ *
+ * In both cases, client usage `getServerSession` is rewritten to `auth`
+ * via the sibling `transform.js` jscodeshift script.
+ *
+ * Usage:
+ *   cd <brand-root>
+ *   node <pz-next>/packages/projectzero/codemods/migrate-auth-v5/index.js [--dry-run]
+ *
+ * Or via the projectzero CLI:
+ *   npx @akinon/projectzero codemod --codemod=migrate-auth-v5
+ */
+
+const path = require('path');
+const fs = require('fs');
+const jscodeshift = require('jscodeshift/src/Runner');
+
+const TIP_A_SIZE_LIMIT = 256;
+
+const TIP_A_AUTH_CONTENT = `import { createAuth } from '@akinon/next/api/auth';
+
+export const { handlers, auth, signIn, signOut } = createAuth();
+`;
+
+const ROUTE_CONTENT = `import { handlers } from 'auth';
+
+export const { GET, POST } = handlers;
+`;
+
+const TIP_B_HEADER = `/**
+ * NOTE: This file was generated by \`migrate-auth-v5\`.
+ * It replaces \`src/pages/api/auth/[...nextauth].ts\` which used
+ * the Pages API \`req\`/\`res\` objects that next-auth v5 (App Router)
+ * no longer provides.
+ *
+ * MANUAL MIGRATION STEPS (required before first run):
+ *
+ *   1. \`req.cookies['X']\`
+ *        -> \`(await cookies()).get('X')?.value\`
+ *
+ *   2. \`req.headers['X']\`  or  \`req.headers.X\`
+ *        -> \`(await headers()).get('X') ?? ''\`
+ *
+ *   3. \`res.setHeader('Set-Cookie', ['name=value; Path=/; HttpOnly; ...'])\`
+ *        -> \`(await cookies()).set('name', value, { path: '/', httpOnly: true, secure: true, maxAge })\`
+ *
+ *   4. \`throw new Error(JSON.stringify(errors))\`
+ *        -> \`class PzCredentialsError extends CredentialsSignin { constructor(errs) { super(); this.code = JSON.stringify(errs); } }\`
+ *        -> \`throw new PzCredentialsError(errors)\`
+ *        (Import \`CredentialsSignin\` from \`'next-auth'\`.)
+ *
+ *   5. Each \`authorize\` callback is now \`async\` and no longer receives
+ *      the outer \`req\`/\`res\`. Wrap cookie/header reads in \`await\`.
+ *
+ * Reference implementation (copy the shape as needed):
+ *   packages/akinon-next/api/auth.ts on the pz-next beta branch.
+ *
+ * Search for \`TODO:v5\` markers below for spots that definitely need work.
+ */`;
+
+function log(msg) {
+  const ts = new Date().toISOString().replace('T', ' ').slice(0, 19);
+  console.log(`[${ts}] ${msg}`);
+}
+
+function detectAuthType(cwd) {
+  const oldPath = path.join(cwd, 'src', 'pages', 'api', 'auth', '[...nextauth].ts');
+  if (!fs.existsSync(oldPath)) {
+    return { type: null, oldPath };
+  }
+
+  const stats = fs.statSync(oldPath);
+  const content = fs.readFileSync(oldPath, 'utf-8');
+
+  const isReExport =
+    stats.size < TIP_A_SIZE_LIMIT &&
+    /from\s+['"]@akinon\/next\/api\/auth['"]/.test(content) &&
+    /export\s+default\s+Auth/.test(content);
+
+  return { type: isReExport ? 'A' : 'B', oldPath, content };
+}
+
+function ensureParentDir(filePath, { dryRun }) {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) {
+    if (dryRun) {
+      log(`[DRY] mkdir -p ${dir}`);
+    } else {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  }
+}
+
+function writeFileSafe(filePath, content, { dryRun }) {
+  ensureParentDir(filePath, { dryRun });
+  if (dryRun) {
+    log(`[DRY] CREATE ${filePath} (${content.length} bytes)`);
+    return;
+  }
+  if (fs.existsSync(filePath)) {
+    log(`  WARN: ${filePath} already exists; overwriting`);
+  }
+  fs.writeFileSync(filePath, content, 'utf-8');
+  log(`  CREATE ${filePath}`);
+}
+
+function deleteFileSafe(filePath, { dryRun }) {
+  if (!fs.existsSync(filePath)) return;
+  if (dryRun) {
+    log(`[DRY] DELETE ${filePath}`);
+    return;
+  }
+  fs.unlinkSync(filePath);
+  log(`  DELETE ${filePath}`);
+}
+
+function cleanupEmptyAuthPagesDir(cwd, { dryRun }) {
+  const authDir = path.join(cwd, 'src', 'pages', 'api', 'auth');
+  if (!fs.existsSync(authDir)) return;
+  const remaining = fs.readdirSync(authDir);
+  if (remaining.length > 0) return;
+  if (dryRun) {
+    log(`[DRY] rmdir ${authDir}`);
+    return;
+  }
+  fs.rmdirSync(authDir);
+  log(`  RMDIR ${authDir}`);
+}
+
+function migrateTipA(cwd, { dryRun, oldPath }) {
+  const authPath = path.join(cwd, 'src', 'auth.ts');
+  const routePath = path.join(
+    cwd,
+    'src',
+    'app',
+    'api',
+    'auth',
+    '[...nextauth]',
+    'route.ts'
+  );
+
+  log(`Tip A migration`);
+  deleteFileSafe(oldPath, { dryRun });
+  writeFileSafe(authPath, TIP_A_AUTH_CONTENT, { dryRun });
+  writeFileSafe(routePath, ROUTE_CONTENT, { dryRun });
+  cleanupEmptyAuthPagesDir(cwd, { dryRun });
+}
+
+function transformTipBSource(original) {
+  let src = original;
+
+  src = src.replace(
+    /import\s*\{\s*NextApiRequest\s*,\s*NextApiResponse\s*\}\s*from\s*['"]next['"];?\s*\n/,
+    ''
+  );
+
+  src = src.replace(
+    /import\s+NextAuth(?:\s*,\s*\{([^}]*)\})?\s+from\s+['"]next-auth['"];?\s*\n/,
+    (_match, typeImports) => {
+      const lines = [
+        `import { createAuth } from '@akinon/next/api/auth';`,
+        `import { cookies, headers } from 'next/headers';`
+      ];
+      if (typeImports && typeImports.trim()) {
+        const cleaned = typeImports
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+          .join(', ');
+        if (cleaned) {
+          lines.push(`import type { ${cleaned} } from 'next-auth';`);
+        }
+      }
+      return lines.join('\n') + '\n';
+    }
+  );
+
+  src = src.replace(
+    /const\s+nextAuthOptions\s*=\s*\(\s*req\s*:\s*NextApiRequest\s*,\s*res\s*:\s*NextApiResponse\s*\)\s*=>\s*\{/,
+    `const getCustomAuthConfig = () => {\n  // TODO:v5 See migration notes at top of file.`
+  );
+
+  src = src.replace(
+    /const\s+nextAuthOptions\s*=\s*\(\s*req\s*,\s*res\s*\)\s*=>\s*\{/,
+    `const getCustomAuthConfig = () => {\n  // TODO:v5 See migration notes at top of file.`
+  );
+
+  src = src.replace(
+    /const\s+Auth\s*=\s*\(\s*req[^)]*\)\s*=>\s*\{\s*return\s+NextAuth\(\s*req\s*,\s*res\s*,\s*nextAuthOptions\(\s*req\s*,\s*res\s*\)\s*\);\s*\};?\s*\n/,
+    ''
+  );
+
+  src = src.replace(
+    /const\s+Auth\s*=\s*\(\s*req[^)]*\)\s*=>\s*NextAuth\([^;]*\);\s*\n/,
+    ''
+  );
+
+  src = src.replace(
+    /export\s+default\s+Auth\s*;?\s*$/m,
+    `export const { handlers, auth, signIn, signOut } = createAuth(getCustomAuthConfig);\n`
+  );
+
+  src = src.replace(
+    /\b(req\.cookies(?:\?\.|\.)[a-zA-Z_$][\w$]*|req\.cookies\[[^\]]+\])/g,
+    '/* TODO:v5 cookies() */ $1'
+  );
+  src = src.replace(
+    /\b(req\.headers(?:\?\.|\.)[a-zA-Z_$][\w$]*|req\.headers\[[^\]]+\])/g,
+    '/* TODO:v5 headers() */ $1'
+  );
+  src = src.replace(
+    /\b(req\.body(?:\?\.|\.)?[a-zA-Z_$]?[\w$]*)/g,
+    '/* TODO:v5 read body via credentials */ $1'
+  );
+  src = src.replace(
+    /\b(res\.[a-zA-Z_$][\w$]*\()/g,
+    '/* TODO:v5 cookies().set */ $1'
+  );
+  src = src.replace(
+    /\bthrow\s+new\s+Error\(JSON\.stringify\(errors\)\)/g,
+    '/* TODO:v5 CredentialsSignin */ throw new Error(JSON.stringify(errors))'
+  );
+
+  return `${TIP_B_HEADER}\n\n${src}`;
+}
+
+function migrateTipB(cwd, { dryRun, oldPath, content }) {
+  const authPath = path.join(cwd, 'src', 'auth.ts');
+  const routePath = path.join(
+    cwd,
+    'src',
+    'app',
+    'api',
+    'auth',
+    '[...nextauth]',
+    'route.ts'
+  );
+
+  log(`Tip B migration (${content.length} bytes to transfer)`);
+
+  const newAuthContent = transformTipBSource(content);
+
+  writeFileSafe(authPath, newAuthContent, { dryRun });
+  writeFileSafe(routePath, ROUTE_CONTENT, { dryRun });
+  deleteFileSafe(oldPath, { dryRun });
+  cleanupEmptyAuthPagesDir(cwd, { dryRun });
+
+  log(`  Manual work left: req/res -> cookies()/headers() conversions inside ${authPath}`);
+  log(`  Grep for 'TODO:v5' to find spots.`);
+}
+
+function runClientTransform(cwd, { dryRun }) {
+  const transformPath = path.resolve(__dirname, 'transform.js');
+  const targets = ['src'].map((d) => path.join(cwd, d)).filter(fs.existsSync);
+  if (targets.length === 0) {
+    log(`No src/ directory found, skipping client transform`);
+    return Promise.resolve();
+  }
+
+  log(`Running client transform (getServerSession -> auth)`);
+
+  return jscodeshift
+    .run(transformPath, targets, {
+      verbose: 0,
+      dry: Boolean(dryRun),
+      print: Boolean(dryRun),
+      extensions: 'ts,tsx',
+      parser: 'tsx',
+      ignorePattern: '**/node_modules/**',
+      silent: true
+    })
+    .then(
+      (stats) => {
+        log(
+          `  Client transform: ${stats.ok} changed, ${stats.nochange} unchanged, ${stats.error} errored`
+        );
+      },
+      (err) => {
+        log(`  Client transform error: ${err.message}`);
+      }
+    );
+}
+
+const transform = () => {
+  const workingDir = path.resolve(process.cwd());
+  const dryRun = process.argv.includes('--dry-run');
+
+  log(
+    `migrate-auth-v5 starting in ${workingDir}${dryRun ? ' (DRY RUN)' : ''}`
+  );
+
+  const detection = detectAuthType(workingDir);
+
+  if (!detection.type) {
+    log(`No src/pages/api/auth/[...nextauth].ts found, nothing to migrate.`);
+    return Promise.resolve();
+  }
+
+  log(`Detected pattern: Tip ${detection.type}`);
+
+  if (detection.type === 'A') {
+    migrateTipA(workingDir, { dryRun, oldPath: detection.oldPath });
+  } else {
+    migrateTipB(workingDir, {
+      dryRun,
+      oldPath: detection.oldPath,
+      content: detection.content
+    });
+  }
+
+  return runClientTransform(workingDir, { dryRun }).then(() => {
+    log(`migrate-auth-v5 done`);
+  });
+};
+
+module.exports = {
+  transform
+};
+
+if (require.main === module) {
+  const result = transform();
+  if (result && typeof result.then === 'function') {
+    result.catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
+  }
+}

package/codemods/migrate-auth-v5/transform.js

@@ -0,0 +1,86 @@
+/**
+ * jscodeshift transform: client-side next-auth v4 -> v5 migration.
+ *
+ * Converts:
+ *   import { getServerSession } from 'next-auth/next';
+ *   const session = await getServerSession();
+ *
+ * Into:
+ *   import { auth } from 'auth';
+ *   const session = await auth();
+ *
+ * Arguments passed to `getServerSession(authOptions, ...)` are dropped,
+ * since `auth()` needs none when using the root `src/auth.ts` config.
+ */
+
+const AUTH_IMPORT_SOURCES = ['next-auth/next', 'next-auth'];
+
+function transform(fileInfo, api) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+  let changed = false;
+
+  AUTH_IMPORT_SOURCES.forEach((sourceValue) => {
+    const imports = root.find(j.ImportDeclaration, {
+      source: { value: sourceValue }
+    });
+
+    imports.forEach((pathNode) => {
+      const specifiers = pathNode.node.specifiers || [];
+      const getServerSessionSpec = specifiers.find(
+        (s) =>
+          s.type === 'ImportSpecifier' &&
+          s.imported &&
+          s.imported.name === 'getServerSession'
+      );
+
+      if (!getServerSessionSpec) {
+        return;
+      }
+
+      const localName = getServerSessionSpec.local
+        ? getServerSessionSpec.local.name
+        : 'getServerSession';
+
+      const otherSpecs = specifiers.filter((s) => s !== getServerSessionSpec);
+
+      if (otherSpecs.length === 0) {
+        pathNode.node.specifiers = [
+          j.importSpecifier(j.identifier('auth'))
+        ];
+        pathNode.node.source = j.literal('auth');
+      } else {
+        pathNode.node.specifiers = otherSpecs;
+        const authImport = j.importDeclaration(
+          [j.importSpecifier(j.identifier('auth'))],
+          j.literal('auth')
+        );
+        pathNode.insertAfter(authImport);
+      }
+
+      root
+        .find(j.CallExpression, { callee: { name: localName } })
+        .forEach((callPath) => {
+          callPath.node.callee = j.identifier('auth');
+          callPath.node.arguments = [];
+        });
+
+      changed = true;
+    });
+  });
+
+  AUTH_IMPORT_SOURCES.forEach((sourceValue) => {
+    root
+      .find(j.ImportDeclaration, { source: { value: sourceValue } })
+      .forEach((pathNode) => {
+        if (!pathNode.node.specifiers || pathNode.node.specifiers.length === 0) {
+          j(pathNode).remove();
+          changed = true;
+        }
+      });
+  });
+
+  return changed ? root.toSource({ quote: 'single' }) : null;
+}
+
+module.exports = transform;