@bardioc/create-bardioc-app 0.4.0 → 0.5.1

package/templates/vite/src/graph/explorer-view.tsx

@@ -0,0 +1,118 @@
+import { isInsideIframe } from '@bardioc/app-sdk/dev';
+import { useSdk } from '@bardioc/app-sdk/react';
+import { Badge, Button, Card } from '@bardioc/ui/components';
+import { useState } from 'react';
+import { useTranslation } from '../i18n';
+import { useAppNotify } from '../use-app-notify';
+import { SDK_REQUESTS, type SdkRequest } from './requests';
+
+type Result =
+  | { status: 'idle' }
+  | { status: 'running' }
+  | { status: 'done'; live: boolean; ms: number; data: unknown };
+
+export function ExplorerView() {
+  const { t } = useTranslation();
+  const bridge = useSdk();
+  const notify = useAppNotify();
+  const [activeId, setActiveId] = useState(SDK_REQUESTS[0].id);
+  const [result, setResult] = useState<Result>({ status: 'idle' });
+
+  const active = SDK_REQUESTS.find(request => request.id === activeId) ?? SDK_REQUESTS[0];
+
+  async function run(request: SdkRequest) {
+    setActiveId(request.id);
+    setResult({ status: 'running' });
+    const started = Date.now();
+    try {
+      const data = await request.run(bridge);
+      const ms = Date.now() - started;
+      setResult({ status: 'done', live: true, ms, data });
+      notify(t('notify.queryOk', { fallback: 'Request ok ({ms} ms)', params: { ms } }), 'success');
+    } catch {
+      const ms = Date.now() - started;
+      setResult({ status: 'done', live: false, ms, data: request.mock() });
+      notify(
+        t('notify.queryFailed', { fallback: 'Request failed — showing simulated data' }),
+        'warning'
+      );
+    }
+  }
+
+  return (
+    <div className="flex h-full min-w-0 flex-col gap-3">
+      <div>
+        <h2 className="text-lg font-semibold">
+          {t('explorer.title', { fallback: 'Graph Explorer' })}
+        </h2>
+        <p className="text-muted-foreground text-xs">
+          {t('explorer.description', { fallback: '' })}
+        </p>
+      </div>
+
+      <div className="grid min-w-0 gap-3 lg:grid-cols-[minmax(0,240px)_minmax(0,1fr)]">
+        <div className="flex min-w-0 flex-col gap-1">
+          {SDK_REQUESTS.map(request => (
+            <button
+              key={request.id}
+              onClick={() => setActiveId(request.id)}
+              className={`flex min-w-0 items-center justify-between gap-2 rounded border px-2 py-1.5 text-left font-mono text-xs ${
+                request.id === activeId
+                  ? 'border-primary bg-muted'
+                  : 'border-border hover:bg-muted/50'
+              }`}
+            >
+              <span className="truncate">{request.label}</span>
+              <Badge variant={request.category === 'graph' ? 'info' : 'secondary'} numerical>
+                {t(`explorer.category${request.category === 'graph' ? 'Graph' : 'Os'}`, {
+                  fallback: request.category,
+                })}
+              </Badge>
+            </button>
+          ))}
+        </div>
+
+        <Card className="min-h-0 min-w-0">
+          <div className="flex h-full min-h-0 min-w-0 flex-col gap-2">
+            <div className="flex min-w-0 items-center justify-between gap-2">
+              <span className="text-muted-foreground truncate font-mono text-xs">
+                {active.label}
+              </span>
+              <Button
+                size="sm"
+                onClick={() => void run(active)}
+                disabled={result.status === 'running'}
+              >
+                {result.status === 'running'
+                  ? t('explorer.running', { fallback: 'Running…' })
+                  : t('explorer.run', { fallback: 'Run request' })}
+              </Button>
+            </div>
+
+            {result.status === 'done' && (
+              <div className="flex items-center gap-2 text-xs">
+                <Badge variant={result.live ? 'success' : 'warning'}>
+                  {result.live
+                    ? t('explorer.live', { fallback: 'Live' })
+                    : t('explorer.mock', { fallback: 'Simulated' })}
+                </Badge>
+                <span className="text-muted-foreground">
+                  {t('explorer.durationMs', { fallback: '{ms} ms', params: { ms: result.ms } })}
+                </span>
+                {!isInsideIframe() && <span className="text-muted-foreground">· standalone</span>}
+              </div>
+            )}
+
+            <pre className="bg-muted/40 text-foreground min-h-40 flex-1 overflow-auto rounded p-3 text-[11px] leading-5">
+              {result.status === 'done'
+                ? JSON.stringify(result.data, null, 2)
+                : t('explorer.empty', {
+                    fallback: 'Select a request and run it to see the response',
+                  })}
+            </pre>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/vite/src/graph/requests.ts

@@ -0,0 +1,142 @@
+import type { HostBridge } from '@bardioc/app-sdk';
+
+export type RequestCategory = 'graph' | 'os';
+
+export interface SdkRequest {
+  id: string;
+  category: RequestCategory;
+  label: string;
+  run: (bridge: HostBridge) => Promise<unknown>;
+  mock: () => unknown;
+}
+
+interface GraphNode {
+  'ogit/_id'?: string;
+  'ogit/_type'?: string;
+}
+
+// graph.query resolves to either a bare array or a { items: [...] } envelope depending on the
+// backend. Normalize so the lookup/traversal presets can pull a real id and type from live data
+// instead of hard-coding ids/types that may not exist in a given instance.
+function toItems(result: unknown): GraphNode[] {
+  if (Array.isArray(result)) {
+    return result as GraphNode[];
+  }
+  if (
+    result &&
+    typeof result === 'object' &&
+    Array.isArray((result as { items?: unknown }).items)
+  ) {
+    return (result as { items: GraphNode[] }).items;
+  }
+  return [];
+}
+
+async function sampleNodes(bridge: HostBridge, limit: number): Promise<GraphNode[]> {
+  return toItems(await bridge.transport.graph.query<GraphNode>('*', { limit }));
+}
+
+// The full surface a hosted app can reach over the SDK transport. Each `run` issues a real call
+// against the live instance; `mock` returns a shape-representative fallback so the Explorer still
+// works offline. The graph calls mirror what the Graph Explorer app issues: a wildcard query, a
+// query by a type that actually exists, a node lookup, and a Gremlin neighbor traversal — the
+// lookup/traversal presets discover a real node from the wildcard query first, so nothing is
+// hard-coded to a specific instance.
+export const SDK_REQUESTS: SdkRequest[] = [
+  {
+    id: 'graph.query.all',
+    category: 'graph',
+    label: "graph.query('*', { limit: 10 })",
+    run: bridge => bridge.transport.graph.query('*', { limit: 10 }),
+    mock: () => ({
+      items: [
+        {
+          'ogit/_id': 'cmexample_app-1',
+          'ogit/_type': 'ogit/Auth/Application',
+          'ogit/name': 'Sample application',
+        },
+      ],
+    }),
+  },
+  {
+    id: 'graph.query.type',
+    category: 'graph',
+    label: String.raw`graph.query('ogit\/_type:"<first result type>"', { limit: 5 })`,
+    run: async bridge => {
+      const [first] = await sampleNodes(bridge, 1);
+      const type = first?.['ogit/_type'];
+      if (!type) {
+        return [];
+      }
+      const escapedType = type.replaceAll('/', String.raw`\/`);
+      return bridge.transport.graph.query(String.raw`ogit\/_type:"${escapedType}"`, { limit: 5 });
+    },
+    mock: () => ({
+      items: [
+        {
+          'ogit/_id': 'cmexample_var-1',
+          'ogit/_type': 'ogit/Automation/Variable',
+          'ogit/name': 'Sample variable',
+        },
+      ],
+    }),
+  },
+  {
+    id: 'graph.get',
+    category: 'graph',
+    label: 'graph.get(firstNodeId)',
+    run: async bridge => {
+      const [first] = await sampleNodes(bridge, 1);
+      const id = first?.['ogit/_id'];
+      if (!id) {
+        return null;
+      }
+      return bridge.transport.graph.get(id);
+    },
+    mock: () => ({
+      'ogit/_id': 'cmexample_app-1',
+      'ogit/_type': 'ogit/Auth/Application',
+      'ogit/name': 'Sample application',
+    }),
+  },
+  {
+    id: 'graph.gremlin',
+    category: 'graph',
+    label: "graph.gremlin(nodeId, 'both()')",
+    // `both()` returns adjacent vertices in either direction. Replace this id with a connected
+    // node from your own instance — many nodes (e.g. config vertices) have no traversable edges.
+    run: bridge =>
+      bridge.transport.graph.gremlin(
+        'cjohdg6y80000ai48sw7swsq0_cmm2b2jz3t6dq0110poeobock',
+        'both()'
+      ),
+    mock: () => [
+      {
+        'ogit/_id': 'cmexample_node-2',
+        'ogit/_type': 'ogit/Automation/Variable',
+        edge: 'ogit/uses',
+      },
+    ],
+  },
+  {
+    id: 'os.profile',
+    category: 'os',
+    label: 'os.profile.get()',
+    run: bridge => bridge.transport.os.profile.get(),
+    mock: () => ({ id: 'usr-demo', email: 'operator@bardioc.dev', name: 'Demo Operator' }),
+  },
+  {
+    id: 'os.organization',
+    category: 'os',
+    label: 'os.organization.getStructure()',
+    run: bridge => bridge.transport.os.organization.getStructure(),
+    mock: () => ({ id: 'org-demo', name: 'Bardioc Climate Corp', units: [], members: [] }),
+  },
+  {
+    id: 'os.applications',
+    category: 'os',
+    label: 'os.applications.list()',
+    run: bridge => bridge.transport.os.applications.list(),
+    mock: () => [{ id: 'app-demo', name: 'Climate Dashboard', version: '0.0.1' }],
+  },
+];

package/templates/vite/src/i18n.tsx

@@ -0,0 +1,68 @@
+import { useOsConfig } from '@bardioc/app-sdk/react';
+import {
+  I18nProvider as BaseI18nProvider,
+  mergeTranslations,
+  useI18n,
+  type I18nConfig,
+  type TranslationMessages,
+} from '@bardioc/i18n';
+import { deMessages as baseDe, enMessages as baseEn } from '@bardioc/i18n/translations';
+import { SUPPORTED_LOCALES, type Locale } from '@bardioc/types';
+import { useEffect, useMemo, type ReactNode } from 'react';
+import deMessages from './locales/de.json';
+import enMessages from './locales/en.json';
+
+// Layer the app's strings over the @bardioc base bundle so built-in @bardioc/ui component text
+// (table pagination, combobox, sidebar, window controls, …) is translated too. App keys win.
+const DEFAULT_MESSAGES: Record<Locale, TranslationMessages> = {
+  en: mergeTranslations(baseEn, enMessages),
+  de: mergeTranslations(baseDe, deMessages),
+};
+
+const STORAGE_KEY = '{{APP_NAME}}.locale';
+
+function isSupportedLocale(locale: string | null | undefined): locale is Locale {
+  return typeof locale === 'string' && SUPPORTED_LOCALES.includes(locale as Locale);
+}
+
+function OsLocaleSync() {
+  const osConfig = useOsConfig();
+  const { setLocale } = useI18n();
+  const osLanguage = osConfig?.language;
+
+  // React only to OS language changes — depending on the local locale would revert a manual
+  // switch made via the in-app language switcher.
+  useEffect(() => {
+    if (isSupportedLocale(osLanguage)) {
+      setLocale(osLanguage);
+    }
+  }, [osLanguage, setLocale]);
+
+  return null;
+}
+
+interface AppI18nProviderProps {
+  children: ReactNode;
+  syncWithOs?: boolean;
+}
+
+export function AppI18nProvider({ children, syncWithOs = false }: Readonly<AppI18nProviderProps>) {
+  const config = useMemo<I18nConfig<Locale>>(
+    () => ({
+      defaultLocale: 'en',
+      supportedLocales: [...SUPPORTED_LOCALES],
+      defaultMessages: DEFAULT_MESSAGES,
+      storageKey: STORAGE_KEY,
+    }),
+    []
+  );
+
+  return (
+    <BaseI18nProvider config={config}>
+      {syncWithOs ? <OsLocaleSync /> : null}
+      {children}
+    </BaseI18nProvider>
+  );
+}
+
+export { useI18n, useTranslation } from '@bardioc/i18n';

package/templates/vite/src/index.css

@@ -1,76 +1,24 @@
 @import 'tailwindcss';
+@import '@bardioc/ui/styles/theme.css';
+@import '@bardioc/ui/styles/components.css';
+
+@source './**/*.{ts,tsx}';
 
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 html,
 body,
 #root {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-:root {
-  --background: oklch(17.88% 0.0075 229.38);
-  --foreground: oklch(98.69% 0.0093 99.98);
-  --muted-foreground: oklch(86.03% 0.0056 95.11);
-  --border: oklch(1 0 0 / 10%);
-  --primary: oklch(97.02% 0 0);
-  --primary-foreground: oklch(36.94% 0.0053 236.64);
-  --destructive: oklch(68.04% 0.1386 21.38);
-  --ring: oklch(79.43% 0.0084 98.91);
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: system-ui, -apple-system, sans-serif;
-}
-
-code {
-  font-family: inherit;
-}
-
-.bg-background {
-  background-color: var(--background);
-}
-
-.text-foreground {
-  color: var(--foreground);
-}
-
-.text-muted-foreground {
-  color: var(--muted-foreground);
-}
-
-.border-border {
-  border-color: var(--border);
-}
-
-.bg-primary {
-  background-color: var(--primary);
-}
-
-.text-primary-foreground {
-  color: var(--primary-foreground);
-}
-
-.text-destructive {
-  color: var(--destructive);
-}
-
-.focus\:ring-ring:focus {
-  --tw-ring-color: var(--ring);
-}
-
-.hover\:bg-primary\/90:hover {
-  background-color: oklch(from var(--primary) calc(l * 0.9) c h);
-}
-
-.hover\:text-foreground:hover {
-  color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }

package/templates/vite/src/locales/de.json

@@ -0,0 +1,141 @@
+{
+  "app": { "title": "Wetter-Dashboard", "tagline": "Planetare Messwerte in Echtzeit" },
+  "nav": {
+    "overview": "Übersicht",
+    "stations": "Stationen",
+    "explorer": "Graph-Explorer",
+    "events": "Live-Ereignisse",
+    "profile": "Profil"
+  },
+  "menu": {
+    "view": "Ansicht",
+    "about": "Über diese App"
+  },
+  "about": {
+    "title": "Über diese App",
+    "version": "Version",
+    "id": "App-ID",
+    "description": "Beschreibung",
+    "permissions": "Berechtigungen",
+    "error": "app-manifest.json konnte nicht gelesen werden",
+    "source": "Live aus public/app-manifest.json gelesen"
+  },
+  "genericTable": {
+    "filterPlaceholder": "Ergebnisse filtern...",
+    "itemLabel": "Zeilen",
+    "showing": "{from} bis {to} von {total}",
+    "columns": "Spalten",
+    "noResults": "Keine Ergebnisse gefunden.",
+    "goToPreviousPage": "Zur vorherigen Seite",
+    "goToNextPage": "Zur nächsten Seite"
+  },
+  "common": { "button": { "previous": "Zurück", "next": "Weiter" } },
+  "header": {
+    "search": "Stationen suchen…",
+    "sync": "Sync",
+    "syncing": "Synchronisiere…",
+    "location": "Station",
+    "savedAt": "Gespeichert {time}",
+    "neverSaved": "Noch nicht gespeichert"
+  },
+  "auth": {
+    "title": "Mit Bardioc OS verbinden",
+    "description": "Dieses Dashboard liest Live-Daten über den Bardioc-SDK-Transport. Es läuft in Bardioc OS oder eigenständig mit einer CLI-Dev-Session.",
+    "stepsTitle": "Eigenständig mit Dev-Session ausführen:",
+    "step1": "Setze VITE_ENABLE_DEV_AUTH=true und DEV_AUTH_HOST_URL=<dein-host> in .env",
+    "step2": "Einmal im App-Ordner autorisieren:",
+    "step3": "Dev-Server starten — der Session-Key wird automatisch erzeugt und erneuert:",
+    "detectedTitle": "Erkannte Umgebung",
+    "insideHost": "Im Host-Iframe",
+    "devAuth": "Dev-Auth aktiviert",
+    "yes": "ja",
+    "no": "nein",
+    "retry": "Neu laden"
+  },
+  "overview": {
+    "operator": "Betreiber",
+    "noOperator": "Betreiber nicht verfügbar",
+    "updated": "Aktualisiert {time}",
+    "persistence": "In IndexedDB gespeichert",
+    "notPersisted": "Vorschau — nicht gespeichert (in Bardioc OS öffnen zum Speichern)",
+    "historyOne": "{count} Snapshot im Verlauf",
+    "historyOther": "{count} Snapshots im Verlauf",
+    "source": "Quelle"
+  },
+  "conditions": { "sunny": "Sonnig", "cloudy": "Bewölkt", "rainy": "Regnerisch" },
+  "source": { "graph": "Bardioc-Graph", "mock": "Simuliert" },
+  "metrics": {
+    "oxygen": "Sauerstoff",
+    "temperature": "Oberflächentemp.",
+    "humidity": "Luftfeuchte",
+    "windSpeed": "Windgeschw.",
+    "vegetation": "Vegetation",
+    "oxygenHint": "Atmosphärenmix",
+    "temperatureHint": "Bodennähe",
+    "humidityHint": "Relativ",
+    "windSpeedHint": "Anhaltend",
+    "vegetationHint": "Oberflächendeckung"
+  },
+  "chart": { "title": "7-Tage-Ausblick", "description": "Sonnenstunden nach Wetterlage" },
+  "stations": {
+    "title": "Messstationen",
+    "description": "Alle Stationen dieser Instanz. Suchen, filtern oder auswählen.",
+    "search": "Stationen suchen…",
+    "filter": "Wetterlage",
+    "colName": "Station",
+    "colRegion": "Region",
+    "colCondition": "Wetterlage",
+    "colTemp": "Temp",
+    "colHumidity": "Feuchte",
+    "colVegetation": "Vegetation",
+    "itemLabel": "Stationen",
+    "empty": "Keine Stationen passen zu den Filtern",
+    "apply": "Anwenden",
+    "clear": "Zurücksetzen"
+  },
+  "explorer": {
+    "title": "Graph-Explorer",
+    "description": "Führe echte Bardioc-SDK-Transport-Anfragen aus. Ohne Session greift jede Anfrage auf simulierte Daten zurück.",
+    "run": "Anfrage ausführen",
+    "running": "Läuft…",
+    "empty": "Wähle eine Anfrage und führe sie aus, um die Antwort zu sehen",
+    "live": "Live",
+    "mock": "Simuliert",
+    "categoryGraph": "Graph",
+    "categoryOs": "OS",
+    "request": "Anfrage",
+    "durationMs": "{ms} ms"
+  },
+  "profile": {
+    "title": "Betreiberprofil",
+    "description": "Live aus dem OS-Transport geladen (os.profile).",
+    "name": "Name",
+    "displayName": "Anzeigename",
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "email": "E-Mail",
+    "id": "ID",
+    "organization": "Organisation",
+    "units": "Einheiten",
+    "members": "Mitglieder",
+    "raw": "Rohantwort",
+    "errorTitle": "Profil konnte nicht geladen werden",
+    "errorHint": "Der Transport meldete einen Fehler. Autorisiere eine Session und lade neu.",
+    "unknown": "Unbekannt"
+  },
+  "events": {
+    "title": "Live-Ereignisse",
+    "description": "Live-Graph-Ereignisse, vom OS über SSE gestreamt (Berechtigung \"events\").",
+    "emptyTitle": "Warte auf Ereignisse",
+    "emptyHost": "Noch keine Graph-Ereignisse — Aktivität erscheint hier, sobald sie auftritt.",
+    "emptyStandalone": "In Bardioc OS (oder einer Dev-Session) öffnen, um Live-Ereignisse zu empfangen."
+  },
+  "notify": {
+    "synced": "{count} Stationen synchronisiert",
+    "saved": "In IndexedDB gespeichert",
+    "stationSelected": "Aktive Station: {name}",
+    "localeChanged": "Sprache gewechselt zu {locale}",
+    "queryOk": "Anfrage ok ({ms} ms)",
+    "queryFailed": "Anfrage fehlgeschlagen — zeige simulierte Daten"
+  }
+}