chore(libs/ui): extract component prop types to own file

sveltevietnam · Jun 3, 2024 · 04d03db · 04d03db
1 parent b28eebc
commit 04d03db
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 15 deletions.
diff --git a/.changeset/yellow-kangaroos-promise.md b/.changeset/yellow-kangaroos-promise.md
@@ -0,0 +1,5 @@
+---
+'@sveltevietnam/ui': patch
+---
+
+extract props types of enhanced-code-block components to own file
diff --git a/libs/ui/src/lib/components/EnhancedCodeBlock.svelte b/libs/ui/src/lib/components/EnhancedCodeBlock.svelte
@@ -5,7 +5,7 @@
 	import FileIcon from './FileIcon.svelte';
 	import { EnhancedCodeBlockGroupContext } from './enhanced-code-block-group-context.svelte.js';
 
-	/** @type {import('./EnhancedCodeBlock.svelte').EnhancedCodeBlockProps} */
+	/** @type {import('./types.d.ts').EnhancedCodeBlockProps} */
 	let {
 		lang,
 		title,

diff --git a/libs/ui/src/lib/components/EnhancedCodeBlockGroup.svelte b/libs/ui/src/lib/components/EnhancedCodeBlockGroup.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { EnhancedCodeBlockGroupContext } from './enhanced-code-block-group-context.svelte.js';
 
-	/** @type {import('./EnhancedCodeBlockGroup.svelte').EnhancedCodeBlockGroupProps} */
+	/** @type {import('./types.d.ts').EnhancedCodeBlockGroupProps} */
 	let { cols, name, display, title, children, class: cls, style, ...rest } = $props();
 
 	EnhancedCodeBlockGroupContext.set({ name, display, title });

diff --git a/libs/ui/src/lib/components/EnhancedCodeBlockGroup.svelte.d.ts b/libs/ui/src/lib/components/EnhancedCodeBlockGroup.svelte.d.ts
diff --git a/libs/ui/src/lib/components/enhanced-code-block-group-context.svelte.js b/libs/ui/src/lib/components/enhanced-code-block-group-context.svelte.js
@@ -3,7 +3,7 @@ import { getContext, setContext, hasContext } from 'svelte';
 /**
  * @typedef EnhancedCodeBlockGroupContextInit
  * @property {string} name - name for the code block group, mapped to the checkbox input `name` field
- * @property {import('./EnhancedCodeBlockGroup.svelte').EnhancedCodeBlockGroupProps['display']} display - display mode of the code block group
+ * @property {import('./types.d.ts').EnhancedCodeBlockGroupProps['display']} display - display mode of the code block group
  * @property {string} [title] - initial code block identifier to display
  */
 
@@ -12,7 +12,7 @@ export class EnhancedCodeBlockGroupContext {
 
 	// eslint-disable-next-line no-undef
 	name = $state('');
-	/** @type {import('./EnhancedCodeBlockGroup.svelte').EnhancedCodeBlockGroupProps['display']} */
+	/** @type {import('./types.d.ts').EnhancedCodeBlockGroupProps['display']} */
 	// eslint-disable-next-line no-undef
 	display = $state('files');
 	/** @type {string | undefined} */

diff --git a/.../components/EnhancedCodeBlock.svelte.d.ts → libs/ui/src/lib/components/types.d.ts b/.../components/EnhancedCodeBlock.svelte.d.ts → libs/ui/src/lib/components/types.d.ts
@@ -22,3 +22,13 @@ interface EnhancedCodeBlockProps extends HTMLAttributes<HTMLElement> {
 	 */
 	collapsed?: 'disabled' | string;
 }
+
+interface EnhancedCodeBlockGroupProps extends HTMLAttributes<HTMLElement> {
+	cols: number;
+	name: string;
+	display?: 'files' | 'tabs';
+	/**
+	 * bindable, title of the current active child code block
+	 */
+	title?: string;
+}