@cdc/editor 4.25.7 → 4.25.10

package/example/valid-scatterplot.csv

@@ -0,0 +1,17 @@
+x,y1,y2,y3,y4
+1,8,37,72,82
+2,2,30,75,83
+3,15,42,51,95
+4,10,38,61,96
+5,1,38,66,86
+60,6,37,70,85
+10,19,47,59,91
+24,18,32,68,89
+3,7,38,74,89
+26,10,39,56,91
+42,16,38,55,76
+32,20,46,52,94
+11,9,41,57,86
+22,10,47,56,80
+73,1,36,71,94
+23,13,30,66,78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.25.7",
+  "version": "4.25.10",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -25,13 +25,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.25.7",
-    "@cdc/core": "^4.25.7",
-    "@cdc/dashboard": "^4.25.7",
-    "@cdc/data-bite": "^4.25.7",
-    "@cdc/map": "^4.25.7",
-    "@cdc/markup-include": "^4.25.7",
-    "@cdc/waffle-chart": "^4.25.7",
+    "@cdc/chart": "^4.25.10",
+    "@cdc/core": "^4.25.10",
+    "@cdc/dashboard": "^4.25.10",
+    "@cdc/data-bite": "^4.25.10",
+    "@cdc/map": "^4.25.10",
+    "@cdc/markup-include": "^4.25.10",
+    "@cdc/waffle-chart": "^4.25.10",
     "axios": "^1.9.0",
     "d3": "^7.9.0",
     "react-dropzone": "^14.3.8",
@@ -41,5 +41,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d"
+  "devDependencies": {
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^4.4.11",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^2.4.0"
+  },
+  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
 }

package/src/CdcEditor.tsx

@@ -7,7 +7,7 @@ import ResizeObserver from 'resize-observer-polyfill'
 import getViewport from '@cdc/core/helpers/getViewport'
 
 import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
-import ConfigContext, { EditorDispatchContext } from './ConfigContext'
+import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 
 import OverlayFrame from '@cdc/core/components/ui/OverlayFrame'
 
@@ -16,13 +16,14 @@ import ChooseTab from './components/ChooseTab'
 import ConfigureTab from './components/ConfigureTab'
 import TabPane from './components/TabPane'
 import { GlobalTabs as Tabs } from './components/Tabs'
-import { formatConfigBeforeSave as stripConfig } from '@cdc/core/helpers/formatConfigBeforeSave'
+import { stripConfig } from '@cdc/dashboard/src/helpers/formatConfigBeforeSave'
 import { saveConfigToWindow as updateVizConfig } from './helpers/saveConfigToWindow'
 import { legacyConfigSupport } from './helpers/legacyConfigSupport'
 
 import './scss/main.scss'
-import editorReducer, { EditorState } from './store/editor.reducer'
+import editorReducer, { EditorState } from '@cdc/core/contexts/editor.reducer'
 import _ from 'lodash'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 import { WCMSProps } from '@cdc/core/types/WCMSProps'
 import { devToolsStore } from '@cdc/core/helpers/withDevTools'
 
@@ -57,7 +58,7 @@ const CdcEditor: React.FC<WCMSProps> = ({ config: configObj, hostname, container
   const [state, dispatch] = useReducer(editorReducer, initialState)
 
   const setTempConfigAndUpdate = config => {
-    updateVizConfig(_.cloneDeep(config))
+    updateVizConfig(cloneConfig(config))
     dispatch({ type: 'EDITOR_TEMP_SAVE', payload: config })
   }
 

package/src/_stories/Editor.stories.tsx

@@ -1,35 +1,35 @@
-import { Meta, StoryObj } from '@storybook/react'
-import CdcEditor from '../CdcEditor'
-import { within, userEvent } from '@storybook/testing-library'
-
-const sleep = ms => {
-  return new Promise(r => setTimeout(r, ms))
-}
-
-const meta: Meta<typeof CdcEditor> = {
-  title: 'Components/Pages/CdcEditor',
-  component: CdcEditor
-}
-export default meta
-
-type Story = StoryObj<typeof CdcEditor>
-
-export const DefaultEditor: Story = {
-  args: {
-    config: {}
-  }
-}
-
-export const PreviewTable: Story = {
-  args: {},
-  parameters: {},
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const user = userEvent.setup()
-    await sleep(1000)
-    const mapButton = canvas.getByText('United States (State- or County-Level)')
-    await user.click(mapButton)
-    const sampleData = canvas.getByText('United States: County Sample Data')
-    await user.click(sampleData)
-  }
-}
+import { Meta, StoryObj } from '@storybook/react-vite'
+import CdcEditor from '../CdcEditor'
+import { within, userEvent } from 'storybook/test'
+
+const sleep = ms => {
+  return new Promise(r => setTimeout(r, ms))
+}
+
+const meta: Meta<typeof CdcEditor> = {
+  title: 'Components/Pages/CdcEditor',
+  component: CdcEditor
+}
+export default meta
+
+type Story = StoryObj<typeof CdcEditor>
+
+export const DefaultEditor: Story = {
+  args: {
+    config: {}
+  }
+}
+
+export const PreviewTableTests: Story = {
+  args: {},
+  parameters: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+    await sleep(1000)
+    const mapButton = canvas.getByText('United States (State- or County-Level)')
+    await user.click(mapButton)
+    const sampleData = canvas.getByText('United States: County Sample Data')
+    await user.click(sampleData)
+  }
+}

package/src/components/ChooseTab.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react'
 import '../scss/choose-vis-tab.scss'
 
-import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
+import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
@@ -206,15 +206,15 @@ const ChooseTab: React.FC = (): JSX.Element => {
         </div>
       </a>
 
-      {rowLabels.map(label => {
+      {rowLabels.map((label, index) => {
         return (
-          <React.Fragment>
+          <React.Fragment key={`row-label-${index}-${label}`}>
             <div className='heading-2'>{label}</div>
             <ul className={`visualization-grid category_${label.toLowerCase()}`}>
               {buttons
                 .filter(button => button.category === label)
-                .map((button, index) => (
-                  <li key={index}>
+                .map((button, buttonIndex) => (
+                  <li key={`${label}-button-${buttonIndex}`}>
                     <Tooltip position='right'>
                       <Tooltip.Target>
                         <VizButton {...button} />

package/src/components/ConfigureTab.tsx

@@ -7,12 +7,12 @@ import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
 import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '@cdc/core/contexts/EditorContext'
 import MultiDashboardWrapper from '@cdc/dashboard/src/CdcDashboard'
-import CdcDataTable from '../../../data-table/src/CdcDataTable'
+import CdcDataTable from '@cdc/data-table/src/CdcDataTable'
 
 export default function ConfigureTab({ containerEl }) {
-  const { config, setTempConfig, isDebug } = useContext(ConfigContext)
+  const { config, setTempConfig, isDebug, configUrl } = useContext(ConfigContext)
 
   let { type } = config
 
@@ -20,7 +20,13 @@ export default function ConfigureTab({ containerEl }) {
     case 'map':
       return (
         <ErrorBoundary component='CdcMap'>
-          <CdcMap isEditor={true} config={config} containerEl={containerEl} setConfig={setTempConfig} />
+          <CdcMap
+            isEditor={true}
+            config={config}
+            containerEl={containerEl}
+            setConfig={setTempConfig}
+            configUrl={configUrl}
+          />
         </ErrorBoundary>
       )
     case 'waffle-chart':
@@ -41,7 +47,7 @@ export default function ConfigureTab({ containerEl }) {
     case 'dashboard':
       return (
         <ErrorBoundary component='CdcDashboard'>
-          <MultiDashboardWrapper isEditor={true} isDebug={isDebug} />
+          <MultiDashboardWrapper isEditor={true} isDebug={isDebug} configUrl={configUrl} />
         </ErrorBoundary>
       )
     case 'data-bite':

package/src/components/DataImport/components/DataImport.tsx

@@ -4,7 +4,7 @@ import axios from 'axios'
 
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
 
-import ConfigContext, { EditorDispatchContext } from '../../../ConfigContext'
+import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 
 import TabPane from '../../TabPane'
 import Tabs from '../../Tabs'
@@ -21,7 +21,7 @@ import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 import { type Visualization } from '@cdc/core/types/Visualization'
-import { type DataSet } from '@cdc/dashboard/src/types/DataSet'
+import { type DataSet } from '@cdc/core/types/DataSet'
 
 import './data-import.scss'
 import '@cdc/core/styles/v2/components/data-designer.scss'

package/src/components/DataImport/components/data-import.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import './../../../scss/variables.scss';
 
 .cdc-editor .data-designer {
@@ -114,7 +115,7 @@
     }
     .btn.active {
       $primary: #005eaa;
-      background: darken($primary, 15%);
+      background: color.adjust($primary, $lightness: -15%);
     }
     .input-group {
       display: flex;

package/src/components/PreviewDataTable.tsx

@@ -8,7 +8,7 @@ import {
   useResizeColumns,
   usePagination
 } from 'react-table'
-import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
+import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 import { useDebounce } from 'use-debounce'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 import { MdNavigateNext } from 'react-icons/md'
@@ -17,7 +17,7 @@ import { GrFormPrevious } from 'react-icons/gr'
 // Core
 import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength'
 import { errorMessages } from '../helpers/errorMessages'
-import { DataSet } from '@cdc/dashboard/src/types/DataSet'
+import { DataSet } from '@cdc/core/types/DataSet'
 import Icon from '@cdc/core/components/ui/Icon'
 
 const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }: any) => {
@@ -262,17 +262,21 @@ const PreviewDataTable = () => {
         <thead>
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
-                <th
-                  scope='col'
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
-                  className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''}
-                  title={column.Header}
-                >
-                  {column.render('Header')}
-                  <div {...column.getResizerProps()} className='resizer' />
-                </th>
-              ))}
+              {headerGroup.headers.map(column => {
+                const { key, ...headerProps } = column.getHeaderProps(column.getSortByToggleProps())
+                return (
+                  <th
+                    key={key}
+                    scope='col'
+                    {...headerProps}
+                    className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''}
+                    title={column.Header}
+                  >
+                    {column.render('Header')}
+                    <div {...column.getResizerProps()} className='resizer' />
+                  </th>
+                )
+              })}
             </tr>
           ))}
         </thead>

package/src/components/Tabs.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from 'react'
-import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
+import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 
 export const GlobalTabs = props => {
   const { globalActive } = useContext(ConfigContext)

package/src/helpers/saveConfigToWindow.ts

@@ -1,13 +1,13 @@
-import { formatConfigBeforeSave } from '@cdc/core/helpers/formatConfigBeforeSave'
-
-export const saveConfigToWindow = newTempConfig => {
-  if (null !== newTempConfig) {
-    // Remove runtime/unnecessary items from config before saving to WCMS, performance optimization
-    let strippedConfig = formatConfigBeforeSave(newTempConfig)
-
-    const parsedData = JSON.stringify(strippedConfig)
-    // Emit the data in a regular JS event so it can be consumed by anything.
-    const event = new CustomEvent('updateVizConfig', { detail: parsedData, bubbles: true })
-    window.dispatchEvent(event)
-  }
-}
+import { stripConfig } from '@cdc/dashboard/src/helpers/formatConfigBeforeSave'
+
+export const saveConfigToWindow = newTempConfig => {
+  if (null !== newTempConfig) {
+    // Remove runtime/unnecessary items from config before saving to WCMS, performance optimization
+    let strippedConfig = stripConfig(newTempConfig)
+
+    const parsedData = JSON.stringify(strippedConfig)
+    // Emit the data in a regular JS event so it can be consumed by anything.
+    const event = new CustomEvent('updateVizConfig', { detail: parsedData, bubbles: true })
+    window.dispatchEvent(event)
+  }
+}

package/src/index.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
-import './coreStyles_editor.scss'
 
 import CdcEditor from './CdcEditor'
 

package/vite.config.js

@@ -1,4 +1,4 @@
-import GenerateViteConfig from '../../generateViteConfig.js'
+import GenerateViteConfig from '@cdc/core/generateViteConfig.js'
 import { moduleName } from './package.json'
 
 export default GenerateViteConfig(moduleName)

package/src/ConfigContext.ts

@@ -1,15 +0,0 @@
-import { WCMSProps } from '@cdc/core/types/WCMSProps'
-import { Dispatch, createContext } from 'react'
-import EditorActions from './store/editor.actions'
-import { EditorState } from './store/editor.reducer'
-
-export type EditorCTX = WCMSProps &
-  EditorState & {
-    displayName?: string
-    setTempConfig: Function
-  }
-
-const ConfigContext = createContext<EditorCTX>({ displayName: 'ConfigContext', setTempConfig: () => {} } as unknown as EditorCTX)
-
-export default ConfigContext
-export const EditorDispatchContext = createContext<Dispatch<EditorActions>>(() => {})

package/src/coreStyles_editor.scss

@@ -1,2 +0,0 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/variables';

package/src/store/editor.actions.ts

@@ -1,28 +0,0 @@
-import { type Action } from '@cdc/core/types/Action'
-import { type ViewPort } from '@cdc/core/types/ViewPort'
-import { type Visualization } from '@cdc/core/types/Visualization'
-import { DataSet } from '@cdc/dashboard/src/types/DataSet'
-
-type EDITOR_SAVE = Action<'EDITOR_SAVE', Visualization>
-type EDITOR_SET_CONFIG = Action<'EDITOR_SET_CONFIG', Visualization>
-type EDITOR_TEMP_SAVE = Action<'EDITOR_TEMP_SAVE', Visualization>
-type EDITOR_SET_ERRORS = Action<'EDITOR_SET_ERRORS', string[]>
-type EDITOR_SET_VIEWPORT = Action<'EDITOR_SET_VIEWPORT', ViewPort>
-type EDITOR_SET_GLOBALACTIVE = Action<'EDITOR_SET_GLOBALACTIVE', number>
-type SET_DASHBOARD_DATASET = Action<
-  'SET_DASHBOARD_DATASET',
-  { datasetKey: string; oldDatasetKey?: string; dataset: DataSet }
->
-type DELETE_DATASET = Action<'DELETE_DASHBOARD_DATASET', { datasetKey: string }>
-
-type actions =
-  | EDITOR_SAVE
-  | EDITOR_TEMP_SAVE
-  | EDITOR_SET_ERRORS
-  | EDITOR_SET_VIEWPORT
-  | EDITOR_SET_GLOBALACTIVE
-  | EDITOR_SET_CONFIG
-  | DELETE_DATASET
-  | SET_DASHBOARD_DATASET
-
-export default actions

package/src/store/editor.reducer.ts

@@ -1,93 +0,0 @@
-import _ from 'lodash'
-import EditorActions from './editor.actions'
-import { Visualization } from '@cdc/core/types/Visualization'
-import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
-
-export type EditorState = {
-  config?: Visualization
-  tempConfig?: Visualization | null
-  errors: Record<string, string>
-  currentViewport: string
-  globalActive: number
-  newViz?: boolean
-}
-const reducer = (state: EditorState, action: EditorActions): EditorState => {
-  switch (action.type) {
-    case 'EDITOR_SAVE': {
-      return { ...state, config: action.payload, tempConfig: null }
-    }
-    case 'EDITOR_SET_CONFIG': {
-      return { ...state, config: action.payload }
-    }
-    case 'SET_DASHBOARD_DATASET': {
-      const { dataset, datasetKey, oldDatasetKey } = action.payload
-      const oldDataset = oldDatasetKey ? state.config?.datasets[oldDatasetKey] : {}
-      const config = _.cloneDeep(state.config)
-      if (oldDatasetKey) {
-        const changeDatasets = _config => {
-          _config.rows?.forEach(row => {
-            if (row.dataKey === oldDatasetKey) {
-              row.dataKey = datasetKey
-            }
-          })
-          Object.values(_config.visualizations || {}).forEach(viz => {
-            if (viz.dataKey === oldDatasetKey) {
-              viz.dataKey = datasetKey
-            }
-          })
-        }
-        applyMultiDashboards(config, changeDatasets)
-        delete config.datasets[oldDatasetKey]
-      }
-      Object.values(config.datasets).forEach(dataset => {
-        dataset.preview = false
-      })
-      config.datasets[datasetKey] = { ...oldDataset, ...dataset }
-      return { ...state, config }
-    }
-    case 'DELETE_DASHBOARD_DATASET': {
-      const { datasetKey } = action.payload
-      const deleteDatasetKeys = _config => {
-        _config.rows?.forEach(row => {
-          if (row.dataKey === datasetKey) {
-            delete row.dataKey
-          }
-        })
-        Object.values(_config.visualizations || {}).forEach(viz => {
-          if (viz.dataKey === datasetKey) {
-            delete viz.dataKey
-          }
-        })
-      }
-      const config = _.cloneDeep(state.config)
-      applyMultiDashboards(config, deleteDatasetKeys)
-      delete config.datasets[datasetKey]
-      return { ...state, config }
-    }
-    case 'EDITOR_TEMP_SAVE': {
-      return { ...state, tempConfig: action.payload }
-    }
-    case 'EDITOR_SET_ERRORS': {
-      return { ...state, errors: action.payload }
-    }
-    case 'EDITOR_SET_VIEWPORT': {
-      return { ...state, currentViewport: action.payload }
-    }
-    case 'EDITOR_SET_GLOBALACTIVE': {
-      return { ...state, globalActive: action.payload }
-    }
-    default:
-      return state
-  }
-}
-
-const applyMultiDashboards = (config: Record<string, any>, mutationFunc: Function) => {
-  if (config.multiDashboards) {
-    config.multiDashboards.forEach(dashboard => {
-      mutationFunc(dashboard)
-    })
-  }
-  mutationFunc(config)
-}
-
-export default devToolsWrapper<EditorState, EditorActions>(reducer)