@cdc/markup-include 4.25.8 → 4.25.11

package/src/components/EditorPanel.tsx

@@ -1,45 +1,26 @@
-import React, { useState, useEffect, memo, useContext, useRef, useMemo, useReducer } from 'react'
+import React, { useState, useEffect, useContext, useRef } from 'react'
 
-// Third Party
-import _ from 'lodash'
+import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 // Context
-import { Variable } from '../types/Variable'
 import ConfigContext from '../ConfigContext'
 
 // Helpers
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 
 // Components
-import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
+import { TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import Icon from '@cdc/core/components/ui/Icon'
-import InputText from '@cdc/core/components/inputs/InputText'
 import Layout from '@cdc/core/components/Layout'
-import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Accordion from '@cdc/core/components/ui/Accordion'
+import MarkupVariablesEditor from '@cdc/core/components/EditorPanel/components/MarkupVariablesEditor'
+import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
+import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
+import { Datasets } from '@cdc/core/types/DataSet'
 
 // styles
 import '@cdc/core/styles/v2/components/editor.scss'
 import './editorPanel.style.css'
-import VariableSection from './Variables'
-import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
-import FootnotesEditor from '@cdc/core/components/EditorPanel/FootnotesEditor'
-import { Datasets } from '@cdc/core/types/DataSet'
-
-const headerColors = [
-  'theme-blue',
-  'theme-purple',
-  'theme-brown',
-  'theme-teal',
-  'theme-pink',
-  'theme-orange',
-  'theme-slate',
-  'theme-indigo',
-  'theme-cyan',
-  'theme-green',
-  'theme-amber'
-]
 
 type MarkupIncludeEditorPanelProps = {
   datasets?: Datasets
@@ -48,13 +29,11 @@ type MarkupIncludeEditorPanelProps = {
 const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
   const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
   const { contentEditor, theme, visual } = config
-  const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML, allowHideSection, shoNoDataMessage } =
-    contentEditor
+  const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor
   const [displayPanel, setDisplayPanel] = useState(true)
   const updateField = updateFieldFactory(config, updateConfig, true)
-  const hasData = data?.[0] !== undefined ?? false
 
-  const openVariableControls = useState<boolean[]>([])
+  const textAreaInEditorContainer = useRef(null)
 
   useEffect(() => {
     // Pass up to Editor if needed
@@ -80,58 +59,31 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
   }
 
   const convertStateToConfig = () => {
-    const strippedState = _.cloneDeep(config)
+    const strippedState = cloneConfig(config)
     delete strippedState.newViz
     delete strippedState.runtime
 
     return strippedState
   }
 
-  const [variableArray, setVariableArray] = useState<Variable[]>([...markupVariables])
-  const [isCreatingVariable, setIsCreatingVariable] = useState(false)
-
-  const textAreaInEditorContainer = useRef(null)
-  const [controls, setControls] = openVariableControls
-
-  const handleCreateNewVariableButtonClick = () => {
-    const newVariableArray = [..._.cloneDeep(variableArray)]
-    const newVariable = {
-      columnName: '',
-      conditions: [],
-      name: '',
-      tag: ''
-    }
-
-    setControls({ ...controls, [variableArray.length + 1]: true })
-
-    newVariableArray.push(newVariable)
-    setVariableArray(newVariableArray)
-    setIsCreatingVariable(!isCreatingVariable)
-  }
-
-  const updateVariableArray = (newVariable: Variable, variableIndex: number) => {
-    const newVariableArray = _.cloneDeep(variableArray)
-    newVariableArray[variableIndex] = newVariable
-    setVariableArray(newVariableArray)
-    updateField('contentEditor', null, 'markupVariables', newVariableArray)
-    return
+  const handleMarkupVariablesChange = (variables: any[]) => {
+    updateConfig({
+      ...config,
+      markupVariables: variables
+    })
   }
 
-  const deleteVariable = (variableIndex: number) => {
-    const newVariableArray = _.cloneDeep(variableArray)
-    newVariableArray.splice(variableIndex, 1)
-    setVariableArray(newVariableArray)
-    updateField('contentEditor', null, 'markupVariables', newVariableArray)
-
-    const newControls = _.cloneDeep(controls)
-    delete newControls[variableIndex]
-    setControls(newControls)
+  const handleToggleEnable = (enabled: boolean) => {
+    updateConfig({
+      ...config,
+      enableMarkupVariables: enabled
+    })
   }
 
   const editorContent = (
     <Accordion>
       <Accordion.Section title='General'>
-        <InputText
+        <TextField
           value={title || ''}
           section='contentEditor'
           fieldName='title'
@@ -142,12 +94,11 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
       </Accordion.Section>
       <Accordion.Section title='Content Editor'>
         <span className='divider-heading'>Enter Markup</span>
-        <InputCheckbox
-          inline
+        <CheckBox
           value={useInlineHTML}
           section='contentEditor'
           fieldName='useInlineHTML'
-          label='Use Inline HTML&nbsp;'
+          label='Use Inline HTML'
           updateField={updateField}
         />
         <div className='column-edit'>
@@ -155,98 +106,19 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
             <>
               {/* HTML Textbox */}
               <div ref={textAreaInEditorContainer}>
-                <InputText
+                <TextField
                   value={inlineHTML}
                   section='contentEditor'
                   fieldName='inlineHTML'
                   label='HTML'
                   placeholder='Add HTML here'
                   type='textarea'
-                  rows={10}
                   updateField={updateField}
                 />
-
-                <hr className='accordion__divider' />
               </div>
-              {/* Create New Variable*/}
-
-              {/* Variable Options List */}
-              <fieldset>
-                <label>
-                  <span className='edit-label'>
-                    Variables
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                      </Tooltip.Target>
-                      <Tooltip.Content>{`To use created variables wrap the variable name in curly brackets, e.g. {{some_variable}}, and place the variable directly in your Inline HTML`}</Tooltip.Content>
-                    </Tooltip>
-                  </span>
-                </label>
-                {hasData === false && (
-                  <span className='need-data-source-prompt'>To use variables, add data source.</span>
-                )}
-                {variableArray && variableArray.length > 0 && (
-                  <div className='section-border'>
-                    {variableArray?.map((variableObject, index) => {
-                      return (
-                        <VariableSection
-                          key={`${variableObject.name}-${index}`}
-                          controls={openVariableControls}
-                          data={data}
-                          deleteVariable={deleteVariable}
-                          updateVariableArray={updateVariableArray}
-                          variableConfig={variableObject}
-                          variableIndex={index}
-                        />
-                      )
-                    })}
-                  </div>
-                )}
-                <div className='pt-2'>
-                  <CheckBox
-                    value={allowHideSection}
-                    section='contentEditor'
-                    fieldName='allowHideSection'
-                    label='Hide Section on Null'
-                    updateField={updateField}
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon
-                            display='question'
-                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                          />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>{`Hide this entire Markup Include section if any variable is null or blank.`}</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
-
-                  <CheckBox
-                    value={contentEditor.showNoDataMessage}
-                    section='contentEditor'
-                    fieldName='showNoDataMessage'
-                    label='Add No Data Message'
-                    updateField={updateField}
-                  />
-                </div>
-
-                <div className='mb-1 d-flex'>
-                  <button
-                    className={'btn btn-primary'}
-                    onClick={handleCreateNewVariableButtonClick}
-                    disabled={!hasData}
-                  >
-                    Create New Variable
-                  </button>
-                </div>
-              </fieldset>
             </>
           ) : (
-            <InputText
+            <TextField
               value={srcUrl || ''}
               section='contentEditor'
               fieldName='srcUrl'
@@ -257,56 +129,46 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
           )}
         </div>
       </Accordion.Section>
-      <Accordion.Section title='Visual'>
-        <div className='input-group'>
-          <label>Theme</label>
-          <ul className='color-palette'>
-            {headerColors.map(palette => (
-              <li
-                title={palette}
-                key={palette}
-                onClick={() => {
-                  updateConfig({ ...config, theme: palette })
-                }}
-                className={theme === palette ? 'selected ' + palette : palette}
-              ></li>
-            ))}
-          </ul>
-        </div>
-        <div className='cove-accordion__panel-section checkbox-group'>
-          <InputCheckbox
+      <Accordion.Section title='Visual' className='panel-visual'>
+        <HeaderThemeSelector
+          selectedTheme={theme}
+          onThemeSelect={theme => updateConfig({ ...config, theme })}
+          label='Theme'
+        />
+        <div className='checkbox-group'>
+          <CheckBox
             value={visual.border}
             section='visual'
             fieldName='border'
-            label='Display Border&nbsp;'
+            label='Display Border'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.borderColorTheme}
             section='visual'
             fieldName='borderColorTheme'
-            label='Use Border Color Theme&nbsp;'
+            label='Use Border Color Theme'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.accent}
             section='visual'
             fieldName='accent'
-            label='Use Accent Style&nbsp;'
+            label='Use Accent Style'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.background}
             section='visual'
             fieldName='background'
-            label='Use Theme Background Color&nbsp;'
+            label='Use Theme Background Color'
             updateField={updateField}
           />
-          <InputCheckbox
+          <CheckBox
             value={visual.hideBackgroundColor}
             section='visual'
             fieldName='hideBackgroundColor'
-            label='Hide Background Color&nbsp;'
+            label='Hide Background Color'
             updateField={updateField}
           />
         </div>
@@ -316,6 +178,17 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
           <FootnotesEditor config={config} updateField={updateField} datasets={datasets} />
         </Accordion.Section>
       )}
