Merge pull request #1048 from db-ui/927-consider-if-we-should-replace…

…-classnames-as-a-dependency-with-utils-function

refactor: simplify classnames dependency usage

output/angular/ng-package.json

@@ -6,7 +6,6 @@
 	},
 	"allowedNonPeerDependencies": [
 		"@db-ui/foundations",
-		"@db-ui/components",
-		"classnames"
+		"@db-ui/components"
 	]
 }

output/angular/package.json

@@ -15,9 +15,6 @@
     "ng": "ng",
     "start": "ng serve"
   },
-  "dependencies": {
-    "classnames": "^2.3.2"
-  },
   "devDependencies": {
     "@angular-devkit/build-angular": "14.2.12",
     "@angular/common": "14.3.0",

output/react/package.json

@@ -24,9 +24,6 @@
     "test:components": "playwright test -c playwright.config.ts",
     "tsc": "tsc -p . --sourceMap false"
   },
-  "dependencies": {
-    "classnames": "^2.3.2"
-  },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
     "@playwright/experimental-ct-react": "1.35.1",

output/webcomponent/package.json

@@ -27,8 +27,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "source": "src/index.js",
-  "dependencies": {
-    "classnames": "^2.3.2"
-  }
+  "source": "src/index.js"
 }

package.json

@@ -73,7 +73,6 @@
     "@commitlint/cli": "17.6.6",
     "@commitlint/config-conventional": "17.6.6",
     "@playwright/test": "1.35.1",
-    "classnames": "^2.3.2",
     "cpr": "3.0.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",

packages/components/_templates/mitosis/new/component/tsx.ejs.t

@@ -3,7 +3,7 @@ to: src/components/<%= name %>/<%= name %>.lite.tsx
 ---
 import { onMount, Show, useMetadata, useStore } from "@builder.io/mitosis";
 import { DB<%= h.changeCase.pascal(name) %>State, DB<%= h.changeCase.pascal(name) %>Props } from "./model";
-import classNames from "classnames";
+import { cls } from "../../utils";
 
 useMetadata({
   isAttachedToShadowDom: true,
@@ -19,9 +19,7 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
   let component: any;
   // jscpd:ignore-start
   const state = useStore<DB<%= h.changeCase.pascal(name) %>State>({
-		getClassNames: (...args: classNames.ArgumentArray) => {
-			return classNames(args);
-		}
+
   });
 
   onMount(() => {
@@ -32,7 +30,7 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
   // jscpd:ignore-end
 
   return (
-    <div ref={component} class={state.getClassNames('db-<%= name %>', props.className)}>
+    <div ref={component} class={cls('db-<%= name %>', props.className)}>
       <Show when={state.stylePath}>
         <link rel="stylesheet" href={state.stylePath} />
       </Show>

packages/components/scripts/post-build/power-apps.js

@@ -44,6 +44,12 @@ const updateNestedComponents = (input, rootComponentName, powerAppsFolder) => {
 				from: /\.\.\/\.\.\//g,
 				to: `../`
 			});
+
+			Replace.sync({
+				files: `../../output/power-apps/${rootComponentName}/${nestedComponent.name}/${nestedComponent.name}.tsx`,
+				from: /\.\.\/\.\.\//g,
+				to: `../`
+			});
 		}
 	}
 

packages/components/src/components/alert/alert.lite.tsx

@@ -1,17 +1,11 @@
-import {
-	onMount,
-	Show,
-	Slot,
-	useMetadata,
-	useStore
-} from '@builder.io/mitosis';
-import { DBAlertState, DBAlertProps } from './model';
-import { DBIcon } from '../icon';
-import { DefaultVariantsIcon } from '../../shared/model';
-import { DBButton } from '../button';
-import { DBLink } from '../link';
-import classNames from 'classnames';
-import { DEFAULT_CLOSE_BUTTON } from '../../shared/constants';
+import { onMount, Show, useMetadata, useStore } from "@builder.io/mitosis";
+import { DBAlertProps, DBAlertState } from "./model";
+import { DBIcon } from "../icon";
+import { DefaultVariantsIcon } from "../../shared/model";
+import { DBButton } from "../button";
+import { DBLink } from "../link";
+import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
+import { cls } from "../../utils";
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -57,9 +51,6 @@ export default function DBAlert(props: DBAlertProps) {
 		},
 		iconVisible: (icon?: string) => {
 			return Boolean(icon && icon !== '_' && icon !== 'none');
-		},
-		getClassNames: (...args: classNames.ArgumentArray) => {
-			return classNames(args);
 		}
 	});
 
