@cdc/markup-include 4.25.7 → 4.25.10

package/src/components/EditorPanel.tsx

@@ -1,10 +1,8 @@
-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
@@ -13,19 +11,16 @@ import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 // Components
 import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
 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 { 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',
@@ -48,12 +43,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 } = 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
@@ -79,52 +73,25 @@ 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 = (
@@ -164,77 +131,7 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
                   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>
-                    }
-                  />
-                </div>
-
-                <div className='mb-1 d-flex'>
-                  <button
-                    className={'btn btn-primary'}
-                    onClick={handleCreateNewVariableButtonClick}
-                    disabled={!hasData}
-                  >
-                    Create New Variable
-                  </button>
-                </div>
-              </fieldset>
             </>
           ) : (
             <InputText
@@ -307,6 +204,15 @@ 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 || []}
+          onChange={handleMarkupVariablesChange}
+          enableMarkupVariables={config.enableMarkupVariables || false}
+          onToggleEnable={handleToggleEnable}
+        />
+      </Accordion.Section>
     </Accordion>
   )
 

package/src/data/initial-state.js

@@ -1,11 +1,12 @@
 export default {
   contentEditor: {
     inlineHTML: '<h2>Inline HTML</h2>',
-    markupVariables: [],
     showHeader: true,
     srcUrl: '#example',
     title: 'Markup Include',
-    useInlineHTML: false
+    useInlineHTML: false,
+    showNoDataMessage: false,
+    noDataMessageText: 'No Data Available'
   },
   data: [],
   legend: {},
@@ -19,5 +20,7 @@ export default {
     background: false,
     hideBackgroundColor: false,
     borderColorTheme: false
-  }
+  },
+  markupVariables: [],
+  enableMarkupVariables: false
 }

package/src/index.jsx

@@ -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'
 
@@ -15,7 +14,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <GlobalContextProvider>
-      <CdcMarkupInclude configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
+      <CdcMarkupInclude
+        configUrl={domContainer.attributes['data-config'].value}
+        interactionLabel={domContainer.attributes['data-config'].value}
+        isEditor={isEditor}
+      />
     </GlobalContextProvider>
   </React.StrictMode>
 )

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/src/types/Config.ts

@@ -6,11 +6,12 @@ export type Config = {
   contentEditor: {
     // Changing the base config object creates an infinite loop, nesting it is a workaround
     inlineHTML: string
-    markupVariables: Variable[]
     showHeader: boolean
     srcUrl: string
     title: string
     useInlineHTML: boolean
+    showNoDataMessage: boolean
+    noDataMessageText: string
   }
   data?: Object[]
   legend: {}
@@ -27,4 +28,6 @@ export type Config = {
     borderColorTheme: boolean
   }
   version: Version
+  markupVariables: Variable[]
+  enableMarkupVariables: boolean
 }

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/coreStyles_markupinclude.scss

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