feat: custom-radio + file-viewer (integration build)

[kemuru]

⚠️ Integration branch — do not merge

This branch exists only to produce a combined `yarn build` that includes both feature sets at once. It is the merge of two independently-reviewed branches:

• `feat/custom-radio` (see feat: custom-radio #88)
• `feat/file-viewer`

Do not merge this into `main`. Merge the individual PRs separately so each feature keeps its own review history. This PR is a draft for building/testing the fused output.

What's included

• CustomRadio: CustomRadio, CustomRadioItem, RadioIndicator + shared radio-indicator extraction; refactored Radio.
• FileViewer: FileViewer with markdown-viewer / svg-viewer.

src/lib/index.ts merged with no conflict (exports added in separate regions). yarn install + yarn build pass; dist/ emits artifacts for both features.

🤖 Generated with Claude Code

---

PR-Codex overview

This PR focuses on updating the @kleros/ui-components-library with new features, enhancements, and dependency updates, including the introduction of a new FileViewer component and improvements to existing components like CustomRadio and RadioIndicator.

Detailed summary

• Updated version in package.json from 3.7.0 to 3.8.0.
• Added new FileViewer component in src/lib/file-viewer.
• Introduced SvgDocRenderer and MarkdownDocRenderer for rendering SVG and Markdown.
• Enhanced CustomRadio and RadioIndicator components.
• Added new CSS variables for UI styling.
• Updated .gitignore to include *.tgz files.
• Introduced new dependencies: @cyntler/react-doc-viewer and react-markdown.

The following files were skipped due to too many changes: yarn.lock

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

• New Features

  • Added FileViewer component supporting PDF, image, and markdown file previews
  • Built-in URL and data-URL security validation to prevent malicious content
  • Enhanced CustomRadio component with flexible composition patterns

• Chores

  • Updated package version to 3.8.0
  • Added dependencies for document and markdown rendering

[netlify]

✅ Deploy Preview for kleros-v2-ui-storybook ready!

Name	Link
🔨 Latest commit	4ea24ef
🔍 Latest deploy log	https://app.netlify.com/projects/kleros-v2-ui-storybook/deploys/6a16c7af28b32500082ba23d
😎 Deploy Preview	https://deploy-preview-89--kleros-v2-ui-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

This PR introduces two new UI component families: a FileViewer component for safely rendering remote documents with Markdown and SVG support, and a CustomRadio form component with flexible composition options. It also extracts a reusable RadioIndicator component and refactors the existing RadioGroup to use it, adds supporting Storybook stories demonstrating both features, and updates package dependencies and exports.

Changes

FileViewer and CustomRadio Components with Form Integration

Layer / File(s)	Summary
RadioIndicator extracted component src/lib/form/radio-indicator.tsx	New RadioIndicator component renders a styled circle with conditional Tailwind classes (selection, hover, press, focus, disabled states); accepts optional small, focusRing, and className props; extracted for reuse across radio variants.
CustomRadio form component and RadioGroup refactor src/lib/form/custom-radio.tsx, src/lib/form/radio-group.tsx	CustomRadio provides flexible radio-group abstraction supporting items-based rendering (with content as ReactNode or render-prop) or children-based composition; exports CustomRadioItem for individual options and CustomRadioOption/CustomRadioProps types; RadioGroup refactored to import and use extracted RadioIndicator instead of inline indicator logic.
CustomRadio stories and package exports src/stories/customRadio.stories.tsx, src/lib/index.ts	Storybook stories demonstrate items-based Cards rendering and children-based Composition with conditional TextField; custom radio components and indicator exported at library entry point.
FileViewer component with URL safety infrastructure src/lib/file-viewer/index.tsx	New FileViewer component safely renders remote file URLs; enforces URL safety via allowlist (relative URLs, safe schemes like http/https) and blocklist (unsafe schemes, dangerous data-URL MIME types); caller-provided allowedDataMimes overrides blocklist for specific safe types; computes memoized document payload, wires DocViewer renderers, and conditionally renders content or UnsupportedUrlMessage.
FileViewer document renderers src/lib/file-viewer/markdown-viewer.tsx, src/lib/file-viewer/svg-viewer.tsx	MarkdownDocRenderer decodes fileData from ArrayBuffer or data: URL payloads (base64 or percent-encoding) and renders via ReactMarkdown; SvgDocRenderer renders SVG via img tag using document URI; both register supported MIME types and renderer priority.
FileViewer stories, theming, and integration src/stories/file-viewer.stories.tsx, src/styles/theme.css, src/lib/index.ts, package.json	Comprehensive Storybook stories cover supported formats (PDF, PNG), blocked schemes (javascript:, vbscript:, file:), unsafe data-URL MIME types (HTML, XHTML, XML), allowlist override (SVG), percent-encoded MIME defense, and unsupported type fallback; CSS custom property --klerosUIComponentsImageCheckerColor added for light/dark themes; FileViewer exported at package entry point; dependencies added for @cyntler/react-doc-viewer and react-markdown; version bumped to 3.8.0.
Build configuration .gitignore, package.json	.gitignore updated to exclude *.tgz from yarn pack output.

🎯 3 (Moderate) | ⏱️ ~25 minutes

🐰 A viewer springs forth to show your files so fine,
With radio buttons grouped in forms that shine,
Safe URLs guarded, renderers that blend,
Markdown and SVG together, on your code we depend! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: it introduces two new component families (custom-radio and file-viewer) and correctly identifies this as an integration build combining independent feature branches.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/radio-and-file-viewer

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[kemuru]

Closing — this is an integration branch for local testing only, not for merge. Devs can check it out directly: git fetch origin && git checkout feat/radio-and-file-viewer && yarn install && yarn build. Branch stays on origin.