chore: update all components missing uuid

db-ui · Feb 27, 2024 · 267dc71 · 267dc71
1 parent f4c22c3
commit 267dc71
Show file tree

Hide file tree

Showing 15 changed files with 117 additions and 39 deletions.
diff --git a/packages/components/src/components/badge/badge.lite.tsx b/packages/components/src/components/badge/badge.lite.tsx
@@ -1,6 +1,13 @@
-import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBBadgeState, DBBadgeProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -9,9 +16,12 @@ useMetadata({
 export default function DBBadge(props: DBBadgeProps) {
 	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBBadgeState>({});
+	const state = useStore<DBBadgeState>({
+		_id: DEFAULT_ID
+	});
 
 	onMount(() => {
+		state._id = props.id || 'badge-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -21,7 +31,7 @@ export default function DBBadge(props: DBBadgeProps) {
 	return (
 		<span
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-badge', props.className)}
 			data-variant={props.variant}
 			data-size={props.size}

diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
@@ -6,8 +6,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import type { DBButtonProps, DBButtonState } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,6 +18,7 @@ export default function DBButton(props: DBButtonProps) {
 	const ref = useRef<HTMLButtonElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBButtonState>({
+		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -25,6 +27,7 @@ export default function DBButton(props: DBButtonProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'button-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -34,7 +37,7 @@ export default function DBButton(props: DBButtonProps) {
 	return (
 		<button
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-button', props.className, {
 				'is-icon-text-replace': props.noText
 			})}

diff --git a/packages/components/src/components/card/card.lite.tsx b/packages/components/src/components/card/card.lite.tsx
@@ -6,8 +6,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import type { DBCardState, DBCardProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -17,6 +18,7 @@ export default function DBCard(props: DBCardProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCardState>({
+		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -25,6 +27,7 @@ export default function DBCard(props: DBCardProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'card-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -34,7 +37,7 @@ export default function DBCard(props: DBCardProps) {
 	return (
 		<div
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-card', props.className)}
 			data-variant={props.variant}
 			data-color-variant={props.colorVariant}

diff --git a/packages/components/src/components/code-docs/code-docs.lite.tsx b/packages/components/src/components/code-docs/code-docs.lite.tsx
@@ -2,12 +2,14 @@ import {
 	onMount,
 	Show,
 	Slot,
-	useMetadata, useRef,
+	useMetadata,
+	useRef,
 	useStore
 } from '@builder.io/mitosis';
 import { DBCodeDocsProps, DBCodeDocsState } from './model';
 import { DBCard } from '../card';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -22,6 +24,7 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBCodeDocsState>({
+		_id: DEFAULT_ID,
 		open: false,
 		toggleCode: () => {
 			state.open = !state.open;
@@ -34,6 +37,7 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'code-docs-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -43,6 +47,7 @@ export default function DBCodeDocs(props: DBCodeDocsProps) {
 	return (
 		<DBCard
 			ref={ref}
+			id={state._id}
 			className={cls('db-code-docs', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />

diff --git a/packages/components/src/components/divider/divider.lite.tsx b/packages/components/src/components/divider/divider.lite.tsx
@@ -1,6 +1,13 @@
-import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBDividerState, DBDividerProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -9,9 +16,12 @@ useMetadata({
 export default function DBDivider(props: DBDividerProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBDividerState>({});
+	const state = useStore<DBDividerState>({
+		_id: DEFAULT_ID
+	});
 
 	onMount(() => {
+		state._id = props.id || 'divider-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -21,7 +31,7 @@ export default function DBDivider(props: DBDividerProps) {
 	return (
 		<div
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			data-margin={props.margin}
 			data-variant={props.variant}
 			data-emphasis={props.emphasis}

diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
@@ -6,7 +6,8 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import type { DBIconState, DBIconProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -15,9 +16,12 @@ useMetadata({
 export default function DBIcon(props: DBIconProps) {
 	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBIconState>({});
+	const state = useStore<DBIconState>({
+		_id: DEFAULT_ID
+	});
 
 	onMount(() => {
+		state._id = props.id || 'icon-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -27,7 +31,7 @@ export default function DBIcon(props: DBIconProps) {
 	return (
 		<span
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-icon', props.className)}
 			data-icon={props.icon}
 			data-icon-weight={props.weight}

diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -1,6 +1,13 @@
-import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBInfotextProps, DBInfotextState } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -9,10 +16,13 @@ useMetadata({
 export default function DBInfotext(props: DBInfotextProps) {
 	const ref = useRef<HTMLSpanElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBInfotextState>({});
+	const state = useStore<DBInfotextState>({
+		_id: DEFAULT_ID
+	});
 	// jscpd:ignore-end
 
 	onMount(() => {
+		state._id = props.id || 'infotext-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -22,7 +32,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 	return (
 		<span
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-infotext', props.className)}
 			title={props.title}
 			data-icon={props.icon}

diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
@@ -6,8 +6,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBLinkState, DBLinkProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: false
@@ -17,6 +18,7 @@ export default function DBLink(props: DBLinkProps) {
 	const ref = useRef<HTMLAnchorElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBLinkState>({
+		_id: DEFAULT_ID,
 		handleClick: (event: ClickEvent<HTMLAnchorElement>) => {
 			if (props.onClick) {
 				props.onClick(event);
@@ -25,6 +27,7 @@ export default function DBLink(props: DBLinkProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'link-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -34,7 +37,7 @@ export default function DBLink(props: DBLinkProps) {
 	return (
 		<a
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-link', props.className)}
 			href={props.href}
 			title={props.title}

diff --git a/packages/components/src/components/main-navigation/main-navigation.lite.tsx b/packages/components/src/components/main-navigation/main-navigation.lite.tsx
@@ -1,6 +1,13 @@
-import {onMount, Show, useMetadata, useRef, useStore} from '@builder.io/mitosis';
+import {
+	onMount,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBMainNavigationState, DBMainNavigationProps } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
@@ -9,9 +16,12 @@ useMetadata({
 export default function DBMainNavigation(props: DBMainNavigationProps) {
 	const ref = useRef<HTMLDivElement>(null);
 	// jscpd:ignore-start
-	const state = useStore<DBMainNavigationState>({});
+	const state = useStore<DBMainNavigationState>({
+		_id: DEFAULT_ID
+	});
 
 	onMount(() => {
+		state._id = props.id || 'main-navigation-' + uuid();
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
 		}
@@ -22,7 +32,7 @@ export default function DBMainNavigation(props: DBMainNavigationProps) {
 	return (
 		<nav
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-main-navigation', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />

diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -10,7 +10,7 @@ import {
 import { DBNavigationItemProps, DBNavigationItemState } from './model';
 import { DBButton } from '../button';
 import { cls, uuid, visibleInVX, visibleInVY } from '../../utils';
-import { DEFAULT_BACK } from '../../shared/constants';
+import { DEFAULT_BACK, DEFAULT_ID } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
 
 useMetadata({
@@ -22,6 +22,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 
 	// jscpd:ignore-start
 	const state = useStore<DBNavigationItemState>({
+		_id: DEFAULT_ID,
 		initialized: false,
 		hasAreaPopup: false,
 		hasSubNavigation: true,
@@ -43,6 +44,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'navigation-item-' + uuid();
 		state.initialized = true;
 		if (props.stylePath) {
 			state.stylePath = props.stylePath;
@@ -92,7 +94,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 	return (
 		<li
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}