feat(auth): Implement user authentication and refactor UI components.

* chore(auth): configure Discord provider and environment for authentication

* chore(auth): configure Discord provider and environment for authentication

* chore(auth): configure Discord provider and environment for authentication

* chore(prisma): configure Prisma schema for user sessions

* chore(ci): update release workflow configuration.

* test(storybook): Refactors story to match evolved button component .

.github/workflows/release.yml

@@ -4,9 +4,6 @@ on:
     branches:
       - main
 
-permissions:
-  contents: read
-
 jobs:
   release:
     env:

prisma/migrations/20240628063912_add_scafollded_tables/migration.sql

@@ -0,0 +1,84 @@
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "createdById" TEXT NOT NULL,
+
+    CONSTRAINT "Post_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Account" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "provider" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "refresh_token" TEXT,
+    "access_token" TEXT,
+    "expires_at" INTEGER,
+    "token_type" TEXT,
+    "scope" TEXT,
+    "id_token" TEXT,
+    "session_state" TEXT,
+    "refresh_token_expires_in" INTEGER,
+
+    CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL,
+    "sessionToken" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "name" TEXT,
+    "email" TEXT,
+    "emailVerified" TIMESTAMP(3),
+    "image" TEXT,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateIndex
+CREATE INDEX "Post_name_idx" ON "Post"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
+
+-- AddForeignKey
+ALTER TABLE "Post" ADD CONSTRAINT "Post_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

src/app/_components/connected-user.tsx

@@ -1,25 +1,31 @@
-import Avatar from "@components/ui/avatar";
-import React from "react";
+import React, { memo } from "react";
+import UserAvatar from "@components/user-avatar";
+import { calculateElapsedTime } from "~/lib/user";
 
 interface ConnectedUserProps {
-    avatarSrc: string,
-    joinedFor: string,
-    likeCount: string,
-    username: string,
+    alt: string;
+    src?: string;
+    userId?: string;
 }
 
-export default function ConnectedUser({ avatarSrc, joinedFor, likeCount, username }: Readonly<ConnectedUserProps>) {
+const ConnectedUser: React.FC<ConnectedUserProps> = memo(({ alt, src, userId }) => {
+    // TODO[MH]: Implement user creation date and total likes
+    const userCreatedAt = Date.now()
+    const totalLikes = Math.floor(Math.random() * 1000);
+
     return (
-        <div className="flex items-center gap-4 w-60">
-            <Avatar alt={username}  className="h-11 w-11" src={avatarSrc}/>
-            <div className="grid gap-1">
-                <p className="text-sm font-semibold leading-none">
-                    {username}
-                </p>
-                <p className="text-xs text-muted-foreground">
-                    Joined for {joinedFor} / {likeCount} likes
-                </p>
+        <div className="flex flex-row gap-2.5 items-center justify-center h-[95px] py-[25px] px-0 w-[257px]">
+            <UserAvatar alt={alt} src={src} />
+            <div className="flex flex-col gap-[5px] h-[44px] w-[179px]">
+                <div className="font-semibold leading-[21.78px] text-[18px] w-fit">{alt}</div>
+                <div className="font-normal leading-[16.96px] truncate text-[14px] w-fit">
+                    Joined {calculateElapsedTime(userCreatedAt)} / +{totalLikes} likes
+                </div>
             </div>
         </div>
-    )
-}
+    );
+});
+
+ConnectedUser.displayName = "ConnectedUser";
+
+export default ConnectedUser;

src/app/_components/nav-links.tsx

@@ -0,0 +1,32 @@
+import { buttonVariants } from "@components/ui/button";
+import Link from "next/link";
+import React, { memo } from "react";
+import { type VariantProps } from "cva";
+
+interface NavLinkItem extends VariantProps<typeof buttonVariants> {
+    href: string;
+    label: string;
+}
+
+export interface NavLinksProps extends React.HTMLAttributes<HTMLDivElement> {
+    links: NavLinkItem[];
+}
+
+const NavLinks: React.FC<NavLinksProps> = memo(({ links, className, ...props }) => {
+    return (
+        <div {...props} className={className}>
+            {links.map(({ href, label, variant }) => (
+                <Link
+                    key={href}
+                    className={buttonVariants({ variant })}
+                    href={href}
+                >
+                    {label}
+                </Link>
+            ))}
+        </div>
+    );
+});
+NavLinks.displayName = "NavLinks";
+
+export { NavLinks };

src/app/_components/stories/ui/avatar.stories.tsx

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from "@storybook/react";
 
-import Avatar from "@components/ui/avatar";
+import {Avatar, AvatarFallback, AvatarImage} from "@components/ui/avatar";
+import React from "react";
 
 const meta: Meta = {
     title: "UI/Avatar",
@@ -10,16 +11,26 @@ export default meta;
 
 type Story = StoryObj<typeof Avatar>;
 
-export const Default: Story =  {
-    args: {
-        src: "https://github.com/shadcn.png",
-        alt: "some alt text",
-    },
+const Template = {
+    render: () => {
+        return (
+            <Avatar>
+                <AvatarImage src="https://github.com/shadcn.png" alt="The y in Morty" />
+                <AvatarFallback>The y in Morty</AvatarFallback>
+            </Avatar>
+        );
+    }
 }
 
-export const Fallback: Story = {
+
+export const Default: Story = {
+    ...Template,
+}
+
+
+export const Small: Story = {
     args: {
-        src: "",
-        alt: "some alt text",
+        size: "small",
     },
-}
+    ...Template,
+}