feat(ui): user dialog - DEV-33 (#727)

* feat: init component

* feat: user dialog

* feat: story book

* refactor: props

* refactor: img & loops

* refactor: styling

* extract shorten name to another file

* fix: image url example

* feat: move to util function

* fix: circle image profile

* fix: use function from utils

* fix: handle undefine props

* fix: typing and default value

* fix: shortenName function

---------

Co-authored-by: Nutthapat Pongtanyavichai <contact@leomotors.me>

apps/web/src/routes/+page.svelte

@@ -7,6 +7,7 @@
   import { Input } from '@repo/ui/atom/input'
   import { RecommendedTag } from '@repo/ui/atom/recommended-tag'
   import { CourseCard } from '@repo/ui/molecule/course-card'
+  import { UserDialog } from '@repo/ui/molecule/user-dialog'
   import { Navbar } from '@repo/ui/organism/navbar'
 
   let counter = $state(0)
@@ -71,4 +72,10 @@
   </Accordion.Item>
 </Accordion.Root>
 
+<UserDialog
+  imageUrl="https://upload.wikimedia.org/wikipedia/commons/a/ac/Default_pfp.jpg"
+  name="Testname Testname"
+  id="6XXXXXXXXX"
+/>
+
 <a href="/dbdemo">Click to go to DB Demo</a>

packages/ui/src/components/atom/collapsible/collapsible.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
   import { Collapsible } from 'bits-ui'
   import { ChevronDown } from 'lucide-svelte'
+  import type { Snippet } from 'svelte'
   import { slide } from 'svelte/transition'
 
-  export let name = undefined
+  interface Props {
+    name: string
+    children?: Snippet
+  }
+
+  let { name = '', children }: Props = $props()
 </script>
 
 <Collapsible.Root class="relative">
@@ -17,6 +23,6 @@
     class="absolute top-8 right-0 w-28 bg-surface-container border-b-neutral-400 rounded-md"
     transition={slide}
   >
-    <slot />
+    {@render children?.()}
   </Collapsible.Content>
 </Collapsible.Root>

packages/ui/src/components/molecule/user-dialog/index.ts

@@ -0,0 +1,7 @@
+import Root from './user-dialog.svelte'
+
+export {
+  Root,
+  //
+  Root as UserDialog,
+}

packages/ui/src/components/molecule/user-dialog/user-dialog.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf'
+
+  import { UserDialog } from './index'
+
+  const { Story } = defineMeta<typeof UserDialog>({
+    title: 'Molecule/User Dialog',
+    component: UserDialog,
+    tags: ['autodocs'],
+    argTypes: {
+      imageUrl: {
+        control: 'text',
+      },
+      name: {
+        control: 'text',
+      },
+      id: {
+        control: 'text',
+      },
+    },
+  })
+</script>
+
+<Story
+  name="Example"
+  args={{
+    name: 'Wanrudee Kkk',
+    id: '6XXXXXXXXX',
+  }}
+/>

packages/ui/src/components/molecule/user-dialog/user-dialog.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { DoorOpen, Settings } from 'lucide-svelte'
+
+  import { getShortenName } from '@repo/utils'
+
+  interface Props {
+    imageUrl?: string
+    name?: string
+    id?: string
+  }
+
+  let {
+    imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/a/ac/Default_pfp.jpg',
+    name = '',
+    id = '',
+  }: Props = $props()
+
+  let shortenedName = $derived(getShortenName(name))
+
+  const items = [
+    {
+      icon: Settings,
+      name: 'ตั้งค่า',
+    },
+    {
+      icon: DoorOpen,
+      name: 'ออกจากระบบ',
+    },
+  ]
+</script>
+
+<div class="w-60 rounded-xl border-2 border-[#EDEDF1]">
+  <div class="flex flex-col justify-center items-center p-4 gap-4">
+    <img
+      src={imageUrl}
+      alt="Profile"
+      class="rounded-full w-20 h-20 object-cover"
+    />
+    <div class="flex flex-col gap-2 items-center">
+      <p class="text-on-surface text-h3 font-bold">{shortenedName}</p>
+      <p class="text-on-surface text-body2 font-medium">ID: {id}</p>
+    </div>
+  </div>
+  {#each items as { icon: Icon, name }}
+    <div class="flex flex-row p-4 gap-3 items-center border-t border-[#EDEDF1]">
+      <Icon size="16" color="#353745" strokeWidth="2.5" />
+      <p class="text-on-surface font-medium text-button2">{name}</p>
+    </div>
+  {/each}
+</div>

packages/ui/src/components/organism/navbar/navbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Menu, Moon, Search, Settings2 } from 'lucide-svelte'
 
-  import { cn } from '@repo/utils'
+  import { cn, getShortenName } from '@repo/utils'
 
   import { Button } from '../../atom/button'
   import { Chip } from '../../atom/chip'
@@ -12,13 +12,13 @@
   import { GitHubMark } from '../../logo/vendor'
 
   interface Props {
-    isLoggedIn?: boolean
+    isLoggedIn: boolean
     name?: string
   }
 
-  let { isLoggedIn = false, name = undefined }: Props = $props()
+  let { isLoggedIn = false, name = '' }: Props = $props()
 
-  let shortenedName = `${name?.split(' ')[0]} ${name?.split(' ')[1]?.charAt(0)}.`
+  let shortenedName = $derived(getShortenName(name))
   let navItems = ['ค้นหาวิชา', 'จัดตารางเรียน', 'เกี่ยวกับ']
   let selected = $state('ค้นหาวิชา')
   let collapseItems = ['TEST1', 'TEST2', 'TEST3']

packages/utils/src/index.ts

@@ -1 +1,2 @@
+export { getShortenName } from './name.js'
 export * from './ui.js'