dependency issues

sites/partners/layouts/forms.tsx

@@ -1,6 +1,6 @@
 import Layout from "."
 
-export default (props) => {
+const Forms = (props) => {
   return (
     <Layout>
       <section className="p-px bg-gray-300">
@@ -11,3 +11,5 @@ export default (props) => {
     </Layout>
   )
 }
+
+export default Forms

sites/partners/package.json

@@ -20,8 +20,8 @@
     "@bloom-housing/ui-components": "^1.0.5",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@zeit/next-sass": "^1.0.1",
-    "ag-grid-community": "^24.1.0",
-    "ag-grid-react": "^24.1.0",
+    "ag-grid-community": "^26.0.0",
+    "ag-grid-react": "^26.0.0",
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
     "electron": "^13.1.7",
@@ -35,7 +35,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.15.5",
-    "swr": "^0.3.5",
+    "swr": "^1.0.1",
     "tailwindcss": "2.2.10"
   },
   "devDependencies": {

sites/partners/pages/sign-in.tsx

@@ -16,7 +16,7 @@ import {
 import { emailRegex } from "../lib/helpers"
 import FormsLayout from "../layouts/forms"
 
-export default () => {
+const SignIn = () => {
   const { login } = useContext(AuthContext)
   /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -118,3 +118,5 @@ export default () => {
     </FormsLayout>
   )
 }
+
+export default SignIn

sites/partners/src/applications/ApplicationsColDefs.ts

@@ -66,7 +66,6 @@ export function getColDefs(maxHouseholdSize: number, countyCode: string) {
       width: 150,
       minWidth: 120,
       pinned: "left",
-      type: "leftAligned",
       cellRenderer: "formatLinkCell",
     },
     {
@@ -78,7 +77,6 @@ export function getColDefs(maxHouseholdSize: number, countyCode: string) {
       width: 150,
       minWidth: 120,
       pinned: "left",
-      type: "leftAligned",
       valueFormatter: ({ value }) => t(`application.details.submissionType.${value}`),
       comparator: compareStrings,
     },

sites/partners/src/listings/PaperListingForm/UnitForm.tsx

@@ -113,9 +113,11 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, existingId, nextId }: UnitFo
         })
       }
     }
-    setValue("amiPercentage", parseInt(defaultUnit["amiPercentage"]))
     setValue("status", "available")
-    setValue("rentType", getRentType(defaultUnit))
+    if (defaultUnit) {
+      setValue("amiPercentage", parseInt(defaultUnit["amiPercentage"]))
+      setValue("rentType", getRentType(defaultUnit))
+    }
     setLoading(false)
   }
 

sites/public/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@bloom-housing/ui-components": "^1.0.5",
+    "autoprefixer": "^10.3.4",
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
     "moment": "^2.29.1",
@@ -37,6 +38,7 @@
     "tailwindcss": "2.2.10"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.6",
     "@next/bundle-analyzer": "^10.1.0",
     "@types/markdown-to-jsx": "^6.11.2",
     "@types/node": "^12.12.67",

ui-components/.jest/setup-tests.js

@@ -1,12 +1,8 @@
 import "@testing-library/jest-dom/extend-expect"
 
-import { configure } from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
 import { addTranslation } from "../src/helpers/translator"
 import general from "../src/locales/general.json"
 
-configure({ adapter: new Adapter() })
-
 // see: https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 window.matchMedia = jest.fn().mockImplementation((query) => {
   return {

ui-components/README.md

@@ -24,14 +24,14 @@ To spin up Storybook locally, run:
 yarn start
 ```
 
-To run the test suite which is a combination of storyshots and tests via Jest and Enzyme, run:
+To run the test suite which is built with Jest and RTL run:
 
 ```
 yarn test
 
 # or
 
-yarn test -u  # updates storyshots based on latest code
+yarn test:coverage # generates local coverage reports, useful as you are writing tests
 ```
 
 ## Style Organization and Best Practices

ui-components/package.json

@@ -19,18 +19,21 @@
     "@babel/preset-env": "^7.15.4",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
+    "@storybook/addons": "^6.3.8",
     "@storybook/addon-a11y": "^6.3.8",
     "@storybook/addon-actions": "^6.3.8",
     "@storybook/addon-docs": "^6.3.8",
     "@storybook/addon-knobs": "^6.3.1",
     "@storybook/addon-storyshots": "^6.3.8",
     "@storybook/addon-storyshots-puppeteer": "^6.3.8",
     "@storybook/addon-viewport": "^6.3.8",
+    "@storybook/api": "^6.3.8",
+    "@storybook/components": "^6.3.8",
+    "@storybook/core-events": "^6.3.8",
     "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
-    "@types/enzyme": "^3.10.7",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
     "@types/react-map-gl": "^5.2.10",
@@ -41,9 +44,6 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-require-context-hook": "^1.0.0",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "enzyme-to-json": "^3.4.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.5.3",
     "mockdate": "^3.0.2",
@@ -55,6 +55,7 @@
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
+    "sass": "^1.32.1",
     "sass-loader": "^10.0.3",
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
@@ -82,11 +83,11 @@
     "moment": "^2.29.1",
     "nanoid": "^3.1.12",
     "react": "^17.0.2",
-    "react-accessible-accordion": "^3.3.3",
+    "react-accessible-accordion": "^3.3.5",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
-    "react-focus-lock": "^2.4.1",
+    "react-focus-lock": "^2.5.2",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-tabs": "^3.2.2",

ui-components/src/global/mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Using due to errors from compass mixin
 @mixin custom-linear-gradient($top, $bottom) {
   background: $top; /* Old browsers */
@@ -51,7 +53,7 @@
     width: 1px;
     margin-left: -1px;
     height: 0;
-    padding-top: 591.44px / 1127.34px * 100%;
+    padding-top: math.div(591.44px, 1127.34px) * 100%;
   }
 
   &::after {

ui-components/src/global/vendor/ag_grid.scss

@@ -1,6 +1,6 @@
 // AG Grid
 @import "~ag-grid-community/src/styles/ag-grid.scss";
-@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
+@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/_ag-theme-alpine-mixin.scss";
 
 .ag-theme-alpine.ag-theme-bloom {
   // would like to remove the local theme class