@sijanbhattarai/veda-utils 1.0.35

package/src/CreateInterface.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import {
+  TextInput,
+  TextInputMask,
+  Textarea,
+  Label,
+  DatePicker,
+  Checkbox,
+  Select,
+} from '@trussworks/react-uswds';
+import {
+  handleMapDateValidation,
+  handleMapArrayValidation,
+  handleChartDateValidation,
+} from './inputValidation';
+
+interface FieldProps {
+  fieldName: string;
+  value: string;
+  hint?: string;
+  onChange: (value: string) => void;
+  isRequired?: boolean;
+  isDate?: boolean;
+  numeric?: boolean;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
+  type?: string;
+  componentProps: any;
+  propName: string;
+  customClass?: string;
+  placeHolder?: string;
+  draftInputs?: any;
+  inputErrors?: any;
+  setDraftInputs?: (value: any) => void;
+  setInputErrors?: (value: any) => void;
+  options?: string[];
+}
+const checkRequired = (isRequired, value) => {
+  return isRequired && !value ? { validationStatus: 'error' } : '';
+};
+
+const colorSchemes = [
+  'Blues',
+  'Greens',
+  'Greys',
+  'Oranges',
+  'Purples',
+  'Reds',
+  'Turbo',
+  'Viridis',
+  'Inferno',
+  'Magma',
+  'Plasma',
+  'Cividis',
+  'Warm',
+  'Cool',
+  'CubehelixDefault',
+];
+
+const setInput = (props) => {
+  const {
+    value,
+    isRequired,
+    type,
+    fieldName,
+    hint,
+    onChange,
+    componentProps,
+    propName,
+    placeHolder,
+    validateAgainst,
+    draftInputs,
+    setDraftInputs,
+    inputErrors,
+    setInputErrors,
+    options,
+  } = props;
+
+if (options && Array.isArray(options)) {
+    return (
+      <>
+        <Label htmlFor={propName} className='margin-top-2'>
+          {fieldName}
+        </Label>
+        <span className='usa-hint'>{hint}</span>
+        <Select
+          id={propName}
+          name={propName}
+          value={value}
+          onChange={(e) =>
+            onChange({ ...componentProps, [propName]: e.target.value })
+          }
+          {...checkRequired(isRequired, value)}
+        >
+          <option value=''>- Select option -</option>
+          {options.map((option) => {
+            // Check if option is a string or an object with value/label
+            const value = typeof option === 'object' ? option.value : option;
+            const label = typeof option === 'object' ? option.label : option;
+
+            return (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            );
+          })}
+        </Select>
+      </>
+    );
+  }
+
+  const cleanedType = type !== undefined && type.toLowerCase();
+
+  const [draft, setDraft] = useState(value);
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+
+    if (propName === 'dateFormat' && draft != draftInputs.draftDateFormat) {
+      setDraftInputs({ ...draftInputs, draftDateFormat: draft });
+    }
+    if (
+      propName === 'highlightStart' &&
+      draft != draftInputs.draftHighlightStart
+    ) {
+      setDraftInputs({ ...draftInputs, draftHighlightStart: draft });
+    }
+    if (propName === 'highlightEnd' && draft != draftInputs.draftHighlightEnd) {
+      setDraftInputs({ ...draftInputs, draftHighlightEnd: draft });
+    }
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+
+      if (validateAgainst) {
+        if (
+          propName === 'dateFormat' ||
+          propName === 'highlightStart' ||
+          propName === 'highlightEnd'
+        ) {
+          handleChartDateValidation(
+            propName,
+            draftInputs,
+            setInputErrors,
+            inputErrors,
+            draft,
+            onChange,
+            componentProps,
+          );
+        } else if (validateAgainst === 'defaultDateFormat') {
+          handleMapDateValidation(
+            propName,
+            draftInputs,
+            inputErrors,
+            setInputErrors,
+            draft,
+            onChange,
+            componentProps,
+          );
+        } else if (validateAgainst === 'centerFormat') {
+          handleMapArrayValidation(
+            propName,
+            draftInputs,
+            inputErrors,
+            setInputErrors,
+            draft,
+            onChange,
+            componentProps,
+          );
+        } else {
+          onChange({ ...componentProps, [propName]: draft });
+        }
+      }
+    }, 400);
+
+    return () => clearTimeout(timeoutRef.current);
+  }, [draft, draftInputs]);
+
+  //Format date and submitted dates need to work or else the chart will throw an error.
+
+  switch (cleanedType) {
+    case 'date':
+      return (
+        //CHORE: Need to clean up or delete
+        <>
+          <Label htmlFor='input-type-text' className='margin-top-2'>
+            {fieldName}
+          </Label>
+
+          <span className='usa-hint'>{hint}</span>
+
+          <DatePicker
+            defaultValue={value}
+            onChange={(e) => console.log('DatePicker', e)}
+            {...checkRequired(isRequired, value)}
+          />
+        </>
+      );
+      break;
+    case 'checkbox':
+      return (
+        <Checkbox
+          id={fieldName}
+          name='checkbox'
+          label={fieldName}
+          onChange={(e) =>
+            onChange({ ...componentProps, [propName]: e.target.value })
+          }
+        />
+      );
+      break;
+    case 'select':
+      return (
+        <>
+          <Label htmlFor='input-type-text' className='margin-top-2'>
+            {fieldName}
+          </Label>
+          <span className='usa-hint'>{hint}</span>
+          <Select
+            id={fieldName}
+            name={fieldName}
+            onChange={(e) =>
+              onChange({ ...componentProps, [propName]: e.target.value })
+            }
+          >
+            {colorSchemes.map((scheme) => {
+              return (
+                <option key={scheme} value={scheme}>
+                  {scheme}
+                </option>
+              );
+            })}
+          </Select>
+        </>
+      );
+      break;
+    case 'area':
+      return (
+        <>
+          <Label htmlFor='input-type-text' className='margin-top-2'>
+            {fieldName}
+          </Label>
+          <span className='usa-hint'>{hint}</span>
+          <Textarea
+            id='input-type-text'
+            name='input-type-text'
+            value={value}
+            onChange={(e) => {
+              onChange({ ...componentProps, [propName]: e.target.value });
+            }}
+            className=''
+            {...checkRequired(isRequired, value)}
+          />
+        </>
+      );
+      break;
+    default:
+      return (
+        <>
+          <Label htmlFor='input-type-text' className='margin-top-2'>
+            {fieldName}
+          </Label>
+
+          <span className='usa-hint'>{hint}</span>
+          <TextInput
+            id='input-type-text'
+            name='input-type-text'
+            type='text'
+            value={validateAgainst ? draft : value}
+            onChange={(e) => {
+              if (validateAgainst) {
+
+                setDraft(e.target.value);
+              } else {
+
+                onChange({ ...componentProps, [propName]: e.target.value });
+              }
+            }}
+            placeholder={placeHolder}
+            {...checkRequired(isRequired, value)}
+            validationStatus={
+              validateAgainst && (inputErrors[propName] ? 'error' : undefined)
+            }
+          />
+        </>
+      );
+  }
+};
+export const InputField: React.FC<FieldProps> = (props) => {
+  const { propName, customClass } = props;
+
+  return (
+    <div key={propName} className={customClass}>
+      {setInput(props)}
+    </div>
+  );
+};

