Update documentation to display animation props

Author: NumberOneBot

POST.md

@@ -27,7 +27,15 @@ const meta: Meta<typeof CompositeCurve> = {
     color: { control: { type: 'color' } },
     opacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
     lineWidth: { control: { type: 'range', min: 0.1, max: 4, step: 0.1 } },
-    resolutionFactor: { control: { type: 'range', min: 1, max: 50, step: 0.5 } }
+    resolutionFactor: {
+      control: { type: 'range', min: 1, max: 50, step: 0.5 }
+    },
+    animate: { control: { type: 'boolean' } },
+    easing: {
+      control: { type: 'select' },
+      options: ['linear', 'easeIn', 'easeOut', 'easeInOut', 'elastic', 'bounce']
+    },
+    duration: { control: { type: 'range', min: 0, max: 1000, step: 50 } }
   }
 }
 export default meta

src/components/CompositeCurve/CompositeCurve.stories.tsx

@@ -31,10 +31,13 @@ const meta: Meta<typeof FilterCurve> = {
     activeLineWidth: {
       control: { type: 'range', min: 0.1, max: 4, step: 0.1 }
     },
+    resolutionFactor: {
+      control: { type: 'range', min: 1, max: 50, step: 0.5 }
+    },
     animate: { control: { type: 'boolean' } },
     easing: {
       control: { type: 'select' },
-      options: ['linear', 'easeIn', 'easeOut', 'easeInOut', 'elastic']
+      options: ['linear', 'easeIn', 'easeOut', 'easeInOut', 'elastic', 'bounce']
     },
     duration: { control: { type: 'range', min: 0, max: 1000, step: 50 } }
   }

src/components/FilterCurve/FilterCurve.stories.tsx

@@ -31,7 +31,7 @@ const meta: Meta<typeof FrequencyResponseCurve> = {
     animate: { control: { type: 'boolean' } },
     easing: {
       control: { type: 'select' },
-      options: ['linear', 'easeIn', 'easeOut', 'easeInOut', 'elastic']
+      options: ['linear', 'easeIn', 'easeOut', 'easeInOut', 'elastic', 'bounce']
     },
     duration: { control: { type: 'range', min: 0, max: 1000, step: 50 } }
   }

src/components/FrequencyResponseCurve/FrequencyResponseCurve.stories.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { createContext } from 'react'
+import { createContext, useMemo } from 'react'
 
 import {
   type GraphScale,
@@ -39,14 +39,22 @@ export const GraphProvider = ({
   width: number
   logScale: LogScaleFunction
 }) => {
-  const contextValue = {
-    svgRef,
-    theme,
-    scale,
-    logScale,
-    height,
-    width
-  }
+  // Memoize theme and scale separately to catch actual value changes
+  const memoizedTheme = useMemo(() => theme, [JSON.stringify(theme)])
+
+  const memoizedScale = useMemo(() => scale, [JSON.stringify(scale)])
+
+  const contextValue = useMemo(
+    () => ({
+      svgRef,
+      theme: memoizedTheme,
+      scale: memoizedScale,
+      logScale,
+      height,
+      width
+    }),
+    [svgRef, memoizedTheme, memoizedScale, logScale, height, width]
+  )
 
   return (
     <GraphContext.Provider value={contextValue}>

src/components/FrequencyResponseGraph/GraphProvider.tsx

@@ -16,7 +16,6 @@ import { Meta } from '@storybook/blocks'
 ## Next
 
 - Add stepped / discrete frequency curve variant
-- Add SVG animations and transitions to filter components
 - Add more biquad filter functions, refine unit-tests
 - Make context/provider API more generalised and open it for third-party use