onekijs-ui 0.9.2 → 0.15.2

package/src/components/dashboard/DashboardService.ts

@@ -0,0 +1,412 @@
+import {
+  AnonymousObject,
+  DefaultService,
+  get,
+  isFalse,
+  isMobile,
+  isTrue,
+  reducer,
+  service,
+  set,
+} from 'onekijs-framework';
+import React from 'react';
+import { clearSelection, forceCursor, getTranslateXY } from '../../utils/dom';
+import { ResizeStep } from '../resizer/typings';
+import {
+  DashboardArea,
+  DashboardBodyPanel,
+  DashboardBodyPanelProps,
+  DashboardHorizontalArea,
+  DashboardHorizontalPanel,
+  DashboardHorizontalPanelProps,
+  DashboardSize,
+  DashboardState,
+  DashboardVerticalArea,
+  DashboardVerticalPanel,
+  DashboardVerticalPanelProps,
+} from './typings';
+import { isAreaInColumn, isAreaInRow } from './utils/dashboardArea';
+import { getCollapseKey, getFloatingKey } from './utils/dashboardLength';
+
+@service
+export class DashboardService extends DefaultService<DashboardState> {
+  protected areas: DashboardArea[][] = [
+    ['none', 'none', 'none'],
+    ['none', 'none', 'none'],
+    ['none', 'none', 'none'],
+  ];
+
+  @reducer
+  collapse(area: DashboardArea | 'all', collapse = true): void {
+    if (area === 'all') {
+      ['left', 'right', 'header', 'footer'].forEach((area) => {
+        set(this.state, `${area}.${this._getCollapseKey()}`, collapse);
+      });
+    } else {
+      set(this.state, `${area}.${this._getCollapseKey()}`, collapse);
+    }
+  }
+
+  @reducer
+  collapseFloating(): void {
+    ['left', 'right', 'header', 'footer'].forEach((area) => {
+      const panel = this.state[area as 'left' | 'right' | 'header' | 'footer'];
+      if (panel && panel[this._getFloatingKey()]) {
+        panel[this._getCollapseKey()] = true;
+      }
+    });
+  }
+
+  @reducer
+  float(area: DashboardArea | 'all', float = true): void {
+    if (area === 'all') {
+      ['left', 'right', 'header', 'footer'].forEach((area) => {
+        set(this.state, `${area}.${this._getFloatingKey()}`, float);
+      });
+    } else {
+      set(this.state, `${area}.${this._getFloatingKey()}`, float);
+    }
+  }
+
+  getBodyPanel(): DashboardBodyPanel | undefined {
+    return this.state.body;
+  }
+
+  getHorizontalPanel(area: 'footer' | 'header'): DashboardHorizontalPanel | undefined {
+    return this.state[area];
+  }
+
+  getVerticalPanel(area: 'left' | 'right'): DashboardVerticalPanel | undefined {
+    return this.state[area];
+  }
+
+  @reducer
+  initBodyPanel(_props: DashboardBodyPanelProps, ref: React.RefObject<HTMLDivElement>): void {
+    this.areas[1][1] = 'body';
+    this.state.body = { ref };
+    this._compileAreas();
+  }
+
+  @reducer
+  initContainer(ref: React.RefObject<HTMLDivElement>): void {
+    this.state.container = { ref };
+  }
+
+  @reducer
+  initHorizontalPanel(
+    area: 'footer' | 'header',
+    props: DashboardHorizontalPanelProps,
+    ref: React.RefObject<HTMLDivElement>,
+  ): void {
+    const dashboardPanel: DashboardHorizontalPanel = {
+      area,
+      className: props.className || '',
+      collapseHeight: props.collapseHeight ?? '50px',
+      collapseLarge: props.collapseLarge ?? props.collapse ?? false,
+      collapseMedium: props.collapseMedium ?? props.collapse ?? true,
+      collapseSmall: props.collapseSmall ?? props.collapse ?? true,
+      floatingLarge: props.floatingLarge ?? props.floating ?? false,
+      floatingMedium: props.floatingMedium ?? props.floating ?? false,
+      floatingSmall: props.floatingSmall ?? props.floating ?? true,
+      minHeight: props.minHeight ?? 0,
+      height: props.height ?? '70px',
+      maxHeight: props.maxHeight ?? 0,
+      ref,
+      resizable: props.resizable || false,
+    };
+    this.state[area] = dashboardPanel;
+    this._fillRow(area === 'header' ? 0 : 2, area);
+  }
+
+  @reducer
+  initVerticalPanel(
+    area: 'left' | 'right',
+    props: DashboardVerticalPanelProps,
+    ref: React.RefObject<HTMLDivElement>,
+  ): void {
+    const dashboardPanel: DashboardVerticalPanel = {
+      area,
+      className: props.className || '',
+      collapseLarge: props.collapseLarge ?? props.collapse ?? false,
+      collapseMedium: props.collapseMedium ?? props.collapse ?? true,
+      collapseSmall: props.collapseSmall ?? props.collapse ?? true,
+      collapseWidth: props.collapseWidth ?? '50px',
+      floatingLarge: props.floatingLarge ?? props.floating ?? false,
+      floatingMedium: props.floatingMedium ?? props.floating ?? false,
+      floatingSmall: props.floatingSmall ?? props.floating ?? true,
+      minWidth: props.minWidth ?? 0,
+      maxWidth: props.maxWidth ?? 0,
+      width: props.width ?? '200px',
+      ref,
+      resizable: props.resizable || false,
+    };
+    this.state[area] = dashboardPanel;
+    this._fillColumn(area === 'left' ? 0 : 2, area);
+  }
+
+  @reducer
+  resizeHeight(area: DashboardHorizontalArea, nextHeight: number, step: ResizeStep): void {
+    const panel = this.state[area];
+    const left = this.state.left;
+    const right = this.state.right;
+    const body = this.state.body;
+    const header = this.state.header;
+    const footer = this.state.footer;
+    const elements: AnonymousObject<HTMLDivElement | undefined> = {};
+    elements['panel'] = panel !== undefined && panel.ref.current !== null ? panel.ref.current : undefined;
+    elements['body'] = body !== undefined && body.ref.current !== null ? body.ref.current : undefined;
+    // only touch the left panel if it's at the footer of the header panel or at the header of the footer panel
+    elements['left'] =
+      isAreaInColumn('first', area, this.state.areas) && left !== undefined && left.ref.current !== null
+        ? left.ref.current
+        : undefined;
+    // only touch the right panel if it's at the footer of the header panel or at the header of the footer panel
+    elements['right'] =
+      isAreaInColumn('last', area, this.state.areas) && right !== undefined && right.ref.current !== null
+        ? right.ref.current
+        : undefined;
+
+    elements['header'] = header !== undefined && header.ref.current !== null ? header.ref.current : undefined;
+    elements['footer'] = footer !== undefined && footer.ref.current !== null ? footer.ref.current : undefined;
+
+    switch (step) {
+      case 'start':
+        // deactivate transition animation during the resize
+        clearSelection();
+        forceCursor('n-resize');
+        ['panel', 'body', 'left', 'right'].forEach((_area) => {
+          const el = elements[_area];
+          if (el) el.style.transition = 'none';
+        });
+        break;
+      case 'stop':
+        forceCursor(undefined);
+        // set the new height in the panel object. Will be used by styled to set the correct height via CSS
+        if (panel) panel.height = `${nextHeight}px`;
+        // remove any style added during the resize and let styled managed height and height via CSS
+        ['panel', 'body', 'left', 'right'].forEach((_area) => {
+          const el = elements[_area];
+          if (el) {
+            ['transition', 'height', 'transform'].forEach((k) => {
+              el.style[k as any] = '';
+            });
+          }
+        });
+        break;
+      case 'run':
+        if (elements['panel']) {
+          // force the new height via the style
+          elements['panel'].style.height = `${nextHeight}px`;
+          // if the resized panel is the footer one, we must translateX the panel in addition of changing the size
+          if (area === 'footer') {
+            const translate = getTranslateXY(elements['panel']);
+            elements['panel'].style.transform = `translate(${translate.x}px,-${nextHeight}px)`;
+          }
+
+          (['left', 'right', 'body'] as DashboardArea[]).forEach((_area) => {
+            let height = '100%';
+            const el = elements[_area];
+            if (el) {
+              if (!isAreaInColumn('first', _area, this.state.areas) && header && elements['header']) {
+                // remove the header height
+                height = `${height} - ${header[this._getFloatingKey()] ? 0 : elements['header'].offsetHeight}px`;
+              }
+
+              if (!isAreaInColumn('last', _area, this.state.areas) && footer && elements['footer']) {
+                // remove the header height
+                height = `${height} - ${footer[this._getFloatingKey()] ? 0 : elements['footer'].offsetHeight}px`;
+              }
+
+              el.style.height = height === '100%' ? height : `calc(${height})`;
+              // If the resized panel is the header one, we must translateX non vertical panels in addition of changing the size
+              if (area === 'header') {
+                const translate = getTranslateXY(el);
+                el.style.transform = `translate(${translate.x}px,${nextHeight}px)`;
+              }
+            }
+          });
+        }
+        break;
+    }
+  }
+
+  @reducer
+  resizeWidth(area: DashboardVerticalArea, nextWidth: number, step: ResizeStep): void {
+    const panel = this.state[area];
+    const header = this.state.header;
+    const footer = this.state.footer;
+    const body = this.state.body;
+    const left = this.state.left;
+    const right = this.state.right;
+    const elements: AnonymousObject<HTMLDivElement | undefined> = {};
+    elements['panel'] = panel !== undefined && panel.ref.current !== null ? panel.ref.current : undefined;
+    elements['body'] = body !== undefined && body.ref.current !== null ? body.ref.current : undefined;
+    // only touch the header panel if it's at the right of the left panel or at the left of the right panel
+    elements['header'] =
+      isAreaInRow('first', area, this.state.areas) && header !== undefined && header.ref.current !== null
+        ? header.ref.current
+        : undefined;
+    // only touch the footer panel if it's at the right of the left panel or at the left of the right panel
+    elements['footer'] =
+      isAreaInRow('last', area, this.state.areas) && footer !== undefined && footer.ref.current !== null
+        ? footer.ref.current
+        : undefined;
+
+    elements['left'] = left !== undefined && left.ref.current !== null ? left.ref.current : undefined;
+    elements['right'] = right !== undefined && right.ref.current !== null ? right.ref.current : undefined;
+
+    switch (step) {
+      case 'start':
+        clearSelection();
+        forceCursor('e-resize');
+        // deactivate transition animation during the resize
+        ['panel', 'body', 'header', 'footer'].forEach((_area) => {
+          const el = elements[_area];
+          if (el) el.style.transition = 'none';
+        });
+        break;
+      case 'stop':
+        forceCursor(undefined);
+        // set the new width in the panel object. Will be used by styled to set the correct width via CSS
+        if (panel) panel.width = `${nextWidth}px`;
+        // remove any style added during the resize and let styled managed width and height via CSS
+        ['panel', 'body', 'header', 'footer'].forEach((_area) => {
+          const el = elements[_area];
+          if (el) {
+            ['transition', 'width', 'transform'].forEach((k) => {
+              el.style[k as any] = '';
+            });
+          }
+        });
+        break;
+      case 'run':
+        if (elements['panel']) {
+          // force the new width via the style
+          elements['panel'].style.width = `${nextWidth}px`;
+          // if the resized panel is the right one, we must translateX the panel in addition of changing the size
+          if (area === 'right') {
+            const translate = getTranslateXY(elements['panel']);
+            elements['panel'].style.transform = `translate(-${nextWidth}px,${translate.y}px)`;
+          }
+
+          (['header', 'footer', 'body'] as DashboardArea[]).forEach((_area) => {
+            let width = '100%';
+            const el = elements[_area];
+            if (el) {
+              if (!isAreaInColumn('first', _area, this.state.areas) && left && elements['left']) {
+                // remove the left width
+                width = `${width} - ${left[this._getFloatingKey()] ? 0 : elements['left'].offsetWidth}px`;
+              }
+
+              if (!isAreaInColumn('last', _area, this.state.areas) && right && elements['right']) {
+                // remove the left width
+                width = `${width} - ${right[this._getFloatingKey()] ? 0 : elements['right'].offsetWidth}px`;
+              }
+
+              el.style.width = width === '100%' ? width : `calc(${width})`;
+              // If the resized panel is the left one, we must translateX non vertical panels in addition of changing the size
+              if (area === 'left') {
+                const translate = getTranslateXY(el);
+                el.style.transform = `translate(${nextWidth}px,${translate.y}px)`;
+              }
+            }
+          });
+        }
+        break;
+    }
+  }
+
+  showOverlay(): boolean {
+    let result = false;
+    const areas: ('right' | 'left' | 'header' | 'footer')[] = ['right', 'left', 'header', 'footer'];
+    areas.forEach((area) => {
+      if (
+        isTrue(get(this.state[area], this._getFloatingKey())) &&
+        isFalse(get(this.state[area], this._getCollapseKey()))
+      ) {
+        result = true;
+      }
+    });
+    return result;
+  }
+
+  @reducer
+  toggle(area: DashboardArea | 'all'): void {
+    const areas: DashboardArea[] = area === 'all' ? ['left', 'right', 'header', 'footer'] : [area];
+    areas.forEach((area) => {
+      const collapse: boolean = get(this.state, `${area}.${this._getCollapseKey()}`, false);
+      set(this.state, `${area}.${this._getCollapseKey()}`, !collapse);
+    });
+  }
+
+  @reducer
+  _compileAreas(): void {
+    const clone = (items: any) => items.map((item: any) => (Array.isArray(item) ? clone(item) : item));
+    const dashboardAreas: DashboardArea[][] = clone(this.areas);
+
+    if (!this.state.right) {
+      // drop last column
+      [0, 1, 2].forEach((i) => dashboardAreas[i].splice(2, 1));
+    }
+
+    if (!this.state.left) {
+      // drop first column
+      [0, 1, 2].forEach((i) => dashboardAreas[i].splice(0, 1));
+    }
+
+    if (!this.state.footer) {
+      dashboardAreas.splice(2, 1);
+    }
+
+    if (!this.state.header) {
+      dashboardAreas.splice(0, 1);
+    }
+    this.state.areas = dashboardAreas;
+  }
+
+  // When a "column" area component is found as a child of the dashboard component, it tries to take the maximum of space
+  // If the left component is found first, it will take the thre areas of the first column
+  // If the left component if found after the header component, it will only take the second and third cell of the first column
+  @reducer
+  _fillColumn(colIndex: number, area: DashboardVerticalArea): void {
+    const areas = this.areas;
+    areas.forEach((row, rowIndex) => {
+      if (row[colIndex] === 'none') {
+        areas[rowIndex][colIndex] = area;
+      }
+    });
+    this._compileAreas();
+  }
+
+  _getCollapseKey(): 'collapseSmall' | 'collapseMedium' | 'collapseLarge' {
+    return getCollapseKey(this._getSize());
+  }
+
+  _getFloatingKey(): 'floatingSmall' | 'floatingMedium' | 'floatingLarge' {
+    return getFloatingKey(this._getSize());
+  }
+
+  _getSize(): DashboardSize {
+    if (!this.state.container || !this.state.container.ref.current) {
+      return isMobile() ? 'small' : 'large';
+    }
+    const dashboardWidth = this.state.container.ref.current.offsetWidth;
+    if (dashboardWidth < 768) return 'small';
+    if (dashboardWidth < 992) return 'medium';
+    return 'large';
+  }
+
+  // When a "row" area component is found as a child of the dashboard component, it tries to take the maximum of space
+  // If the header component is found first, it will take the thre areas of the first row
+  // If the header component if found after the left component, it will only take the second and third cell of the first row
+  @reducer
+  _fillRow(rowIndex: number, area: DashboardHorizontalArea): void {
+    const areas = this.areas;
+    areas[rowIndex].forEach((cell, colIndex) => {
+      if (cell === 'none') {
+        areas[rowIndex][colIndex] = area;
+      }
+    });
+    this._compileAreas();
+  }
+}

