refactor: update component file structure (#794)

giraffe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.33.6",
+  "version": "2.34.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",

giraffe/src/components/AnnotationHoverLayer.tsx → giraffe/src/components/Annotation/AnnotationHoverLayer.tsx

@@ -1,5 +1,5 @@
 import React, {FunctionComponent} from 'react'
-import {AnnotationMark} from '../types'
+import {AnnotationMark} from '../../types'
 import {AnnotationLayerProps} from './AnnotationLayer'
 import {AnnotationTooltip} from './AnnotationTooltip'
 

giraffe/src/components/AnnotationLayer.tsx → giraffe/src/components/Annotation/AnnotationLayer.tsx

@@ -4,12 +4,12 @@ import {
   AnnotationLayerSpec,
   LayerProps,
   LineHoverDimension,
-} from '../types'
+} from '../../types'
 import {
   getAnnotationHoverIndices,
   getAnnotationsPositions,
-} from '../utils/annotationData'
-import {ANNOTATION_DEFAULT_HOVER_MARGIN} from '../constants/index'
+} from '../../utils/annotationData'
+import {ANNOTATION_DEFAULT_HOVER_MARGIN} from '../../constants/index'
 import {AnnotationHoverLayer} from './AnnotationHoverLayer'
 import {AnnotationLine} from './AnnotationLine'
 

giraffe/src/components/AnnotationLine.scss → giraffe/src/components/Annotation/AnnotationLine.scss

@@ -3,7 +3,7 @@
   ------------------------------------------------------------------------------
 */
 