package/src/MapContext.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+import { LexicalEditor, LexicalNode } from 'lexical';
+
+interface MapContextValue {
+  parentEditor: LexicalEditor;
+  lexicalNode: LexicalNode;
+}
+
+const MapContext = createContext<MapContextValue | null>(null);
+
+export const MapContextProvider = ({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: MapContextValue;
+}) => {
+  return <MapContext.Provider value={value}>{children}</MapContext.Provider>;
+};
+
+export const useMapContext = () => {
+  const context = useContext(MapContext);
+  if (!context) {
+    throw new Error('useMapContext must be used within a MapContextProvider');
+  }
+  return context;
+};

package/src/content.tsx

@@ -0,0 +1,18 @@
+import type { DatasetData, StoryData } from './lib';
+
+interface MetadataWithSlug<T> {
+  metadata: T;
+  slug: string;
+}
+
+interface WithContent<T> extends MetadataWithSlug<T> {
+  content: string;
+}
+
+export type DatasetMetadata = MetadataWithSlug<DatasetData>;
+export type DatasetWithContent = WithContent<DatasetData>;
+
+export type StoryMetadata = MetadataWithSlug<StoryData>;
+export type StoryWithContent = WithContent<StoryData>;
+
+export type ContentMetadata = MetadataWithSlug<DatasetData | StoryData>;

