Merge 2e2231c into 45de583

.gitignore

@@ -18,6 +18,8 @@ build/
 node_modules/
 .pnp
 .pnp.js
+.yalc
+yalc.lock
 
 # Code coverage directory
 coverage/

package.json

@@ -23,13 +23,8 @@
   },
   "devDependencies": {
     "coveralls": "^3.1.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-simple-import-sort": "^5.0.3",
     "husky": ">=4",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5"
+    "npm-run-all": "^4.1.5"
   },
   "husky": {
     "hooks": {

public-dashboard-client/.eslintrc.json

@@ -1,6 +1 @@
-{
-  "env": {
-    "browser": true,
-    "jest": true
-  }
-}
+{ "extends": "@recidiviz" }

public-dashboard-client/package.json

@@ -49,18 +49,32 @@
     "react-sticky": "^6.0.3",
     "semiotic": "^1.20.5",
     "set-order": "^0.3.5",
-    "//": "TODO(#236): unpin & upgrade styled-components after bugfix",
     "styled-components": "5.1.1",
     "styled-normalize": "^8.0.7",
     "topojson": "^3.0.2"
   },
   "devDependencies": {
+    "@recidiviz/eslint-config": "^1.0.0",
     "@testing-library/dom": "^7.26.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^12.1.10",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
+    "babel-eslint": "^10.0.0",
+    "eslint": "^6.6.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-import-resolver-typescript": "^2.3.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "jest-date-mock": "^1.0.8",
-    "lint-staged": ">=10"
+    "lint-staged": ">=10",
+    "prettier": "^2.2.1"
   },
   "browserslist": {
     "production": [

public-dashboard-client/src/App.js

@@ -2,7 +2,7 @@ import { Router, Redirect } from "@reach/router";
 import { setup as setupBreakpoints } from "@w11r/use-breakpoint";
 import React from "react";
 import { Helmet } from "react-helmet";
-import { ThemeProvider } from "styled-components";
+import { ThemeProvider } from "styled-components/macro";
 import { CUSTOM_BREAKPOINTS, DEFAULT_TENANT } from "./constants";
 import { InfoPanelProvider } from "./info-panel";
 import SiteStyles from "./site-styles";

public-dashboard-client/src/aspect-ratio-wrapper/AspectRatioWrapper.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 // implements a version of the Aspect Ratio Box technique described here:
 // https://github.com/zcreativelabs/react-simple-maps/issues/37#issuecomment-349435145

public-dashboard-client/src/bar-chart-trellis/BarChartTrellis.js

@@ -18,7 +18,7 @@
 import PropTypes from "prop-types";
 import React, { useState, useCallback } from "react";
 import { FacetController, OrdinalFrame } from "semiotic";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import ChartWrapper from "../chart-wrapper";
 import ResponsiveTooltipController from "../responsive-tooltip-controller";
 import { THEME } from "../theme";

public-dashboard-client/src/branding-bar/BrandingBar.js

@@ -3,7 +3,7 @@ import useBreakpoint, { mediaQuery } from "@w11r/use-breakpoint";
 import classNames from "classnames";
 import React from "react";
 import useCollapse from "react-collapsed";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 import MenuClosedIconSrc from "../assets/icons/menuClosed.svg";
 import MenuOpenIconSrc from "../assets/icons/menuOpen.svg";
 import ExternalLinkSrc from "../assets/icons/externalLink.svg";

public-dashboard-client/src/bubble-chart/BubbleChart.js

@@ -5,7 +5,7 @@ import forceLimit from "d3-force-limit";
 import { scaleSqrt } from "d3-scale";
 import React, { useState } from "react";
 import NetworkFrame from "semiotic/lib/NetworkFrame";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import ColorLegend from "../color-legend";
 import ResponsiveTooltipController from "../responsive-tooltip-controller";
 import { THEME } from "../theme";

public-dashboard-client/src/chart-error/ChartError.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 const Wrapper = styled.div`
   align-items: center;

public-dashboard-client/src/chart-wrapper/ChartWrapper.js

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 const ChartWrapper = styled.div`
   /* classes provided by Semiotic */

public-dashboard-client/src/cobranding/Cobranding.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import cobrandingSrc from "../assets/images/us_nd_cobranding.png";
 import cobrandingLightSrc from "../assets/images/us_nd_cobranding_light.png";

public-dashboard-client/src/color-legend/ColorLegend.js

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { highlightFade } from "../utils";
 
 const ColorLegendWrapper = styled.div`

public-dashboard-client/src/controls/CohortSelect.js

@@ -21,7 +21,7 @@ import { ascending } from "d3-array";
 import { useSelect } from "downshift";
 import PropTypes from "prop-types";
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import checkMarkPath from "../assets/icons/checkMark.svg";
 import {
   ControlLabel,

public-dashboard-client/src/controls/Dropdown.js

@@ -27,7 +27,7 @@ import {
   MenuItems,
   MenuPopover,
 } from "@reach/menu-button";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import {
   ControlContainer,
   ControlLabel,

public-dashboard-client/src/controls/MonthControl.js

@@ -1,6 +1,6 @@
 import { Slider, Track, Thumb } from "@accessible/slider";
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import PropTypes from "prop-types";
 import { ControlContainer, ControlLabel, ControlValue } from "./shared";
 

public-dashboard-client/src/controls/shared.js

@@ -16,7 +16,7 @@
 // =============================================================================
 
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { PillContainer, PillValue } from "../pill";
 

public-dashboard-client/src/detail-page/DetailPage.js

@@ -23,7 +23,7 @@ import React, { useState } from "react";
 import Measure from "react-measure";
 import { StickyContainer, Sticky } from "react-sticky";
 import { exact, tail } from "set-order";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import ChartError from "../chart-error";
 import {
   COLLAPSIBLE_NAV_BREAKPOINT,

public-dashboard-client/src/disclaimer/Disclaimer.js

@@ -1,7 +1,7 @@
 import { mediaQuery } from "@w11r/use-breakpoint";
 import PropTypes from "prop-types";
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { COLLAPSIBLE_NAV_BREAKPOINT } from "../constants";
 
 const SMALL_DATA = (

public-dashboard-client/src/download-data-modal/DownloadDataModal.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { HeadingDescription, HeadingTitle } from "../heading";
 import { LinkPill } from "../pill";

public-dashboard-client/src/footer/Footer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import classNames from "classnames";
 import { getYear } from "date-fns";
 import useBreakpoint from "@w11r/use-breakpoint";

public-dashboard-client/src/heading/HeadingDescription.js

@@ -1,5 +1,5 @@
 import { mediaQuery } from "@w11r/use-breakpoint";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 const HeadingDescription = styled.div`
   font-size: 24px;

public-dashboard-client/src/heading/HeadingTitle.js

@@ -1,5 +1,5 @@
 import { mediaQuery } from "@w11r/use-breakpoint";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { THEME } from "../theme";
 
 const HeadingTitle = styled.h1`

public-dashboard-client/src/info-panel/InfoPanel.js

@@ -1,7 +1,7 @@
 import useBreakpoint from "@w11r/use-breakpoint";
 import PropTypes from "prop-types";
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { ReactComponent as MenuOpenIcon } from "../assets/icons/menuOpen.svg";
 import { useInfoPanelDispatch } from "./InfoPanelContext";
 

public-dashboard-client/src/loading/Loading.js

@@ -1,6 +1,6 @@
 import useBreakpoint, { mediaQuery } from "@w11r/use-breakpoint";
 import React from "react";
-import styled, { keyframes } from "styled-components";
+import styled, { keyframes } from "styled-components/macro";
 
 import { HeadingTitle } from "../heading";
 import { ReactComponent as SpinnerIcon } from "../assets/icons/spinner.svg";

public-dashboard-client/src/methodology-modal/MethodologyModal.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { PATHS, SECTION_TITLES, ALL_PAGES } from "../constants";
 import { HeadingDescription, HeadingTitle } from "../heading";

public-dashboard-client/src/modal/Modal.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import ModalDialog from "./ModalDialog";
 

public-dashboard-client/src/modal/ModalDialog.js

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import useBreakpoint from "@w11r/use-breakpoint";
 
 import CloseModalSrc from "../assets/icons/closeModal.svg";

public-dashboard-client/src/monthly-timeseries/MonthlyTimeseries.js

@@ -2,7 +2,7 @@ import { parse, format } from "date-fns";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 import ResponsiveOrdinalFrame from "semiotic/lib/ResponsiveOrdinalFrame";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import ChartWrapper from "../chart-wrapper";
 import Disclaimer from "../disclaimer";
 import ResponsiveTooltipController from "../responsive-tooltip-controller";

public-dashboard-client/src/nav-bar/NavBar.js

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { Link } from "@reach/router";
 import classNames from "classnames";
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { mediaQuery } from "@w11r/use-breakpoint";
 
 import { PATHS, ALL_PAGES } from "../constants";

public-dashboard-client/src/page-error/PageError.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { HeadingTitle, HeadingDescription } from "../heading";
 
 const Wrapper = styled.div`

public-dashboard-client/src/page-not-found/PageNotFound.js

@@ -1,6 +1,6 @@
 import { Link } from "@reach/router";
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { HeadingTitle, HeadingDescription } from "../heading";
 
 const Wrapper = styled.div`

public-dashboard-client/src/page-overview/PageOverview.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { DETAIL_PAGES, NARRATIVE_PAGES } from "../constants";
 import { HeadingTitle, HeadingDescription } from "../heading";

public-dashboard-client/src/page-prison/PagePrison.js

@@ -267,7 +267,7 @@ export default function PagePrison() {
       showDimensionControl: true,
       VizComponent: VizRecidivismSingleFollowup,
       vizData: {
-        followupYears: parseInt(recidivismFollowupPeriod, 10),
+        followupYears: parseInt(recidivismFollowupPeriod),
         recidivismRates,
       },
     },

public-dashboard-client/src/page-racial-disparities/PageRacialDisparities.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import DetailPage from "../detail-page";
 import {
   ALL_PAGES,

public-dashboard-client/src/page-racial-disparities/VizPopulationDisparity.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { DIMENSION_DATA_KEYS, RACE_LABELS, TOTAL_KEY } from "../constants";
 import ProportionalBar from "../proportional-bar";
 import { demographicsAscending } from "../utils";

public-dashboard-client/src/page-racial-disparities/VizPopulationFocus.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { RACE_LABELS } from "../constants";
 import ProportionalBar from "../proportional-bar";
 import { recordIsAllRaces } from "../utils";

public-dashboard-client/src/page-racial-disparities/VizRevocationDisparity.js

@@ -1,7 +1,7 @@
 import { ascending } from "d3-array";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { TOTAL_KEY, VIOLATION_LABELS } from "../constants";
 import Disclaimer from "../disclaimer";
 import ProportionalBar from "../proportional-bar";

public-dashboard-client/src/page-racial-disparities/helpers.js

@@ -1,6 +1,6 @@
 import useBreakpoint from "@w11r/use-breakpoint";
 import { sum } from "d3-array";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import {
   SUPERVISION_TYPES,
   VIOLATION_COUNT_KEYS,

public-dashboard-client/src/page-routes/PageRoutes.js

@@ -1,7 +1,7 @@
 import { Router, Redirect, useLocation } from "@reach/router";
 import React, { useEffect } from "react";
 import { Helmet } from "react-helmet";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { ALL_PAGES, PATHS } from "../constants";
 import useCurrentPage from "../hooks/useCurrentPage";
 import PageNotFound from "../page-not-found";

public-dashboard-client/src/page-width-container/PageWidthContainer.js

@@ -1,5 +1,5 @@
 import { mediaQuery } from "@w11r/use-breakpoint";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 const PADDING_LARGE = "80px";
 const PADDING_SMALL = "8px";