feat(monorepo): Migrate to a monorepo structure

.eslintrc.js

@@ -0,0 +1,5 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@repo/eslint-config/index.js"],
+};

.github/workflows/deploy.yml

@@ -1,8 +1,8 @@
 name: Deployment
-on:
-  push:
-    branches:
-      - main 
+#on:
+#  push:
+#    branches:
+#      - main 
 
 permissions:
   contents: write
@@ -19,9 +19,9 @@ jobs:
     - name: Install Packages
       run: npm install
     - name: Build page
-      run: npm run build
+      run: turbo run build
     - name: Deploy to gh-pages
       uses: peaceiris/actions-gh-pages@v3
       with:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./build
+        publish_dir: ./apps/web/dist

.gitignore

@@ -1,29 +1,11 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
+.DS_Store
 node_modules
-build
+.turbo
+*.log
 dist
 dist-ssr
 *.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-.env.development
-.env.development
-.env.production
+.env
+.cache
+server/dist
+public/dist

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.tabSize": 2
+}

README.md

@@ -29,7 +29,7 @@ To get started with this project, follow these steps:
 3. Start the development server:
 
    ```bash
-   npm run start
+   turbo dev
    ```
 
 4. Open your web browser and navigate to `http://localhost:5173` to see the app running.

apps/web/.eslintrc.cjs

@@ -0,0 +1,5 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@repo/eslint-config/index.js"],
+};

apps/web/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+build
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env.development
+.env.development
+.env.production

apps/web/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "bristles.xyz",
+  "homepage": "https://bristles-xyz.github.io/bristles/",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@tanstack/react-query": "^5.4.3",
+    "@tanstack/react-query-devtools": "^5.4.3",
+    "axios": "^1.6.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "cmdk": "^0.2.0",
+    "date-fns": "^2.30.0",
+    "react": "^18.2.0",
+    "react-day-picker": "^8.8.2",
+    "react-dom": "^18.2.0",
+    "react-google-recaptcha": "^3.1.0",
+    "react-router-dom": "^6.17.0",
+    "roughjs": "^4.6.5",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4",
+    "@repo/ui": "*"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^20.8.6",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-google-recaptcha": "^2.1.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.51.0",
+    "eslint-config-standard-with-typescript": "^39.1.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-n": "^16.2.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.5",
+    "vitest": "^0.34.6"
+  }
+}

apps/web/src/components/schema/document/index.ts

@@ -0,0 +1,14 @@
+import { z } from 'zod'
+import { ElementSchema } from '../elements'
+
+export const DOCUMENT_LATEST_VERSION = 2
+
+export const DocumentSchema = z.object({
+  name: z.string(),
+  version: z.literal(DOCUMENT_LATEST_VERSION), // Document schema version
+  elements: z.array(ElementSchema), // Array of different element schemas
+  author: z.string(),
+  created_at: z.string()
+})
+
+export type DocumentSchemaType = z.infer<typeof DocumentSchema>

apps/web/src/components/schema/document/migrations/index.ts

@@ -0,0 +1,11 @@
+import { applyV1toV2Migration } from './v1-to-v2'
+
+export const applyMigration = (data: any, fromVersion: number): any => {
+  if (fromVersion <= 1) {
+    return applyV1toV2Migration(data)
+  }
+  // if (fromVersion <= 1) {
+  //  return applyV1toV2Migration(data)
+  //}
+  throw new Error(`No migration path from ${fromVersion} for Line.`)
+}

