@akinon/projectzero 1.126.16 → 1.126.17

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @akinon/projectzero
 
+## 1.126.17
+
+### Patch Changes
+
+- 0fe8ab7: ZERO-5209: Close the theme editor's package and CLI gaps on the v1 line
+
+  - `@akinon/pz-list-hover-image` is published on the v1 line, registered in the plugin list and in `PluginModule` (`Component.ListHoverImage`), and offered by `projectzero --plugins`. Until now `pz-install-plugins` asked for `@akinon/pz-list-hover-image@<@akinon/next version>`, which never existed for 1.x, so the plugin could not be installed on a v1 project.
+  - `projectzero codemod --codemod=composable-auth` is available on the v1 CLI. It moves the login page into an `auth/(login)` route group and mounts the theme editor's login slot there. It leaves a project without `@akinon/pz-theme` (or with one older than 2.0.41) untouched instead of writing a layout that cannot build.
+  - `@akinon/pz-theme` and `@akinon/theme-contract` are transpiled by `withPzConfig`, and `pz-postinstall` no longer removes `@akinon/pz-theme` when it is missing from `src/plugins.js`, as on main. Brands that added both packages to `transpilePackages` by hand can drop that override. Keep `'pz-theme'` in `src/plugins.js` unless `tailwind.config.js` lists pz-theme's sources itself: that entry is also what puts them in Tailwind's `content`.
+
 ## 1.126.16
 
 ## 1.126.15

package/app-template/CHANGELOG.md

@@ -1,5 +1,37 @@
 # projectzeronext
 
+## 1.126.17
+
+### Patch Changes
+
+- Updated dependencies [0fe8ab7]
+  - @akinon/next@1.126.17
+  - @akinon/pz-virtual-try-on@1.126.17
+  - @akinon/pz-akifast@1.126.17
+  - @akinon/pz-apple-pay@1.126.17
+  - @akinon/pz-b2b@1.126.17
+  - @akinon/pz-basket-gift-pack@1.126.17
+  - @akinon/pz-bkm@1.126.17
+  - @akinon/pz-checkout-gift-pack@1.126.17
+  - @akinon/pz-click-collect@1.126.17
+  - @akinon/pz-credit-payment@1.126.17
+  - @akinon/pz-cybersource-uc@1.126.17
+  - @akinon/pz-flow-payment@1.126.17
+  - @akinon/pz-google-pay@1.126.17
+  - @akinon/pz-gpay@1.126.17
+  - @akinon/pz-haso@1.126.17
+  - @akinon/pz-hepsipay@1.126.17
+  - @akinon/pz-masterpass@1.126.17
+  - @akinon/pz-masterpass-rest@1.126.17
+  - @akinon/pz-multi-basket@1.126.17
+  - @akinon/pz-one-click-checkout@1.126.17
+  - @akinon/pz-otp@1.126.17
+  - @akinon/pz-pay-on-delivery@1.126.17
+  - @akinon/pz-saved-card@1.126.17
+  - @akinon/pz-similar-products@1.126.17
+  - @akinon/pz-tabby-extension@1.126.17
+  - @akinon/pz-tamara-extension@1.126.17
+
 ## 1.126.16
 
 ### Patch Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "1.126.16",
