From 102ef8caa4e1c8ec22be745ee3c58b89b9ece171 Mon Sep 17 00:00:00 2001
From: mnik01 <maksimgrinberg01@gmail.com>
Date: Sat, 24 Feb 2024 15:01:25 +0500
Subject: [PATCH] wip

---
 src/stories/Button.tsx | 46 ++++++++++++++++++++++++++++++++++++++++--
 src/stories/button.css | 12 +++++++++++
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx
index 3062f21..5995d39 100644
--- a/src/stories/Button.tsx
+++ b/src/stories/Button.tsx
@@ -36,12 +36,54 @@ export const Button = ({
 }: ButtonProps) => {
   console.log()
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  
+  const hasRuleWithMedia = (sheet: CSSStyleSheet): boolean => {
+    const rules = Array.from(sheet?.cssRules);
+    // @ts-expect-error 
+    return rules.some(r => r?.media);
+  }
+  
+  const handleClick = () => {
+    const allSheets = Array.from(document.styleSheets);
+    const sheetsWithMedia = allSheets.filter(hasRuleWithMedia);
+    
+    // Extract media objects from each stylesheet with media rules
+    const medias: MediaList[] = sheetsWithMedia.flatMap(sheet => {
+      return Array.from(
+        sheet.cssRules,
+        // @ts-expect-error 
+    rule => rule.type === CSSRule.MEDIA_RULE ? rule.media : undefined
+  );
+}).filter(Boolean);
+
+
+    const toggleMotionMedia = () => {
+      const reduced: MediaList[] = [];
+      const safed: MediaList[] = [];
+
+      medias.forEach(m => {
+        if (m.mediaText === '(prefers-reduced-motion: no-preference)') {
+            safed.push(m);
+          } else if (m.mediaText === '(prefers-reduced-motion: reduce)') {
+          reduced.push(m);
+        }
+      });
+        
+      safed.forEach(m => {
+        m.mediaText = '(prefers-reduced-motion: reduce)'
+      });
+      reduced.forEach(m => {
+        m.mediaText = '(prefers-reduced-motion: no-preference)'
+      });
+    }
+    toggleMotionMedia();
+  }
   return (
     <button
+      onClick={handleClick}
       type="button"
-      className={['motion-safe:bg-red-600', 'motion-reduce:bg-blue-600', 'storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['motion-safe:animate-pulse', 'storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}
-      {...props}
     >
       {label}
     </button>
diff --git a/src/stories/button.css b/src/stories/button.css
index 266c1a1..5755a43 100644
--- a/src/stories/button.css
+++ b/src/stories/button.css
@@ -44,3 +44,15 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes pulse {
+    50% {
+      opacity: .5;
+    }
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe\:animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}
\ No newline at end of file