fix: build issues

Author: nmerget

packages/components/src/components/button/showcase/button.showcase.lite.tsx

@@ -1,7 +1,6 @@
+import { PatternhubProps } from '../../../shared/model';
 import CardWrapperShowcase from '../../../shared/showcase/card-wrapper.showcase.lite';
-import ContainerWrapperShowcase, {
-	PatternhubProps
-} from '../../../shared/showcase/container-wrapper.showcase.lite';
+import ContainerWrapperShowcase from '../../../shared/showcase/container-wrapper.showcase.lite';
 import LinkWrapperShowcase from '../../../shared/showcase/link-wrapper.showcase.lite';
 import ButtonDensity from '../examples/density.example.lite';
 import ButtonDisabled from '../examples/disabled.example.lite';

packages/components/src/shared/model.ts

@@ -718,3 +718,11 @@ export type PopoverState = {
 	handleEnter: (parent?: HTMLElement) => void;
 	handleLeave: (event?: any) => void;
 } & DocumentScrollState;
+
+// TODO: Remove this after we migrate to one-platform
+export interface PatternhubProps {
+	/**
+	 * Used for Patternhub
+	 */
+	isPatternhub?: boolean;
+}

packages/components/src/shared/showcase/card-wrapper.showcase.lite.tsx

@@ -22,7 +22,7 @@ export default function CardWrapperShowcase(props: Props) {
 	}
 
 	onMount(() => {
-		if (window && localStorage) {
+		if (typeof window !== 'undefined' && localStorage) {
 			updateHref();
 		}
 	});

packages/components/src/shared/showcase/container-wrapper.showcase.lite.tsx

@@ -1,12 +1,6 @@
 import { Fragment, onMount, Show, Slot, useState } from '@builder.io/mitosis';
 import DBLink from '../../components/link/link.lite';
-
-export interface PatternhubProps {
-	/**
-	 * Used for Patternhub
-	 */
-	isPatternhub?: boolean;
-}
+import { PatternhubProps } from '../model';
 
 type Props = {
 	title?: string;
@@ -26,35 +20,41 @@ export default function ContainerWrapperShowcase(props: Props) {
 	const [hidden, setHidden] = useState<boolean>(false);
 
 	onMount(() => {
-		const hash = window.location.hash;
-		const queryString = hash.includes('?') ? hash.split('?')[1] : '';
-		const params = new URLSearchParams(
-			window.location.search || queryString
-		);
+		if (typeof window !== 'undefined') {
+			const hash = window.location.hash;
+			const queryString = hash.includes('?') ? hash.split('?')[1] : '';
+			const params = new URLSearchParams(
+				window.location.search || queryString
+			);
 
-		setHidden(Boolean(params.get('page')));
+			setHidden(Boolean(params.get('page')));
+		}
 	});
 
 	function getSourceFilePath(): string | undefined {
 		if (!props.title) return;
 
 		const componentName = props.title
-			.replace(/^DB/, '')
+			?.replace(/^DB/, '')
 			.replaceAll(/([A-Z])/g, (match, letter, index) =>
 				index > 0 ? `-${letter.toLowerCase()}` : letter.toLowerCase()
 			);
 
 		if (componentName && /^[a-z]+(-[a-z]+)*$/.test(componentName)) {
 			return `packages/components/src/components/${componentName}/${componentName}.lite.tsx`;
 		}
+
+		return;
 	}
 
 	function getGitHubSourceUrl(): string | undefined {
 		const filePath = getSourceFilePath();
 		if (!filePath) return;
 
 		const targetBranch =
-			process.env.GITHUB_BRANCH ?? process.env.BRANCH_NAME ?? 'main';
+			process.env['GITHUB_BRANCH'] ??
+			process.env['BRANCH_NAME'] ??
+			'main';
 
 		return `https://github.com/db-ux-design-system/core-web/blob/${targetBranch}/${filePath}`;
 	}

packages/components/src/shared/showcase/link-wrapper.showcase.lite.tsx

@@ -13,20 +13,26 @@ export default function LinkWrapperShowcase(props: Props) {
 	}
 
 	function getHref(): string {
-		const hash = window.location.hash;
-		const basePath = hash.includes('?') ? hash.split('?')[0] : hash;
-		return `${basePath}?page=${getPage()}`;
+		if (typeof window !== 'undefined') {
+			const hash = window.location.hash;
+			const basePath = hash.includes('?') ? hash.split('?')[0] : hash;
+			return `${basePath}?page=${getPage()}`;
+		}
+
+		return '';
 	}
 
 	const [pageParam, setPageParam] = useState<string | null>(null);
 
 	onMount(() => {
-		const hash = window.location.hash;
-		const queryString = hash.includes('?') ? hash.split('?')[1] : '';
-		const params = new URLSearchParams(
-			window.location.search || queryString
-		);
-		setPageParam(params.get('page'));
+		if (typeof window !== 'undefined') {
+			const hash = window.location.hash;
+			const queryString = hash.includes('?') ? hash.split('?')[1] : '';
+			const params = new URLSearchParams(
+				window.location.search || queryString
+			);
+			setPageParam(params.get('page'));
+		}
 	});
 
 	return (

showcases/angular-ssr-showcase/tsconfig.json

@@ -20,7 +20,12 @@
     "module": "ES2022",
     "useDefineForClassFields": false,
     "resolveJsonModule": true,
-    "lib": ["ES2022", "dom"]
+    "lib": ["ES2022", "dom"],
+    "paths": {
+      "@components": ["../../output/angular/src"],
+      "@components/src/*": ["../../output/angular/src/*"],
+      "@components/components/*": ["../../output/angular/src/components/*"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

showcases/next-showcase/tsconfig.json

@@ -14,7 +14,12 @@
 		"jsx": "preserve",
 		"strictNullChecks": true,
 		"downlevelIteration": true,
-		"target": "ES2017"
+		"target": "ES2017",
+		"paths": {
+			"@components": ["../../output/react/src"],
+			"@components/src/*": ["../../output/react/src/*"],
+			"@components/components/*": ["../../output/react/src/components/*"]
+		}
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
 	"exclude": ["node_modules"]

showcases/nuxt-showcase/nuxt.config.ts

@@ -1,3 +1,8 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 export default defineNuxtConfig({
 	telemetry: false,
 	devtools: { enabled: true },
@@ -25,5 +30,8 @@ export default defineNuxtConfig({
 			dir: '../../build-showcases/nuxt-showcase',
 			publicDir: '../../build-showcases/nuxt-showcase'
 		}
+	},
+	alias: {
+		'@components': path.resolve(__dirname, '../../output/vue/src')
 	}
 });

showcases/nuxt-showcase/tsconfig.json

@@ -1,4 +1,11 @@
 {
 	// https://nuxt.com/docs/guide/concepts/typescript
-	"extends": "./.nuxt/tsconfig.json"
+	"extends": "./.nuxt/tsconfig.json",
+	"compilerOptions": {
+		"paths": {
+			"@components": ["../../output/vue/src"],
+			"@components/src/*": ["../../output/vue/src/*"],
+			"@components/components/*": ["../../output/vue/src/components/*"]
+		}
+	}
 }

showcases/patternhub/package.json

@@ -8,9 +8,7 @@
     "build:app": "next build",
     "build:copy": "cpr out ../../build-showcases/patternhub -o",
     "compile": "npm-run-all compile:*",
-    "compile:01_jsx": "node scripts/generate-example-jsx.js",
     "compile:02_copy-docs": "cpr ../../docs ./public/docs -o",
-    "compile:03_components": "node scripts/esbuild-generate.mjs",
     "compile:04_run": "node generated.js",
     "compile:05_test-table": "node scripts/generate-test-table.js",
     "dev": "cross-env NEXT_PUBLIC_BASE_PATH=/core-web/sub NODE_OPTIONS='--inspect' npm-run-all compile:* --parallel open next:dev",