Port to /pages

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "packages/lygia"]
+	path = packages/lygia
+	url = https://github.com/patriciogonzalezvivo/lygia.git

package.json

@@ -4,7 +4,8 @@
     "description": "",
     "private": true,
     "scripts": {
-        "build": "npm run build --workspaces"
+        "build": "npm run build --workspaces",
+        "preinstall": "npx patch-package"
     },
     "keywords": [],
     "author": "",
@@ -26,6 +27,7 @@
     "dependencies": {
         "eslint-import-resolver-typescript": "^3.5.1",
         "eslint-plugin-import": "^2.26.0",
-        "npm-run-all": "^4.1.5"
+        "npm-run-all": "^4.1.5",
+        "patch-package": "^7.0.0"
     }
 }

packages/client/README.md

@@ -1,5 +1,3 @@
-# Alma Client
-
 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
@@ -16,16 +14,20 @@ 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.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
 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.
+- [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!
 

packages/client/next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  reactStrictMode: true,
+}
 
 module.exports = nextConfig

packages/client/package.json

@@ -14,13 +14,15 @@
         "@monaco-editor/react": "^4.5.1",
         "@mui/icons-material": "^5.11.16",
         "@mui/material": "^5.13.5",
+        "@prisma/client": "^4.16.1",
         "@types/node": "20.2.5",
         "@types/react": "18.2.8",
         "@types/react-dom": "18.2.4",
         "@usealma/renderer": "*",
         "@usealma/types": "*",
         "autoprefixer": "10.4.14",
         "clsx": "^1.2.1",
+        "dotenv-cli": "^7.2.1",
         "eslint": "8.42.0",
         "eslint-config-next": "13.4.4",
         "framer-motion": "^10.12.16",
@@ -31,6 +33,11 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "tailwindcss": "3.3.2",
-        "typescript": "5.1.3"
+        "typescript": "5.1.3",
+        "zod": "^3.21.4"
+    },
+    "devDependencies": {
+        "prisma": "^4.16.1",
+        "ts-node": "^10.9.1"
     }
 }

packages/client/prisma/schema.prisma

@@ -0,0 +1,101 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url = env("POSTGRES_PRISMA_URL") // uses connection pooling
+  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
+  shadowDatabaseUrl = env("POSTGRES_URL_NON_POOLING") // used for migrations
+}
+
+model User {
+  id            String          @id @default(cuid())
+  email         String          @unique
+  username      String          @unique
+  mediaUrl      String?
+  projects      Project[]
+  likes         Like[]
+  comments      Comment[]
+  following     Relationship[]  @relation(name: "following")
+  followers     Relationship[]  @relation(name: "followers")
+  createdAt     DateTime        @default(now())
+  updatedAt     DateTime        @updatedAt @default(now())
+}
+
+model Relationship {
+  id            String      @id @default(cuid())
+  userId        String
+  user          User        @relation(name: "following", fields: [userId], references: [id], onDelete: Cascade)
+  targetUserId  String
+  targetUser    User        @relation(name: "followers", fields: [targetUserId], references: [id], onDelete: Cascade)
+  createdAt     DateTime    @default(now())
+  updatedAt     DateTime    @updatedAt @default(now())
+  @@unique([userId, targetUserId])
+}
+
+enum LayerType {
+  FRAGMENT
+  CIRCUIT
+}
+
+enum BlendingMode {
+  NONE
+  NORMAL
+  ADDITIVE
+  SUBTRACTIVE
+  MULTIPLY
+}
+
+model Layer {
+  id            String        @id @default(cuid())
+  name          String
+  enabled       Boolean       @default(true)
+  blendingMode  BlendingMode  @default(NORMAL)
+  type          LayerType
+  circuit       Json?
+  fragment      String?
+  projectId     String
+  project       Project       @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  createdAt     DateTime      @default(now())
+  updatedAt     DateTime      @updatedAt @default(now())
+}
+
+model Project {
+  id          String    @id @default(cuid())
+  name        String
+  mediaUrl    String?
+  layers      Layer[]
+  private     Boolean   @default(false)
+  ownerId     String    
+  owner       User      @relation(fields: [ownerId], references: [id], onDelete: Cascade)
+  likes       Like[]
+  comments    Comment[]
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt @default(now())
+}
+
+model Like {
+  id          String    @id @default(cuid())
+  projectId   String
+  project     Project   @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  userId      String
+  user        User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt @default(now())
+  @@unique([projectId, userId])
+}
+
+model Comment {
+  id          String    @id @default(cuid())
+  projectId   String
+  project     Project   @relation(fields: [projectId], references: [id], onDelete: Cascade)
+  userId      String
+  user        User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  text        String
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt @default(now())
+}

packages/client/prisma/seed.ts

@@ -0,0 +1,38 @@
+const { PrismaClient } = require('@prisma/client');
+
+const projectSeed = require('./seeds/projectSeed/projectSeed');
+const userSeed = require('./seeds/userSeed/userSeed');
+
+const prisma = new PrismaClient();
+
+async function main() {
+    console.log(`Seeding database...`);
+
+    for (const data of userSeed) {
+        const user = await prisma.user.create({
+            data
+        });
+
+        console.log(`Created user with id: ${user.id}`);
+    }
+
+    for (const data of projectSeed) {
+        const project = await prisma.project.create({
+            data
+        });
+
+        console.log(`Created project with id: ${project.id}`);
+    }
+
+    console.log(`Database seeding finished.`);
+}
+
+main()
+    .then(async () => {
+        await prisma.$disconnect();
+    })
+    .catch(async e => {
+        console.error(e);
+        await prisma.$disconnect();
+        process.exit(1);
+    });

