reinit repo with sources from zipped dir

packages/models/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/models/README.md

@@ -0,0 +1,7 @@
+# @klx/models
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @klx/models` to execute the unit tests via [Jest](https://jestjs.io).

packages/models/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin'
+import baseConfig from '../../eslint.config.mjs'
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+]

packages/models/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@klx/models",
+  "version": "0.0.1",
+  "main": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  }
+}

packages/models/src/idea/Idea.ts

@@ -0,0 +1,142 @@
+import {action, makeObservable, observable} from 'mobx'
+import {IBoardObject, BoardObjectType, IImageIdea, ITextIdea, IIframeIdea} from './idea.type'
+import {ID, Point, Size, User} from '../types'
+
+export class Idea implements IBoardObject {
+    id: ID
+    author: User
+    position: Point
+    size: Size
+    title: string
+    color: string
+    type: BoardObjectType
+
+    constructor(data: {
+        id: ID
+        author: User
+        position: Point
+        size: Size
+        title: string
+        content?: string
+        color: string
+        type?: BoardObjectType 
+    }) {
+        this.id = data.id
+        this.author = data.author
+        this.position = data.position
+        this.size = data.size
+        this.title = data.title
+        this.color = data.color
+        this.type = "text" 
+
+        makeObservable(this, {
+            position: observable,
+            size: observable,
+            updatePosition: action,
+            updateSize: action,
+        })
+    }
+
+    updatePosition(x: number, y: number) {
+        this.position.x = x
+        this.position.y = y
+    }
+
+    updateSize(width: number, height: number) {
+        this.size.width = width
+        this.size.height = height
+    }
+}
+
+// ✅ Implémente IImageIdea + narrowed type
+export class ImageIdea extends Idea implements IImageIdea {
+    url: string
+    alt: string
+    override type = 'image' as const
+
+    constructor(data: {
+        id: ID
+        author: User
+        position: Point
+        size: Size
+        title: string
+        color: string
+        url: string
+        alt: string
+    }) {
+        super({...data, type: 'image'})
+        this.url = data.url
+        this.alt = data.alt
+
+        makeObservable(this, {
+            url: observable,
+            alt: observable,
+            updateUrl: action,
+            updateAlt: action,
+        })
+    }
+
+    updateUrl(url: string) {
+        this.url = url
+    }
+
+    updateAlt(alt: string) {
+        this.alt = alt
+    }
+}
+
+// ✅ Implémente ITextIdea + narrowed type
+export class TextIdea extends Idea implements ITextIdea {
+    content: string
+    override type = 'text' as const
+
+    constructor(data: {
+        id: ID
+        author: User
+        position: Point
+        size: Size
+        title: string
+        color: string
+        content: string
+    }) {
+        super({...data, type: 'text'})
+        this.content = data.content
+
+        makeObservable(this, {
+            content: observable,
+            updateContent: action,
+        })
+    }
+
+    updateContent(content: string) {
+        this.content = content
+    }
+}
+
+// ✅ Implémente IIframeIdea + narrowed type
+export class IframeIdea extends Idea implements IIframeIdea {
+    url: string
+    override type = 'iframe' as const
+
+    constructor(data: {
+        id: ID
+        author: User
+        position: Point
+        size: Size
+        title: string
+        color: string
+        url: string
+    }) {
+        super({...data, type: 'iframe'})
+        this.url = data.url
+
+        makeObservable(this, {
+            url: observable,
+            updateUrl: action,
+        })
+    }
+
+    updateUrl(url: string) {
+        this.url = url
+    }
+}

packages/models/src/idea/idea.type.ts

@@ -0,0 +1,31 @@
+import {BaseObject} from '../types'
+
+
+
+export type BoardObjectType = 'text' | 'image' | 'iframe'
+
+export type IBoardObject = BaseObject & {
+    type: BoardObjectType,
+    title: string,
+    color: string,
+    updatePosition(x: number, y: number): void
+    updateSize(width: number, height: number): void
+}
+
+export type ITextIdea = IBoardObject & {
+    type: 'text'
+    content?: string
+}
+
+export type IImageIdea = IBoardObject & {
+    type: 'image'
+    url: string
+    alt: string
+}
+
+export type IIframeIdea = IBoardObject & {
+    type: 'iframe'
+    url: string
+}
+
+export type BoardObject = ITextIdea | IImageIdea | IIframeIdea

packages/models/src/index.ts

@@ -0,0 +1,3 @@
+export {Idea, TextIdea, ImageIdea, IframeIdea} from './idea/Idea'
+export type {IBoardObject, IImageIdea, IIframeIdea, ITextIdea, BoardObject} from './idea/idea.type'
+export type {ID, Point, Size, BaseObject, User} from './types'

packages/models/src/types.ts

@@ -0,0 +1,25 @@
+export type ID = string
+
+export type Point = {
+    x: number
+    y: number
+}
+
+export type Size = {
+    width: number
+    height: number
+}
+
+export type User = {
+    uuid: string
+    name: string
+    email: string
+    job: string
+}
+
+export type BaseObject = {
+    id: ID
+    author: User
+    position: Point
+    size: Size
+}

packages/models/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        }
+    ],
+    "extends": "../../tsconfig.base.json"
+}

packages/models/tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts"],
+        "rootDir": "src",
+        "jsx": "react-jsx",
+        "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+    },
+    "exclude": [
+        "out-tsc",
+        "dist",
+        "jest.config.ts",
+        "src/**/*.spec.ts",
+        "src/**/*.test.ts",
+        "src/**/*.spec.tsx",
+        "src/**/*.test.tsx",
+        "src/**/*.spec.js",
+        "src/**/*.test.js",
+        "src/**/*.spec.jsx",
+        "src/**/*.test.jsx",
+        "eslint.config.js",
+        "eslint.config.cjs",
+        "eslint.config.mjs"
+    ],
+    "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+    "references": []
+}

packages/ui/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/ui/README.md

@@ -0,0 +1,7 @@
+# @klx/ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @klx/ui` to execute the unit tests via [Jest](https://jestjs.io).

packages/ui/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin'
+import baseConfig from '../../eslint.config.mjs'
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+]

