🎮 playground Setup (#88)

apps/playground/eslint.config.js

@@ -0,0 +1,14 @@
+import baseConfig, { restrictEnvAccess } from "@swy/eslint-config/base";
+import nextjsConfig from "@swy/eslint-config/nextjs";
+import reactConfig from "@swy/eslint-config/react";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  {
+    ignores: [".next/**"],
+  },
+  ...baseConfig,
+  ...reactConfig,
+  ...nextjsConfig,
+  ...restrictEnvAccess,
+];

apps/playground/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/playground/next.config.js

@@ -0,0 +1,57 @@
+import { fileURLToPath } from "url";
+import { createJiti } from "jiti";
+
+// Import env files to validate at build time. Use jiti so we can load .ts files in here.
+await createJiti(fileURLToPath(import.meta.url))("./src/env");
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+
+  /** Enables hot reloading for local packages without a build step */
+  transpilePackages: [
+    "@swy/liveblocks",
+    "@swy/notion",
+    "@swy/ui",
+    "@swy/validators",
+    "lucide-react",
+  ],
+  experimental: {
+    optimizePackageImports: ["lucide-react"],
+  },
+
+  /** We already do linting and typechecking as separate tasks in CI */
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
+  /**  */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "img.clerk.com",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+      {
+        protocol: "https",
+        hostname: "files.edgestore.dev",
+      },
+      {
+        protocol: "https",
+        hostname: "www.notion.so",
+      },
+      {
+        protocol: "https",
+        hostname: "upload.wikimedia.org",
+      },
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+    ],
+  },
+};
+
+export default config;

apps/playground/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@swy/playground",
+  "version": "1.4.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "pnpm with-env next build",
+    "clean": "git clean -xdf .next .turbo node_modules",
+    "dev": "pnpm with-env next dev -p 3002",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "start": "pnpm with-env next start",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env --"
+  },
+  "dependencies": {
+    "@swy/i18n": "workspace:*",
+    "@swy/liveblocks": "workspace:*",
+    "@swy/notion": "workspace:*",
+    "@swy/ui": "workspace:*",
+    "@swy/validators": "workspace:*",
+    "@t3-oss/env-nextjs": "catalog:env",
+    "lucide-react": "catalog:ui",
+    "next": "catalog:next14",
+    "react": "catalog:react18",
+    "react-dom": "catalog:react18",
+    "react-textarea-autosize": "^8.5.3",
+    "sonner": "catalog:ui",
+    "swr": "^2.2.5",
+    "yjs": "^13.6.15",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@swy/eslint-config": "workspace:*",
+    "@swy/prettier-config": "workspace:*",
+    "@swy/tailwind-config": "workspace:*",
+    "@swy/tsconfig": "workspace:*",
+    "@types/node": "catalog:node20",
+    "@types/react": "catalog:react18",
+    "@types/react-dom": "catalog:react18",
+    "dotenv-cli": "catalog:env",
+    "eslint": "catalog:",
+    "jiti": "^2.4.0",
+    "prettier": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "prettier": "@swy/prettier-config"
+}

apps/playground/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};

