From fbe7638e6752fc0287fe603cef3aeaee92954352 Mon Sep 17 00:00:00 2001 From: Shirsh Zibbu Date: Mon, 4 Nov 2024 17:57:46 +0530 Subject: [PATCH 1/6] upgrade react-spring --- packages/pebble-web/package.json | 2 +- .../pebble-web/src/components/DropDown.tsx | 2 +- .../pebble-web/src/components/Sidebar.tsx | 2 +- packages/pebble-web/src/components/Toast.tsx | 9 +- .../pebble-web/src/components/TypeAhead.tsx | 2 +- .../src/components/shared/MountTransition.tsx | 22 ++-- packages/pebble-web/src/utils/animation.ts | 10 +- yarn.lock | 103 ++++++++++++++++-- 8 files changed, 119 insertions(+), 33 deletions(-) diff --git a/packages/pebble-web/package.json b/packages/pebble-web/package.json index 9df03e35..30086f84 100644 --- a/packages/pebble-web/package.json +++ b/packages/pebble-web/package.json @@ -37,7 +37,7 @@ "react-calendar": "^2.19.2", "react-ink": "^6.4.0", "react-popper": "^1.3.6", - "react-spring": "^8.0.27", + "react-spring": "^9.7.4", "rheostat": "2.2.0", "rifm": "^0.12.0", "scroll-into-view-if-needed": "^2.2.25", diff --git a/packages/pebble-web/src/components/DropDown.tsx b/packages/pebble-web/src/components/DropDown.tsx index deafaefd..60d55e61 100644 --- a/packages/pebble-web/src/components/DropDown.tsx +++ b/packages/pebble-web/src/components/DropDown.tsx @@ -4,7 +4,7 @@ import { DropDownButton } from "./Button"; import { dropDownStyle, wrapperStyle } from "./styles/Dropdown.styles"; import { cx } from "emotion"; import OutsideClick from "./OutsideClick"; -import { animated } from "react-spring/renderprops.cjs"; +import { animated } from "react-spring"; import MountTransition from "./shared/MountTransition"; import { Manager, Reference, Popper } from "react-popper"; import { colors } from "pebble-shared"; diff --git a/packages/pebble-web/src/components/Sidebar.tsx b/packages/pebble-web/src/components/Sidebar.tsx index 0e383567..f2034b24 100644 --- a/packages/pebble-web/src/components/Sidebar.tsx +++ b/packages/pebble-web/src/components/Sidebar.tsx @@ -5,7 +5,7 @@ import { sidebarWrapperStyle } from "./styles/Sidebar.styles"; import { SidebarProps } from "./typings/Sidebar"; -import { animated } from "react-spring/renderprops.cjs"; +import { animated } from "react-spring"; import Ink from "react-ink"; import { css, cx } from "emotion"; import { disableScrollY } from "../theme/styles"; diff --git a/packages/pebble-web/src/components/Toast.tsx b/packages/pebble-web/src/components/Toast.tsx index cb0a7fa2..8902b577 100644 --- a/packages/pebble-web/src/components/Toast.tsx +++ b/packages/pebble-web/src/components/Toast.tsx @@ -7,7 +7,7 @@ import { ToastType, ToastPosition } from "./typings/Toast"; -import { Transition, animated } from "react-spring/renderprops.cjs"; +import { Transition, animated } from "react-spring"; import { cx } from "emotion"; import mitt from "mitt"; import { animationConfig } from "../utils/animation"; @@ -188,9 +188,8 @@ class Toast extends React.PureComponent { }} config={animationConfig.config} > - {show => - show && - (styles => ( + {(styles, show) => + show && ( { {this.state.text} - )) + ) } ); diff --git a/packages/pebble-web/src/components/TypeAhead.tsx b/packages/pebble-web/src/components/TypeAhead.tsx index 9ef1fe06..d3fb5989 100644 --- a/packages/pebble-web/src/components/TypeAhead.tsx +++ b/packages/pebble-web/src/components/TypeAhead.tsx @@ -10,7 +10,7 @@ import Input from "./Input"; import { optionsWrapper, wrapper } from "./styles/TypeAhead.styles"; import OutsideClick from "./OutsideClick"; import OptionGroupRadio from "./OptionGroupRadio"; -import { animated } from "react-spring/renderprops.cjs"; +import { animated } from "react-spring"; import MountTransition from "./shared/MountTransition"; function defaultSearchBox( diff --git a/packages/pebble-web/src/components/shared/MountTransition.tsx b/packages/pebble-web/src/components/shared/MountTransition.tsx index 44d21e39..09cc5ad3 100644 --- a/packages/pebble-web/src/components/shared/MountTransition.tsx +++ b/packages/pebble-web/src/components/shared/MountTransition.tsx @@ -1,18 +1,12 @@ import * as React from "react"; -import { - State, - Transition, - TransitionProps -} from "react-spring/renderprops.cjs"; -import { animationConfig } from "../../utils/animation"; -import { Omit } from "utility-types"; +import { Transition, UseTransitionProps } from "react-spring"; +import { animationConfig, TransitionPhase } from "../../utils/animation"; -interface MountTransitionProps - extends Omit, "items">, "children"> { +interface MountTransitionProps extends UseTransitionProps { visible: boolean; children: ( params: React.CSSProperties, - state: State, + state: TransitionPhase, index: number ) => React.ReactNode; } @@ -20,10 +14,10 @@ interface MountTransitionProps const MountTransition: React.FunctionComponent = props => { return ( - {(show, state, index) => - show && - (styles => props.children(styles as React.CSSProperties, state, index)) - } + {(styles, show, { phase }, index) => { + if (!show) return null; + return props.children(styles as React.CSSProperties, phase, index); + }} ); }; diff --git a/packages/pebble-web/src/utils/animation.ts b/packages/pebble-web/src/utils/animation.ts index 72dc8937..53794031 100644 --- a/packages/pebble-web/src/utils/animation.ts +++ b/packages/pebble-web/src/utils/animation.ts @@ -1,9 +1,13 @@ -import { State } from "react-spring"; +import { TransitionState } from "react-spring"; + +// TransitionPhase enum is not exported by react-spring package +// so we alias it as a type here +export type TransitionPhase = TransitionState["phase"]; export const animationConfig = { from: { opacity: 0, transform: "scale(0.95)" }, enter: { opacity: 1, transform: "scale(1)" }, leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" }, - config: (_a: boolean, motion: State) => - motion === "leave" ? { duration: 80 } : { duration: 200 } + config: (_show: boolean, _index: number, state: TransitionPhase) => + state === "leave" ? { duration: 80 } : { duration: 200 } }; diff --git a/yarn.lock b/yarn.lock index 345d1279..4f1611d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2400,6 +2400,91 @@ react-lifecycles-compat "^3.0.4" warning "^3.0.0" +"@react-spring/animated@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.5.tgz#eb0373aaf99b879736b380c2829312dae3b05f28" + integrity sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg== + dependencies: + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/core@~9.7.4", "@react-spring/core@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.5.tgz#72159079f52c1c12813d78b52d4f17c0bf6411f7" + integrity sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/konva@~9.7.4": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.7.5.tgz#ab6b0d9fcb0941db0f11e2437a002628912d2698" + integrity sha512-BelrmyY6w0FGoNSEfSJltjQDUoW0Prxf+FzGjyLuLs+V9M9OM/aHnYqOlvQEfQsZx6C/ZiDOn5BZl8iH8SDf+Q== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/core" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/native@~9.7.4": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.7.5.tgz#fe48f017ae63472b89ff5f02b2bc075ff8840978" + integrity sha512-C1S500BNP1I05MftElyLv2nIqaWQ0MAByOAK/p4vuXcUK3XcjFaAJ385gVLgV2rgKfvkqRoz97PSwbh+ZCETEg== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/core" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/rafz@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.5.tgz#ee7959676e7b5d6a3813e8c17d5e50df98b95df9" + integrity sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw== + +"@react-spring/shared@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.5.tgz#6d513622df6ad750bbbd4dedb4ca0a653ec92073" + integrity sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw== + dependencies: + "@react-spring/rafz" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/three@~9.7.4": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.7.5.tgz#46bcd22354afa873a809f1c6d7e07b59600b4d08" + integrity sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/core" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/types@~9.7.5": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.5.tgz#e5dd180f3ed985b44fd2cd2f32aa9203752ef3e8" + integrity sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g== + +"@react-spring/web@~9.7.4": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.5.tgz#7d7782560b3a6fb9066b52824690da738605de80" + integrity sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/core" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + +"@react-spring/zdog@~9.7.4": + version "9.7.5" + resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.7.5.tgz#ba11049ecce30d03f92189eefd67ba9a4118149d" + integrity sha512-VV7vmb52wGHgDA1ry6hv+QgxTs78fqjKEQnj+M8hiBg+dwOsTtqqM24ADtc4cMAhPW+eZhVps8ZNKtjt8ouHFA== + dependencies: + "@react-spring/animated" "~9.7.5" + "@react-spring/core" "~9.7.5" + "@react-spring/shared" "~9.7.5" + "@react-spring/types" "~9.7.5" + "@rollup/plugin-replace@^2.3.3": version "2.3.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.3.tgz#cd6bae39444de119f5d905322b91ebd4078562e7" @@ -14054,13 +14139,17 @@ react-sizeme@^2.5.2, react-sizeme@^2.6.7: shallowequal "^1.1.0" throttle-debounce "^2.1.0" -react-spring@^8.0.27: - version "8.0.27" - resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a" - integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g== - dependencies: - "@babel/runtime" "^7.3.1" - prop-types "^15.5.8" +react-spring@^9.7.4: + version "9.7.4" + resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.7.4.tgz#5a4e99bf121475e1bf714e0b241191cad50c6432" + integrity sha512-ypxdsOwmCfbDZGTBRyBo7eLjF55xNFN86e/QkflZ1Rfo8QMzVjCAWocrEEbsuFKkQAg2RRdhNkinWJ6BpCvJoQ== + dependencies: + "@react-spring/core" "~9.7.4" + "@react-spring/konva" "~9.7.4" + "@react-spring/native" "~9.7.4" + "@react-spring/three" "~9.7.4" + "@react-spring/web" "~9.7.4" + "@react-spring/zdog" "~9.7.4" react-syntax-highlighter@^11.0.2: version "11.0.2" From 46c77f2d1c09f2d5fec09704869273a683950a2e Mon Sep 17 00:00:00 2001 From: Shirsh Zibbu Date: Mon, 4 Nov 2024 17:57:55 +0530 Subject: [PATCH 2/6] fix storybook --- .storybook/webpack.config.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 4668400a..52ba54a9 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -38,6 +38,13 @@ module.exports = ({ config, mode }) => { enforce: "pre" }); + // transpile @react-spring/* packages + config.module.rules.push({ + test: /\.js$/, + include: /node_modules\/@react-spring/, + use: ["babel-loader"] + }); + config.plugins.unshift( new ForkTsCheckerWebpackPlugin({ typescript: { From dafb9e609cbfef84ead3d9cd242c837b5e5c9599 Mon Sep 17 00:00:00 2001 From: Shirsh Zibbu Date: Mon, 4 Nov 2024 19:20:30 +0530 Subject: [PATCH 3/6] fix build --- package.json | 2 +- .../pebble-web/src/components/TypeAhead.tsx | 2 +- .../src/components/shared/MountTransition.tsx | 7 +- yarn.lock | 75 +++++++++++++++++-- 4 files changed, 77 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 270b723d..f8391bf0 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "rollup-plugin-babel": "^4.4.0", "rollup-plugin-cleanup": "^3.1.1", "rollup-plugin-commonjs": "^10.1.0", - "rollup-plugin-filesize": "^9.0.2", + "rollup-plugin-filesize": "^9.1.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-sourcemaps": "^0.6.2", "rollup-plugin-terser": "^6.1.0", diff --git a/packages/pebble-web/src/components/TypeAhead.tsx b/packages/pebble-web/src/components/TypeAhead.tsx index d3fb5989..99ef0e9c 100644 --- a/packages/pebble-web/src/components/TypeAhead.tsx +++ b/packages/pebble-web/src/components/TypeAhead.tsx @@ -121,7 +121,7 @@ export default class TypeAhead extends React.PureComponent< this.props )} - + {transitionStyles => ( { const MountTransition: React.FunctionComponent = props => { return ( - + {(styles, show, { phase }, index) => { if (!show) return null; return props.children(styles as React.CSSProperties, phase, index); diff --git a/yarn.lock b/yarn.lock index 4f1611d6..929a2901 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1575,6 +1575,46 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@jridgewell/gen-mapping@^0.3.5": + version "0.3.5" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36" + integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg== + dependencies: + "@jridgewell/set-array" "^1.2.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.24" + +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" + integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== + +"@jridgewell/set-array@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280" + integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== + +"@jridgewell/source-map@^0.3.3": + version "0.3.6" + resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a" + integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ== + dependencies: + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.25" + +"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" + integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== + +"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": + version "0.3.25" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0" + integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + "@lerna/add@3.21.0": version "3.21.0" resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.21.0.tgz#27007bde71cc7b0a2969ab3c2f0ae41578b4577b" @@ -3755,6 +3795,11 @@ acorn@^7.1.0, acorn@^7.1.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd" integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA== +acorn@^8.8.2: + version "8.14.0" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0" + integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA== + address@1.1.2, address@^1.0.1: version "1.1.2" resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6" @@ -14801,10 +14846,10 @@ rollup-plugin-commonjs@^10.1.0: resolve "^1.11.0" rollup-pluginutils "^2.8.1" -rollup-plugin-filesize@^9.0.2: - version "9.0.2" - resolved "https://registry.yarnpkg.com/rollup-plugin-filesize/-/rollup-plugin-filesize-9.0.2.tgz#1470bb93d40dd0c2a5381cae58b8b7106f13d185" - integrity sha512-UB+pMETOAxo79aINL+Lt7NmUJa6x6vJjtlmBco9NhSHhpnYaKdGGSx1QuuUuo5LlBXhQxrUURYJbF/B95Vt6Hg== +rollup-plugin-filesize@^9.1.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-filesize/-/rollup-plugin-filesize-9.1.0.tgz#e6032a2975d1c0c8f2c30ecaa73a12bf39406461" + integrity sha512-3umx+e2AzYH4lJaBtyeWk2kC7JafzZhy5AJwj2amudWWgqIFpI/QH7s2+9LWBwIvjK5ty6K6eM3i6dw7qF4GrQ== dependencies: "@babel/runtime" "^7.10.3" boxen "^4.2.0" @@ -14813,7 +14858,7 @@ rollup-plugin-filesize@^9.0.2: filesize "^6.1.0" gzip-size "^5.1.1" pacote "^11.1.10" - terser "^4.8.0" + terser "^5.5.1" rollup-plugin-node-resolve@^5.2.0: version "5.2.0" @@ -15426,6 +15471,14 @@ source-map-support@^0.5.3, source-map-support@^0.5.6, source-map-support@~0.5.12 buffer-from "^1.0.0" source-map "^0.6.0" +source-map-support@~0.5.20: + version "0.5.21" + resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f" + integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w== + dependencies: + buffer-from "^1.0.0" + source-map "^0.6.0" + source-map-url@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" @@ -16243,7 +16296,7 @@ terser-webpack-plugin@^2.1.2: terser "^4.6.12" webpack-sources "^1.4.3" -terser@^4.1.2, terser@^4.3.9, terser@^4.6.12, terser@^4.7.0, terser@^4.8.0: +terser@^4.1.2, terser@^4.3.9, terser@^4.6.12, terser@^4.7.0: version "4.8.0" resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17" integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw== @@ -16252,6 +16305,16 @@ terser@^4.1.2, terser@^4.3.9, terser@^4.6.12, terser@^4.7.0, terser@^4.8.0: source-map "~0.6.1" source-map-support "~0.5.12" +terser@^5.5.1: + version "5.36.0" + resolved "https://registry.yarnpkg.com/terser/-/terser-5.36.0.tgz#8b0dbed459ac40ff7b4c9fd5a3a2029de105180e" + integrity sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w== + dependencies: + "@jridgewell/source-map" "^0.3.3" + acorn "^8.8.2" + commander "^2.20.0" + source-map-support "~0.5.20" + test-exclude@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e" From 7728571625ec7138685db79c09fb43225ae615d6 Mon Sep 17 00:00:00 2001 From: Shirsh Zibbu Date: Mon, 4 Nov 2024 20:47:56 +0530 Subject: [PATCH 4/6] fix typescript --- .../pebble-web/src/components/DropDown.tsx | 10 ++++----- packages/pebble-web/src/components/Modal.tsx | 21 +++++++++---------- packages/pebble-web/src/components/Popper.tsx | 11 +++++----- .../src/components/shared/MountTransition.tsx | 16 ++++++++++---- packages/pebble-web/src/utils/animation.ts | 5 +++++ 5 files changed, 38 insertions(+), 25 deletions(-) diff --git a/packages/pebble-web/src/components/DropDown.tsx b/packages/pebble-web/src/components/DropDown.tsx index 60d55e61..c2de3680 100644 --- a/packages/pebble-web/src/components/DropDown.tsx +++ b/packages/pebble-web/src/components/DropDown.tsx @@ -103,9 +103,9 @@ class DropDown extends React.PureComponent { ...style, ...transitionStyles, backgroundColor: colors.white.base, - transform: `${style.transform || ""} ${ - transitionStyles.transform || "" - }`, + transform: transitionStyles.transform.to( + t => `${style.transform || ""} ${t || ""}` + ), transformOrigin: `${arrowProps.style.left || 0}px ${ arrowProps.style.top || 0 }px`, @@ -113,7 +113,7 @@ class DropDown extends React.PureComponent { }; return ( -
{ toggle: this.toggleDropdown, isOpen: _isDropDownOpen })} -
+ ); }} diff --git a/packages/pebble-web/src/components/Modal.tsx b/packages/pebble-web/src/components/Modal.tsx index 6f4d7fff..95d7266f 100644 --- a/packages/pebble-web/src/components/Modal.tsx +++ b/packages/pebble-web/src/components/Modal.tsx @@ -1,10 +1,11 @@ import * as React from "react"; import { ModalProps } from "./typings/Modal"; import { modalContainer } from "./styles/Modal.styles"; -import { cx, css } from "emotion"; +import { cx } from "emotion"; import isBrowser from "is-in-browser"; import * as ReactDOM from "react-dom"; import MountTransition from "./shared/MountTransition"; +import { animated } from "react-spring"; class Modal extends React.PureComponent { private node = isBrowser ? document.createElement("div") : null; @@ -41,23 +42,21 @@ class Modal extends React.PureComponent { // tslint:disable-next-line:jsx-wrap-multiline {transitionStyles => ( -
-
{children} -
-
+ + )} , node as NonNullable diff --git a/packages/pebble-web/src/components/Popper.tsx b/packages/pebble-web/src/components/Popper.tsx index f3411f06..697c252b 100644 --- a/packages/pebble-web/src/components/Popper.tsx +++ b/packages/pebble-web/src/components/Popper.tsx @@ -6,6 +6,7 @@ import { colors } from "pebble-shared"; import { cx } from "emotion"; import OutsideClick from "./OutsideClick"; import MountTransition from "./shared/MountTransition"; +import { animated } from "react-spring"; export default class PebblePopper extends React.PureComponent< PopperProps, @@ -71,16 +72,16 @@ export default class PebblePopper extends React.PureComponent< ...style, ...transitionStyles, backgroundColor: popperBackgroundColor, - transform: `${style.transform || ""} ${ - transitionStyles.transform || "" - }`, + transform: transitionStyles.transform.to( + t => `${style.transform || ""} ${t || ""}` + ), transformOrigin: `${arrowProps.style.left || 0}px ${ arrowProps.style.top || 0 }px` }; return ( -
▶
- + ); }} diff --git a/packages/pebble-web/src/components/shared/MountTransition.tsx b/packages/pebble-web/src/components/shared/MountTransition.tsx index f5d742bb..e774ef6e 100644 --- a/packages/pebble-web/src/components/shared/MountTransition.tsx +++ b/packages/pebble-web/src/components/shared/MountTransition.tsx @@ -1,11 +1,15 @@ import * as React from "react"; -import { Transition, UseTransitionProps } from "react-spring"; -import { animationConfig, TransitionPhase } from "../../utils/animation"; +import { Transition, UseTransitionProps, SpringValues } from "react-spring"; +import { + animationConfig, + TransitionPhase, + AnimationStyle +} from "../../utils/animation"; interface MountTransitionProps extends UseTransitionProps { visible: boolean; children: ( - params: React.CSSProperties, + params: SpringValues, state: TransitionPhase, index: number ) => React.ReactNode; @@ -21,7 +25,11 @@ const MountTransition: React.FunctionComponent = props => > {(styles, show, { phase }, index) => { if (!show) return null; - return props.children(styles as React.CSSProperties, phase, index); + return props.children( + styles as SpringValues, + phase, + index + ); }} ); diff --git a/packages/pebble-web/src/utils/animation.ts b/packages/pebble-web/src/utils/animation.ts index 53794031..8a4a47f5 100644 --- a/packages/pebble-web/src/utils/animation.ts +++ b/packages/pebble-web/src/utils/animation.ts @@ -11,3 +11,8 @@ export const animationConfig = { config: (_show: boolean, _index: number, state: TransitionPhase) => state === "leave" ? { duration: 80 } : { duration: 200 } }; + +export type AnimationStyle = { + opacity: number; + transform: string; +}; From a03a7fce3166127bdf4738291d9c20504e0f8c6b Mon Sep 17 00:00:00 2001 From: Shirsh Zibbu Date: Mon, 4 Nov 2024 21:06:52 +0530 Subject: [PATCH 5/6] fix tests --- .../src/components/__tests__/__snapshots__/popper.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pebble-web/src/components/__tests__/__snapshots__/popper.test.tsx.snap b/packages/pebble-web/src/components/__tests__/__snapshots__/popper.test.tsx.snap index b038d211..7c1b55f8 100644 --- a/packages/pebble-web/src/components/__tests__/__snapshots__/popper.test.tsx.snap +++ b/packages/pebble-web/src/components/__tests__/__snapshots__/popper.test.tsx.snap @@ -142,7 +142,7 @@ exports[`Component: Popper snapshot 1`] = ` "pointerEvents": "none", "position": "absolute", "top": 0, - "transform": " scale(0.95)", + "transform": " scale(0.95)", "transformOrigin": "0px 0px", } } From eaa5929a264358381b79fbf6f045799fb5da1ee9 Mon Sep 17 00:00:00 2001 From: Shirsh Zibbu Date: Mon, 4 Nov 2024 21:09:35 +0530 Subject: [PATCH 6/6] Publish - pebble-shared@2.18.0-alpha.0 - pebble-web@2.18.0-alpha.0 --- packages/pebble-shared/package.json | 2 +- packages/pebble-web/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/pebble-shared/package.json b/packages/pebble-shared/package.json index 25bb9985..d6f5e2bd 100644 --- a/packages/pebble-shared/package.json +++ b/packages/pebble-shared/package.json @@ -1,6 +1,6 @@ { "name": "pebble-shared", - "version": "2.17.0", + "version": "2.18.0-alpha.0", "license": "MIT", "main": "dist/pebble-shared.js", "files": [ diff --git a/packages/pebble-web/package.json b/packages/pebble-web/package.json index 30086f84..69168250 100644 --- a/packages/pebble-web/package.json +++ b/packages/pebble-web/package.json @@ -1,6 +1,6 @@ { "name": "pebble-web", - "version": "2.17.0", + "version": "2.18.0-alpha.0", "author": "ritz078 ", "license": "MIT", "main": "dist/pebble-web.js", @@ -44,7 +44,7 @@ "utility-types": "^3.10.0" }, "devDependencies": { - "pebble-shared": "^2.17.0" + "pebble-shared": "^2.18.0-alpha.0" }, "greenkeeper": { "ignore": [