feat(components): added Markdown component (#DS-5225)

package.json

@@ -99,7 +99,6 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.68.0",
-    "remark-gfm": "^4.0.1",
     "rimraf": "^6.0.1",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^10.3.6",

packages/components/package.json

@@ -30,14 +30,16 @@
   },
   "sideEffects": false,
   "dependencies": {
+    "@internationalized/date": "^3.12.0",
     "@koobiq/design-tokens": "^3.17.2",
     "@koobiq/logger": "workspace:*",
     "@koobiq/react-core": "workspace:*",
     "@koobiq/react-icons": "^12.0.0",
     "@koobiq/react-primitives": "workspace:*",
     "@types/react-transition-group": "^4.4.12",
+    "react-markdown": "^10.1.0",
     "react-transition-group": "^4.4.5",
-    "@internationalized/date": "^3.12.0"
+    "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.17.2",

packages/components/src/components/Markdown/Markdown.mdx

@@ -0,0 +1,92 @@
+import {
+  Meta,
+  Story,
+  Props,
+  Status,
+} from '../../../../../.storybook/components';
+
+import * as Stories from './Markdown.stories';
+
+<Meta of={Stories} />
+
+# Markdown
+
+<Status variant="experimental" />
+
+`Markdown` renders a Markdown string as HTML.
+
+## Import
+
+```tsx
+import { Markdown } from '@koobiq/react-components';
+```
+
+## Usage
+
+Pass the Markdown text as `children`.
+
+<Story of={Stories.Overview} />
+
+## Headers
+
+<Story of={Stories.Headers} />
+
+### Headers combinations
+
+<Story of={Stories.HeadersCombinations} />
+
+## Paragraph
+
+<Story of={Stories.Paragraph} />
+
+## Text emphasis
+
+<Story of={Stories.TextEmphasis} />
+
+## Blockquote
+
+<Story of={Stories.Blockquote} />
+
+## Lists
+
+<Story of={Stories.Lists} />
+
+## Inline code
+
+<Story of={Stories.InlineCode} />
+
+## Code block
+
+<Story of={Stories.CodeBlock} />
+
+## Horizontal rule
+
+<Story of={Stories.Divider} />
+
+## Link
+
+<Story of={Stories.Link} />
+
+## Image
+
+<Story of={Stories.Image} />
+
+## Table
+
+<Story of={Stories.Table} />
+
+## Line break
+
+To create a line break, add two trailing spaces at the end of the line.
+
+<Story of={Stories.LineBreak} />
+
+## Large article
+
+A larger combined example, useful as a visual sanity check for spacing and typography.
+
+<Story of={Stories.Article} />
+
+## Props
+
+<Props of={Stories.Overview} />