package/src/data.tsx

@@ -0,0 +1,36 @@
+import type { DatasetData, StoryData, VedaData } from '@lib';
+import type { DatasetMetadata, DatasetWithContent } from './content';
+
+export function processTaxonomies(data): DatasetData | StoryData {
+  const updatedTax = data.taxonomy.map((t) => {
+    const updatedVals = t.values.map((v) => {
+      return {
+        id: v.replace(/ /g, '_').toLowerCase(),
+        name: v,
+      };
+    });
+    return { ...t, values: updatedVals };
+  });
+  return { ...data, taxonomy: updatedTax };
+}
+
+export const transformToDatasetsList = (
+  content: DatasetMetadata[],
+): DatasetData[] => {
+  return content?.map((post) => ({
+    ...post.metadata,
+  }));
+};
+
+export const transformToVedaData = (
+  datasets: DatasetMetadata[] | undefined,
+): VedaData<DatasetData> => {
+  const transformed = {};
+  datasets?.map((dataset) => {
+    const id = dataset.metadata.id;
+    transformed[id] = {
+      data: dataset.metadata,
+    };
+  });
+  return transformed;
+};

package/src/extractImports.tsx

@@ -0,0 +1,45 @@
+export const extractImports = (ast) => {
+  const imports: any = [];
+  const visit = (node, parent, index) => {
+    // If it's a text node with 'import' in its value
+    if (
+      node.type === 'text' &&
+      node.value &&
+      node.value.includes('import') &&
+      node.value.includes('from')
+    ) {
+      if (
+        parent &&
+        Array.isArray(parent.children) &&
+        typeof index === 'number'
+      ) {
+        // Remove the node from its original position
+        parent.children.splice(index, 1);
+        // Wrap it in a paragraph or keep as-is depending on your use case
+        imports.push({
+          type: 'paragraph',
+          children: [node],
+        });
+        return; // Skip deeper recursion into removed node
+      }
+    }
+
+    // Recurse through children if they exist
+    if (node.children && Array.isArray(node.children)) {
+      // Copy to avoid mutation issues when removing nodes
+      const childrenCopy = [...node.children];
+      for (let i = 0; i < childrenCopy.length; i++) {
+        visit(childrenCopy[i], node, i);
+      }
+    }
+  };
+
+  visit(ast, null, null);
+
+  // Prepend extracted imports to top-level children
+  if (ast.type === 'root' && Array.isArray(ast.children)) {
+    ast.children = [...imports, ...ast.children];
+  }
+
+  return ast;
+};

package/src/groupElements.tsx

