@cdc/core 4.25.10 → 4.26.1

package/components/EditorPanel/EditorPanel.tsx

@@ -0,0 +1,144 @@
+import { useState, useEffect, useCallback, useRef, ReactNode } from 'react'
+import { cloneConfig } from '../../helpers/cloneConfig'
+import ErrorBoundary from '../ErrorBoundary'
+import Layout from '../Layout'
+import './EditorPanel.styles.css'
+
+export interface BaseEditorPanelProps<TConfig = any> {
+  config: TConfig
+  updateConfig: (config: TConfig) => void
+  loading?: boolean
+  setParentConfig?: (config: TConfig) => void
+  isDashboard?: boolean
+  title: string
+  children: (props: EditorPanelChildProps<TConfig>) => ReactNode
+  initialDisplayPanel?: boolean
+}
+
+export interface EditorPanelChildProps<TConfig = any> {
+  config: TConfig
+  updateConfig: (config: TConfig) => void
+  displayPanel: boolean
+  convertStateToConfig: () => TConfig
+}
+
+/**
+ * Base EditorPanel component that provides shared functionality for all COVE visualization editors.
+ * Handles common patterns like panel display state, parent config syncing, and layout structure.
+ *
+ * @example
+ * ```tsx
+ * <EditorPanel
+ *   config={config}
+ *   updateConfig={updateConfig}
+ *   loading={loading}
+ *   setParentConfig={setParentConfig}
+ *   isDashboard={isDashboard}
+ *   title="Configure My Visualization"
+ * >
+ *   {() => (
+ *     <Accordion>
+ *       <Accordion.Section title="General">
+ *         // Your configuration UI here
+ *       </Accordion.Section>
+ *     </Accordion>
+ *   )}
+ * </EditorPanel>
+ * ```
+ */
+export function EditorPanel<TConfig = any>({
+  config,
+  updateConfig,
+  loading = false,
+  setParentConfig,
+  isDashboard,
+  title,
+  children,
+  initialDisplayPanel = true
+}: BaseEditorPanelProps<TConfig>) {
+  const [displayPanel, setDisplayPanel] = useState(initialDisplayPanel)
+  const prevConfigRef = useRef<string>()
+
+  /**
+   * Converts current config to a clean state suitable for parent consumption.
+   * Removes runtime-only properties like 'newViz' and 'runtime'.
+   * In dashboard context, preserve 'editing' as it's managed by the dashboard.
+   */
+  const convertStateToConfig = useCallback((): TConfig => {
+    const strippedState = cloneConfig(config)
+    delete strippedState.newViz
+    delete strippedState.runtime
+    // Only delete editing flag if NOT in a dashboard context
+    if (!isDashboard) {
+      delete strippedState.editing
+    }
+    return strippedState
+  }, [config, isDashboard])
+
+  /**
+   * Sync config changes up to parent component when setParentConfig is provided.
+   * This is typically used in dashboard/editor contexts where the parent needs to track changes.
+   * Uses ref to prevent infinite loops by only syncing when config content actually changes.
+   */
+  useEffect(() => {
+    if (setParentConfig) {
+      const strippedState = cloneConfig(config)
+      delete strippedState.newViz
+      delete strippedState.runtime
+      // Only delete editing flag if NOT in a dashboard context
+      if (!isDashboard) {
+        delete strippedState.editing
+      }
+
+      // Only call setParentConfig if the config content actually changed
+      const configString = JSON.stringify(strippedState)
+      if (prevConfigRef.current !== configString) {
+        prevConfigRef.current = configString
+        setParentConfig(strippedState)
+      }
+    }
+  }, [config, setParentConfig, isDashboard])
+
+  /**
+   * Toggle the editor panel visibility and update config to reflect the change.
+   * In dashboard context, also sets editing to false to return to dashboard editor.
+   */
+  const onBackClick = () => {
+    const newDisplayPanel = !displayPanel
+    setDisplayPanel(newDisplayPanel)
+    const newConfig: TConfig = {
+      ...config,
+      showEditorPanel: newDisplayPanel
+    }
+    // If in dashboard mode, set editing to false to return to dashboard editor
+    if (isDashboard) {
+      (newConfig as any).editing = false
+    }
+
+    // Update local config - the useEffect will handle syncing to parent
+    updateConfig(newConfig)
+  }
+
+  // Don't render if loading and panel should be hidden
+  if (loading && !(config as any)?.showEditorPanel) return null
+
+  return (
+    <ErrorBoundary component='EditorPanel'>
+      <Layout.Sidebar
+        displayPanel={displayPanel}
+        isDashboard={isDashboard || false}
+        title={title}
+        onBackClick={onBackClick}
+      >
+        {children({
+          config,
+          updateConfig,
+          displayPanel,
+          convertStateToConfig
+        })}
+      </Layout.Sidebar>
+    </ErrorBoundary>
+  )
+}
+
+export default EditorPanel

