@sijanbhattarai/veda-utils 1.0.35

package/src/lib/index.ts

@@ -0,0 +1,89 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck : until veda-ui fixes its types
+'use client';
+
+import {
+  CatalogContent,
+  PageHero,
+  useFiltersWithQS,
+  ReactQueryProvider,
+  DevseedUiThemeProvider,
+  VedaUIProvider,
+  Block,
+  Prose,
+  Figure,
+  Caption,
+  Image,
+  MapBlock,
+  CompareImage,
+  PageHeader,
+  PageFooter,
+  NavItem,
+  NavItemType,
+  InternalNavLink,
+  ExplorationAndAnalysis,
+  DatasetSelectorModal,
+  timelineDatasetsAtom,
+  useTimelineDatasetAtom,
+  StoriesHubContent,
+  externalDatasetsAtom,
+  ScrollytellingBlock,
+  Chapter,
+  Chart,
+  DatasetData,
+  StoryData,
+  VedaData,
+  LegacyGlobalStyles,
+} from '@teamimpact/veda-ui';
+
+/**
+ * This file is to...
+ * Quickly identify client specific library components being used throughout this application
+ * And to mark these with the client side directive so other parts of the page are still Server Components and can stay as-is
+ */
+
+export {
+  // Providers
+  DevseedUiThemeProvider,
+  ReactQueryProvider,
+  VedaUIProvider,
+
+  // Components
+  CatalogContent,
+  PageHero,
+  PageHeader,
+  PageFooter,
+  ExplorationAndAnalysis,
+  DatasetSelectorModal,
+  StoriesHubContent,
+
+  // MDX Components
+  Block,
+  Prose,
+  Figure,
+  Caption,
+  Image,
+  MapBlock,
+  CompareImage,
+  ScrollytellingBlock,
+  Chapter,
+  Chart,
+
+  // Hooks
+  useFiltersWithQS,
+
+  // State
+  timelineDatasetsAtom,
+  useTimelineDatasetAtom,
+  externalDatasetsAtom,
+  LegacyGlobalStyles,
+};
+
+export type {
+  DatasetData,
+  NavItem,
+  NavItemType,
+  InternalNavLink,
+  StoryData,
+  VedaData,
+};

package/src/parseTwoColumn.tsx

@@ -0,0 +1,26 @@
+import { wrapComponent } from './wrapComponent';
+
+export const handleTwoColumn = (MDAST) => {
+  const newTwoColumn: any = [];
+  for (const twoColumnChildren of MDAST.children) {
+    if (
+      twoColumnChildren.children.some(
+        (e) => e.name === 'Chart' || e.name === 'Map',
+      )
+    ) {
+      for (const columnChild of twoColumnChildren.children) {
+        if (columnChild.name === 'Chart' || columnChild.name === 'Map') {
+          newTwoColumn.push(wrapComponent(columnChild));
+        }
+      }
+    } else {
+      newTwoColumn.push({
+        type: 'mdxJsxFlowElement',
+        name: 'Prose',
+        attributes: [],
+        children: [...twoColumnChildren.children],
+      });
+    }
+  }
+  return newTwoColumn;
+};

package/src/reserializeMDast.tsx

