create-tinybase 0.1.4 → 0.2.0

package/templates/client/src/chat/message.ts.hbs

@@ -0,0 +1,27 @@
+{{includeFile template="client/src/chat/message.css.hbs" output="client/src/message.css"}}
+import './message.css';
+
+export const createMessage = (username: string, text: string, timestamp: number): HTMLDivElement => {
+const time = new Date(timestamp).toLocaleTimeString();
+
+const messageDiv = document.createElement('div');
+messageDiv.className = 'message';
+
+const usernameSpan = document.createElement('span');
+usernameSpan.className = 'username';
+usernameSpan.textContent = `${username}:`;
+
+const textSpan = document.createElement('span');
+textSpan.className = 'text';
+textSpan.textContent = text;
+
+const timeSpan = document.createElement('span');
+timeSpan.className = 'time';
+timeSpan.textContent = time;
+
+messageDiv.appendChild(usernameSpan);
+messageDiv.appendChild(textSpan);
+messageDiv.appendChild(timeSpan);
+
+return messageDiv;
+};

package/templates/client/src/chat/messageInput.css.hbs

@@ -0,0 +1,6 @@
+#messageInput {
+display: flex;
+gap: 0.5rem;
+padding: 1rem;
+border-top: 1px solid var(--border);
+}

package/templates/client/src/chat/messageInput.ts.hbs