package/components/EditorPanel/EditorPanelDispatch.tsx

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react'
+import ErrorBoundary from '../ErrorBoundary'
+import Layout from '../Layout'
+
+export interface EditorPanelDispatchProps<TState = any, TAction = any> {
+  state: TState
+  dispatch: React.Dispatch<TAction>
+  title: string
+  children: (props: EditorPanelDispatchChildProps<TState, TAction>) => ReactNode
+  showEditorPanelKey?: keyof TState
+  toggleActionType?: string
+  isDashboard?: boolean
+}
+
+export interface EditorPanelDispatchChildProps<TState = any, TAction = any> {
+  state: TState
+  dispatch: React.Dispatch<TAction>
+}
+
+/**
+ * Base EditorPanel component for packages using dispatch/reducer pattern (e.g., data-table)
+ *
+ * Provides common wrapper functionality including:
+ * - ErrorBoundary for error handling
+ * - Layout.Sidebar for consistent panel display
+ * - State management for panel visibility
+ *
+ * @example
+ * ```tsx
+ * <EditorPanelDispatch
+ *   state={state}
+ *   dispatch={dispatch}
+ *   title='Configure Data Table'
+ *   showEditorPanelKey='showEditorPanel'
+ *   toggleActionType='SET_SHOW_EDITOR_PANEL'
+ * >
+ *   {({ state, dispatch }) => (
+ *     <Accordion>
+ *       // Your editor content here
+ *     </Accordion>
+ *   )}
+ * </EditorPanelDispatch>
+ * ```
+ */
+export function EditorPanelDispatch<TState = any, TAction = any>({
+  state,
+  dispatch,
+  title,
+  children,
+  showEditorPanelKey = 'showEditorPanel' as keyof TState,
+  toggleActionType = 'SET_SHOW_EDITOR_PANEL',
+  isDashboard = false
+}: EditorPanelDispatchProps<TState, TAction>) {
+  const showEditorPanel = state[showEditorPanelKey] as boolean
+
+  const onBackClick = () => {
+    dispatch({
+      type: toggleActionType,
+      payload: !showEditorPanel
+    } as TAction)
+  }
+
+  return (
+    <ErrorBoundary component='EditorPanel'>
+      <Layout.Sidebar
+        title={title}
+        onBackClick={onBackClick}
+        displayPanel={showEditorPanel}
+        isDashboard={isDashboard}
+      >
+        {children({ state, dispatch })}
+      </Layout.Sidebar>
+    </ErrorBoundary>
+  )
+}

package/components/EditorPanel/FieldSetWrapper.tsx

@@ -9,42 +9,85 @@ type FieldSetProps = {
   controls: OpenControls
   deleteField: Function
   children: React.ReactNode
+  draggable?: boolean
 }
 
