@xsolla/xui-markdown 0.99.0 → 0.100.0

package/README.md

@@ -1,26 +1,269 @@
-# @xsolla/xui-markdown
+---
+title: Markdown
+subtitle: Render markdown content.
+description: A React component for rendering markdown content with theme-aware styling for headings, paragraphs, code blocks, and more.
+---
 
-Themed Markdown renderer that applies design system colours and typography.
+# Markdown
+
+A React component that renders markdown content with consistent, theme-aware styling. Uses `react-markdown` under the hood.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-markdown
+# or
 yarn add @xsolla/xui-markdown
 ```
 
-## Usage
+## Demo
+
+### Basic Markdown
+
+```tsx
+import * as React from 'react';
+import { Markdown } from '@xsolla/xui-markdown';
+
+export default function BasicMarkdown() {
+  const content = `
+# Hello World
+
+This is a paragraph with **bold** and *italic* text.
+
+- Item one
+- Item two
+- Item three
+  `;
+
+  return <Markdown>{content}</Markdown>;
+}
+```
+
+### Headings and Paragraphs
+
+```tsx
+import * as React from 'react';
+import { Markdown } from '@xsolla/xui-markdown';
+
+export default function HeadingsDemo() {
+  const content = `
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+
+This is a regular paragraph with some text content.
+
+Another paragraph following the first one.
+  `;
+
+  return <Markdown>{content}</Markdown>;
+}
+```
+
+### Code Blocks
+
+```tsx
+import * as React from 'react';
+import { Markdown } from '@xsolla/xui-markdown';
+
+export default function CodeDemo() {
+  const content = `
+Inline code: \`const x = 1;\`
+
+Code block:
+\`\`\`javascript
+function greet(name) {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+  `;
+
+  return <Markdown>{content}</Markdown>;
+}
+```
+
+## Anatomy
+
+```jsx
+import { Markdown } from '@xsolla/xui-markdown';
+
+<Markdown
+  className="custom-markdown"  // CSS class
+>
+  {markdownContent}
+</Markdown>
+```
+
+## Examples
+
+### Rich Content
+
+```tsx
+import * as React from 'react';
+import { Markdown } from '@xsolla/xui-markdown';
+
+export default function RichContent() {
+  const content = `
+# Product Documentation
+
+## Getting Started
+
+Follow these steps to integrate our SDK:
+
+1. Install the package
+2. Configure your API keys
+3. Initialize the SDK
+
+> **Note:** Make sure to keep your API keys secure and never commit them to version control.
+
+### Code Example
+
+\`\`\`javascript
+import { SDK } from '@example/sdk';
+
+const client = new SDK({
+  apiKey: process.env.API_KEY,
+});
+
+await client.initialize();
+\`\`\`
+
+### Links and Images
+
+Visit our [documentation](https://docs.example.com) for more details.
+
+![Example diagram](https://example.com/diagram.png)
+  `;
+
+  return <Markdown>{content}</Markdown>;
+}
+```
+
+### Dynamic Content
 
 ```tsx
+import * as React from 'react';
 import { Markdown } from '@xsolla/xui-markdown';
 
-<Markdown>## Hello World\n\nThis is **markdown** content.</Markdown>
+export default function DynamicContent() {
+  const [content, setContent] = React.useState('# Hello\n\nStart typing...');
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+      <textarea
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        style={{ height: 300, fontFamily: 'monospace' }}
+      />
+      <div style={{ background: '#1a1a1a', padding: 16, borderRadius: 8 }}>
+        <Markdown>{content}</Markdown>
+      </div>
+    </div>
+  );
+}
 ```
 
-## Props
+### Article Display
+
+```tsx
+import * as React from 'react';
+import { Markdown } from '@xsolla/xui-markdown';
+
+export default function ArticleDisplay() {
+  const article = `
+# Understanding Game Monetization
+
+## Introduction
+
+Game monetization is a critical aspect of game development that determines how a game generates revenue.
+
+## Key Strategies
+
+### In-App Purchases
+
+In-app purchases (IAP) allow players to buy virtual goods:
+
+- Cosmetic items
+- Power-ups
+- Premium currency
+- Battle passes
+
+### Subscription Models
+
+Subscription models provide ongoing value:
+
+1. **Monthly subscriptions** - Regular content updates
+2. **Season passes** - Time-limited content access
+3. **Premium tiers** - Enhanced features
+
+> "The best monetization strategies provide value to players while generating sustainable revenue."
+
+## Conclusion
+
+Choose a monetization strategy that aligns with your game design and player expectations.
+  `;
+
+  return (
+    <article style={{ maxWidth: 800, margin: '0 auto' }}>
+      <Markdown>{article}</Markdown>
+    </article>
+  );
+}
+```
+
+## API Reference
 
 ### Markdown
 
+**MarkdownProps:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `string` | — | Markdown string to render |
-| `className` | `string` | — | Optional CSS class applied to the container |
+| :--- | :--- | :------ | :---------- |
+| children | `string` | - | Markdown content to render. |
+| className | `string` | - | CSS class name for the container. |
+
+## Supported Markdown Syntax
+
+| Element | Syntax |
+| :------ | :----- |
+| Heading 1 | `# Heading` |
+| Heading 2 | `## Heading` |
+| Heading 3 | `### Heading` |
+| Heading 4 | `#### Heading` |
+| Bold | `**text**` |
+| Italic | `*text*` |
+| Link | `[text](url)` |
+| Image | `![alt](url)` |
+| Inline code | `` `code` `` |
+| Code block | ```` ```language ```` |
+| Blockquote | `> quote` |
+| Unordered list | `- item` |
+| Ordered list | `1. item` |
+
+## Typography Styles
+
+| Element | Font Size | Line Height | Weight |
+| :------ | :-------- | :---------- | :----- |
+| h1 | 40px | 48px | 700 |
+| h2 | 32px | 38px | 700 |
+| h3 | 28px | 34px | 700 |
+| h4 | 24px | 28px | 700 |
+| p | 16px | 22px | 400 |
+| li | 16px | 22px | 400 |
+
+## Theming
+
+The Markdown component automatically uses theme colors from `XUIProvider`:
+
+- Text color from `content.primary`
+- Link color from `control.link.primary`
+- Blockquote border from `border.brand`
+- Code background with subtle transparency
+
+## Accessibility
+
+- Headings create a proper document outline
+- Links are styled with visible focus states
+- Images require alt text in markdown syntax
+- Code blocks are contained in `<pre>` elements for proper semantics

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-markdown",
-  "version": "0.99.0",
+  "version": "0.100.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.99.0",
-    "@xsolla/xui-primitives-core": "0.99.0",
+    "@xsolla/xui-core": "0.100.0",
+    "@xsolla/xui-primitives-core": "0.100.0",
     "react-markdown": "^9.0.0"
   },
   "peerDependencies": {