Update React & framer motion versions, fix some typing issues.

phobon · Sep 27, 2022 · 6f008e6 · 6f008e6
1 parent 8cafe5f
commit 6f008e6
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 99 deletions.
diff --git a/package.json b/package.json
@@ -61,21 +61,21 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.3",
-    "framer-motion": "^2.8.0",
+    "framer-motion": "^7.4.0",
     "hsluv": "^0.1.0",
     "jest": "^25.3.0",
     "jest-localstorage-mock": "^2.4.0",
     "jest-runner-tsc": "^1.6.0",
     "lerna": "^3.22.1",
     "prop-types": "^15.7.2",
-    "react": "^17.0.0-rc.0",
-    "react-dom": "^17.0.0-rc.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-test-render": "^1.1.2",
     "react-test-renderer": "^16.13.1",
     "rollup": "^2.26.5",
     "styled-system": "^5.1.5",
     "ts-loader": "^7.0.4",
-    "tslib": "^1.12.0",
-    "typescript": "^3.9.2"
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.3"
   }
-}
+}
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -26,7 +26,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.x",
     "@emotion/styled": "^11.x",
-    "@phobon/tokens": "^1.x",
+    "@phobon/tokens": "*",
     "@styled-system/prop-types": "^5.0.x",
     "@styled-system/theme-get": "^5.0.x",
     "react": "^16.13.x || ^17.x",
@@ -46,4 +46,4 @@
       "jest-localstorage-mock"
     ]
   }
-}
+}
diff --git a/packages/base/src/components/containers/Scrollable.tsx b/packages/base/src/components/containers/Scrollable.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import styled from "@emotion/styled";
 import themeGet from "@styled-system/theme-get";
 
@@ -85,13 +85,13 @@ export const ScrollableContainer = styled("div")<ScrollableProps>(
   boxSystem
 );
 
