feat(dashboardeditor): initial commit of shell

src/components/DashboardEditor/DashboardEditor.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import uuid from 'uuid';
+
+import { settings } from '../../constants/Settings';
+import { CARD_SIZES } from '../../constants/LayoutConstants';
+import { Button, CodeSnippet, CardEditor } from '../../index';
+
+const { iotPrefix } = settings;
+
+const defaultProps = {
+  initialValue: [],
+  renderHeader: null,
+};
+
+const propTypes = {
+  /** initial dashboard data to edit */
+  initialValue: PropTypes.array, // eslint-disable-line react/forbid-prop-types
+  /** if provided, renders header content above preview */
+  renderHeader: PropTypes.func,
+};
+
+const DashboardEditor = ({ initialValue, renderHeader }) => {
+  const baseClassName = `${iotPrefix}--dashboard-editor`;
+
+  // show the gallery if no card is being edited
+  const [dashboardCards, setDashboardCards] = useState(initialValue);
+  const [selectedCardId, setSelectedCardId] = useState();
+
+  const addCard = data => setDashboardCards([...dashboardCards, data]);
+  const removeCard = id => setDashboardCards(dashboardCards.filter(i => i.id !== id));
+
+  return (
+    <div className={baseClassName}>
+      <div className={`${baseClassName}--content`}>
+        {renderHeader && renderHeader()}
+        <div className={`${baseClassName}--preview`}>
+          <h5>Dashboard Template preview</h5>
+          <div>
+            As you add and edit cards, the content underneath here will be updated in real-time. We
+            will replace this with the actual Dashboard component.
+          </div>
+          <br />
+          {dashboardCards.map(i => (
+            <div style={{ paddingBottom: '2rem' }}>
+              <CodeSnippet type="multi" hideCopyButton style={{ width: '30rem' }}>
+                {JSON.stringify(i, null, 4)}
+              </CodeSnippet>
+              <br />
+              <Button
+                style={{ marginRight: '1rem' }}
+                kind="danger"
+                onClick={() => removeCard(i.id)}
+              >
+                Delete
+              </Button>
+              <Button disabled={selectedCardId === i.id} onClick={() => setSelectedCardId(i.id)}>
+                Edit
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+      <CardEditor
+        value={dashboardCards?.find(i => i.id === selectedCardId)}
+        onShowGallery={() => setSelectedCardId(null)}
+        // NOTE: won't support changes to card ID
+        onChange={cardData =>
+          setDashboardCards(dashboardCards.map(i => (i.id === cardData.id ? cardData : i)))
+        }
+        onAddCard={type =>
+          addCard({
+            id: uuid.v4(),
+            title: 'New card',
+            size: CARD_SIZES.SMALL,
+            type,
+          })
+        }
+      />
+    </div>
+  );
+};
+
+DashboardEditor.propTypes = propTypes;
+DashboardEditor.defaultProps = defaultProps;
+
+export default DashboardEditor;

src/components/DashboardEditor/DashboardEditor.story.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, object } from '@storybook/addon-knobs';
+
+import { PageTitleBar, Button } from '../../index';
+
+import DashboardEditor from './DashboardEditor';
+
+storiesOf('Watson IoT Experimental/DashboardEditor', module)
+  .addDecorator(withKnobs)
+  .add('default', () => (
+    <div style={{ height: 'calc(100vh - 6rem)' }}>
+      <DashboardEditor
+        renderHeader={() => (
+          <PageTitleBar
+            title="Custom Header content"
+            extraContent={<Button>Do something</Button>}
+          />
+        )}
+      />
+    </div>
+  ));

src/components/DashboardEditor/_dashboard-editor.scss

@@ -0,0 +1,11 @@
+.#{$iot-prefix}--dashboard-editor {
+  display: flex;
+  height: 100%;
+  &--content {
+    flex: 1;
+    flex-direction: column;
+  }
+  &--preview {
+    flex: 1;
+  }
+}

src/index.js

@@ -60,6 +60,7 @@ export useSuiteHeaderData from './components/SuiteHeader/hooks/useSuiteHeaderDat
 export Dashboard from './components/Dashboard/Dashboard';
 export DashboardHeader from './components/Dashboard/DashboardHeader';
 export DashboardGrid from './components/Dashboard/DashboardGrid';
+export DashboardEditor from './components/DashboardEditor/DashboardEditor';
 export CardEditor from './components/CardEditor/CardEditor';
 export Card from './components/Card/Card';
 export ValueCard from './components/ValueCard/ValueCard';

src/styles.scss

@@ -182,6 +182,7 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import 'components/CardEditor/CardEditForm/card-edit-form';
 @import 'components/ComposedModal/composed-modal';
 @import 'components/Dashboard/dashboard';
+@import 'components/DashboardEditor/dashboard-editor';
 @import 'components/DateTimePicker/date-time-picker';
 @import 'components/GaugeCard/gauge-card';
 @import 'components/Header/header';