-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'v2' into sun/fix/navbar
- Loading branch information
Showing
21 changed files
with
934 additions
and
786 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,7 @@ | |
| "dev": "turbo run dev", | ||
| "lint": "turbo run --continue lint", | ||
| "format": "turbo run --continue format", | ||
| "test": "turbo run --continue test", | ||
| "storybook:dev": "turbo run --filter=@app/storybook dev", | ||
| "web:dev": "turbo run --filter=@app/web dev" | ||
| }, | ||
|
|
@@ -18,5 +19,5 @@ | |
| "prettier": "^3.4.2", | ||
| "turbo": "^2.3.3" | ||
| }, | ||
| "packageManager": "[email protected].1" | ||
| "packageManager": "[email protected].3" | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as RatingStar } from './rating-star.svelte' |
28 changes: 28 additions & 0 deletions
28
packages/ui/src/components/atom/rating-star/rating-star.stories.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <script module lang="ts"> | ||
| import { defineMeta } from '@storybook/addon-svelte-csf' | ||
| import { RatingStar } from './index.js' | ||
| const { Story } = defineMeta<typeof RatingStar>({ | ||
| title: 'Atom/Rating Star', | ||
| component: RatingStar, | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| rating: { | ||
| control: { | ||
| type: 'range', | ||
| min: 0, | ||
| max: 5, | ||
| step: 0.5, | ||
| }, | ||
| }, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <Story | ||
| name="Default" | ||
| args={{ | ||
| rating: 3.5, | ||
| }} | ||
| /> |
36 changes: 36 additions & 0 deletions
36
packages/ui/src/components/atom/rating-star/rating-star.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <script lang="ts"> | ||
| import { Star } from 'lucide-svelte' | ||
| let { rating }: { rating: number } = $props() | ||
| // Calculate the number of filled and unfilled stars | ||
| const totalStars: number = 5 | ||
| let filledStars: number = $derived(Math.floor(rating)) // Number of fully filled stars | ||
| let hasHalfStar: boolean = $derived(rating % 1 !== 0) // Determine if there's a half star | ||
| let emptyStars: number = $derived( | ||
| totalStars - filledStars - (hasHalfStar ? 1 : 0), | ||
| ) | ||
| </script> | ||
|
|
||
| <div class="flex flex-row text-h3 text-primary gap-1.5"> | ||
| {#each Array(filledStars) as _} | ||
| <Star fill="currentColor" /> | ||
| {/each} | ||
|
|
||
| <!-- Optionally render a half star (if applicable) --> | ||
| {#if hasHalfStar} | ||
| <div class="flex gap-0"> | ||
| <div class="relative inline-block w-6 h-6 overflow-hidden max-w-3"> | ||
| <Star fill="currentColor" /> | ||
| </div> | ||
| <div | ||
| class="relative inline-block w-6 h-6 overflow-hidden max-w-3 transform scale-x-[-1]" | ||
| > | ||
| <Star /> | ||
| </div> | ||
| </div> | ||
| {/if} | ||
|
|
||
| <!-- Render unfilled stars --> | ||
| {#each Array(emptyStars) as _} | ||
| <Star /> | ||
| {/each} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
packages/ui/src/components/molecule/comment/comment.stories.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <script module lang="ts"> | ||
| import { defineMeta } from '@storybook/addon-svelte-csf' | ||
| import { Comment } from './index.js' | ||
| const { Story } = defineMeta<typeof Comment>({ | ||
| title: 'Molecule/Comment', | ||
| component: Comment, | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| content: { | ||
| control: 'text', | ||
| }, | ||
| semester: { | ||
| control: 'text', | ||
| }, | ||
| rating: { | ||
| control: 'number', | ||
| }, | ||
| likesCount: { | ||
| control: 'number', | ||
| }, | ||
| dislikesCount: { | ||
| control: 'number', | ||
| }, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <Story | ||
| name="Default" | ||
| args={{ | ||
| content: `ส่วนตัวคิดว่าค่อนข้างสบาย | ||
| มีงานสัปดาห์ละครั้ง ปกติจะมีวิดีโอให้ดู ไม่ยาวมาก แต่จะไม่ดูก็ได้ เพราะปกติเราแค่อ่านตัวอย่างที่ให้มาแล้วก็ลองเขียนเลย งานส่วนใหญ่จะให้ | ||
| Topic กว้างๆมา ถ้าอาจารย์ประจำ sec ไม่ strict มาก ก็เขียนตามใจไปเลย แค่เอาเรื่องที่เรียนในสัปดาห์นั้นมาปรับๆนิดหน่อย | ||
| ปกติจะไม่อยากเสียเวลามาก ก็เขียนครั้งเดียวแล้วส่งไปเลย เลยเสียเวลาแค่ 1-2 ชม. ต่อสัปดาห์ แต่ถ้าใครจริงจังกับงานเขียนหน่อยก็อาจใช้เวลาเพิ่มขึ้น | ||
| สอบเหมือนกับงานที่ทำ จะไม่อ่านไปสอบก็ได้ถ้าจำพวกงานที่ทำส่งได้ แต่ก่อนสอบมีคลิปรีวิวให้ดูก่อน พึ่งตัวนี้เอาก็ได้ | ||
| อันนี้ก็ขึ้นอยู่กับ sec ของเราอาจารย์ให้คะแนนงานค่อนข้างง่าย แต่จะให้คะแนนสอบยากหน่อย แต่เฉลี่ยๆรวมๆกันก็ได้ A | ||
| เพราะเขียนตามใจตัวเองเป็นหลัก ไม่ค่อยยึดกับเรื่องที่เรียนมาเลยรู้สึกไม่ค่อยได้อะไรใหม่ ที่ช่วยน่าจะเป็นการจัดระเบียบความคิดและสรุปให้อยู่ในย่อหน้า`, | ||
| semester: `ภาคต้น 2565`, | ||
| rating: 3.5, | ||
| likesCount: 100, | ||
| dislikesCount: 0, | ||
| }} | ||
| /> |
79 changes: 79 additions & 0 deletions
79
packages/ui/src/components/molecule/comment/comment.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <script lang="ts"> | ||
| import { ThumbsDown, ThumbsUp } from 'lucide-svelte' | ||
| import { RatingStar } from '../../atom/rating-star' | ||
| let { | ||
| content, | ||
| semester, | ||
| rating, | ||
| likesCount, | ||
| dislikesCount, | ||
| }: { | ||
| content: string | ||
| semester: string | ||
| rating: number | ||
| likesCount: number | ||
| dislikesCount: number | ||
| } = $props() | ||
| let hasHalfStar: boolean = $derived(rating % 1 !== 0) // Determine if there's a half star | ||
| let isExpanded: boolean = $state(false) | ||
| </script> | ||
|
|
||
| <div | ||
| class="h-[320px] w-full lg:h-auto border border-surface-container px-6 py-5 lg:py-10 lg:px-12 box-border rounded-xl flex flex-col gap-y-4 | ||
| lg:gap-y-8 overflow-hidden" | ||
| class:h-auto={isExpanded} | ||
| > | ||
| <div class="flex flex-row gap-x-6"> | ||
| <div class="font-bold text-h3 text-primary"> | ||
| {#if !hasHalfStar} | ||
| <span>{rating}.0</span> | ||
| {:else} | ||
| <span>{rating}</span> | ||
| {/if} | ||
| </div> | ||
|
|
||
| <RatingStar {rating} /> | ||
|
|
||
| <div class="text-subtitle font-sans font-medium"> | ||
| {semester} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| class="h-[200px] lg:h-auto relative overflow-hidden" | ||
| class:h-fit={isExpanded} | ||
| class:overflow-visible={isExpanded} | ||
| > | ||
| <p | ||
| class="w-full h-auto self-center text-body1 font-sarabun font-regular text-on-surface" | ||
| > | ||
| {content} | ||
| </p> | ||
|
|
||
| <!-- Button to toggle view --> | ||
| <button | ||
| class="absolute bottom-0 right-0 underline text-button1 text-primary lg:hidden pb-1 pt-1 pl-2 bg-surface | ||
| " | ||
| onclick={() => (isExpanded = !isExpanded)} | ||
| > | ||
| {#if isExpanded} | ||
| ดูน้อยลง | ||
| {:else} | ||
| ดูเพ่ิมเติม | ||
| {/if} | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="gap-6 flex flex-row text-subtitle font-sans"> | ||
| <div class="flex flex-row font-medium gap-x-2"> | ||
| <ThumbsUp class="text-neutral-400" /> | ||
| {likesCount} | ||
| </div> | ||
| <div class="flex flex-row font-medium gap-x-2"> | ||
| <ThumbsDown class="text-neutral-400" /> | ||
| {dislikesCount} | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as Comment } from './comment.svelte' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "strict": true, | ||
| "paths": { | ||
| "$lib": ["./src"], | ||
| "$lib/*": ["./src/*"] | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { expect, test } from 'vitest' | ||
|
|
||
| import { getShortenName } from './name.js' | ||
|
|
||
| test('getShortenName', () => { | ||
| expect(getShortenName('John Doe')).toBe('John D.') | ||
| expect(getShortenName('John Doe Jr.')).toBe('John J.') | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export function getShortenName(fullName: string) { | ||
| const names = fullName.split(' ') | ||
| const firstName = names[0] | ||
| const lastName = names[names.length - 1] | ||
| return `${firstName} ${lastName.charAt(0)}.` | ||
| } |
Oops, something went wrong.