demo: Added web widget project

README.md

@@ -49,6 +49,7 @@ Demo applications are located in the [`demos/`](./demos/) directory. Also see ou
 ### Web
 
 - [demos/react-supabase-todolist](./demos/react-supabase-todolist/README.md): A React to-do list example app using the PowerSync Web SDK and a Supabase backend.
+- [demos/react-advanced-ui](./demos/react-advanced-ui/README.md): A React widget that illustrates how data flows from one PowerSync client to another.
 - [demos/yjs-react-supabase-text-collab](./demos/yjs-react-supabase-text-collab/README.md): A React real-time text editing collaboration example app powered by [Yjs](https://github.com/yjs/yjs) CRDTs and [Tiptap](https://tiptap.dev/), using the PowerSync Web SDK and a Supabase backend.
 - [demos/vue-supabase-todolist](./demos/vue-supabase-todolist/README.md): A Vue to-do list example app using the PowerSync Web SDK and a Supabase backend.
 - [demos/angular-supabase-todolist](./demos/angular-supabase-todolist/README.md) An Angular to-do list example app using the PowerSync Web SDK and a Supabase backend.

demos/react-advanced-ui/.env.local.template

@@ -0,0 +1,5 @@
+# Copy this template: `cp .env.local.template .env.local`
+# Edit .env.local and enter your Supabase and PowerSync project details.
+VITE_SUPABASE_URL=https://foo.supabase.co
+VITE_SUPABASE_ANON_KEY=foo
+VITE_POWERSYNC_URL=https://foo.powersync.journeyapps.com

demos/react-advanced-ui/.envrc

@@ -0,0 +1,3 @@
+layout node
+use node
+[ -f .env ] && dotenv

demos/react-advanced-ui/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+
+# production
+/build
+/dist
+
+# supabase cli
+supabase
+
+# misc
+.DS_Store
+*.pem
+.idea
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

demos/react-advanced-ui/.nvmrc

@@ -0,0 +1 @@
+v20.9.0

demos/react-advanced-ui/.postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};

demos/react-advanced-ui/.prettierignore

