feat: v2 mass components upgrade/migration (#578)

* wip * wip * wip * wip * wip * wip * chore: commit wip * lol idk if this is wise * lol idk if this is wise * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * chore: commit wip * Upgrade mass boop with v2 (#580) * fix: i don't know how dialog went mising (#579) * chore: commit wip * chore: commit wip --------- Co-authored-by: Edward Granger <edward.granger@washpost.com> * chore: commit wip * fix: correcting merge issue * fix: remove ui from jest tests * fix: experiment if pointerevents check will fix close button error in Safari * fix: prettify dialog test * fix: prettify dialog test * fix: tweaking dialog to hopefully pass storybook check in safari * fix: allow unused react in linter since nextjs wants to play by diff rules lol * fix: run next link upgrade codemod * fix: format --------- Co-authored-by: Edward Granger <edward.granger@washpost.com> Co-authored-by: Andrew Berg <andrew.berg@washpost.com>
washingtonpost · Feb 27, 2024 · 5e0394b · 5e0394b
1 parent e783d0a
commit 5e0394b
Show file tree

Hide file tree

Showing 474 changed files with 6,941 additions and 20,643 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -37,12 +37,16 @@ module.exports = {
       rules: {
         "react/prop-types": "off",
         "@washingtonpost/wpds/theme-colors": "warn",
-        "no-restricted-syntax": [
-          "error",
+      },
+    },
+    // warning  'React' is defined but never used  @typescript-eslint/no-unused-vars -- allow unused React
+    {
+      files: ["**/*.tsx"],
+      rules: {
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
           {
-            selector:
-              "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
-            message: "Default React import not allowed",
+            varsIgnorePattern: "React",
           },
         ],
       },

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -3,10 +3,7 @@ import { dirname, join } from "path";
 require("dotenv").config();
 
 module.exports = {
-  stories: [
-    "../packages/kit/src/**/*.stories.tsx",
-    "../ui/(**|!(node_modules))/src/*.stories.@(ts|tsx|js|jsx)",
-  ],
+  stories: ["../packages/kit/src/**/*.stories.tsx"],
   exclude: ["node_modules", "dist"],
 
   addons: [

diff --git a/Makefile b/Makefile
@@ -35,3 +35,9 @@ validate:
 	npm run lint:check
 	npm run format:check
 	npm run test
+
+v2-migrate-component:
+	node scripts/move-component-to-new-dir.js $(componentName)
+	npx storybook@latest migrate csf-2-to-3 --glob="./packages/kit/src/$(componentName)/*.stories.tsx"
+	npx jscodeshift ./packages/kit/src/$(componentName) -t ./scripts/transform-wpds-imports.js --extensions=tsx
+	npx react-codemod update-react-imports ./packages/kit/src
diff --git a/apps/nextjs13-approuter/package.json b/apps/nextjs13-approuter/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build-no": "next build",
     "start": "next start",
     "lint": "next lint"
   },

diff --git a/apps/nextjs13-pagerouter/package.json b/apps/nextjs13-pagerouter/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build-no": "next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -14,9 +14,5 @@
     "next": "13.5.6",
     "@washingtonpost/wpds-ui-kit": "*",
     "@washingtonpost/wpds-kitchen-sink": "*"
-  },
-  "overrides": {
-    "react": "^18",
-    "react-dom": "^18"
   }
 }
diff --git a/apps/nextjs14-approuter/package.json b/apps/nextjs14-approuter/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build-no": "next build",
     "start": "next start",
     "lint": "next lint"
   },

diff --git a/apps/nextjs14-pagerouter/package.json b/apps/nextjs14-pagerouter/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build-no": "next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -14,9 +14,5 @@
     "next": "14.0.3",
     "@washingtonpost/wpds-ui-kit": "*",
     "@washingtonpost/wpds-kitchen-sink": "*"
-  },
-  "overrides": {
-    "react": "^18",
-    "react-dom": "^18"
   }
 }
