Co-locate related components (FIRST-Tech-Challenge#114)

* Create path aliases

* Remove index.d.ts (conflicts with node module resolution for the path aliases)

* Fix eslint import rule for type alias

* Remove unknown option

* Co-locate components

* Install tailwind prettier plugin

* Run format

* Turn on no relative imports

* Convert to absolute imports

FtcDashboard/dash/.eslintrc.json

@@ -40,12 +40,14 @@
       "error",
       "ignorePackages",
       {
+        "": "never",
         "js": "never",
         "jsx": "never",
         "ts": "never",
         "tsx": "never"
       }
     ],
+    "import/no-relative-parent-imports": "error",
     "prettier/prettier": [
       "error",
       {

FtcDashboard/dash/.prettierrc.js

@@ -3,5 +3,4 @@ module.exports = {
   singleQuote: true,
   printWidth: 80,
   trailingComma: 'all',
-  'triple-equals': [true, 'allow-undefined-check', 'allow-null-check'],
 };

FtcDashboard/dash/package.json

@@ -65,6 +65,7 @@
     "lint-staged": "^13.0.4",
     "postcss": "^8.4.16",
     "prettier": "^2.8.0",
+    "prettier-plugin-tailwindcss": "^0.2.0",
     "tailwindcss": "^3.1.8",
     "typescript": "^4.8.3",
     "vite": "^3.1.3",

FtcDashboard/dash/src/components/ConfigurableLayout.tsx → FtcDashboard/dash/src/components/ConfigurableLayout/ConfigurableLayout.tsx

@@ -1,34 +1,34 @@
-import React, { ReactElement, useState, useEffect, useRef } from 'react';
+import { ReactElement, useState, useEffect, useRef, cloneElement } from 'react';
 import RGL, { WidthProvider, Layout } from 'react-grid-layout';
 import { v4 as uuidv4 } from 'uuid';
 import styled from 'styled-components';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-import { ConfigurableView } from '../enums/ConfigurableView';
-import GraphView from '../containers/GraphView';
-import FieldView from '../containers/FieldView';
-import ConfigView from '../containers/ConfigView';
-import TelemetryView from '../containers/TelemetryView';
-import CameraView from '../containers/CameraView';
-import OpModeView from '../containers/OpModeView';
+import { ConfigurableView } from '@/enums/ConfigurableView';
+import GraphView from '@/components/views/GraphView/GraphView';
+import FieldView from '@/components/views/FieldView/FieldView';
+import ConfigView from '@/components/views/ConfigView/ConfigView';
+import TelemetryView from '@/components/views/TelemetryView';
+import CameraView from '@/components/views/CameraView';
+import OpModeView from '@/components/views/OpModeView';
+import LoggingView from '@/components/views/LoggingView/LoggingView';
 
 import RadialFab from './RadialFab/RadialFab';
 import RadialFabChild from './RadialFab/RadialFabChild';
 import ViewPicker from './ViewPicker';
 
-import useMouseIdleListener from '../hooks/useMouseIdleListener';
-import useUndoHistory from '../hooks/useUndoHistory';
+import useMouseIdleListener from '@/hooks/useMouseIdleListener';
+import useUndoHistory from '@/hooks/useUndoHistory';
 
-import { ReactComponent as AddIcon } from '../assets/icons/add.svg';
-import { ReactComponent as DeleteSweepIcon } from '../assets/icons/delete_sweep.svg';
-import { ReactComponent as DeleteXIcon } from '../assets/icons/delete_x.svg';
-import LockIconURL from '../assets/icons/lock.svg';
-import { ReactComponent as RemoveCircleIcon } from '../assets/icons/remove_circle.svg';
-import { ReactComponent as RemoveCircleOutlineIcon } from '../assets/icons/remove_circle_outline.svg';
-import CreateIconURL from '../assets/icons/create.svg';
-import LoggingView from '../containers/LoggingView/LoggingView';
+import { ReactComponent as AddIcon } from '@/assets/icons/add.svg';
+import { ReactComponent as DeleteSweepIcon } from '@/assets/icons/delete_sweep.svg';
+import { ReactComponent as DeleteXIcon } from '@/assets/icons/delete_x.svg';
+import LockIconURL from '@/assets/icons/lock.svg';
+import { ReactComponent as RemoveCircleIcon } from '@/assets/icons/remove_circle.svg';
+import { ReactComponent as RemoveCircleOutlineIcon } from '@/assets/icons/remove_circle_outline.svg';
+import CreateIconURL from '@/assets/icons/create.svg';
 
 function maxArray(a: number[], b: number[]) {
   if (a.length !== b.length) {
@@ -509,7 +509,7 @@ export default function ConfigurableLayout() {
     >
       {gridItems.length === 0 && (
         <div
-          className={`text-center mt-16 p-12 transition-colors ${
+          className={`mt-16 p-12 text-center transition-colors ${
             isLayoutLocked ? 'bg-white' : 'bg-gray-100'
           }`}
         >
@@ -537,25 +537,25 @@ export default function ConfigurableLayout() {
         >
           {gridItems.map((item) => (
             <div key={item.id}>
-              {React.cloneElement(VIEW_MAP[item.view], {
+              {cloneElement(VIEW_MAP[item.view], {
                 isDraggable: item.layout.isDraggable,
                 isUnlocked: !isLayoutLocked,
               })}
               <div
-                className={`absolute top-0 left-0 w-full h-full bg-yellow-300 bg-opacity-50 flex-center rounded transition ${
+                className={`flex-center absolute top-0 left-0 h-full w-full rounded bg-yellow-300 bg-opacity-50 transition ${
                   isInDeleteMode
                     ? 'pointer-events opacity-100'
                     : 'pointer-events-none opacity-0'
                 }`}
               >
                 <button
-                  className="p-4 bg-opacity-50 border-4 border-yellow-600 rounded-full opacity-50 focus:outline-none focus:ring focus:ring-yellow-800"
+                  className="rounded-full border-4 border-yellow-600 bg-opacity-50 p-4 opacity-50 focus:outline-none focus:ring focus:ring-yellow-800"
                   onClick={() => {
                     removeItem(item.id);
                   }}
                   disabled={!isInDeleteMode}
                 >
-                  <DeleteXIcon className="w-20 h-20 text-yellow-600" />
+                  <DeleteXIcon className="h-20 w-20 text-yellow-600" />
                 </button>
               </div>
             </div>
@@ -586,7 +586,7 @@ export default function ConfigurableLayout() {
           toolTipText="Add Item"
           clickEvent={() => setIsShowingViewPicker(!isShowingViewPicker)}
         >
-          <AddIcon className="w-6 h-6 text-white" />
+          <AddIcon className="h-6 w-6 text-white" />
         </RadialFabChild>
         <RadialFabChild
           customClass={`w-12 h-12 border shadow-md shadow-orange-500/30 hover:shadow-lg hover:shadow-orange-500/50 focus:ring ${
@@ -602,9 +602,9 @@ export default function ConfigurableLayout() {
           clickEvent={() => setIsInDeleteMode(!isInDeleteMode)}
         >
           {isInDeleteMode ? (
-            <RemoveCircleOutlineIcon className="w-5 h-5" />
+            <RemoveCircleOutlineIcon className="h-5 w-5" />
           ) : (
-            <RemoveCircleIcon className="w-5 h-5" />
+            <RemoveCircleIcon className="h-5 w-5" />
           )}
         </RadialFabChild>
         <RadialFabChild
@@ -616,7 +616,7 @@ export default function ConfigurableLayout() {
           toolTipText="Clear Layout"
           clickEvent={() => setGrid([])}
         >
-          <DeleteSweepIcon className="w-5 h-5" />
+          <DeleteSweepIcon className="h-5 w-5" />
         </RadialFabChild>
       </RadialFab>
       <ViewPicker

FtcDashboard/dash/src/components/RadialFab/RadialFab.tsx → FtcDashboard/dash/src/components/ConfigurableLayout/RadialFab/RadialFab.tsx

@@ -1,7 +1,7 @@
-import React, { ReactElement } from 'react';
+import { ReactElement, cloneElement, Children } from 'react';
 import styled from 'styled-components';
 
-import { WithChildren } from '../../typeHelpers';
+import { WithChildren } from '@/typeHelpers';
 
 type RadialFabProps = {
   isOpen: boolean;
@@ -58,8 +58,8 @@ const RadialFab = (props: WithChildren<RadialFabProps>) => {
       <FloatingButton {...props} onClick={props.clickEvent}>
         <CreateIcon src={props.icon} />
       </FloatingButton>
-      {React.Children.map(props.children, (e) =>
-        React.cloneElement(e as ReactElement, { isOpen: props.isOpen }),
+      {Children.map(props.children, (e) =>
+        cloneElement(e as ReactElement, { isOpen: props.isOpen }),
       )}
     </FixedContainer>
   );

FtcDashboard/dash/src/components/RadialFab/RadialFabChild.tsx → FtcDashboard/dash/src/components/ConfigurableLayout/RadialFab/RadialFabChild.tsx

@@ -1,9 +1,9 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 
-import { WithChildren } from '../../typeHelpers';
-import useDelayedTooltip from '../../hooks/useDelayedTooltip';
-import ToolTip from '../ToolTip';
+import { WithChildren } from '@/typeHelpers';
+import useDelayedTooltip from '@/hooks/useDelayedTooltip';
+import ToolTip from '@/components/ToolTip';
 
 type RadialFabChildProps = {
   customClass?: string;

FtcDashboard/dash/src/components/ViewPicker.tsx → FtcDashboard/dash/src/components/ConfigurableLayout/ViewPicker.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import { cloneElement } from 'react';
 import styled from 'styled-components';
 
-import { ConfigurableView } from '../enums/ConfigurableView';
+import { ConfigurableView } from '@/enums/ConfigurableView';
 
-import { ReactComponent as CameraIcon } from '../assets/icons/camera.svg';
-import { ReactComponent as SettingsIcon } from '../assets/icons/settings.svg';
-import { ReactComponent as ChartIcon } from '../assets/icons/chart.svg';
-import { ReactComponent as ApiIcon } from '../assets/icons/api.svg';
-import { ReactComponent as SubjectIcon } from '../assets/icons/subject.svg';
-import { ReactComponent as WidgetIcon } from '../assets/icons/widgets.svg';
-import { ReactComponent as ListIcon } from '../assets/icons/list.svg';
+import { ReactComponent as CameraIcon } from '@/assets/icons/camera.svg';
+import { ReactComponent as SettingsIcon } from '@/assets/icons/settings.svg';
+import { ReactComponent as ChartIcon } from '@/assets/icons/chart.svg';
+import { ReactComponent as ApiIcon } from '@/assets/icons/api.svg';
+import { ReactComponent as SubjectIcon } from '@/assets/icons/subject.svg';
+import { ReactComponent as WidgetIcon } from '@/assets/icons/widgets.svg';
+import { ReactComponent as ListIcon } from '@/assets/icons/list.svg';
 
 type ViewPickerProps = {
   isOpen: boolean;
@@ -50,49 +50,49 @@ const listContent = [
   {
     title: 'OpMode View',
     view: ConfigurableView.OPMODE_VIEW,
-    icon: <WidgetIcon className="w-6 h-6" />,
+    icon: <WidgetIcon className="h-6 w-6" />,
     customStyles: 'focus:ring-red-600',
     iconBg: 'bg-red-500',
   },
   {
     title: 'Field View',
     view: ConfigurableView.FIELD_VIEW,
-    icon: <ApiIcon className="w-7 h-7 transform rotate-45" />,
+    icon: <ApiIcon className="h-7 w-7 rotate-45 transform" />,
     customStyles: 'focus:ring-blue-600',
     iconBg: 'bg-blue-500',
   },
   {
     title: 'Graph View',
     view: ConfigurableView.GRAPH_VIEW,
-    icon: <ChartIcon className="text-white w-6 h-6" />,
+    icon: <ChartIcon className="h-6 w-6 text-white" />,
     customStyles: 'focus:ring-green-600',
     iconBg: 'bg-green-500',
   },
   {
     title: 'Config View',
     view: ConfigurableView.CONFIG_VIEW,
-    icon: <SettingsIcon className="w-6 h-6" />,
+    icon: <SettingsIcon className="h-6 w-6" />,
     customStyles: 'focus:ring-orange-600',
     iconBg: 'bg-orange-500',
   },
   {
     title: 'Telemetry View',
     view: ConfigurableView.TELEMETRY_VIEW,
-    icon: <ListIcon className="w-7 h-7" />,
+    icon: <ListIcon className="h-7 w-7" />,
     customStyles: 'focus:ring-yellow-600',
     iconBg: 'bg-yellow-500',
   },
   {
     title: 'Logging View',
     view: ConfigurableView.LOGGING_VIEW,
-    icon: <SubjectIcon className="w-6 h-6" />,
+    icon: <SubjectIcon className="h-6 w-6" />,
     customStyles: 'focus:ring-ping-600',
     iconBg: 'bg-pink-500',
   },
   {
     title: 'Camera View',
     view: ConfigurableView.CAMERA_VIEW,
-    icon: <CameraIcon className="w-5 h-5" />,
+    icon: <CameraIcon className="h-5 w-5" />,
     customStyles: 'focus:ring-purple-600',
     iconBg: 'bg-purple-500',
   },
@@ -110,11 +110,11 @@ const ViewPicker = (props: ViewPickerProps) => {
           onClick={() => props.clickEvent(item.view)}
           disabled={!props.isOpen}
         >
-          <div className={`w-8 h-8  rounded mr-3 flex-center ${item.iconBg}`}>
-            {React.cloneElement(item.icon)}
+          <div className={`flex-center mr-3  h-8 w-8 rounded ${item.iconBg}`}>
+            {cloneElement(item.icon)}
           </div>
           <div className="flex flex-col items-start">
-            <h3 className="text-lg mt-0 leading-4 font-medium">{item.title}</h3>
+            <h3 className="mt-0 text-lg font-medium leading-4">{item.title}</h3>
           </div>
         </CardButton>
       ))}

FtcDashboard/dash/src/containers/Dashboard.jsx → FtcDashboard/dash/src/components/Dashboard.jsx

@@ -1,13 +1,13 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { connect as reduxConnect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import LayoutPreset from '../enums/LayoutPreset';
-import { connect, disconnect } from '../store/actions/socket';
-import { saveLayoutPreset, getLayoutPreset } from '../store/actions/settings';
+import LayoutPreset from '@/enums/LayoutPreset';
+import { connect, disconnect } from '@/store/actions/socket';
+import { saveLayoutPreset, getLayoutPreset } from '@/store/actions/settings';
 
-import { ReactComponent as ConnectedIcon } from '../assets/icons/wifi.svg';
-import { ReactComponent as DisconnectedIcon } from '../assets/icons/wifi_off.svg';
+import { ReactComponent as ConnectedIcon } from '@/assets/icons/wifi.svg';
+import { ReactComponent as DisconnectedIcon } from '@/assets/icons/wifi_off.svg';
 
 class Dashboard extends Component {
   componentDidMount() {
@@ -30,11 +30,11 @@ class Dashboard extends Component {
         className="flex flex-col"
         style={{ width: '100vw', height: '100vh' }}
       >
-        <header className="flex justify-between items-center bg-blue-600 px-3 py-1 text-white">
+        <header className="flex items-center justify-between bg-blue-600 px-3 py-1 text-white">
           <h1 className="text-2xl font-medium">FTC Dashboard</h1>
           <div className="flex-center">
             <select
-              className="text-black text-sm rounded mx-2 py-1 bg-blue-100 border-blue-300 focus:border-blue-100 focus:ring-2 focus:ring-white focus:ring-opacity-40"
+              className="mx-2 rounded border-blue-300 bg-blue-100 py-1 text-sm text-black focus:border-blue-100 focus:ring-2 focus:ring-white focus:ring-opacity-40"
               value={this.props.layoutPreset}
               onChange={(evt) =>
                 this.props.dispatch(saveLayoutPreset(evt.target.value))
@@ -60,9 +60,9 @@ class Dashboard extends Component {
               </p>
             )}
             {this.props.isConnected ? (
-              <ConnectedIcon className="ml-4 w-10 h-10" />
+              <ConnectedIcon className="ml-4 h-10 w-10" />
             ) : (
-              <DisconnectedIcon className="ml-4 w-10 h-10" />
+              <DisconnectedIcon className="ml-4 h-10 w-10" />
             )}
           </div>
         </header>

FtcDashboard/dash/src/components/Tile.jsx → FtcDashboard/dash/src/components/Layout/Tile.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const Tile = ({ children, row, col }) => (

FtcDashboard/dash/src/components/TileGrid.jsx → FtcDashboard/dash/src/components/Layout/TileGrid.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const TileGrid = ({ gridTemplate, children }) => (

FtcDashboard/dash/src/components/ToolTip.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, FunctionComponent, RefObject, ReactNode } from 'react';
+import { useRef, FunctionComponent, RefObject, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 import styled from 'styled-components';

FtcDashboard/dash/src/containers/CameraView.jsx → FtcDashboard/dash/src/components/views/CameraView.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import AutoFitCanvas from '../components/AutoFitCanvas';
-import { ReactComponent as RefreshIcon } from '../assets/icons/refresh.svg';
+import AutoFitCanvas from '@/components/Canvas/AutoFitCanvas';
+import { ReactComponent as RefreshIcon } from '@/assets/icons/refresh.svg';
 import BaseView, {
   BaseViewHeading,
   BaseViewBody,
@@ -76,7 +76,7 @@ class CameraView extends React.Component {
           <BaseViewIcons>
             <BaseViewIconButton>
               <RefreshIcon
-                className="w-6 h-6"
+                className="h-6 w-6"
                 onClick={() =>
                   this.setState({ rotation: (this.state.rotation + 1) % 4 })
                 }

FtcDashboard/dash/src/containers/BasicVariable.jsx → FtcDashboard/dash/src/components/views/ConfigView/BasicVariable.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import BooleanInput from '../components/inputs/BooleanInput';
-import EnumInput from '../components/inputs/EnumInput';
-import TextInput from '../components/inputs/TextInput';
-import VariableType from '../enums/VariableType';
+import BooleanInput from './inputs/BooleanInput';
+import EnumInput from './inputs/EnumInput';
+import TextInput from './inputs/TextInput';
+import VariableType from '@/enums/VariableType';
 import {
   validateDouble,
   validateInt,
   validateString,
-} from '../components/inputs/validation';
+} from './inputs/validation';
 
 class BasicVariable extends React.Component {
   render() {