Skip to content

Export value-cell component#133

Merged
gkrajniak merged 1 commit into
mainfrom
feat/export-value-cell-component
May 20, 2026
Merged

Export value-cell component#133
gkrajniak merged 1 commit into
mainfrom
feat/export-value-cell-component

Conversation

@gkrajniak
Copy link
Copy Markdown
Member

@gkrajniak gkrajniak commented May 20, 2026

Summary by CodeRabbit

  • Documentation

    • Added comprehensive documentation for the ValueCell component, covering usage in Angular templates, configuration options, supported display modes (plain text, secret, boolean icon, link, tooltip, alert, image, button), and advanced features like copy-to-clipboard, conditional styling, and label badges.
  • New Features

    • ValueCell component and its sub-components are now available as part of the public API.

Review Change Stack

Signed-off-by: Grzegorz Krajniak <grzegorz.krajniak@sap.com>
@gkrajniak gkrajniak requested review from a team as code owners May 20, 2026 13:32
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 20, 2026

📝 Walkthrough

Walkthrough

This PR documents the ValueCell Angular component as a public API, exposes it through the package's public surface, and updates module imports to align with a restructured module layout. ValueCell renders field values with configurable display modes and styling.

Changes

ValueCell Documentation and Public API

Layer / File(s) Summary
ValueCell Component Documentation
docs/value-cell.md
Complete reference for ValueCell including inputs (fieldDefinition, resource), output event (buttonClick), value resolution precedence (jsonPathExpression, property, propertyField, value), eight display modes (plain text, secret, boolIcon, link, tooltip, alert, img, button), optional features (copy-to-clipboard, label badges, conditional styling), sub-components (BooleanValue, LinkValue, SecretValue), and TypeScript interfaces (UiSettings, ButtonSettings, CssRule, CssRuleCondition, ValueCellButtonClickEvent).
Public API Exposure and Module Barrel
projects/ngx/declarative-ui/public-api.ts, projects/ngx/declarative-ui/value-cell/index.ts
ValueCell and its sub-components are added to the package's public API via wildcard re-export, and a barrel index consolidates the main component and sub-component exports.
Import Path Updates
projects/ngx/declarative-ui/value-cell/value-cell.component.ts, projects/ngx/declarative-ui/value-cell/value-cell.component.spec.ts, projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.ts, projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts
Import paths are updated to reflect the module restructuring: ValueCell imports shift to ../models and ../table/utils, and DeclarativeTable's ValueCell imports are updated to the correct relative location.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

enhancement

🐰 A cell so grand, now documented with care,
Public API exposed for all who dare,
ValueCell shines with modes and with style,
Import paths fixed in Angular's wild pile!

🚥 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 'Export value-cell component' accurately reflects the main objective of the PR, which adds exports for the ValueCell component and related sub-components to the public API.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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/export-value-cell-component

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.

❤️ Share

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

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

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 `@docs/value-cell.md`:
- Line 3: The intro line incorrectly states "seven display modes" for ValueCell
but the doc lists eight (plain text/unset, secret, boolIcon, link, tooltip,
alert, img, button); update the sentence to "eight display modes" (or otherwise
enumerate eight modes) and search for any other references to "seven display
modes" in the ValueCell docs to update them as well; ensure the description for
the component (ValueCell / value-cell) consistently reflects the eight modes.
- Around line 18-19: The imports for ValueCell and FieldDefinition are using the
bare alias '`@openmfp/webcomponents`' which doesn't resolve; update the two import
statements that reference ValueCell and FieldDefinition to import from
'`@openmfp/webcomponents/declarative-ui`' instead so they use the configured
tsconfig path mapping.
🪄 Autofix (Beta)

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

Run ID: 8ee5c43b-83db-459e-be2b-441b1fee2129

📥 Commits

Reviewing files that changed from the base of the PR and between 1e7d8ef and af0fbfa.

📒 Files selected for processing (22)
  • docs/value-cell.md
  • projects/ngx/declarative-ui/public-api.ts
  • projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.spec.ts
  • projects/ngx/declarative-ui/table/declarative-table/declarative-table.component.ts
  • projects/ngx/declarative-ui/value-cell/boolean-value/boolean-cell.constants.ts
  • projects/ngx/declarative-ui/value-cell/boolean-value/boolean-value.component.html
  • projects/ngx/declarative-ui/value-cell/boolean-value/boolean-value.component.scss
  • projects/ngx/declarative-ui/value-cell/boolean-value/boolean-value.component.spec.ts
  • projects/ngx/declarative-ui/value-cell/boolean-value/boolean-value.component.ts
  • projects/ngx/declarative-ui/value-cell/index.ts
  • projects/ngx/declarative-ui/value-cell/link-value/link-value.component.html
  • projects/ngx/declarative-ui/value-cell/link-value/link-value.component.scss
  • projects/ngx/declarative-ui/value-cell/link-value/link-value.component.spec.ts
  • projects/ngx/declarative-ui/value-cell/link-value/link-value.component.ts
  • projects/ngx/declarative-ui/value-cell/secret-value/secret-value.component.html
  • projects/ngx/declarative-ui/value-cell/secret-value/secret-value.component.scss
  • projects/ngx/declarative-ui/value-cell/secret-value/secret-value.component.spec.ts
  • projects/ngx/declarative-ui/value-cell/secret-value/secret-value.component.ts
  • projects/ngx/declarative-ui/value-cell/value-cell.component.html
  • projects/ngx/declarative-ui/value-cell/value-cell.component.scss
  • projects/ngx/declarative-ui/value-cell/value-cell.component.spec.ts
  • projects/ngx/declarative-ui/value-cell/value-cell.component.ts