@@ -0,0 +1,11 @@
+# Ignore all node_modules
+**/node_modules/**
+
+# Autogenerated files
+**/.idea/**
+**/.fleet/**
+**/devlink/**
+
+# Other
+**/assets/**
+**/bin/**

demos/react-advanced-ui/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSameLine": true,
+  "trailingComma": "none"
+}

demos/react-advanced-ui/README.md

@@ -0,0 +1,65 @@
+# PowerSync + Supabase Web Demo: Advanced UI
+
+This is a demo of the widget displayed on the [PowerSync homepage](http://powersync.com) and demonstrates how data flows from one PowerSync client to another. It also includes an implementation of Supabase's [anonymous auth](https://supabase.com/docs/guides/auth/auth-anonymous) feature.
+
+![website-widget](./public/website-widget.png)
+
+## Webflow Devlink Components
+
+Note that some of the UI components are generated from elements created in (Webflow's Devlink)[https://webflow.com/devlink]. They can be found under `src/devlink`. To make it easier to modify this project, these generated components are wrapped in facade components. The implementation detail of the facades can easily be changed to your own version that doesn't depend on devlink.
+
+## Setup Instructions
+
+Note that this setup guide has minor deviations from the [Supabase + PowerSync integration guide](https://docs.powersync.com/integration-guides/supabase-+-powersync). Below we refer to sections in this guide where relevant.
+
+### 1. Install dependencies
+
+In the repo directory, use [pnpm](https://pnpm.io/installation) to install dependencies:
+
+```bash
+pnpm install
+pnpm build:packages
+```
+
+### 2. Create project on Supabase and set up Postgres
+
+This demo app uses Supabase as its Postgres database and backend:
+
+1. [Create a new project on the Supabase dashboard](https://supabase.com/dashboard/projects).
+2. Go to the Supabase SQL Editor for your new project and execute the SQL statements in [`database.sql`](database.sql) to create the database schema, row level security (RLS) rules, and publication needed for PowerSync.
+
+### 3. Auth setup
+
+For ease of demoing, this app uses Supabase's [anonymous sign-in](https://supabase.com/docs/guides/auth/auth-anonymous) feature.
+Ensure that it is enabled under "Project Settings" -> "Authentication" in Supabase and confirming `Allow anonymous sign-ins` is toggled on. Click "Save" if you toggled this setting.
+
+The RLS rules defined in the `database.sql` script are setup to only allow the anonymous user CRUD access to their pebbles.
+
+### 4. Create new project on PowerSync and connect to Supabase
+
+Follow the [Connect PowerSync to Your Supabase](https://docs.powersync.com/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase) section.
+
+### 5. Create Sync Rules on PowerSync
+
+Create sync rules by following the [Configure Sync Rules](https://docs.powersync.com/integration-guides/supabase-+-powersync#configure-sync-rules) section.
+The sync rules for this demo are defined in [`sync-rules.yaml`](sync-rules.yaml) in this directory. Copy its contents and paste it into the 'sync-rules.yaml' file in the Dashboard as described in the guide.
+
+### 6. Set up local environment variables
+
+To set up the environment variables for the demo app, copy the `.env.local.template` file:
+
+```bash
+cp .env.local.template .env.local
+```
+
+And then edit `.env.local` to insert your credentials for Supabase and PowerSync.
+
+### 8. Run the demo app
+
+In this directory, run the following to start the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to try out the demo.

demos/react-advanced-ui/database.sql

@@ -0,0 +1,36 @@
+-- Create pebbles table
+create table
+  public.pebbles (
+    id uuid not null default gen_random_uuid (),
+    created_at timestamp with time zone not null default now(),
+    shape text not null,
+    user_id uuid null,
+    constraint pebbles_pkey primary key (id)
+) tablespace pg_default;
+
+-- Setup RLS for table
+alter table public.pebbles enable row level security;
+
+create policy "owned pebbles" on "public"."pebbles" for ALL using (
+  (auth.uid() = user_id)
+);
+
+-- Create publication for powersync
+create publication powersync for table public.pebbles;
+
+-- Create operations table, used for telemetry. This table doesn't need to be synced to the device.
+create table
+  public.operations (
+    id uuid not null default gen_random_uuid (),
+    created_at timestamp with time zone not null default now(),
+    operation text not null,
+    user_id uuid null,
+    constraint operations_pkey primary key (id)
+) tablespace pg_default;
+
+-- Setup RLS for table
+alter table public.operations enable row level security;
+
+create policy "user operations" on "public"."operations" for ALL using (
+  (auth.uid() = user_id)
+);

demos/react-advanced-ui/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "react-advanced-ui",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "start": "pnpm build && pnpm preview"
+  },
+  "dependencies": {
+    "@journeyapps/wa-sqlite": "~0.2.0",
+    "@powersync/react": "workspace:*",
+    "@powersync/web": "workspace:*",
+    "@supabase/supabase-js": "^2.43.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@webflow/webflow-cli": "^1.6.9",
+    "async-mutex": "^0.5.0",
+    "autoprefixer": "10.4.14",
+    "js-logger": "^1.6.1",
+    "lodash": "^4.17.21",
+    "postcss": "8.4.27",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/cors": "~2.8.17",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "prettier": "^3.1.0",
+    "supabase": "^1.165.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.1.5",
+    "vite-plugin-pwa": "^0.19.2",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0"
+  }
+}

demos/react-advanced-ui/src/app/index.tsx

@@ -0,0 +1,18 @@
+import SupabaseProvider from '@/components/providers/SupabaseProvider';
+import { createRoot } from 'react-dom/client';
+
+import Layout from './layout';
+import Page from './page';
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<App />);
+
+export function App() {
+  return (
+    <Layout>
+      <SupabaseProvider>
+        <Page />
+      </SupabaseProvider>
+    </Layout>
+  );
+}

demos/react-advanced-ui/src/app/layout.tsx

@@ -0,0 +1,7 @@
+import { createIX2Engine, InteractionsProvider } from '@/devlink';
+import React from 'react';
+import '@/devlink/global.css';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <InteractionsProvider createEngine={createIX2Engine}>{children}</InteractionsProvider>;
+}

demos/react-advanced-ui/src/app/page.tsx

@@ -0,0 +1,23 @@
+import { SuspendableUserComponent } from '@/components/SuspendableUserComponent';
+import { WebWidgetFacade } from '@/components/facades/WebWidgetFacade';
+import SystemProvider from '@/components/providers/SystemProvider';
+import '@/styles/widget.css';
+
+export default function EntryPage() {
+  return (
+    <div className={'widget-wrapper'}>
+      <WebWidgetFacade
+        userASlot={
+          <SystemProvider dbFilename={'userA.db'}>
+            <SuspendableUserComponent leftSide={true} />
+          </SystemProvider>
+        }
+        userBSlot={
+          <SystemProvider dbFilename={'userB.db'}>
+            <SuspendableUserComponent />
+          </SystemProvider>
+        }
+      />
+    </div>
+  );
+}

demos/react-advanced-ui/src/components/LogDisplayWidget.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface LogDisplayWidgetProps {
+  lines: string[];
+}
+
+export const LogDisplayWidget: React.FC<LogDisplayWidgetProps> = (props) => {
+  return (
+    <div className={'log-container'}>
+      {props.lines.map((log, i) => (
+        <p key={i} className="log-line">
+          {log}
+        </p>
+      ))}
+    </div>
+  );
+};

demos/react-advanced-ui/src/components/PebbleBoxWidget.tsx

@@ -0,0 +1,38 @@
+import { MAX_PEBBLES, PebbleDef, Shape, TABLE_NAME } from '@/definitions/Schema';
+import { useQuery } from '@powersync/react';
+import React from 'react';
+import {
+  DataCircleFacade,
+  DataDiamondFacade,
+  DataHexagonFacade,
+  DataPentagonFacade,
+  DataTriangleFacade
+} from './facades/ShapeFacade';
+
+const ShapeWidgetMap = {
+  [Shape.CIRCLE]: DataCircleFacade,
+  [Shape.HEXAGON]: DataHexagonFacade,
+  [Shape.PENTAGON]: DataPentagonFacade,
+  [Shape.DIAMOND]: DataDiamondFacade,
+  [Shape.TRIANGLE]: DataTriangleFacade
+};
+
+export const PebbleBoxWidget: React.FC = () => {
+  const { data: pebbles } = useQuery<PebbleDef>(
+    `SELECT * FROM ${TABLE_NAME} ORDER BY shape ASC LIMIT ${MAX_PEBBLES}`,
+    []
+  );
+
+  return (
+    <>
+      {pebbles.map((pebble) => {
+        const Widget = ShapeWidgetMap[pebble.shape];
+        return (
+          <div key={pebble.id} className={'widget-pebble-div'}>
+            <Widget />
+          </div>
+        );
+      })}
+    </>
+  );
+};

demos/react-advanced-ui/src/components/SuspendableUserComponent.tsx

@@ -0,0 +1,42 @@
+import { UserComponent } from './UserComponent';
+import { useSystem } from './providers/SystemProvider';
+import { useState, useEffect } from 'react';
+
+export interface UserComponentProps {
+  leftSide?: boolean;
+}
+
+export const SuspendableUserComponent: React.FC<UserComponentProps> = (props) => {
+  const connector = useSystem();
+
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (!connector) {
+      console.error(`No Supabase connector has been created yet.`);
+      return;
+    }
+
+    if (!connector.ready) {
+      const l = connector.registerListener({
+        initialized: () => {
+          /**
+           * Redirect if on the entry view
+           */
+          if (connector.ready) {
+            setShow(true);
+          } else {
+            setShow(false);
+          }
+        }
+      });
+      return () => l?.();
+    }
+  }, []);
+
+  if (show) {
+    return <UserComponent leftSide={props.leftSide} />;
+  }
+
+  return <>Loading</>;
+};