apps/playground/src/app/(marketing)/_components/footer.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@swy/ui/shadcn";
+
+import Logo from "./logo";
+
+export default function Footer() {
+  return (
+    <div className="z-50 flex w-full items-center bg-main p-6">
+      <Logo />
+      <div className="flex w-full items-center justify-between gap-x-2 md:ml-auto md:justify-end">
+        <Button variant="item" size="sm">
+          Privacy Policy
+        </Button>
+        <Button variant="item" size="sm">
+          Terms & Conditions
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/playground/src/app/(marketing)/_components/heading.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@swy/ui/shadcn";
+
+const Heading = () => {
+  return (
+    <div className="max-w-3xl space-y-4">
+      <h1 className="text-3xl font-bold sm:text-5xl md:text-6xl">
+        Your Ideas , Documents, & Plans. Unified. Welcome to{" "}
+        <span className="underline">Steeeee WorXpace</span>
+      </h1>
+      <h3 className="text-base font-medium sm:text-xl md:text-2xl">
+        Steeeee WorXpace is the connected workspace where <br />
+        better, faster work happens.
+      </h3>
+      <Link href="/sign-in">
+        <Button className="mt-4">
+          Get Started <ArrowRight className="ml-2 size-4" />
+        </Button>
+      </Link>
+    </div>
+  );
+};
+
+export default Heading;

apps/playground/src/app/(marketing)/_components/heroes.tsx

@@ -0,0 +1,38 @@
+import Image from "next/image";
+
+export default function Heroes() {
+  return (
+    <div className="flex max-w-5xl flex-col items-center justify-center">
+      <div className="flex items-center">
+        <div className="relative h-[300px] w-[300px] sm:h-[350px] sm:w-[350px] md:h-[400px] md:w-[400px]">
+          <Image
+            src="/documents.png"
+            fill
+            className="object-contain dark:hidden"
+            alt="Documents"
+          />
+          <Image
+            src="/documents-dark.png"
+            fill
+            className="hidden object-contain dark:block"
+            alt="Documents"
+          />
+        </div>
+        <div className="relative hidden h-[400px] w-[400px] md:block">
+          <Image
+            src="/reading.png"
+            fill
+            className="object-contain dark:hidden"
+            alt="Reading"
+          />
+          <Image
+            src="/reading-dark.png"
+            fill
+            className="hidden object-contain dark:block"
+            alt="Reading"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/playground/src/app/(marketing)/_components/index.ts

@@ -0,0 +1,4 @@
+export { default as Heading } from "./heading";
+export { default as Heroes } from "./heroes";
+export { default as Footer } from "./footer";
+export { default as Navbar } from "./navbar";

apps/playground/src/app/(marketing)/_components/logo.tsx

@@ -0,0 +1,31 @@
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+
+import { cn } from "@swy/ui/lib";
+
+const font = Poppins({
+  subsets: ["latin"],
+  weight: ["400", "600"],
+});
+
+export default function Logo() {
+  return (
+    <div className="hidden items-center gap-x-2 md:flex">
+      <Image
+        className="dark:hidden"
+        src="/notion.svg"
+        height="40"
+        width="40"
+        alt="Logo"
+      />
+      <Image
+        className="hidden dark:block"
+        src="/notion-dark.svg"
+        height="40"
+        width="40"
+        alt="Logo"
+      />
+      <p className={cn("font-semibold", font.className)}>WorXpace</p>
+    </div>
+  );
+}

apps/playground/src/app/(marketing)/_components/navbar.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useScrollTop } from "@swy/ui/hooks";
+import { cn } from "@swy/ui/lib";
+import { ThemeToggle } from "@swy/ui/shadcn";
+
+import Logo from "./logo";
+
+export default function Navbar() {
+  const scrolled = useScrollTop();
+
+  return (
+    <div
+      className={cn(
+        "fixed top-0 z-50 flex w-full items-center bg-main p-6",
+        scrolled && "border-b shadow-sm",
+      )}
+    >
+      <Logo />
+      <div className="flex w-full items-center justify-between gap-x-2 md:ml-auto md:justify-end">
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+}

apps/playground/src/app/(marketing)/layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+
+import { Navbar } from "./_components";
+
+export default function MarketingLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="h-full bg-main">
+      <Navbar />
+      <main className="h-full pt-40">{children}</main>
+    </div>
+  );
+}

apps/playground/src/app/(marketing)/page.tsx

@@ -0,0 +1,15 @@
+import { Footer, Heading, Heroes } from "./_components";
+
+const Marketing = () => {
+  return (
+    <div className="flex min-h-full flex-col bg-main">
+      <div className="flex flex-1 flex-col items-center justify-center gap-y-8 px-6 pb-10 text-center md:justify-start">
+        <Heading />
+        <Heroes />
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Marketing;

apps/playground/src/app/(platform)/(auth)/sign-in/_components/sign-in-button.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Image from "next/image";
+
+import { Button } from "@swy/ui/shadcn";
+
+interface SignInButtonProps {
+  name: string;
+  avatarUrl: string;
+}
+
+export const SignInButton: React.FC<SignInButtonProps> = ({
+  name,
+  avatarUrl,
+}) => {
+  return (
+    <Button variant="hint" className="flex h-fit w-full justify-between">
+      <div className="flex w-full items-center gap-2.5">
+        <div className="relative flex-shrink-0">
+          <Image
+            src={avatarUrl}
+            alt="I"
+            className="size-7 rounded-full border border-border"
+          />
+        </div>
+        <div className="flex-1 text-left">
+          <div className="truncate text-sm text-primary dark:text-primary/80">
+            {name}
+          </div>
+          <div className="truncate text-xs text-secondary dark:text-secondary-dark">
+            Fake user
+          </div>
+        </div>
+      </div>
+    </Button>
+  );
+};