add useSynchronizedAnimation to storybook, and export

apps/storybook/preview.tsx

@@ -153,6 +153,7 @@ const preview: Preview = {
           'Kom i gang',
           'Endringslogger',
           'Komponenter',
+          'Hooks',
           'Experimental',
           'Primitives',
           'Avviklet',

packages/react/src/hooks/index.ts

@@ -1,4 +1,4 @@
 export { useMediaQuery } from './useMediaQuery';
 export { usePrevious } from './usePrevious';
-export { useSynchronizedAnimation } from './useSynchronizedAnimation';
+export { useSynchronizedAnimation } from './useSynchronizedAnimation/useSynchronizedAnimation';
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

packages/react/src/hooks/useSynchronizedAnimation/useSynchronizedAnimation.mdx

@@ -0,0 +1,26 @@
+import { Meta, Primary, ArgTypes } from '@storybook/blocks';
+
+import * as SyncStories from './useSynchronizedAnimation.stories';
+import { useSynchronizedAnimation } from '../';
+
+<Meta of={SyncStories} />
+
+# useSynchronizedAnimation
+
+En react hook for å synkronisere CSS animasjoner på tvers av flere elementer.
+
+<Primary />
+
+Du sender inn navnet på animasjonen du vil synkronisere.
+Hooken returnerer en `ref`, som du sender til elementet ditt.
+Animasjonen på elementet ditt blir synkronsisert til den første animasjonen med samme navn på siden.
+
+## Bruk
+
+```tsx
+const SyncedBox = () => {
+  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+
+  return <div ref={ref} />;
+};
+```

packages/react/src/hooks/useSynchronizedAnimation/useSynchronizedAnimation.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+import { Button } from '../../components';
+
+import { useSynchronizedAnimation } from './useSynchronizedAnimation';
+
+const decorators = [
+  (Story: StoryFn) => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '20px',
+      }}
+    >
+      <Story />
+    </div>
+  ),
+];
+
+const meta: Meta = {
+  title: 'Hooks/useSynchronizedAnimation',
+  decorators,
+};
+
+export default meta;
+
+const boxStyle = {
+  width: '30px',
+  height: '30px',
+  backgroundColor: 'red',
+};
+
+const SyncedBox = () => {
+  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        animation: 'spin 2s linear infinite',
+        ...boxStyle,
+      }}
+    />
+  );
+};
+
+export const TestSync = () => {
+  const [count, setCount] = useState(1);
+
+  return (
+    <>
+      <Button onClick={() => setCount(count + 1)}>Ny boks</Button>
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+          maxWidth: '300px',
+          flexWrap: 'wrap',
+        }}
+      >
+        {Array.from({ length: count }).map((_, i) => (
+          <SyncedBox key={i} />
+        ))}
+      </div>
+
+      <style>
+        {`
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      `}
+      </style>
+    </>
+  );
+};

packages/react/src/hooks/useSynchronizedAnimation.ts → packages/react/src/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts

@@ -3,8 +3,20 @@
 
 import { useRef } from 'react';
 
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
 export function useSynchronizedAnimation<T>(animationName: string) {
   const ref = useRef<T>(null);
 

packages/react/src/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export { useSynchronizedAnimation } from './hooks';