From fa88908b3321a13e6327a4a45b81ea6cb2ffbfc4 Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Thu, 28 May 2026 18:34:21 +0200 Subject: [PATCH] wip --- package.json | 2 +- scripts/install-peer-dependency.js | 99 + .../classic/contexts/compact-table.ts | 25 +- .../classic/contexts/top-navigation.ts | 10 +- style-dictionary/utils/contexts.ts | 5 +- .../visual-refresh/contexts/compact-table.ts | 25 +- .../visual-refresh/contexts/header.ts | 18 +- .../visual-refresh/contexts/top-navigation.ts | 10 +- v0-styles.scoped.css | 3718 +++++++++++++++++ v1-styles.scoped.css | 2755 ++++++++++++ v2-styles.scoped.css | 3541 ++++++++++++++++ 11 files changed, 10128 insertions(+), 80 deletions(-) create mode 100644 scripts/install-peer-dependency.js create mode 100644 v0-styles.scoped.css create mode 100644 v1-styles.scoped.css create mode 100644 v2-styles.scoped.css diff --git a/package.json b/package.json index fda995324a..0a6c7a0656 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "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", - "postinstall": "prepare-package-lock", + "postinstall": "prepare-package-lock && node ./scripts/install-peer-dependency.js theming-core:context-inherits-mode", "prepare": "husky" }, "dependencies": { diff --git a/scripts/install-peer-dependency.js b/scripts/install-peer-dependency.js new file mode 100644 index 0000000000..8ecddb7f26 --- /dev/null +++ b/scripts/install-peer-dependency.js @@ -0,0 +1,99 @@ +#!/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 os from 'os'; +import path from 'path'; + +const getModules = packageName => { + switch (packageName) { + case 'components': + return ['components', 'design-tokens']; + case 'theming-core': + return ['theming-build', 'theming-runtime']; + case 'test-utils': + return ['test-utils-core', 'test-utils-converter']; + default: + return [packageName]; + } +}; + +const getArtifactPath = moduleName => { + switch (moduleName) { + case 'components': + return '/lib/components/*'; + case 'design-tokens': + return '/lib/design-tokens/*'; + case 'board-components': + return '/lib/components/*'; + case 'theming-build': + return '/lib/node/*'; + case 'theming-runtime': + return '/lib/browser/*'; + case 'test-utils-core': + return '/lib/core/*'; + case 'test-utils-converter': + return '/lib/converter/*'; + default: + return '/lib/*'; + } +}; + +const args = process.argv.slice(2); +if (args.length < 1) { + console.error('Usage: install-peer-dependency.js :'); + process.exit(1); +} +const [packageName, targetBranch] = args[0].split(':'); +const targetRepository = `https://github.com/cloudscape-design/${packageName}.git`; +const nodeModulesPath = path.join(process.cwd(), 'node_modules', '@cloudscape-design'); +const tempDir = path.join(os.tmpdir(), `temp-${packageName}`); + +// Clone the repository and checkout the branch +console.log(`Cloning ${packageName}:${targetBranch}...`); +execCommand(`git clone ${targetRepository} ${tempDir}`); +process.chdir(tempDir); +execCommand(`git checkout ${targetBranch}`); + +// Install dependencies and build +console.log(`Installing dependencies and building ${packageName}...`); +execCommand('npm install'); +execCommand('npm run build'); + +// Remove existing peer dependency in node_modules +for (const moduleName of getModules(packageName)) { + const modulePath = path.join(nodeModulesPath, moduleName); + const artifactPath = getArtifactPath(moduleName); + + console.log(`Removing existing ${moduleName} from node_modules...`, modulePath); + execCommand(`rm -rf ${modulePath}`); + + // Copy built peer dependency to node_modules + console.log(`Copying built ${moduleName} to node_modules...`, modulePath, `${tempDir}${artifactPath}`); + execCommand(`mkdir -p ${modulePath}`); + execCommand(`cp -R ${tempDir}${artifactPath} ${modulePath}`); +} + +// Clean up +console.log('Cleaning up...'); +execCommand(`rm -rf ${tempDir}`); + +console.log(`${packageName} has been successfully installed from branch ${targetBranch}!`); + +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; + } +} diff --git a/style-dictionary/classic/contexts/compact-table.ts b/style-dictionary/classic/contexts/compact-table.ts index ebc31378e1..c704456c7a 100644 --- a/style-dictionary/classic/contexts/compact-table.ts +++ b/style-dictionary/classic/contexts/compact-table.ts @@ -1,29 +1,8 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import merge from 'lodash/merge.js'; -import { expandDensityDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; -import { tokens as parentTokens } from '../spacing.js'; -const spacingTokens: StyleDictionary.SpacingDictionary = { - spaceScaledXxxs: '{spaceNone}', - spaceScaledXxs: '{spaceXxxs}', - spaceScaledXs: '{spaceXxs}', - spaceScaledS: '{spaceXs}', - spaceScaledM: '{spaceS}', - spaceScaledL: '{spaceM}', - spaceScaledXl: '{spaceL}', - spaceScaledXxl: '{spaceXl}', - spaceScaledXxxl: '{spaceXxl}', -}; +const tokens: StyleDictionary.ExpandedDensityScopeDictionary = {}; -const sizeTokens: StyleDictionary.SizesDictionary = { - sizeVerticalInput: '28px', -}; - -const expandedTokens: StyleDictionary.ExpandedDensityScopeDictionary = expandDensityDictionary( - merge({}, parentTokens, { ...spacingTokens, ...sizeTokens }) -); - -export { expandedTokens as tokens }; +export { tokens }; diff --git a/style-dictionary/classic/contexts/top-navigation.ts b/style-dictionary/classic/contexts/top-navigation.ts index bfcd55e997..034fd2eadb 100644 --- a/style-dictionary/classic/contexts/top-navigation.ts +++ b/style-dictionary/classic/contexts/top-navigation.ts @@ -1,21 +1,15 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import merge from 'lodash/merge.js'; -import { expandColorDictionary, pickState } from '../../utils/index.js'; +import { expandColorDictionary } from '../../utils/index.js'; import { StyleDictionary } from '../../utils/interfaces.js'; -import { tokens as parentTokens } from '../colors.js'; const tokens = { colorBackgroundContainerContent: '{colorAwsSquidInk}', colorBackgroundDropdownItemDefault: '{colorAwsSquidInk}', }; -const darkModeValues = pickState(parentTokens, 'dark'); - -const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary( - merge({}, darkModeValues, tokens) -); +const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens); export const mode: StyleDictionary.ModeIdentifier = 'color'; export { expandedTokens as tokens }; diff --git a/style-dictionary/utils/contexts.ts b/style-dictionary/utils/contexts.ts index 5cdb143be2..65b9a4ba33 100644 --- a/style-dictionary/utils/contexts.ts +++ b/style-dictionary/utils/contexts.ts @@ -7,7 +7,7 @@ export const createTopNavigationContext = (tokens: TokenCategory