+  "version": "1.126.17",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,32 +24,32 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "1.126.16",
-    "@akinon/pz-akifast": "1.126.16",
-    "@akinon/pz-apple-pay": "1.126.16",
-    "@akinon/pz-b2b": "1.126.16",
-    "@akinon/pz-basket-gift-pack": "1.126.16",
-    "@akinon/pz-bkm": "1.126.16",
-    "@akinon/pz-checkout-gift-pack": "1.126.16",
-    "@akinon/pz-click-collect": "1.126.16",
-    "@akinon/pz-credit-payment": "1.126.16",
-    "@akinon/pz-cybersource-uc": "1.126.16",
-    "@akinon/pz-flow-payment": "1.126.16",
-    "@akinon/pz-google-pay": "1.126.16",
-    "@akinon/pz-gpay": "1.126.16",
-    "@akinon/pz-haso": "1.126.16",
-    "@akinon/pz-hepsipay": "1.126.16",
-    "@akinon/pz-masterpass": "1.126.16",
-    "@akinon/pz-masterpass-rest": "1.126.16",
-    "@akinon/pz-multi-basket": "1.126.16",
-    "@akinon/pz-one-click-checkout": "1.126.16",
-    "@akinon/pz-otp": "1.126.16",
-    "@akinon/pz-pay-on-delivery": "1.126.16",
-    "@akinon/pz-saved-card": "1.126.16",
-    "@akinon/pz-similar-products": "1.126.16",
-    "@akinon/pz-tabby-extension": "1.126.16",
-    "@akinon/pz-tamara-extension": "1.126.16",
-    "@akinon/pz-virtual-try-on": "1.126.16",
+    "@akinon/next": "1.126.17",
+    "@akinon/pz-akifast": "1.126.17",
+    "@akinon/pz-apple-pay": "1.126.17",
+    "@akinon/pz-b2b": "1.126.17",
+    "@akinon/pz-basket-gift-pack": "1.126.17",
+    "@akinon/pz-bkm": "1.126.17",
+    "@akinon/pz-checkout-gift-pack": "1.126.17",
+    "@akinon/pz-click-collect": "1.126.17",
+    "@akinon/pz-credit-payment": "1.126.17",
+    "@akinon/pz-cybersource-uc": "1.126.17",
+    "@akinon/pz-flow-payment": "1.126.17",
+    "@akinon/pz-google-pay": "1.126.17",
+    "@akinon/pz-gpay": "1.126.17",
+    "@akinon/pz-haso": "1.126.17",
+    "@akinon/pz-hepsipay": "1.126.17",
+    "@akinon/pz-masterpass": "1.126.17",
+    "@akinon/pz-masterpass-rest": "1.126.17",
+    "@akinon/pz-multi-basket": "1.126.17",
+    "@akinon/pz-one-click-checkout": "1.126.17",
+    "@akinon/pz-otp": "1.126.17",
+    "@akinon/pz-pay-on-delivery": "1.126.17",
+    "@akinon/pz-saved-card": "1.126.17",
+    "@akinon/pz-similar-products": "1.126.17",
+    "@akinon/pz-tabby-extension": "1.126.17",
+    "@akinon/pz-tamara-extension": "1.126.17",
+    "@akinon/pz-virtual-try-on": "1.126.17",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
@@ -72,7 +72,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.126.16",
+    "@akinon/eslint-plugin-projectzero": "1.126.17",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/codemods/composable-auth/index.js