package/src/components/dashboard/components/DashboardBody.tsx

@@ -0,0 +1,138 @@
+import { FCC } from 'onekijs-framework';
+import React, { CSSProperties, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { backgroundColor } from '../../../styles/background';
+import { ComponentStyle } from '../../../styles/typings';
+import useDashboardService from '../hooks/useDashboardService';
+import useDashboardState from '../hooks/useDashboardState';
+import { DashboardBodyComponentProps, DashboardBodyPanelProps, DashboardSize } from '../typings';
+import { getDashboardPanelLength, getFloatingKey, getWorkspacePanelLength } from '../utils/dashboardLength';
+
+const DashboardBodyComponent: FCC<DashboardBodyComponentProps> = (props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const service = useDashboardService();
+  const stepRef = useRef<'initializing' | 'initialized' | undefined>();
+  const style: CSSProperties = {};
+  if (stepRef.current !== 'initialized') {
+    style.transition = 'none';
+  }
+
+  useEffect(() => {
+    if (stepRef.current === undefined) {
+      stepRef.current = 'initializing';
+      service.initBodyPanel(props, ref);
+    } else if (stepRef.current === 'initializing' && ref.current) {
+      stepRef.current = 'initialized';
+      ref.current.style.transition = '';
+    }
+  });
+
+  return (
+    <div className={props.className} ref={ref} style={style}>
+      {stepRef.current && props.children}
+    </div>
+  );
+};
+
+export const getBodyLength = (
+  type: 'width' | 'height',
+  size: DashboardSize,
+  props: DashboardBodyComponentProps,
+): string => {
+  let result = '100%';
+
+  const front = type === 'width' ? props.left : props.header;
+  const back = type === 'width' ? props.right : props.footer;
+
+  const frontLength = getWorkspacePanelLength(type, size, front);
+  if (frontLength !== 0) {
+    result = `${result} - ${frontLength}`;
+  }
+  const backLength = getWorkspacePanelLength(type, size, back);
+  if (backLength !== 0) {
+    result = `${result} - ${backLength}`;
+  }
+
+  return result === '100%' ? result : `calc(${result})`;
+};
+
+// const getTranslate = (axis: 'x' | 'y', size: DashboardSize, props: DashboardBodyComponentProps): string | 0 => {
+//   let translate: string | 0 = 0;
+//   const panel = axis === 'x' ? props.left : props.header;
+//   const panelCollapseLength =
+//     axis === 'x'
+//       ? (panel as DashboardVerticalPanel)?.collapseWidth
+//       : (panel as DashboardHorizontalPanel)?.collapseHeight;
+
+//   const panelLength =
+//     axis === 'x' ? (panel as DashboardVerticalPanel)?.width : (panel as DashboardHorizontalPanel)?.height;
+
+//   if (size === 'small') {
+//     if (panel && !panel.floating && panelCollapseLength !== 0) {
+//       translate = panelCollapseLength;
+//     }
+//   } else if (panel && !panel.floating) {
+//     translate = panel.collapse ? panelCollapseLength : panelLength;
+//   }
+//   return translate;
+// };
+
+const getTranslateX = (size: DashboardSize, props: DashboardBodyComponentProps): string | 0 => {
+  const panel = props.left;
+  if (panel) {
+    return panel[getFloatingKey(size)]
+      ? getDashboardPanelLength('width', size, panel) // actual size of the panel
+      : getWorkspacePanelLength('width', size, panel); // size of the panel on the workspace (if floating, the workspace panel size is 0)
+  }
+  return 0;
+};
+
+const getTranslateY = (size: DashboardSize, props: DashboardBodyComponentProps): string | 0 => {
+  const panel = props.header;
+  if (panel) {
+    return panel[getFloatingKey(size)]
+      ? getDashboardPanelLength('height', size, panel) // actual size of the panel
+      : getWorkspacePanelLength('height', size, panel); // size of the panel on the workspace (if floating, the workspace panel size is 0)
+  }
+  return 0;
+};
+
+const style: ComponentStyle<DashboardBodyComponentProps> = (props) => {
+  const t = props.theme.dashboard.body;
+  return css`
+    ${backgroundColor(t.bgColor)}
+    grid-area: body;
+    width: ${() => getBodyLength('width', 'small', props)};
+    height: ${() => getBodyLength('height', 'small', props)};
+    overflow: auto;
+    transition: ${() => (props.panel ? 'transform 0.6s, width 0.6s, height 0.6s' : 'none')};
+    transform: translate(${() => getTranslateX('small', props)}, ${() => getTranslateY('small', props)});
+    @media only screen and (min-width: 768px) {
+      width: ${() => getBodyLength('width', 'medium', props)};
+      height: ${() => getBodyLength('height', 'medium', props)};
+      transform: translate(${() => getTranslateX('medium', props)}, ${() => getTranslateY('medium', props)});
+    }
+    @media only screen and (min-width: 992px) {
+      width: ${() => getBodyLength('width', 'large', props)};
+      height: ${() => getBodyLength('height', 'large', props)};
+      transform: translate(${() => getTranslateX('large', props)}, ${() => getTranslateY('large', props)});
+    }
+  `;
+};
+
+const StyledDashboardBody = styled(DashboardBodyComponent)`
+  ${style}
+`;
+
+const DashboardBody: FCC<DashboardBodyPanelProps> = (props) => {
+  const state = useDashboardState();
+
+  const panel = state.body;
+  return (
+    <StyledDashboardBody {...state} panel={panel} className={props.className}>
+      {props.children}
+    </StyledDashboardBody>
+  );
+};
+
+export default DashboardBody;

package/src/components/dashboard/components/DashboardComponent.tsx

@@ -0,0 +1,36 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import { DashboardService } from '../DashboardService';
+import { DashboardServiceContext } from '../hooks/useDashboardService';
+import { DashboardStateContext } from '../hooks/useDashboardState';
+import { DashboardProps } from '../typings';
+import DashboardContainer from './DashboardContainer';
+import DashboardOverlay from './DashboardOverlay';
+
+const DashboardComponent: FCC<DashboardProps & { service: DashboardService }> = ({
+  ContainerComponent = DashboardContainer,
+  OverlayComponent = DashboardOverlay,
+  children,
+  service,
+}) => {
+  return (
+    <DashboardServiceContext.Provider value={service}>
+      <DashboardStateContext.Provider value={service.state}>
+        <ContainerComponent
+          areas={service.state.areas}
+          header={service.state.header}
+          footer={service.state.footer}
+          left={service.state.left}
+          right={service.state.right}
+          body={service.state.body}
+          onInit={(ref) => service.initContainer(ref)}
+        >
+          <OverlayComponent show={service.showOverlay()} onClick={() => service.collapseFloating()} />
+          {children}
+        </ContainerComponent>
+      </DashboardStateContext.Provider>
+    </DashboardServiceContext.Provider>
+  );
+};
+
+export default DashboardComponent;

package/src/components/dashboard/components/DashboardContainer.tsx

@@ -0,0 +1,64 @@
+import { FCC } from 'onekijs-framework';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { DashboardContainerProps } from '../typings';
+
+export const getDashboardTemplate = (dashboardContainerProps: DashboardContainerProps): string => {
+  const { areas, left, right, header, footer } = dashboardContainerProps;
+  if (!areas) {
+    return '';
+  }
+  const clone = (items: any) => items.map((item: any) => (Array.isArray(item) ? clone(item) : item));
+  const rows: (0 | string)[] = [0, '1fr', 0];
+  const cols: (0 | string)[] = [0, '1fr', 0];
+
+  if (!right) {
+    // drop last column
+    cols.splice(2, 1);
+  }
+
+  if (!left) {
+    // drop first column
+    cols.splice(0, 1);
+  }
+
+  if (!footer) {
+    rows.splice(2, 1);
+  }
+
+  if (!header) {
+    rows.splice(0, 1);
+  }
+
+  return `
+    grid-template-columns: ${cols.join(' ')};
+    grid-template-rows: ${rows.join(' ')};
+    grid-template-areas: "${areas.map((row) => row.join(' ')).join('" "')}";
+  `;
+};
+
+const DashboardContainerComponent: FCC<DashboardContainerProps> = (props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    props.onInit(ref);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={props.className} ref={ref}>
+      {props.children}
+    </div>
+  );
+};
+
+const DashboardContainer = styled(DashboardContainerComponent)`
+  display: grid;
+  ${(props) => getDashboardTemplate(props)}
+  height: 100vh;
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+`;
+
+export default DashboardContainer;

package/src/components/dashboard/components/DashboardFooter.tsx

@@ -0,0 +1,4 @@
+import dashboardHorizontalPanel from '../hoc/dashboardHorizontalPanel';
+
+const DashboardFooter = dashboardHorizontalPanel('footer');
+export default DashboardFooter;

package/src/components/dashboard/components/DashboardHeader.tsx

@@ -0,0 +1,4 @@
+import dashboardHorizontalPanel from '../hoc/dashboardHorizontalPanel';
+
+const DashboardHeader = dashboardHorizontalPanel('header');
+export default DashboardHeader;

package/src/components/dashboard/components/DashboardLeft.tsx

@@ -0,0 +1,4 @@
+import dashboardVerticalPanel from '../hoc/dashboardVerticalPanel';
+
+const DashboardLeft = dashboardVerticalPanel('left');
+export default DashboardLeft;