-const FieldSet: React.FC<FieldSetProps> = ({ fieldName, fieldKey, fieldType, controls, deleteField, children }) => {
+const FieldSet: React.FC<FieldSetProps> = ({
+  fieldName,
+  fieldKey,
+  fieldType,
+  controls,
+  deleteField,
+  children,
+  draggable = false
+}) => {
   const [openControls, setOpenControls] = controls
   const show = openControls[fieldKey]
   const setShow = (key, value) => {
     setOpenControls({ ...openControls, [key]: value })
   }
 
-  if (!show)
+  // Markup for non-draggable items
+  if (!draggable) {
+    if (!show)
+      return (
+        <div className='mb-1'>
+          <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
+            <Icon display='caretDown' />
+          </button>
+          <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
+        </div>
+      )
     return (
-      <div className='mb-1'>
-        <button className='btn btn-light' onClick={() => setShow(fieldKey, true)}>
-          <Icon display='caretDown' />
-        </button>
-        <span> {fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
-      </div>
+      <fieldset className='edit-block mb-1' key={fieldKey}>
+        <div className='d-flex justify-content-between'>
+          <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
+            <Icon display='caretUp' />
+          </button>
+          <button
+            type='button'
+            className='btn btn-danger btn-sm'
+            onClick={event => {
+              event.preventDefault()
+              deleteField()
+            }}
+          >
+            Remove
+          </button>
+        </div>
+        {children}
+      </fieldset>
     )
+  }
+
+  // Draggable fieldset
   return (
-    <fieldset className='edit-block mb-1' key={fieldKey}>
-      <div className='d-flex justify-content-between'>
-        <button className='btn btn-light' onClick={() => setShow(fieldKey, false)}>
-          <Icon display='caretUp' />
-        </button>
-        <button
-          className='btn btn-danger btn-sm'
-          onClick={event => {
-            event.preventDefault()
-            deleteField()
-          }}
-        >
-          Remove
+    <div className='editor-field-item'>
+      <div className='editor-field-item__header'>
+        <Icon display='move' size={15} style={{ marginRight: '0.5rem' }} />
+        <button type='button' className='btn btn-light' onClick={() => setShow(fieldKey, !show)}>
+          <Icon display={show ? 'caretUp' : 'caretDown'} size={20} />
         </button>
+        <span className='editor-field-item__name'>{fieldName ? `${fieldName}` : 'New ' + fieldType}</span>
       </div>
-      {children}
-    </fieldset>
+      {show && (
+        <div className='editor-field-item__content'>
+          <div className='editor-field-item__remove-wrapper'>
+            <button
+              type='button'
+              className='btn btn-danger btn-sm'
+              onClick={event => {
+                event.preventDefault()
+                deleteField()
+              }}
+            >
+              Remove
+            </button>
+          </div>
+          {children}
+        </div>
+      )}
+    </div>
   )
 }
 

package/components/EditorPanel/FootnotesEditor.tsx

@@ -3,8 +3,7 @@ import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 import _ from 'lodash'
 import Footnotes, { Footnote } from '../../types/Footnotes'
 import { footnotesSymbols } from '../../helpers/footnoteSymbols'
-import InputSelect from '../inputs/InputSelect'
-import { TextField } from './Inputs'
+import { TextField, Select } from './Inputs'
 import { Datasets } from '@cdc/core/types/DataSet'
 import DataTransform from '../../helpers/DataTransform'
 import fetchRemoteData from '../../helpers/fetchRemoteData'
@@ -61,14 +60,14 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
     updateField('footnotes', null, 'staticFootnotes', footnoteCopy)
   }
 
-  const getOptions = (opts: string[]) => {
-    return [['', '--Select--']].concat(opts.map(key => [key, key]))
+  const getSelectOptions = (opts: string[]) => {
+    return [{ value: '', label: '--Select--' }].concat(opts.map(key => ({ value: key, label: key })))
   }
 
   const dataColumns = footnotesConfig.dataKey
-    ? getOptions(Object.keys(datasetsCache[footnotesConfig.dataKey]?.data?.[0] || {}))
+    ? getSelectOptions(Object.keys(datasetsCache[footnotesConfig.dataKey]?.data?.[0] || {}))
     : []
-  const dataSetOptions = getOptions(Object.keys(datasetsCache))
+  const dataSetOptions = getSelectOptions(Object.keys(datasetsCache))
 
   const changeFootnoteDataKey = async value => {
     if (value) {
@@ -87,7 +86,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
       {loadingAPIData && <Loader fullScreen />}
       <em>Dynamic Footnotes</em>
       <div className='row border p-2'>
-        <InputSelect
+        <Select
           label='Select a Footnote Dataset'
           value={footnotesConfig.dataKey}
           options={dataSetOptions}
@@ -100,7 +99,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
 
         {footnotesConfig.dataKey && (
           <div className='p-3'>
-            <InputSelect
+            <Select
               label='Footnote Symbol Column'
               value={footnotesConfig.dynamicFootnotes?.symbolColumn}
               options={dataColumns}
@@ -109,7 +108,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
               fieldName='symbolColumn'
               updateField={updateField}
             />
-            <InputSelect
+            <Select
               label='Footnote Text Column'
               value={footnotesConfig.dynamicFootnotes?.textColumn}
               options={dataColumns}
@@ -118,7 +117,7 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
               fieldName='textColumn'
               updateField={updateField}
             />
-            <InputSelect
+            <Select
               label='Footnote Order Column'
               value={footnotesConfig.dynamicFootnotes?.orderColumn}
               options={dataColumns}
@@ -135,34 +134,42 @@ const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField,
 
       <em>Static Footnotes</em>
 
-      {footnotesConfig.staticFootnotes?.map((note, index) => (
-        <div key={index} className='row border p-2'>
-          <div className='col-8'>
-            <InputSelect
-              label='Symbol'
-              value={note.symbol}
-              options={[['', '--Select--'], ...footnotesSymbols]}
-              fieldName='symbol'
-              updateField={(section, subsection, fieldName, value) =>
-                updateStaticFootnote(index, { ...note, symbol: value })
-              }
-            />{' '}
-            <TextField
-              label='Text'
-              value={note.text}
-              fieldName='text'
-              updateField={(section, subsection, fieldName, value) =>
-                updateStaticFootnote(index, { ...note, text: value })
-              }
-            />
-          </div>
-          <div className='col-2 ms-4'>
-            <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
-              Delete
-            </button>
+      {footnotesConfig.staticFootnotes?.map((note, index) => {
+        // Convert tuple format to {value, label} format for Select component
+        const symbolOptions = [
+          { value: '', label: '--Select--' },
+          ...footnotesSymbols.map(([value, label]) => ({ value, label }))
+        ]
+
+        return (
+          <div key={index} className='row border p-2'>
+            <div className='col-8'>
+              <Select
+                label='Symbol'
+                value={note.symbol}
+                options={symbolOptions}
+                fieldName='symbol'
+                updateField={(section, subsection, fieldName, value) =>
+                  updateStaticFootnote(index, { ...note, symbol: value })
+                }
+              />{' '}
+              <TextField
+                label='Text'
+                value={note.text}
+                fieldName='text'
+                updateField={(section, subsection, fieldName, value) =>
+                  updateStaticFootnote(index, { ...note, text: value })
+                }
+              />
+            </div>
+            <div className='col-2 ms-4'>
+              <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
+                Delete
+              </button>
+            </div>
           </div>
-        </div>
-      ))}
+        )
+      })}
       <button className='btn btn-primary' onClick={addStaticFootnote}>
         Add Static Footnote
       </button>

package/components/EditorPanel/Inputs.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react'
+import { memo, useEffect, useState, useMemo } from 'react'
 import { useDebounce } from 'use-debounce'
 import { DROPDOWN_STYLES } from '../Filters/components/Dropdown'
 
@@ -50,6 +50,13 @@ const TextField = memo((props: TextFieldProps) => {
   const [value, setValue] = useState(stateValue)
   const [debouncedValue] = useDebounce(value, 500)
 
+  // Generate unique ID for accessibility
+  const inputId = useMemo(() => {
+    const sectionPart = section ?? 'root'
+    const subsectionPart = subsection ?? 'none'
+    return attributes.id || `input-${sectionPart}-${subsectionPart}-${fieldName}`
+  }, [section, subsection, fieldName, attributes.id])
+
   useEffect(() => {
     if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
       updateField(section, subsection, fieldName, debouncedValue, i)
@@ -74,25 +81,25 @@ const TextField = memo((props: TextFieldProps) => {
     }
   }
 
-  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
+  let formElement = <input type='text' id={inputId} name={name} onChange={onChange} {...attributes} value={value} />
 
   if ('textarea' === type) {
-    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
+    formElement = <textarea id={inputId} name={name} onChange={onChange} {...attributes} value={value}></textarea>
   }
 
   if ('number' === type) {
-    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
+    formElement = <input type='number' id={inputId} name={name} onChange={onChange} {...attributes} value={value} />
   }
 
   if ('date' === type) {
-    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
+    formElement = <input type='date' id={inputId} name={name} onChange={onChange} {...attributes} value={value} />
   }
   if (!display) {
     return <></>
   }
 
   return (
-    <label>
+    <label htmlFor={inputId}>
       <span className='edit-label column-heading'>
         {label}
         {tooltip}
@@ -114,11 +121,20 @@ const CheckBox = memo((props: CheckboxProps) => {
     updateField,
     ...attributes
   } = props
+
+  // Generate unique ID for accessibility
+  const inputId = useMemo(() => {
+    const sectionPart = section ?? 'root'
+    const subsectionPart = subsection ?? 'none'
+    return attributes.id || `checkbox-${sectionPart}-${subsectionPart}-${fieldName}`
+  }, [section, subsection, fieldName, attributes.id])
+
   if (!display) {
     return <></>
   }
   return (
     <label
+      htmlFor={inputId}
       className='checkbox column-heading'
       onClick={e => {
         if (!['SPAN', 'INPUT'].includes(e.target.nodeName)) {
@@ -128,6 +144,7 @@ const CheckBox = memo((props: CheckboxProps) => {
     >
       <input
         type='checkbox'
+        id={inputId}
         className='edit-checkbox'
         name={fieldName}
         checked={value}
@@ -149,6 +166,7 @@ export type SelectProps = {
   options?: string[] | { label: string; value: string }[]
   required?: boolean
   initial?: string
+  disabled?: boolean
 
   // all other props
   [x: string]: any
@@ -167,8 +185,18 @@ const Select = memo((props: SelectProps) => {
     tooltip,
     updateField,
     initial: initialValue,
+    disabled = false,
+    onChange: onChangeProp,
     ...attributes
   } = props
+
+  // Generate unique ID for accessibility
+  const inputId = useMemo(() => {
+    const sectionPart = section ?? 'root'
+    const subsectionPart = subsection ?? 'none'
+    return attributes.id || `select-${sectionPart}-${subsectionPart}-${fieldName}`
+  }, [section, subsection, fieldName, attributes.id])
+
   const optionsJsx = options?.map((option, index) => {
     if (typeof option === 'string') {
       return (
@@ -197,18 +225,26 @@ const Select = memo((props: SelectProps) => {
   }
 
   return (
-    <label>
+    <label htmlFor={inputId} style={disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}}>
       <span className='edit-label'>
         {label}
         {tooltip}
       </span>
       <select
+        id={inputId}
         className={`cove-form-select ${required && !value ? 'warning' : ''} ${DROPDOWN_STYLES}`}
         name={fieldName}
         value={value}
+        disabled={disabled}
         onChange={event => {
-          updateField(section, subsection, fieldName, event.target.value)
+          if (updateField) {
+            updateField(section, subsection, fieldName, event.target.value)
+          }
+          if (onChangeProp) {
+            onChangeProp(event)
+          }
         }}
+        style={disabled ? { cursor: 'not-allowed', backgroundColor: '#e9ecef' } : {}}
         {...attributes}
       >
         {optionsJsx}