@bardioc/create-bardioc-app 0.4.0 → 0.5.1

package/templates/vite/src/climate/conditions-chart.tsx

@@ -0,0 +1,38 @@
+import { BarChartMultiple } from '@bardioc/ui/components/charts';
+import type { ChartConfig } from '@bardioc/ui/shadcn/chart';
+import { useTranslation } from '../i18n';
+import type { ForecastDay } from './types';
+
+interface ConditionsChartProps {
+  forecast: ForecastDay[];
+}
+
+export function ConditionsChart({ forecast }: Readonly<ConditionsChartProps>) {
+  const { t } = useTranslation();
+
+  const chartConfig: ChartConfig = {
+    sunny: { label: t('conditions.sunny', { fallback: 'Sunny' }), color: 'var(--chart-2)' },
+    cloudy: { label: t('conditions.cloudy', { fallback: 'Cloudy' }), color: 'var(--chart-4)' },
+    rainy: { label: t('conditions.rainy', { fallback: 'Rainy' }), color: 'var(--chart-1)' },
+  };
+
+  const seriesData = forecast.map(
+    (entry): Record<string, string | number> => ({
+      day: entry.day,
+      sunny: entry.sunny,
+      cloudy: entry.cloudy,
+      rainy: entry.rainy,
+    })
+  );
+
+  return (
+    <BarChartMultiple
+      seriesData={seriesData}
+      xKey="day"
+      chartConfig={chartConfig}
+      title={t('chart.title', { fallback: '7-day outlook' })}
+      description={t('chart.description', { fallback: 'Daylight hours by condition' })}
+      heightClass="h-[220px]"
+    />
+  );
+}

package/templates/vite/src/climate/location-card.tsx

