mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-06 15:59:59 +08:00
66 lines
2.0 KiB
Markdown
66 lines
2.0 KiB
Markdown
---
|
||
name: building-weather-widget
|
||
description: Adds a weather widget to React pages using the free Open-Meteo API. Use when the user asks to add weather, show a forecast, display current conditions, add a weather card, or integrate weather data into the web application.
|
||
---
|
||
|
||
# Weather Widget
|
||
|
||
## When to Use
|
||
|
||
Use this skill when:
|
||
- Adding current weather conditions to a dashboard or sidebar
|
||
- Displaying an hourly or daily forecast
|
||
- Showing location-based weather for a property, event, or destination
|
||
|
||
---
|
||
|
||
## Step 1 — Determine widget scope
|
||
|
||
Identify what weather data the user needs:
|
||
|
||
- **Current conditions only** — temperature, description, wind, humidity
|
||
- **Current + hourly forecast** — conditions + next 6–12 hours
|
||
- **Current + daily forecast** — conditions + multi-day outlook
|
||
|
||
If unclear, ask:
|
||
|
||
> "Should the weather widget show just current conditions, or include an hourly/daily forecast too?"
|
||
|
||
---
|
||
|
||
## Step 2 — Determine location source
|
||
|
||
The widget needs a latitude/longitude. Identify where this comes from:
|
||
|
||
- **Fixed default** — hardcoded city (e.g. San Francisco: `37.7749, -122.4194`)
|
||
- **User's location** — browser Geolocation API
|
||
- **Address-based** — geocode an address to lat/lng (see the `building-interactive-map` skill for geocoding)
|
||
- **Prop-driven** — parent component passes lat/lng
|
||
|
||
---
|
||
|
||
## Step 3 — Implementation
|
||
|
||
Read the corresponding guides:
|
||
|
||
- **Weather data hook** — read `implementation/weather-hook.md` for the `useWeather` custom hook and Open-Meteo API integration.
|
||
- **Weather UI component** — read `implementation/weather-ui.md` for rendering weather data in a card.
|
||
|
||
---
|
||
|
||
## Verification
|
||
|
||
Before completing:
|
||
|
||
1. Widget shows real weather data (not mocked).
|
||
2. Loading and error states are handled gracefully.
|
||
3. Temperature displays in the correct unit (°F or °C).
|
||
4. Run from the web app directory:
|
||
|
||
```bash
|
||
cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build
|
||
```
|
||
|
||
- **Lint:** MUST result in 0 errors.
|
||
- **Build:** MUST succeed.
|