From 58f5597e7dfb9c830f79a974dbaba8bc1e992160 Mon Sep 17 00:00:00 2001 From: joshunrau Date: Thu, 2 Jan 2025 13:32:14 -0500 Subject: [PATCH 1/2] fix: use NoInfer in Form for certain props --- src/components/Form/Form.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index 0e0a7d5b..66a88d7d 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -33,9 +33,9 @@ type FormProps, TData extends z.TypeOf; fieldsFooter?: React.ReactNode; id?: string; - initialValues?: PartialNullableFormDataType; - onError?: (error: z.ZodError) => void; - onSubmit: (data: TData) => Promisable; + initialValues?: PartialNullableFormDataType>; + onError?: (error: z.ZodError>) => void; + onSubmit: (data: NoInfer) => Promisable; preventResetValuesOnReset?: boolean; readOnly?: boolean; resetBtn?: boolean; From 389c4efe4c4e0499f1b2c519d00ee5338e880778 Mon Sep 17 00:00:00 2001 From: joshunrau Date: Fri, 3 Jan 2025 12:17:29 -0500 Subject: [PATCH 2/2] chore: replace framer-motion with motion --- package.json | 2 +- pnpm-lock.yaml | 53 ++++++++++++++++--- src/components/CopyButton/CopyButton.tsx | 2 +- src/components/DatePicker/Calendar.tsx | 2 +- src/components/DatePicker/DatePicker.tsx | 2 +- .../Form/StringField/StringFieldPassword.tsx | 2 +- .../NotificationHub/NotificationHub.tsx | 2 +- .../StatisticCard/StatisticCard.tsx | 2 +- 8 files changed, 52 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index c23c733c..f006cb5e 100644 --- a/package.json +++ b/package.json @@ -97,9 +97,9 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", - "framer-motion": "^11.11.7", "lodash-es": "^4.17.21", "lucide-react": "^0.451.0", + "motion": "^11.15.0", "react-dropzone": "^14.2.9", "react-error-boundary": "^4.0.13", "react-resizable-panels": "^2.1.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4fa1e7ca..fba5982e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -91,15 +91,15 @@ importers: cmdk: specifier: ^1.0.0 version: 1.0.0(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - framer-motion: - specifier: ^11.11.7 - version: 11.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) lodash-es: specifier: ^4.17.21 version: 4.17.21 lucide-react: specifier: ^0.451.0 version: 0.451.0(react@18.3.1) + motion: + specifier: ^11.15.0 + version: 11.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.2.0 version: 18.3.1 @@ -3982,13 +3982,13 @@ packages: resolution: { integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew== } - framer-motion@11.11.7: + framer-motion@11.15.0: resolution: - { integrity: sha512-89CgILOXPeG3L7ymOTGrLmf8IiKubYLUN/QkYgQuLvehAHfqgwJbLfCnhuyRI4WTds1TXkUp67A7IJrgRY/j1w== } + { integrity: sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w== } peerDependencies: '@emotion/is-prop-valid': '*' - react: ^18.0.0 - react-dom: ^18.0.0 + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 peerDependenciesMeta: '@emotion/is-prop-valid': optional: true @@ -5034,6 +5034,29 @@ packages: { integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw== } engines: { node: '>=16 || 14 >=14.17' } + motion-dom@11.14.3: + resolution: + { integrity: sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA== } + + motion-utils@11.14.3: + resolution: + { integrity: sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ== } + + motion@11.15.0: + resolution: + { integrity: sha512-iZ7dwADQJWGsqsSkBhNHdI2LyYWU+hA1Nhy357wCLZq1yHxGImgt3l7Yv0HT/WOskcYDq9nxdedyl4zUv7UFFw== } + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + ms@2.0.0: resolution: { integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A== } @@ -10548,8 +10571,10 @@ snapshots: fraction.js@4.3.7: {} - framer-motion@11.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + framer-motion@11.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: + motion-dom: 11.14.3 + motion-utils: 11.14.3 tslib: 2.7.0 optionalDependencies: react: 18.3.1 @@ -11315,6 +11340,18 @@ snapshots: minipass@7.1.2: {} + motion-dom@11.14.3: {} + + motion-utils@11.14.3: {} + + motion@11.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + framer-motion: 11.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + tslib: 2.7.0 + optionalDependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + ms@2.0.0: {} ms@2.1.3: {} diff --git a/src/components/CopyButton/CopyButton.tsx b/src/components/CopyButton/CopyButton.tsx index 116395de..5b3b5ad3 100644 --- a/src/components/CopyButton/CopyButton.tsx +++ b/src/components/CopyButton/CopyButton.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; import { ClipboardCheckIcon, ClipboardListIcon } from 'lucide-react'; +import { AnimatePresence, motion } from 'motion/react'; import { match } from 'ts-pattern'; import { Button, type ButtonProps } from '../Button'; diff --git a/src/components/DatePicker/Calendar.tsx b/src/components/DatePicker/Calendar.tsx index 4ea493b6..6fd575e3 100644 --- a/src/components/DatePicker/Calendar.tsx +++ b/src/components/DatePicker/Calendar.tsx @@ -1,7 +1,7 @@ import { forwardRef } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; import { range } from 'lodash-es'; +import { AnimatePresence, motion } from 'motion/react'; import { useTranslation } from '@/hooks'; diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index b6abc29e..a5e81c21 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/src/components/DatePicker/DatePicker.tsx @@ -1,7 +1,7 @@ import { useReducer, useState } from 'react'; import * as React from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { useTranslation } from '@/hooks'; import { cn } from '@/utils'; diff --git a/src/components/Form/StringField/StringFieldPassword.tsx b/src/components/Form/StringField/StringFieldPassword.tsx index b0dd49c7..d4c15f7e 100644 --- a/src/components/Form/StringField/StringFieldPassword.tsx +++ b/src/components/Form/StringField/StringFieldPassword.tsx @@ -1,8 +1,8 @@ import { useEffect, useState } from 'react'; import type { StringFormField } from '@douglasneuroinformatics/libui-form-types'; -import { motion } from 'framer-motion'; import { EyeIcon, EyeOffIcon } from 'lucide-react'; +import { motion } from 'motion/react'; import { Input } from '@/components/Input'; import { Label } from '@/components/Label'; diff --git a/src/components/NotificationHub/NotificationHub.tsx b/src/components/NotificationHub/NotificationHub.tsx index 94b6d40a..adaff3c2 100644 --- a/src/components/NotificationHub/NotificationHub.tsx +++ b/src/components/NotificationHub/NotificationHub.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion'; import { XIcon } from 'lucide-react'; +import { AnimatePresence, motion } from 'motion/react'; import { useTranslation } from '@/hooks'; import { useNotificationsStore } from '@/hooks/useNotificationsStore'; diff --git a/src/components/StatisticCard/StatisticCard.tsx b/src/components/StatisticCard/StatisticCard.tsx index f987b96e..f400ba6f 100644 --- a/src/components/StatisticCard/StatisticCard.tsx +++ b/src/components/StatisticCard/StatisticCard.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; -import { motion, useSpring, useTransform } from 'framer-motion'; +import { motion, useSpring, useTransform } from 'motion/react'; import { cn } from '@/utils';