packages/ui/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@klx/ui",
+  "version": "0.0.1",
+  "main": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  }
+}

packages/ui/src/index.ts

@@ -0,0 +1,4 @@
+export {Avatar} from './lib/components/Avatar/Avatar'
+export {Main} from './lib/components/Main/Main'
+export {Header} from './lib/components/Header/Header'
+export {Footer} from './lib/components/Footer/Footer'

packages/ui/src/lib/components/Avatar/Avatar.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import {css} from '@emotion/react'
+
+const avatarStyles = css`
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    cursor: pointer;
+    border: 1px solid #e5e7eb;
+`
+
+export const Avatar = ({src}: {src: string}) => {
+    return <img css={avatarStyles} src={src} alt="Profile" />
+}

packages/ui/src/lib/components/Footer/Footer.tsx

@@ -0,0 +1,7 @@
+export const Footer = () => {
+    return (
+        <footer className="h-10 bg-gray-100 border-t flex items-center justify-center">
+            <span className="text-sm text-gray-600">© Klaxoon</span>
+        </footer>
+    )
+}

packages/ui/src/lib/components/Header/Header.tsx

@@ -0,0 +1,31 @@
+import {Avatar} from '../Avatar/Avatar'
+import {faker} from '@faker-js/faker'
+import {useState} from 'react'
+
+type User = {
+    uuid: string
+    name: string
+    email: string
+    job: string
+}
+
+export const Header = ({title}: {title: string}) => {
+    const [user] = useState<User>(() => {
+        return {
+            uuid: faker.string.uuid(),
+            name: faker.person.fullName(),
+            email: faker.internet.email(),
+            job: faker.person.jobTitle(),
+        }
+    })
+
+    return (
+        <header className="flex justify-between items-center px-8 py-4 bg-white border-b border-gray-200 shadow-sm">
+            <div className="text-2xl font-bold text-gray-800">{title}</div>
+            <div className="flex items-center gap-3">
+                <span className="text-sm text-gray-500">{user.name}</span>
+                <Avatar src={`https://i.pravatar.cc/150?u=${user.uuid}`} />
+            </div>
+        </header>
+    )
+}

packages/ui/src/lib/components/Main/Main.tsx

@@ -0,0 +1,3 @@
+export const Main = ({children}: {children: React.ReactNode}) => {
+    return <main className="flex-1 p-4 h-full">{children}</main>
+}

packages/ui/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

packages/ui/tsconfig.lib.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx",
+    "eslint.config.js",
+    "eslint.config.cjs",
+    "eslint.config.mjs"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}