-.giraffe-annotation-hover{
+.giraffe-annotation-hover {
   cursor: pointer;
   &:hover {
     opacity: 80%;

giraffe/src/components/AnnotationLine.tsx → giraffe/src/components/Annotation/AnnotationLine.tsx

@@ -1,5 +1,5 @@
 import React, {FunctionComponent, createElement} from 'react'
-import {AnnotationDimension, AnnotationPinType} from '../types'
+import {AnnotationDimension, AnnotationPinType} from '../../types'
 
 import styles from './AnnotationLine.scss'
 

giraffe/src/components/AnnotationTooltip.tsx → giraffe/src/components/Annotation/AnnotationTooltip.tsx

@@ -2,12 +2,12 @@ import React, {CSSProperties} from 'react'
 import {FunctionComponent} from 'react'
 import {createPortal} from 'react-dom'
 
-import {Config, AnnotationMark, TooltipPosition} from '../types'
+import {Config, AnnotationMark, TooltipPosition} from '../../types'
 import {
   ANNOTATION_TOOLTIP_CONTAINER_NAME,
   ANNOTATION_DEFAULT_MAX_WIDTH,
-} from '../constants'
-import {useAnnotationTooltipElement} from '../utils/legend/useTooltipElement'
+} from '../../constants'
+import {useAnnotationTooltipElement} from '../../utils/legend/useTooltipElement'
 
 interface Props {
   boundingReference: DOMRect

giraffe/src/components/Annotation/index.ts

@@ -0,0 +1 @@
+export {AnnotationLayer} from './AnnotationLayer'

giraffe/src/components/BandHoverLayer.tsx → giraffe/src/components/Band/BandHoverLayer.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
 import {useRef, FunctionComponent} from 'react'
 
-import {Tooltip} from './Tooltip'
+import {Tooltip} from '../Tooltip'
 import {Props as BandLayerProps} from './BandLayer'
-import {FILL} from '../constants/columnKeys'
-import {BandLineMap, LineHoverDimension, LineData} from '../types'
-import {getBandTooltipData} from '../utils/legend/tooltip'
-import {getBandHoverPoints} from '../utils/bandHover'
-import {drawLines} from '../utils/drawLines'
-import {drawLineHoverData} from '../utils/drawLineHoverData'
-import {useCanvas} from '../utils/useCanvas'
+import {FILL} from '../../constants/columnKeys'
+import {BandLineMap, LineHoverDimension, LineData} from '../../types'
+import {getBandTooltipData} from '../../utils/legend/tooltip'
+import {getBandHoverPoints} from '../../utils/bandHover'
+import {drawLines} from '../../utils/drawLines'
+import {drawLineHoverData} from '../../utils/drawLineHoverData'
+import {useCanvas} from '../../utils/useCanvas'
 
 interface Props extends BandLayerProps {
   bandHoverIndices: BandLineMap

giraffe/src/components/BandLayer.tsx → giraffe/src/components/Band/BandLayer.tsx

@@ -1,18 +1,18 @@
 import React, {FunctionComponent, RefObject, useMemo} from 'react'
 
-import {LayerProps, BandLayerSpec, BandLayerConfig} from '../types'
+import {LayerProps, BandLayerSpec, BandLayerConfig} from '../../types'
 import {BandHoverLayer} from './BandHoverLayer'
-import {simplifyLineData} from '../utils/lineData'
-import {useCanvas} from '../utils/useCanvas'
-import {drawBands} from '../utils/drawBands'
-import {useHoverPointIndices} from '../utils/useHoverPointIndices'
-import {useBandHoverColumns} from '../utils/useBandHover'
-import {FILL} from '../constants/columnKeys'
-import {getBandHoverIndices, getLineLengths} from '../utils/bandHover'
+import {simplifyLineData} from '../../utils/lineData'
+import {useCanvas} from '../../utils/useCanvas'
+import {drawBands} from '../../utils/drawBands'
+import {useHoverPointIndices} from '../../utils/useHoverPointIndices'
+import {useBandHoverColumns} from '../../utils/useBandHover'
+import {FILL} from '../../constants/columnKeys'
+import {getBandHoverIndices, getLineLengths} from '../../utils/bandHover'
 import {
   groupLineIndicesIntoBands,
   alignMinMaxWithBand,
-} from '../transforms/band'
+} from '../../transforms/band'
 
 export interface Props extends LayerProps {
   spec: BandLayerSpec

giraffe/src/components/Band/index.ts

@@ -0,0 +1 @@
+export {BandLayer} from './BandLayer'

giraffe/src/components/DapperScrollbars.scss → giraffe/src/components/DapperScrollbars/DapperScrollbars.scss

@@ -1,4 +1,4 @@
-@import '../style/variables.scss';
+@import '../../style/variables.scss';
 
 $dapper-scrollbars--size: 6px;
 

giraffe/src/components/DapperScrollbars.tsx → giraffe/src/components/DapperScrollbars/DapperScrollbars.tsx

@@ -10,12 +10,12 @@ import classnames from 'classnames'
 import Scrollbar from 'react-scrollbars-custom'
 import {ScrollState} from 'react-scrollbars-custom/dist/types/types'
 
-import {StandardFunctionProps} from '../types'
-import {ComponentSize} from '../types'
-import {InfluxColors} from '../constants/colorSchemes'
+import {StandardFunctionProps} from '../../types'
+import {ComponentSize} from '../../types'
+import {InfluxColors} from '../../constants/colorSchemes'
 import styles from './DapperScrollbars.scss'
 
-import {styleReducer} from '../utils/styleReducer'
+import {styleReducer} from '../../utils/styleReducer'
 
 // Types
 type UIEventHandler = (event: UIEvent<HTMLDivElement>) => void

giraffe/src/components/DapperScrollbars/index.ts

@@ -0,0 +1 @@
+export {DapperScrollbars} from './DapperScrollbars'

giraffe/src/components/Gauge.tsx → giraffe/src/components/Gauge/Gauge.tsx

@@ -1,21 +1,21 @@
 // Libraries
 import React, {FunctionComponent, useRef, useEffect} from 'react'
-import {range} from '../utils/range'
-import {get} from '../utils/get'
+import {range} from '../../utils/range'
+import {get} from '../../utils/get'
 
 // Utils
-import {formatStatValue, MAX_DECIMAL_PLACES} from '../utils/formatStatValue'
+import {formatStatValue, MAX_DECIMAL_PLACES} from '../../utils/formatStatValue'
 
 import {
   COLOR_TYPE_MIN,
   COLOR_TYPE_MAX,
   DEFAULT_VALUE_MIN,
   DEFAULT_VALUE_MAX,
   MIN_THRESHOLDS,
-} from '../constants/gaugeStyles'
+} from '../../constants/gaugeStyles'
 
 // Types
-import {Color, DecimalPlaces, GaugeTheme} from '../types'
+import {Color, DecimalPlaces, GaugeTheme} from '../../types'
 
 interface Props {
   width: number

giraffe/src/components/GaugeLayer.tsx → giraffe/src/components/Gauge/GaugeLayer.tsx

@@ -3,11 +3,11 @@ import React, {FunctionComponent} from 'react'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
 // Types
-import {GaugeLayerConfig} from '../types'
+import {GaugeLayerConfig} from '../../types'
 import {Gauge} from './Gauge'
 
 // Constants
-import {GAUGE_THEME_DARK} from '../constants/gaugeStyles'
+import {GAUGE_THEME_DARK} from '../../constants/gaugeStyles'
 
 interface Props {
   value: number

giraffe/src/components/Gauge/index.ts

@@ -0,0 +1 @@
+export {GaugeLayer} from './GaugeLayer'

giraffe/src/components/Geo.tsx → giraffe/src/components/GeoMap/Geo.tsx

@@ -5,16 +5,16 @@ import Control from 'react-leaflet-control'
 import 'leaflet/dist/leaflet.css'
 
 // Components
-import {BingMap} from './geo/bing-maps/BingMap'
-import {LayerSwitcher} from './geo/LayerSwitcher'
+import {BingMap} from './bing-maps/BingMap'
+import {LayerSwitcher} from './LayerSwitcher'
 
 // Utils
-import {preprocessData} from './geo/processing/tableProcessing'
-import {ZOOM_FRACTION, getMinZoom, getRowLimit} from '../utils/geo'
+import {preprocessData} from './processing/tableProcessing'
+import {ZOOM_FRACTION, getMinZoom, getRowLimit} from '../../utils/geo'
 
 // Types
-import {GeoLayerConfig} from '..'
-import {Config, Table} from '../types'
+import {GeoLayerConfig} from '../..'
+import {Config, Table} from '../../types'
 
 interface Props extends Partial<GeoLayerConfig> {
   width: number
@@ -29,15 +29,16 @@ const Geo: FunctionComponent<Props> = props => {
     height,
     lat,
     latLonColumns,
+    layers,
     lon,
     mapStyle,
     s2Column,
     stylingConfig,
+    tileServerConfiguration,
     useS2CellID,
     width,
     zoom,
   } = props
-  const {layers, tileServerConfiguration} = props
   const {tileServerUrl, bingKey} = tileServerConfiguration
   const mapRef = React.createRef<any>()
 

giraffe/src/components/GeoLayer.tsx → giraffe/src/components/GeoMap/GeoLayer.tsx

@@ -6,9 +6,9 @@ import {AutoSizer} from 'react-virtualized'
 import Geo from './Geo'
 
 // Types
-import {Config, Table} from '../types'
-import {GeoLayerConfig} from '../types/geo'
-import {calculateVariableAssignment} from '../utils/geo'
+import {Config, Table} from '../../types'
+import {GeoLayerConfig} from '../../types/geo'
+import {calculateVariableAssignment} from '../../utils/geo'
 
 interface OwnProps {
   table: Table
@@ -143,7 +143,7 @@ const onAutoResize = (
   )
 }
 
-const GeoLayer: FunctionComponent<OwnProps> = React.memo(props => {
+export const GeoLayer: FunctionComponent<OwnProps> = React.memo(props => {
   if (props.config.tileServerConfiguration) {
     return (
       <AutoSizer>
@@ -157,5 +157,3 @@ const GeoLayer: FunctionComponent<OwnProps> = React.memo(props => {
   }
   return null
 })
-
-export default GeoLayer

giraffe/src/components/geo/LayerSwitcher.tsx → giraffe/src/components/GeoMap/LayerSwitcher.tsx

@@ -1,5 +1,4 @@
 import React, {FunctionComponent} from 'react'
-import {GeoViewLayer} from '../../types/geo'
 
 //components
 import CircleMarkerLayer from './CircleMarkerLayer'
@@ -9,13 +8,14 @@ import TrackMapLayer from './TrackMapLayer'
 
 //types
 import {
+  Config,
   GeoCircleViewLayer,
   GeoHeatMapViewLayer,
   GeoPointMapViewLayer,
   GeoTrackMapViewLayer,
-} from '../../'
+  GeoViewLayer,
+} from '../../types'
 import {GeoTable} from './processing/GeoTable'
-import {Config} from '../../types'
 
 interface Props {
   layer: GeoViewLayer

giraffe/src/components/GeoMap/index.ts

@@ -0,0 +1 @@
+export {GeoLayer} from './GeoLayer'

giraffe/src/components/Icon.scss → giraffe/src/components/Icon/Icon.scss

@@ -7,12 +7,12 @@
 
 @font-face {
   font-family: 'icomoon';
-  src: url('../fonts/icomoon.eot') format('embedded-opentype');
-  src: url('../fonts/icomoon.eot') format('embedded-opentype'),
-    url('../fonts/icomoon.woff2') format('woff2'),
-    url('../fonts/icomoon.ttf') format('truetype'),
-    url('../fonts/icomoon.woff') format('woff'),
-    url('../fonts/icomoon.svg') format('svg');
+  src: url('../../fonts/icomoon.eot') format('embedded-opentype');
+  src: url('../../fonts/icomoon.eot') format('embedded-opentype'),
+    url('../../fonts/icomoon.woff2') format('woff2'),
+    url('../../fonts/icomoon.ttf') format('truetype'),
+    url('../../fonts/icomoon.woff') format('woff'),
+    url('../../fonts/icomoon.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }

giraffe/src/components/Icon.tsx → giraffe/src/components/Icon/Icon.tsx

@@ -3,13 +3,13 @@ import React, {forwardRef} from 'react'
 import classnames from 'classnames'
 
 // Types
-import {IconFont, StandardFunctionProps} from '../types'
+import {IconFont, StandardFunctionProps} from '../../types'
 
 // Styles
 import styles from './Icon.scss'
 
 // Utils
-import {styleReducer} from '../utils/styleReducer'
+import {styleReducer} from '../../utils/styleReducer'
 
 export interface IconProps extends StandardFunctionProps {
   /** Icon to display */

giraffe/src/components/Icon/index.ts

@@ -0,0 +1 @@
+export {Icon} from './Icon'

giraffe/src/components/Input.tsx → giraffe/src/components/Input/Input.tsx

@@ -10,14 +10,14 @@ import React, {
 import classnames from 'classnames'
 
 // Components
-import {Icon} from './Icon'
+import {Icon} from '../Icon'
 import {StatusIndicator} from './StatusIndicator'
 
 // Styles
 import styles from './Input.scss'
 
 // Utils
-import {styleReducer} from '../utils/styleReducer'
+import {styleReducer} from '../../utils/styleReducer'
 
 // Types
 import {
@@ -27,7 +27,7 @@ import {
   IconFont,
   InputType,
   StandardFunctionProps,
-} from '../types'
+} from '../../types'
 
 export interface InputProps extends StandardFunctionProps {
   /** Minimum value for number & range types */

giraffe/src/components/StatusIndicator.tsx → giraffe/src/components/Input/StatusIndicator.tsx

@@ -3,22 +3,22 @@ import React, {forwardRef} from 'react'
 import classnames from 'classnames'
 
 // Components
-import {Icon} from './Icon'
+import {Icon} from '../Icon'
 
 // Types
-import {} from '../types'
+import {} from '../../types'
 import {
   ComponentSize,
   ComponentStatus,
   IconFont,
   StandardFunctionProps,
-} from '../types'
+} from '../../types'
 
 // Styles
 import styles from './StatusIndicator.scss'
 
 // Utils
-import {styleReducer} from '../utils/styleReducer'
+import {styleReducer} from '../../utils/styleReducer'
 
 export interface StatusIndicatorProps extends StandardFunctionProps {
   /** The status to indicate */

giraffe/src/components/Input/index.ts

@@ -0,0 +1 @@
+export {Input} from './Input'

giraffe/src/components/Legend.tsx

@@ -2,11 +2,11 @@ import React, {CSSProperties} from 'react'
 import {FunctionComponent} from 'react'
 
 import {Config, LegendData, LegendType} from '../types'
-import {generateLegendStyles, LegendPillsStyles} from './LegendStyles'
 import {
   LEGEND_COLUMN_CLASSNAME,
   STATIC_LEGEND_COLUMN_CLASSNAME,
 } from '../constants'
+import {generateLegendStyles, LegendPillsStyles} from '../style/legend'
 
 interface Props {
   type: LegendType