Skip to content

tests: update the data binding font example - #436

Open
lancesnider wants to merge 3 commits into
mainfrom
font-example
Open

tests: update the data binding font example#436
lancesnider wants to merge 3 commits into
mainfrom
font-example

Conversation

@lancesnider

Copy link
Copy Markdown
Contributor

For consistency, I've updated the example in storybook to the one we're using in Codesandbox and elsewhere.

CleanShot 2026-08-07 at 11 35 03

Unrelated but also stuffed into this PR:

  • silence some warnings that were cluttering the console when running storybook
  • update CONTRIBUTING to mention that you need to run npm run dev to update the Rive package storybook uses

If you don't first run 'npm run dev', storybook may not be using the latest version of the runtime
Use the branded file instead
@lancesnider
lancesnider requested review from zplata and a lite review from Copilot August 7, 2026 18:45

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Storybook data-binding examples to match the font/data-binding demo used in CodeSandbox/other references, while also cleaning up some Storybook console noise and clarifying local dev workflow in the contributor docs.

Changes:

  • Refresh FontPropertyTest (and related story interactions) to use the updated font binding example (e.g., Orbitron + heading/subheading font properties).
  • Reduce Storybook console warnings by cleaning up unused imports / unused destructures in example components.
  • Update CONTRIBUTING.md to document running npm run dev alongside Storybook to pick up local runtime changes.

Reviewed changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
examples/src/components/Semantics.tsx Minor import/format cleanup in the semantics example.
examples/src/components/DataBindingTests.tsx Updates the data binding test components; notably refreshes the font binding demo and some warning-related cleanups.
examples/src/components/DataBindingTests.stories.tsx Aligns Storybook stories/tests with the updated data binding components (including the new font example).
examples/src/components/DataBindingHooks.tsx Removes unused destructured values / minor formatting to reduce warnings.
CONTRIBUTING.md Clarifies that npm run dev should be running to reflect local runtime changes while using Storybook.
Suppressed comments (1)

examples/src/components/DataBindingTests.tsx:798

  • clearFont checks only setHeadingFont but then calls setSubheadingFont(null) unconditionally. If setSubheadingFont is undefined at that moment, clicking “Clear Font” will throw.

Using optional calls (or guarding both setters) avoids the runtime error and keeps the example resilient during load/bind timing.

  const clearFont = () => {
    if (setHeadingFont) {
      setHeadingFont(null);
      setSubheadingFont(null);
      setCurrentFont('');

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +773 to +787
const loadFont = async (name: string, url: string) => {
if (!setHeadingFont) return;

setIsLoading(true);
try {
const response = await fetch(url);
const fontBuffer = await response.arrayBuffer();
const decodedFont = await decodeFont(new Uint8Array(fontBuffer));

setHeadingFont(decodedFont);
setSubheadingFont(decodedFont);
setCurrentFont(name);

decodedFont.unref();
} catch (error) {
these fonts are not embeded so we need to add  one when it loads
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.

3 participants