@@ -0,0 +1,42 @@
+{{includeFile template="client/src/chat/messageInput.css.hbs" output="client/src/messageInput.css"}}
+import './messageInput.css';
+import {type SettingsStore} from './settingsStore';
+import {type ChatStore} from './chatStore';
+
+{{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
+import {createButton} from './button';
+
+{{includeFile template="client/src/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
+import {createInput} from './input';
+
+export const createMessageInput = (settingsStore: SettingsStore, chatStore: ChatStore): HTMLDivElement => {
+const messageInputContainer = document.createElement('div');
+messageInputContainer.id = 'messageInput';
+
+const messageInput = createInput('Type a message...');
+messageInputContainer.appendChild(messageInput);
+
+const sendMessage = () => {
+const text = messageInput.value.trim();
+if (text) {
+chatStore.addRow('messages', {
+username: settingsStore.getValue('username'),
+text,
+timestamp: Date.now(),
+});
+messageInput.value = '';
+messageInput.focus();
+}
+};
+
+messageInput.addEventListener('keypress', (e) => {
+if (e.key === 'Enter') {
+sendMessage();
+}
+});
+
+const sendButton = createButton('Send', sendMessage, 'primary');
+messageInputContainer.appendChild(sendButton);
+
+return messageInputContainer;
+};

package/templates/client/src/chat/messages.css.hbs

@@ -0,0 +1,6 @@
+#messages {
+overflow-y: auto;
+padding: 1rem 0;
+height: 400px;
+margin-bottom: 1rem;
+}

package/templates/client/src/chat/messages.ts.hbs

@@ -0,0 +1,33 @@
+{{includeFile template="client/src/chat/messages.css.hbs" output="client/src/messages.css"}}
+import './messages.css';
+import {type ChatStore} from './chatStore';
+
+{{includeFile template="client/src/chat/message.ts.hbs" output="client/src/message.{{ext}}"}}
+import {createMessage} from './message';
+
+export const createMessages = (store: ChatStore): HTMLDivElement => {
+const messagesContainer = document.createElement('div');
+messagesContainer.id = 'messages';
+
+const updateMessages = () => {
+const messageRows = store.getTable('messages');
+const sortedIds = Object.keys(messageRows).sort(
+(a, b) => messageRows[a].timestamp - messageRows[b].timestamp,
+);
+
+messagesContainer.innerHTML = '';
+sortedIds.forEach((id) => {
+const msg = messageRows[id];
+const messageElement = createMessage(msg.username, msg.text, msg.timestamp);
+messagesContainer.appendChild(messageElement);
+});
+};
+
+// Initial render
+updateMessages();
+
+// Listen for changes
+store.addTablesListener(updateMessages);
+
+return messagesContainer;
+};

package/templates/client/src/chat/settingsStore.ts.hbs

@@ -0,0 +1,19 @@
+{{#if schemas}}
+  import {createStore} from 'tinybase/with-schemas';
+{{else}}
+  import {createStore} from 'tinybase';
+{{/if}}
+
+const STORE_ID = 'settings';
+
+{{#if schemas}}
+  const VALUES_SCHEMA = {
+  username: {type: 'string'},
+  } as const;
+
+{{/if}}
+export const settingsStore = createStore(){{#if schemas}}
+  .setValuesSchema(VALUES_SCHEMA){{/if}}
+.setValue('username', 'Carol');
+
+export type SettingsStore = typeof settingsStore;

package/templates/client/src/chat/usernameInput.css.hbs

@@ -0,0 +1,14 @@
+#usernameInput {
+margin-bottom: 1rem;
+display: flex;
+align-items: center;
+gap: 0.5rem;
+}
+
+#usernameInput label {
+white-space: nowrap;
+}
+
+#usernameInput input {
+flex: 1;
+}

package/templates/client/src/chat/usernameInput.ts.hbs

@@ -0,0 +1,30 @@
+{{includeFile template="client/src/chat/usernameInput.css.hbs" output="client/src/usernameInput.css"}}
+import './usernameInput.css';
+import {type SettingsStore} from './settingsStore';
+import {type ChatStore} from './chatStore';
+
+{{includeFile template="client/src/shared/input.ts.hbs" output="client/src/input.{{ext}}"}}
+import {createInput} from './input';
+
+export const createUsernameInput = (settingsStore: SettingsStore, chatStore: ChatStore): HTMLDivElement => {
+const container = document.createElement('div');
+container.id = 'usernameInput';
+
+const label = document.createElement('label');
+label.textContent = 'Your name:';
+
+const usernameInput = createInput('Enter your name', settingsStore.getValue('username') as string);
+
+container.appendChild(label);
+container.appendChild(usernameInput);
+
+usernameInput.addEventListener('input', () => {
+settingsStore.setValue('username', usernameInput.value);
+});
+
+settingsStore.addValuesListener(() => {
+usernameInput.value = settingsStore.getValue('username') as string;
+});
+
+return container;
+};

package/templates/client/src/drawing/App.tsx.hbs

@@ -0,0 +1,36 @@
+import {StrictMode} from 'react';
+
+{{#if schemas}}
+  import {Provider} from 'tinybase/ui-react/with-schemas';
+{{else}}
+  import {Provider} from 'tinybase/ui-react';
+{{/if}}
+import {Inspector} from 'tinybase/ui-react-inspector';
+
+{{includeFile template="client/src/drawing/SettingsStore.tsx.hbs" output="client/src/SettingsStore.{{ext}}"}}
+import {SettingsStore} from './SettingsStore';
+
+{{includeFile template="client/src/drawing/CanvasStore.tsx.hbs" output="client/src/CanvasStore.{{ext}}"}}
+import {CanvasStore} from './CanvasStore';
+
+{{includeFile template="client/src/drawing/DrawingControls.tsx.hbs" output="client/src/DrawingControls.{{ext}}"}}
+import {DrawingControls} from './DrawingControls';
+
+{{includeFile template="client/src/drawing/Canvas.tsx.hbs" output="client/src/Canvas.{{ext}}"}}
+import {Canvas} from './Canvas';
+
+const App = () => {
+return (
+<StrictMode>
+  <Provider>
+    <SettingsStore />
+    <CanvasStore />
+    <DrawingControls />
+    <Canvas />
+    <Inspector />
+  </Provider>
+</StrictMode>
+);
+};
+
+export {App};

package/templates/client/src/drawing/BrushSize.tsx.hbs

@@ -0,0 +1,22 @@
+{{includeFile template="client/src/drawing/brushSize.css.hbs" output="client/src/brushSize.css"}}
+import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
+import './brushSize.css';
+
+export const BrushSize = () => {
+const size = useValue('brushSize', STORE_ID) ?? 5;
+
+const setSize = useSetValueCallback(
+'brushSize',
+(e: React.ChangeEvent<HTMLInputElement>) => parseInt(e.target.value),
+  [],
+  STORE_ID,
+  );
+
+  return (
+  <div id="brushSize">
+    <label>Size:</label>
+    <input type="range" min="1" max="50" value={size} onChange={setSize} />
+    <span id="brushSizeValue">{size}</span>
+  </div>
+  );
+  };

package/templates/client/src/drawing/Canvas.tsx.hbs

@@ -0,0 +1,100 @@
+{{includeFile template="client/src/drawing/canvas.css.hbs" output="client/src/canvas.css"}}
+import {useCallback, useEffect, useRef} from 'react';
+import {useTable, useStore, STORE_ID as CANVAS_STORE_ID} from './CanvasStore';
+import {useValues, STORE_ID as SETTINGS_STORE_ID} from './SettingsStore';
+import {getUniqueId} from 'tinybase';
+import './canvas.css';
+
+export const Canvas = () => {
+const canvasRef = useRef<HTMLCanvasElement>(null);
+  const isDrawing = useRef(false);
+  const currentStrokeId = useRef<string | null>(null);
+    const pointIndex = useRef(0);
+    const brush = useValues(SETTINGS_STORE_ID);
+    const strokes = useTable('strokes', CANVAS_STORE_ID);
+    const store = useStore(CANVAS_STORE_ID);
+
+    const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.fillStyle = '#111';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    Object.entries(strokes).forEach(([id, stroke]) => {
+    if (stroke) {
+    const points: Array<{x: number; y: number}> = [];
+      let i = 0;
+      while (stroke[`x${i}`] !== undefined && stroke[`y${i}`] !== undefined) {
+      points.push({x: stroke[`x${i}`] as number, y: stroke[`y${i}`] as number});
+      i++;
+      }
+      if (points.length > 0) {
+      ctx.strokeStyle = stroke.color as string;
+      ctx.lineWidth = (stroke.size as number) * 2;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.beginPath();
+      ctx.moveTo(points[0].x, points[0].y);
+      for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); } } }); }, [strokes]); useEffect(()=> {
+        draw();
+        }, [draw]);
+
+        const getPoint = (e: MouseEvent | TouchEvent) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return null;
+
+        const rect = canvas.getBoundingClientRect();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+
+        return {
+        x: clientX - rect.left,
+        y: clientY - rect.top,
+        };
+        };
+
+        const handleStart = (e: React.MouseEvent | React.TouchEvent) => {
+        isDrawing.current = true;
+        pointIndex.current = 0;
+        currentStrokeId.current = getUniqueId();
+
+        store.setRow('strokes', currentStrokeId.current, {
+        color: brush.brushColor,
+        size: brush.brushSize,
+        });
+
+        const point = getPoint(e.nativeEvent);
+        if (point) {
+        store.setCell('strokes', currentStrokeId.current, 'x0', point.x);
+        store.setCell('strokes', currentStrokeId.current, 'y0', point.y);
+        pointIndex.current = 1;
+        }
+        };
+
+        const handleMove = (e: React.MouseEvent | React.TouchEvent) => {
+        if (isDrawing.current && currentStrokeId.current) {
+        const point = getPoint(e.nativeEvent);
+        if (point) {
+        const idx = pointIndex.current;
+        store.setCell('strokes', currentStrokeId.current, `x${idx}`, point.x);
+        store.setCell('strokes', currentStrokeId.current, `y${idx}`, point.y);
+        pointIndex.current++;
+        }
+        }
+        };
+
+        const handleEnd = () => {
+        isDrawing.current = false;
+        currentStrokeId.current = null;
+        pointIndex.current = 0;
+        };
+
+        return (
+        <canvas ref={canvasRef} width={600} height={400} id="drawingCanvas" onMouseDown={handleStart} onMouseMove={handleMove} onMouseUp={handleEnd} onMouseLeave={handleEnd} onTouchStart={handleStart} onTouchMove={handleMove}
+          onTouchEnd={handleEnd} />
+        );
+        };

package/templates/client/src/drawing/CanvasStore.tsx.hbs

@@ -0,0 +1,62 @@
+{{#if schemas}}
+  import {createMergeableStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoValuesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createMergeableStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable} from 'tinybase/ui-react';
+{{/if}}
+import {getUniqueId} from 'tinybase';
+
+export const STORE_ID = 'canvas';
+
+{{#if schemas}}
+  const TABLES_SCHEMA = {
+  strokes: {
+  color: {type: 'string'},
+  size: {type: 'number'},
+  },
+  } as const;
+
+  type Schemas = [typeof TABLES_SCHEMA, NoValuesSchema];
+
+  const {useCreateStore, useProvideStore, useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useAddRowCallback, useDelTableCallback, useRow, useRowIds, useStore, useTable};
+
+export const CanvasStore = () => {
+const store = useCreateStore(() =>
+createMergeableStore(STORE_ID){{#if schemas}}
+  .setTablesSchema(TABLES_SCHEMA){{/if}}
+.setDefaultContent([{strokes: {}}, {}]),
+);
+
+useProvideStore(STORE_ID, store);
+
+{{#if sync}}
+  {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
+  {{addImport "import {SERVER} from './config';"}}
+  {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
+  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+  {{addImport "import {useCreateSynchronizer} from 'tinybase/ui-react';"}}
+  {{addImport "import type {MergeableStore} from 'tinybase';"}}
+
+  useCreateSynchronizer(store, async (store: MergeableStore) => {
+  const serverPathId = location.pathname;
+  const synchronizer = await createWsSynchronizer(
+  store,
+  new ReconnectingWebSocket(SERVER + serverPathId),
+  );
+  await synchronizer.startSync();
+
+  synchronizer.getWebSocket().addEventListener('open', () => {
+  synchronizer.load().then(() => synchronizer.save());
+  });
+
+  return synchronizer;
+  });
+{{/if}}
+
+return null;
+};

package/templates/client/src/drawing/ColorPicker.tsx.hbs

@@ -0,0 +1,24 @@
+{{includeFile template="client/src/drawing/colorPicker.css.hbs" output="client/src/colorPicker.css"}}
+import './colorPicker.css';
+import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
+
+export const ColorPicker = () => {
+const colors = ['#d81b60', '#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#fff'];
+const currentColor = useValue('brushColor', STORE_ID);
+
+const setColor = useSetValueCallback(
+'brushColor',
+(color: string) => color,
+[],
+STORE_ID,
+);
+
+return (
+<div id="colorPicker">
+  {colors.map((color) => (
+  <button key={color} className={`colorBtn${currentColor===color ? ' active' : '' }`} style=\{{background: color}} onClick={()=> setColor(color)}
+    />
+    ))}
+</div>
+);
+};

package/templates/client/src/drawing/DrawingControls.tsx.hbs

@@ -0,0 +1,24 @@
+{{includeFile template="client/src/drawing/drawingControls.css.hbs" output="client/src/drawingControls.css"}}
+import './drawingControls.css';
+import {useDelTableCallback, STORE_ID} from './CanvasStore';
+
+{{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
+import {Button} from './Button';
+
+{{includeFile template="client/src/drawing/ColorPicker.tsx.hbs" output="client/src/ColorPicker.{{ext}}"}}
+import {ColorPicker} from './ColorPicker';
+
+{{includeFile template="client/src/drawing/BrushSize.tsx.hbs" output="client/src/BrushSize.{{ext}}"}}
+import {BrushSize} from './BrushSize';
+
+export const DrawingControls = () => {
+const clearStrokes = useDelTableCallback('strokes', () => null, [], STORE_ID);
+
+return (
+<div id="drawingControls">
+  <ColorPicker />
+  <BrushSize />
+  <Button onClick={clearStrokes} variant="primary">Clear</Button>
+</div>
+);
+};

package/templates/client/src/drawing/SettingsStore.tsx.hbs

@@ -0,0 +1,36 @@
+{{#if schemas}}
+  import {createStore} from 'tinybase/with-schemas';
+  import * as UiReact from 'tinybase/ui-react/with-schemas';
+  import {type NoTablesSchema} from 'tinybase/with-schemas';
+{{else}}
+  import {createStore} from 'tinybase';
+  import {useCreateStore, useProvideStore, useValue, useSetValueCallback, useValues} from 'tinybase/ui-react';
+{{/if}}
+
+export const STORE_ID = 'settings';
+
+{{#if schemas}}
+  const VALUES_SCHEMA = {
+  brushColor: {type: 'string'},
+  brushSize: {type: 'number'},
+  } as const;
+
+  type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+
+  const {useCreateStore, useProvideStore, useValue, useSetValueCallback, useValues} = UiReact as UiReact.WithSchemas<Schemas>;
+{{/if}}
+
+export {useValue, useSetValueCallback, useValues};
+
+export const SettingsStore = () => {
+const store = useCreateStore(() =>
+createStore(){{#if schemas}}
+  .setValuesSchema(VALUES_SCHEMA){{/if}}
+.setValue('brushColor', '#d81b60')
+.setValue('brushSize', 5),
+);
+
+useProvideStore(STORE_ID, store);
+
+return null;
+};

package/templates/client/src/drawing/app.ts.hbs

@@ -0,0 +1,20 @@
+{{includeFile template="client/src/drawing/settingsStore.ts.hbs" output="client/src/settingsStore.ts"}}
+import {settingsStore} from './settingsStore';
+
+{{includeFile template="client/src/drawing/canvasStore.ts.hbs" output="client/src/canvasStore.ts"}}
+import {canvasStore} from './canvasStore';
+
+{{includeFile template="client/src/drawing/drawingControls.ts.hbs" output="client/src/drawingControls.{{ext}}"}}
+import {createDrawingControls} from './drawingControls';
+
+{{includeFile template="client/src/drawing/canvas.ts.hbs" output="client/src/canvas.{{ext}}"}}
+import {createCanvas} from './canvas';
+
+const app = () => {
+const appContainer = document.getElementById('app')!;
+
+appContainer.appendChild(createDrawingControls(settingsStore, canvasStore));
+appContainer.appendChild(createCanvas(settingsStore, canvasStore));
+};
+
+export {app};

package/templates/client/src/drawing/brushSize.css.hbs

@@ -0,0 +1,21 @@
+#brushSize {
+display: flex;
+gap: 0.5rem;
+align-items: center;
+}
+
+#brushSize label {
+white-space: nowrap;
+}
+
+#brushSize input {
+width: 100px;
+vertical-align: middle;
+}
+
+#brushSizeValue {
+width: 2rem;
+min-width: 2rem;
+text-align: center;
+display: inline-block;
+}

package/templates/client/src/drawing/brushSize.ts.hbs

@@ -0,0 +1,33 @@
+{{includeFile template="client/src/drawing/brushSize.css.hbs" output="client/src/brushSize.css"}}
+import './brushSize.css';
+import type {Store as SettingsStore} from './settingsStore';
+
+export const createBrushSize = (store: SettingsStore): HTMLDivElement => {
+const container = document.createElement('div');
+container.id = 'brushSize';
+
+const label = document.createElement('label');
+label.textContent = 'Size:';
+
+const sizeSlider = document.createElement('input');
+sizeSlider.type = 'range';
+sizeSlider.min = '1';
+sizeSlider.max = '50';
+sizeSlider.value = '5';
+
+const sizeLabel = document.createElement('span');
+sizeLabel.id = 'brushSizeValue';
+sizeLabel.textContent = '5';
+
+sizeSlider.addEventListener('input', () => {
+const size = parseInt(sizeSlider.value);
+store.setValue('brushSize', size);
+sizeLabel.textContent = `${size}`;
+});
+
+container.appendChild(label);
+container.appendChild(sizeSlider);
+container.appendChild(sizeLabel);
+
+return container;
+};

package/templates/client/src/drawing/canvas.css.hbs

@@ -0,0 +1,8 @@
+#drawingCanvas {
+border: 1px solid var(--border);
+border-radius: 0.375rem;
+cursor: crosshair;
+display: block;
+touch-action: none;
+margin: 0 auto;
+}