@@ -0,0 +1,90 @@
+import { handleTwoColumn } from './parseTwoColumn';
+import { wrapComponent } from './wrapComponent';
+
+export const groupByBreakIntoBlocks = (ast) => {
+  const result: any = [];
+  const proseWrapper = (children) => {
+    return {
+      type: 'mdxJsxFlowElement',
+      name: 'Prose',
+      children: [...children],
+    };
+  };
+
+  const groupChildren = (children) => {
+    const groups: any = [];
+    let currentGroup: any = [];
+
+    for (const child of children) {
+      if (
+        child.type === 'mdxJsxTextElement' ||
+        child.type === 'mdxJsxFlowElement'
+      ) {
+        if (child.name === 'Break') {
+          if (currentGroup.length > 0) {
+            groups.push([proseWrapper(currentGroup)]);
+            currentGroup = [];
+          }
+        } else if (
+          child.name === 'Block' ||
+          child.name === 'Chart' ||
+          child.name === 'Map' ||
+          child.name === 'MapBlock' ||  
+          child.name === 'TwoColumn'
+        ) {
+          groups.push([proseWrapper(currentGroup)]);
+
+          if (child.name === 'Chart' || child.name === 'Map') {
+            groups.push([wrapComponent(child)]);
+          } else if (child.name === 'TwoColumn') {
+            const parsedColumn = handleTwoColumn(child);
+            groups.push(parsedColumn);
+          }
+          currentGroup = [];
+        }
+      } else {
+        currentGroup.push(child);
+      }
+    }
+
+    if (currentGroup.length > 0) {
+      groups.push([...currentGroup]);
+    }
+    return groups;
+  };
+
+  if (ast.type === 'root' && Array.isArray(ast.children)) {
+    const groups = groupChildren(ast.children);
+
+    for (const group of groups) {
+      // Check for prose wrapper inside group If no prose wrapper
+      // then wrap group inside prose object before adding to block element
+
+      if (
+        group.some((item) => {
+          return item.name === 'Prose';
+        })
+      ) {
+        result.push({
+          type: 'mdxJsxFlowElement',
+          name: 'Block',
+          children: [...group],
+        });
+      } else {
+        result.push({
+          type: 'mdxJsxFlowElement',
+          name: 'Block',
+          children: [
+            {
+              type: 'mdxJsxFlowElement',
+              name: 'Prose',
+              children: [...group],
+            },
+          ],
+        });
+      }
+    }
+  }
+
+  return result;
+};

package/src/index.ts

@@ -0,0 +1,13 @@
+// Export all utilities
+export * from './reserializeMDast';
+export * from './parseTwoColumn';
+export * from './ChartContext';
+export * from './MapContext';
+export * from './CreateInterface';
+export * from './extractImports';
+export * from './groupElements';
+export * from './inputValidation';
+export * from './wrapComponent';
+export * from './data';
+export * from './content';
+export * from './lib';

package/src/inputValidation.tsx

