@sijanbhattarai/veda-preview 1.0.35

package/dist/MDXPreview.d.ts

@@ -0,0 +1,6 @@
+interface MDXPreviewProps {
+    source: string;
+}
+export declare function SimpleMDXPreview({ source }: MDXPreviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MDXPreview.d.ts.map

package/dist/MDXPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MDXPreview.d.ts","sourceRoot":"","sources":["../src/MDXPreview.tsx"],"names":[],"mappings":"AA+GA,UAAU,eAAe;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB;AAwED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,EAAE,eAAe,2CAoB3D"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export declare const PreviewPlaceholder: () => null;
+export interface PreviewProps {
+    content?: string;
+    components?: Record<string, any>;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,YAE9B,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+const e = () => null;
+export {
+  e as PreviewPlaceholder
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Export preview components\n\n// If you have a main preview component, export it\n// export { default as MDXPreview } from './MDXPreview';\n\n// Placeholder exports for now - add your actual components later\nexport const PreviewPlaceholder = () => {\n  return null;\n};\n\nexport interface PreviewProps {\n  content?: string;\n  components?: Record<string, any>;\n}"],"names":["PreviewPlaceholder"],"mappings":"AAMO,MAAMA,IAAqB,MACzB;"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+(function(e,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(e=typeof globalThis<"u"?globalThis:e||self,i(e.MDXEditorPreview={}))})(this,function(e){"use strict";const i=()=>null;e.PreviewPlaceholder=i,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/index.ts"],"sourcesContent":["// Export preview components\n\n// If you have a main preview component, export it\n// export { default as MDXPreview } from './MDXPreview';\n\n// Placeholder exports for now - add your actual components later\nexport const PreviewPlaceholder = () => {\n  return null;\n};\n\nexport interface PreviewProps {\n  content?: string;\n  components?: Record<string, any>;\n}"],"names":["PreviewPlaceholder"],"mappings":"wOAMO,MAAMA,EAAqB,IACzB"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@sijanbhattarai/veda-preview",
+  "version": "1.0.35",
+  "description": "MDX Preview components",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
+    "next-mdx-remote": "^5.0.0",
+    "@sijanbhattarai/veda-datasets": "^1.0.6"
+  },
+  "dependencies": {
+    "@sijanbhattarai/veda-core": "^0.1.6",
+    "@sijanbhattarai/veda-ui": "^0.1.6",
+    "@sijanbhattarai/veda-maps": "^1.0.6",
+    "sugar-high": "^0.7.5"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "@vitejs/plugin-react": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NASA-IMPACT/mdx-editor-components.git"
+  },
+  "keywords": [
+    "mdx",
+    "editor",
+    "preview"
+  ],
+  "author": "NASA IMPACT",
+  "license": "MIT"
+}

package/src/MDXPreview.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import React, { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import { customComponents } from '@sijanbhattarai/mdx-editor-core';
+import { ChartWrapper } from './ChartPreview';
+import { DEFAULT_MAP_PROPS } from '@sijanbhattarai/mdx-editor-ui';
+import { highlight } from 'sugar-high';
+import Link from 'next/link';
+
+import { allAvailableDatasets } from '@sijanbhattarai/mdx-editor-datasets';
+
+import {
+  Block,
+  Prose,
+  Caption,
+  Chapter,
+  Figure,
+  Image,
+  LegacyGlobalStyles,
+} from './lib';
+// import { mockDatasets } from './MapPreview';
+import Providers from '@sijanbhattarai/mdx-editor-datasets';
+// Correctly import the default export from mdx-preview-map with error handling
+
+const ClientMapBlock = dynamic(() => import('@sijanbhattarai/mdx-editor-maps').then(mod => ({ default: mod.ClientMapBlock })), {
+  ssr: false,
+  loading: () => (
+    <div className=' flex items-center justify-center bg-blue-50'>
+      <div className='text-blue-500'>Loading map preview...</div>
+    </div>
+  ),
+});
+
+const MapWrapper = (props) => {
+  try {
+    // Handle center prop safely
+    let center;
+    try {
+      center =
+        typeof props.center === 'string' && props.center.startsWith('[')
+          ? JSON.parse(props.center)
+          : props.center || DEFAULT_MAP_PROPS.center;
+    } catch (error) {
+      console.warn('Error parsing center coordinates, using default:', error);
+      center = DEFAULT_MAP_PROPS.center;
+    }
+
+    // Handle zoom prop safely
+    let zoom;
+    try {
+      zoom =
+        typeof props.zoom === 'string'
+          ? parseFloat(props.zoom) || DEFAULT_MAP_PROPS.zoom
+          : props.zoom || DEFAULT_MAP_PROPS.zoom;
+    } catch (error) {
+      console.warn('Error parsing zoom level, using default:', error);
+      zoom = DEFAULT_MAP_PROPS.zoom;
+    }
+
+    return (
+      <ClientMapBlock
+        {...props}
+        center={center}
+        zoom={zoom}
+        datasetId={props.datasetId}
+        layerId={props.layerId}
+        dateTime={props.dateTime}
+        compareDateTime={props.compareDateTime}
+        compareLabel={props.compareLabel}
+        allAvailableDatasets={allAvailableDatasets}
+      />
+    );
+  } catch (error) {
+    console.error('Error rendering map:', error);
+    return (
+      <div className='h-[400px] flex items-center justify-center bg-red-50 border border-red-300 rounded'>
+        <div className='text-red-500'>Error rendering map component</div>
+      </div>
+    );
+  }
+};
+
+function Table({ data }: { data: any }) {
+  const headers = data.headers.map((header, index) => (
+    <th key={index}>{header}</th>
+  ));
+  const rows = data.rows.map((row, index) => (
+    <tr key={index}>
+      {row.map((cell, cellIndex) => (
+        <td key={cellIndex}>{cell}</td>
+      ))}
+    </tr>
+  ));
+
+  return (
+    <table>
+      <thead>
+        <tr>{headers}</tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </table>
+  );
+}
+
+function Code({ children, ...props }: { children: any }) {
+  const codeHTML = highlight(children);
+  return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />;
+}
+
+interface MDXPreviewProps {
+  source: string;
+}
+
+function slugify(str) {
+  if (str != null || str != undefined) {
+    return str
+      .toString()
+      .toLowerCase()
+      .trim() // Remove whitespace from both ends of a string
+      .replace(/\s+/g, '-') // Replace spaces with -
+      .replace(/&/g, '-and-') // Replace & with 'and'
+      .replace(/[^\w\-]+/g, '') // Remove all non-word characters except for -
+      .replace(/\-\-+/g, '-'); // Replace multiple - with single -
+  }
+}
+function createHeading(level) {
+  const Heading = ({ children }: { children: JSX.Element }) => {
+    const slug = slugify(children);
+    return React.createElement(
+      `h${level}`,
+      { id: slug },
+      [
+        React.createElement('a', {
+          href: `#${slug}`,
+          key: `link-${slug}`,
+          className: 'anchor',
+        }),
+      ],
+      children,
+    );
+  };
+
+  Heading.displayName = `Heading${level}`;
+
+  return Heading;
+}
+// Define all components used in MDX
+const components = {
+  ...customComponents,
+  // Basic markdown components
+  h1: createHeading(1),
+  h2: createHeading(2),
+  h3: createHeading(3),
+  h4: createHeading(4),
+  h5: createHeading(5),
+  h6: createHeading(6),
+  code: Code,
+  Table,
+  Block: Block,
+  Prose: Prose,
+  Caption: Caption,
+  Figure: Figure,
+  Image: Image,
+  Link: Link,
+  Chapter: Chapter,
+  TwoColumn: (props) => {
+    return (
+      <div className='grid-container maxw-full'>
+        <div className='grid-row grid-gap-lg'>{props.children}</div>
+      </div>
+    );
+  },
+  LeftColumn: (props) => {
+    return <div className='grid-col-6 '>{props.children}</div>;
+  },
+  RightColumn: (props) => {
+    return <div className='grid-col-6  '>{props.children}</div>;
+  },
+
+  Map: MapWrapper,
+  Chart: ChartWrapper,
+};
+
+export function SimpleMDXPreview({ source }: MDXPreviewProps) {
+  // Use an empty string as a default if source is undefined
+  // const datasets = getDatasetsMetadata();
+  const safeSource = source || '';
+
+  return (
+    <section>
+      <article className='prose'>
+        <Providers datasets={allAvailableDatasets}>
+          <LegacyGlobalStyles />
+
+          <Suspense
+            fallback={<div className='p-4'>Loading MDX preview...</div>}
+          >
+            <MDXRemote source={safeSource} components={components} />
+          </Suspense>
+        </Providers>
+      </article>
+    </section>
+  );
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+// Export preview components
+
+// If you have a main preview component, export it
+// export { default as MDXPreview } from './MDXPreview';
+
+// Placeholder exports for now - add your actual components later
+export const PreviewPlaceholder = () => {
+  return null;
+};
+
+export interface PreviewProps {
+  content?: string;
+  components?: Record<string, any>;
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules", "**/*.test.*"]
+}

package/vite.config.js

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+    })
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'MDXEditorPreview',
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'umd.js'}`
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'next',
+        'next/dynamic',
+        'next-mdx-remote',
+        '@sijanbhattarai/veda-charts',
+        '@sijanbhattarai/veda-maps'
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'ReactJSXRuntime'
+        }
+      }
+    },
+    target: 'esnext',
+    sourcemap: true
+  }
+});