@amritanshu3011/mdx-renderer 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -0
- package/package.json +25 -0
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# MDX Renderer
|
|
2
|
+
|
|
3
|
+
Reusable MDX rendering system with theme support and rich component library.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
```bash
|
|
7
|
+
# If published as package
|
|
8
|
+
npm install @yourorg/mdx-renderer
|
|
9
|
+
|
|
10
|
+
# If local
|
|
11
|
+
import { MDXRenderer, ThemeProvider } from './mdx-renderer';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Quick Start
|
|
15
|
+
```tsx
|
|
16
|
+
import { MDXRenderer, ThemeProvider } from './mdx-renderer';
|
|
17
|
+
import Content from './content.mdx';
|
|
18
|
+
|
|
19
|
+
function App() {
|
|
20
|
+
return (
|
|
21
|
+
<ThemeProvider>
|
|
22
|
+
<MDXRenderer>
|
|
23
|
+
<Content />
|
|
24
|
+
</MDXRenderer>
|
|
25
|
+
</ThemeProvider>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Features
|
|
31
|
+
|
|
32
|
+
✅ **Theme Support** - Light/dark themes with fallbacks
|
|
33
|
+
✅ **Classless CSS** - Works without any class names
|
|
34
|
+
✅ **Default Props** - All widgets work with sensible defaults
|
|
35
|
+
✅ **Rich Components** - Text, data, interactive, and composite widgets
|
|
36
|
+
✅ **Zero Config** - Works out of the box
|
|
37
|
+
|
|
38
|
+
## Components
|
|
39
|
+
|
|
40
|
+
### Text Widgets
|
|
41
|
+
- `Heading` - Themed headings
|
|
42
|
+
- `Paragraph` - Themed paragraphs
|
|
43
|
+
- `Blockquote` - Quote blocks with optional author
|
|
44
|
+
- `List` - Ordered/unordered lists
|
|
45
|
+
|
|
46
|
+
### Data Widgets
|
|
47
|
+
- `SimpleChart` - JSON display
|
|
48
|
+
- `LineChart` - Line graphs (Recharts)
|
|
49
|
+
- `BarChart` - Bar graphs (Recharts)
|
|
50
|
+
|
|
51
|
+
### Interactive Widgets
|
|
52
|
+
- `Accordion` - Collapsible content
|
|
53
|
+
- `Tabs` - Tabbed interface
|
|
54
|
+
|
|
55
|
+
### Composite Widgets
|
|
56
|
+
- `Dashboard` - Grid layout for metrics
|
|
57
|
+
- `DataExplorer` - Searchable data viewer
|
|
58
|
+
|
|
59
|
+
## Usage in MDX
|
|
60
|
+
```mdx
|
|
61
|
+
import { Accordion, Tabs, Dashboard, DataExplorer } from './mdx-renderer';
|
|
62
|
+
|
|
63
|
+
# My Document
|
|
64
|
+
|
|
65
|
+
<Accordion title="Click to expand">
|
|
66
|
+
Hidden content here
|
|
67
|
+
</Accordion>
|
|
68
|
+
|
|
69
|
+
<Tabs tabs={[
|
|
70
|
+
{ label: 'Tab 1', content: <div>Content 1</div> },
|
|
71
|
+
{ label: 'Tab 2', content: <div>Content 2</div> }
|
|
72
|
+
]} />
|
|
73
|
+
|
|
74
|
+
<Dashboard title="Metrics" columns={3}>
|
|
75
|
+
<Card>Metric 1</Card>
|
|
76
|
+
<Card>Metric 2</Card>
|
|
77
|
+
<Card>Metric 3</Card>
|
|
78
|
+
</Dashboard>
|
|
79
|
+
|
|
80
|
+
<DataExplorer data={myData} searchable />
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Theme Customization
|
|
84
|
+
```tsx
|
|
85
|
+
const customTheme = {
|
|
86
|
+
colors: { primary: '#ff0000', ... },
|
|
87
|
+
spacing: { small: '4px', ... },
|
|
88
|
+
typography: { h1Size: '48px', ... }
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
<ThemeProvider initialTheme={customTheme}>
|
|
92
|
+
<MDXRenderer>
|
|
93
|
+
<Content />
|
|
94
|
+
</MDXRenderer>
|
|
95
|
+
</ThemeProvider>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Dependencies
|
|
99
|
+
|
|
100
|
+
- `react` >= 18.0.0
|
|
101
|
+
- `@mdx-js/react` >= 2.0.0
|
|
102
|
+
- `recharts` >= 2.0.0 (for charts)
|
package/package.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@amritanshu3011/mdx-renderer",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Reusable MDX visualization library",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "tsc"
|
|
12
|
+
},
|
|
13
|
+
"author": "Amritanshu",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"react": ">=18.0.0",
|
|
17
|
+
"react-dom": ">=18.0.0",
|
|
18
|
+
"@mdx-js/react": ">=2.0.0",
|
|
19
|
+
"recharts": ">=2.0.0"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"typescript": "^5.0.0",
|
|
23
|
+
"@types/react": "^18.0.0"
|
|
24
|
+
}
|
|
25
|
+
}
|