Experimental nextjs example

apps/examples/nextjs/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/examples/nextjs/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/examples/nextjs/next.config.js

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const webpack = require("webpack");
+
+const nextConfig = {
+  webpack: (config, { isServer, nextRuntime }) => {
+    // Avoid AWS SDK Node.js require issue
+    if (isServer && nextRuntime === "nodejs")
+      config.plugins.push(
+        new webpack.IgnorePlugin({ resourceRegExp: /^aws-crt|signature-v4-crt$/ })
+      );
+    return config;
+  },
+}
+
+module.exports = nextConfig

apps/examples/nextjs/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "nextjs-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/node": "20.3.3",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "autoprefixer": "10.4.14",
+    "next": "13.4.8",
+    "postcss": "8.4.24",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.2",
+    "typescript": "^5.1.6",
+    "@server/core": "workspace:*",
+    "@providers/s3": "workspace:*",
+    "@adapters/interface": "workspace:*",
+    "shared-types": "workspace:*"
+  }
+}

apps/examples/nextjs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/examples/nextjs/src/app/StepSection.tsx

@@ -0,0 +1,51 @@
+ import {ReactNode, useMemo} from "react";
+
+
+interface NumberComponentProps {
+    number: number
+    done?: boolean
+}
+
+const NumberComponent = ({ number, done }: NumberComponentProps) => {
+    return (
+        <div
+            className={`text-lg font-bold text-cyan-900 w-6 h-6 flex justify-center items-center rounded-full ${
+                done ? 'bg-green-500' : 'bg-white'
+            }`}
+        >
+            {done ? '✓' : number}
+        </div>
+    )
+}
+
+interface Props {
+    number: number
+    active: boolean
+    done?: boolean
+    children: (disabled: boolean) => ReactNode
+}
+
+export default function StepSection ({ children, number, active, done }: Props){
+    const disabled = useMemo(() => {
+        return !active
+    }, [active])
+
+    return (
+        <section className={'flex items-start gap-4'}>
+            <div
+                aria-disabled={done ? false : disabled}
+                className={
+                    'aria-disabled:opacity-50 aria-disabled:pointer-events-none'
+                }
+            >
+                <NumberComponent number={number} done={done} />
+            </div>
+            <div
+                aria-disabled={disabled}
+                className={`transition-[max-height] duration-500 overflow-y-auto aria-disabled:opacity-50 aria-disabled:pointer-events-none`}
+            >
+                {children(disabled)}
+            </div>
+        </section>
+    )
+}

apps/examples/nextjs/src/app/api/README.md

@@ -0,0 +1,9 @@
+### API Routes List
+- POST /api/users/[id]/images
+  - signs upload url and returns a **signed url** + **confirmation token**
+- GET /api/users/[id]/images/[imageId]
+  - gets image url **status** and **image variants** if they exist
+- DELETE /api/users/[id]/images/[imageId]
+  - checks if file exists in db, if yes it deletes the file from db and storage provider as well.
+- POST /api/users/[id]/images/[imageId]/confirm
+  - validates **confirm token**, checks if image **exists** in the storage provider and finally updates the file status to **uploaded**.

apps/examples/nextjs/src/app/api/users/[id]/images/[imageId]/confirm/route.ts

@@ -0,0 +1,12 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { uploadWizard } from '../../../../../../upload-wizard'
+
+export async function POST(
+    request: NextRequest,
+    { params }: { params: { id: string; imageId: string } }
+) {
+    // TODO: validate confirm Token
+    await uploadWizard.confirmUpload(params.imageId, 'confirmToken')
+
+    return NextResponse.json({})
+}

apps/examples/nextjs/src/app/api/users/[id]/images/[imageId]/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { uploadWizard } from '../../../../../upload-wizard'
+
+export async function DELETE(
+    request: NextRequest,
+    { params }: { params: { id: string; imageId: string } }
+) {
+    // TODO: delete image
+    await uploadWizard.delete(params.imageId)
+
+    return NextResponse.json({})
+}
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: { id: string; imageId: string } }
+) {
+    // TODO: get image
+    const data = await uploadWizard.getData(params.imageId)
+
+    return NextResponse.json(data)
+}

apps/examples/nextjs/src/app/api/users/[id]/images/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { uploadWizard } from '../../../../upload-wizard'
+
+export async function POST(
+    request: NextRequest,
+    { params }: { params: { id: string } }
+) {
+    let response
+    try {
+        response = await uploadWizard.signedUploadUrl()
+    } catch (e) {
+        console.log('e', e)
+        return new Response('Internal server error', {
+            status: 500,
+        })
+    }
+
+    return NextResponse.json(response)
+}

apps/examples/nextjs/src/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

apps/examples/nextjs/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import './globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Upload Wizard - Next.js Example',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}