feat: allow consuming permutations view from build-tools

Author: amanabiy

.gitignore

@@ -15,3 +15,4 @@ vendor/generated-*.txt
 .vscode
 # System
 .DS_Store
+shared/

package.json

@@ -25,7 +25,8 @@
     "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.cjs",
     "start:react18": "npm-run-all --parallel start:watch start:react18:dev",
     "start:react18:dev": "cross-env NODE_ENV=development REACT_VERSION=18 webpack serve --config pages/webpack.config.cjs",
-    "prepare": "husky"
+    "prepare": "husky",
+    "preinstall": "node ./scripts/setup-build-tools"
   },
   "dependencies": {
     "@cloudscape-design/collection-hooks": "^1.0.0",
@@ -53,7 +54,8 @@
     "@babel/core": "^7.23.7",
     "@babel/plugin-syntax-typescript": "^7.23.3",
     "@cloudscape-design/browser-test-tools": "^3.0.0",
-    "@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#main",
+    "@cloudscape-design/build-tools-repo": "github:cloudscape-design/build-tools#add-test-pages-util-permutation-view",
+    "@cloudscape-design/build-tools": "file:./shared/build-tools",
     "@cloudscape-design/documenter": "^1.0.0",
     "@cloudscape-design/global-styles": "^1.0.0",
     "@cloudscape-design/jest-preset": "^2.0.0",

pages/alert/permutations.page.tsx

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations, PermutationsView } from '@cloudscape-design/build-tools/lib/dev-pages-utils';
+
 import Alert, { AlertProps } from '~components/alert';
 import Button from '~components/button';
 import ExpandableSection from '~components/expandable-section';
 import Link from '~components/link';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 import { i18nStrings } from './common';
 
@@ -111,7 +111,10 @@ export default function AlertScenario() {
     <article>
       <h1>Alert permutations</h1>
       <ScreenshotArea>
-        <PermutationsView permutations={permutations} render={permutation => <Alert {...permutation} />} />
+        <PermutationsView
+          permutations={permutations}
+          render={(permutation: AlertProps) => <Alert {...permutation} />}
+        />
       </ScreenshotArea>
     </article>
   );

scripts/setup-build-tools.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Can be used in postinstall script like so:
+// "postinstall": "node ./scripts/install-peer-dependency.js collection-hooks:property-filter-token-groups"
+// where "collection-hooks" is the package to fetch and "property-filter-token-groups" is the branch name in GitHub.
+
+import { execSync } from 'child_process';
+import process from 'node:process';
+import path from 'path';
+
+const branch = 'add-test-pages-util-permutation-view';
+const packageName = 'build-tools';
+const targetRepository = `https://github.com/cloudscape-design/${packageName}.git`;
+const copyBuildToolsPath = path.join(process.cwd(), 'shared', 'build-tools');
+execCommand(`mkdir -p ${copyBuildToolsPath}`);
+execCommand(`rm -rf ${copyBuildToolsPath}`);
+execCommand(`git clone --branch ${branch} --single-branch ${targetRepository} ${copyBuildToolsPath}`);
+
+console.log(`build-tools has been successfully installed!`);
+
+function execCommand(command, options = {}) {
+  try {
+    execSync(command, { stdio: 'inherit', ...options });
+  } catch (error) {
+    console.error(`Error executing command: ${command}`);
+    console.error(`Error message: ${error.message}`);
+    console.error(`Stdout: ${error.stdout && error.stdout.toString()}`);
+    console.error(`Stderr: ${error.stderr && error.stderr.toString()}`);
+    throw error;
+  }
+}