Kampus Local Setup (#636)

# Description

With the upcoming changes everyone should be able to run kampus(basic
level).

# Changes

- [x] `@kampus-apps/gql` has been named to `@kampus/gql`
- [x] Respective commands and settings has been updated to match the
naming
- [x] `@kampus-apps/ui` has been named to `@kampus/ui` 
- [x] Ports has been identified and set for "gql, kampus, pasaport"
  - [x] @kampus/kampus now has `3000` port!
  - [x] @kampus/gql now has `4000` port!
  - [x] @kampus/pasaport now has `3001` port!
- [x] Session issue has been addressed where it was using
functionalities where it should not have. See more description below.
- [x] Commands has been added (Usages are now on turbo instead of
individual commands), documentation has been adjusted with deletion of
setup; since Turbo dependencies builds the app that step is no longer
relevant.
- [x] `npm run dev` runs all "dev" commands on each package inside the
workspace
- [x] `npm run gql` runs only "gql" server so backend work can be done
separetly.
- [x] `npm run web` runs "gql", "kampus" and "pasaport" apps so the
platform can be alive with 1 command.
- [x] @kampus/kampus#dev dependencies has been updated due to dependant
"dev" commands never finishes/exits. This was causing that application
to never start.


## Session Issue

GQL server (aka: backend) was trying to setup whole "next-auth" inside
the "gql" server where it is not necessary to setup and run there.
Next-auth has "session" endpoint where session can be retrieved by
cookie
([doc](https://next-auth.js.org/getting-started/rest-api#get-apiauthsession))

Issue has been addressed by asking session info to "pasaport" by adding
"cookie" to the request so concerns are separated.

### How were these changes tested?

You should be able to run all the commands above and should receive no
error.
When you either have session or not "gql" setup should not give you
error but you should be able to access your session as before.


⚠️⚠️⚠️⚠️

@usirin all the redirect URL's on 3rd Party Auth setups should be
redirecting back to either kampus application or we should discuss where
should we redirect after login.

Flow right now:

Kampus(pano, sozluk)-> login -> pasaport(login) -> 3rd party ->
pasaport(index) at the moment 404

Suggestion:

Kampus(pano, sozluk)-> login -> pasaport(login with redirect url or
similar) -> 3rd party -> pasaport(index) use redirect uri or similar
solution to redirect back to the app it's coming from

---------

Co-authored-by: Umut Sirin <[email protected]>

README.md

@@ -46,14 +46,3 @@ If you haven't already install [Volta](https://volta.sh), you can install instal
 ```sh
 curl https://get.volta.sh | bash
 ```
-
-### Setup projects
-
-Install dependencies and build all projects.
-
-```sh
-# Install all the dependencies use -w or --workspace for workspace specific installs
-npm install
-# Builds all the applications in the monorepo
-npx turbo build
-```

apps/gql/.env.example

@@ -1,3 +1,3 @@
 NODE_ENV=development
 DATABASE_URL=mysql://kampus:kampus@localhost:3306/kampus?schema=public
-NEXTAUTH_URL=http://localhost:3002/auth
+NEXTAUTH_URL=http://localhost:3001/auth

apps/gql/app/graphql/route.ts

@@ -2,8 +2,7 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { createSchema, createYoga } from "graphql-yoga";
 
-import { getServerSession } from "@kampus/next-auth";
-
+import { getSession } from "~/features/auth";
 import { createActions } from "~/actions";
 import { createClients } from "~/clients";
 import { createLoaders } from "~/loaders";
@@ -17,10 +16,10 @@ const { handleRequest } = createYoga<KampusGQLContext>({
   schema: createSchema<KampusGQLContext>({ typeDefs, resolvers }),
   logging: "debug",
   graphiql: true,
-  context: async () => {
+  context: async ({ request }) => {
     const loaders = createLoaders(clients);
     const actions = createActions(clients);
-    const session = await getServerSession();
+    const session = await getSession(request);
 
     return {
       loaders,

apps/gql/env.ts

@@ -14,7 +14,7 @@ export const env = parseEnv(
       .string()
       .url()
       .default("mysql://kampus:kampus@localhost:3306/kampus?schema=public&connect_timeout=300"),
-    NEXTAUTH_URL: z.string().url().default("http://localhost:3002/auth"),
+    NEXTAUTH_URL: z.string().url().default("http://localhost:3001/auth"),
     KAMPUS_ENV: z.enum(["development", "test", "production"]).default("development"),
   }
 );

apps/gql/features/auth/index.ts

@@ -0,0 +1,21 @@
+import { type Session } from "@kampus/next-auth";
+
+import { env } from "../../env";
+
+export const getSession = async (request: Request) => {
+  const headers = new Headers(request.headers);
+  try {
+    const cookie = headers.get("cookie");
+    const session = (await fetch(`${env.NEXTAUTH_URL}/session`, {
+      method: "GET",
+      headers: {
+        cookie: cookie || "",
+      },
+    }).then((res) => res.json())) as Session;
+
+    return session;
+  } catch (e) {
+    // handle error for session request fails
+    return null;
+  }
+};

apps/gql/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "codegen": "graphql-codegen",
     "build": "next build",
-    "dev": "next dev",
+    "dev": "next dev -p 4000",
     "start": "next start",
     "lint": "next lint",
     "test": "vitest",

apps/kampus/.env.example

@@ -1,7 +1,7 @@
 # update with the url after running `npm run dev` under `apps/gql`
-NEXT_PUBLIC_GQL_URL=http://localhost:3001/graphql
+NEXT_PUBLIC_GQL_URL=http://localhost:4000/graphql
+NEXTAUTH_URL=http://localhost:3001/auth
 DATABASE_URL=mysql://root:kampus@localhost:3306/kampus
-NEXTAUTH_URL=http://localhost:3002/auth
 AUTH_COOKIE_DOMAIN=''
 GITHUB_ID=''
 GITHUB_SECRET=''

apps/kampus/app/layout.tsx

@@ -1,13 +1,13 @@
 import { type ReactNode } from "react";
 import { Inter } from "next/font/google";
 
-import { Toaster } from "@kampus/ui-next";
+import { Toaster } from "@kampus/ui";
 
 import { RelayEnvironmentProvider } from "~/features/relay/RelayEnvironmentProvider";
 
 import "./globals.css";
 
-import { ThemeProvider } from "@kampus/ui-next";
+import { ThemeProvider } from "@kampus/ui";
 
 const inter = Inter({ subsets: ["latin"] });
 

apps/kampus/app/loading.tsx

@@ -1,4 +1,4 @@
-import { Loading as LoadingSkeleton } from "@kampus/ui-next";
+import { Loading as LoadingSkeleton } from "@kampus/ui";
 
 export default function Loading() {
   return (

apps/kampus/app/pano/PanoFeed.tsx

@@ -1,7 +1,7 @@
 import { Suspense, useCallback } from "react";
 import { graphql, useFragment, usePaginationFragment } from "react-relay";
 
-import { Button } from "@kampus/ui-next";
+import { Button } from "@kampus/ui";
 
 import { PostItem } from "~/app/pano/features/post-list/PostItem";
 import { type PanoFeed_viewer$key } from "./__generated__/PanoFeed_viewer.graphql";

apps/kampus/app/pano/features/post-filter/PostSortFilters.tsx

@@ -2,7 +2,7 @@
 
 import { useSearchParams } from "next/navigation";
 
-import { ThemeToggle } from "@kampus/ui-next";
+import { ThemeToggle } from "@kampus/ui";
 
 import { PanoFilterLink } from "~/app/pano/features/post-filter/PanoFilterLink";
 import {

apps/kampus/app/pano/features/post-list/MoreOptions.tsx

@@ -21,7 +21,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   useToast,
-} from "@kampus/ui-next";
+} from "@kampus/ui";
 
 import { type MoreOptions_post$key } from "./__generated__/MoreOptions_post.graphql";
 import { type MoreOptions_viewer$key } from "./__generated__/MoreOptions_viewer.graphql";

apps/kampus/app/pano/features/post-list/PostItem.tsx

@@ -3,7 +3,7 @@
 import NextLink from "next/link";
 import { graphql, useFragment } from "react-relay";
 
-import { cn } from "@kampus/ui-next/utils";
+import { cn } from "@kampus/ui/utils";
 
 import { TimeAgo } from "~/../../packages/ui";
 import { type PostItem_post$key } from "./__generated__/PostItem_post.graphql";

apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx

@@ -1,8 +1,8 @@
 import { Triangle } from "lucide-react";
 import { graphql, useFragment, useMutation } from "react-relay";
 
-import { Button } from "@kampus/ui-next";
-import { cn } from "@kampus/ui-next/utils";
+import { Button } from "@kampus/ui";
+import { cn } from "@kampus/ui/utils";
 
 import { type PostUpvoteButton_post$key } from "./__generated__/PostUpvoteButton_post.graphql";
 

apps/kampus/env.ts

@@ -11,9 +11,9 @@ export const env = parseEnv(
   },
   {
     NODE_ENV: z.enum(["development", "test", "production"]),
-    GQL_URL: z.string().url().default("http://localhost:3001/graphql"),
+    GQL_URL: z.string().url().default("http://localhost:4000/graphql"),
     RESEND_API_KEY: z.string().default("default-resend-key"),
-    NEXTAUTH_URL: z.string().url().default("http://localhost:3000/pasaport"),
+    NEXTAUTH_URL: z.string().url().default("http://localhost:3001/auth"),
     KAMPUS_ENV: z.enum(["development", "test", "production"]).default("development"),
   }
 );

apps/kampus/features/main-nav/MainNav.tsx

@@ -3,8 +3,8 @@
 import { type PropsWithChildren, type ReactNode } from "react";
 import Link from "next/link";
 
-import { TopNav, TopNavBrand, TopNavItem } from "@kampus/ui-next";
-import { cn } from "@kampus/ui-next/utils";
+import { TopNav, TopNavBrand, TopNavItem } from "@kampus/ui";
+import { cn } from "@kampus/ui/utils";
 
 interface Props {
   brand: ReactNode;

apps/kampus/next.config.mjs

@@ -4,7 +4,7 @@ const GQL_URL = process.env.NEXT_PUBLIC_GQL_URL ?? "";
 const config = {
   reactStrictMode: true,
   swcMinify: true,
-  transpilePackages: ["@kampus/tailwind", "@kampus/ui-next", "@kampus/next-auth", "@kampus/email"],
+  transpilePackages: ["@kampus/tailwind", "@kampus/ui", "@kampus/next-auth", "@kampus/email"],
 
   compiler: {
     relay: {

apps/kampus/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "@kampus/kampus",
+  "name": "@kampus-apps/kampus",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -19,6 +19,7 @@
   "dependencies": {
     "@kampus/next-auth": "*",
     "@kampus/relay": "*",
+    "@kampus/ui": "*",
     "react-relay": "15.0.0",
     "relay-compiler": "15.0.0",
     "znv": "0.3.2",

apps/pasaport/.env.example

@@ -1,5 +1,5 @@
 NODE_ENV=development
-NEXTAUTH_URL=http://localhost:3002/auth
+NEXTAUTH_URL=http://localhost:3001/auth
 DATABASE_URL=mysql://root:kampus@localhost:3306/kampus
 AUTH_COOKIE_DOMAIN=''
 GITHUB_ID=''

apps/pasaport/env.ts

@@ -10,7 +10,7 @@ export const env = parseEnv(
   },
   {
     NODE_ENV: z.enum(["development", "test", "production"]),
-    NEXTAUTH_URL: z.string().url().default("http://sozluk.local.kamp.us:3000/auth"),
+    NEXTAUTH_URL: z.string().url(),
     DATABASE_URL: z
       .string()
       .url()

apps/pasaport/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "@kampus/pasaport",
+  "name": "@kampus-apps/pasaport",
   "private": true,
   "version": "0.0.0",
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "start": "next start",
     "lint": "next lint",
     "test": "vitest",

apps/pasaport/tsconfig.json

@@ -1,8 +1,20 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "next.config.mjs", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "next.config.mjs",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

apps/ui/.storybook/preview.tsx → apps/studio/.storybook/preview.tsx

@@ -1,11 +1,11 @@
-import "@kampus/kampus/app/globals.css";
+import "@kampus-apps/kampus/app/globals.css";
 import "../styles.css";
 
 import React from "react";
 import type { StoryContext, StoryFn } from "@storybook/react";
 
-import { Toaster } from "@kampus/ui-next";
-import { ThemeProvider } from "@kampus/ui-next/components/theme-provider";
+import { Toaster } from "@kampus/ui";
+import { ThemeProvider } from "@kampus/ui/components/theme-provider";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

apps/ui/package.json → apps/studio/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@kampus-apps/ui",
-  "version": "1.0.0",
+  "name": "@kampus-apps/studio",
+  "version": "0.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {

apps/ui/stories/AlertDialog.stories.tsx → apps/studio/stories/AlertDialog.stories.tsx

@@ -11,7 +11,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
   Button,
-} from "@kampus/ui-next";
+} from "@kampus/ui";
 
 const meta = {
   title: "Alert Dialog",

apps/ui/stories/Avatar.stories.tsx → apps/studio/stories/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { UserAvatar } from "@kampus/ui-next";
+import { UserAvatar } from "@kampus/ui";
 
 const meta = {
   component: UserAvatar,

apps/ui/stories/Button.stories.tsx → apps/studio/stories/Button.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Loader2, Mail } from "lucide-react";
 
-import { Button } from "@kampus/ui-next/components/button";
+import { Button } from "@kampus/ui/components/button";
 
 const meta = {
   component: Button,

apps/ui/stories/Card.stories.tsx → apps/studio/stories/Card.stories.tsx

@@ -17,7 +17,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@kampus/ui-next";
+} from "@kampus/ui";
 
 const meta = {
   title: "Card",

apps/ui/stories/Checkbox.stories.tsx → apps/studio/stories/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { Checkbox, Label } from "@kampus/ui-next";
+import { Checkbox, Label } from "@kampus/ui";
 
 const labels = ["köpekleri çıkarmak", "alışverişe gitmek", "kitap okumak"];
 

apps/ui/stories/DropdownMenu.stories.tsx → apps/studio/stories/DropdownMenu.stories.tsx

@@ -26,7 +26,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@kampus/ui-next";
+} from "@kampus/ui";
 
 const meta = {
   title: "Dropdown Menu",

apps/ui/stories/Form.stories.tsx → apps/studio/stories/Form.stories.tsx

@@ -21,7 +21,7 @@ import {
   Textarea,
   useForm,
   z,
-} from "@kampus/ui-next";
+} from "@kampus/ui";
 
 // 1. create a form schema
 

apps/ui/stories/Input.stories.tsx → apps/studio/stories/Input.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button, InputWithButton, type InputProps } from "@kampus/ui-next";
-import { Input } from "@kampus/ui-next/components/input";
-import { Label } from "@kampus/ui-next/components/label";
+import { Button, InputWithButton, type InputProps } from "@kampus/ui";
+import { Input } from "@kampus/ui/components/input";
+import { Label } from "@kampus/ui/components/label";
 
 const meta = {
   component: Input,
@@ -45,7 +45,7 @@ export const WithText = {
     <div className="grid w-full max-w-sm items-center gap-1.5">
       <Label>{label}</Label>
       <Input placeholder={placeholder} disabled={disabled} />
-      <p className="text-sm text-muted-foreground">{text}</p>
+      <p className="text-muted-foreground text-sm">{text}</p>
     </div>
   ),
 } satisfies Story;

apps/ui/stories/Label.stories.tsx → apps/studio/stories/Label.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { Checkbox, Label } from "@kampus/ui-next";
+import { Checkbox, Label } from "@kampus/ui";
 
 const meta = {
   title: "Label",

apps/ui/stories/Loading.stories.tsx → apps/studio/stories/Loading.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Loading } from "@kampus/ui-next";
+import { Loading } from "@kampus/ui";
 
 const meta = {
   component: Loading,

apps/ui/stories/Select.stories.tsx → apps/studio/stories/Select.stories.tsx

@@ -8,7 +8,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "@kampus/ui-next";
+} from "@kampus/ui";
 
 const meta = {
   title: "Select",