+      <Accordion.Section title='Markup Variables'>
+        <MarkupVariablesEditor
+          markupVariables={config.markupVariables || []}
+          data={data || []}
+          datasets={datasets}
+          config={config}
+          onChange={handleMarkupVariablesChange}
+          enableMarkupVariables={config.enableMarkupVariables || false}
+          onToggleEnable={handleToggleEnable}
+        />
+      </Accordion.Section>
     </Accordion>
   )
 

package/src/data/initial-state.js

@@ -1,7 +1,6 @@
 export default {
   contentEditor: {
     inlineHTML: '<h2>Inline HTML</h2>',
-    markupVariables: [],
     showHeader: true,
     srcUrl: '#example',
     title: 'Markup Include',
@@ -21,5 +20,7 @@ export default {
     background: false,
     hideBackgroundColor: false,
     borderColorTheme: false
-  }
+  },
+  markupVariables: [],
+  enableMarkupVariables: false
 }

package/src/{index.jsx → index.tsx}

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom/client'
 import { GlobalContextProvider } from '@cdc/core/components/GlobalContext'
 
 import '@cdc/core/styles/cove-main.scss'
-import './coreStyles_markupinclude.scss'
 
 import CdcMarkupInclude from './CdcMarkupInclude'
 

package/src/scss/main.scss

