@amritanshu3011/mdx-renderer 1.0.3 → 1.0.4

package/README.md

@@ -0,0 +1,142 @@
+```markdown
+# MDX Renderer
+
+A robust, theme-able visualization and MDX rendering system for React applications. It supports both direct MDX file rendering and programmatic visualization injection (Intent-based UI).
+
+## Installation
+
+```bash
+npm install @amritanshu3011/mdx-renderer
+
+```
+
+## 1. Intent-Based Usage (Programmatic)
+
+Use this pattern when you want to render specific components based on backend data (e.g., from an LLM or API). This effectively turns JSON responses into React UI.
+
+### Step 1: Wrap your App
+
+```tsx
+import { VisualizationProvider } from '@amritanshu3011/mdx-renderer';
+
+function App() {
+  return (
+    <VisualizationProvider>
+      <YourAppContent />
+    </VisualizationProvider>
+  );
+}
+
+```
+
+### Step 2: Inject & Render
+
+```tsx
+import { useVisualizations, visualizationRegistry } from '@amritanshu3011/mdx-renderer';
+
+function ResultsPage() {
+  const { visualizations, addVisualization } = useVisualizations();
+
+  // Simulate receiving data from a backend
+  const handleLoadData = () => {
+    addVisualization({
+      type: 'pros_cons', // Key must match the registry (see table below)
+      data: {
+        title: 'React vs Angular',
+        pros: ['Virtual DOM', 'Huge Ecosystem'],
+        cons: ['Steep Learning Curve']
+      }
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={handleLoadData}>Load Analysis</button>
+
+      {/* Render the Dynamic Components */}
+      <div className="results-container">
+        {visualizations.map((viz, index) => {
+          const Component = visualizationRegistry[viz.type];
+          
+          if (!Component) return null;
+          
+          return <Component key={index} {...viz.data} />;
+        })}
+      </div>
+    </div>
+  );
+}
+
+```
+
+## 2. Standard MDX Usage
+
+Use this pattern if you are importing and rendering `.mdx` files directly.
+
+```tsx
+import { MDXRenderer, ThemeProvider } from '@amritanshu3011/mdx-renderer';
+import Content from './document.mdx';
+
+function DocumentPage() {
+  return (
+    <ThemeProvider>
+      <MDXRenderer>
+        <Content />
+      </MDXRenderer>
+    </ThemeProvider>
+  );
+}
+
+```
+
+## Component Registry & Data Structures
+
+When using the intent-based approach, your backend must return the correct `type` string.
+
+### Smart Analysis Blocks
+
+| Component | Type Key | Required Data Structure |
+| --- | --- | --- |
+| **Pros & Cons** | `pros_cons` | `{ title: string, pros: string[], cons: string[] }` |
+| **Comparison** | `comparison` | `{ title: string, items: [{ name, price, features[] }] }` |
+| **Flow Chart** | `flow` | `{ title: string, steps: [{ id, label, status }] }` |
+| **Concept Tree** | `concept_tree` | `{ title: string, data: { name, children: [] } }` |
+| **Sunburst** | `sunburst` | `{ title: string, data: { name, children: [{ name, value }] } }` |
+| **Composite** | `interactive_composite` | `{ title: string, selector: object, views: object }` |
+
+### Data Visualizations
+
+| Component | Type Key | Required Data Structure |
+| --- | --- | --- |
+| **Line Chart** | `line_chart` | `{ title: string, xAxisKey: string, data: object[], series: [{ key, color }] }` |
+
+## Theme Customization
+
+You can inject a custom theme to match your brand colors.
+
+```tsx
+import { ThemeProvider } from '@amritanshu3011/mdx-renderer';
+
+const myTheme = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    background: '#ffffff',
+    text: '#333333'
+  },
+  spacing: {
+    small: '8px',
+    medium: '16px',
+    large: '24px'
+  }
+};
+
+<ThemeProvider initialTheme={myTheme}>
+  <App />
+</ThemeProvider>
+
+```
+
+```
+
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amritanshu3011/mdx-renderer",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Reusable MDX visualization library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/README.md

@@ -1,102 +0,0 @@
-# MDX Renderer
-
-Reusable MDX rendering system with theme support and rich component library.
-
-## Installation
-```bash
-# If published as package
-npm install @yourorg/mdx-renderer
-
-# If local
-import { MDXRenderer, ThemeProvider } from './mdx-renderer';
-```
-
-## Quick Start
-```tsx
-import { MDXRenderer, ThemeProvider } from './mdx-renderer';
-import Content from './content.mdx';
-
-function App() {
-  return (
-    <ThemeProvider>
-      <MDXRenderer>
-        <Content />
-      </MDXRenderer>
-    </ThemeProvider>
-  );
-}
-```
-
-## Features
-
-✅ **Theme Support** - Light/dark themes with fallbacks
-✅ **Classless CSS** - Works without any class names
-✅ **Default Props** - All widgets work with sensible defaults
-✅ **Rich Components** - Text, data, interactive, and composite widgets
-✅ **Zero Config** - Works out of the box
-
-## Components
-
-### Text Widgets
-- `Heading` - Themed headings
-- `Paragraph` - Themed paragraphs
-- `Blockquote` - Quote blocks with optional author
-- `List` - Ordered/unordered lists
-
-### Data Widgets
-- `SimpleChart` - JSON display
-- `LineChart` - Line graphs (Recharts)
-- `BarChart` - Bar graphs (Recharts)
-
-### Interactive Widgets
-- `Accordion` - Collapsible content
-- `Tabs` - Tabbed interface
-
-### Composite Widgets
-- `Dashboard` - Grid layout for metrics
-- `DataExplorer` - Searchable data viewer
-
-## Usage in MDX
-```mdx
-import { Accordion, Tabs, Dashboard, DataExplorer } from './mdx-renderer';
-
-# My Document
-
-<Accordion title="Click to expand">
-  Hidden content here
-</Accordion>
-
-<Tabs tabs={[
-  { label: 'Tab 1', content: <div>Content 1</div> },
-  { label: 'Tab 2', content: <div>Content 2</div> }
-]} />
-
-<Dashboard title="Metrics" columns={3}>
-  <Card>Metric 1</Card>
-  <Card>Metric 2</Card>
-  <Card>Metric 3</Card>
-</Dashboard>
-
-<DataExplorer data={myData} searchable />
-```
-
-## Theme Customization
-```tsx
-const customTheme = {
-  colors: { primary: '#ff0000', ... },
-  spacing: { small: '4px', ... },
-  typography: { h1Size: '48px', ... }
-};
-
-<ThemeProvider initialTheme={customTheme}>
-  <MDXRenderer>
-    <Content />
-  </MDXRenderer>
-</ThemeProvider>
-```
-
-## Dependencies
-
-- `react` >= 18.0.0
-- `@mdx-js/react` >= 2.0.0
-- `recharts` >= 2.0.0 (for charts)