feat(button): add motion

.storybook/scope.ts

@@ -2,6 +2,23 @@ import { ComponentType } from 'react';
 import * as dateUtils from 'date-fns';
 import * as knobs from '@storybook/addon-knobs';
 import * as grid from './blocks/grid';
+import {
+    motion,
+    AnimatePresence,
+    LayoutGroup,
+    LazyMotion,
+    MotionConfig,
+    Reorder,
+    domMax,
+    m,
+    useAnimation,
+    useMotionValue,
+    useMotionValueEvent,
+    useSpring,
+    useTransform,
+    useReducedMotion,
+    useInView,
+} from 'motion/react';
 
 const coreComponentsContext =
     process.env.BUILD_STORYBOOK_FROM_DIST === 'true'
@@ -41,4 +58,19 @@ export default {
     ...grid,
     ...dateUtils,
     ...knobs,
+    motion,
+    AnimatePresence,
+    LayoutGroup,
+    LazyMotion,
+    MotionConfig,
+    Reorder,
+    domMax,
+    m,
+    useAnimation,
+    useMotionValue,
+    useMotionValueEvent,
+    useSpring,
+    useTransform,
+    useReducedMotion,
+    useInView,
 };

packages/button/package.json

@@ -18,6 +18,7 @@
         "@alfalab/core-components-spinner": "^6.0.4",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
+        "motion": "^12.40.0",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     },

packages/button/src/components/base-button/Component.tsx

@@ -4,11 +4,13 @@ import React, {
     type ButtonHTMLAttributes,
     forwardRef,
     useEffect,
+    useMemo,
     useRef,
     useState,
 } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
+import { motion } from 'motion/react';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Spinner } from '@alfalab/core-components-spinner';
@@ -53,12 +55,19 @@ export const BaseButton = forwardRef<
             onClick,
             styles = {},
             colorStylesMap = { default: {}, inverted: {} },
+            motionProps,
             ...restProps
         },
         ref,
     ) => {
         const buttonRef = useRef<HTMLElement>(null);
 
+        const MotionComponent = useMemo(
+            () => motion.create(Component as Parameters<typeof motion.create>[0]),
+            [Component],
+        );
+        const Tag = motionProps ? MotionComponent : Component;
+
         const [focused] = useFocus(buttonRef, 'keyboard');
 
         const [loaderTimePassed, setLoaderTimePassed] = useState(true);
@@ -188,31 +197,33 @@ export const BaseButton = forwardRef<
             const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
 
             return (
-                <Component
+                <Tag
                     rel={target === '_blank' ? 'noreferrer noopener' : undefined}
                     {...componentProps}
                     {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
                     {...hrefProps}
+                    {...(motionProps as object)}
                     onClick={handleClick}
                     disabled={disabled || showLoader}
                     ref={mergeRefs([buttonRef, ref])}
                 >
                     {buttonChildren}
-                </Component>
+                </Tag>
             );
         }
 
         return (
-            <Component
+            <Tag
                 {...componentProps}
                 {...restButtonProps}
+                {...(motionProps as object)}
                 onClick={handleClick}
                 type={type}
                 disabled={disabled || showLoader}
                 ref={mergeRefs([buttonRef, ref])}
             >
                 {buttonChildren}
-            </Component>
+            </Tag>
         );
     },
 );