feat!: create data dictionary table cell for displaying markdown (#453)

[frano-m]

Closes #453.

This pull request introduces a Markdown rendering feature and integrates it into table cells while ensuring proper styling and sanitization. Key changes include adding a MarkdownRenderer component, creating reusable components for anchors and tables, and updating table cells to render Markdown content. Below is a categorized summary of the most important changes:

Markdown Rendering Implementation:

• Added a MarkdownRenderer component (src/components/MarkdownRenderer/markdownRenderer.tsx) that processes Markdown content using unified, remark, and rehype plugins, including sanitization and React component mapping.
• Defined the MarkdownRendererProps interface to support customizable components and Markdown input (src/components/MarkdownRenderer/types.ts).
• Introduced default mappings for custom components (Anchor and Table) in the COMPONENTS constant (src/components/MarkdownRenderer/contants.ts).

Custom Components for Markdown Elements:

• Created an Anchor component to handle sanitized anchor tags with limited attributes (src/components/MarkdownRenderer/components/Anchor/anchor.tsx).
• Added a Table component with styled table elements for Markdown tables (src/components/MarkdownRenderer/components/Table/table.tsx, src/components/MarkdownRenderer/components/Table/table.styles.ts). [1] [2]

Integration with Table Cells:

• Updated table cells to render Markdown content using the MarkdownRenderer component (src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.tsx).
• Styled the Markdown content within table cells, including support for inline code, headings, and horizontal rules (src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.ts).

Storybook and Testing:

• Added Storybook stories for the MarkdownCell component with default and HTML content examples (src/components/Table/components/TableCell/components/MarkdownCell/stories/markdownCell.stories.tsx, src/components/Table/components/TableCell/components/MarkdownCell/stories/args.ts). [1] [2]

Dependency Updates:

• Updated package.json to include new dependencies for Markdown processing: rehype-raw, rehype-react, rehype-sanitize, remark-gfm, and remark-rehype.

[Copilot]

Pull Request Overview

A pull request that introduces Markdown rendering support for table cells by adding new components and updating related styling, stories, and dependencies.

• Introduced a new MarkdownRenderer component with sanitization using unified and rehype plugins.
• Added a MarkdownCell component to integrate Markdown rendering in table cells with associated Storybook stories.
• Updated dependencies and created custom components (Anchor and Table) for rendering Markdown elements.

Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/styles/common/mui/typography.ts	Added a new "ERROR" color mapping to support error styling.
src/components/Table/components/MarkdownCell/types.ts	Defined the MarkdownCellProps type for table cells.
src/components/Table/components/MarkdownCell/stories/types.ts	Provided a type for story arguments to enhance Storybook integration.
src/components/Table/components/MarkdownCell/stories/markdownCell.stories.tsx	Configured Storybook stories for the MarkdownCell component.
src/components/Table/components/MarkdownCell/stories/args.ts	Supplied default and HTML example arguments for testing Markdown rendering.
src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.tsx	Integrated MarkdownRenderer into a table cell with custom components.
src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles.ts	Defined cell-specific styling for properly rendering Markdown content.
src/components/MarkdownRenderer/types.ts	Created type definitions for the MarkdownRenderer component.
src/components/MarkdownRenderer/markdownRenderer.tsx	Implemented Markdown processing with proper sanitization and React component mapping.
src/components/MarkdownRenderer/markdownRenderer.styles.ts	Provided stylistic adjustments for the MarkdownRenderer container.
src/components/MarkdownRenderer/contants.ts	Defined default component mappings for anchor and table elements used by MarkdownRenderer.
src/components/MarkdownRenderer/components/Table/table.tsx	Created a Table component tailored for Markdown table rendering.
src/components/MarkdownRenderer/components/Table/table.styles.ts	Applied styles to ensure proper table layout and appearance.
src/components/MarkdownRenderer/components/Anchor/anchor.tsx	Developed an Anchor component that wraps a Link component with limited attributes.
package.json	Updated dependencies to include new libraries for Markdown processing.

Comments suppressed due to low confidence (1)

src/components/MarkdownRenderer/contants.ts:1

• The file name 'contants.ts' appears to contain a typo. Consider renaming it to 'constants.ts' to align with standard naming conventions and improve clarity.

import { Components } from "rehype-react";

[NoopDog]

Awesome ! 😀