Skip to content

fix(demo): share React upload landing styles across five demos - #354

Merged
ChristopherVR merged 2 commits into
ChristopherVR:mainfrom
yunfeizhu:codex/demo-dropzone-parity
Sep 29, 2026
Merged

ChristopherVR merged 2 commits into
ChristopherVR:mainfrom
yunfeizhu:codex/demo-dropzone-parity

Conversation

@yunfeizhu

Copy link
Copy Markdown
Contributor

What does this change?

Consolidate the five demo upload landing screens into demos/shared/dropzone.css, using the React demo at port 4173 as the visual reference. Each binding keeps its existing file picker and new-presentation behavior. This is a scoped demo landing-page step related to #342.

Also make the Angular demo's standalone TypeScript check resolve the same built viewer declarations used by Vite, load Vite environment types, and participate in the workspace typecheck command.

Type of change

  • Bug fix (non-breaking)
  • New feature (non-breaking)
  • Breaking change
  • Docs / tooling / CI only

Cross-binding parity

Binding Affected? Fixed here? Notes
React Yes Yes Reference layout now consumes the shared stylesheet.
Vue Yes Yes Removed duplicate landing CSS.
Angular Yes Yes Replaced inline landing styles and theme bindings with shared CSS variables.
Svelte Yes Yes Removed duplicate landing CSS.
Vanilla Yes Yes Removed duplicate landing CSS.

UI fix

  • I checked the upload landing screen in all five running demos.
  • Every affected demo landing screen is fixed in this PR.

Testing

  • Unit tests added or updated for each binding. This is demo-only CSS; the framework-neutral landing regression spec runs against all five demo projects.
  • Regression test added that checks the React reference card and button metrics.
  • Framework-neutral e2e spec updated in e2e/dropzone-browse.spec.ts.
  • bun run e2e run locally. Its standard configuration starts dev servers and a collaboration relay; I used the five already-running demo pages for this visual check and did not start services.

On the existing React, Vue, Angular, Svelte, and Vanilla pages, the card measured 900 x 198 px and both buttons measured 38 px high with 6 px corners. The text sizes, padding, gaps, and theme colors also matched.

Checks run locally

  • bun run lint
  • bun run fmt:check
  • bun run typecheck
  • bun run e2e:contract
  • Production builds of all five demos
  • bun run test (not run; this change has no package runtime logic)

Conventional Commits

  • Both commits follow Conventional Commits.

yunfeizhu and others added 2 commits September 29, 2026 14:46
Use the React demo's upload landing as the visual baseline for Vue,
Angular, Vanilla, and Svelte. Replace duplicated demo CSS with one
stylesheet and keep file picker and blank-deck actions in each binding.

Pin the common card and button metrics in the framework-neutral e2e spec.

Refs ChristopherVR#342

Co-Authored-By: Codex <codex@openai.com>
Match the Angular demo's TypeScript resolution to its Vite alias for the
built viewer package. Include Vite environment types, declare the CSS
subpath, and add the demo to the workspace typecheck command.

Co-Authored-By: Codex <codex@openai.com>
@github-actions github-actions Bot added react React binding (pptx-react-viewer) vue Vue binding (pptx-vue-viewer) angular Angular binding (pptx-angular-viewer) svelte Svelte binding (pptx-svelte-viewer) vanilla Vanilla binding (pptx-vanilla-viewer) e2e Playwright end-to-end suite labels Sep 29, 2026
@ChristopherVR
ChristopherVR merged commit db3d81a into ChristopherVR:main Sep 29, 2026
61 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

angular Angular binding (pptx-angular-viewer) e2e Playwright end-to-end suite react React binding (pptx-react-viewer) svelte Svelte binding (pptx-svelte-viewer) vanilla Vanilla binding (pptx-vanilla-viewer) vue Vue binding (pptx-vue-viewer)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants