Overview

UX design work for the Item Image Upload project. This section contains Storybook Stories that show how the use cases will be supported in the application

Requirements

• General Image Upload Features
• Item Management Features
• General Image Upload Use Cases
• Item Image Upload Use Cases
• Use Cases Analysis
• Scoping
• Project Decision Log

Context

• UI Components
• Storybook site source

Goal

Develop the Storybook Stories to represent the Stories in Scope for this project.

• The must be located in src/use-cases/ in the ux-prototype repository following the directory structure, sidebar sections and naming conventions established by the Components Phase of this project.

Storybook Structure

The tree below shows how the use cases in scope will appear in the Storybook sidebar. The structure uses hierarchical grouping so that each level (domain, entity, use case, scenario) can be folded and expanded independently.

• Domain grouping mirrors the use case hierarchy (General Behaviors / Reference).
• Use case titles use the short ID prefix (GEN-MEDIA-0001, ITM-0003).
• Scenarios are a separate grouping level under each use case, enabling fold/expand per scenario. Individual stories are leaves under their scenario.
• Each use case directory contains a description MDX file as its first entry.

Use Cases
├── General Behaviors
│   └── Entity Media
│       ├── Description
│       ├── GEN-MEDIA-0001 Set Entity Image
│       │   ├── Description
│       │   ├── 0001 Set Image
│       │   │   ├── Happy Path
│       │   │   ├── Replace Existing
│       │   │   └── Cancel and Warn
│       │   ├── 0002 Input Detection
│       │   │   ├── File Pick
│       │   │   ├── Drag and Drop
│       │   │   ├── Clipboard Image
│       │   │   ├── Clipboard HTML
│       │   │   ├── URL Entry
│       │   │   ├── Camera Capture
│       │   │   ├── Unrecognized Text
│       │   │   └── Data URI Text
│       │   ├── 0003 Formats and Size
│       │   │   ├── Accepted
│       │   │   ├── Rejected
│       │   │   ├── Limit Exceeded
│       │   │   └── Auto Compressed
│       │   ├── 0004 URL Validation
│       │   │   ├── Valid HTTPS
│       │   │   ├── Rejected Scheme
│       │   │   ├── Unreachable
│       │   │   └── Wrong Content Type
│       │   ├── 0005 Preview and Crop
│       │   │   ├── New Image
│       │   │   ├── Comparison Desktop
│       │   │   ├── Comparison Mobile
│       │   │   ├── Crop Zoom Rotate
│       │   │   ├── URL Loading
│       │   │   └── Interaction States
│       │   ├── 0006 Confirm and Persist
│       │   │   ├── Copyright Acknowledgment
│       │   │   ├── Managed Upload
│       │   │   ├── External URL
│       │   │   └── Cancel No Change
│       │   └── 0007 Grid Inline Edit
│       │       ├── Double Click
│       │       ├── Enter Key
│       │       ├── From Inspector
│       │       └── Cancel
│       ├── GEN-MEDIA-0002 Remove Entity Image
│       │   ├── Description
│       │   └── 0001 Remove Image
│       │       ├── From Form
│       │       ├── Cancel
│       │       └── Playground
│       └── GEN-MEDIA-0003 View Entity Image
│           ├── Description
│           ├── 0001 View in Grid
│           │   ├── Grid Thumbnails
│           │   ├── Hover Preview
│           │   └── Playground
│           ├── 0002 Inspector Overlay
│           │   ├── Open and Close
│           │   ├── Edit Transition
│           │   └── No Edit
│           └── 0003 Thumbnail Fallback
│               ├── Error Badge
│               ├── Loading Shimmer
│               ├── No Image
│               └── Playground
└── Reference
    └── Items
        ├── ITM-0003 Create Item
        │   └── 0010 Set Image
        │       ├── During Creation (vendored reference)
        │       └── During Creation – Canary
        └── ITM-0004 Edit Item
            └── 0006 Change or Remove Image
                ├── Change Item Image
                └── Remove Item Image

Notes

• General Behaviors / Entity Media is a new sidebar section. The three use cases (0001, 0002, 0003) are self-contained directories with their own description MDX and per-scenario story groups.
• Reference / Items already exists. The two new Item scenarios (0010 and 0006) are added to the existing ITM-0003 Create Item and ITM-0004 Edit Item directories respectively. These stories delegate to the GEN::MEDIA::0001 / GEN::MEDIA::0002 components and demonstrate the integration point within the Item form and Item grid contexts.
• Out-of-scope items (Remove Background, Bulk CSV Image Column, Fetch-and-Store, Mobile Camera UX, Retention Policy, Cross-Tenant Sharing) are excluded from this tree.
• Cross-cutting concerns (Permissions, Concurrency) are documented in the Entity Media description MDX, not as separate stories.