feat(components): added Markdown component (#DS-5225) - #447
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (10)
🚧 Files skipped from review as they are similar to previous changes (4)
📝 WalkthroughWalkthroughAdds an experimental ChangesMarkdown component
Estimated code review effort: 3 (Moderate) | ~25 minutes Suggested labels: Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant Consumer
participant Markdown
participant ReactMarkdown
Consumer->>Markdown: Provide Markdown children and div props
Markdown->>ReactMarkdown: Parse content with remark-gfm
ReactMarkdown-->>Markdown: Return rendered element tree
Markdown-->>Consumer: Render styled Markdown content
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.14.0)packages/components/src/components/Markdown/Markdown.module.cssConfigurationError: Could not find "stylelint-config-css-modules". Do you need to install the package or use the "configBasedir" option? packages/components/src/styles/mixins.cssConfigurationError: Could not find "stylelint-config-css-modules". Do you need to install the package or use the "configBasedir" option? Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Visit the preview URL for this PR (updated for commit 979cebe): https://react-koobiq-next--prs-447-2v2xguuh.web.app (expires Wed, 12 Aug 2026 13:45:09 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/components/package.json`:
- Around line 45-56: Update the dependency declarations in package.json so
dompurify and marked are required rather than optional peer dependencies, since
Markdown directly imports them. Remove their optional peer metadata while
preserving the existing Markdown export behavior.
In `@packages/components/src/components/Markdown/types.ts`:
- Around line 5-7: Update MarkdownProps in
packages/components/src/components/Markdown/types.ts to omit
dangerouslySetInnerHTML alongside children. In
packages/components/src/components/Markdown/Markdown.tsx, destructure and
discard dangerouslySetInnerHTML before spreading the remaining props onto the
div. Regenerate tools/public_api_guard/components/Markdown.api.md so the public
API reflects the updated type.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 0e62241d-b177-4229-9755-ebb327fb4469
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
package.jsonpackages/components/package.jsonpackages/components/src/components/Markdown/Markdown.mdxpackages/components/src/components/Markdown/Markdown.module.csspackages/components/src/components/Markdown/Markdown.stories.tsxpackages/components/src/components/Markdown/Markdown.test.tsxpackages/components/src/components/Markdown/Markdown.tsxpackages/components/src/components/Markdown/index.tspackages/components/src/components/Markdown/types.tspackages/components/src/components/index.tstools/api-extractor/config.jsontools/public_api_guard/components/Markdown.api.md
There was a problem hiding this comment.
Pull request overview
Adds a new Markdown component to @koobiq/react-components, exposing it via the package public API and Storybook docs/stories, using marked for parsing and DOMPurify for sanitization.
Changes:
- Introduces
Markdowncomponent implementation, styles, types, tests, stories, and MDX documentation. - Exposes the component through the components barrel exports and updates API Extractor config + API report.
- Adds
markedanddompurifyto the workspace lockfile and declares them as peer dependencies of@koobiq/react-components.
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/Markdown.api.md | Adds the generated API Extractor report for the new component. |
| tools/api-extractor/config.json | Registers Markdown for API Extractor/public API guarding. |
| pnpm-lock.yaml | Locks new dependencies (marked, dompurify) and related graph updates. |
| packages/components/src/components/Markdown/types.ts | Defines the public MarkdownProps type surface. |
| packages/components/src/components/Markdown/Markdown.tsx | Implements Markdown-to-HTML rendering + sanitation and class injection. |
| packages/components/src/components/Markdown/Markdown.test.tsx | Adds unit tests for rendering, options, and sanitization behavior. |
| packages/components/src/components/Markdown/Markdown.stories.tsx | Adds Storybook stories covering common Markdown structures. |
| packages/components/src/components/Markdown/Markdown.module.css | Adds CSS module styles for rendered Markdown elements. |
| packages/components/src/components/Markdown/Markdown.mdx | Adds Storybook documentation page for the new component. |
| packages/components/src/components/Markdown/index.ts | Exports the component and its types from the component folder. |
| packages/components/src/components/index.ts | Re-exports Markdown from the components barrel. |
| packages/components/package.json | Declares marked/dompurify as peer deps (currently marked optional). |
| package.json | Adds marked/dompurify to the workspace root dependencies for development/tooling. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary by CodeRabbit
New Features
markdownpackage export.Documentation
Bug Fixes