@@ -73,7 +64,7 @@ export default function DBAlert(props: DBAlertProps) {
 	return (
 		<div
 			ref={component}
-			class={state.getClassNames('db-alert', props.className)}
+			class={cls('db-alert', props.className)}
 			aria-live={props.ariaLive}
 			data-variant={props.variant}
 			data-type={props.type}

packages/components/src/components/brand/brand.lite.tsx

@@ -1,13 +1,6 @@
 import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import { cls } from '../../utils';
 import { DBBrandState, DBBrandProps } from './model';
-import classNames from 'classnames';
-
-const DEFAULT_VALUES = {
-	anchorRef: '/',
-	src: './assets/images/db_logo.svg',
-	width: 34,
-	height: 24
-};
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -56,8 +49,11 @@ export default function DBBrand(props: DBBrandProps) {
 	let component: any;
 	// jscpd:ignore-start
 	const state = useStore<DBBrandState>({
-		getClassNames: (...args: classNames.ArgumentArray) => {
-			return classNames(args);
+		defaultValues: {
+			anchorRef: '/',
+			src: './assets/images/db_logo.svg',
+			width: '34',
+			height: '24'
 		}
 	});
 
@@ -69,23 +65,23 @@ export default function DBBrand(props: DBBrandProps) {
 	// jscpd:ignore-end
 
 	return (
-		<div
-			ref={component}
-			class={state.getClassNames('db-brand', props.className)}>
+		<div ref={component} class={cls('db-brand', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>
 
 			<a
-				href={props.anchorRef ?? DEFAULT_VALUES.anchorRef}
+				href={
+					props.anchorRef ?? state.defaultValues.anchorRef
+				}
 				title={props.anchorTitle}
 				rel={props.anchorRelation}>
 				<Show when={!props.hideDefaultAsset}>
 					<img
-						src={props.imgSrc ?? DEFAULT_VALUES.src}
+						src={props.imgSrc ?? state.defaultValues.src}
 						alt={props.imgAlt ?? ''}
-						height={props.imgHeight ?? DEFAULT_VALUES.height}
-						width={props.imgWidth ?? DEFAULT_VALUES.width}
+						height={props.imgHeight ?? state.defaultValues.height}
+						width={props.imgWidth ?? state.defaultValues.width}
 						className="db-logo"
 					/>
 				</Show>

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

@@ -1,7 +1,6 @@
 import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
-import { DBIcon } from '../icon';
 import type { DBButtonProps, DBButtonState } from './model';
-import classNames from 'classnames';
+import { cls } from "../../utils";
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -64,9 +63,6 @@ export default function DBButton(props: DBButtonProps) {
 		},
 		iconVisible: (icon?: string) => {
 			return Boolean(icon && icon !== '_' && icon !== 'none');
-		},
-		getClassNames: (...args: classNames.ArgumentArray) => {
-			return classNames(args);
 		}
 	});
 
@@ -81,7 +77,7 @@ export default function DBButton(props: DBButtonProps) {
 		<button
 			id={props.id}
 			ref={component}
-			class={state.getClassNames('db-button', props.className, {
+			class={cls('db-button', props.className, {
 				'is-icon-text-replace':
 					state.iconVisible(props.icon) && props.noText
 			})}

packages/components/src/components/card/card.lite.tsx

@@ -1,6 +1,6 @@
 import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
 import type { DBCardState, DBCardProps } from './model';
-import classNames from 'classnames';
+import { cls } from "../../utils";
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -37,9 +37,6 @@ export default function DBCard(props: DBCardProps) {
 			if (props.onClick) {
 				props.onClick(event);
 			}
-		},
-		getClassNames: (...args: classNames.ArgumentArray) => {
-			return classNames(args);
 		}
 	});
 
@@ -53,7 +50,7 @@ export default function DBCard(props: DBCardProps) {
 	return (
 		<div
 			ref={component}
-			class={state.getClassNames('db-card', props.className)}
+			class={cls('db-card', props.className)}
 			data-variant={props.variant}
 			data-color-variant={props.colorVariant}
 			data-elevation={props.elevation}

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -8,7 +8,7 @@ import {
 import { DBCheckboxProps, DBCheckboxState } from './model';
 import { uuid } from '../../utils';
 import { DEFAULT_ID } from '../../shared/constants';
-import classNames from 'classnames';
+import { cls } from "../../utils";
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -82,9 +82,6 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 				props.focus(event);
 			}
 		},
-		getClassNames: (...args: classNames.ArgumentArray) => {
-			return classNames(args);
-		},
 		// callback for controlValueAccessor's onChange handler
 		propagateChange: (_: any) => {}
 	});
@@ -129,7 +126,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			<input
 				ref={component}
 				type="checkbox"
-				class={state.getClassNames('db-checkbox', props.className)}
+				class={cls('db-checkbox', props.className)}
 				id={state._id}
 				name={props.name}
 				checked={props.checked}