Skip to content

feat: add MarkdownViewer component and cnYFM helper#1125

Draft
d3m1d0v wants to merge 2 commits intomainfrom
d3m1d0v/markdown-viewer
Draft

feat: add MarkdownViewer component and cnYFM helper#1125
d3m1d0v wants to merge 2 commits intomainfrom
d3m1d0v/markdown-viewer

Conversation

@d3m1d0v
Copy link
Copy Markdown
Member

@d3m1d0v d3m1d0v commented May 5, 2026

Summary by Sourcery

Add a new markdown viewer package that renders pre-transformed HTML with YFM styling support and integrate it into the monorepo tooling and demo.

New Features:

  • Introduce the @gravity-ui/markdown-viewer package exposing a MarkdownViewer React component for rendering HTML content and a cnYFM helper for YFM-specific classnames.
  • Add Storybook demo stories showcasing markdown viewing via the new MarkdownViewer component.

Enhancements:

  • Wire the new viewer package into the shared classname utilities and BEM naming scheme used across the project.

Build:

  • Register the new viewer package in release-please configuration and publish workflow, and add its build configuration, gulpfile, and TypeScript setup.

@sourcery-ai
Copy link
Copy Markdown

sourcery-ai Bot commented May 5, 2026

Reviewer's Guide

Introduces a new @gravity-ui/markdown-viewer package that provides a MarkdownViewer React component for rendering pre-transformed HTML with YFM-aware styling helper cnYFM, wires it into the monorepo release/publish/demo setup, and adds basic build configuration and Storybook demo.

File-Level Changes

Change Details Files
Add @gravity-ui/markdown-viewer package with MarkdownViewer component for rendering HTML content and expose YFM classname helper.
  • Create new package metadata, scripts, build outputs, and dependencies for @gravity-ui/markdown-viewer.
  • Implement MarkdownViewer React component that wraps dangerous inner HTML rendering inside a styled container and forwards ref/style/className.
  • Introduce BEM classname utilities for viewer-specific classes and YFM-scoped styling via cnYFM helper, including YFMMods type.
  • Set up TypeScript config, gulp build pipeline, and publication sideEffects for CSS/SCSS in the new package.
  • Export MarkdownViewer, MarkdownViewerProps, cnYFM, and YFMMods from the package entrypoint.
packages/viewer/package.json
packages/viewer/src/components/MarkdownViewer/MarkdownViewer.tsx
packages/viewer/src/components/MarkdownViewer/index.ts
packages/viewer/src/components/index.ts
packages/viewer/src/utils/classname.ts
packages/viewer/src/utils/cn-yfm.ts
packages/viewer/src/index.ts
packages/viewer/gulpfile.mjs
packages/viewer/tsconfig.json
packages/viewer/.prettierignore
Integrate markdown viewer into repo tooling, release workflow, and demo Storybook.
  • Register new viewer package in release-please manifest and config and hook it into the GitHub publish workflow matrix.
  • Add @gravity-ui/markdown-viewer as a workspace dependency for the demo app.
  • Create a Storybook Viewer component that runs @diplodoc/transform on markdown to HTML and renders it via MarkdownViewer with YFM styling.
  • Add a Storybook story for the Markdown Viewer using existing demo markdown content.
.release-please/manifest.json
.release-please/config.json
.github/workflows/publish.yml
demo/package.json
demo/src/stories/viewer/MarkdownViewer.tsx
demo/src/stories/viewer/MarkdownViewer.stories.tsx
pnpm-lock.yaml
packages/viewer/README.md

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@gravity-ui
Copy link
Copy Markdown

gravity-ui Bot commented May 5, 2026

Storybook Deployed

@gravity-ui
Copy link
Copy Markdown

gravity-ui Bot commented May 5, 2026

🎭 Playwright Report

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.

2 participants