refactor: animations (#5766)

* feat: animations vanilla extract

* fix: redo animations

Author: lisalupi

.changeset/moody-carrots-drive.md

@@ -0,0 +1,33 @@
+---
+"@ultraviolet/ui": major
+---
+
+**BREAKING CHANGE** Remove all emotion animation, replace with vanilla-extract animation by default.
+```js
+import { fadeIn } from '@ultraviolet/ui' // vanilla-extract animation
+```
+
+To use animation in another context, add `Default` at the end of the animation name:
+```js
+import { fadeInDefault } from "@ultraviolet/ui"
+````
+This returns a string that can be used in many different places.
+1. **Emotion**: create the keyframe then use it: 
+```js 
+import { fadeInDefault } from "@ultraviolet/ui"
+import { keyframes } from '@emotion/react'
+
+const fadeInEmotion = keyframes`${fadeInDefault}`
+const StyledDiv = styled.div`
+animation: ${fadeInEmotion} 1s ease infinite;`
+```
+
+2. Vanilla CSS: simply add the name of the animation you want to use as a className. 
+```js
+const MyComponent = () => <div className="fadeIn">Hello World!</div>
+```
+
+To customize the animation, you must overrule the default settings: 
+```js
+const MyComponent = () => <div className="fadeIn" style={{ animationDuration: "300ms" }}>Hello World!</div>
+```

packages/plus/src/components/EstimateCost/Components/components.css.ts

@@ -1,5 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import { zoomInVanillaExtract } from '@ultraviolet/ui'
+import { zoomIn } from '@ultraviolet/ui'
 import { createVar, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
@@ -40,7 +40,7 @@ export const estimateCostItemResourceName = recipe({
   variants: {
     animated: {
       true: {
-        animation: `800ms ${zoomInVanillaExtract}`,
+        animation: `800ms ${zoomIn}`,
       },
     },
   },
@@ -66,7 +66,7 @@ export const estimateCostResourceName = recipe({
     },
     isAnimated: {
       true: {
-        animation: `${zoomInVanillaExtract} 800ms`,
+        animation: `${zoomIn} 800ms`,
       },
     },
   },

packages/plus/src/components/Navigation/components/items.css.ts

@@ -2,7 +2,7 @@ import { theme } from '@ultraviolet/themes'
 import { style, styleVariants } from '@vanilla-extract/css'
 import { ANIMATION_DURATION } from '../constants'
 import { shrinkHeight } from '../animations.css'
-import { fadeInVanillaExtract } from '@ultraviolet/ui'
+import { fadeIn } from '@ultraviolet/ui'
 import { recipe } from '@vanilla-extract/recipes'
 
 export const navigationItemMenuContainer = style({ width: 180 })
@@ -236,10 +236,10 @@ export const navigationItemPinnedButton = style({
 
 export const navigationItemAnimatedIcon = styleVariants({
   expand: {
-    animation: `${fadeInVanillaExtract} ${ANIMATION_DURATION}ms ease-in-out`,
+    animation: `${fadeIn} ${ANIMATION_DURATION}ms ease-in-out`,
   },
   collapse: {
-    animation: `${fadeInVanillaExtract} ${ANIMATION_DURATION}ms ease-in-out reverse`,
+    animation: `${fadeIn} ${ANIMATION_DURATION}ms ease-in-out reverse`,
   },
 })
 

packages/ui/src/__stories__/Guides/Animations.mdx

@@ -0,0 +1,76 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+import Colors from '../components/Colors'
+
+<Meta title="Guides/Animations" />
+
+# Ultraviolet animations
+Ultraviolet provides a set of ready-to-use animations, each available in three formats to suit different styling approaches.
+
+## Vanilla Extract
+Use the animation directly in `vanilla-extract` styles:
+```js
+// styles.css.ts 
+import { fadeIn } from '@ultraviolet/ui' // vanilla-extract animation
+import { style } from '@vanilla-extract/css'
+
+export const myStyle = style({
+  animation: `${fadeIn} 0.2s ease-in-out`,
+})
+```
+
+## CSS-in-JS
+For CSS-in-JS libraries like Emotion, import the `Default` version of the animation, which returns a keyframe string.
+
+Example with **Emotion**: create the keyframe then use it: 
+```js 
+import { fadeInDefault } from "@ultraviolet/ui"
+import { keyframes } from '@emotion/react'
+
+const fadeInEmotion = keyframes`${fadeInDefault}`
+
+const StyledDiv = styled.div`
+  animation: ${fadeInEmotion} 1s ease infinite;
+`
+```
+
+## Vanilla CSS
+Apply the animation by using the class name with the `_uv` suffix:
+
+```js
+const MyComponent = () => <div className="fadeIn_uv">Hello World!</div>
+```
+
+To customize animation properties like duration or timing, override them inline:
+```js
+const MyComponent = () => <div className="fadeIn" style={{ animationDuration: "300ms" }}>Hello World!</div>
+```
+
+
+## List
+- bounce
+- fadeIn
+- fadeOut
+- flash
+- ping
+- pulse
+- quickScaleDown
+- scaleBack
+- scaleDown
+- scaleForward
+- scaleUp
+- sketchIn
+- sketchOut
+- slideDownLarge
+- slideFromBottom
+- slideFromLeft
+- slideFromRight
+- slideFromTop
+- slideToBottom
+- slideToLeft
+- slideToRight
+- slideToTop
+- slideUpLarge
+- unfoldIn
+- unfoldOut
+- zoomIn
+- zoomOut

packages/ui/src/components/ActionBar/styles.css.ts

@@ -1,5 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import { fadeInVanillaExtract } from '../../utils'
+import { fadeIn } from '../../utils'
 import { createVar, style } from '@vanilla-extract/css'
 
 export const rankActionBar = createVar()
@@ -10,7 +10,7 @@ export const stackActionBar = style({
 })
 
 export const actionBar = style({
-  animation: `${fadeInVanillaExtract} 0.2s ease-in-out`,
+  animation: `${fadeIn} 0.2s ease-in-out`,
   backgroundColor: theme.colors.other.elevation.background.fixed,
   borderRadius: theme.radii.default,
   boxShadow: `${theme.shadows.fixed[0]}, ${theme.shadows.fixed[1]}`,

packages/ui/src/components/Modal/styles.css.ts

@@ -2,7 +2,7 @@ import { theme } from '@ultraviolet/themes'
 import { createVar, style } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 import { MODAL_PLACEMENT, MODAL_WIDTH } from './constants'
-import { slideFromBottomVanillaExtract } from '../../utils'
+import { slideFromBottom } from '../../utils'
 
 export const topModal = createVar()
 export const positionModal = createVar()
@@ -96,7 +96,7 @@ export const modal = recipe({
     },
     animation: {
       true: {
-        animation: `${slideFromBottomVanillaExtract} 0.3s ease-in-out forwards`,
+        animation: `${slideFromBottom} 0.3s ease-in-out forwards`,
       },
     },
     positivePosition: {

packages/ui/src/components/Status/styles.css.ts

@@ -1,6 +1,6 @@
 import { theme } from '@ultraviolet/themes'
 import { recipe } from '@vanilla-extract/recipes'
-import { pingVanillaExtract } from '../../utils'
+import { ping } from '../../utils'
 import { SENTIMENTS } from './constant'
 
 const HEIGHT = '10px'
@@ -39,7 +39,7 @@ export const animatedCircleStatus = recipe({
     ...baseCircle,
     position: 'absolute',
     opacity: 0.75,
-    animation: `${pingVanillaExtract} 1.1s cubic-bezier(0, 0, 0.2, 1) infinite`,
+    animation: `${ping} 1.1s cubic-bezier(0, 0, 0.2, 1) infinite`,
   },
   variants: {
     sentiment: sentimentsCircleStatus,

packages/ui/src/index.ts

@@ -1,3 +1,5 @@
+import './utils/animations/animations.css'
+
 // eslint-disable-next-line no-restricted-syntax
 export * from './components'
 export type { UltravioletUITheme } from './theme'
@@ -11,38 +13,61 @@ export {
 export {
   Breakpoint,
   bounce,
+  bounceDefault,
   down,
   fadeIn,
-  fadeInVanillaExtract,
+  fadeInDefault,
   fadeOut,
+  fadeOutDefault,
   flash,
+  flashDefault,
   getUUID,
   normalize,
   ping,
-  pingVanillaExtract,
+  pingDefault,
   pulse,
+  pulseDefault,
   quickScaleDown,
+  quickScaleDownDefault,
   scaleBack,
+  scaleBackDefault,
   scaleDown,
+  scaleDownDefault,
   scaleForward,
+  scaleForwardDefault,
   scaleUp,
+  scaleUpDefault,
   sketchIn,
+  sketchInDefault,
   sketchOut,
+  sketchOutDefault,
   slideDownLarge,
+  slideDownLargeDefault,
   slideFromBottom,
-  slideFromBottomVanillaExtract,
+  slideFromBottomDefault,
   slideFromLeft,
+  slideFromLeftDefault,
   slideFromRight,
+  slideFromRightDefault,
   slideFromTop,
+  slideFromTopDefault,
   slideToBottom,
+  slideToBottomDefault,
   slideToLeft,
+  slideToLeftDefault,
   slideToRight,
+  slideToRightDefault,
   slideToTop,
+  slideToTopDefault,
   slideUpLarge,
+  slideUpLargeDefault,
   unfoldIn,
+  unfoldInDefault,
   unfoldOut,
+  unfoldOutDefault,
   up,
   zoomIn,
-  zoomInVanillaExtract,
+  zoomInDefault,
   zoomOut,
+  zoomOutDefault,
 } from './utils'