From 8c3b4b734ebde64af0d3f8ec48b6ab394327f22e Mon Sep 17 00:00:00 2001 From: Ahmad <103906421+ahmadk953@users.noreply.github.com> Date: Wed, 15 Jan 2025 20:48:47 -0500 Subject: [PATCH 1/2] Small Bug Fixes and Improvements --- .../__snapshots__/blog-page.test.tsx.snap | 48 +++++++++++++++++++ __tests__/blog-page.test.tsx | 26 ++++++++++ app/(main)/blog/posts/[post]/page.tsx | 6 +-- .../_components/board-liveblocks.tsx | 8 ++-- .../board/[boardId]/_components/list-form.tsx | 2 +- .../[boardId]/_components/list-header.tsx | 2 +- .../[boardId]/_components/list-options.tsx | 24 +++++++--- app/(platform)/layout.tsx | 6 +-- components/form/form-textarea.tsx | 2 +- docs/mint.json | 4 +- 10 files changed, 106 insertions(+), 22 deletions(-) create mode 100644 __tests__/__snapshots__/blog-page.test.tsx.snap create mode 100644 __tests__/blog-page.test.tsx diff --git a/__tests__/__snapshots__/blog-page.test.tsx.snap b/__tests__/__snapshots__/blog-page.test.tsx.snap new file mode 100644 index 0000000..59ef779 --- /dev/null +++ b/__tests__/__snapshots__/blog-page.test.tsx.snap @@ -0,0 +1,48 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Blog Page renders blog page unchanged 1`] = ` +<div> + <div + class="ml-4 mr-4 flex flex-col items-center space-y-10" + > + <h1 + class="text-4xl font-semibold text-neutral-800 dark:text-neutral-100" + > + Blog + </h1> + <div + class="grid grid-cols-2 gap-20 md:grid-cols-3 lg:grid-cols-4" + > + <div + class="space-y-4 text-center" + > + <a + href="blog/posts/blog-welcome" + > + <img + alt="post cover image" + class="aspect-video w-full rounded-md object-cover" + data-nimg="1" + decoding="async" + height="100" + loading="lazy" + src="/hero.svg" + style="color: transparent;" + width="300" + /> + <h2 + class="text-lg font-semibold text-neutral-800 dark:text-neutral-100" + > + Welcome to the Blog! + </h2> + <p + class="text-sm text-neutral-700 dark:text-neutral-200" + > + Welcome to our new blog page! + </p> + </a> + </div> + </div> + </div> +</div> +`; diff --git a/__tests__/blog-page.test.tsx b/__tests__/blog-page.test.tsx new file mode 100644 index 0000000..55cd38d --- /dev/null +++ b/__tests__/blog-page.test.tsx @@ -0,0 +1,26 @@ +import { render, screen } from '@testing-library/react'; + +import Page from '@/app/(main)/blog/page'; + +describe('Blog Page', () => { + it('renders blog page unchanged', () => { + const { container } = render(<Page />); + expect(container).toMatchSnapshot(); + }); + + it('renders a heading', () => { + render(<Page />); + + const heading = screen.getByRole('heading', { level: 1 }); + + expect(heading).toBeInTheDocument(); + }); + + it('renders blog posts', () => { + render(<Page />); + + const posts = screen.getAllByRole('heading', { level: 2 }); + + expect(posts.length).toBeGreaterThan(0); + }); +}); diff --git a/app/(main)/blog/posts/[post]/page.tsx b/app/(main)/blog/posts/[post]/page.tsx index f14cc20..0ce94a2 100644 --- a/app/(main)/blog/posts/[post]/page.tsx +++ b/app/(main)/blog/posts/[post]/page.tsx @@ -12,7 +12,7 @@ const PostPage = async (props: PostPageProps) => { if (!post) { return ( - <h1 className='text-6xl font-semibold text-neutral-900'> + <h1 className='mx-auto text-center text-6xl font-semibold text-neutral-800 dark:text-neutral-100'> Post not found </h1> ); @@ -27,10 +27,10 @@ const PostPage = async (props: PostPageProps) => { height={600} alt='post cover image' /> - <h1 className='mb-12 text-center text-6xl font-bold text-neutral-900'> + <h1 className='mb-12 text-center text-6xl font-bold text-neutral-800 dark:text-neutral-100'> {post.title} </h1>{' '} - <div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl dark:prose-headings:text-white'> + <div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-neutral-800 prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl prose-p:text-neutral-700 dark:prose-headings:text-neutral-100 dark:prose-p:text-neutral-200'> <MDXContent code={post.mdx} /> </div> </div> diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx index 9d4f282..aeee29c 100644 --- a/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx +++ b/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx @@ -50,14 +50,14 @@ BoardLiveblocks.Skeleton = function SkeletonBoardLiveblocks() { <div className='h-full overflow-x-auto p-4'> <ol className='flex h-full gap-x-3'> <li className='h-full w-[272px] shrink-0 select-none'> - <div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'> + <div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md dark:bg-[#1f1f1f]'> <div className='flex items-start justify-between gap-x-2 px-2 pt-2 text-sm font-semibold'> <Skeleton className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium' /> </div> <ol className='mx-1 mt-2 flex flex-col gap-y-2 px-1 py-0.5'> - <Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' /> - <Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' /> - <Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' /> + <Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' /> + <Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' /> + <Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' /> </ol> </div> </li> diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx index 8db1612..cc0a599 100644 --- a/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx +++ b/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx @@ -76,7 +76,7 @@ export const ListForm = () => { className='h-7 border-transparent px-2 py-1 text-sm font-medium transition hover:border-input focus:border-input' placeholder='Enter list title...' /> - <input hidden value={params.boardId} name='boardId' /> + <input hidden defaultValue={params.boardId} name='boardId' /> <div className='flex items-center gap-x-1'> <FormSubmit>Add list</FormSubmit> <Button onClick={disableEditing} size='sm' variant='ghost'> diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx index c174a1d..184ba3c 100644 --- a/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx +++ b/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx @@ -88,7 +88,7 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => { id='title' placeholder='Enter list title...' defaultValue={title} - className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white' + className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white dark:focus:bg-black' /> <button hidden type='submit' /> </form> diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx index 2dbb940..c932c9a 100644 --- a/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx +++ b/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx @@ -68,12 +68,12 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => { </Button> </PopoverTrigger> <PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'> - <div className='pb-4 text-center text-sm font-medium text-neutral-600'> + <div className='pb-4 text-center text-sm font-medium text-neutral-600 dark:text-neutral-200'> List Actions </div> <PopoverClose ref={closeRef} asChild> <Button - className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600' + className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600 dark:text-neutral-200' variant='ghost' > <X className='h-4 w-4' /> @@ -87,8 +87,13 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => { Add card... </Button> <form action={onCopy}> - <input hidden name='id' id='id' value={data.id} /> - <input hidden name='boardId' id='boardId' value={data.boardId} /> + <input hidden name='id' id='id' defaultValue={data.id} /> + <input + hidden + name='boardId' + id='boardId' + defaultValue={data.boardId} + /> <FormSubmit className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal' variant='ghost' @@ -98,10 +103,15 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => { </form> <Separator /> <form action={onDelete}> - <input hidden name='id' id='id' value={data.id} /> - <input hidden name='boardId' id='boardId' value={data.boardId} /> + <input hidden name='id' id='id' defaultValue={data.id} /> + <input + hidden + name='boardId' + id='boardId' + defaultValue={data.boardId} + /> <FormSubmit - className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive' + className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive dark:text-red-500 dark:hover:text-red-500' variant='ghost' > Delete this list diff --git a/app/(platform)/layout.tsx b/app/(platform)/layout.tsx index c655a66..2b4236e 100644 --- a/app/(platform)/layout.tsx +++ b/app/(platform)/layout.tsx @@ -9,17 +9,17 @@ import { ModalProvider } from '@/components/providers/modal-provider'; import { QueryProvider } from '@/components/providers/query-provider'; const PlatformLayout = ({ children }: { children: React.ReactNode }) => { - const { theme } = useTheme(); + const { resolvedTheme } = useTheme(); return ( <ClerkProvider afterSignOutUrl='/' appearance={{ - baseTheme: theme === 'dark' ? dark : undefined, + baseTheme: resolvedTheme === 'dark' ? dark : undefined, }} > <QueryProvider> - <Toaster theme='system' /> + <Toaster theme={resolvedTheme === 'dark' ? 'dark' : 'light'} /> <ModalProvider /> {children} </QueryProvider> diff --git a/components/form/form-textarea.tsx b/components/form/form-textarea.tsx index b7896f0..742d388 100644 --- a/components/form/form-textarea.tsx +++ b/components/form/form-textarea.tsx @@ -48,7 +48,7 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>( {label ? ( <Label htmlFor={id} - className='text-xs font-semibold text-neutral-700' + className='text-xs font-semibold text-neutral-700 dark:text-neutral-200' > {label} </Label> diff --git a/docs/mint.json b/docs/mint.json index 2539199..a0185f1 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -2,8 +2,8 @@ "$schema": "https://mintlify.com/schema.json", "name": "Tasko", "logo": { - "dark": "/public/logo-light.svg", - "light": "/public/logo-dark.svg", + "dark": "/public/logo-dark.svg", + "light": "/public/logo-light.svg", "href": "https://tasko.ahmadk953.org/" }, "favicon": "/public/favicon.svg", From ac244964a6cb0ea3ccebb2dd5d91445ebb3b72f2 Mon Sep 17 00:00:00 2001 From: Ahmad <103906421+ahmadk953@users.noreply.github.com> Date: Wed, 15 Jan 2025 21:04:16 -0500 Subject: [PATCH 2/2] Fixed Tests --- .github/workflows/tests.yml | 3 + package.json | 2 + yarn.lock | 140 +++++++++++++++++++++++++++++++++++- 3 files changed, 144 insertions(+), 1 deletion(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 29cada3..bad4ec3 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -25,6 +25,9 @@ jobs: - name: Install dependencies run: yarn install --immutable + - name: Build content collections + run: yarn build-collections + - name: Run tests run: yarn coverage diff --git a/package.json b/package.json index b6ea741..260c9e0 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "dev": "next dev --turbo", "debug": "NODE_OPTIONS='--inspect' next dev --turbo", "build": "next build", + "build-collections": "content-collections build", "start": "next start", "lint": "next lint && tsc --noemit", "postinstall": "prisma generate --no-engine", @@ -65,6 +66,7 @@ }, "devDependencies": { "@codecov/nextjs-webpack-plugin": "^1.7.0", + "@content-collections/cli": "^0.1.6", "@content-collections/core": "^0.8.0", "@content-collections/mdx": "^0.2.0", "@content-collections/next": "^0.2.4", diff --git a/yarn.lock b/yarn.lock index 43f5596..b76f484 100644 --- a/yarn.lock +++ b/yarn.lock @@ -640,6 +640,66 @@ __metadata: languageName: node linkType: hard +"@clerc/core@npm:^0.44.0": + version: 0.44.0 + resolution: "@clerc/core@npm:0.44.0" + dependencies: + "@clerc/utils": "npm:0.44.0" + defu: "npm:^6.1.2" + is-platform: "npm:^1.0.0" + lite-emit: "npm:^2.3.0" + type-fest: "npm:^4.3.1" + type-flag: "npm:^3.0.0" + checksum: 10c0/330374351519653bc5f0535b26a75cf874ef983e7c1d3a3a9957849cf13c9b167cf7fcb08fa7869ceb8e2297bd725a470a149447fdaafd09707538a44d52d4d3 + languageName: node + linkType: hard + +"@clerc/plugin-completions@npm:^0.44.0": + version: 0.44.0 + resolution: "@clerc/plugin-completions@npm:0.44.0" + dependencies: + "@clerc/utils": "npm:0.44.0" + peerDependencies: + "@clerc/core": "*" + checksum: 10c0/4dda7bcacdeded2abf208fb244f1156f6d64a6212ca4fe9d60174ddac7ca40f167158dd9fa5395eabcfb592d5ebba3c2935d94fe43b42cdb13ca48e02f5c23d7 + languageName: node + linkType: hard + +"@clerc/plugin-help@npm:^0.44.0": + version: 0.44.0 + resolution: "@clerc/plugin-help@npm:0.44.0" + dependencies: + "@clerc/utils": "npm:0.44.0" + "@types/text-table": "npm:^0.2.3" + string-width: "npm:^6.1.0" + text-table: "npm:^0.2.0" + yoctocolors: "npm:^1.0.0" + peerDependencies: + "@clerc/core": "*" + checksum: 10c0/8508f0fd5c398380f59410aaa06d5e8466ce0a091bc04505f5b9fa98430240a767c6c2d239d29086324ffef3dcf398a10507073de30429c592d54f169bd7fbaf + languageName: node + linkType: hard + +"@clerc/plugin-version@npm:^0.44.0": + version: 0.44.0 + resolution: "@clerc/plugin-version@npm:0.44.0" + dependencies: + "@clerc/utils": "npm:0.44.0" + peerDependencies: + "@clerc/core": "*" + checksum: 10c0/7a66e4417f7b008528b17333032c21302987b11b472e9169e1cd9a7082b6fb28cbe16451af3bffbc861d4059375279373a998772334ae6eacbd931952a0ef9bc + languageName: node + linkType: hard + +"@clerc/utils@npm:0.44.0": + version: 0.44.0 + resolution: "@clerc/utils@npm:0.44.0" + peerDependencies: + "@clerc/core": "*" + checksum: 10c0/160c970f7c0ae80708023c19170ad5ee3d1c45e62d9b1244811a507ac5d3ac74a81d36ec81555c0c9327826f5bbad351c3f7008591d7e349ef374862b2b962ee + languageName: node + linkType: hard + "@clerk/backend@npm:^1.22.0": version: 1.22.0 resolution: "@clerk/backend@npm:1.22.0" @@ -798,6 +858,23 @@ __metadata: languageName: node linkType: hard +"@content-collections/cli@npm:^0.1.6": + version: 0.1.6 + resolution: "@content-collections/cli@npm:0.1.6" + dependencies: + "@clerc/core": "npm:^0.44.0" + "@clerc/plugin-completions": "npm:^0.44.0" + "@clerc/plugin-help": "npm:^0.44.0" + "@clerc/plugin-version": "npm:^0.44.0" + "@content-collections/integrations": "npm:0.2.1" + peerDependencies: + "@content-collections/core": 0.x + bin: + content-collections: dist/index.js + checksum: 10c0/e3b9598a53493e2efeeb6d159c31990734d96a8326e6d5a522718837132fcb584ce75b393ded4cd1f077d5e824f6c6ec89fe0e4d2c149e726ef72521c97520e7 + languageName: node + linkType: hard + "@content-collections/core@npm:^0.8.0": version: 0.8.0 resolution: "@content-collections/core@npm:0.8.0" @@ -4571,6 +4648,13 @@ __metadata: languageName: node linkType: hard +"@types/text-table@npm:^0.2.3": + version: 0.2.5 + resolution: "@types/text-table@npm:0.2.5" + checksum: 10c0/967054ba7509bf6ba4dda8adf81d048a7773b35295edb8670c045b6e27bda556a1917c8a29d4ea6b7d7e5b494785500779a002508c4415ef2e8b2a5351ca2066 + languageName: node + linkType: hard + "@types/tough-cookie@npm:*": version: 4.0.5 resolution: "@types/tough-cookie@npm:4.0.5" @@ -6194,6 +6278,13 @@ __metadata: languageName: node linkType: hard +"defu@npm:^6.1.2": + version: 6.1.4 + resolution: "defu@npm:6.1.4" + checksum: 10c0/2d6cc366262dc0cb8096e429368e44052fdf43ed48e53ad84cc7c9407f890301aa5fcb80d0995abaaf842b3949f154d060be4160f7a46cb2bc2f7726c81526f5 + languageName: node + linkType: hard + "delayed-stream@npm:~1.0.0": version: 1.0.0 resolution: "delayed-stream@npm:1.0.0" @@ -6384,6 +6475,13 @@ __metadata: languageName: node linkType: hard +"emoji-regex@npm:^10.2.1": + version: 10.4.0 + resolution: "emoji-regex@npm:10.4.0" + checksum: 10c0/a3fcedfc58bfcce21a05a5f36a529d81e88d602100145fcca3dc6f795e3c8acc4fc18fe773fbf9b6d6e9371205edb3afa2668ec3473fa2aa7fd47d2a9d46482d + languageName: node + linkType: hard + "emoji-regex@npm:^8.0.0": version: 8.0.0 resolution: "emoji-regex@npm:8.0.0" @@ -8359,6 +8457,13 @@ __metadata: languageName: node linkType: hard +"is-platform@npm:^1.0.0": + version: 1.0.0 + resolution: "is-platform@npm:1.0.0" + checksum: 10c0/5002f262fc4e5f5ba32c009f891ec40a9c6d7364ebc33ba1224c058bcdc6eaa8fe13da447cb5983b1edb7dca88e97a7656da581482cf3923a7b7441acf485541 + languageName: node + linkType: hard + "is-potential-custom-element-name@npm:^1.0.1": version: 1.0.1 resolution: "is-potential-custom-element-name@npm:1.0.1" @@ -9289,6 +9394,13 @@ __metadata: languageName: node linkType: hard +"lite-emit@npm:^2.3.0": + version: 2.3.0 + resolution: "lite-emit@npm:2.3.0" + checksum: 10c0/97fda49d9b502c523505e522676262e5580c049fd3d1cba25b3ae4fb9b1b5ccd4361c15135d28917c70e6198823aa85365dd4c3154b6e5246b84d4b328c48a3d + languageName: node + linkType: hard + "locate-path@npm:^5.0.0": version: 5.0.0 resolution: "locate-path@npm:5.0.0" @@ -12381,6 +12493,17 @@ __metadata: languageName: node linkType: hard +"string-width@npm:^6.1.0": + version: 6.1.0 + resolution: "string-width@npm:6.1.0" + dependencies: + eastasianwidth: "npm:^0.2.0" + emoji-regex: "npm:^10.2.1" + strip-ansi: "npm:^7.0.1" + checksum: 10c0/7b2991ea7c946a43042070787b85af454079116dfd6d853aab4ff8a6d4ac717cdc18656cfee15b7a7a78286669202a4a56385728f0740cb1e15001c71807b361 + languageName: node + linkType: hard + "string.prototype.includes@npm:^2.0.1": version: 2.0.1 resolution: "string.prototype.includes@npm:2.0.1" @@ -12708,6 +12831,7 @@ __metadata: "@clerk/nextjs": "npm:^6.9.10" "@clerk/themes": "npm:^2.2.5" "@codecov/nextjs-webpack-plugin": "npm:^1.7.0" + "@content-collections/cli": "npm:^0.1.6" "@content-collections/core": "npm:^0.8.0" "@content-collections/mdx": "npm:^0.2.0" "@content-collections/next": "npm:^0.2.4" @@ -13085,13 +13209,20 @@ __metadata: languageName: node linkType: hard -"type-fest@npm:^4.15.0": +"type-fest@npm:^4.15.0, type-fest@npm:^4.3.1": version: 4.32.0 resolution: "type-fest@npm:4.32.0" checksum: 10c0/e2e877055487d109eba99afc58211db4a480837ff7b243c7de0b3e2ac29fdce55ab55e201c64cb1a8b2aeffce7e8f60ae3ce3a2f7e6fb68261d62743e54288ba languageName: node linkType: hard +"type-flag@npm:^3.0.0": + version: 3.0.0 + resolution: "type-flag@npm:3.0.0" + checksum: 10c0/b1015d4eb18cd85432fa3bcd0228149dd6893a9c1360a2ad619f79b72e19acfb648a932e2a9ccf2e2db0f0c4b86385bd886a3364e221afb116424e0ae6d1b1ba + languageName: node + linkType: hard + "typed-array-buffer@npm:^1.0.3": version: 1.0.3 resolution: "typed-array-buffer@npm:1.0.3" @@ -13983,6 +14114,13 @@ __metadata: languageName: node linkType: hard +"yoctocolors@npm:^1.0.0": + version: 1.0.0 + resolution: "yoctocolors@npm:1.0.0" + checksum: 10c0/669374d361ffc65d55ae563badae4f2c8d1973c660695b7cf3d8b415f776c38bf535d49e04b648e5fd692fad24f02c05ca2910c300bc29d280d6c77ffc1e687d + languageName: node + linkType: hard + "zod-validation-error@npm:^3.0.3": version: 3.4.0 resolution: "zod-validation-error@npm:3.4.0"