Merge pull request #1399 from artsy/damassi/lib/styled-components-6

chore(styled-components): upgrade to v6
artsy · Oct 21, 2024 · 35c5c8d · 35c5c8d
2 parents e2ca9bf + 59f0a12
commit 35c5c8d
Show file tree

Hide file tree

Showing 21 changed files with 343 additions and 219 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,9 +1,9 @@
 version: 2.1
 
 orbs:
-  yarn: artsy/[email protected]
   auto: artsy/[email protected]
   aws-s3: circleci/[email protected]
+  node: circleci/[email protected]
 
 jobs:
   deploy-storybook:
@@ -18,32 +18,38 @@ jobs:
 workflows:
   build_and_verify:
     jobs:
-      - yarn/workflow-queue
-      - yarn/update-cache:
-          requires:
-            - yarn/workflow-queue
-      - yarn/lint:
-          requires:
-            - yarn/workflow-queue
-      - yarn/type-check:
-          requires:
-            - yarn/workflow-queue
-      - yarn/test:
-          requires:
-            - yarn/workflow-queue
-      - yarn/run:
+      - node/run:
+          name: lint
+          pkg-manager: yarn
+          yarn-run: lint
+          version: 18.15.0
+
+      - node/run:
+          name: type-check
+          pkg-manager: yarn
+          yarn-run: type-check
+          version: 18.15.0
+
+      - node/run:
+          name: test
+          pkg-manager: yarn
+          yarn-run: test
+          version: 18.15.0
+
+      - node/run:
           name: visual-test
-          script: visual-test --auto-accept-changes
-          requires:
-            - yarn/workflow-queue
+          pkg-manager: yarn
+          yarn-run: visual-test
+          version: "16.10.0"
           filters:
             branches:
               ignore: main
-      - yarn/run:
-          name: visual-test-master
-          script: visual-test --auto-accept-changes
-          requires:
-            - yarn/workflow-queue
+
+      - node/run:
+          name: visual-test-main
+          pkg-manager: yarn
+          yarn-run: visual-test
+          version: "16.10.0"
           filters:
             branches:
               only: main
@@ -54,28 +60,28 @@ workflows:
           filters:
             branches:
               ignore: main
+          node-version: "16.10.0"
           requires:
-            - yarn/test
-            - yarn/lint
-            - yarn/type-check
-            - yarn/update-cache
+            - test
+            - lint
+            - type-check
 
       # Releases
       - auto/publish:
           context: npm-deploy
           filters:
             branches:
               only: main
+          node-version: "16.10.0"
           requires:
-            - yarn/test
-            - yarn/lint
-            - yarn/type-check
-            - yarn/update-cache
+            - test
+            - lint
+            - type-check
 
       # Docs / Storybooks
-      - yarn/run:
+      - node/run:
           name: build-storybook
-          script: "build-storybook"
+          yarn-run: "build-storybook"
           post-steps:
             - persist_to_workspace:
                 root: .
@@ -84,6 +90,7 @@ workflows:
           filters:
             branches:
               only: main
+
       - deploy-storybook:
           context: static-sites-uploader
           requires:

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "test": "yarn compile-palette && lerna run test",
     "pretype-check": "yarn compile-palette && lerna run type-declarations",
     "type-check": "lerna run type-check",
