added slug display to create project

Signed-off-by: Benjamin Strasser <bp.strasser@gmail.com>

Author: benjaminstrasser

pnpm-lock.yaml

@@ -1,12 +1,18 @@
+import { createSlug } from 'services/util/slug/slug-service'
 import { z } from 'zod'
 
-export const createProjectSchema = z.object({
-	name: z
-		.string({ required_error: 'Project name is required' })
-		.min(1, 'Project name must have at least one character'),
-	base_language_code: z
-		.string({ required_error: 'Base language is required' })
-		.min(1, 'Base language must have at least one character')
-})
+export const createProjectSchema = z
+	.object({
+		name: z
+			.string({ required_error: 'Project name is required' })
+			.min(1, 'Project name must have at least one character'),
+		base_language_code: z
+			.string({ required_error: 'Base language is required' })
+			.min(1, 'Base language must have at least one character')
+	})
+	.refine((data) => createSlug(data.name).length > 0, {
+		message: 'URL must have at least one character',
+		path: ['name']
+	})
 
 export type CreateProjectFormSchema = z.infer<typeof createProjectSchema>

src/components/container/projects/create-project-schema.ts

@@ -8,6 +8,7 @@
 	import * as Form from '$components/ui/form'
 	import { page } from '$app/stores'
 	import { toast } from 'svelte-sonner'
+	import SlugDisplay from './slug-display.svelte'
 
 	export let data: SuperValidated<Infer<typeof createProjectSchema>>
 
@@ -56,6 +57,7 @@
 							bind:value={$formData.name}
 						/>
 					</Form.Control>
+					<SlugDisplay name={$formData.name} />
 					<Form.FieldErrors />
 				</Form.Field>
 				<Form.Field {form} name="base_language_code">

src/components/container/projects/create-project.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { createSlug } from 'services/util/slug/slug-service'
+
+	export let name: string
+</script>
+
+<div class="ml-3 flex text-xs">
+	URL will be: /projects/
+	<div class="font-bold">{createSlug(name)}</div>
+</div>

src/components/container/projects/slug-display.svelte

@@ -6,6 +6,6 @@ export default defineConfig({
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}', 'services/**/*.{test,spec}.{js,ts}']
 	},
-	server: { port: 3000 },
+	server: { port: 3000, fs: { allow: ['services/src/util/slug'] } }, // Add shared workspace and move slug to shared
 	preview: { port: 3000 }
 })