@bigbluebutton/tldraw 2.0.0-alpha.23 → 2.0.0-alpha.25

package/src/lib/shapes/poll/components/poll-content.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react'
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
+import { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'
+import Styled from './styles'
+
+const caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {
+	const index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())
+	if (index !== -1) {
+		if (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes
+		else {
+			const tempVotes = acc[index].numVotes
+			acc[index] = item
+			acc[index].numVotes += tempVotes
+		}
+	} else {
+		acc.push(item)
+	}
+	return acc
+}
+
+interface ChatPollContentProps {
+	metadata: string
+	height?: number
+}
+
+interface Metadata {
+	id: string
+	question: string
+	numRespondents: number
+	numResponders: number
+	questionText: string
+	questionType: string
+	answers: Array<Answers>
+}
+
+interface Answers {
+	key: string
+	numVotes: number
+	id: number
+}
+
+function assertAsMetadata(metadata: unknown): asserts metadata is Metadata {
+	if (typeof metadata !== 'object' || metadata === null) {
+		throw new Error('metadata is not an object')
+	}
+	if (typeof (metadata as Metadata).id !== 'string') {
+		throw new Error('metadata.id is not a string')
+	}
+	if (typeof (metadata as Metadata).numRespondents !== 'number') {
+		throw new Error('metadata.numRespondents is not a number')
+	}
+	if (typeof (metadata as Metadata).numResponders !== 'number') {
+		throw new Error('metadata.numResponders is not a number')
+	}
+	if (typeof (metadata as Metadata).questionText !== 'string') {
+		throw new Error('metadata.questionText is not a string')
+	}
+	if (typeof (metadata as Metadata).questionType !== 'string') {
+		throw new Error('metadata.questionType is not a string')
+	}
+	if (!Array.isArray((metadata as Metadata).answers)) {
+		throw new Error('metadata.answers is not an array')
+	}
+}
+
+const ChatPollContent: React.FC<ChatPollContentProps> = ({
+	metadata: string,
+	height = undefined,
+}) => {
+	const pollData = JSON.parse(string) as unknown
+	assertAsMetadata(pollData)
+
+	const answers = pollData.answers.reduce(caseInsensitiveReducer, [])
+
+	const translatedAnswers = answers.map((answer: Answers) => {
+		const translationKey = answer.key as TLUiTranslationKey
+		const pollAnswer = translationKey ? translationKey : answer.key
+		return {
+			...answer,
+			pollAnswer,
+		}
+	})
+
+	const useHeight = height || translatedAnswers.length * 50
+	return (
+		<Styled.PollWrapper data-test="chatPollMessageText">
+			<Styled.PollText>{pollData.questionText}</Styled.PollText>
+			<ResponsiveContainer width="90%" height={useHeight}>
+				<BarChart data={translatedAnswers} layout="vertical">
+					<XAxis type="number" />
+					<YAxis width={80} type="category" dataKey="pollAnswer" />
+					<Bar dataKey="numVotes" fill="#0C57A7" />
+				</BarChart>
+			</ResponsiveContainer>
+		</Styled.PollWrapper>
+	)
+}
+
+export default ChatPollContent

package/src/lib/shapes/poll/components/styles.ts

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import styled from 'styled-components'
+
+export const PollText = styled.div`
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+	font-size: 1.25rem;
+	font-weight: 500;
+	margin-left: 2.75rem;
+	color: var(--color-text, var(--color-gray, #4e5a66));
+	word-break: break-word;
+`
+
+export const PollWrapper = styled.div`
+	width: 100%;
+`
+
+export default {
+	PollText,
+	PollWrapper,
+}

package/src/lib/shapes/poll/poll-shape-migrations.ts

@@ -0,0 +1,23 @@
+import { defineMigrations } from '@bigbluebutton/editor'
+
+// Migrations for the custom poll shape (optional but very helpful)
+export const pollShapeMigrations = defineMigrations({
+	currentVersion: 1,
+	migrators: {
+		1: {
+			// example, removing a property from the shape
+			up(shape) {
+				const migratedUpShape = { ...shape }
+				delete migratedUpShape.somePropertyToRemove
+				return migratedUpShape
+			},
+			down(shape) {
+				const migratedDownShape = { ...shape }
+				migratedDownShape.somePropertyToRemove = 'some value'
+				return migratedDownShape
+			},
+		},
+	},
+})
+
+export default pollShapeMigrations

package/src/lib/shapes/poll/poll-shape-props.ts

@@ -0,0 +1,17 @@
+import { DefaultColorStyle, ShapeProps, T } from '@bigbluebutton/editor'
+import { IPollShape } from './poll-shape-types'
+
+export const pollShapeProps: ShapeProps<IPollShape> = {
+	w: T.number,
+	h: T.number,
+	color: DefaultColorStyle,
+	fill: T.string,
+	question: T.string,
+	numRespondents: T.number,
+	numResponders: T.number,
+	questionText: T.string,
+	questionType: T.string,
+	answers: T.any,
+}
+
+export default pollShapeProps

package/src/lib/shapes/poll/poll-shape-types.ts

@@ -0,0 +1,21 @@
+import { TLBaseShape, TLDefaultColorStyle } from '@bigbluebutton/editor'
+
+export type IPollShape = TLBaseShape<
+	'poll',
+	{
+		w: number
+		h: number
+		color: TLDefaultColorStyle
+		fill: string
+		question: string
+		numRespondents: number
+		numResponders: number
+		questionText: string
+		questionType: string
+		answers: Array<{
+			id: number
+			key: string
+			numVotes: number
+		}>
+	}
+>

package/src/lib/tools/HandTool/HandTool.ts

@@ -1,4 +1,4 @@
-import { EASINGS, StateNode, TLClickEvent } from '@bigbluebutton/editor'
+import { StateNode, TLClickEvent } from '@bigbluebutton/editor'
 import { Dragging } from './childStates/Dragging'
 import { Idle } from './childStates/Idle'
 import { Pointing } from './childStates/Pointing'
@@ -9,27 +9,26 @@ export class HandTool extends StateNode {
 	static override initial = 'idle'
 	static override children = () => [Idle, Pointing, Dragging]
 
-	override onDoubleClick: TLClickEvent = (info) => {
+	override onDoubleClick: TLClickEvent = (_info) => {
 		// if (info.phase === 'settle') {
 		// 	const { currentScreenPoint } = this.editor.inputs
 		// 	this.editor.zoomIn(currentScreenPoint, { duration: 220, easing: EASINGS.easeOutQuint })
 		// }
 	}
 
-	override onTripleClick: TLClickEvent = (info) => {
+	override onTripleClick: TLClickEvent = (_info) => {
 		// if (info.phase === 'settle') {
 		// 	const { currentScreenPoint } = this.editor.inputs
 		// 	this.editor.zoomOut(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })
 		// }
 	}
 
-	override onQuadrupleClick: TLClickEvent = (info) => {
+	override onQuadrupleClick: TLClickEvent = (_info) => {
 		// if (info.phase === 'settle') {
 		// 	const zoomLevel = this.editor.getZoomLevel()
 		// 	const {
 		// 		inputs: { currentScreenPoint },
 		// 	} = this.editor
-
 		// 	if (zoomLevel === 1) {
 		// 		this.editor.zoomToFit({ duration: 400, easing: EASINGS.easeOutQuint })
 		// 	} else {

package/src/lib/ui/components/ContextMenu.tsx

@@ -65,7 +65,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
 		[editor]
 	)
 
-	const container = useContainer()
+	// const container = useContainer()
 
 	const [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)
 

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -356,3 +356,8 @@ export type TLUiTranslationKey =
 	| 'vscode.file-open.backup-failed'
 	| 'vscode.file-open.dont-show-again'
 	| 'cursor-chat.type-to-chat'
+	| 'app.poll.t'
+	| 'app.poll.f'
+	| 'app.poll.y'
+	| 'app.poll.n'
+	| 'app.poll.abstention'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -366,4 +366,9 @@ export const DEFAULT_TRANSLATION = {
 	'vscode.file-open.backup-failed': 'Backup failed: this is not a .tldr file.',
 	'vscode.file-open.dont-show-again': "Don't ask again",
 	'cursor-chat.type-to-chat': 'Type to chat...',
+	'app.poll.t': 'True',
+	'app.poll.f': 'False',
+	'app.poll.y': 'Yes',
+	'app.poll.n': 'No',
+	'app.poll.abstention': 'Abstention',
 }

package/src/lib/ui/hooks/useTranslation/translations.ts

@@ -28,7 +28,7 @@ export async function fetchTranslation(
 	locale: TLUiTranslation['locale'],
 	assetUrls: TLUiAssetUrls
 ): Promise<TLUiTranslation> {
-	const mainRes = await fetch(assetUrls.translations.en)
+	const mainRes = await fetch(assetUrls?.translations?.en ?? 'en')
 
 	if (!mainRes.ok) {
 		console.warn(`No main translations found.`)

package/src/test/Editor.test.tsx

@@ -511,13 +511,13 @@ describe('getShapeUtil', () => {
 	it('throws if that shape type isnt registered', () => {
 		const myMissingShape = { type: 'missing' } as TLShape
 		expect(() => editor.getShapeUtil(myMissingShape)).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type \\"missing\\""`
+			`"No shape util found for type "missing""`
 		)
 	})
 
 	it('throws if that type isnt registered', () => {
 		expect(() => editor.getShapeUtil('missing')).toThrowErrorMatchingInlineSnapshot(
-			`"No shape util found for type \\"missing\\""`
+			`"No shape util found for type "missing""`
 		)
 	})
 })

package/src/test/HandTool.test.ts

@@ -1,5 +1,4 @@
-import { HandTool } from '../lib/tools/HandTool/HandTool'
-import { TestEditor, createDefaultShapes } from './TestEditor'
+import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
 
@@ -16,60 +15,60 @@ afterEach(() => {
 
 jest.useFakeTimers()
 
-describe(HandTool, () => {
-	it('Double taps to zoom in', () => {
-		editor.setCurrentTool('hand')
-		expect(editor.getZoomLevel()).toBe(1)
-		editor.click()
-		editor.click() // double click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).toBe(2) // all done
-	})
-
-	it('Triple taps to zoom out', () => {
-		editor.setCurrentTool('hand')
-		expect(editor.getZoomLevel()).toBe(1)
-		editor.click()
-		editor.click()
-		editor.click() // triple click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).toBe(0.5) // all done
-	})
-
-	it('Quadruple taps to reset zoom', () => {
-		editor.setCurrentTool('hand')
-		editor.zoomIn() // zoom to 2
-		expect(editor.getZoomLevel()).toBe(2)
-		editor.click()
-		editor.click()
-		editor.click()
-		editor.click() // quad click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(2) // animating
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).toBe(1) // all done
-	})
-
-	it('Quadruple taps from zoom=1 to zoom to fit', () => {
-		editor.setCurrentTool('hand')
-		expect(editor.getZoomLevel()).toBe(1)
-		editor.createShapes(createDefaultShapes()) // makes some shapes
-		editor.click()
-		editor.click()
-		editor.click()
-		editor.click() // quad click!
-		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).not.toBe(1) // animating
-		jest.advanceTimersByTime(300)
-		const z = editor.getZoomLevel()
-		editor.zoomToFit() // call zoom to fit manually to compare
-		expect(editor.getZoomLevel()).toBe(z) // zoom should not have changed
-	})
-})
+// describe(HandTool, () => {
+// 	it('Double taps to zoom in', () => {
+// 		editor.setCurrentTool('hand')
+// 		expect(editor.getZoomLevel()).toBe(1)
+// 		editor.click()
+// 		editor.click() // double click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(1) // animating
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).toBe(2) // all done
+// 	})
+
+// 	it('Triple taps to zoom out', () => {
+// 		editor.setCurrentTool('hand')
+// 		expect(editor.getZoomLevel()).toBe(1)
+// 		editor.click()
+// 		editor.click()
+// 		editor.click() // triple click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(1) // animating
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).toBe(0.5) // all done
+// 	})
+
+// 	it('Quadruple taps to reset zoom', () => {
+// 		editor.setCurrentTool('hand')
+// 		editor.zoomIn() // zoom to 2
+// 		expect(editor.getZoomLevel()).toBe(2)
+// 		editor.click()
+// 		editor.click()
+// 		editor.click()
+// 		editor.click() // quad click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(2) // animating
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).toBe(1) // all done
+// 	})
+
+// 	it('Quadruple taps from zoom=1 to zoom to fit', () => {
+// 		editor.setCurrentTool('hand')
+// 		expect(editor.getZoomLevel()).toBe(1)
+// 		editor.createShapes(createDefaultShapes()) // makes some shapes
+// 		editor.click()
+// 		editor.click()
+// 		editor.click()
+// 		editor.click() // quad click!
+// 		jest.advanceTimersByTime(300)
+// 		expect(editor.getZoomLevel()).not.toBe(1) // animating
+// 		jest.advanceTimersByTime(300)
+// 		const z = editor.getZoomLevel()
+// 		editor.zoomToFit() // call zoom to fit manually to compare
+// 		expect(editor.getZoomLevel()).toBe(z) // zoom should not have changed
+// 	})
+// })
 
 describe('When in the idle state', () => {
 	it('Returns to select on cancel', () => {

package/src/test/TLSessionStateSnapshot.test.ts

@@ -124,23 +124,23 @@ describe(extractSessionStateFromLegacySnapshot, () => {
 		}
 
 		expect(extractSessionStateFromLegacySnapshot(oldSnapshot as any)).toMatchInlineSnapshot(`
-		Object {
+		{
 		  "currentPageId": "page:whatever",
 		  "exportBackground": false,
 		  "isDebugMode": false,
 		  "isFocusMode": false,
 		  "isGridMode": false,
 		  "isToolLocked": false,
-		  "pageStates": Array [
-		    Object {
-		      "camera": Object {
+		  "pageStates": [
+		    {
+		      "camera": {
 		        "x": 0,
 		        "y": 0,
 		        "z": 1,
 		      },
 		      "focusedGroupId": null,
 		      "pageId": "page:whatever",
-		      "selectedShapeIds": Array [
+		      "selectedShapeIds": [
 		        "shape:whatever",
 		      ],
 		    },

package/src/test/TestEditor.ts

@@ -24,6 +24,7 @@ import {
 	createTLStore,
 	rotateSelectionHandle,
 } from '@bigbluebutton/editor'
+import React from 'react'
 import { defaultShapeTools } from '../lib/defaultShapeTools'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
@@ -560,7 +561,9 @@ export class TestEditor extends Editor {
 		return this
 	}
 
-	createShapesFromJsx(shapesJsx: JSX.Element | JSX.Element[]): Record<string, TLShapeId> {
+	createShapesFromJsx(
+		shapesJsx: React.JSX.Element | React.JSX.Element[]
+	): Record<string, TLShapeId> {
 		const { shapes, ids } = shapesFromJsx(shapesJsx)
 		this.createShapes(shapes)
 		return ids

package/src/test/TldrawEditor.test.tsx

@@ -23,16 +23,16 @@ function checkAllShapes(editor: Editor, shapes: string[]) {
 }
 
 describe('<TldrawEditor />', () => {
-	it('Renders without crashing', async () => {
+	it('Renders without crashing', () => {
 		render(
 			<TldrawEditor tools={defaultTools} autoFocus initialState="select">
 				<div data-testid="canvas-1" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-1')
+		screen.findByTestId('canvas-1')
 	})
 
-	it('Creates its own store with core shapes', async () => {
+	it('Creates its own store with core shapes', () => {
 		let editor: Editor
 		render(
 			<TldrawEditor
@@ -46,11 +46,11 @@ describe('<TldrawEditor />', () => {
 				<div data-testid="canvas-1" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-1')
+		screen.findByTestId('canvas-1')
 		checkAllShapes(editor!, ['group'])
 	})
 
-	it('Can be created with default shapes', async () => {
+	it('Can be created with default shapes', () => {
 		let editor: Editor
 		render(
 			<TldrawEditor
@@ -65,13 +65,13 @@ describe('<TldrawEditor />', () => {
 				<div data-testid="canvas-1" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-1')
+		screen.findByTestId('canvas-1')
 		expect(editor!).toBeTruthy()
 
 		checkAllShapes(editor!, ['group'])
 	})
 
-	it('Renders with an external store', async () => {
+	it('Renders with an external store', () => {
 		const store = createTLStore({ shapeUtils: [] })
 		render(
 			<TldrawEditor
@@ -86,10 +86,10 @@ describe('<TldrawEditor />', () => {
 				<div data-testid="canvas-1" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-1')
+		screen.findByTestId('canvas-1')
 	})
 
-	it('throws if the store has different shapes to the ones passed in', async () => {
+	it('throws if the store has different shapes to the ones passed in', () => {
 		const spy = jest.spyOn(console, 'error').mockImplementation(noop)
 		// expect(() =>
 		// 	render(
@@ -130,7 +130,7 @@ describe('<TldrawEditor />', () => {
 		spy.mockRestore()
 	})
 
-	it('Accepts fresh versions of store and calls `onMount` for each one', async () => {
+	it('Accepts fresh versions of store and calls `onMount` for each one', () => {
 		const initialStore = createTLStore({ shapeUtils: [] })
 		const onMount = jest.fn()
 		const rendered = render(
@@ -144,7 +144,7 @@ describe('<TldrawEditor />', () => {
 				<div data-testid="canvas-1" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-1')
+		screen.findByTestId('canvas-1')
 		const initialEditor = onMount.mock.lastCall[0]
 		jest.spyOn(initialEditor, 'dispose')
 		expect(initialEditor.store).toBe(initialStore)
@@ -160,7 +160,7 @@ describe('<TldrawEditor />', () => {
 				<div data-testid="canvas-2" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-2')
+		screen.findByTestId('canvas-2')
 		// not called again:
 		expect(onMount).toHaveBeenCalledTimes(1)
 		// re-render with a new store:
@@ -176,7 +176,7 @@ describe('<TldrawEditor />', () => {
 				<div data-testid="canvas-3" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-3')
+		screen.findByTestId('canvas-3')
 		expect(initialEditor.dispose).toHaveBeenCalledTimes(1)
 		expect(onMount).toHaveBeenCalledTimes(2)
 		expect(onMount.mock.lastCall[0].store).toBe(newStore)
@@ -184,23 +184,21 @@ describe('<TldrawEditor />', () => {
 
 	it('Renders the canvas and shapes', async () => {
 		let editor = {} as Editor
-		await act(async () =>
-			render(
-				<TldrawEditor
-					shapeUtils={[GeoShapeUtil]}
-					initialState="select"
-					tools={defaultTools}
-					autoFocus
-					onMount={(editorApp) => {
-						editor = editorApp
-					}}
-				>
-					<Canvas />
-					<div data-testid="canvas-1" />
-				</TldrawEditor>
-			)
+		render(
+			<TldrawEditor
+				shapeUtils={[GeoShapeUtil]}
+				initialState="select"
+				tools={defaultTools}
+				autoFocus
+				onMount={(editorApp) => {
+					editor = editorApp
+				}}
+			>
+				<Canvas />
+				<div data-testid="canvas-1" />
+			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-1')
+		screen.findByTestId('canvas-1')
 
 		expect(editor).toBeTruthy()
 		await act(async () => {
@@ -324,7 +322,7 @@ describe('Custom shapes', () => {
 				<div data-testid="canvas-1" />
 			</TldrawEditor>
 		)
-		await screen.findByTestId('canvas-1')
+		screen.findByTestId('canvas-1')
 
 		expect(editor).toBeTruthy()
 		await act(async () => {

package/src/test/__snapshots__/resizing.test.ts.snap

@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`When resizing a shape with children Resizes a rotated draw shape: draw shape after rotating 1`] = `
-Object {
+{
   "id": "shape:lineA",
   "index": "a3",
   "isLocked": false,
-  "meta": Object {},
+  "meta": {},
   "opacity": 1,
   "parentId": "shape:boxA",
-  "props": Object {
+  "props": {
     "color": "black",
     "dash": "draw",
     "fill": "none",
     "isClosed": false,
     "isComplete": false,
     "isPen": false,
-    "segments": Array [
-      Object {
-        "points": Array [
-          Object {
+    "segments": [
+      {
+        "points": [
+          {
             "x": 0,
             "y": 0,
             "z": 0.5,
           },
-          Object {
+          {
             "x": 110,
             "y": 110,
             "z": 0.5,