fix: DBSection ignoring id prop during SSR (#5582)

* Initial plan

* Fix DBSection to use id prop directly for SSR compatibility

* Remove unused imports and state from DBSection

* refactor: remove unused DBSectionState and GlobalState from model.ts

* Create six-oranges-kneel.md

* feat: pass id to react-, angular- and vue-component

* feat: remove debugging output

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: GitHub Copilot <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: michaelmkraus <[email protected]>

Author: 4 people

.changeset/six-oranges-kneel.md

@@ -0,0 +1,8 @@
+---
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/wc-core-components": patch
+"@db-ux/v-core-components": patch
+---
+
+fix: DBSection ignoring `id` prop during SSR

packages/components/src/components/section/model.ts

@@ -1,7 +1,6 @@
 import {
 	ContainerWidthProps,
 	GlobalProps,
-	GlobalState,
 	SpacingProps
 } from '../../shared/model';
 
@@ -11,7 +10,3 @@ export type DBSectionProps = DBSectionDefaultProps &
 	GlobalProps &
 	SpacingProps &
 	ContainerWidthProps;
-
-export type DBSectionDefaultState = {};
-
-export type DBSectionState = DBSectionDefaultState & GlobalState;

packages/components/src/components/section/section.lite.tsx

@@ -1,33 +1,17 @@
-import {
-	onMount,
-	useDefaultProps,
-	useMetadata,
-	useRef,
-	useStore
-} from '@builder.io/mitosis';
-import { DEFAULT_ID } from '../../shared/constants';
-import { cls, uuid } from '../../utils';
-import { DBSectionProps, DBSectionState } from './model';
+import { useDefaultProps, useMetadata, useRef } from '@builder.io/mitosis';
+import { cls } from '../../utils';
+import { DBSectionProps } from './model';
 
 useMetadata({});
 useDefaultProps<DBSectionProps>({});
 
 export default function DBSection(props: DBSectionProps) {
 	const _ref = useRef<HTMLDivElement | any>(null);
-	// jscpd:ignore-start
-	const state = useStore<DBSectionState>({
-		_id: DEFAULT_ID
-	});
-
-	onMount(() => {
-		state._id = props.id || 'section-' + uuid();
-	});
-	// jscpd:ignore-end
 
 	return (
 		<section
 			ref={_ref}
-			id={state._id}
+			id={props.id}
 			class={cls('db-section', props.className)}
 			data-spacing={props.spacing || 'medium'}
 			data-width={props.width}>

showcases/angular-showcase/src/app/components/section/section.component.html

@@ -14,6 +14,7 @@
 			class="db-color-informational db-bg-color-basic-level-2 section-card-container"
 			[spacing]="exampleProps?.spacing"
 			[width]="exampleProps?.width"
+			[id]="exampleProps?.id"
 		>
 			<db-card>{{ exampleName }}</db-card>
 			<db-card>{{ exampleName }}</db-card>

showcases/react-showcase/src/components/section/index.tsx

@@ -5,11 +5,12 @@ import { type BaseComponentProps } from '../base-component-data';
 import { getVariants } from '../data';
 import DefaultComponent from '../default-component';
 
-const getSection = ({ width, spacing, children }: DBSectionProps) => (
+const getSection = ({ width, spacing, children, id }: DBSectionProps) => (
 	<DBSection
 		className="db-color-informational db-bg-color-basic-level-2  section-card-container"
 		spacing={spacing}
-		width={width}>
+		width={width}
+		id={id}>
 		<DBCard>{children}</DBCard>
 		<DBCard>{children}</DBCard>
 		<DBCard>{children}</DBCard>

showcases/shared/section.json

@@ -5,7 +5,9 @@
 			{
 				"name": "Functional",
 				"density": "functional",
-				"props": {}
+				"props": {
+					"id": "test-id-123"
+				}
 			},
 			{
 				"name": "(Default) Regular",

showcases/vue-showcase/src/components/section/Section.vue

@@ -13,6 +13,7 @@ import DefaultComponent from "../DefaultComponent.vue";
 				class="db-color-informational db-bg-color-basic-level-2 section-card-container"
 				:spacing="exampleProps?.spacing"
 				:width="exampleProps?.width"
+				:id="exampleProps?.id"
 			>
 				<DBCard>{{ exampleName }}</DBCard>
 				<DBCard>{{ exampleName }}</DBCard>