@lynx-js/genui 0.0.2 → 0.0.3

package/cli/templates/default/src/App.css

@@ -0,0 +1,88 @@
+.page {
+  width: 100%;
+  min-height: 100vh;
+  padding: 10px 12px 16px;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+  box-sizing: border-box;
+}
+
+.Background {
+  position: fixed;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background:
+    radial-gradient(
+      circle at 30% 20%,
+      rgba(120, 80, 200, 0.3) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+    circle at 70% 80%,
+    rgba(80, 120, 200, 0.3) 0%,
+    transparent 50%
+  ),
+    radial-gradient(
+    circle at 50% 50%,
+    rgba(200, 80, 120, 0.2) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
+.A2UIApp {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 10;
+}
+
+.AppContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+}
+
+.WelcomeScreen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.Title {
+  font-size: 42px;
+  font-weight: 800;
+  color: #a5b4fc;
+  margin-bottom: 8px;
+}
+
+.Subtitle {
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.6);
+  letter-spacing: 2px;
+}
+
+.StartButton {
+  margin-top: 40px;
+  padding: 18px 56px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50px;
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
+}
+
+.ButtonText {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}

package/cli/templates/default/src/App.tsx

@@ -0,0 +1,100 @@
+import { useState, useCallback } from '@lynx-js/react';
+import { A2UI, createMessageStore, defineCatalog } from '@lynx-js/genui/a2ui';
+import {
+  catalogManifests,
+  Text,
+  Button,
+  Card,
+  Column,
+  Row,
+  Image,
+  type CatalogComponent,
+} from '@lynx-js/genui/a2ui/catalog';
+import type {
+  ServerToClientMessage,
+  UserActionPayload,
+} from '@lynx-js/genui/a2ui';
+import {
+  initialMessages,
+  secondStageMessages,
+  thirdStageMessages,
+  finalStageMessages,
+  buttonClickMessages,
+} from './messages';
+
+import './App.css';
+
+const store = createMessageStore();
+
+const ALL_BUILTINS = defineCatalog([
+  [Text as CatalogComponent, catalogManifests.Text],
+  [Button as CatalogComponent, catalogManifests.Button],
+  [Card as CatalogComponent, catalogManifests.Card],
+  [Column as CatalogComponent, catalogManifests.Column],
+  [Row as CatalogComponent, catalogManifests.Row],
+  [Image as CatalogComponent, catalogManifests.Image],
+]).components;
+
+const sleep = (ms: number) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+};
+
+export function App() {
+  const [showResponse, setShowResponse] = useState(false);
+
+  const streamMessages = useCallback(
+    async (messages: ServerToClientMessage[]) => {
+      for (const message of messages) {
+        store.push(message);
+        await sleep(1000);
+      }
+    },
+    [],
+  );
+
+  const startDemo = useCallback(async () => {
+    setShowResponse(true);
+    await streamMessages(initialMessages);
+    await streamMessages(secondStageMessages);
+    await streamMessages(thirdStageMessages);
+    await streamMessages(finalStageMessages);
+  }, [streamMessages]);
+
+  const handleAction = useCallback((action: UserActionPayload) => {
+    if (action?.name === 'button_click') {
+      buttonClickMessages.forEach(msg => {
+        store.push(msg);
+      });
+    }
+  }, []);
+
+  return (
+    <view className='A2UIApp'>
+      <view className='Background' />
+      <view className='AppContent'>
+        {!showResponse
+          ? (
+            <view className='WelcomeScreen'>
+              <text className='Title'>A2UI Demo</text>
+              <text className='Subtitle'>ReactLynx GenUI</text>
+              <view className='StartButton' bindtap={startDemo}>
+                <text className='ButtonText'>Start Demo</text>
+              </view>
+            </view>
+          )
+          : (
+            <A2UI
+              messageStore={store}
+              catalogs={ALL_BUILTINS}
+              wrapSurface={(children) => (
+                <view className='A2UISurface'>{children}</view>
+              )}
+              onAction={handleAction}
+            />
+          )}
+      </view>
+    </view>
+  );
+}

package/cli/templates/default/src/index.tsx

@@ -0,0 +1,10 @@
+import '@lynx-js/react/debug';
+import { root } from '@lynx-js/react';
+
+import { App } from './App.js';
+
+root.render(<App />);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

package/cli/templates/default/src/messages.ts

@@ -0,0 +1,158 @@
+import type { ServerToClientMessage } from '@lynx-js/genui/a2ui';
+
+export const initialMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    createSurface: {
+      surfaceId: 'main',
+      catalogId: 'https://a2ui.org/specification/v0_9/basic_catalog.json',
+    },
+  },
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'root-card',
+          component: 'Card',
+          variant: 'elevated',
+          child: 'content-column',
+        },
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'loading-text',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'loading-text',
+          component: 'Text',
+          text: 'Loading...',
+          variant: 'body',
+        },
+      ],
+    },
+  },
+];
+
+export const secondStageMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'title-text',
+            'loading-text',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'title-text',
+          component: 'Text',
+          text: 'Welcome to A2UI Demo',
+          variant: 'h1',
+        },
+        {
+          id: 'loading-text',
+          component: 'Text',
+          text: 'Loading more content...',
+          variant: 'body',
+        },
+      ],
+    },
+  },
+];
+
+export const thirdStageMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'title-text',
+            'description-text',
+            'loading-text',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'description-text',
+          component: 'Text',
+          text: 'This is a ReactLynx A2UI demonstration',
+          variant: 'body',
+        },
+        {
+          id: 'loading-text',
+          component: 'Text',
+          text: 'Almost done...',
+          variant: 'body',
+        },
+      ],
+    },
+  },
+];
+
+export const finalStageMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'content-column',
+          component: 'Column',
+          children: [
+            'title-text',
+            'description-text',
+            'action-button',
+          ],
+          align: 'center',
+        },
+        {
+          id: 'action-button',
+          component: 'Button',
+          variant: 'primary',
+          child: 'button-text',
+          action: {
+            event: {
+              name: 'button_click',
+              context: { message: 'Hello from A2UI!' },
+            },
+          },
+        },
+        {
+          id: 'button-text',
+          component: 'Text',
+          text: 'Click Me',
+        },
+      ],
+    },
+  },
+];
+
+export const buttonClickMessages: ServerToClientMessage[] = [
+  {
+    version: 'v0.9',
+    updateComponents: {
+      surfaceId: 'main',
+      components: [
+        {
+          id: 'button-text',
+          component: 'Text',
+          text: 'Clicked!',
+        },
+      ],
+    },
+  },
+];

package/cli/templates/default/src/rspeedy-env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="@lynx-js/rspeedy/client" />
+
+declare module '@lynx-js/types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface GlobalProps {
+    /**
+     * Define your global properties in this interface.
+     * These types will be accessible through `lynx.__globalProps`.
+     */
+  }
+}
+
+// This export makes the file a module
+export {};

package/cli/templates/default/src/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+
+    "lib": ["es2015"],
+
+    "noEmit": true,
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+}

package/cli/templates/default/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+  },
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./src" },
+  ],
+  "files": [],
+}

package/cli/templates/default/tsconfig.node.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+
+    "module": "node16",
+    "moduleResolution": "node16",
+    "erasableSyntaxOnly": true,
+
+    "lib": ["es2023"],
+    "target": "es2022",
+
+    "noEmit": true,
+  },
+  "include": ["./lynx.config.ts"],
+}