chore: Prototype (Will be deleted)

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

examples-list.json

@@ -1,4 +1,8 @@
 [
+  {
+    "path": "components-overview",
+    "title": "Components overview"
+  },
   {
     "path": "cards",
     "title": "Card view"
@@ -7,10 +11,6 @@
     "path": "chat",
     "title": "Chat"
   },
-  {
-    "path": "delete-one-click",
-    "title": "One-click delete"
-  },
   {
     "path": "delete-with-simple-confirmation",
     "title": "Delete with simple confirmation"
@@ -51,14 +51,6 @@
     "path": "product-detail-page",
     "title": "Product detail page"
   },
-  {
-    "path": "server-side-table",
-    "title": "Table view (server-side)"
-  },
-  {
-    "path": "server-side-table-property-filter",
-    "title": "Table property filter (server-side)"
-  },
   {
     "path": "table-property-filter",
     "title": "Table property filter"
@@ -91,14 +83,6 @@
     "path": "manage-tags",
     "title": "Manage tags"
   },
-  {
-    "path": "read-from-s3",
-    "title": "Read from Amazon S3"
-  },
-  {
-    "path": "write-to-s3",
-    "title": "Write to Amazon S3"
-  },
   {
     "path": "wizard",
     "title": "Multipage create"

package.json

@@ -26,14 +26,14 @@
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@cloudscape-design/board-components": "^3.0.0",
+    "@cloudscape-design/board-components": "^3.0.150",
     "@cloudscape-design/browser-test-tools": "^3.0.0",
-    "@cloudscape-design/chart-components": "^1.0.0",
-    "@cloudscape-design/chat-components": "^1.0.0",
-    "@cloudscape-design/code-view": "^3.0.0",
+    "@cloudscape-design/chart-components": "^1.0.57",
+    "@cloudscape-design/chat-components": "^1.0.99",
+    "@cloudscape-design/code-view": "^3.0.104",
     "@cloudscape-design/collection-hooks": "^1.0.0",
     "@cloudscape-design/component-toolkit": "^1.0.0-beta",
-    "@cloudscape-design/components": "^3.0.0",
+    "@cloudscape-design/components": "^3.0.1217",
     "@cloudscape-design/design-tokens": "^3.0.0",
     "@cloudscape-design/global-styles": "^1.0.0",
     "@cloudscape-design/test-utils-core": "^1.0.0",

scripts/add-global-drawer.js

@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+
+// Script to add WithGlobalDrawer wrapper to all page index files
+
+import fs from 'fs';
+import path from 'path';
+import { glob } from 'glob';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const pagesDir = path.join(__dirname, '../src/pages');
+
+// Pages that already have the wrapper or have special handling
+const skipPages = ['cards', 'components-overview', 'commons'];
+
+function updateIndexFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+
+  // Skip if already has WithGlobalDrawer
+  if (content.includes('WithGlobalDrawer')) {
+    console.log(`Skipping ${filePath} - already updated`);
+    return false;
+  }
+
+  let updated = content;
+
+  // Add WithGlobalDrawer to imports from common-components
+  if (content.includes("from '../commons/common-components'")) {
+    updated = updated.replace(/(from ['"]\.\.\/commons\/common-components['"])/, match => {
+      const importLine = content.match(/import\s+{([^}]+)}\s+from\s+['"]\.\.\/commons\/common-components['"]/);
+      if (importLine && !importLine[1].includes('WithGlobalDrawer')) {
+        return match.replace(/import\s+{([^}]+)}/, (m, imports) => `import { ${imports.trim()}, WithGlobalDrawer }`);
+      }
+      return match;
+    });
+  } else if (content.includes("from '../commons'")) {
+    // Add import if only importing from commons
+    updated = updated.replace(
+      /(import\s+{[^}]+}\s+from\s+['"]\.\.\/commons['"];)/,
+      `$1\nimport { WithGlobalDrawer } from '../commons/common-components';`,
+    );
+  } else {
+    // Add new import line
+    const lastImportIndex = updated.lastIndexOf('import ');
+    const endOfLine = updated.indexOf('\n', lastImportIndex);
+    updated =
+      updated.slice(0, endOfLine + 1) +
+      "import { WithGlobalDrawer } from '../commons/common-components';\n" +
+      updated.slice(endOfLine + 1);
+  }
+
+  // Wrap the render call with WithGlobalDrawer
+  // Handle simple case: render(<App />)
+  updated = updated.replace(
+    /createRoot\(document\.getElementById\(['"]app['"]\)!\)\.render\(<App\s*\/>\);/,
+    `createRoot(document.getElementById('app')!).render(\n  <WithGlobalDrawer>\n    <App />\n  </WithGlobalDrawer>\n);`,
+  );
+
+  // Handle case with props: render(<App prop={value} />)
+  updated = updated.replace(
+    /createRoot\(document\.getElementById\(['"]app['"]\)!\)\.render\(<App\s+([^>]+)\/>\);/,
+    `createRoot(document.getElementById('app')!).render(\n  <WithGlobalDrawer>\n    <App $1/>\n  </WithGlobalDrawer>\n);`,
+  );
+
+  // Handle multiline render with existing wrapper (like onboarding)
+  updated = updated.replace(
+    /createRoot\(document\.getElementById\(['"]app['"]\)!\)\.render\(\s*\n\s*<(\w+)>\s*\n\s*<App>/,
+    (match, wrapper) => {
+      if (wrapper !== 'WithGlobalDrawer') {
+        return `createRoot(document.getElementById('app')!).render(\n  <WithGlobalDrawer>\n    <${wrapper}>\n      <App>`;
+      }
+      return match;
+    },
+  );
+
+  if (updated !== content) {
+    fs.writeFileSync(filePath, updated, 'utf8');
+    console.log(`Updated ${filePath}`);
+    return true;
+  }
+
+  console.log(`No changes needed for ${filePath}`);
+  return false;
+}
+
+async function main() {
+  const indexFiles = await glob('**/index.tsx', { cwd: pagesDir, absolute: true });
+
+  let updatedCount = 0;
+  for (const file of indexFiles) {
+    const pageName = path.basename(path.dirname(file));
+    if (skipPages.includes(pageName)) {
+      console.log(`Skipping ${pageName} (in skip list)`);
+      continue;
+    }
+
+    const wasUpdated = updateIndexFile(file);
+    if (wasUpdated) {
+      updatedCount++;
+    }
+  }
+
+  console.log(`\nCompleted! Updated ${updatedCount} files.`);
+}
+
+main().catch(console.error);

scripts/add-split-panel-preferences.js

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const pagesDir = path.join(__dirname, '../src/pages');
+
+function addSplitPanelPreferences(filePath) {
+  let content = fs.readFileSync(filePath, 'utf8');
+
+  // Check if file uses useGlobalSplitPanel
+  if (!content.includes('useGlobalSplitPanel')) {
+    return false;
+  }
+
+  // Check if splitPanelPreferences is already in the file
+  if (content.includes('splitPanelPreferences')) {
+    // Check if it's in the destructuring
+    const hookPattern = /const\s+{\s*([^}]+)\s*}\s*=\s*useGlobalSplitPanel\(\)/;
+    const match = content.match(hookPattern);
+
+    if (match && !match[1].includes('splitPanelPreferences')) {
+      // Add to destructuring
+      const currentProps = match[1];
+      const newProps = currentProps.trim() + ',\n    splitPanelPreferences';
+      content = content.replace(hookPattern, `const { ${newProps} } = useGlobalSplitPanel()`);
+    }
+
+    // Check if prop is added to CustomAppLayout
+    if (!content.includes('splitPanelPreferences={splitPanelPreferences}')) {
+      // Add prop before splitPanel=
+      const pattern = /(onSplitPanelResize=\{onSplitPanelResize\})\s*\n(\s*)(splitPanel=)/;
+      if (pattern.test(content)) {
+        content = content.replace(pattern, '$1\n$2splitPanelPreferences={splitPanelPreferences}\n$2$3');
+        fs.writeFileSync(filePath, content, 'utf8');
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // Add splitPanelPreferences to destructuring
+  const hookPattern = /const\s+{\s*([^}]+)\s*}\s*=\s*useGlobalSplitPanel\(\)/;
+  const match = content.match(hookPattern);
+
+  if (match) {
+    const currentProps = match[1];
+    const newProps = currentProps.trim() + ',\n    splitPanelPreferences';
+    content = content.replace(hookPattern, `const { ${newProps} } = useGlobalSplitPanel()`);
+
+    // Add prop before splitPanel=
+    const pattern = /(onSplitPanelResize=\{onSplitPanelResize\})\s*\n(\s*)(splitPanel=)/;
+    if (pattern.test(content)) {
+      content = content.replace(pattern, '$1\n$2splitPanelPreferences={splitPanelPreferences}\n$2$3');
+    }
+
+    fs.writeFileSync(filePath, content, 'utf8');
+    return true;
+  }
+
+  return false;
+}
+
+function processDirectory(dir) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  let updatedCount = 0;
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      updatedCount += processDirectory(fullPath);
+    } else if (entry.name === 'app.tsx' || entry.name === 'root.tsx') {
+      if (addSplitPanelPreferences(fullPath)) {
+        console.log(`✓ Updated: ${path.relative(pagesDir, fullPath)}`);
+        updatedCount++;
+      }
+    }
+  }
+
+  return updatedCount;
+}
+
+console.log('Adding splitPanelPreferences prop to CustomAppLayout...\n');
+const count = processDirectory(pagesDir);
+console.log(`\n✓ Updated ${count} files`);

scripts/cleanup-old-drawer.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Cleanup script to remove old global drawer files after migration
+
+echo "🧹 Cleaning up old global drawer files..."
+
+# Remove old drawer implementation files
+if [ -f "src/pages/commons/global-drawer-plugin.tsx" ]; then
+  rm src/pages/commons/global-drawer-plugin.tsx
+  echo "✓ Removed src/pages/commons/global-drawer-plugin.tsx"
+fi
+
+if [ -f "src/pages/commons/with-global-drawer.tsx" ]; then
+  rm src/pages/commons/with-global-drawer.tsx
+  echo "✓ Removed src/pages/commons/with-global-drawer.tsx"
+fi
+
+if [ -f "src/common/mount.tsx" ]; then
+  rm src/common/mount.tsx
+  echo "✓ Removed src/common/mount.tsx"
+fi
+
+if [ -f "scripts/add-global-drawer.js" ]; then
+  rm scripts/add-global-drawer.js
+  echo "✓ Removed scripts/add-global-drawer.js"
+fi
+
+if [ -f "GLOBAL_DRAWER_IMPLEMENTATION.md" ]; then
+  rm GLOBAL_DRAWER_IMPLEMENTATION.md
+  echo "✓ Removed GLOBAL_DRAWER_IMPLEMENTATION.md"
+fi
+
+echo ""
+echo "✅ Cleanup complete!"
+echo ""
+echo "Next steps:"
+echo "1. Update src/pages/commons/common-components.tsx to remove old exports"
+echo "2. Run 'npm run build' to verify everything still works"
+echo "3. Test the pages in the browser"