Upgrade to tailwind v2 (#1805)

* Upgrade to Next 11 and React 17 * Switch pages from MDX to markdown-to-jsx * Also remove unneeded React imports * Use tsx for Next error pages * Fix lack of semantic heading on Listing photo form * Add #1793 to Changelog * Upgrade to Tailwind 2, PostCSS 8, Storybook 6.3 * Upgade Changelook with #1805 * Upgrade to Node 14 * Update `.node-version` file * Testing explicit tailwind dep on Netlify * Update partners also with tailwind dep * Update Node version in CircleCI * Use Node 14.17.4 instead for security fixes * Whoops, make that 14.17.6 =) * Bump Cypress in CircleCI back down to 14.17.0 (there's no newer Docker image available at present) * Bump up React Hook Form in public app * Fix lockfile, update GitHub lint action * Remove stray </td> causing a linting issue * Fix code style issues with Prettier * new lines on two files * export updates Co-authored-by: Lint Action <lint-action@samuelmeuli.com> Co-authored-by: seanmalbert <smabert@gmail.com>
bloom-housing · Sep 14, 2021 · d348a01 · d348a01
1 parent bc86f66
commit d348a01
Show file tree

Hide file tree

Showing 49 changed files with 1,699 additions and 2,810 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -5,7 +5,7 @@ orbs:
 executors:
   standard-node:
     docker:
-      - image: "cimg/node:12.18.4"
+      - image: "cimg/node:14.17.6"
       - image: "circleci/redis:6.2.1-alpine"
       - image: "circleci/postgres:12.3-postgis"
         environment:
@@ -15,7 +15,7 @@ executors:
           POSTGRES_DB: bloom
   cypress-node:
     docker:
-      - image: "cypress/base:12.18.2"
+      - image: "cypress/base:14.17.0"
       - image: "circleci/redis:6.2.1-alpine"
       - image: "circleci/postgres:12.3-postgis"
         environment:
@@ -40,7 +40,7 @@ executors:
       PARTNERS_PORTAL_URL: "http://localhost:3001"
   puppeteer-node:
     docker:
-      - image: "cimg/node:12.18.4-browsers"
+      - image: "cimg/node:14.17.6-browsers"
 
 jobs:
   setup:

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
 
       # ESLint and Prettier must be in `package.json`
       - name: Install Node.js dependencies

diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-12.18.4
+14.17.6
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ All notable changes to this project will be documented in this file. The format
   - Add new /unauthorized page ([#1763](https://github.com/bloom-housing/bloom/pull/1763)) (Dominik Barcikowski)
 
 - Fixed:
+
   - Update Listings component to sort listings by status ([#1585](https://github.com/bloom-housing/bloom/pull/1585))
   - Preferences ordinal bug in listings management ([#1641](https://github.com/bloom-housing/bloom/pull/1641)) (Emily Jablonski)
   - Updates EnumListingReviewOrderType to be ListingReviewOrder ([#1679](https://github.com/bloom-housing/bloom/pull/1679))
@@ -37,6 +38,11 @@ All notable changes to this project will be documented in this file. The format
   - Reset page to 1 on limit change ([#1809](https://github.com/bloom-housing/bloom/pull/1809)) (Dominik Barcikowski)
   - Update public and partners to support preferred unit ids ([#1774](https://github.com/bloom-housing/bloom/pull/1774)) (Dominik Barcikowski)
 
+- Changed:
+
+  - Upgrade the public and partners sites to Next v11 and React v17 ([#1793](https://github.com/bloom-housing/bloom/pull/1793)) (Jared White)
+    - **Breaking Change**
+
 ### UI Components
 
 - Added:
@@ -52,6 +58,9 @@ All notable changes to this project will be documented in this file. The format
   - More robust Features section for public listing view ([#1688](https://github.com/bloom-housing/bloom/pull/1688))
 
 - Changed:
+
+  - Upgraded Tailwind to v2, PostCSS to v8, and Storybook to 6.3 ([#1805])(https://github.com/bloom-housing/bloom/pull/1805)) (Jared White)
+  - Upgraded React to v17
   - StandardTable new optional prop to translate cell content ([#1707](https://github.com/bloom-housing/bloom/pull/1707)) (Emily Jablonski)
   - Removed business logic from ListingsList component ([#1752](https://github.com/bloom-housing/bloom/pull/1752)) (Emily Jablonski)
     - **Breaking Change**: Removed listings prop and replaced with children and a listingsCount prop

diff --git a/backend/core/package.json b/backend/core/package.json
@@ -116,7 +116,7 @@
     "testEnvironment": "node"
   },
   "engines": {
-    "node": "12",
+    "node": "14",
     "yarn": "^1.22"
   },
   "gitHead": "5f7694e3f2baff2a1a7a22e0676e487dda781a3e"

diff --git a/package.json b/package.json
@@ -55,8 +55,8 @@
     "lerna": "^3.22.1",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.0",
-    "react": "16.13.1",
-    "react-test-renderer": "16.13.1",
+    "react": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "ts-jest": "^26.4.1",
     "typescript": "^3.9.7",

diff --git a/sites/partners/netlify.toml b/sites/partners/netlify.toml
@@ -5,7 +5,7 @@ ignore = "/bin/false"
 
 [build.environment]
 
-NODE_VERSION = "12.18.4"
+NODE_VERSION = "14.17.6"
 YARN_VERSION = "1.22.4"
 NEXT_TELEMETRY_DISABLED = "1"
 

diff --git a/sites/partners/next-env.d.ts b/sites/partners/next-env.d.ts
@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/sites/partners/next.config.js b/sites/partners/next.config.js
@@ -1,13 +1,13 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-const withTM = require("next-transpile-modules")(["@bloom-housing"])
-const withSass = require("@zeit/next-sass")
-const withCSS = require("@zeit/next-css")
+const withTM = require("next-transpile-modules")([
+  "@bloom-housing/ui-components",
+  "@bloom-housing/backend-core",
+])
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 })
-const withMDX = require("@next/mdx")()
 
 if (process.env.NODE_ENV !== "production") {
   require("dotenv").config()
@@ -31,32 +31,33 @@ const tailwindVars = require("@bloom-housing/ui-components/tailwind.tosass.js")(
 
 // Tell webpack to compile the ui components package
 // https://www.npmjs.com/package/next-transpile-modules
-module.exports = withCSS(
-  withBundleAnalyzer(
-    withMDX(
-      withSass(
-        withTM({
-          target: "serverless",
-          env: {
-            backendApiBase: BACKEND_API_BASE,
-            listingServiceUrl: BACKEND_API_BASE + LISTINGS_QUERY,
-            idleTimeout: process.env.IDLE_TIMEOUT,
-            showDuplicates: process.env.SHOW_DUPLICATES === "TRUE",
-            publicBaseUrl: process.env.PUBLIC_BASE_URL,
-            cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
-            cloudinaryKey: process.env.CLOUDINARY_KEY,
-            cloudinarySignedPreset: process.env.CLOUDINARY_SIGNED_PRESET,
-            mapBoxToken: MAPBOX_TOKEN,
-          },
-          i18n: {
-            locales: process.env.LANGUAGES ? process.env.LANGUAGES.split(",") : ["en"],
-            defaultLocale: "en",
-          },
-          sassLoaderOptions: {
-            additionalData: tailwindVars,
-          },
-        })
-      )
-    )
-  )
+module.exports = withBundleAnalyzer(
+  withTM({
+    target: "serverless",
+    env: {
+      backendApiBase: BACKEND_API_BASE,
+      listingServiceUrl: BACKEND_API_BASE + LISTINGS_QUERY,
+      idleTimeout: process.env.IDLE_TIMEOUT,
+      showDuplicates: process.env.SHOW_DUPLICATES === "TRUE",
+      publicBaseUrl: process.env.PUBLIC_BASE_URL,
+      cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
+      cloudinaryKey: process.env.CLOUDINARY_KEY,
+      cloudinarySignedPreset: process.env.CLOUDINARY_SIGNED_PRESET,
+      mapBoxToken: MAPBOX_TOKEN,
+    },
+    i18n: {
+      locales: process.env.LANGUAGES ? process.env.LANGUAGES.split(",") : ["en"],
+      defaultLocale: "en",
+    },
+    sassOptions: {
+      additionalData: tailwindVars,
+    },
+    webpack: (config) => {
+      config.module.rules.push({
+        test: /\.md$/,
+        type: "asset/source",
+      })
+      return config
+    },
+  })
 )
diff --git a/sites/partners/package.json b/sites/partners/package.json
@@ -27,15 +27,16 @@
     "electron": "^13.1.7",
     "moment": "^2.29.1",
     "nanoid": "^3.1.12",
-    "next": "^10.1.0",
+    "next": "^11.1.1",
     "next-plugin-custom-babel-config": "^1.0.2",
     "node-polyglot": "^2.4.0",
     "node-sass": "^4.14.1",
     "qs": "^6.10.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^6.15.5",
-    "swr": "^0.3.5"
+    "swr": "^0.3.5",
+    "tailwindcss": "2.2.10"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
@@ -49,7 +50,8 @@
     "concurrently": "^5.3.0",
     "cypress": "^4.12.1",
     "js-levenshtein": "^1.1.6",
-    "next-transpile-modules": "^4.1.0",
+    "next-transpile-modules": "^8.0.0",
+    "postcss": "^8.3.6",
     "sass-loader": "^10.0.3",
     "typescript": "^3.9.7",
     "webpack": "^4.44.2"

diff --git a/sites/partners/pages/_error.jsx → sites/partners/pages/_error.tsx b/sites/partners/pages/_error.jsx → sites/partners/pages/_error.tsx
@@ -2,7 +2,7 @@ import Layout from "../layouts"
 import Head from "next/head"
 import { Hero, MarkdownSection, t } from "@bloom-housing/ui-components"
 
-export default () => {
+const Error = () => {
   const pageTitle = t("errors.notFound.title")
 
   return (
@@ -19,3 +19,5 @@ export default () => {
     </Layout>
   )
 }
+
+export default Error
diff --git a/sites/partners/postcss.config.js b/sites/partners/postcss.config.js
@@ -1,5 +1,5 @@
 /*eslint-env node*/
 
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
+  plugins: ["tailwindcss", "autoprefixer"],
 }
diff --git a/sites/partners/src/listings/PaperListingForm/sections/ListingPhoto.tsx b/sites/partners/src/listings/PaperListingForm/sections/ListingPhoto.tsx
@@ -140,9 +140,12 @@ const ListingPhoto = () => {
     <>
       <input type="hidden" {...register("image.fileId")} />
       <input type="hidden" {...register("image.label")} />
-      <GridSection grid={false} separator>
-        <span className="form-section__title">{t("listings.sections.photoTitle")}</span>
-        <span className="form-section__description">{t("listings.sections.photoSubtitle")}</span>
+      <GridSection
+        grid={false}
+        separator
+        title={t("listings.sections.photoTitle")}
+        description={t("listings.sections.photoSubtitle")}
+      >
         <GridSection columns={1} tinted inset>
           <GridCell>
             {listingFormPhoto?.fileId && listingFormPhoto.fileId != "" ? (