feat: Add theming script (#10)

* feat: Add theming script

Author: Rúben Carvalho

.github/workflows/release.yml

@@ -16,3 +16,5 @@ jobs:
   release:
     uses: cloudscape-design/actions/.github/workflows/release.yml@main
     secrets: inherit
+    with:
+      publish-packages: lib/components,lib/components-themeable

README.md

@@ -1,4 +1,4 @@
-## React components for Cloudscape Design System
+## Code view component for Cloudscape Design System
 
 This package contains the source code of the Code View component in the [Cloudscape Design System](https://cloudscape.design/).
 For more information about the code view component, see [the documentation](https://cloudscape.design/components/code-view/).

package.json

@@ -8,7 +8,7 @@
   "homepage": "https://cloudscape.design",
   "scripts": {
     "prebuild": "rm -rf lib dist .cache",
-    "build": "npm-run-all build:pkg --parallel build:src:* --parallel build:pages:*",
+    "build": "npm-run-all build:pkg --parallel build:src:* --parallel build:pages:* build:themeable",
     "lint": "eslint --ignore-path .gitignore --ext ts,tsx,js . && stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
     "prepare": "husky install",
     "test:unit": "vitest run --config vite.unit.config.mjs",
@@ -29,6 +29,7 @@
     "build:src:copy": "cp README.md lib/components/",
     "build:src:docs": "node scripts/docs.js",
     "build:src:environment": "node scripts/environment",
+    "build:themeable": "node scripts/themeable-source",
     "build:pages:vite": "vite build",
     "build:pages:tsc": "tsc -p pages/tsconfig.json"
   },

scripts/package-json.js

@@ -6,6 +6,7 @@ import { writeJSON } from "./utils.js";
 const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
 
 mainPackage();
+themablePackage();
 
 function mainPackage() {
   writeJSON("lib/components/package.json", {
@@ -14,3 +15,12 @@ function mainPackage() {
     scripts: undefined,
   });
 }
+
+function themablePackage() {
+  writeJSON("lib/components-themeable/package.json", {
+    name: "@cloudscape-design/code-view-themeable",
+    version: pkg.version,
+    repository: pkg.repository,
+    homepage: pkg.homepage,
+  });
+}

scripts/themeable-source.js

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+import { globbySync } from "globby";
+const cwd = process.cwd();
+
+const targetDir = path.join(cwd, "./lib/components-themeable/internal");
+const stylesSourceDir = path.join(cwd, "./src/");
+const stylesTargetDir = path.join(targetDir, "/scss");
+
+const componentsSourceDir = path.join(cwd, "./lib/components");
+const componentsTargetDir = path.join(targetDir, "/template");
+
+function copyStyles() {
+  for (const file of globbySync("**/*.scss", { cwd: stylesSourceDir })) {
+    const content = fs.readFileSync(path.join(stylesSourceDir, file), "utf-8");
+    fs.mkdirSync(path.join(stylesTargetDir, path.dirname(file)), { recursive: true });
+    fs.writeFileSync(
+      path.join(stylesTargetDir, file),
+      content.replace(
+        /@use "(\.\.\/)+node_modules\/@cloudscape-design\/design-tokens\/index.scss"/,
+        '@use "awsui:tokens"'
+      ),
+      "utf-8"
+    );
+  }
+}
+
+function copyTemplate() {
+  fs.mkdirSync(componentsTargetDir, { recursive: true });
+  fs.cpSync(componentsSourceDir, componentsTargetDir, { recursive: true });
+}
+
+copyTemplate();
+copyStyles();