demo: Added webwidget project

demos/react-supabase-web-widget/.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-supabase-web-widget/.envrc

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

demos/react-supabase-web-widget/.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-supabase-web-widget/.nvmrc

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

demos/react-supabase-web-widget/.postcss.config.js

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

demos/react-supabase-web-widget/.prettierignore

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

demos/react-supabase-web-widget/.prettierrc

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

demos/react-supabase-web-widget/README.md

@@ -0,0 +1,64 @@
+# PowerSync + Supabase Web Demo: Widget
+
+This is a demo of the widget for the [PowerSync](http://powersync.com) to demonstrate how data flows from one PowerSync client to another.
+
+## 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).
+
+### 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 by going to `settings/auth` in Supabase and confirming `Allow anonymous sign-ins` is ticked.
+
+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
+
+1. Open the [`sync-rules.yaml`](sync-rules.yaml) in this repo and copy the contents.
+2. In the [PowerSync dashboard](https://powersync.journeyapps.com/), paste that into the 'sync-rules.yaml' editor panel.
+3. Click the "Deploy sync rules" button and select your PowerSync instance from the drop-down list.
+
+### 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 the repo 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-supabase-web-widget/database.sql

@@ -0,0 +1,20 @@
+-- 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;

demos/react-supabase-web-widget/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "powersync-webflow-widget",
+  "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",
+    "cors": "^2.8.5",
+    "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"
+  }
+}