@@ -0,0 +1,50 @@
+import { Badge, BadgeStatus, Card } from '@bardioc/ui/components';
+import { Cloud, CloudRain, Sun, type LucideIcon } from 'lucide-react';
+import { useTranslation } from '../i18n';
+import type { Condition, DataSource, Station } from './types';
+
+type StatusVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+
+const CONDITION: Record<Condition, { icon: LucideIcon; status: StatusVariant }> = {
+  sunny: { icon: Sun, status: 'warning' },
+  cloudy: { icon: Cloud, status: 'neutral' },
+  rainy: { icon: CloudRain, status: 'info' },
+};
+
+interface LocationCardProps {
+  station: Station;
+  updatedAt: number;
+  source: DataSource;
+}
+
+export function LocationCard({ station, updatedAt, source }: Readonly<LocationCardProps>) {
+  const { t } = useTranslation();
+  const condition = CONDITION[station.condition];
+  const Icon = condition.icon;
+  const time = new Date(updatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  return (
+    <Card>
+      <div className="flex items-center gap-4">
+        <div className="bg-muted text-foreground flex size-12 shrink-0 items-center justify-center rounded-full">
+          <Icon className="size-6" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-lg font-semibold">{station.name}</div>
+          <div className="text-muted-foreground truncate text-xs">{station.region}</div>
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1">
+          <BadgeStatus variant={condition.status}>
+            {t(`conditions.${station.condition}`, { fallback: station.condition })}
+          </BadgeStatus>
+          <span className="text-muted-foreground text-xs">
+            {t('overview.updated', { fallback: 'Updated {time}', params: { time } })}
+          </span>
+          <Badge variant={source === 'graph' ? 'success' : 'secondary'}>
+            {t(`source.${source}`, { fallback: source })}
+          </Badge>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/templates/vite/src/climate/location-select.tsx

@@ -0,0 +1,26 @@
+import { Combobox } from '@bardioc/ui/components';
+import { useTranslation } from '../i18n';
+import type { Station } from './types';
+
+interface LocationSelectProps {
+  stations: Station[];
+  value: string;
+  onSelect: (id: string) => void;
+}
+
+export function LocationSelect({ stations, value, onSelect }: Readonly<LocationSelectProps>) {
+  const { t } = useTranslation();
+  const nameById = new Map(stations.map(station => [station.id, station.name]));
+
+  return (
+    <Combobox
+      items={stations.map(station => station.id)}
+      value={value}
+      onValueChange={next => onSelect(next as string)}
+      itemToStringValue={item => item as string}
+      itemToStringLabel={item => nameById.get(item as string) ?? (item as string)}
+      placeholder={t('header.location', { fallback: 'Station' })}
+      className="h-8 w-52"
+    />
+  );
+}

package/templates/vite/src/climate/metrics-grid.tsx

@@ -0,0 +1,22 @@
+import { GenericMetrics } from '@bardioc/ui/components/metrics';
+import { useTranslation } from '../i18n';
+import { METRICS, type ClimateReading } from './types';
+
+interface MetricsGridProps {
+  reading: ClimateReading;
+}
+
+export function MetricsGrid({ reading }: Readonly<MetricsGridProps>) {
+  const { t } = useTranslation();
+
+  const metrics = METRICS.map(def => ({
+    title: t(def.labelKey, { fallback: def.key }),
+    value: reading[def.key],
+    icon: def.icon,
+    description: t(def.hintKey, { fallback: '' }),
+    formatValue: (value: number) => `${value}${def.unit}`,
+    color: def.color,
+  }));
+
+  return <GenericMetrics metrics={metrics} className="grid grid-cols-2 gap-3 md:grid-cols-5" />;
+}

package/templates/vite/src/climate/overview-view.tsx

@@ -0,0 +1,52 @@
+import { Database } from 'lucide-react';
+import { useDashboard } from '../dashboard-provider';
+import { useTranslation } from '../i18n';
+import { ConditionsChart } from './conditions-chart';
+import { LocationCard } from './location-card';
+import { MetricsGrid } from './metrics-grid';
+
+export function OverviewView() {
+  const { t } = useTranslation();
+  const { state, activeStation, historyCount, persisted } = useDashboard();
+
+  if (!state || !activeStation) return null;
+
+  const savedTime = new Date(state.updatedAt).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <LocationCard station={activeStation} updatedAt={state.updatedAt} source={state.source} />
+      <MetricsGrid reading={activeStation.reading} />
+      <ConditionsChart forecast={state.forecast} />
+
+      <div className="text-muted-foreground flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
+        <Database className="size-3.5" />
+        {persisted ? (
+          <>
+            <span>{t('overview.persistence', { fallback: 'Persisted to IndexedDB' })}</span>
+            <span>·</span>
+            <span>
+              {t('header.savedAt', { fallback: 'Saved {time}', params: { time: savedTime } })}
+            </span>
+            <span>·</span>
+            <span>
+              {t('overview.historyOther', {
+                fallback: '{count} snapshots in history',
+                params: { count: historyCount },
+              })}
+            </span>
+          </>
+        ) : (
+          <span>
+            {t('overview.notPersisted', {
+              fallback: 'Preview — not persisted (open inside Bardioc OS to persist)',
+            })}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/vite/src/climate/stations-view.tsx

@@ -0,0 +1,149 @@
+import {
+  BadgeStatus,
+  CheckboxGroup,
+  DataTable,
+  FilterDropdown,
+  SortableColumnHeader,
+  TruncatedCellText,
+} from '@bardioc/ui/components';
+import type { TReactTable } from '@bardioc/ui/types';
+import { useMemo, useState } from 'react';
+import { useDashboard } from '../dashboard-provider';
+import { useTranslation } from '../i18n';
+import type { Condition, Station } from './types';
+
+const CONDITIONS: Condition[] = ['sunny', 'cloudy', 'rainy'];
+const STATUS: Record<Condition, 'neutral' | 'info' | 'success' | 'warning' | 'error'> = {
+  sunny: 'warning',
+  cloudy: 'neutral',
+  rainy: 'info',
+};
+
+interface ConditionFilterProps {
+  selected: Condition[];
+  onToggle: (condition: Condition) => void;
+}
+
+function ConditionFilter({ selected, onToggle }: Readonly<ConditionFilterProps>) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const label = t('stations.filter', { fallback: 'Condition' });
+
+  return (
+    <FilterDropdown
+      immediate
+      open={open}
+      setOpen={setOpen}
+      buttonLabel={selected.length ? `${label} (${selected.length})` : label}
+      sections={[
+        {
+          id: 'condition',
+          title: label,
+          content: (
+            <CheckboxGroup
+              className="gap-3 capitalize"
+              items={CONDITIONS.map(condition => ({
+                id: condition,
+                label: t(`conditions.${condition}`, { fallback: condition }),
+                checked: selected.includes(condition),
+                onCheckedChange: () => onToggle(condition),
+              }))}
+            />
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+export function StationsView() {
+  const { t } = useTranslation();
+  const { state, setActiveStation } = useDashboard();
+  const [conditions, setConditions] = useState<Condition[]>([]);
+
+  const onToggle = (condition: Condition) =>
+    setConditions(prev =>
+      prev.includes(condition) ? prev.filter(item => item !== condition) : [...prev, condition]
+    );
+
+  const columns = useMemo<TReactTable.ColumnDef<Station>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        enableSorting: true,
+        header: ({ column }) => (
+          <SortableColumnHeader
+            label={t('stations.colName', { fallback: 'Station' })}
+            column={column}
+          />
+        ),
+        cell: ({ row }) => <TruncatedCellText value={row.original.name} />,
+      },
+      {
+        accessorKey: 'region',
+        header: () => t('stations.colRegion', { fallback: 'Region' }),
+        cell: ({ row }) => <TruncatedCellText value={row.original.region} />,
+      },
+      {
+        accessorKey: 'condition',
+        header: () => t('stations.colCondition', { fallback: 'Condition' }),
+        cell: ({ row }) => (
+          <BadgeStatus variant={STATUS[row.original.condition]}>
+            {t(`conditions.${row.original.condition}`, { fallback: row.original.condition })}
+          </BadgeStatus>
+        ),
+      },
+      {
+        id: 'temp',
+        header: () => t('stations.colTemp', { fallback: 'Temp' }),
+        cell: ({ row }) => `${row.original.reading.temperature}°C`,
+      },
+      {
+        id: 'humidity',
+        header: () => t('stations.colHumidity', { fallback: 'Humidity' }),
+        cell: ({ row }) => `${row.original.reading.humidity}%`,
+      },
+      {
+        id: 'vegetation',
+        header: () => t('stations.colVegetation', { fallback: 'Vegetation' }),
+        cell: ({ row }) => `${row.original.reading.vegetation}%`,
+      },
+    ],
+    [t]
+  );
+
+  if (!state) return null;
+
+  const data = conditions.length
+    ? state.stations.filter(station => conditions.includes(station.condition))
+    : state.stations;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div>
+        <h2 className="text-lg font-semibold">
+          {t('stations.title', { fallback: 'Monitoring stations' })}
+        </h2>
+        <p className="text-muted-foreground text-xs">
+          {t('stations.description', { fallback: '' })}
+        </p>
+      </div>
+      <DataTable
+        boxed
+        data={data}
+        columns={columns}
+        filterKey={['name', 'region']}
+        showSearchBar
+        filterPlaceholder={t('stations.search', { fallback: 'Search stations…' })}
+        itemLabel={t('stations.itemLabel', { fallback: 'stations' })}
+        onRowClick={station => setActiveStation(station.id)}
+        filterSlot={<ConditionFilter selected={conditions} onToggle={onToggle} />}
+        emptyState={
+          <p className="text-muted-foreground p-6 text-center text-sm">
+            {t('stations.empty', { fallback: 'No stations match your filters' })}
+          </p>
+        }
+      />
+    </div>
+  );
+}

package/templates/vite/src/climate/types.ts

@@ -0,0 +1,93 @@
+import { Droplets, Gauge, Leaf, Thermometer, Wind, type LucideIcon } from 'lucide-react';
+
+export type Condition = 'sunny' | 'cloudy' | 'rainy';
+export type ViewId = 'overview' | 'stations' | 'explorer' | 'events' | 'profile';
+export type DataSource = 'graph' | 'mock';
+
+export interface ClimateReading {
+  oxygen: number;
+  temperature: number;
+  humidity: number;
+  windSpeed: number;
+  vegetation: number;
+}
+
+export interface Station {
+  id: string;
+  name: string;
+  region: string;
+  condition: Condition;
+  reading: ClimateReading;
+  reference: ClimateReading;
+}
+
+export interface ForecastDay {
+  day: string;
+  sunny: number;
+  cloudy: number;
+  rainy: number;
+}
+
+export interface ClimateState {
+  stations: Station[];
+  activeStationId: string;
+  forecast: ForecastDay[];
+  updatedAt: number;
+  source: DataSource;
+}
+
+export interface MetricDef {
+  key: keyof ClimateReading;
+  labelKey: string;
+  hintKey: string;
+  icon: LucideIcon;
+  unit: string;
+  color: string;
+}
+
+export const METRICS: MetricDef[] = [
+  {
+    key: 'oxygen',
+    labelKey: 'metrics.oxygen',
+    hintKey: 'metrics.oxygenHint',
+    icon: Gauge,
+    unit: '%',
+    color: 'text-yellow-500',
+  },
+  {
+    key: 'temperature',
+    labelKey: 'metrics.temperature',
+    hintKey: 'metrics.temperatureHint',
+    icon: Thermometer,
+    unit: '°C',
+    color: 'text-red-500',
+  },
+  {
+    key: 'humidity',
+    labelKey: 'metrics.humidity',
+    hintKey: 'metrics.humidityHint',
+    icon: Droplets,
+    unit: '%',
+    color: 'text-blue-500',
+  },
+  {
+    key: 'windSpeed',
+    labelKey: 'metrics.windSpeed',
+    hintKey: 'metrics.windSpeedHint',
+    icon: Wind,
+    unit: 'km/h',
+    color: 'text-[var(--chart-4)]',
+  },
+  {
+    key: 'vegetation',
+    labelKey: 'metrics.vegetation',
+    hintKey: 'metrics.vegetationHint',
+    icon: Leaf,
+    unit: '%',
+    color: 'text-green-500',
+  },
+];
+
+export const IDB_STORE = 'climate';
+export const IDB_STATE_KEY = 'state';
+export const IDB_LOG_PREFIX = 'log:';

package/templates/vite/src/climate/use-climate.ts

@@ -0,0 +1,123 @@
+import { useSdk } from '@bardioc/app-sdk/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from '../i18n';
+import { useAppNotify } from '../use-app-notify';
+import { generateState, syncState } from './climate-data';
+import { IDB_LOG_PREFIX, IDB_STATE_KEY, IDB_STORE, type ClimateState } from './types';
+
+export function useClimate() {
+  const bridge = useSdk();
+  const notify = useAppNotify();
+  const { t } = useTranslation();
+  const store = useMemo(() => bridge.idb(IDB_STORE), [bridge]);
+
+  const [state, setState] = useState<ClimateState | null>(null);
+  const [syncing, setSyncing] = useState(false);
+  const [historyCount, setHistoryCount] = useState(0);
+  const [persisted, setPersisted] = useState(false);
+
+  const refreshHistory = useCallback(async () => {
+    const logs = await store.query({ prefix: IDB_LOG_PREFIX, limit: 100 }).catch(() => []);
+    setHistoryCount(logs.length);
+  }, [store]);
+
+  const persist = useCallback(
+    async (next: ClimateState) => {
+      const ok = await store
+        .put(IDB_STATE_KEY, next)
+        .then(() => true)
+        .catch(() => false);
+      if (ok) {
+        await store
+          .put(`${IDB_LOG_PREFIX}${next.updatedAt}`, { at: next.updatedAt, source: next.source })
+          .catch(() => undefined);
+        await refreshHistory();
+      }
+      setPersisted(ok);
+      return ok;
+    },
+    [refreshHistory, store]
+  );
+
+  useEffect(() => {
+    let active = true;
+    void (async () => {
+      const raw = await store.get<unknown>(IDB_STATE_KEY).catch(() => null);
+      const saved =
+        raw !== null &&
+        raw !== undefined &&
+        typeof raw === 'object' &&
+        Array.isArray((raw as ClimateState).stations)
+          ? (raw as ClimateState)
+          : null;
+      const next = saved ?? generateState();
+      if (saved) {
+        setPersisted(true);
+        await refreshHistory();
+      } else {
+        await persist(next);
+      }
+      if (active) setState(next);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [persist, refreshHistory, store]);
+
+  const refresh = useCallback(async () => {
+    setSyncing(true);
+    try {
+      let source: ClimateState['source'] = 'graph';
+      try {
+        await bridge.transport.os.profile.get();
+      } catch {
+        source = 'mock';
+      }
+
+      const raw = await store.get<unknown>(IDB_STATE_KEY).catch(() => null);
+      const saved =
+        raw !== null &&
+        raw !== undefined &&
+        typeof raw === 'object' &&
+        Array.isArray((raw as ClimateState).stations)
+          ? (raw as ClimateState)
+          : null;
+
+      const next = saved ? syncState(saved, source) : generateState(undefined, source);
+      await persist(next);
+      setState(next);
+
+      notify(
+        t('notify.synced', {
+          fallback: 'Synced {count} stations',
+          params: { count: next.stations.length },
+        }),
+        source === 'graph' ? 'success' : 'warning'
+      );
+    } finally {
+      setSyncing(false);
+    }
+  }, [bridge, notify, persist, store, t]);
+
+  const setActiveStation = useCallback(
+    (id: string) => {
+      if (!state) return;
+      const next = { ...state, activeStationId: id };
+      setState(next);
+      void store.put(IDB_STATE_KEY, next).catch(() => undefined);
+      const station = next.stations.find(item => item.id === id);
+      notify(
+        t('notify.stationSelected', {
+          fallback: 'Active station: {name}',
+          params: { name: station?.name ?? id },
+        }),
+        'info'
+      );
+    },
+    [notify, state, store, t]
+  );
+
+  const activeStation = state?.stations?.find(item => item.id === state.activeStationId) ?? null;
+
+  return { state, activeStation, syncing, historyCount, persisted, refresh, setActiveStation };
+}

package/templates/vite/src/dashboard-provider.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import { useClimate } from './climate/use-climate';
+import { useProfile, type ProfileState } from './profile/use-profile';
+
+type ClimateApi = ReturnType<typeof useClimate>;
+type DashboardContextValue = ClimateApi & { profile: ProfileState };
+
+const DashboardContext = createContext<DashboardContextValue | null>(null);
+
+export function DashboardProvider({ children }: Readonly<{ children: ReactNode }>) {
+  const climate = useClimate();
+  const profile = useProfile();
+
+  return (
+    <DashboardContext.Provider value={{ ...climate, profile }}>
+      {children}
+    </DashboardContext.Provider>
+  );
+}
+
+export function useDashboard(): DashboardContextValue {
+  const context = useContext(DashboardContext);
+  if (!context) {
+    throw new Error('useDashboard must be used within DashboardProvider');
+  }
+  return context;
+}

package/templates/vite/src/events/live-events-view.tsx

@@ -0,0 +1,74 @@
+import type { GraphEvent } from '@bardioc/app-sdk';
+import { isInsideIframe } from '@bardioc/app-sdk/dev';
+import { useGraphEvents } from '@bardioc/app-sdk/react';
+import { Badge, Card, Empty } from '@bardioc/ui/components';
+import { Activity } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from '../i18n';
+
+// OGIT types to watch. Broad `ogit/Timeseries` writes are the most common signal in a live
+// instance; swap these for the entity types your app cares about.
+const WATCHED_TYPES = ['ogit/Timeseries', 'ogit/Automation/Issue'];
+const MAX_EVENTS = 50;
+
+export function LiveEventsView() {
+  const { t } = useTranslation();
+  const [events, setEvents] = useState<GraphEvent[]>([]);
+
+  // Subscribes for the mounted lifetime; the host streams matching graph events over SSE.
+  // Outside a valid session no events arrive and the empty state stays.
+  useGraphEvents({ types: WATCHED_TYPES }, event => {
+    setEvents(prev => [event, ...prev].slice(0, MAX_EVENTS));
+  });
+
+  return (
+    <div className="flex h-full min-w-0 flex-col gap-3">
+      <div>
+        <h2 className="text-lg font-semibold">
+          {t('events.title', { fallback: 'Live Events' })}
+        </h2>
+        <p className="text-muted-foreground text-xs">
+          {t('events.description', {
+            fallback: 'Live graph events streamed from the OS over SSE (permission "events").',
+          })}
+        </p>
+      </div>
+
+      <Card className="min-h-0 min-w-0 flex-1">
+        {events.length === 0 ? (
+          <Empty
+            icon={Activity}
+            iconVariant="chip"
+            title={t('events.emptyTitle', { fallback: 'Waiting for events' })}
+            description={
+              isInsideIframe()
+                ? t('events.emptyHost', {
+                    fallback: 'No graph events yet — activity will appear here as it happens.',
+                  })
+                : t('events.emptyStandalone', {
+                    fallback: 'Open inside Bardioc OS (or a dev session) to receive live events.',
+                  })
+            }
+          />
+        ) : (
+          <div className="flex min-h-0 flex-col gap-1 overflow-auto">
+            {events.map(event => (
+              <div
+                key={event.id}
+                className="border-border flex min-w-0 items-center gap-2 border-b py-1.5 font-mono text-xs last:border-b-0"
+              >
+                <Badge variant="info" numerical>
+                  {event.type}
+                </Badge>
+                <span className="text-muted-foreground shrink-0">
+                  {new Date(event.timestamp).toLocaleTimeString()}
+                </span>
+                <span className="truncate">{event.id}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}