@@ -0,0 +1,292 @@
+/**
+ * composable-auth
+ *
+ * Opens the brand's login screen to the theme editor without adding a route.
+ *
+ * What it does, per `auth` route directory found under src/app:
+ *   1. moves `auth/page.tsx` into `auth/(login)/page.tsx` (a route group — the
+ *      URL does not change);
+ *   2. writes `auth/(login)/layout.tsx`, which mounts the login body slot with
+ *      the page itself as the fallback.
+ *
+ * Why the route group: the slot has to sit in a layout, because a ChromeSlot is
+ * an async server component and the login page is a client one. A layout at
+ * `auth/layout.tsx` would also wrap `auth/oauth-login`, the OAuth callback —
+ * whose whole job is a `signIn()` effect and which renders no markup at all, so
+ * a login composition placed over it would break social sign-in with nothing on
+ * screen to notice. The group scopes the mount to the login screen alone.
+ *
+ * Login and register stay on this one screen; whether they read as tabs or as
+ * two forms side by side is composed in the editor (starter templates ship both
+ * shapes), so no `/auth/register` route is created here.
+ *
+ * A brand that already owns an `auth/layout.tsx` is triaged rather than refused
+ * wholesale. Nested layouts compose, so when that layout simply wraps
+ * `children` the group layout goes underneath it and the brand's frame keeps
+ * rendering around the composition. Two shapes cannot be handled and are
+ * reported instead of touched: a layout that imports `./page` itself (moving the
+ * page would break the import) and a layout that never renders `children` (the
+ * nested slot would never render). Both mean the "layout" is really the page.
+ *
+ * The layout it writes is a pz-theme component, and a project does not always
+ * have pz-theme: the v1 app template ships without it. Such a project is left
+ * untouched, because the written layout would break its build on the import.
+ *
+ * Usage:
+ *   node codemods/composable-auth/index.js [--dry-run]
+ *   npx @akinon/projectzero codemod --codemod=composable-auth [--dry-run]
+ */
+
+const path = require('path');
+const fs = require('fs');
+
+const GROUP_DIR = '(login)';
+
+// The first @akinon/pz-theme with every API the layout below uses:
+// `PLACEHOLDER_SLUGS.auth` arrived in 2.0.38, ChromeSlot's
+// `fallbackClassName` in 2.0.41.
+const MIN_PZ_THEME_VERSION = '2.0.41';
+
+const LAYOUT_SOURCE = `import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+
+/**
+ * The login screen is handed to the theme editor here rather than in page.tsx,
+ * because the slot is an async server component and the page is a client one.
+ * With no composition published the slot renders the page untouched.
+ *
+ * The slot lives in a \`(login)\` route group so the composition covers exactly
+ * this screen: \`auth/oauth-login\` is a provider callback, and a login body
+ * mounted one level up would replace it too.
+ *
+ * No \`pageContext\`: an auth screen fetches no commerce data, and the blocks a
+ * designer rebuilds it from (\`auth-form\`, \`register-form\`, \`oauth-buttons\`)
+ * read the session client-side.
+ */
+export default function LoginLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    // \`contents\` on both wrappers keeps the slot chain layout-transparent, so
+    // an uncomposed login page keeps its own box model even where a brand's
+    // <main> is a flex or grid container.
+    <ChromeSlot
+      slug={PLACEHOLDER_SLUGS.auth}
+      fallback={children}
+      className="contents"
+      fallbackClassName="contents"
+    />
+  );
+}
+`;
+
+function log(msg) {
+  const ts = new Date().toISOString().replace('T', ' ').slice(0, 19);
+  console.log(`[${ts}] ${msg}`);
+}
+
+/**
+ * Every directory named `auth` that holds a login page, anywhere under src/app.
+ * An already-migrated brand keeps its page inside the group, so both spellings
+ * count — otherwise a second run would report "nothing to do" and a brand whose
+ * layout went missing could never be repaired.
+ */
+function findAuthPageDirs(appRoot) {
+  const found = [];
+
+  const visit = (dir) => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue;
+
+      const entryPath = path.join(dir, entry.name);
+
+      if (
+        entry.name === 'auth' &&
+        (fs.existsSync(path.join(entryPath, 'page.tsx')) ||
+          fs.existsSync(path.join(entryPath, GROUP_DIR, 'page.tsx')))
+      ) {
+        found.push(entryPath);
+      }
+
+      visit(entryPath);
+    }
+  };
+
+  visit(appRoot);
+
+  return found;
+}
+
+function readJson(filePath) {
+  try {
+    return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+  } catch (error) {
+    return null;
+  }
+}
+
+function isOlderVersion(version, minimum) {
+  const parts = (value) => value.split('.').map((part) => parseInt(part, 10));
+  const [a, b] = [parts(version), parts(minimum)];
+
+  for (let i = 0; i < 3; i++) {
+    if (a[i] !== b[i]) return a[i] < b[i];
+  }
+
+  return false;
+}
+
+/**
+ * Why the project cannot take the mount yet, or null when it can. The
+ * installed copy is what the build will compile, so its version wins over the
+ * range in package.json; the range only answers before an install.
+ */
+function findPzThemeProblem(cwd) {
+  const pkg = readJson(path.join(cwd, 'package.json')) || {};
+  const declared = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies
+  }['@akinon/pz-theme'];
+
+  if (!declared) {
+    return (
+      '@akinon/pz-theme is not a dependency of this project, and the login ' +
+      'slot is a pz-theme component. Add pz-theme first (on @akinon/next 1.x, ' +
+      'version 2.0.106 or later), then run this codemod again.'
+    );
+  }
+
+  const installed = readJson(
+    path.join(cwd, 'node_modules', '@akinon', 'pz-theme', 'package.json')
+  );
+  const version =
+    (installed && installed.version) ||
+    (String(declared).match(/\d+\.\d+\.\d+/) || [])[0];
+
+  if (version && isOlderVersion(version, MIN_PZ_THEME_VERSION)) {
+    return (
+      `@akinon/pz-theme ${version} predates the login slot API ` +
+      `(${MIN_PZ_THEME_VERSION}). Upgrade pz-theme, then run this codemod again.`
+    );
+  }
+
+  return null;
+}
+
+const transform = () => {
+  const cwd = path.resolve(process.cwd());
+  const dryRun = process.argv.includes('--dry-run');
+  const appRoot = path.join(cwd, 'src', 'app');
+
+  if (!fs.existsSync(appRoot)) {
+    log(`composable-auth: no src/app at ${cwd}, skipping`);
+    return;
+  }
+
+  const authDirs = findAuthPageDirs(appRoot);
+
+  if (authDirs.length === 0) {
+    log('composable-auth: no auth/page.tsx found, nothing to do');
+    return;
+  }
+
+  const pzThemeProblem = findPzThemeProblem(cwd);
+
+  if (pzThemeProblem) {
+    log(`composable-auth: ${pzThemeProblem} Nothing was changed.`);
+    return;
+  }
+
+  let mounted = 0;
+  let already = 0;
+  let manual = 0;
+
+  for (const authDir of authDirs) {
+    const relative = path.relative(cwd, authDir).split(path.sep).join('/');
+    const groupDir = path.join(authDir, GROUP_DIR);
+    const layoutPath = path.join(groupDir, 'layout.tsx');
+    const groupPagePath = path.join(groupDir, 'page.tsx');
+    const pagePath = path.join(authDir, 'page.tsx');
+
+    if (fs.existsSync(groupPagePath) && fs.existsSync(layoutPath)) {
+      log(`composable-auth: ${relative} already mounted, skipping`);
+      already++;
+      continue;
+    }
+
+    const brandLayoutPath = path.join(authDir, 'layout.tsx');
+    let nestsUnderBrandLayout = false;
+
+    if (fs.existsSync(brandLayoutPath)) {
+      const brandLayout = fs.readFileSync(brandLayoutPath, 'utf8');
+
+      if (/(from|require\()\s*['"]\.\/page['"]/.test(brandLayout)) {
+        log(
+          `composable-auth: ${relative}/layout.tsx imports ./page itself, so ` +
+            'moving the page would break that import. Mount the slot inside ' +
+            'that file by hand. Skipping.'
+        );
+        manual++;
+        continue;
+      }
+
+      if (!brandLayout.includes('children')) {
+        log(
+          `composable-auth: ${relative}/layout.tsx never renders children — it ` +
+            'is the login screen wearing a layout filename, so a nested slot ' +
+            'would never render. Mount the slot inside that file by hand. ' +
+            'Skipping.'
+        );
+        manual++;
+        continue;
+      }
+
+      // Nested layouts compose: the brand's frame stays outside the slot and
+      // keeps wrapping whatever the designer composes.
+      nestsUnderBrandLayout = true;
+    }
+
+    const needsMove = !fs.existsSync(groupPagePath);
+
+    if (dryRun) {
+      log(
+        needsMove
+          ? `composable-auth: would move ${relative}/page.tsx into ` +
+              `${GROUP_DIR}/ and write ${GROUP_DIR}/layout.tsx`
+          : `composable-auth: would write the missing ${relative}/${GROUP_DIR}/layout.tsx`
+      );
+      mounted++;
+      continue;
+    }
+
+    fs.mkdirSync(groupDir, { recursive: true });
+
+    if (needsMove) {
+      fs.renameSync(pagePath, groupPagePath);
+    }
+
+    fs.writeFileSync(layoutPath, LAYOUT_SOURCE, 'utf8');
+
+    log(
+      nestsUnderBrandLayout
+        ? `composable-auth: mounted the login body slot in ${relative}, nested ` +
+            'under the existing auth layout — that frame still renders around ' +
+            'the composition'
+        : `composable-auth: mounted the login body slot in ${relative}`
+    );
+    mounted++;
+  }
+
+  log(
+    `composable-auth: ${mounted} mounted, ${already} already done, ` +
+      `${manual} need a manual merge${dryRun ? ' (dry-run, nothing written)' : ''}`
+  );
+};
+
+module.exports = { transform };
+
+if (require.main === module) {
+  transform();
+}

package/commands/plugins.ts

@@ -191,6 +191,10 @@ export default async () => {
     {
       name: 'Google Pay',
       value: 'pz-google-pay'
+    },
+    {
+      name: 'List Hover Image',
+      value: 'pz-list-hover-image'
     }
   ];
 

package/dist/commands/plugins.js

@@ -179,6 +179,10 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
         {
             name: 'Google Pay',
             value: 'pz-google-pay'
+        },
+        {
+            name: 'List Hover Image',
+            value: 'pz-list-hover-image'
         }
     ];
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "1.126.16",
+  "version": "1.126.17",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {