@cdc/editor 4.25.3 → 4.25.6-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.25.3",
+  "version": "4.25.6-1",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -25,24 +25,21 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.25.3",
-    "@cdc/core": "^4.25.3",
-    "@cdc/dashboard": "^4.25.3",
-    "@cdc/data-bite": "^4.25.3",
-    "@cdc/map": "^4.25.3",
-    "@cdc/markup-include": "^4.25.3",
-    "@cdc/waffle-chart": "^4.25.3",
-    "axios": "^1.6.0",
-    "d3": "^7.0.0",
-    "html-react-parser": "^3.0.8",
-    "react-dropzone": "^11.2.4",
-    "react-table": "^7.6.2",
-    "use-debounce": "^5.2.0",
-    "whatwg-fetch": "^3.6.2"
+    "@cdc/chart": "^4.25.6-1",
+    "@cdc/core": "^4.25.6-1",
+    "@cdc/dashboard": "^4.25.6-1",
+    "@cdc/data-bite": "^4.25.6-1",
+    "@cdc/map": "^4.25.6-1",
+    "@cdc/markup-include": "^4.25.6-1",
+    "@cdc/waffle-chart": "^4.25.6-1",
+    "axios": "^1.9.0",
+    "d3": "^7.9.0",
+    "react-dropzone": "^14.3.8",
+    "use-debounce": "^10.0.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "b09566f5a7d57c8d0109e5f407257729d6b36846"
+  "gitHead": "ac45ee0f1d6a4045648c4e083992fc091795e084"
 }

package/src/CdcEditor.tsx

@@ -43,6 +43,15 @@ const CdcEditor: React.FC<WCMSProps> = ({ config: configObj, hostname, container
   useEffect(() => {
     // for testing reducer using Redux Dev Tools
     devToolsStore && devToolsStore?.init()
+    document.addEventListener('click', e => {
+      // Prevents mistaken clicks on label from triggering checkbox
+      // Can be removed once all custom checkboxes are replaced with Checkbox component from @cdc/core/components/EditorPanel/Inputs.tsx
+      if (e.target.className === 'checkbox') {
+        if (!['SPAN', 'INPUT'].includes(e.target.nodeName)) {
+          e.preventDefault()
+        }
+      }
+    })
   }, [])
 
   const [state, dispatch] = useReducer(editorReducer, initialState)

package/src/components/ChooseTab.tsx

@@ -25,6 +25,7 @@ import DeviationIcon from '@cdc/core/assets/icon-deviation-bar.svg'
 import SankeyIcon from '@cdc/core/assets/icon-sankey.svg'
 import ComboChartIcon from '@cdc/core/assets/icon-combo-chart.svg'
 import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
+import TableIcon from '@cdc/core/assets/icon-table.svg'
 import Icon from '@cdc/core/components/ui/Icon'
 
 interface ButtonProps {
@@ -90,7 +91,20 @@ const ChooseTab: React.FC = (): JSX.Element => {
           type: 'map'
         }
         newConfig['general'] = {
-          geoType: visualizationType
+          geoType: visualizationType,
+          type: props?.generalType
+        }
+        break
+      }
+
+      case 'Table': {
+        const visualizationType = props.subType
+        newConfig = {
+          ...props,
+          visualizationType,
+          newViz: true,
+          datasets: {},
+          type: 'table'
         }
         break
       }
@@ -436,5 +450,13 @@ const buttons = [
     generalType: 'us-geocode',
     icon: <UsaIcon />,
     content: 'United States GeoCode'
+  },
+  {
+    id: 24,
+    category: 'General',
+    label: 'Data Table',
+    type: 'table',
+    subType: null,
+    icon: <TableIcon />
   }
 ]

package/src/components/ConfigureTab.tsx

@@ -9,9 +9,10 @@ import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import MultiDashboardWrapper from '@cdc/dashboard/src/CdcDashboard'
+import CdcDataTable from '../../../data-table/src/CdcDataTable'
 
 export default function ConfigureTab({ containerEl }) {
-  const { config, setTempConfig, hostname, isDebug } = useContext(ConfigContext)
+  const { config, setTempConfig, isDebug } = useContext(ConfigContext)
 
   let { type } = config
 
@@ -19,14 +20,7 @@ export default function ConfigureTab({ containerEl }) {
     case 'map':
       return (
         <ErrorBoundary component='CdcMap'>
-          <CdcMap
-            isEditor={true}
-            isDebug={isDebug}
-            config={config}
-            hostname={hostname}
-            setConfig={setTempConfig}
-            containerEl={containerEl}
-          />
+          <CdcMap isEditor={true} config={config} containerEl={containerEl} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
     case 'waffle-chart':
@@ -62,6 +56,12 @@ export default function ConfigureTab({ containerEl }) {
           <CdcMarkupInclude isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />
         </ErrorBoundary>
       )
+    case 'table':
+      return (
+        <ErrorBoundary component='CdcDataTable'>
+          <CdcDataTable isEditor={true} isDebug={isDebug} config={config} />
+        </ErrorBoundary>
+      )
     default:
       return <p>No visualization type selected.</p>
   }

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

@@ -569,7 +569,7 @@ const DataImport = () => {
           )
         )}
       <button
-        className='btn full-width'
+        className='btn full-width btn-primary'
         onClick={() => {
           setConfig({
             ...config,

package/src/index.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import CdcEditor from './CdcEditor'
 import '@cdc/core/styles/cove-main.scss'
 import './coreStyles_editor.scss'
 
+import CdcEditor from './CdcEditor'
+
 // Allow URL query to preselect a tab in standalone mode
 const standaloneParams = new URLSearchParams(window.location.search)
 let activeTab = Number.parseInt(standaloneParams.get('active')) - 1 || null

package/src/scss/choose-vis-tab.scss

@@ -13,7 +13,7 @@
     list-style: none;
     display: grid;
     &.category_general {
-      grid-template-columns: repeat(4, 180px);
+      grid-template-columns: repeat(5, 180px);
     }
     &.category_charts {
       grid-template-columns: repeat(7, 180px);

package/example/private/4-25-03-api-dash.json

@@ -1,36 +0,0 @@
-{
-  "dashboard": { "theme": "theme-blue", "sharedFilters": [] },
-  "rows": [{ "columns": [{ "width": 12 }, {}, {}] }],
-  "visualizations": {},
-  "table": {
-    "label": "Data Table",
-    "show": true,
-    "showDownloadUrl": false,
-    "showDownloadLinkBelow": true,
-    "showVertical": true
-  },
-  "errors": [],
-  "currentViewport": "lg",
-  "id": 15,
-  "category": "General",
-  "label": "Dashboard",
-  "type": "dashboard",
-  "subType": null,
-  "orientation": null,
-  "icon": { "key": null, "ref": null, "props": {}, "_owner": null },
-  "content": "Present multiple data visualizations with shared filter controls.",
-  "datasets": {
-    "COVE API Sample Data": {
-      "dataFileSize": 20641,
-      "dataFileName": "https://nccd-proxy-dev.cdc.gov/NCCD_COVE_API?$datakey=ardi_aad",
-      "dataFileSourceType": "url",
-      "dataFileFormat": "JSON",
-      "preview": true,
-      "dataUrl": "https://nccd-proxy-dev.cdc.gov/NCCD_COVE_API?$datakey=ardi_aad"
-    }
-  },
-  "visualizationType": null,
-  "activeVizButtonID": 15,
-  "version": "4.25.1",
-  "migrations": { "addColorMigration": true }
-}