🎮 playground Setup (#88)

Author: steeeee0223

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: {},
+  },
+};