@@ -0,0 +1,148 @@
+export const inputValidation = () => {};
+
+export const dateStringToregex = (format) => {
+  const tokens = {
+    '%d': '(0[1-9]|[12][0-9]|3[01])',
+    '%m': '(0[1-9]|1[0-2])',
+    '%Y': '\\d{4}',
+    '%y': '\\d{2}',
+    '%H': '([01][0-9]|2[0-3])',
+    '%M': '([0-5][0-9])',
+    '%S': '([0-5][0-9])',
+  };
+
+  const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  let pattern = '';
+
+  for (let i = 0; i < format.length; i++) {
+    if (format[i] === '%' && i < format.length - 1) {
+      const directive = format[i] + format[i + 1];
+      pattern += tokens[directive] || escape(directive); // unknown: treat literally
+      i++; // skip the directive's second char
+    } else {
+      pattern += escape(format[i]);
+    }
+  }
+
+  return new RegExp(`^${pattern}$`);
+};
+
+export const dateFormatValidation = (format, input) => {
+  const regexToTest = dateStringToregex(format);
+
+  //return false no errors if regex passes, return true there are erros if fails
+  return regexToTest.test(input) ? false : true;
+};
+
+export const handleChartDateValidation = (
+  propName,
+  draftInputs,
+  setInputErrors,
+  inputErrors,
+  draft,
+  onChange,
+  chartProps,
+) => {
+  if (propName === 'highlightStart' || propName === 'highlightEnd') {
+    if (dateFormatValidation(draftInputs.draftDateFormat, draft) === false) {
+      setInputErrors({
+        highlightStart: dateFormatValidation(
+          draftInputs.draftDateFormat,
+          draftInputs.draftHighlightStart,
+        ),
+        highlightEnd: dateFormatValidation(
+          draftInputs.draftDateFormat,
+          draftInputs.draftHighlightEnd,
+        ),
+      });
+      if (
+        inputErrors.highlightStart == false &&
+        inputErrors.highlightEnd == false
+      ) {
+        onChange({
+          ...chartProps,
+          dateFormat: draftInputs.draftDateFormat,
+          highlightStart: draftInputs.draftHighlightStart,
+          highlightEnd: draftInputs.draftHighlightEnd,
+        });
+      }
+    } else {
+      setInputErrors({
+        highlightStart: dateFormatValidation(
+          draftInputs.draftDateFormat,
+          draftInputs.draftHighlightStart,
+        ),
+        highlightEnd: dateFormatValidation(
+          draftInputs.draftDateFormat,
+          draftInputs.draftHighlightEnd,
+        ),
+      });
+    }
+  } else if (propName === 'dateFormat') {
+    setInputErrors({
+      highlightStart: dateFormatValidation(draft, chartProps.highlightStart),
+      highlightEnd: dateFormatValidation(draft, chartProps.highlightEnd),
+    });
+  } else if (
+    inputErrors.highlightStart == false &&
+    inputErrors.highlightEnd == false
+  ) {
+    onChange({
+      ...chartProps,
+      dateFormat: draftInputs.draftDateFormat,
+      highlightStart: draftInputs.draftHighlightStart,
+      highlightEnd: draftInputs.draftHighlightEnd,
+    });
+  }
+};
+export const handleMapDateValidation = (
+  propName,
+  draftInputs,
+  inputErrors,
+  setInputErrors,
+  draft,
+  onChange,
+  componentProps,
+) => {
+  if (
+    dateFormatValidation(draftInputs.defaultDateFormat, draft) === false ||
+    draft === ''
+  ) {
+    setInputErrors({ ...inputErrors, [propName]: false });
+    onChange({ ...componentProps, [propName]: draft });
+  } else {
+    setInputErrors({ ...inputErrors, [propName]: true });
+  }
+};
+
+export const handleMapArrayValidation = (
+  propName,
+  draftInputs,
+  inputErrors,
+  setInputErrors,
+  draft,
+  onChange,
+  componentProps,
+) => {
+  const numberPattern =
+    /^\[[+-]?(0|[1-9][0-9]*)(\.[0-9]+)?(?:,\s*[+-]?(0|[1-9][0-9]*)(\.[0-9]+)?)*\]$/;
+  //This regex checks that the input is wrapped in [...]
+  //Checks for no trailing decimal points ex: -91.
+  //Checks that there is no leading 0 unless followed by a . ex 0.12 or 0 are acceptable
+  const cleanedDraft = draft.replace(/\s/g, '');
+  if (numberPattern.test(cleanedDraft)) {
+    const parsedValues = JSON.parse(cleanedDraft);
+    const checkLong = (long) => (long <= 180 && long >= -180 ? true : false);
+    const checkLat = (lat) => (lat <= 90 && lat >= -90 ? true : false);
+    //validating upper and lower limits of long and lat
+    if (checkLong(parsedValues[0]) && checkLat(parsedValues[1])) {
+      setInputErrors({ ...inputErrors, [propName]: false });
+      onChange({ ...componentProps, [propName]: draft });
+    } else {
+      setInputErrors({ ...inputErrors, [propName]: true });
+    }
+  } else {
+    setInputErrors({ ...inputErrors, [propName]: true });
+  }
+};