Dev v3 amanabiy pages

.stylelintrc

@@ -66,6 +66,6 @@
     "stylelint-use-logical",
     "stylelint-order",
     "stylelint-no-unsupported-browser-features",
-    "@cloudscape-design/build-tools/stylelint"
+    "@cloudscape-design/build-tools/src/stylelint"
   ]
 }

build-tools/tasks/copy-shared-utils.js

@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const { cpSync } = require('node:fs');
+const path = require('path');
+const { mkdirSync, existsSync } = require('fs');
+
+module.exports = function copySharedUtils() {
+  const targetPath = path.join('lib', 'dev-pages', 'pages', 'shared-utils');
+
+  if (!existsSync(targetPath)) {
+    mkdirSync(targetPath, { recursive: true });
+  }
+
+  cpSync('node_modules/@cloudscape-design/build-tools/src/test-pages-util', targetPath, { recursive: true });
+  return Promise.resolve();
+};

build-tools/tasks/index.js

@@ -18,6 +18,7 @@ module.exports = {
   integ: require('./integ'),
   motion: require('./motion'),
   copyFiles: require('./copy-files'),
+  copySharedUtils: require('./copy-shared-utils'),
   themeableSource: require('./themeable-source'),
   bundleVendorFiles: require('./bundle-vendor-files'),
   sizeLimit: require('./size-limit'),

eslint.config.mjs

@@ -14,7 +14,7 @@ import globals from 'globals';
 import path from 'node:path';
 import tsEslint from 'typescript-eslint';
 
-import cloudscapeCommonRules from '@cloudscape-design/build-tools/eslint/index.js';
+import cloudscapeCommonRules from '@cloudscape-design/build-tools/src/eslint/index.js';
 
 import cloudscapeComponentsRules from './build-tools/eslint/index.js';
 
@@ -48,7 +48,7 @@ export default tsEslint.config(
     plugins: {
       'simple-import-sort': simpleImportSortPlugin,
       '@cloudscape-design/components': cloudscapeComponentsRules,
-      '@cloudscape-design/build-tools': cloudscapeCommonRules,
+      'git-build-tools': cloudscapeCommonRules,
       unicorn: unicornPlugin,
       header: headerPlugin,
     },
@@ -64,7 +64,7 @@ export default tsEslint.config(
       'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
       'react/prop-types': 'off',
       'react/jsx-boolean-value': ['error', 'always'],
-      '@cloudscape-design/build-tools/react-server-components-directive': 'error',
+      'git-build-tools/react-server-components-directive': 'error',
       '@cloudscape-design/components/ban-files': [
         'error',
         [

gulpfile.js

@@ -20,14 +20,23 @@ const {
   integ,
   motion,
   copyFiles,
+  copySharedUtils,
   themeableSource,
   bundleVendorFiles,
   sizeLimit,
 } = require('./build-tools/tasks');
 
 const quickBuild = series(
   clean,
-  parallel(packageJSON, generateI18nMessages, generateEnvironment, generateIcons, generateIndexFile, copyFiles),
+  parallel(
+    packageJSON,
+    generateI18nMessages,
+    generateEnvironment,
+    generateIcons,
+    generateIndexFile,
+    copySharedUtils,
+    copyFiles
+  ),
   parallel(generateCustomCssPropertiesMap, styles, typescript, testUtils),
   bundleVendorFiles
 );

package.json

@@ -53,7 +53,7 @@
     "@babel/core": "^7.23.7",
     "@babel/plugin-syntax-typescript": "^7.23.3",
     "@cloudscape-design/browser-test-tools": "^3.0.0",
-    "@cloudscape-design/build-tools": "^3.0.0",
+    "@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#add-test-pages-util-permutation-view",
     "@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,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 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';
 

pages/alert/runtime-action.page.tsx

@@ -2,14 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Alert, { AlertProps } from '~components/alert';
 import Button from '~components/button';
 import awsuiPlugins from '~components/internal/plugins';
 import SpaceBetween from '~components/space-between';
 import { mount, unmount } from '~mount';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 import { i18nStrings } from './common';
 

pages/area-chart/permutations.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import { AreaChartProps } from '~components/area-chart';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 import Example, { ExampleProps } from './example';
 

pages/attribute-editor/permutations.page.tsx

@@ -2,13 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import AttributeEditor, { AttributeEditorProps } from '~components/attribute-editor';
 import Box from '~components/box';
 import Input from '~components/input';
 import StatusIndicator from '~components/status-indicator';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 interface Item {

pages/autosuggest/permutations-async.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const enteredTextLabel = (value: string) => `Use: ${value}`;

pages/autosuggest/permutations.page.tsx

@@ -3,10 +3,11 @@
 import React from 'react';
 import range from 'lodash/range';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 import img from './images/icon.png';
 

pages/autosuggest/style-permutations.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const style1 = {

pages/badge/permutations.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Badge, { BadgeProps } from '~components/badge';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<BadgeProps>([

pages/bar-chart/horizontal-bars-permutations.page.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import BarChart, { BarChartProps } from '~components/bar-chart';
 
 import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<BarChartProps<string>>([

pages/bar-chart/horizontal-stacked-bars-permutations.page.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import BarChart, { BarChartProps } from '~components/bar-chart';
 
 import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<BarChartProps<string>>([

pages/bar-chart/other-permutations.page.tsx

@@ -2,6 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import BarChart, { BarChartProps } from '~components/bar-chart';
 import { colorChartsThresholdInfo, colorChartsThresholdNeutral } from '~design-tokens';
 
@@ -14,8 +17,6 @@ import {
   multipleNegativeBarsData,
   negativeData,
 } from '../mixed-line-bar-chart/common';
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 import { smallBarsData } from './common';
 

pages/bar-chart/stacked-permutations.page.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import BarChart, { BarChartProps } from '~components/bar-chart';
 
 import { commonProps, multipleNegativeBarsData as data } from '../mixed-line-bar-chart/common';
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const thresholdSeries = { type: 'threshold', title: 'Limit', y: 4 } as const;

pages/bar-chart/threshold-permutations.page.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import BarChart, { BarChartProps } from '~components/bar-chart';
 
 import { commonProps, multipleNegativeBarsDataWithThreshold } from '../mixed-line-bar-chart/common';
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<BarChartProps<string>>([

pages/bar-chart/vertical-bars-permutations.page.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import BarChart, { BarChartProps } from '~components/bar-chart';
 
 import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<BarChartProps<string>>([

pages/bar-chart/vertical-stacked-bars-permutations.page.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import BarChart, { BarChartProps } from '~components/bar-chart';
 
 import { commonProps, multipleBarsData } from '../mixed-line-bar-chart/common';
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const permutations = createPermutations<BarChartProps<string>>([

pages/box/elements-with-extra-defaults.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Box, { BoxProps } from '~components/box';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 import styles from './style.scss';

pages/box/float-align.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Box, { BoxProps } from '~components/box';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 import styles from './style.scss';

pages/box/margins.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Box, { BoxProps } from '~components/box';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 import spacings from './spacings';
 

pages/box/paddings.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Box, { BoxProps } from '~components/box';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 import spacings from './spacings';
 

pages/box/variants.page.tsx

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { createPermutations } from '@cloudscape-design/build-tools/src/test-pages-util';
+import { PermutationsView } from '@cloudscape-design/build-tools/src/test-pages-util';
+
 import Box, { BoxProps } from '~components/box';
 
-import createPermutations from '../utils/permutations';
-import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 import styles from './style.scss';