apps/web/src/components/schema/document/migrations/v1-to-v2.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { parseDocument } from '../parse'
+import { applyV1toV2Migration } from './v1-to-v2'
+
+describe('applyMigration function', () => {
+  it('should correctly migrate a document from v1 to v2', () => {
+    const documentV1 = {
+      name: 'MyDocument',
+      version: 1,
+      elements: [
+        {
+          name: 'rectangle',
+          version: 2,
+          color: 'blue',
+          id: 'uniqueId',
+          x: 10,
+          y: 20,
+          width: 100,
+          height: 50,
+          angle: 45,
+          opacity: 0.8,
+          fill: { style: 'Solid' },
+          stroke: { style: 'Dashed', width: 2 },
+          selected: true
+        },
+      ],
+      author: 'John Doe'
+    }
+
+    const migratedDocument = applyV1toV2Migration(documentV1)
+
+    expect(migratedDocument).toHaveProperty('created_at')
+    expect(migratedDocument.version).toBe(2)
+
+    // Parse migrated document using the DocumentSchemaV2
+    const parsedMigratedDocument = parseDocument(migratedDocument)
+
+    // Ensure the migrated document matches the DocumentSchemaV2
+    expect(parsedMigratedDocument).toEqual(migratedDocument)
+  })
+
+  it('should not migrate if document version is already at the latest version', () => {
+    const documentV2 = {
+      name: 'MyDocument',
+      version: 2,
+      elements: [
+        // ... elements for version 2
+      ],
+      author: 'John Doe',
+      created_at: 'some_date'
+    }
+
+    const nonMigratedDocument = applyV1toV2Migration(documentV2)
+
+    // Expect the document remains unchanged as it's already at version 2
+    expect(nonMigratedDocument).toEqual(documentV2)
+  })
+})

apps/web/src/components/schema/document/migrations/v1-to-v2.ts

@@ -0,0 +1,11 @@
+export const applyV1toV2Migration = (data: any): any => {
+  // Migration logic from version 1 to version 2
+  // Add default values for new properties introduced in version 2
+  const migratedData = {
+    ...data,
+    version: 2,
+    created_at: 'some_date'
+  }
+
+  return migratedData
+}

apps/web/src/components/schema/document/parse.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest'
+import { parseDocument } from './parse'
+
+describe('parseDocument function', () => {
+  it('should parse a valid document object', () => {
+    const validDocument = {
+      name: 'MyDocument',
+      version: 2,
+      elements: [
+        {
+          name: 'rectangle',
+          version: 2,
+          color: 'blue',
+          id: 'uniqueId',
+          x: 10,
+          y: 20,
+          width: 100,
+          height: 50,
+          angle: 45,
+          opacity: 0.8,
+          fill: { style: 'Solid' },
+          stroke: { style: 'Dashed', width: 2 },
+          selected: true
+        },
+        {
+          name: 'line',
+          version: 2,
+          id: 'lineId',
+          x: 5,
+          y: 15,
+          width: 150,
+          height: 20,
+          angle: 90,
+          opacity: 0.6,
+          color: 'blue',
+          stroke: { style: 'Dashed', width: 2 },
+          selected: false
+        }
+      ],
+      author: 'John Doe',
+      created_at: 'date'
+    }
+
+    const parsedDocument = parseDocument(validDocument)
+
+    expect(parsedDocument).toEqual(validDocument)
+  })
+
+  it('should throw an error for an invalid document object', () => {
+    const invalidDocument = {
+      name: 'InvalidDocument',
+      version: 1,
+      elements: [
+        {
+          name: 'InvalidElement',
+          version: 2
+          // Missing required properties for the element
+        }
+      ],
+      author: 'Jane Doe'
+    }
+
+    expect(() => parseDocument(invalidDocument)).toThrow()
+  })
+})

apps/web/src/components/schema/document/parse.ts

@@ -0,0 +1,10 @@
+// import { elementProcessors } from '../elements'
+import { type DocumentSchemaType, DocumentSchema } from './index'
+
+export const parseDocument = (data: any): DocumentSchemaType => {
+  try {
+    return DocumentSchema.parse(data /*{ elementProcessors }*/)
+  } catch (error) {
+    throw new Error('Invalid document data.')
+  }
+}

apps/web/src/components/schema/elements/index.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod'
+import { RectangleSchema } from './rectangle'
+import { LineSchema } from './line'
+import { TextSchema } from './text'
+import { parseRectangle } from './rectangle/parse'
+import { parseLine } from './line/parse'
+import { parseText } from './text/parse'
+
+export const ElementSchema = z.union([RectangleSchema, LineSchema, TextSchema])
+export type ElementSchemaType = z.infer<typeof ElementSchema>
+
+// TODO: ?
+export const elementProcessors = { Rectangle: parseRectangle, Line: parseLine, Text: parseText }