Skip to content

fix(web): harden device ui for certified devices data - #266

Merged
gurezo merged 3 commits into
mainfrom
feat/issue-257-verify-ui-certified-devices
Sep 12, 2026
Merged

gurezo merged 3 commits into
mainfrom
feat/issue-257-verify-ui-certified-devices

Conversation

@gurezo

@gurezo gurezo commented Sep 12, 2026

Copy link
Copy Markdown
Owner

PR タイトルは Conventional Commits に準拠してください (例: feat(web): add device list component)。
利用可能な scope は CONTRIBUTING.md と commitlint.config.js を参照してください。

Summary

Certified Devices JSON をデータソースにした状態で、一覧・検索・詳細・Example UI を検証し、欠損・破損画像と空 category でレイアウトが崩れないよう修正しました。

Type of change

  • Bug fix
  • New feature
  • Refactor
  • Documentation
  • Chore (build/test/ci)
  • Breaking change

Related issues

What changed?

  • カード一覧・テーブル行・詳細画面で、画像 URL が空、または読み込みに失敗した場合に /no_image.png へフォールバックする
  • 詳細画面で category が空のとき、空のバッジを表示しない
  • 上記の表示崩れに対する unit test を追加する

検証結果(live certified JSON、約 108 件):

  • 一覧(テーブル / カード)でデバイス名・型番・tag・category が表示される
  • テキスト検索で型番(ADS1015)と platform 別名(raspberry)が動作する。専用 category / tag フィルタ UI は既存どおり存在しないため追加していない
  • /devices/ADS1015 が表示され、/devices/i2c-ads1015 は canonical URL へリダイレクトされる
  • 商品 URL / datasheet / circuit / reference は値がある場合のみ表示され、欠損時はセクションを省略して runtime error にならない
  • Example は platform / upstream リンクと primary / archive / incubator 状態バッジを表示する
  • Certified 側の追加フィールド(packages / readme / driver 等)は UI に露出していない

API / Compatibility

  • Public API changes (export / function signature / behavior)
    • Details:
  • This change is backward compatible
  • This change introduces a breaking change
    • Migration notes:

How to test

  1. pnpm exec nx serve web で http://localhost:4200/ を開く
  2. テーブル / カード切替で一覧が表示され、名前・tag・category が崩れないことを確認する
  3. 検索欄に ADS1015 と raspberry を入力し、該当デバイスに絞り込まれることを確認する
  4. /devices/ADS1015 と /devices/i2c-ads1015(canonical へリダイレクト)を開き、商品リンク・Example・datasheet / circuit を確認する
  5. /devices/SG90 や Grove 系など画像 URL が壊れているデバイスで、壊れ画像ではなくプレースホルダが表示されることを確認する
  6. /devices/10k のように datasheet / circuit / reference が無いデバイスで、該当セクションが省略され詳細画面が成立することを確認する

Environment (if relevant)

  • Browser: Cursor browser (Chromium)
  • OS: macOS
  • Node version: v24.16.0
  • pnpm version: 11.24.0

Checklist

  • I ran tests locally (if available)
  • I updated docs/README if needed
  • I considered error handling where relevant

Made with Cursor

gurezo and others added 3 commits September 12, 2026 15:54
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@gurezo
gurezo merged commit 07c4e44 into main Sep 12, 2026
5 checks passed
@gurezo
gurezo deleted the feat/issue-257-verify-ui-certified-devices branch September 12, 2026 07:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: 一覧・検索・詳細・Example UI を新データで検証する

1 participant