@@ -1,12 +1,4 @@
 .markup-include {
-  .checkbox-group {
-    padding: 16px;
-    border: 1px solid #c4c4c4;
-    border-radius: 8px;
-    margin-top: 8px;
-    margin-bottom: 24px;
-  }
-
   .cove-component__content-wrap {
     padding: 1rem 0;
 

package/src/store/markupInclude.reducer.ts

@@ -1,7 +1,7 @@
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
 import MarkupIncludeActions from './markupInclude.actions'
 
-export type MarkupIncludeState = {
+type MarkupIncludeState = {
   config?: MarkupIncludeConfig
   loading: boolean
   urlMarkup: string

package/src/test/CdcMarkupInclude.test.jsx

@@ -1,6 +1,11 @@
-// Placeholder test until we add them in.
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
+
 describe('Markup Include', () => {
-  it('has a test.', async () => {
-    return true
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
   })
 })

package/src/types/Condition.ts

@@ -1,5 +1,5 @@
 export type Condition = {
   columnName: string
-  isOrIsNotEqualTo: string
+  isOrIsNotEqualTo: 'is' | 'is not'
   value: string
 }

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/components/Conditions.tsx

@@ -1,118 +0,0 @@
-import _ from 'lodash'
-import { Condition } from '../types/Condition'
-import Icon from '@cdc/core/components/ui/Icon'
-
-type OpenControls = [boolean[], Function] // useState type
-
-type CondtionsProps = {
-  conditionControls: OpenControls
-  conditionLookup: Record<string, string[] | number[]>
-  conditionSettings: Condition
-  conditionIndex: number
-  removeCondition: Function
-  selectedColumn: string
-  updateConditionsList: Function
-}
-
-const Conditions: React.FC<CondtionsProps> = ({
-  conditionControls,
-  conditionLookup,
-  conditionSettings,
-  conditionIndex,
-  removeCondition,
-  selectedColumn,
-  updateConditionsList
-}) => {
-  const [openConditionControls, setOpenConditionControls] = conditionControls
-  const showCondition = openConditionControls[conditionIndex]
-  const setShowCondition = (index, value) => {
-    const newOpenConditionsControls = [...openConditionControls]
-    newOpenConditionsControls[index] = value
-    setOpenConditionControls(newOpenConditionsControls)
-  }
-
-  const columnNames = Object.keys(conditionLookup)
-  const columnNameConditionOptions = columnNames.filter(optionName => optionName !== selectedColumn)
-
-  const { columnName, isOrIsNotEqualTo, value } = conditionSettings
-
-  const handleConditionChange = (selectionValue: string | number, conditionSetting: string) => {
-    const conditionSettingUpdate = _.cloneDeep(conditionSettings)
-    if (conditionSetting === 'columnName') {
-      conditionSettingUpdate['value'] = ''
-    }
-    conditionSettingUpdate[conditionSetting] = selectionValue
-    updateConditionsList(conditionSettingUpdate, conditionIndex)
-  }
-
-  return !showCondition ? (
-    <>
-      <div className='mb-1'>
-        <button onClick={() => setShowCondition(conditionIndex, true)}>
-          <Icon display='caretDown' />
-        </button>
-        <span>
-          {' '}
-          {value ? `${columnName} ${isOrIsNotEqualTo === 'is' ? 'is' : 'is not'} ${value}` : 'New Condition'}
-        </span>
-      </div>
-    </>
-  ) : (
-    <>
-      <div className='d-flex justify-content-between'>
-        <button
-          onClick={() => {
-            const newOpenConditionsControls = [...openConditionControls]
-            newOpenConditionsControls[conditionIndex] = false
-            setOpenConditionControls(newOpenConditionsControls)
-          }}
-        >
-          <Icon display='caretDown' />
-        </button>
-        <button className='btn btn-warn btn-sm mt-0 ms-2' onClick={() => removeCondition(conditionIndex)}>
-          Remove
-        </button>
-      </div>
-      <div id={`condition_${conditionIndex}`}>
-        <label className='d-block'>
-          <span>Condition : </span>
-          <div className='pt-1'>
-            <select
-              className='ms-1'
-              value={columnName}
-              onChange={e => handleConditionChange(e.target.value, 'columnName')}
-            >
-              <option value=''>Select</option>
-              {columnNameConditionOptions?.map(columnName => (
-                <option key={columnName} value={columnName}>
-                  {columnName}
-                </option>
-              ))}
-            </select>
-            <select
-              className='ms-1'
-              value={isOrIsNotEqualTo}
-              onChange={e => handleConditionChange(e.target.value, 'isOrIsNotEqualTo')}
-            >
-              <option value='is'>is</option>
-              <option value='isNot'>is not</option>
-            </select>
-            <select className='ms-1' value={value} onChange={e => handleConditionChange(e.target.value, 'value')}>
-              <option value=''>Select</option>
-
-              {conditionLookup[columnName]?.map(valueItem => {
-                return (
-                  <option key={valueItem} value={valueItem}>
-                    {valueItem}
-                  </option>
-                )
-              })}
-            </select>
-          </div>
-        </label>
-      </div>
-    </>
-  )
-}
-
-export default Conditions