@brika/plugin-weather 0.3.0

package/src/__tests__/utils.test.ts

@@ -0,0 +1,360 @@
+/**
+ * Tests for weather plugin utility functions.
+ *
+ * 100% coverage for: getWeatherMeta, getGradient, getConditionColor,
+ * formatTemp, tempUnit, windDirectionLabel, dayName.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { createMockTranslation } from '@brika/sdk/testing';
+import type { WeatherCondition } from '../utils';
+import {
+  dayName,
+  formatTemp,
+  formatTempWithUnit,
+  getConditionColor,
+  getGradient,
+  getWeatherMeta,
+  getWeatherVisuals,
+  tempUnit,
+  windDirectionLabel,
+} from '../utils';
+
+// ─── getWeatherMeta ─────────────────────────────────────────────────────────
+
+describe('getWeatherMeta', () => {
+  test('code 0 → clear sky', () => {
+    const meta = getWeatherMeta(0);
+    expect(meta.condition).toBe('clear');
+    expect(meta.labelKey).toBe('conditions.clearSky');
+    expect(meta.icon).toBe('sun');
+  });
+
+  test('code 1 → mainly clear', () => {
+    const meta = getWeatherMeta(1);
+    expect(meta.condition).toBe('partly-cloudy');
+    expect(meta.labelKey).toBe('conditions.mainlyClear');
+  });
+
+  test('code 2 → partly cloudy', () => {
+    expect(getWeatherMeta(2).condition).toBe('partly-cloudy');
+  });
+
+  test('code 3 → overcast', () => {
+    expect(getWeatherMeta(3).condition).toBe('cloudy');
+    expect(getWeatherMeta(3).icon).toBe('cloud');
+  });
+
+  test('code 45 → fog', () => {
+    expect(getWeatherMeta(45).condition).toBe('fog');
+  });
+
+  test('code 48 → rime fog', () => {
+    expect(getWeatherMeta(48).condition).toBe('fog');
+    expect(getWeatherMeta(48).labelKey).toBe('conditions.rimeFog');
+  });
+
+  test('codes 51-57 → drizzle variants', () => {
+    for (const code of [51, 53, 55, 56, 57]) {
+      expect(getWeatherMeta(code).condition).toBe('drizzle');
+      expect(getWeatherMeta(code).icon).toBe('cloud-drizzle');
+    }
+  });
+
+  test('codes 61-67 → rain variants', () => {
+    for (const code of [61, 63, 65, 66, 67]) {
+      expect(getWeatherMeta(code).condition).toBe('rain');
+      expect(getWeatherMeta(code).icon).toBe('cloud-rain');
+    }
+  });
+
+  test('codes 71-77 → snow variants', () => {
+    for (const code of [71, 73, 75, 77]) {
+      expect(getWeatherMeta(code).condition).toBe('snow');
+      expect(getWeatherMeta(code).icon).toBe('snowflake');
+    }
+  });
+
+  test('codes 80-82 → shower variants', () => {
+    for (const code of [80, 81, 82]) {
+      expect(getWeatherMeta(code).condition).toBe('showers');
+      expect(getWeatherMeta(code).icon).toBe('cloud-rain-wind');
+    }
+  });
+
+  test('codes 85-86 → snow showers', () => {
+    for (const code of [85, 86]) {
+      expect(getWeatherMeta(code).condition).toBe('snow');
+    }
+  });
+
+  test('codes 95-99 → thunderstorm variants', () => {
+    for (const code of [95, 96, 99]) {
+      expect(getWeatherMeta(code).condition).toBe('thunderstorm');
+      expect(getWeatherMeta(code).icon).toBe('cloud-lightning');
+    }
+  });
+
+  test('unknown code returns fallback', () => {
+    const meta = getWeatherMeta(999);
+    expect(meta.condition).toBe('cloudy');
+    expect(meta.labelKey).toBe('conditions.unknown');
+    expect(meta.icon).toBe('cloud');
+  });
+});
+
+// ─── getGradient ────────────────────────────────────────────────────────────
+
+describe('getGradient', () => {
+  test('returns a gradient string for known codes', () => {
+    const gradient = getGradient(0);
+    expect(gradient).toContain('linear-gradient');
+  });
+
+  test('each condition maps to a distinct gradient', () => {
+    const codes: Record<WeatherCondition, number> = {
+      clear: 0,
+      'partly-cloudy': 1,
+      cloudy: 3,
+      fog: 45,
+      drizzle: 51,
+      rain: 61,
+      snow: 71,
+      showers: 80,
+      thunderstorm: 95,
+    };
+    const gradients = new Set<string>();
+    for (const code of Object.values(codes)) {
+      gradients.add(getGradient(code));
+    }
+    expect(gradients.size).toBe(9);
+  });
+
+  test('unknown code uses fallback (cloudy) gradient', () => {
+    const unknownGradient = getGradient(999);
+    const cloudyGradient = getGradient(3);
+    expect(unknownGradient).toBe(cloudyGradient);
+  });
+});
+
+// ─── getConditionColor ──────────────────────────────────────────────────────
+
+describe('getConditionColor', () => {
+  test('clear sky returns yellow accent', () => {
+    expect(getConditionColor(0)).toBe('#fbbf24');
+  });
+
+  test('each condition maps to a color', () => {
+    const codes: Record<WeatherCondition, number> = {
+      clear: 0,
+      'partly-cloudy': 1,
+      cloudy: 3,
+      fog: 45,
+      drizzle: 51,
+      rain: 61,
+      snow: 71,
+      showers: 80,
+      thunderstorm: 95,
+    };
+    for (const code of Object.values(codes)) {
+      const color = getConditionColor(code);
+      expect(color).toMatch(/^#[0-9a-f]{6}$/);
+    }
+  });
+
+  test('unknown code uses fallback (cloudy) color', () => {
+    expect(getConditionColor(999)).toBe(getConditionColor(3));
+  });
+});
+
+// ─── formatTemp ─────────────────────────────────────────────────────────────
+
+describe('formatTemp', () => {
+  test('celsius returns rounded value', () => {
+    expect(formatTemp(22.7, 'celsius')).toBe('23');
+  });
+
+  test('celsius rounds down correctly', () => {
+    expect(formatTemp(22.3, 'celsius')).toBe('22');
+  });
+
+  test('celsius handles negative values', () => {
+    expect(formatTemp(-5.8, 'celsius')).toBe('-6');
+  });
+
+  test('celsius handles zero', () => {
+    expect(formatTemp(0, 'celsius')).toBe('0');
+  });
+
+  test('fahrenheit converts and rounds', () => {
+    // 0°C = 32°F
+    expect(formatTemp(0, 'fahrenheit')).toBe('32');
+  });
+
+  test('fahrenheit converts 100°C', () => {
+    // 100°C = 212°F
+    expect(formatTemp(100, 'fahrenheit')).toBe('212');
+  });
+
+  test('fahrenheit converts negative', () => {
+    // -40°C = -40°F
+    expect(formatTemp(-40, 'fahrenheit')).toBe('-40');
+  });
+
+  test('fahrenheit rounds correctly', () => {
+    // 22°C = 71.6°F → 72
+    expect(formatTemp(22, 'fahrenheit')).toBe('72');
+  });
+});
+
+// ─── tempUnit ───────────────────────────────────────────────────────────────
+
+describe('tempUnit', () => {
+  test('celsius returns °C', () => {
+    expect(tempUnit('celsius')).toBe('\u00b0C');
+  });
+
+  test('fahrenheit returns °F', () => {
+    expect(tempUnit('fahrenheit')).toBe('\u00b0F');
+  });
+
+  test('any other string defaults to celsius', () => {
+    expect(tempUnit('kelvin')).toBe('\u00b0C');
+  });
+});
+
+// ─── windDirectionLabel ─────────────────────────────────────────────────────
+
+describe('windDirectionLabel', () => {
+  test('0° → N', () => {
+    expect(windDirectionLabel(0)).toBe('N');
+  });
+
+  test('45° → NE', () => {
+    expect(windDirectionLabel(45)).toBe('NE');
+  });
+
+  test('90° → E', () => {
+    expect(windDirectionLabel(90)).toBe('E');
+  });
+
+  test('135° → SE', () => {
+    expect(windDirectionLabel(135)).toBe('SE');
+  });
+
+  test('180° → S', () => {
+    expect(windDirectionLabel(180)).toBe('S');
+  });
+
+  test('225° → SW', () => {
+    expect(windDirectionLabel(225)).toBe('SW');
+  });
+
+  test('270° → W', () => {
+    expect(windDirectionLabel(270)).toBe('W');
+  });
+
+  test('315° → NW', () => {
+    expect(windDirectionLabel(315)).toBe('NW');
+  });
+
+  test('360° wraps to N', () => {
+    expect(windDirectionLabel(360)).toBe('N');
+  });
+
+  test('22° rounds to NE', () => {
+    expect(windDirectionLabel(22)).toBe('N');
+  });
+
+  test('23° rounds to NE', () => {
+    expect(windDirectionLabel(23)).toBe('NE');
+  });
+});
+
+// ─── formatTempWithUnit ─────────────────────────────────────────────────────
+
+describe('formatTempWithUnit', () => {
+  test('celsius combines value and unit', () => {
+    expect(formatTempWithUnit(22.7, 'celsius')).toBe('23\u00b0C');
+  });
+
+  test('fahrenheit combines converted value and unit', () => {
+    expect(formatTempWithUnit(0, 'fahrenheit')).toBe('32\u00b0F');
+  });
+
+  test('negative celsius', () => {
+    expect(formatTempWithUnit(-5.8, 'celsius')).toBe('-6\u00b0C');
+  });
+});
+
+// ─── getWeatherVisuals ──────────────────────────────────────────────────────
+
+describe('getWeatherVisuals', () => {
+  test('returns meta, color, and gradient for known code', () => {
+    const v = getWeatherVisuals(0);
+    expect(v.meta.condition).toBe('clear');
+    expect(v.color).toBe('#fbbf24');
+    expect(v.gradient).toContain('linear-gradient');
+  });
+
+  test('matches individual helper results', () => {
+    const v = getWeatherVisuals(61);
+    expect(v.meta).toEqual(getWeatherMeta(61));
+    expect(v.color).toBe(getConditionColor(61));
+    expect(v.gradient).toBe(getGradient(61));
+  });
+
+  test('unknown code uses fallback', () => {
+    const v = getWeatherVisuals(999);
+    expect(v.meta.condition).toBe('cloudy');
+    expect(v.color).toBe(getConditionColor(3));
+    expect(v.gradient).toBe(getGradient(3));
+  });
+});
+
+// ─── dayName ────────────────────────────────────────────────────────────────
+
+describe('dayName', () => {
+  const { t } = createMockTranslation('plugin:weather');
+
+  test('today returns I18nRef for days.today', () => {
+    const today = new Date();
+    const dateStr = today.toISOString().slice(0, 10);
+    const result = dayName(dateStr, t);
+    expect(result).toEqual(t('days.today'));
+  });
+
+  test('tomorrow returns I18nRef for days.tomorrow', () => {
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const dateStr = tomorrow.toISOString().slice(0, 10);
+    const result = dayName(dateStr, t);
+    expect(result).toEqual(t('days.tomorrow'));
+  });
+
+  test('other dates return I18nRef for weekday key', () => {
+    const nextWeek = new Date();
+    nextWeek.setDate(nextWeek.getDate() + 7);
+    const dateStr = nextWeek.toISOString().slice(0, 10);
+    const result = dayName(dateStr, t);
+    // Should be an I18nRef with a days.xxx key
+    expect(result).toHaveProperty('__i18n', true);
+    expect(result).toHaveProperty('ns', 'plugin:weather');
+    expect((result as { key: string }).key).toMatch(/^days\.(mon|tue|wed|thu|fri|sat|sun)$/);
+  });
+
+  test('all weekdays map to correct keys', () => {
+    const expected = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+    // Use a date far enough in the future to avoid today/tomorrow
+    const base = new Date();
+    base.setDate(base.getDate() + 10);
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(base);
+      d.setDate(d.getDate() + i);
+      const dateStr = d.toISOString().slice(0, 10);
+      const result = dayName(dateStr, t);
+      const dayIdx = d.getDay();
+      expect((result as { key: string }).key).toBe(`days.${expected[dayIdx]}`);
+    }
+  });
+});

package/src/api.ts

@@ -0,0 +1,116 @@
+import type { CurrentWeather, DailyForecast, GeoLocation, HourlyForecast } from './types';
+
+const GEO_BASE = 'https://geocoding-api.open-meteo.com/v1';
+const WEATHER_BASE = 'https://api.open-meteo.com/v1';
+
+// ─── Geocoding ─────────────────────────────────────────────────────────────
+
+interface GeoResult {
+  name: string;
+  latitude: number;
+  longitude: number;
+  country: string;
+  timezone: string;
+}
+
+export async function geocodeCity(name: string): Promise<GeoLocation | null> {
+  const url = `${GEO_BASE}/search?name=${encodeURIComponent(name)}&count=1&language=en`;
+  const res = await fetch(url);
+  if (!res.ok) return null;
+
+  const data = (await res.json()) as { results?: GeoResult[] };
+  const first = data.results?.[0];
+  if (!first) return null;
+
+  return {
+    name: first.name,
+    latitude: first.latitude,
+    longitude: first.longitude,
+    country: first.country,
+    timezone: first.timezone,
+  };
+}
+
+// ─── Weather Data (single request for current + hourly + daily) ────────────
+
+interface ForecastResponse {
+  current: {
+    temperature_2m: number;
+    relative_humidity_2m: number;
+    apparent_temperature: number;
+    weather_code: number;
+    wind_speed_10m: number;
+    wind_direction_10m: number;
+    pressure_msl: number;
+  };
+  hourly: {
+    time: string[];
+    temperature_2m: number[];
+    weather_code: number[];
+    precipitation_probability: number[];
+  };
+  daily: {
+    time: string[];
+    weather_code: number[];
+    temperature_2m_max: number[];
+    temperature_2m_min: number[];
+    precipitation_sum: number[];
+    wind_speed_10m_max: number[];
+  };
+}
+
+export interface WeatherData {
+  current: CurrentWeather;
+  hourly: HourlyForecast[];
+  daily: DailyForecast[];
+}
+
+export async function fetchWeather(
+  latitude: number,
+  longitude: number,
+): Promise<WeatherData | null> {
+  const params = new URLSearchParams({
+    latitude: String(latitude),
+    longitude: String(longitude),
+    current:
+      'temperature_2m,relative_humidity_2m,apparent_temperature,weather_code,wind_speed_10m,wind_direction_10m,pressure_msl',
+    hourly: 'temperature_2m,weather_code,precipitation_probability',
+    daily:
+      'weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max',
+    timezone: 'auto',
+    forecast_days: '7',
+  });
+
+  const res = await fetch(`${WEATHER_BASE}/forecast?${params}`);
+  if (!res.ok) return null;
+
+  const data = (await res.json()) as ForecastResponse;
+
+  const current: CurrentWeather = {
+    temperature: data.current.temperature_2m,
+    apparentTemperature: data.current.apparent_temperature,
+    humidity: data.current.relative_humidity_2m,
+    weatherCode: data.current.weather_code,
+    windSpeed: data.current.wind_speed_10m,
+    windDirection: data.current.wind_direction_10m,
+    pressure: data.current.pressure_msl,
+  };
+
+  const hourly: HourlyForecast[] = data.hourly.time.map((time, i) => ({
+    time,
+    temperature: data.hourly.temperature_2m[i],
+    weatherCode: data.hourly.weather_code[i],
+    precipitationProbability: data.hourly.precipitation_probability[i],
+  }));
+
+  const daily: DailyForecast[] = data.daily.time.map((date, i) => ({
+    date,
+    weatherCode: data.daily.weather_code[i],
+    tempMax: data.daily.temperature_2m_max[i],
+    tempMin: data.daily.temperature_2m_min[i],
+    precipitationSum: data.daily.precipitation_sum[i],
+    windSpeedMax: data.daily.wind_speed_10m_max[i],
+  }));
+
+  return { current, hourly, daily };
+}

package/src/bricks/compact.tsx

@@ -0,0 +1,60 @@
+import { Avatar, Box, Column, defineBrick, Icon, Row, Text, useLocale } from '@brika/sdk/bricks';
+import { useWeather } from '../use-weather';
+import { formatTempWithUnit, getWeatherVisuals } from '../utils';
+import { CITY_UNIT_CONFIG, WeatherError, WeatherLoading } from './shared';
+
+// ─── Brick Definition ──────────────────────────────────────────────────────
+
+export const compactBrick = defineBrick(
+  {
+    id: 'compact',
+    families: ['sm'],
+    minSize: { w: 1, h: 1 },
+    maxSize: { w: 3, h: 3 },
+    config: CITY_UNIT_CONFIG,
+  },
+  () => {
+    const { t } = useLocale();
+    const { weather, unit } = useWeather();
+
+    if (weather.loading && !weather.current) return <WeatherLoading variant="compact" />;
+    if (weather.error && !weather.current) return <WeatherError message={t('ui.noData')} />;
+    if (!weather.current || !weather.location) return <WeatherLoading variant="compact" />;
+
+    const { meta, color, gradient } = getWeatherVisuals(weather.current.weatherCode);
+    const temp = formatTempWithUnit(weather.current.temperature, unit);
+
+    return (
+      <Box background={gradient} rounded="sm" padding="md" grow>
+        <Column gap="sm" justify="center" grow>
+          <Row gap="sm" align="center">
+            <Avatar icon={meta.icon} color={color} size="md" />
+            <Column gap="sm" grow>
+              <Text content={temp} variant="heading" weight="bold" color="#ffffff" maxLines={1} />
+              <Text content={t(meta.labelKey)} variant="caption" color="rgba(255,255,255,0.65)" maxLines={1} />
+            </Column>
+          </Row>
+          <Row gap="sm" align="center">
+            <Icon name="map-pin" size="sm" color="rgba(255,255,255,0.5)" />
+            <Text
+              content={weather.location.name}
+              variant="caption"
+              weight="semibold"
+              color="rgba(255,255,255,0.85)"
+              maxLines={1}
+            />
+          </Row>
+          <Row gap="sm" align="center">
+            <Icon name="thermometer" size="sm" color="rgba(255,255,255,0.5)" />
+            <Text
+              content={t('stats.feelsLikeTemp', { temp: formatTempWithUnit(weather.current.apparentTemperature, unit) })}
+              variant="caption"
+              color="rgba(255,255,255,0.6)"
+              maxLines={1}
+            />
+          </Row>
+        </Column>
+      </Box>
+    );
+  },
+);

package/src/bricks/current.tsx

@@ -0,0 +1,133 @@
+import { Avatar, Box, Column, Divider, defineBrick, Grid, type I18nRef, Icon, Row, Spacer, Text, useLocale } from '@brika/sdk/bricks';
+import { useWeather } from '../use-weather';
+import {
+  formatTemp,
+  formatTempWithUnit,
+  getWeatherVisuals,
+  tempUnit,
+  windDirectionLabel,
+} from '../utils';
+import { CITY_UNIT_CONFIG, WeatherError, WeatherLoading } from './shared';
+
+// ─── Inline stat (icon + label + value + suffix) ────────────────────────────
+
+function WeatherStat({
+  icon,
+  label,
+  value,
+  suffix,
+}: Readonly<{
+  icon: string;
+  label: string | I18nRef;
+  value: string;
+  suffix?: string;
+}>) {
+  return (
+    <Column gap="sm" grow>
+      <Row gap="sm" align="center">
+        <Icon name={icon} size="sm" color="rgba(255,255,255,0.5)" />
+        <Text content={label} variant="caption" size="xs" color="rgba(255,255,255,0.6)" maxLines={1} />
+      </Row>
+      <Row gap="sm" align="end">
+        <Text content={value} variant="heading" weight="bold" color="#ffffff" maxLines={1} />
+        {suffix ? (
+          <Text content={suffix} variant="caption" size="xs" color="rgba(255,255,255,0.5)" maxLines={1} />
+        ) : null}
+      </Row>
+    </Column>
+  );
+}
+
+// ─── Brick Definition ──────────────────────────────────────────────────────
+
+export const currentBrick = defineBrick(
+  {
+    id: 'current',
+    families: ['sm', 'md', 'lg'],
+    minSize: { w: 1, h: 1 },
+    maxSize: { w: 12, h: 8 },
+    config: CITY_UNIT_CONFIG,
+  },
+  () => {
+    const { t } = useLocale();
+    const { weather, unit } = useWeather();
+
+    if (weather.loading && !weather.current) return <WeatherLoading />;
+    if (weather.error && !weather.current) return <WeatherError message={weather.error} />;
+    if (!weather.current || !weather.location) return <WeatherLoading />;
+
+    const { meta, color, gradient } = getWeatherVisuals(weather.current.weatherCode);
+
+    return (
+      <Box background={gradient} rounded="sm" padding="lg" grow>
+        <Column gap="md" grow justify="between">
+          {/* Header: location + condition label */}
+          <Row gap="sm" align="center">
+            <Icon name="map-pin" size="sm" color="rgba(255,255,255,0.5)" />
+            <Text content={weather.location.name} variant="body" weight="bold" color="#ffffff" maxLines={1} />
+            <Spacer />
+            <Text content={t(meta.labelKey)} variant="caption" color="rgba(255,255,255,0.6)" maxLines={1} />
+          </Row>
+
+          {/* Main: avatar + temp + feels like */}
+          <Row gap="md" align="center">
+            <Avatar icon={meta.icon} color={color} size="lg" />
+            <Column gap="sm" grow>
+              <Text
+                content={formatTempWithUnit(weather.current.temperature, unit)}
+                variant="heading"
+                size="xl"
+                weight="bold"
+                color="#ffffff"
+                maxLines={1}
+              />
+              <Text
+                content={t('stats.feelsLikeTemp', { temp: formatTempWithUnit(weather.current.apparentTemperature, unit) })}
+                variant="caption"
+                color="rgba(255,255,255,0.6)"
+                maxLines={1}
+              />
+            </Column>
+          </Row>
+
+          {/* Stats: auto-fit grid wraps to available width */}
+          <Divider color="rgba(255,255,255,0.12)" />
+          <Grid autoFit minColumnWidth={90} gap="md">
+            <WeatherStat
+              icon="thermometer"
+              label={t('stats.feelsLike')}
+              value={formatTemp(weather.current.apparentTemperature, unit)}
+              suffix={tempUnit(unit)}
+            />
+            <WeatherStat
+              icon="droplets"
+              label={t('stats.humidity')}
+              value={`${weather.current.humidity}`}
+              suffix="%"
+            />
+            <WeatherStat
+              icon="wind"
+              label={t('stats.wind')}
+              value={`${Math.round(weather.current.windSpeed)}`}
+              suffix={`km/h ${windDirectionLabel(weather.current.windDirection)}`}
+            />
+            <WeatherStat
+              icon="gauge"
+              label={t('stats.pressure')}
+              value={`${Math.round(weather.current.pressure)}`}
+              suffix="hPa"
+            />
+          </Grid>
+
+          {/* Updated timestamp */}
+          <Text
+            content={t('ui.updated', { time: weather.lastUpdated === null ? '' : new Date(weather.lastUpdated).toLocaleTimeString() })}
+            variant="caption"
+            color="rgba(255,255,255,0.35)"
+            maxLines={1}
+          />
+        </Column>
+      </Box>
+    );
+  },
+);