diff --git a/build.washingtonpost.com/.eslintrc.js b/build.washingtonpost.com/.eslintrc.js
diff --git a/build.washingtonpost.com/components/Contributors.jsx b/build.washingtonpost.com/components/Contributors.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { theme, Avatar, styled } from "@washingtonpost/wpds-ui-kit";
 import { Header } from "~/components/Markdown/Components/headers";
 
-import Image from "next/image";
+import Image from "next/legacy/image";
 import CustomLink from "./Typography/link";
 
 const StyledGrid = styled({

diff --git a/build.washingtonpost.com/components/Footer.js b/build.washingtonpost.com/components/Footer.js
@@ -109,7 +109,11 @@ export const Footer = () => {
           }}
         >
           <CommunityHeading>Community</CommunityHeading>
-          <Link passHref href="https://twitter.com/wpdesignsystem">
+          <Link
+            passHref
+            href="https://twitter.com/wpdesignsystem"
+            legacyBehavior
+          >
             <Anchor>
               <Icon
                 css={{ marginRight: "$025" }}
@@ -122,7 +126,11 @@ export const Footer = () => {
               Twitter
             </Anchor>
           </Link>
-          <Link passHref href="https://github.com/washingtonpost/wpds-ui-kit">
+          <Link
+            passHref
+            href="https://github.com/washingtonpost/wpds-ui-kit"
+            legacyBehavior
+          >
             <Anchor>
               <Icon
                 css={{ marginRight: "$025" }}
@@ -135,7 +143,11 @@ export const Footer = () => {
               Github
             </Anchor>
           </Link>
-          <Link passHref href="https://www.youtube.com/@wpdesignsystem">
+          <Link
+            passHref
+            href="https://www.youtube.com/@wpdesignsystem"
+            legacyBehavior
+          >
             <Anchor>
               <Icon
                 css={{ marginRight: "$025" }}

diff --git a/build.washingtonpost.com/components/Layout/Components/Sidebar.js b/build.washingtonpost.com/components/Layout/Components/Sidebar.js
@@ -202,7 +202,7 @@ export default function Sidebar({ navigation, setMobileMenu }) {
                   <Change type="ComingSoon">Coming soon</Change>
                 </CustomLink>
               ) : item.frontMatter.data.status == "Alpha" ? (
-                <Link href={item.frontMatter.slug} passHref>
+                <Link href={item.frontMatter.slug} passHref legacyBehavior>
                   <CustomLink
                     css={{
                       display: "flex",
@@ -216,7 +216,7 @@ export default function Sidebar({ navigation, setMobileMenu }) {
                   </CustomLink>
                 </Link>
               ) : (
-                <Link href={item.frontMatter.slug} passHref>
+                <Link href={item.frontMatter.slug} passHref legacyBehavior>
                   <CustomLink>{item.frontMatter.data.title}</CustomLink>
                 </Link>
               )}
@@ -264,7 +264,11 @@ export default function Sidebar({ navigation, setMobileMenu }) {
                                 disabled={item.data.status === "Coming soon"}
                               >
                                 {item.data.status !== "" ? (
-                                  <Link href={item.slug} passHref>
+                                  <Link
+                                    href={item.slug}
+                                    passHref
+                                    legacyBehavior
+                                  >
                                     <CustomLink
                                       css={{
                                         display: "flex",
@@ -286,7 +290,11 @@ export default function Sidebar({ navigation, setMobileMenu }) {
                                     </CustomLink>
                                   </Link>
                                 ) : (
-                                  <Link href={item.slug} passHref>
+                                  <Link
+                                    href={item.slug}
+                                    passHref
+                                    legacyBehavior
+                                  >
                                     <CustomLink>{item.data.title}</CustomLink>
                                   </Link>
                                 )}
@@ -307,7 +315,7 @@ export default function Sidebar({ navigation, setMobileMenu }) {
             onClick={() => setMobileMenu(false)}
             isCurrent={router.asPath.includes("release-notes") ? "active" : ""}
           >
-            <Link href="/release-notes" passHref>
+            <Link href="/release-notes" passHref legacyBehavior>
               <Header>
                 <CustomLink css={{ color: "$primary" }}>
                   Release Notes
@@ -318,7 +326,7 @@ export default function Sidebar({ navigation, setMobileMenu }) {
           <ListItem
             isCurrent={router.asPath.includes("support") ? "active" : ""}
           >
-            <Link href="/support" passHref>
+            <Link href="/support" passHref legacyBehavior>
               <Header>
                 <CustomLink css={{ color: "$primary" }}>Support</CustomLink>
               </Header>

diff --git a/build.washingtonpost.com/components/Markdown/Components/InlineImage.js b/build.washingtonpost.com/components/Markdown/Components/InlineImage.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { styled, css } from "@washingtonpost/wpds-ui-kit";
-import Image from "next/image";
+import Image from "next/legacy/image";
 
 export default function InlineImage({
   maxWidth,

diff --git a/build.washingtonpost.com/components/Markdown/Components/YouTubeEmbed.js b/build.washingtonpost.com/components/Markdown/Components/YouTubeEmbed.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import {
   css,
   Icon,

diff --git a/build.washingtonpost.com/components/Markdown/Components/inlineSVG.js b/build.washingtonpost.com/components/Markdown/Components/inlineSVG.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { ReactSVG } from "react-svg";
-import Tokens from "@washingtonpost/wpds-theme/src/wpds.tokens.json";
-import Image from "next/image";
+import Tokens from "@washingtonpost/wpds-ui-kit/src/theme/wpds.tokens.json";
+import Image from "next/legacy/image";
 import { css, styled } from "@washingtonpost/wpds-ui-kit";
 
 const SVGContainer = styled("div", {

diff --git a/build.washingtonpost.com/components/Markdown/Components/link.js b/build.washingtonpost.com/components/Markdown/Components/link.js
@@ -39,7 +39,7 @@ export default function CustomLink({
   });
 
   return (
-    <Link as={as} href={href} forceHref passHref>
+    <Link as={as} href={href} forceHref passHref legacyBehavior>
       <A
         id={id}
         signal={useSignal ? "showColor" : ""}

diff --git a/build.washingtonpost.com/components/Markdown/Components/table.js b/build.washingtonpost.com/components/Markdown/Components/table.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { styled } from "@washingtonpost/wpds-ui-kit";
-import Tokens from "@washingtonpost/wpds-theme/src/wpds.tokens.json";
+import Tokens from "@washingtonpost/wpds-ui-kit/src/theme/wpds.tokens.json";
 
 /**
  * Table

diff --git a/build.washingtonpost.com/components/Markdown/Components/tableofcontents.jsx b/build.washingtonpost.com/components/Markdown/Components/tableofcontents.jsx
@@ -61,7 +61,7 @@ const LinkText = styled("a", {
 
 const Item = ({ children, level, label, as, href }) => (
   <ListItem level={level} label={label}>
-    <Link passHref as={as} href={href}>
+    <Link passHref as={as} href={href} legacyBehavior>
       <LinkText>{children}</LinkText>
     </Link>
   </ListItem>

diff --git a/build.washingtonpost.com/components/Markdown/Examples/ColorSamples.jsx b/build.washingtonpost.com/components/Markdown/Examples/ColorSamples.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Box, styled, AlertBanner, theme } from "@washingtonpost/wpds-ui-kit";
 import { toast } from "react-toastify";
-import Tokens from "@washingtonpost/wpds-theme/src/wpds.tokens.json";
+import Tokens from "@washingtonpost/wpds-ui-kit/src/theme/wpds.tokens.json";
 
 import { Grid } from "../Components/Grid";
 

diff --git a/build.washingtonpost.com/components/Markdown/Examples/HexRGBAColorSamples.jsx b/build.washingtonpost.com/components/Markdown/Examples/HexRGBAColorSamples.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Box, styled, AlertBanner, theme } from "@washingtonpost/wpds-ui-kit";
 import { toast } from "react-toastify";
-import Tokens from "@washingtonpost/wpds-theme/src/hexcodes.tokens.json";
+import Tokens from "@washingtonpost/wpds-ui-kit/src/theme/hexcodes.tokens.json";
 import { StyledItem, StyledToggleGroup } from "../Components/ToggleGroupRadix";
 import { Grid } from "../Components/Grid";
 

diff --git a/build.washingtonpost.com/components/Markdown/Examples/IconSamples.jsx b/build.washingtonpost.com/components/Markdown/Examples/IconSamples.jsx
@@ -6,7 +6,7 @@ import * as AllAssets from "@washingtonpost/wpds-assets";
 import { toast } from "react-toastify";
 import MDXStyling from "~/components/Markdown/Styling";
 import { Grid } from "../Components/Grid";
-import { InputText } from "@washingtonpost/wpds-input-text";
+import { InputText } from "@washingtonpost/wpds-ui-kit";
 import Search from "@washingtonpost/wpds-assets/asset/search";
 import { Icon, theme, AlertBanner, Box } from "@washingtonpost/wpds-ui-kit";
 import { paramCase } from "param-case";

diff --git a/build.washingtonpost.com/components/Markdown/Styling.js b/build.washingtonpost.com/components/Markdown/Styling.js
@@ -13,7 +13,7 @@ import {
 } from "~/components/Markdown/Components/list";
 import dynamic from "next/dynamic";
 import { Grid, Cell } from "./Components/Grid";
-import { AlertBanner } from "@washingtonpost/wpds-alert-banner";
+import { AlertBanner } from "@washingtonpost/wpds-ui-kit";
 import { ComponentStatus } from "../ComponentPage/ComponentStatus";
 import CollapsibleContainer from "./Components/collapsible";
 const InputCheckbox = dynamic(() =>

diff --git a/build.washingtonpost.com/components/NavigationBar.js b/build.washingtonpost.com/components/NavigationBar.js
@@ -197,7 +197,7 @@ export const NavigationBar = ({ setMobileMenu, mobileMenuState, isClosed }) => {
       </Container>
       <List role="navigation" aria-label="Support and search">
         <ListItem>
-          <Link href="/release-notes" passHref>
+          <Link href="/release-notes" passHref legacyBehavior>
             <Anchor
               isCurrent={router.asPath.includes("/release-notes")}
               onClick={() => setMobileMenu(!mobileMenuState)}
@@ -207,14 +207,14 @@ export const NavigationBar = ({ setMobileMenu, mobileMenuState, isClosed }) => {
           </Link>
         </ListItem>
         <ListItem>
-          <Link href="/resources" passHref>
+          <Link href="/resources" passHref legacyBehavior>
             <Anchor isCurrent={router.asPath.includes("/resources")}>
               Resources
             </Anchor>
           </Link>
         </ListItem>
         <ListItem css={{ margin: "0 $100 0 0" }}>
-          <Link href="/support" passHref>
+          <Link href="/support" passHref legacyBehavior>
             <Anchor isCurrent={router.asPath.includes("/support")}>
               Support
             </Anchor>

diff --git a/build.washingtonpost.com/components/Thumbnail.js b/build.washingtonpost.com/components/Thumbnail.js
@@ -6,7 +6,7 @@ import { P } from "~/components/Markdown/Styling";
 
 import { ThumbnailGrid } from "./Markdown/Components/ResourcesGrids";
 
-import Image from "next/image";
+import Image from "next/legacy/image";
 
 export const THUMBNAIL_WIDE = "wide";
 export const THUMBNAIL_SQUARE = "square";