Update liveobjects examples to use npm workspace and franken-ui component styling

Author: GregHolmes

examples/liveobjects-live-map/javascript/ably-2.5.0-liveobjects.tgz renamed to examples/ably-2.5.0-liveobjects.tgz

@@ -1,6 +1,25 @@
-# Working with LiveCounter from LiveObjects
+# Synchronizing numeric values with LiveCounter
 
-This folder contains the code for LiveCounter (Typescript) - a demo of how you can leverage [Ably LiveObjects](https://ably.com/docs/liveobjects) to create, subscribe to, and update a LiveCounter object synchronized across clients in realtime.
+Enable clients to update and synchronize numerical values in an application in realtime.
+
+LiveCounter provides a simple way to manage shared numerical state in realtime applications. Each counter represents a numerical value that clients can increment or decrement.
+
+LiveCounters are useful for tracking values that need to be updated dynamically, such as votes, reaction counts, live leaderboards, game stats, or other numeric data points.
+
+LiveCounters are implemented using [Ably LiveObjects](https://ably.com/docs/liveobjects). LiveObjects, as a feature of [Ably Pub/Sub](https://ably.com/docs/products/channels), contains a set of purpose-built APIs that abstract away the complexities of managing shared state between clients in an application. It is built on top of Ably's core platform, and so it provides the same performance guarantees and scaling potential.
+
+## Resources
+
+Use the following methods to interact with a LiveCounter in your application:
+
+* [`liveObjects.getRoot()`](https://ably.com/docs/liveobjects) - retrieves the root object that serves as the starting point for storing and organizing LiveObjects state.
+* [`liveObjects.createCounter()`](https://ably.com/docs/liveobjects) - creates a new LiveCounter instance.
+* [`liveCounter.value()`](https://ably.com/docs/liveobjects/livecounter) - returns the current value of a counter.
+* [`liveCounter.increment()`](https://ably.com/docs/liveobjects/livecounter) - sends the operation message to the Ably system to increase the counter value.
+* [`liveCounter.decrement()`](https://ably.com/docs/liveobjects/livecounter) - sends the operation message to the Ably system to decrease the counter value.
+* [`liveCounter.subscribe()`](https://ably.com/docs/liveobjects/livecounter) - subscribes to LiveCounter updates by registering a listener.
+
+Find out more about [LiveCounters](https://ably.com/docs/liveobjects/livecounter).
 
 ## Getting started
 
@@ -13,7 +32,7 @@ git clone [email protected]:ably/docs.git
 2. Change directory:
 
 ```sh
-cd /examples/liveobjects-live-counter/javascript/
+cd /examples/
 ```
 
 3. Rename the environment file:
@@ -33,7 +52,11 @@ yarn install
 6. Run the server:
 
 ```sh
-yarn run dev
+yarn run liveobjects-live-counter-javascript
 ```
 
 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result.
+
+## Open in CodeSandbox
+
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.

examples/liveobjects-live-counter/javascript/.env.example

@@ -16,29 +16,29 @@ <h2 class="text-xl font-bold mb-4">Vote for your favorite Color</h2>
           <div class="flex justify-between items-center p-2 border-b space-x-4">
             <span class="text-red-500 font-semibold flex-grow">Red</span>
             <span class="font-bold text-gray-700" id="count-red">0</span>
-            <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded vote-button" data-color="red">
+            <button class="uk-btn uk-btn-primary uk-border-rounded-right whitespace-nowrap vote-button" data-color="red">
               Vote
             </button>
           </div>
 
           <div class="flex justify-between items-center p-2 border-b space-x-4">
             <span class="text-green-500 font-semibold flex-grow">Green</span>
             <span class="font-bold text-gray-700" id="count-green">0</span>
-            <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded vote-button" data-color="green">
+            <button class="uk-btn uk-btn-primary uk-border-rounded-right whitespace-nowrap vote-button" data-color="green">
               Vote
             </button>
           </div>
 
           <div class="flex justify-between items-center p-2 space-x-4">
             <span class="text-blue-500 font-semibold flex-grow">Blue</span>
             <span class="font-bold text-gray-700" id="count-blue">0</span>
-            <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded vote-button" data-color="blue">
+            <button class="uk-btn uk-btn-primary uk-border-rounded-right whitespace-nowrap vote-button" data-color="blue">
               Vote
             </button>
           </div>
         </div>
 
-        <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded" id="reset">Reset</button>
+        <button class="uk-btn uk-btn-secondary uk-border-rounded-right" id="reset">Reset</button>
       </div>
     </div>
     <script type="module" src="src/script.ts"></script>

examples/liveobjects-live-counter/javascript/README.md

@@ -1,23 +1,11 @@
 {
-  "name": "liveobjects-live-counter",
+  "name": "liveobjects-live-counter-javascript",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "dotenv": "^16.4.5",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.3"
-  },
-  "dependencies": {
-    "ably": "file:./ably-2.5.0-liveobjects.tgz",
-    "nanoid": "^5.0.7",
-    "vite": "^5.4.2"
   }
 }

examples/liveobjects-live-counter/javascript/ably-2.5.0-liveobjects.tgz

@@ -0,0 +1,7 @@
+import baseConfig from '../../postcss.config';
+
+const config = {
+  ...baseConfig,
+};
+
+export default config;

examples/liveobjects-live-counter/javascript/index.html

@@ -1,3 +1,60 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20 91% 54%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 209 100% 43%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}

examples/liveobjects-live-counter/javascript/package.json

@@ -0,0 +1,8 @@
+import baseConfig from '../../tailwind.config';
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  ...baseConfig,
+};
+
+export default config;

examples/liveobjects-live-counter/javascript/postcss.config.ts

@@ -1,25 +1,5 @@
 {
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "es2015"
-    ],
-    "outDir": "./lib/cjs/",
-    "sourceMap": true,
-    "declaration": true,
-    "noImplicitAny": true,
-    "module": "commonjs",
-    "target": "es2017",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "esModuleInterop": true
-  },
-  "include": [
-    "src/**/*.ts*"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "lib"
-  ]
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["../../node_modules", "../../dist", "../../lib"]
 }

examples/liveobjects-live-counter/javascript/src/styles.css

@@ -1,9 +1,10 @@
+import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
+import dotenv from 'dotenv';
+import path from 'path';
+
+dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
 
 export default defineConfig({
-  css: {
-    postcss: {
-      plugins: [require('tailwindcss'), require('autoprefixer')],
-    },
-  },
+  ...baseConfig,
 });