@cdc/editor 1.4.0 → 1.4.3

package/src/components/PreviewDataTable.js

@@ -0,0 +1,266 @@
+import React, { useState, useContext, useMemo, useCallback, useEffect, memo } from 'react';
+import {
+  useTable,
+  useBlockLayout,
+  useGlobalFilter,
+  useSortBy,
+  useResizeColumns,
+  usePagination
+} from 'react-table';
+import GlobalState from '../context';
+import { useDebounce } from 'use-debounce';
+
+// Core
+import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength';
+
+const TableFilter = memo(({globalFilter, setGlobalFilter, disabled = false}) => {
+  const [filterValue, setFilterValue ] = useState(globalFilter);
+
+  const [ debouncedValue ] = useDebounce(filterValue, 200);
+
+  useEffect(() => {
+    if('string' === typeof debouncedValue && debouncedValue !== globalFilter ) {
+      setGlobalFilter(debouncedValue ?? '')
+    }
+  }, [debouncedValue])
+
+  const onChange = (e) => {
+    setFilterValue(e.target.value);
+  }
+
+  return (
+    <input
+    className="filter"
+    value={filterValue}
+    onChange={onChange}
+    type="search"
+    placeholder='Filter...'
+    disabled={disabled}
+    />
+  )
+});
+
+const Header = memo(({ globalFilter, data, setGlobalFilter}) => (
+  <header className="data-table-header">
+    <h2>Data Preview</h2>
+    <TableFilter globalFilter={globalFilter || ''} setGlobalFilter={setGlobalFilter} disabled={null === data} />
+  </header>
+))
+
+const Footer = memo(({previousPage, nextPage, canPreviousPage, canNextPage, pageNumber, totalPages}) => (
+  <footer className="data-table-pagination">
+    <ul>
+      <li>
+        <button onClick={() => previousPage()} className="btn btn-prev" disabled={!canPreviousPage} title="Previous Page"></button>
+      </li>
+      <li>
+        <button onClick={() => nextPage()} className="btn btn-next" disabled={!canNextPage} title="Next Page"></button>
+      </li>
+    </ul>
+    <span>
+      Page{' '} {pageNumber} of {totalPages}
+    </span>
+  </footer>
+))
+
+const PreviewDataTable = ({ data }) => {
+  const [tableData, setTableData] = useState(data ?? []);
+  const {setErrors, errorMessages, config} = useContext(GlobalState);
+
+  const tableColumns = useMemo(() => {
+    const columns = tableData.columns ?? [];
+    if ( columns.length > 0 && columns.includes("") ) {
+      // todo find a way to call the errors. Currently they are in DataImport.js
+      // maybe these can be moved to a file? but then we need a way to add settings like size...
+      setErrors([errorMessages.emptyCols]);
+    }
+    
+    return columns.map((columnName, idx) => {
+        const columnConfig = {
+          id: `column-${columnName}`,
+          accessor: row => row[columnName],
+          Header: columnName,
+          width: 250
+        };
+
+        return columnConfig
+    });
+  }, [tableData]);
+
+  // This adds a columns property just like the D3 function for JSON parsing.
+  const generateColumns = useCallback((data) => {
+    let columns = []
+
+    data.forEach( (rowObj) => {
+      Object.keys(rowObj).forEach( (columnHeading) => {
+        if(false === columns.includes(columnHeading)) {
+          columns.push(columnHeading)
+        }
+      })
+    })
+
+    // D3 uses a weird quirk where it attaches a named property to an array. Replicating here.
+    const newData = [...data];
+
+    if(Array.isArray(newData)) {
+      newData.columns = columns;
+      return newData;
+    }
+  }, [])
+
+  useEffect(() => {
+    if(!data) {
+      return;
+    }
+
+    let newData = [...data];
+
+    newData = generateColumns(newData);
+    validateFipsCodeLength(newData)
+    setTableData(newData)
+  }, [data, generateColumns])
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    state: { pageIndex, globalFilter },
+    prepareRow,
+    setGlobalFilter,
+    page,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    nextPage,
+    previousPage,
+  } = useTable({ columns: tableColumns, data: tableData, initialState: { pageSize: 25 } }, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination);
+
+  const NoData = () => (
+    <section className="no-data-message">
+      <section>
+        <h3>No Data</h3>
+        <p>Import data to preview</p>
+      </section>
+    </section>
+  )
+
+  const PlaceholderTable = () => {
+    return (
+      <section className="no-data">
+        <NoData />
+        <div className="table-container">
+          <table className="editor data-table" role="table">
+          <thead>
+              <tr role="row">
+                  <th scope="col" colSpan="1" role="columnheader">
+                  </th>
+                  <th scope="col" colSpan="1" role="columnheader">
+                  </th>
+                  <th scope="col" colSpan="1" role="columnheader">
+                  </th>
+              </tr>
+          </thead>
+          <tbody>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+            <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+                    <tr role="row">
+                <td role="cell"></td>
+                <td role="cell"></td>
+                <td role="cell"></td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+      </section>
+    )
+  }
+
+  if(!data) return [<Header key="header" />, <PlaceholderTable key="table" />]
+
+  const footerProps = {previousPage, nextPage, canPreviousPage, canNextPage, pageNumber: pageIndex + 1, totalPages: pageOptions.length}
+
+  const Table = () => (
+    <>
+      <section className="data-table-container">
+        <div className="table-container">
+          <table className="data-table" {...getTableProps()} aria-hidden="true">
+            <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>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody {...getTableBodyProps()}>
+              {page.map((row) => {
+                prepareRow(row);
+                return (
+                  <tr {...row.getRowProps()}>
+                    {row.cells.map((cell) => (
+                      <td {...cell.getCellProps()} title={cell.value}>
+                        {cell.render('Cell')}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <Footer {...footerProps} />
+  </>
+  )
+
+  return [<Header key="header" data={data} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key="table" />]
+};
+
+export default PreviewDataTable;

package/src/components/TabPane.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const TabPane = ({ children, className = '' }) => <div className={`tab-content ${className}`}>{children}</div>;
+
+export default TabPane;

package/src/components/Tabs.js

@@ -0,0 +1,62 @@
+import React, { useState, useContext, useEffect } from 'react';
+
+const Tabs = ({ children, startingTab = 0, className, changeTab = null }) => {
+  const [active, setActive] = useState(startingTab);
+
+  let containerClassName = 'tabs';
+
+  if(className) {
+    containerClassName = `tabs ${className}`;
+  }
+
+  const setActiveTab = (disabled, index) => {
+    if(false === disabled) {
+      setActive(index)
+    }
+  }
+
+  useEffect(() => {
+    if(startingTab > -1) {
+      setActive(startingTab)
+    }
+  }, [startingTab])
+
+  const tabs = children.map(({props}, i) => {
+    
+    let classes = 'nav-item'
+
+    let disabled = props.disableRule || false
+
+    if(disabled) {
+      classes += ' disabled';
+    }
+
+    if(i === active) {
+      classes += ' active';
+    }
+
+    return (
+    <li
+      onClick={() => setActiveTab(disabled, i)}
+      key={props.title}
+      className={classes}
+    >
+      {props.icon}
+      {props.title}
+    </li>
+    )
+  })
+
+  return (
+    <>
+      <nav className={containerClassName}>
+        <ul className="nav nav-fill">
+          {tabs}
+        </ul>
+      </nav>
+      {children[active]}
+    </>
+  );
+};
+
+export default Tabs;

package/src/components/modal/Confirmation.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const ConfirmationModal
+ = (props) => {
+	return (
+		<>
+            <p className="message">{props.message}</p>
+            <div className="confirmation-buttons">
+                <div className="btn btn-inline" onClick={props.onCancel}>No</div>
+                <div className="btn btn-inline" onClick={props.onConfirm}>Yes</div>
+            </div>
+		</>
+	);
+};

package/src/components/modal/Modal.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from "react";
+// import FocusLock from "react-focus-lock";
+import ReactDOM from "react-dom";
+import CloseIcon from '../../assets/icons/close.svg';
+
+export const Modal = ({
+  isShown,
+  hide,
+  modalContent,
+  headerText
+}) => {
+  const onKeyDown = (event) => {
+    if (event.keyCode === 27 && isShown) {
+      hide();
+    }
+  };
+
+  useEffect(() => {
+    isShown
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "unset");
+    document.addEventListener("keydown", onKeyDown, false);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, false);
+    };
+  }, [isShown]);
+
+  const modal = (
+    <>
+      <div className="modal-backdrop" onClick={hide} />
+      {/* <FocusLock> */}
+        <div className="modal-wrapper"
+          aria-modal
+          aria-labelledby={headerText}
+          tabIndex={-1}
+          role="dialog"
+        >
+          <div className="modal">
+            <div className="modal-header">
+              <strong>{headerText}</strong>
+              <CloseIcon className="modal-close" onClick={hide} />
+            </div>
+            <div className="modal-content">{modalContent}</div>
+          </div>
+        </div>
+      {/* </FocusLock> */}
+    </>
+  );
+
+  return isShown ? ReactDOM.createPortal(modal, document.body) : null;
+};

package/src/components/modal/UseModal.js

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export const useModal = () => {
+	const [isShown, setIsShown] = useState(false);
+	const toggle = () => setIsShown(!isShown);
+	return {
+		isShown,
+		toggle,
+	};
+};

package/src/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const GlobalState = createContext();
+
+GlobalState.displayName = 'GlobalState';
+
+export default GlobalState;

package/src/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <style type="text/css">
+      body {
+        margin: 0;
+      }
+      .react-container {
+        min-height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="react-container react--editor"></div>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+  </body>
+</html>

package/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+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;
+const domContainer = document.querySelector('.react-container')
+
+
+ReactDOM.render(
+  <React.StrictMode>
+    <CdcEditor startingTab={activeTab} containerEl={domContainer} />
+  </React.StrictMode>,
+  document.querySelector('.react-container')
+);

package/src/scss/_data-table.scss

@@ -0,0 +1,15 @@
+.data-table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5em;
+  h2 {
+    font-weight: 600;
+    font-size: 1.3em;
+  }
+  .filter {
+    align-self: flex-end;
+    font-size: 1em;
+    width: 30%;
+  }
+}

package/src/scss/_variables.scss

@@ -0,0 +1,27 @@
+@import "~@cdc/core/styles/variables";
+
+$xxs: 350px;
+$xs: 576px;
+$sm: 768px;
+$md: 992px;
+$lg: 1200px;
+
+$base-size: 16;
+
+@function size($target, $context: $base-size) {
+  @return calc($target / $context) * 1em;
+}
+
+$gbl-padding: size(30);
+$table-padding: size(10);
+
+// colors
+$white: #fff;
+$darkest-gray: #2e2e2e;
+$gray: #333;
+$light-gray: #797979;
+$lighter-gray: #ebebeb;
+$lightest-gray: #f5f5f5;
+
+$light-yellow: #fde0b5;
+$dark-yellow: #f59a23;

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

@@ -0,0 +1,70 @@
+@import 'variables';
+
+.cdc-editor .choose-vis {
+    padding: $gbl-padding;
+    .capitalize {
+        text-transform: capitalize;
+    }
+    ul + .heading-2 {
+        margin-top: 1em;
+    }
+    .grid {
+        margin-top: 1em;
+        list-style: none;
+        display: flex;
+        li {
+            margin-right: 1rem;
+            margin-bottom: 1rem;
+            width: 165px;
+        }
+        button {
+            background-color: #fff;
+            color: $baseColor;
+            border: solid 1px;
+            border-color: rgb(199,199,199);
+            padding: 1.3em $gbl-padding;
+            height: 100%;
+            align-items: center;
+            display: flex;
+            border: $lightGray 1px solid;
+            margin-right: 1em;
+            cursor: pointer;
+            transition: .1s all; 
+            flex-direction: column;
+            span {
+            text-transform: none;
+            font-size: 1em;
+            }
+            &:hover {
+            background: #F2F2F2;
+            border-color: #949494;
+            transition: .1s all;  
+            }
+            &.active {
+            background: #fff;
+            border-color: #005eaa;
+            color: #005eaa;
+            position: relative;
+                path {
+                    fill: #005eaa;
+                }
+                &:before {
+                    content: " ";
+                    width: 5px;
+                    background: #005eaa;
+                    left: 0;
+                    top: 0;
+                    bottom: 0;
+                    position: absolute;
+                }
+            }
+            svg {
+                display: block;
+                margin: 0 auto .5em;
+                box-sizing: border-box;
+                width: 100px;
+                height: 75px;
+            }
+        }
+    }
+}

package/src/scss/configure-tab.scss

@@ -0,0 +1,19 @@
+.cdc-editor .configure {
+    .editor-panel {
+        top: 3em;
+    }
+    .editor-toggle {
+        top: 3.5em;
+    }
+    .type-dashboard {
+        .editor-heading {
+            top: 3em;
+        }
+        .editor-panel, .visualizations-panel {
+            top: 6em !important;
+        }
+        .editor-toggle {
+            top: 6.5em !important;
+        }
+    }
+}