@@ -0,0 +1,107 @@
+import { toMarkdown } from 'mdast-util-to-markdown';
+import { mdxToMarkdown } from 'mdast-util-mdx';
+import { gfmToMarkdown } from 'mdast-util-gfm';
+import { mdxJsxToMarkdown } from 'mdast-util-mdx-jsx';
+import { extractImports } from './extractImports';
+
+import { groupByBreakIntoBlocks } from './groupElements';
+
+const blockItem = {
+  type: 'mdxJsxFlowElement',
+  name: 'Block',
+  children: [],
+};
+
+const proseItem = {
+  type: 'mdxJsxFlowElement',
+  name: 'Prose',
+  children: [],
+};
+
+//TO DO: Create seperate block prose containers
+
+const transformMdast = (node) => {
+  // if (!node || typeof node !== 'object') return node;
+  if (!node || node.type !== 'root' || !Array.isArray(node.children)) {
+    return node;
+  }
+  // if (node.type === 'root') {
+  //   const newChildren: any = [];
+  const newChildren: any[] = [];
+  for (const child of node.children) {
+    // Unwrap paragraphs that only contain a single JSX flow element.
+    // This is a common pattern to avoid unwanted <p> tags around components.
+    if (
+      child.type === 'paragraph' &&
+      child.children.length === 1 &&
+      child.children[0].type === 'mdxJsxFlowElement'
+    ) {
+      newChildren.push(child.children[0]);
+    } else {
+      newChildren.push(child);
+    }
+  }
+
+  //   for (const child of node.children) {
+  //     if (child.type === 'paragraph') {
+  //       // Elevate each text/html child to the root
+  //       for (const sub of child.children) {
+  //         switch (sub.type) {
+  //           case 'text':
+  //             newChildren.push({
+  //               type: 'paragraph',
+  //               children: [sub],
+  //             });
+  //             break;
+  //           case 'html':
+  //             newChildren.push(sub);
+  //             break;
+  //           case 'mdxJsxTextElement':
+  //             newChildren.push(sub);
+  //             break;
+  //           case 'mdxJsxFlowElement':
+  //             newChildren.push(sub);
+  //             break;
+  //           default:
+  //             newChildren.push(sub);
+  //             break;
+  //         }
+  //       }
+  //     } else {
+  //       // Recurse into child
+  //       const transformed = transformMdast(child);
+  //       newChildren.push(transformed);
+  //     }
+  //   }
+
+  //   return { ...node, children: newChildren };
+  // }
+
+  // // Handle recursion for non-root nodes with children
+  // if (Array.isArray(node.children)) {
+  //   return {
+  //     ...node,
+  //     children: node.children.map(transformMdast),
+  //   };
+  // }
+
+  // return node;
+  return { ...node, children: newChildren };
+};
+
+export const reserializedMdxContent = (MDAST) => {
+
+  const seperatedMDAST = transformMdast(MDAST);
+
+  const groupedMDSAT = groupByBreakIntoBlocks(seperatedMDAST);
+  extractImports(seperatedMDAST);
+
+  const newMDast = { ...seperatedMDAST, children: groupedMDSAT };
+  const mdastToMdx = (mdast) => {
+    return toMarkdown(mdast, {
+      extensions: [mdxToMarkdown(), gfmToMarkdown(), mdxJsxToMarkdown()],
+    });
+  };
+
+  return mdastToMdx(newMDast);
+};

package/src/wrapComponent.tsx

@@ -0,0 +1,25 @@
+export const wrapComponent = (mdastChild) => {
+  const generatedProps = mdastChild.attributes.reduce((acc, item) => {
+    acc[item.name] = item.value;
+    return acc;
+  }, {});
+
+  const wrappedComponent = {
+    type: 'mdxJsxFlowElement',
+    name: 'Figure',
+    attributes: [],
+    children: [
+      { ...mdastChild },
+      {
+        type: 'mdxJsxFlowElement',
+        name: 'Caption',
+        attributes: [
+          { name: 'attrAuthor', value: generatedProps.attrAuthor },
+          { name: 'attrUrl', value: generatedProps.attrUrl },
+        ],
+        children: [{ type: 'text', value: generatedProps.caption }],
+      },
+    ],
+  };
+  return wrappedComponent;
+};

package/tsconfig.json

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

package/vite.config.ts

@@ -0,0 +1,50 @@
+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: 'MDXEditorUtils',
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format === 'es' ? 'js' : 'umd.js'}`
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        '@mdxeditor/editor',
+        '@teamimpact/veda-ui',
+        '@trussworks/react-uswds',
+        'focus-trap-react',
+        '@uswds/uswds',
+        'unified',
+        'remark-parse',
+        'remark-stringify',
+        'mdast-util-from-markdown',
+        'mdast-util-mdx-jsx',
+        'mdast-util-gfm',
+        'micromark-extension-mdx-jsx',
+        'unist-util-visit'
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'ReactJSXRuntime'
+        }
+      }
+    },
+    target: 'esnext',
+    sourcemap: true
+  }
+});