fix: redo animations

Author: lisalupi

.changeset/moody-carrots-drive.md

@@ -2,8 +2,32 @@
 "@ultraviolet/ui": major
 ---
 
-**BREAKING CHANGE** Remove all emotion animation, replace with vanilla-extract animation by default. To use the Emotion animation, add `Emotion` to the name of the animation: 
+**BREAKING CHANGE** Remove all emotion animation, replace with vanilla-extract animation by default.
 ```js
 import { fadeIn } from '@ultraviolet/ui' // vanilla-extract animation
-import { fadeInEmotion } from '@ultraviolet/ui' // Emotion 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/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/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,61 +13,61 @@ export {
 export {
   Breakpoint,
   bounce,
-  bounceEmotion,
+  bounceDefault,
   down,
   fadeIn,
-  fadeInEmotion,
+  fadeInDefault,
   fadeOut,
-  fadeOutEmotion,
+  fadeOutDefault,
   flash,
-  flashEmotion,
+  flashDefault,
   getUUID,
   normalize,
   ping,
-  pingEmotion,
+  pingDefault,
   pulse,
-  pulseEmotion,
+  pulseDefault,
   quickScaleDown,
-  quickScaleDownEmotion,
+  quickScaleDownDefault,
   scaleBack,
-  scaleBackEmotion,
+  scaleBackDefault,
   scaleDown,
-  scaleDownEmotion,
+  scaleDownDefault,
   scaleForward,
-  scaleForwardEmotion,
+  scaleForwardDefault,
   scaleUp,
-  scaleUpEmotion,
+  scaleUpDefault,
   sketchIn,
-  sketchInEmotion,
+  sketchInDefault,
   sketchOut,
-  sketchOutEmotion,
+  sketchOutDefault,
   slideDownLarge,
-  slideDownLargeEmotion,
+  slideDownLargeDefault,
   slideFromBottom,
-  slideFromBottomEmotion,
+  slideFromBottomDefault,
   slideFromLeft,
-  slideFromLeftEmotion,
+  slideFromLeftDefault,
   slideFromRight,
-  slideFromRightEmotion,
+  slideFromRightDefault,
   slideFromTop,
-  slideFromTopEmotion,
+  slideFromTopDefault,
   slideToBottom,
-  slideToBottomEmotion,
+  slideToBottomDefault,
   slideToLeft,
-  slideToLeftEmotion,
+  slideToLeftDefault,
   slideToRight,
-  slideToRightEmotion,
+  slideToRightDefault,
   slideToTop,
-  slideToTopEmotion,
+  slideToTopDefault,
   slideUpLarge,
-  slideUpLargeEmotion,
+  slideUpLargeDefault,
   unfoldIn,
-  unfoldInEmotion,
+  unfoldInDefault,
   unfoldOut,
-  unfoldOutEmotion,
+  unfoldOutDefault,
   up,
   zoomIn,
-  zoomInEmotion,
+  zoomInDefault,
   zoomOut,
-  zoomOutEmotion,
+  zoomOutDefault,
 } from './utils'