-export const Scrollable: React.FunctionComponent<ScrollableProps> = ({
+export const Scrollable: React.FunctionComponent<PropsWithChildren<ScrollableProps>> = ({
   minimal,
   scrollDirection,
   scrollbarColor,
   children,
   ...props
-}: ScrollableProps & { children?: any }) => {
+}) => {
   const [layoutProps, passthroughProps] = destructureLayoutProps(props);
 
   const {

diff --git a/packages/base/src/components/typography/Heading.tsx b/packages/base/src/components/typography/Heading.tsx
@@ -1,5 +1,5 @@
 import { Interpolation, Theme } from "@emotion/react";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { Text } from "./Text";
 
 import { TypographyProps } from "./typographyProps";
@@ -47,10 +47,10 @@ const headingProps = (heading: string): TypographyProps => {
   return headings[heading];
 };
 
-export const Heading: React.FunctionComponent<TypographyProps & {
+export const Heading: React.FunctionComponent<PropsWithChildren<TypographyProps & {
   as?: React.ElementType;
   css?: Interpolation<Theme>;
-}> = ({ children, as, ...props }) => {
+}>> = ({ children, as, ...props }) => {
   const rest = headingProps(as as string);
   return (
     <Text as={as} {...rest} {...props}>

diff --git a/packages/base/src/tokens/palettes.stories.tsx b/packages/base/src/tokens/palettes.stories.tsx
@@ -14,8 +14,7 @@ export default {
 
 const guidance = ["success", "error", "warning", "info"];
 
-const colourSet = { ...theme.colors };
-delete colourSet.accent;
+const { accent, ...colourSet } = theme.colors;
 
 const SmallColourBox = ({ children, ...props }: any) => (
   <Box fullHeight fullWidth borderRadius={4} {...props}>
@@ -247,9 +246,7 @@ export const withDarkSecondaryPalettes = () => {
 };
 
 export const withContrastRatios = () => {
-  const fixedColourSet = { ...colourSet };
-  delete fixedColourSet.guidance;
-  delete fixedColourSet.grayscale;
+  const { guidance, grayscale, ...fixedColourSet } = colourSet;
 
   const o: any = Object.keys(fixedColourSet)
     .map((c) => {

diff --git a/packages/grimoire/package.json b/packages/grimoire/package.json
@@ -25,12 +25,12 @@
   "peerDependencies": {
     "@emotion/react": "^11.x",
     "@emotion/styled": "^11.x",
-    "@phobon/base": "^3.x",
-    "@phobon/hooks": "^2.x",
-    "@phobon/tokens": "^1.x",
-    "framer-motion": "^2.8.x",
-    "react": "^17.x",
-    "react-dom": "^17.x",
+    "@phobon/base": "*",
+    "@phobon/hooks": "*",
+    "@phobon/tokens": "*",
+    "framer-motion": "^7.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "styled-system": "^5.x"
   }
-}
+}
diff --git a/packages/grimoire/src/components/Button/Button.tsx b/packages/grimoire/src/components/Button/Button.tsx
@@ -209,14 +209,14 @@ const buttonSystem = compose(
 export interface IButtonProps {
   toggled?: boolean;
   variant?:
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "danger"
-    | "warning"
-    | "success"
-    | "link"
-    | "clean";
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "danger"
+  | "warning"
+  | "success"
+  | "link"
+  | "clean";
   shape?: "default" | "circle" | "square";
   size?: "s" | "m" | "l";
 }
@@ -277,7 +277,7 @@ const GrimoireButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   )
 );
 
-export const Button = withTooltip<HTMLButtonElement, ButtonProps>(
+export const Button = withTooltip(
   GrimoireButton
 );
 

diff --git a/packages/grimoire/src/components/Progress/ProgressStep.tsx b/packages/grimoire/src/components/Progress/ProgressStep.tsx
@@ -206,7 +206,7 @@ const StyledProgressStep = React.forwardRef<
   }
 );
 
-export const ProgressStep = withTooltip<HTMLButtonElement, ProgressStepProps>(
+export const ProgressStep = withTooltip(
   StyledProgressStep
 );
 

diff --git a/packages/grimoire/src/components/Toggle/Toggle.tsx b/packages/grimoire/src/components/Toggle/Toggle.tsx
@@ -170,6 +170,6 @@ StyledToggle.defaultProps = {
   type: "button",
 };
 
-export const Toggle = withTooltip<HTMLButtonElement, ToggleProps>(StyledToggle);
+export const Toggle = withTooltip(StyledToggle);
 
 Toggle.displayName = "Toggle";
diff --git a/packages/grimoire/src/components/Tooltip/withTooltip.stories.tsx b/packages/grimoire/src/components/Tooltip/withTooltip.stories.tsx
@@ -11,8 +11,7 @@ export default {
   title: "Components/withTooltip",
 };
 
-const TooltipButton = withTooltip<HTMLButtonElement, ButtonProps>(Button);
-// const TooltipBox = withTooltip(Box);
+const TooltipButton = withTooltip(Button);
 
 export const withPositioning = () => (
   <Box fullWidth fullHeight pt={5}>

diff --git a/packages/grimoire/src/components/Tooltip/withTooltip.tsx b/packages/grimoire/src/components/Tooltip/withTooltip.tsx
@@ -1,14 +1,18 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
-import React from "react";
+import React, { RefAttributes } from "react";
 import { destructureLayoutProps } from "@phobon/base";
 
 import { Tooltip, TooltipProps } from "./Tooltip";
 
-export const withTooltip = <T extends object, U>(
-  WrappedComponent: React.ElementType
+export type ExtractProps<T> = T extends React.FunctionComponent<infer X> ? X : never;
+
+export type ExtractRefType<T> = T extends React.FunctionComponent<infer X> ? X extends RefAttributes<infer R> ? R : never : never;
+
+export const withTooltip = <T extends ExtractRefType<V>, V extends React.ElementType>(
+  WrappedComponent: V
 ) =>
-  React.forwardRef<T, U & TooltipProps & { as?: React.ElementType }>(
+  React.forwardRef<T, ExtractProps<V> & TooltipProps & { as?: React.ElementType }>(
     ({ tooltip, tooltipDirection, offset, as, ...props }, ref) => {
       // If there is no tooltip to display here, then just render the WrappedComponent.
       if (!tooltip) {

diff --git a/packages/grimoire/src/patterns/Notifications/Notifications.tsx b/packages/grimoire/src/patterns/Notifications/Notifications.tsx
@@ -27,7 +27,7 @@ const notificationPositions = ({ notificationPosition }) => {
   return positions[notificationPosition];
 };
 
-const Lifebar = motion.custom(Box);
+const Lifebar = motion(Box);
 
 export interface INotificationProps {
   content: React.ReactNode;

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -14,7 +14,7 @@
     "test": "jest -c jest.tsc.config.js"
   },
   "peerDependencies": {
-    "react": "^17.x",
-    "react-dom": "^17.x"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
-}
+}