packages/client/prisma/seeds/projectSeed/projectSeed.ts

@@ -0,0 +1,152 @@
+const GRADIENT_FRAGMENT = `void main() {
+    // Normalized pixel coordinates (from 0 to 1)
+    vec2 uv = vUv;
+
+    // Time varying pixel color
+    vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
+
+    // Output to screen
+    fragColor = vec4(col, 1.0);
+}`;
+
+const FLOW_GRADIENT_FRAGMENT = `#define S(a,b,t) smoothstep(a,b,t)
+
+mat2 Rot(float a)
+{
+    float s = sin(a);
+    float c = cos(a);
+    return mat2(c, -s, s, c);
+}
+
+
+// Created by inigo quilez - iq/2014
+// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
+vec2 hash( vec2 p )
+{
+    p = vec2( dot(p,vec2(2127.1,81.17)), dot(p,vec2(1269.5,283.37)) );
+	return fract(sin(p)*43758.5453);
+}
+
+float noise( in vec2 p )
+{
+    vec2 i = floor( p );
+    vec2 f = fract( p );
+	
+	vec2 u = f*f*(3.0-2.0*f);
+
+    float n = mix( mix( dot( -1.0+2.0*hash( i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), 
+                        dot( -1.0+2.0*hash( i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
+                   mix( dot( -1.0+2.0*hash( i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), 
+                        dot( -1.0+2.0*hash( i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
+	return 0.5 + 0.5*n;
+}
+
+
+void main()
+{
+    float ratio = uResolution.x / uResolution.y;
+    vec2 tuv = vUv;
+    tuv -= .5;
+
+    // rotate with Noise
+    float degree = noise(vec2(uTime*.1, tuv.x*tuv.y));
+
+    tuv.y *= 1./ratio;
+    tuv *= Rot(radians((degree-.5)*720.+180.));
+	tuv.y *= ratio;
+
+    
+    // Wave warp with sin
+    float frequency = 5.;
+    float amplitude = 30.;
+    float speed = uTime * 2.;
+    tuv.x += sin(tuv.y*frequency+speed)/amplitude;
+   	tuv.y += sin(tuv.x*frequency*1.5+speed)/(amplitude*.5);
+    
+    
+    // draw the image
+    vec3 colorYellow = vec3(.957, .804, .623);
+    vec3 colorDeepBlue = vec3(.192, .384, .933);
+    vec3 layer1 = mix(colorYellow, colorDeepBlue, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
+    
+    vec3 colorRed = vec3(.910, .510, .8);
+    vec3 colorBlue = vec3(0.350, .71, .953);
+    vec3 layer2 = mix(colorRed, colorBlue, S(-.3, .2, (tuv*Rot(radians(-5.))).x));
+    
+    vec3 finalComp = mix(layer1, layer2, S(.5, -.3, tuv.y));
+    
+    vec3 col = finalComp;
+    
+    fragColor = vec4(col,1.0);
+}`;
+
+module.exports = [
+    {
+        name: 'Gradient',
+        layers: {
+            create: [
+                {
+                    name: 'Gradient',
+                    type: 'FRAGMENT',
+                    fragment: GRADIENT_FRAGMENT
+                }
+            ]
+        },
+        owner: {
+            connect: {
+                email: '[email protected]'
+            }
+        }
+    },
+    {
+        name: 'Flow Gradient',
+        layers: {
+            create: [
+                {
+                    name: 'Flow',
+                    type: 'FRAGMENT',
+                    fragment: FLOW_GRADIENT_FRAGMENT
+                }
+            ]
+        },
+        owner: {
+            connect: {
+                email: '[email protected]'
+            }
+        }
+    },
+    {
+        name: 'My Second Project',
+        layers: {
+            create: [
+                {
+                    name: 'Gradient',
+                    type: 'FRAGMENT',
+                    fragment: GRADIENT_FRAGMENT
+                }
+            ]
+        },
+        owner: {
+            connect: {
+                email: '[email protected]'
+            }
+        }
+    },
+    {
+        name: 'My First Project',
+        layers: {
+            create: [
+                {
+                    name: 'Flow',
+                    type: 'FRAGMENT',
+                    fragment: FLOW_GRADIENT_FRAGMENT
+                }
+            ]
+        },
+        owner: {
+            connect: {
+                email: '[email protected]'
+            }
+        }
+    }
+];

packages/client/prisma/seeds/userSeed/userSeed.ts

@@ -0,0 +1,11 @@
+module.exports = [
+    {
+        email: '[email protected]',
+        username: 'emilwidlund',
+        mediaUrl: 'https://pbs.twimg.com/profile_images/1543286859828174849/2JmJgBEK_400x400.jpg'
+    },
+    {
+        email: '[email protected]',
+        username: 'almawidlund'
+    }
+];