chore: Fix components-themable output (#85)

- Include required files to create a themeable package

Co-authored-by: Andrei Zhaleznichenka <[email protected]>

Author: michaeldowseza

package.json

@@ -34,7 +34,7 @@
     "build:src:copy": "cp README.md NOTICE LICENSE lib/components/",
     "build:src:docs": "node scripts/docs.js",
     "build:src:environment": "node scripts/environment",
-    "build:themeable": "node scripts/themeable-source",
+    "build:themeable": "tsc -p tsconfig.src-themeable.json && node scripts/themeable-source.js",
     "build:pages:vite": "vite build",
     "build:pages:tsc": "tsc -p pages/tsconfig.json"
   },

scripts/package-json.js

@@ -23,5 +23,11 @@ function themablePackage() {
     version: pkg.version,
     repository: pkg.repository,
     homepage: pkg.homepage,
+    exports: {
+      ".": {
+        types: "./theming.d.ts",
+        import: "./theming.js",
+      },
+    },
   });
 }

scripts/themeable-source.js

@@ -32,6 +32,18 @@ function copyStyles() {
 function copyTemplate() {
   fs.mkdirSync(componentsTargetDir, { recursive: true });
   fs.cpSync(componentsSourceDir, componentsTargetDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(componentsTargetDir, "package.json"),
+    JSON.stringify(
+      {
+        name: "@cloudscape-design/chat-components-themed",
+        version: "1.0.0",
+      },
+      null,
+      2,
+    ),
+    "utf-8",
+  );
 }
 
 copyTemplate();

src-themeable/internal/template/internal/generated/theming/index.cjs.d.ts

@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { GlobalValue, ThemePreset, TypedModeValueOverride } from "@cloudscape-design/theming-build";
+
+export interface TypedOverride {
+  tokens: Partial<Record<string, GlobalValue | TypedModeValueOverride>>;
+}
+export const preset: ThemePreset;

src-themeable/theming.ts

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { join } from "node:path";
+
+import { buildThemedComponents as themingCoreBuild } from "@cloudscape-design/theming-build";
+
+// eslint-disable-next-line import/no-useless-path-segments
+import { preset, TypedOverride } from "./internal/template/internal/generated/theming/index.cjs";
+
+const internalDir = join(__dirname, "./internal");
+const scssDir = join(internalDir, "./scss");
+const templateDir = join(internalDir, "./template");
+const designTokensTemplateDir = join(internalDir, "./template-tokens");
+
+export type Theme = TypedOverride;
+export interface BuildThemedComponentsParams {
+  theme: Theme;
+  outputDir: string;
+  baseThemeId?: string;
+}
+
+export function buildThemedComponents({ theme, outputDir, baseThemeId }: BuildThemedComponentsParams): Promise<void> {
+  return themingCoreBuild({
+    override: theme,
+    preset,
+    baseThemeId,
+    componentsOutputDir: join(outputDir, "components"),
+    designTokensOutputDir: join(outputDir, "design-tokens"),
+    templateDir,
+    designTokensTemplateDir,
+    scssDir,
+  });
+}

tsconfig.src-themeable.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "lib": ["es2019", "dom", "dom.iterable"],
+    "target": "ES2019",
+    "module": "ESNext",
+    "moduleResolution": "nodenext",
+    "rootDir": "src-themeable",
+    "declaration": true,
+    "incremental": true,
+    "outDir": "lib/components-themeable",
+    "skipLibCheck": true,
+    "strict": true,
+    "tsBuildInfoFile": "./.cache/themeable-source.tsbuildinfo"
+  },
+  "include": ["src-themeable"],
+  "exclude": ["**/__tests__/**", "src/test-utils/**"]
+}