Comment thread docs/value-cell.md
@@ -0,0 +1,345 @@
# ValueCell

A standalone cell renderer that displays a single field value from a resource object. Supports seven display modes (plain text, secret, boolean icon, link, tooltip, alert, image, button), conditional CSS rules, static CSS overrides, a copy-to-clipboard button, and a label badge mode. Used internally by `DeclarativeTable` and available for direct use in custom layouts.
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Correct the display mode count.

The introduction states "seven display modes" but the documentation describes eight modes: plain text (unset), secret, boolIcon, link, tooltip, alert, img, and button.

📝 Proposed fix
-A standalone cell renderer that displays a single field value from a resource object. Supports seven display modes (plain text, secret, boolean icon, link, tooltip, alert, image, button), conditional CSS rules, static CSS overrides, a copy-to-clipboard button, and a label badge mode. Used internally by `DeclarativeTable` and available for direct use in custom layouts.
+A standalone cell renderer that displays a single field value from a resource object. Supports eight display modes (plain text, secret, boolean icon, link, tooltip, alert, image, button), conditional CSS rules, static CSS overrides, a copy-to-clipboard button, and a label badge mode. Used internally by `DeclarativeTable` and available for direct use in custom layouts.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
A standalone cell renderer that displays a single field value from a resource object. Supports seven display modes (plain text, secret, boolean icon, link, tooltip, alert, image, button), conditional CSS rules, static CSS overrides, a copy-to-clipboard button, and a label badge mode. Used internally by `DeclarativeTable` and available for direct use in custom layouts.
A standalone cell renderer that displays a single field value from a resource object. Supports eight display modes (plain text, secret, boolean icon, link, tooltip, alert, image, button), conditional CSS rules, static CSS overrides, a copy-to-clipboard button, and a label badge mode. Used internally by `DeclarativeTable` and available for direct use in custom layouts.
🤖 Prompt for 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.

In `@docs/value-cell.md` at line 3, The intro line incorrectly states "seven
display modes" for ValueCell but the doc lists eight (plain text/unset, secret,
boolIcon, link, tooltip, alert, img, button); update the sentence to "eight
display modes" (or otherwise enumerate eight modes) and search for any other
references to "seven display modes" in the ValueCell docs to update them as
well; ensure the description for the component (ValueCell / value-cell)
consistently reflects the eight modes.

Comment thread docs/value-cell.md
Comment on lines +18 to +19
import { ValueCell } from '@openmfp/webcomponents';
import { FieldDefinition } from '@openmfp/webcomponents';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify the package.json exports configuration to determine the correct import path

# Check the package.json in the declarative-ui project for exports mapping
fd -t f '^package\.json$' projects/ngx/declarative-ui --exec cat {} \; | jq '.exports // .name // empty'

# Also check the root package.json for path alias configuration
cat package.json | jq '.exports // empty'

# Check tsconfig for path mappings
fd -t f 'tsconfig.*\.json$' --exec sh -c 'echo "=== {} ===" && cat {} | jq ".compilerOptions.paths // empty"' \;

Repository: openmfp/webcomponents

Length of output: 628


🏁 Script executed:

#!/bin/bash
# Check the root package.json exports configuration
cat package.json | jq '.exports'

Repository: openmfp/webcomponents

Length of output: 70


🏁 Script executed:

#!/bin/bash
# Search for actual import patterns used in the codebase to see what's standard
rg "from\s+['\"]`@openmfp/webcomponents`" --no-heading -A 0 -c | head -50

Repository: openmfp/webcomponents

Length of output: 270


🏁 Script executed:

#!/bin/bash
# Check what's actually exported from the declarative-ui public API
cat projects/ngx/declarative-ui/public-api.ts | head -50

Repository: openmfp/webcomponents

Length of output: 203


🏁 Script executed:

#!/bin/bash
# Check the main entry point in package.json
cat package.json | jq '{main, name}'

Repository: openmfp/webcomponents

Length of output: 120


🏁 Script executed:

#!/bin/bash
# View the actual imports in docs/value-cell.md around lines 18-19
cat -n docs/value-cell.md | head -25

Repository: openmfp/webcomponents

Length of output: 1124


🏁 Script executed:

#!/bin/bash
# Find and check what `@openmfp/webcomponents` main entry point exports
fd -t f 'index.ts' projects/ngx --exec sh -c 'echo "=== {} ===" && cat {} | head -30' \;

Repository: openmfp/webcomponents

Length of output: 2179


Update import paths to use the configured alias.

The imports from @openmfp/webcomponents (bare alias) cannot resolve because the package has no main entry point (main: null in package.json) and the tsconfig only defines the path mapping @openmfp/webcomponents/declarative-ui. Update lines 18-19 to:

import { ValueCell } from '`@openmfp/webcomponents/declarative-ui`';
import { FieldDefinition } from '`@openmfp/webcomponents/declarative-ui`';
🤖 Prompt for 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.

In `@docs/value-cell.md` around lines 18 - 19, The imports for ValueCell and
FieldDefinition are using the bare alias '`@openmfp/webcomponents`' which doesn't
resolve; update the two import statements that reference ValueCell and
FieldDefinition to import from '`@openmfp/webcomponents/declarative-ui`' instead
so they use the configured tsconfig path mapping.

@gkrajniak gkrajniak merged commit 362d120 into main May 20, 2026
9 checks passed
@gkrajniak gkrajniak deleted the feat/export-value-cell-component branch May 20, 2026 13:44
@coderabbitai coderabbitai Bot mentioned this pull request May 25, 2026
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