remove more dead code (#710)

packages/desktop-client/src/components/Box.js

-import React from 'react';
-
-function getFlex(flex) {
-  flex = flex != null ? flex : 1;
-  if (typeof flex === 'number') {
-    return flex + ' 0 auto';
-  }
-  return flex;
-}
-
-function Box({ flex, children, direction, style }) {
-  return (
-    <div
-      style={{
-        ...style,
-        flex: getFlex(flex),
-        display: 'flex',
-        flexDirection: direction || 'column',
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default Box;

packages/desktop-client/src/components/SpreadsheetInterface.js

-import React from 'react';
-
-import { View } from 'loot-design/src/components/common';
-import Cell from 'loot-design/src/components/spreadsheet/Cell';
-
-function SpreadsheetInterface() {
-  return (
-    <View>
-      <View style={{ flexDirection: 'row' }}>
-        <View style={{ width: 20 }} />
-        <View style={{ flex: 1 }}>1</View>
-        <View style={{ flex: 1 }}>2</View>
-        <View style={{ flex: 1 }}>3</View>
-        <View style={{ flex: 1 }}>4</View>
-      </View>
-      <View style={{ flexDirection: 'row' }}>
-        <View style={{ width: 20 }}>A</View>
-        <Cell name="A1" />
-        <Cell name="A2" />
-        <Cell name="A3" />
-        <Cell name="A4" />
-      </View>
-      <View style={{ flexDirection: 'row' }}>
-        <View style={{ width: 20 }}>B</View>
-        <Cell name="B1" />
-        <Cell name="B2" />
-        <Cell name="B3" />
-        <Cell name="B4" />
-      </View>
-      <View style={{ flexDirection: 'row' }}>
-        <View style={{ width: 20 }}>C</View>
-        <Cell name="C1" />
-        <Cell name="C2" />
-        <Cell name="C3" />
-        <Cell name="C4" />
-      </View>
-      <View style={{ flexDirection: 'row' }}>
-        <View style={{ width: 20 }}>D</View>
-        <Cell name="D1" />
-        <Cell name="D2" />
-        <Cell name="D3" />
-        <Cell name="D4" />
-      </View>
-      <View style={{ flexDirection: 'row' }}>
-        <View style={{ width: 20 }}>E</View>
-        <Cell name="E1" />
-        <Cell name="E2" />
-        <Cell name="E3" />
-        <Cell name="E4" />
-      </View>
-    </View>
-  );
-}
-
-export default SpreadsheetInterface;

packages/loot-design/src/components/table.js

@@ -11,8 +11,6 @@ import React, {
 import { useStore } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { scope } from '@jlongster/lively';
-
 import { styles, colors } from '../style';
 import AnimatedLoading from '../svg/AnimatedLoading';
 import DeleteIcon from '../svg/v0/Delete';
@@ -29,7 +27,6 @@ import {
   IntersectionBoundary,
   Menu,
 } from './common';
-import DateSelect from './DateSelect';
 import { FixedSizeList } from './FixedSizeList';
 import { KeyHandlers } from './KeyHandlers';
 import format from './spreadsheet/format';
@@ -449,35 +446,6 @@ export function CustomCell({
   );
 }
 
-export const DateSelectCell = scope(lively => {
-  function DateSelectCell({ props: { dateSelectProps, ...props }, updater }) {
-    const { inputProps = {} } = dateSelectProps;
-    return (
-      <Cell
-        {...props}
-        style={{
-          zIndex: props.exposed ? 1 : 0,
-          ...props.style,
-        }}
-      >
-        {() => (
-          <DateSelect
-            {...dateSelectProps}
-            tooltipStyle={{ minWidth: 225 }}
-            inputProps={{
-              ...inputProps,
-              onBlur: e => fireBlur(inputProps && inputProps.onBlur, e),
-              style: [inputCellStyle, { zIndex: 300 }],
-            }}
-          />
-        )}
-      </Cell>
-    );
-  }
-
-  return lively(DateSelectCell);
-});
-
 export function DeleteCell({ onDelete, style, ...props }) {
   return (
     <Cell
@@ -669,54 +637,6 @@ export function SheetCell({
   );
 }
 
-export const Highlight = scope(lively => {
-  function Highlight({ inst, state: { activated, highlightOff } }) {
-    return (
-      <View
-        innerRef={el => (inst.el = el)}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          transition: 'background-color 1.8s',
-          backgroundColor: 'white',
-        }}
-      />
-    );
-  }
-
-  function activate({ inst }) {
-    inst.el.style.transitionDuration = '0s';
-    inst.el.style.backgroundColor = colors.y9;
-    setTimeout(() => {
-      if (inst.el) {
-        inst.el.style.transitionDuration = '1.8s';
-        inst.el.style.backgroundColor = 'white';
-      }
-    }, 0);
-  }
-
-  return lively(Highlight, {
-    getInitialState({ props }) {
-      return { activated: false, highlightOff: true };
-    },
-
-    componentWillReceiveProps(bag, nextProps) {
-      if (!bag.props.active && nextProps.active) {
-        return activate(bag);
-      }
-    },
-
-    componentDidMount(bag) {
-      if (bag.props.active) {
-        return activate(bag);
-      }
-    },
-  });
-});
-
 export function TableHeader({ headers, children, version, ...rowProps }) {
   return (
     <View