Skip to content

Follow up Storybook theme parity and component consistency gaps #97

Description

@coderabbitai

Summary

Follow up on the remaining gaps called out during review of #73 so Storybook behavior matches main component behavior more closely and related component defaults stay consistent.

Requested by @saiy2k.

Problem statement

1) Theme build + theme type parity

The shared Theme type includes six values:

  • light
  • dark
  • ocean-glass
  • holographic
  • neo-matrix
  • bitcoin-orange

However, runtime support is currently incomplete:

  • scripts/build-themes.js and src/themes.css only ship light and dark
  • extended themes live in stories/common/themes.ts, which is Storybook-only
  • src/common/utils.ts parseTheme() accepts only light / dark, so other valid Theme values fall back to light
  • src/base/base-component/nostr-base-component.ts reads data-theme through parseTheme(), so main components cannot use the extended Storybook themes even though the type allows them

2) Cross-component consistency gaps

There are still a few places where components diverge from the follow-button cleanup work:

  • src/nostr-zap-button/render.ts still hardcodes getSuccessAnimation('light')
  • src/nostr-zap-button/style.ts still defaults --nostrc-zap-btn-horizontal-alignment to left
  • src/nostr-like-button/style.ts still defaults --nostrc-like-btn-horizontal-alignment to left
  • src/nostr-livestream/nostr-livestream.ts uses mixed boolean-attribute semantics:
    • auto-play uses parseBooleanAttribute(...)
    • show-participants and show-participant-count use opt-out logic (getAttribute(...) !== 'false') with default-true behavior

Affected areas

  • scripts/build-themes.js
  • src/themes.css
  • src/common/types.ts
  • src/common/utils.ts
  • src/base/base-component/nostr-base-component.ts
  • stories/common/themes.ts
  • src/nostr-zap-button/render.ts
  • src/nostr-zap-button/style.ts
  • src/nostr-like-button/style.ts
  • src/nostr-livestream/nostr-livestream.ts

Proposed follow-up work

  1. Make the runtime theming pipeline support the same theme variants exposed in Storybook, or narrow the public theme surface so types, parsing, and shipped CSS all agree.
  2. Align zap-button success animation theming with follow-button behavior.
  3. Align like-button and zap-button horizontal alignment defaults with the newer flex-start convention.
  4. Decide on a single documented boolean-attribute strategy for livestream options:
    • either standardize show-participants / show-participant-count with the shared boolean parsing helper
    • or explicitly document that they intentionally use opt-out default-true semantics

Acceptance criteria

  • The public runtime theme contract is internally consistent across type definitions, parsing, and shipped CSS/assets.
  • A component using data-theme does not silently downgrade supported theme values to light.
  • Zap button success animation respects the active theme instead of hardcoding light.
  • Zap and like button horizontal alignment defaults are consistent with the follow-button cleanup.
  • Livestream boolean attribute behavior is either standardized or clearly documented, especially for the default-true participant flags.

Backlinks

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions