fix(ci): Fix deploy ci

* fix(ci): Fix deploy ci

apps/web/src/components/draw/factory.ts

@@ -1,8 +1,8 @@
+import { type ElementSchemaType } from '@bristles/schema'
 import { type Point } from './lib/math/types'
 import { Line } from './shapes/line'
 import { Rectangle } from './shapes/rectangle'
 import { Text } from './shapes/text'
-import { type Element } from './shapes/types/element'
 import { type Properties } from './shapes/types/handler'
 import { type Shapes } from './types'
 export interface CreateElementProps {
@@ -21,7 +21,7 @@ export function createElement (props: CreateElementProps): Element {
   // throw new Error('Not supported shape')
 }*/
 
-function isWithinElement (element: Element, currentPoint: Point) {
+function isWithinElement (element: ElementSchemaType, currentPoint: Point) {
   if (element.name === 'rectangle') {
     return Rectangle.positionInElement(element, currentPoint).type !== 'outside'
   }
@@ -34,10 +34,10 @@ function isWithinElement (element: Element, currentPoint: Point) {
   return false
 }
 
-export function getElementAtPosition (elements: Element[], currentPoint: Point) {
+export function getElementAtPosition (elements: ElementSchemaType[], currentPoint: Point) {
   return elements.find((elem) => isWithinElement(elem, currentPoint))
 }
 
-export function getIndexElementAtPosition (elements: Element[], currentPoint: Point) {
+export function getIndexElementAtPosition (elements: ElementSchemaType[], currentPoint: Point) {
   return elements.findIndex((elem) => isWithinElement(elem, currentPoint))
 }

apps/web/src/components/draw/hooks/use-canvas-rerender.ts

@@ -1,10 +1,10 @@
 import { useEffect, useLayoutEffect, useReducer, useRef } from 'react'
 
 import { ShapeHandler } from '../shapes'
-import { type Element } from '../shapes/types/element'
 import { type Point } from '../lib/math/types'
 import { viewportReducer } from '../store/viewport/reducer'
 import { type ViewportState, initState } from '../store/viewport/state'
+import { type ElementSchemaType } from '@bristles/schema'
 
 interface SelectionState {
   type: 'simple' | 'multiple'
@@ -15,7 +15,7 @@ interface SelectionState {
 }
 
 interface UseCanvasRerenderProps {
-  elements: Element[]
+  elements: ElementSchemaType[]
   selection?: SelectionState
 }
 

apps/web/src/components/draw/lib/selection/selection.test.ts

@@ -1,12 +1,13 @@
-import { type Element } from '../../shapes/types/element'
+
+import { ElementSchemaType } from '@bristles/schema'
 import { selectElement } from './selection'
 import { type SelectionState } from './types'
 import { describe, test, expect } from 'vitest'
 
-const elements: Element[] = [
+const elements: ElementSchemaType[] = [
   // Example elements data (replace with actual data or mock data as needed)
-  { id: '1', name: 'rectangle', width: 50, height: 30, x: 10, y: 10, color: '#fff', selected: false, angle: 0, opacity: 1, fill: { style: 'Solid' }, stroke: { style: 'Dashed', width: 1 } },
-  { id: '2', name: 'text', width: 70, height: 20, x: 10, y: 10, selected: false, angle: 0, text: 'Hello World', opacity: 1, color: 'red', font: { family: 'sans-serif', size: 12, align: 'center' } }
+  { version: 2, id: '1', name: 'rectangle', width: 50, height: 30, x: 10, y: 10, color: '#fff', selected: false, angle: 0, opacity: 1, fill: { style: 'Solid' }, stroke: { style: 'Dashed', width: 1 } },
+  { version: 2, id: '2', name: 'text', width: 70, height: 20, x: 10, y: 10, selected: false, angle: 0, text: 'Hello World', opacity: 1, color: 'red', font: { family: 'sans-serif', size: 12, align: 'center' }}
   // Add more elements as necessary for testing different scenarios
 ]
 

apps/web/src/components/draw/lib/selection/selection.ts

@@ -1,15 +1,15 @@
 import { type SelectionState } from './types'
-import { type Element } from '../../shapes/types/element'
 import { ShapeHandler } from '../../shapes'
+import { type ElementSchemaType } from '@bristles/schema'
 
 /**
  * Update selection structure
- * @param {Element[]} elements - List of existing elements.
+ * @param {ElementSchemaType[]} elements - List of existing elements.
  * @param {string} elementId - Element to be selected.
  * @param {SelectionState | undefined} selection - Current selection state.
  * @returns {SelectionState | undefined} - Returns the new selection state, otherwise undefined.
  */
-export const selectElement = (elements: Element[], elementId: string, selection: SelectionState | undefined): SelectionState | undefined => {
+export const selectElement = (elements: ElementSchemaType[], elementId: string, selection: SelectionState | undefined): SelectionState | undefined => {
   const currentElement = elements.find(el => el.id === elementId)
 
   if (currentElement === undefined) {

apps/web/src/components/draw/shapes/line/line.ts

@@ -25,6 +25,7 @@ export function draw (element: LineSchemaType, props: DrawFunctionProps) {
   /**
    * Draw arrow head
    */
+  /*
   if (element.arrow.style === 'head') {
     const headlen = 15
     const angle = Math.atan2(toPoint.y - fromPoint.y, toPoint.x - fromPoint.x)
@@ -47,6 +48,7 @@ export function draw (element: LineSchemaType, props: DrawFunctionProps) {
     context.closePath()
     context.stroke()
   }
+  */
 
   //rc.linearPath([[690, 10], [790, 20], [750, 120], [690, 100]])
 
@@ -88,6 +90,7 @@ export function draw (element: LineSchemaType, props: DrawFunctionProps) {
 export function create (action: ElementDrawingAction): LineSchemaType {
   const { currentPoint, properties } = action
   const line: LineSchemaType = {
+    version: 2,
     id: crypto.randomUUID(),
     name: 'line',
     x: currentPoint.x,
@@ -98,7 +101,7 @@ export function create (action: ElementDrawingAction): LineSchemaType {
     color: properties.color,
     opacity: properties.opacity,
     stroke: properties.stroke ?? { style: 'Dashed', width: 5 },
-    arrow: properties.arrow ?? { style: 'arrow' },
+    // arrow: properties.arrow ?? { style: 'arrow' },
     // points: [{ x: 0, y: 0 }, { x: 0, y: 0 }],
 
     selected: false
@@ -294,7 +297,7 @@ export function update (element: LineSchemaType, properties: Properties): LineSc
     color: properties.color,
     opacity: properties.opacity,
     stroke: properties.stroke ?? element.stroke,
-    arrow: properties.stroke ?? element.arrow
+    //arrow: properties.stroke ?? element.arrow
   }
 }
 
@@ -303,5 +306,5 @@ export function allowedProperties (): string[] {
 }
 
 export function properties (element: LineSchemaType): Properties {
-  return { color: element.color, opacity: element.opacity, arrow: element.arrow, stroke: element.stroke }
+  return { color: element.color, opacity: element.opacity, /*arrow: element.arrow,*/ stroke: element.stroke }
 }

apps/web/src/components/draw/shapes/rectangle/rectangle.test.ts

@@ -1,7 +1,7 @@
 import { describe, test, expect, vi } from 'vitest'
 import { type ElementMainAction } from '../types/actions'
-import { type RectangleElement } from './types'
 import { create, endAction, positionInElement, startAction, updateAction } from './rectangle'
+import { RectangleSchemaType } from '@bristles/schema'
 
 const fixedUUID = '550e8400-e29b-41d4-a716-446655440000'
 // Mock the crypto.randomUUID function
@@ -67,7 +67,8 @@ describe('Draw a rectangle', () => {
 })
 
 describe('positionInElement', () => {
-  const rectangle: RectangleElement = {
+  const rectangle: RectangleSchemaType = {
+    version: 2,
     id: '',
     name: 'rectangle',
     x: 10,

apps/web/src/components/draw/shapes/rectangle/rectangle.ts

@@ -88,6 +88,7 @@ function moveRectangle (oldElement: RectangleSchemaType, currentPoint: Point, of
 export function create (props: ElementDrawingAction): RectangleSchemaType {
   const { properties, currentPoint } = props
   const rectangle: RectangleSchemaType = {
+    version: 2,
     id: crypto.randomUUID(),
     name: 'rectangle',
     x: currentPoint.x,

apps/web/src/components/draw/shapes/text/text.test.ts

@@ -1,6 +1,6 @@
 import { describe, test, expect, vi } from 'vitest'
-import { type TextElement } from './types'
 import { positionInElement } from './text'
+import { TextSchemaType } from '@bristles/schema'
 
 const fixedUUID = '550e8400-e29b-41d4-a716-446655440000'
 // Mock the crypto.randomUUID function
@@ -11,7 +11,8 @@ const crypto = {
 vi.stubGlobal('crypto', crypto)
 
 describe('positionInElement', () => {
-  const text: TextElement = {
+  const text: TextSchemaType = {
+    version: 2,
     id: fixedUUID,
     name: 'text',
     x: 0,

apps/web/src/components/draw/shapes/text/text.ts

@@ -59,8 +59,8 @@ export function create (action: ElementDrawingAction): TextSchemaType {
   context.font = '32px sans-serif'
   const width = context.measureText(userText).width
 
-  console.log(width)
   const text: TextSchemaType = {
+    version: 2,
     id: crypto.randomUUID(),
     name: 'text',
     x: currentPoint.x,

apps/web/src/components/draw/shapes/types/handler.ts

@@ -1,4 +1,4 @@
-import type { ElementSchemaType, FillPropertiesType, FontPropertiesType, StrokePropertiesType } from '@bristles/schema'
+import type { FillPropertiesType, FontPropertiesType, StrokePropertiesType } from '@bristles/schema'
 import { type Point } from '../../lib/math/types'
 import { type ElementDrawingAction, type ElementMainAction } from './actions'
 

apps/web/src/components/draw/store/drawing/on.ts

@@ -1,8 +1,8 @@
+import { ElementSchemaType } from '@bristles/schema'
 import { getObjects, updateElements } from '../../lib/history/history'
 import { type Point } from '../../lib/math/types'
 import { ShapeHandler } from '../../shapes'
 import { requestElementDrawing } from '../../shapes/types/actions'
-import { type Element } from '../../shapes/types/element'
 import { type DrawingState } from '../type'
 
 export const DRAWING_ON_ACTION = 'ON_DRAWING'
@@ -21,8 +21,8 @@ export interface OnDrawingAction {
  * @returns {DrawingState} - The updated state after applying the action.
  */
 export function drawingOnReducer (state: DrawingState, action: OnDrawingAction): DrawingState {
-  const objects = getObjects<Element>(state.elements)
-  const setElements = updateElements<Element>(state.elements)
+  const objects = getObjects<ElementSchemaType>(state.elements)
+  const setElements = updateElements<ElementSchemaType>(state.elements)
   if (state.action.name === 'drawing' && state.action.elementId !== undefined) {
     const elementId = state.action.elementId
     const currentElement = objects.find(el => el.id === elementId)

apps/web/src/components/draw/store/selection/copy.ts

@@ -1,8 +1,8 @@
 import { getObjects, updateElements } from '../../lib/history/history'
-import { type Element } from '../../shapes/types/element'
 import { type DrawingState } from '../type'
 import { ShapeHandler } from '../../shapes'
 import { type Point } from '../../lib/math/types'
+import { type ElementSchemaType } from '@bristles/schema'
 
 export const SELECTION_COPY_ACTION = 'SELECTION_COPY'
 
@@ -25,7 +25,7 @@ export function selectionCopyReducer (state: DrawingState, action: SelectionCopy
   }
 
   const elements = getObjects(state.elements)
-  const newElements: Element[] = []
+  const newElements: ElementSchemaType[] = []
   elements.forEach(element => {
     if (state.selection !== undefined && state.selection.ids.includes(element.id)) {
       const origin = action.payload.point ?? { x: element.x + 10, y: element.y + 10 }

apps/web/src/components/draw/store/selection/update.ts

@@ -1,8 +1,8 @@
 import { updateElements } from '../../lib/history/history'
 import { type Properties } from '../../shapes/types/handler'
-import { type Element } from '../../shapes/types/element'
 import { type DrawingState } from '../type'
 import { ShapeHandler } from '../../shapes'
+import { type ElementSchemaType } from '@bristles/schema'
 
 export const SELECTION_UPDATE_ACTION = 'SELECTION_UPDATE'
 
@@ -24,7 +24,7 @@ export function selectionUpdateReducer (state: DrawingState, action: SelectionUp
     return { ...state }
   }
 
-  const applyUpdate = (element: Element): Element => {
+  const applyUpdate = (element: ElementSchemaType): ElementSchemaType => {
     if (state.selection !== undefined && state.selection.ids.includes(element.id)) {
       // @ts-expect-error find out how to call generic method based on element
       return ShapeHandler(element.name).update(element, action.payload.properties)

apps/web/src/components/draw/store/state.ts

@@ -1,4 +1,3 @@
-import { type Element } from '../shapes/types/element'
 import { getObjects } from '../lib/history/history'
 import type { DrawingState } from './type'
 import type { ObjectWithHistory } from '../lib/history/types'
@@ -29,8 +28,9 @@ import { SELECTION_UPDATE_ACTION, selectionUpdateReducer } from './selection/upd
 import { SELECTION_COPY_ACTION, selectionCopyReducer } from './selection/copy'
 import { type Properties } from '../shapes/types/handler'
 import { DispatchStateAction } from './store.actions'
+import { ElementSchemaType } from '@bristles/schema'
 
-export const initElementsWithHistory: ObjectWithHistory<Element> = {
+export const initElementsWithHistory: ObjectWithHistory<ElementSchemaType> = {
   history: [[]],
   index: 0
 }
@@ -208,7 +208,7 @@ export function stateReducer (state: DrawingState, action: DispatchStateAction):
   throw Error('Unknown action')
 }
 
-export function getElements (state: DrawingState): Element[] {
+export function getElements (state: DrawingState): ElementSchemaType[] {
   return getObjects(state.elements)
 }
 

apps/web/src/components/draw/store/storage/load.ts

@@ -1,13 +1,13 @@
 import { updateElements } from '../../lib/history/history'
 import { type DrawingState } from '../type'
-import { type Element } from '../../shapes/types/element'
+import { type ElementSchemaType } from '@bristles/schema'
 
 export const STORAGE_LOAD_ACTION = 'STORAGE_LOAD'
 
 export interface StorageLoadAction {
   type: 'STORAGE_LOAD'
   payload: {
-    elements: Element[]
+    elements: ElementSchemaType[]
   }
 }
 
@@ -25,6 +25,6 @@ export function storageLoadReducer (state: DrawingState, action: StorageLoadActi
   }
 }
 
-export function createStorageLoadAction (elements: Element[]): StorageLoadAction {
+export function createStorageLoadAction (elements: ElementSchemaType[]): StorageLoadAction {
   return { type: STORAGE_LOAD_ACTION, payload: { elements } }
 }

packages/schema/src/elements/text/index.ts

@@ -1,5 +1,4 @@
 import { z } from 'zod'
-import { StrokePropertiesSchema } from '../../properties/stroke'
 import { FontPropertiesSchema } from '../..'
 
 export const TextSchema = z.object({
@@ -13,7 +12,6 @@ export const TextSchema = z.object({
   angle: z.number(),
   opacity: z.number(),
   color: z.string(),
-  stroke: StrokePropertiesSchema,
   font: FontPropertiesSchema,
   text: z.string(),
   selected: z.boolean()

packages/schema/src/elements/text/migrations/v1-to-v2.test.ts

@@ -13,8 +13,7 @@ describe('Line migration from v1 to v2', () => {
       width: 100,
       height: 100,
       angle: 0,
-      opacity: 1,
-      stroke: { style: 'Dotted', width: 1 }
+      opacity: 1
     }
 
     const expectedMigratedLine = {
@@ -28,8 +27,7 @@ describe('Line migration from v1 to v2', () => {
       height: 100,
       angle: 0,
       opacity: 1,
-      selected: false,
-      stroke: { style: 'Dotted', width: 1 }
+      selected: false
     }
 
     const migratedRectangle = applyV1toV2Migration(lineV1)

packages/schema/src/elements/text/parse.test.ts

@@ -16,7 +16,6 @@ describe('parseLine function', () => {
       angle: 45,
       opacity: 0.8,
       selected: true,
-      stroke: { style: 'Dashed', width: 2 },
       font: { size: 32, family: 'sans-serif', align: 'center' },
       text: 'Hello world'
     }
@@ -38,7 +37,6 @@ describe('parseLine function', () => {
       height: 100,
       angle: 0,
       opacity: 1,
-      stroke: { style: 'Dotted', width: 1 },
       font: { size: 32, family: 'sans-serif', align: 'center' },
       text: 'Hello world'
     }
@@ -55,7 +53,6 @@ describe('parseLine function', () => {
       angle: 0,
       opacity: 1,
       selected: false,
-      stroke: { style: 'Dotted', width: 1 },
       font: { size: 32, family: 'sans-serif', align: 'center' },
       text: 'Hello world'
     }
@@ -72,7 +69,6 @@ describe('parseLine function', () => {
       version: 2,
       color: 'green', // Missing 'id' property
       fill: { style: 'Solid' },
-      stroke: { style: 'Solid', width: 1 },
       font: { size: 32, family: 'sans-serif', align: 'center' }
     }