-    "visual-test": "yarn compile-palette && yarn workspace @artsy/palette visual-test"
+    "visual-test": "yarn compile-palette && yarn workspace @artsy/palette visual-test --auto-accept-changes"
   },
   "repository": {
     "type": "git",

diff --git a/packages/palette-charts/package.json b/packages/palette-charts/package.json
@@ -74,7 +74,6 @@
     "@types/react-lazy-load-image-component": "1.3.0",
     "@types/react-test-renderer": "16.8.1",
     "@types/semver": "5.5.0",
-    "@types/styled-components": "4.0.3",
     "@types/styled-system": "5.1.9",
     "@types/styled-system__theme-get": "5.0.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
@@ -94,7 +93,7 @@
     "husky": "2.1.0",
     "jest": "^28.0.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jest-styled-components": "7.0.0-2",
+    "jest-styled-components": "7.2.0",
     "lint-staged": "8.1.5",
     "mock-raf": "1.0.1",
     "prettier": "2.2.1",
@@ -106,7 +105,7 @@
     "simple-progress-webpack-plugin": "1.1.2",
     "static-extend": "0.1.2",
     "storybook-states": "^1.2.0",
-    "styled-components": "4.3.2",
+    "styled-components": "6.1.13",
     "ts-node": "8.1.0",
     "tslint": "5.16.0",
     "tslint-config-prettier": "1.18.0",

diff --git a/packages/palette-charts/src/elements/BarChart/Bar.tsx b/packages/palette-charts/src/elements/BarChart/Bar.tsx
@@ -15,7 +15,7 @@ interface BarBoxProps {
 }
 
 // the actual visible bit of the bar
-const BarBox = styled(Box)`
+const BarBox = styled(Box)<BarBoxProps>`
   transition: height 0.8s ease;
   position: relative;
   background: ${(props: BarBoxProps) =>
@@ -26,7 +26,7 @@ const BarBox = styled(Box)`
     margin-right: 0;
   }
   flex: 1;
-  cursor: ${props => ((props as any).onClick ? "pointer" : "default")};
+  cursor: ${(props) => ((props as any).onClick ? "pointer" : "default")};
   border-top-left-radius: 1px;
   border-top-right-radius: 1px;
   @media (min-width: ${breakpoints.sm}) {
@@ -176,7 +176,7 @@ export const Bar = ({
         <HighlightLabel
           innerRef={highlightLabelRef}
           opacity={hasEnteredViewport ? 1 : 0}
-          onMeasureHighlightLabel={labelHeight =>
+          onMeasureHighlightLabel={(labelHeight) =>
             onMeasureHeight(labelHeight + finalBarHeight)
           }
         >

diff --git a/packages/palette-charts/src/elements/LineChart/LineChart.tsx b/packages/palette-charts/src/elements/LineChart/LineChart.tsx
@@ -120,7 +120,7 @@ const BarAxisLabelContainer = styled.div<AxisContainerProps>`
   flex: ${({ last }) => (last ? 0 : 1)};
   min-height: ${space(2)}px;
   position: relative;
-  ${media.xs`
+  ${media.xs<AxisContainerProps>`
     display: ${({ first, last }) => (first || last ? "auto" : "none")};;
   `};
 `

diff --git a/packages/palette/package.json b/packages/palette/package.json
@@ -41,7 +41,7 @@
   "peerDependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "styled-components": "^4"
+    "styled-components": "^6"
   },
   "devDependencies": {
     "@artsy/auto-config": "1.2.0",
@@ -71,7 +71,6 @@
     "@types/react-lazy-load-image-component": "1.3.0",
     "@types/react-test-renderer": "16.8.1",
     "@types/semver": "5.5.0",
-    "@types/styled-components": "4.0.3",
     "@types/styled-system": "5.1.9",
     "@types/styled-system__theme-get": "5.0.0",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
@@ -82,7 +81,7 @@
     "babel-loader": "8.2.2",
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-module-resolver": "4.1.0",
-    "babel-plugin-styled-components": "1.12.0",
+    "babel-plugin-styled-components": "2.1.4",
     "cache-loader": "3.0.0",
     "chromatic": "5.9.2",
     "concurrently": "3.6.1",
@@ -97,7 +96,7 @@
     "husky": "2.1.0",
     "jest": "^28.0.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jest-styled-components": "7.0.0-2",
+    "jest-styled-components": "7.2.0",
     "lint-staged": "8.1.5",
     "mock-raf": "1.0.1",
     "nodemon": "^2.0.22",
@@ -110,7 +109,7 @@
     "simple-progress-webpack-plugin": "1.1.2",
     "static-extend": "0.1.2",
     "storybook-states": "1.2.0",
-    "styled-components": "4.3.2",
+    "styled-components": "6.1.13",
     "ts-node": "8.1.0",
     "typescript": "4.7.4",
     "typescript-styled-plugin": "0.10.0",

diff --git a/packages/palette/src/Theme.tsx b/packages/palette/src/Theme.tsx
@@ -1,11 +1,5 @@
 import React, { useContext } from "react"
-import {
-  // FIXME: Upgrading styled-components types to get `ThemeContext` breaks many other typings.
-  // Notably: `Icon` and `Sans|Serif`
-  // @ts-expect-error  MIGRATE_STRICT_MODE
-  ThemeContext,
-  ThemeProvider,
-} from "styled-components"
+import { ThemeContext, ThemeProvider } from "styled-components"
 import { THEME, Theme as TTheme } from "./themes"
 
 export * from "@artsy/palette-tokens/dist/themes/v3"
@@ -34,6 +28,6 @@ export const Theme: React.FC<ThemeProps> = ({ children, theme = "light" }) => {
 
 /** Returns the current theme */
 export const useTheme = <T extends TTheme>() => {
-  const theme: T = useContext(ThemeContext) || DEFAULT_THEME
+  const theme: T = (useContext(ThemeContext) || DEFAULT_THEME) as T
   return { theme }
 }
diff --git a/packages/palette/src/elements/Banner/Banner.test.tsx b/packages/palette/src/elements/Banner/Banner.test.tsx
@@ -1,19 +1,9 @@
 import { mount } from "enzyme"
 import "jest-styled-components"
 import React from "react"
-import { Theme } from "../../Theme"
 import { Banner } from "../Banner"
 
 describe("Button", () => {
-  it("has default black10 background to Banner", () => {
-    const wrapper = mount(
-      <Theme>
-        <Banner />
-      </Theme>
-    )
-    expect(wrapper).toHaveStyleRule("background-color", "#E7E7E7")
-  })
-
   it("displays the message", () => {
     const message = "There was an error."
     const wrapper = mount(<Banner>There was an error.</Banner>)

diff --git a/packages/palette/src/elements/BaseTabs/BaseTab.tsx b/packages/palette/src/elements/BaseTabs/BaseTab.tsx
@@ -1,24 +1,18 @@
 import React from "react"
 import styled, { css } from "styled-components"
-import { Clickable, ClickableProps } from "../Clickable"
+import { Clickable } from "../Clickable"
 import { Text, TextProps } from "../Text"
 import { STATES } from "./tokens"
 
 /**
  * Utilize as="a" or as={Component} to alter functionality
  */
-export type BaseTabProps = TextProps & {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type BaseTabProps<C extends React.ComponentType = any> = TextProps & {
   active?: boolean
   focus?: boolean
   hover?: boolean
-} & (
-    | // Default:
-    { as?: keyof JSX.IntrinsicElements | React.ComponentType }
-    // When displaying as an anchor tag, accept anchor props:
-    | ({ as: "a" } & React.AnchorHTMLAttributes<HTMLAnchorElement>)
-    // When displaying as an anchor tag, accept anchor props:
-    | ({ as: typeof Clickable } & ClickableProps)
-  )
+} & React.ComponentPropsWithoutRef<C> & { as?: C }
 
 /**
  * Extends `Text`. Should always be nested within a `BaseTabs` container.

diff --git a/packages/palette/src/elements/BaseTabs/BaseTabs.story.tsx b/packages/palette/src/elements/BaseTabs/BaseTabs.story.tsx
@@ -114,13 +114,7 @@ AsClickable.story = {
 export const AsRouterLink = () => {
   return (
     <BaseTabs>
-      <BaseTab
-        // @ts-expect-error  MIGRATE_STRICT_MODE
-        as={RouterLink}
-        to="#example"
-        activeClassName="active"
-        garbage
-      >
+      <BaseTab as={RouterLink} to="#example" activeClassName="active" garbage>
         Example
       </BaseTab>
     </BaseTabs>

diff --git a/packages/palette/src/elements/Dropdown/Dropdown.story.tsx b/packages/palette/src/elements/Dropdown/Dropdown.story.tsx
@@ -26,33 +26,15 @@ export const Default = () => {
         visible
         dropdown={
           <Box width={300} p={2}>
-            <Text
-              as="a"
-              display="block"
-              variant="sm"
-              // @ts-expect-error  MIGRATE_STRICT_MODE
-              href="#"
-            >
+            <Text as="a" display="block" variant="sm" href="#">
               One
             </Text>
 
-            <Text
-              as="a"
-              display="block"
-              variant="sm"
-              // @ts-expect-error  MIGRATE_STRICT_MODE
-              href="#"
-            >
+            <Text as="a" display="block" variant="sm" href="#">
               Two
             </Text>
 
-            <Text
-              as="a"
-              display="block"
-              variant="sm"
-              // @ts-expect-error  MIGRATE_STRICT_MODE
-              href="#"
-            >
+            <Text as="a" display="block" variant="sm" href="#">
               Three
             </Text>
           </Box>

diff --git a/packages/palette/src/elements/MultiSelect/tokens.ts b/packages/palette/src/elements/MultiSelect/tokens.ts
@@ -1,7 +1,11 @@
 import { themeGet } from "@styled-system/theme-get"
-import { css } from "styled-components"
+import { css, ExecutionContext } from "styled-components"
 import { State } from "../Select/types"
 
+interface MultiSelectProps extends ExecutionContext {
+  complete?: boolean
+}
+
 export const MULTISELECT_STATES: Record<State, any> = {
   default: css`
     height: 50px;
@@ -33,7 +37,7 @@ export const MULTISELECT_STATES: Record<State, any> = {
     & > label {
       color: ${themeGet("colors.blue100")};
 
-      ${({ complete }) =>
+      ${({ complete }: MultiSelectProps) =>
         !complete &&
         css`
           text-decoration: underline;