refactor(editor): Replace mixed style of defineProps with the new style (no-changelog) (#9787)

packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue

@@ -23,20 +23,16 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-const props = defineProps({
-	radius: {
-		type: Number,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		radius: number;
+		progress: number;
+		strokeWidth?: number;
+	}>(),
+	{
+		strokeWidth: 4,
 	},
-	progress: {
-		type: Number,
-		required: true,
-	},
-	strokeWidth: {
-		type: Number,
-		default: 4,
-	},
-});
+);
 
 // for SVG viewbox and stroke array
 const diameter = computed(() => 2 * (props.radius + props.strokeWidth));

packages/design-system/src/components/N8nUserStack/UserStack.vue

@@ -1,31 +1,22 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import type { IUser, UserStackGroups } from 'n8n-design-system/types';
 import N8nAvatar from '../N8nAvatar';
 import N8nUserInfo from '../N8nUserInfo';
-import type { PropType } from 'vue';
-import { computed } from 'vue';
 
-const props = defineProps({
-	users: {
-		type: Object as PropType<UserStackGroups>,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		users: UserStackGroups;
+		currentUserEmail?: string;
+		maxAvatars?: number;
+		dropdownTrigger?: 'hover' | 'click';
+	}>(),
+	{
+		currentUserEmail: '',
+		maxAvatars: 2,
+		dropdownTrigger: 'hover',
 	},
-	currentUserEmail: {
-		type: String,
-		required: false,
-		default: '',
-	},
-	maxAvatars: {
-		type: Number,
-		default: 2,
-		validator: (value: number) => value > 0,
-	},
-	dropdownTrigger: {
-		type: String,
-		default: 'hover',
-		validator: (value: string) => ['hover', 'click'].includes(value),
-	},
-});
+);
 
 const nonEmptyGroups = computed(() => {
 	const users: UserStackGroups = {};

packages/design-system/src/components/ResizeObserver/ResizeObserver.vue

@@ -3,21 +3,16 @@ import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 
 export type BreakpointDefinition = { bp: string; width: number };
 
-const props = defineProps({
-	enabled: {
-		type: Boolean,
-		default: true,
+const props = withDefaults(
+	defineProps<{
+		enabled?: boolean;
+		breakpoints?: BreakpointDefinition[];
+	}>(),
+	{
+		enabled: true,
+		breakpoints: () => [],
 	},
-	breakpoints: {
-		type: Array as () => BreakpointDefinition[],
-		validator: (breakpoints: BreakpointDefinition[]) => {
-			if (breakpoints.length === 0) return true;
-
-			return breakpoints.every((bp) => typeof bp.width === 'number' && typeof bp.bp === 'string');
-		},
-		default: () => [],
-	},
-});
+);
 
 const observer = ref<ResizeObserver | null>(null);
 const breakpoint = ref('');

packages/design-system/src/styleguide/ColorCircles.vue

@@ -1,14 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-import type { PropType } from 'vue';
 import { getHex, resolveHSLCalc } from './ColorCircles.utils';
 
-const props = defineProps({
-	colors: {
-		type: Array as PropType<string[]>,
-		required: true,
-	},
-});
+const props = defineProps<{ colors: string[] }>();
 
 const getColors = () => {
 	const style = getComputedStyle(document.body);

packages/design-system/src/styleguide/Sizes.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import { ref, onMounted, onUnmounted } from 'vue';
 
 type Size = {
@@ -8,16 +7,15 @@ type Size = {
 };
 
 // Define props with their types
-const props = defineProps({
-	variables: {
-		type: Array as PropType<string[]>,
-		required: true,
+const props = withDefaults(
+	defineProps<{
+		variables: string[];
+		attr?: string;
+	}>(),
+	{
+		attr: '',
 	},
-	attr: {
-		type: String,
-		default: '',
-	},
-});
+);
 
 const getSizes = () => {
 	const style = getComputedStyle(document.body);