react-useanimations 2.0.9-RC → 2.0.9-RC1

package/src/lib/plusToX/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import plusToX from './plusToX.json';
-
-export default { animationData: plusToX, animationKey: 'plusToX' } as Animation;

package/src/lib/pocket/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import pocket from './pocket.json';
-
-export default { animationData: pocket, animationKey: 'pocket' } as Animation;

package/src/lib/radioButton/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import radioButton from './radioButton.json';
-
-export default { animationData: radioButton, animationKey: 'radioButton' } as Animation;

package/src/lib/scrollDown/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import scrollDown from './scrollDown.json';
-
-export default { animationData: scrollDown, animationKey: 'scrollDown' } as Animation;

package/src/lib/searchToX/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import searchToX from './searchToX.json';
-
-export default { animationData: searchToX, animationKey: 'searchToX' } as Animation;

package/src/lib/settings/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import settings from './settings.json';
-
-export default { animationData: settings, animationKey: 'settings' } as Animation;

package/src/lib/settings2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import settings2 from './settings2.json';
-
-export default { animationData: settings2, animationKey: 'settings2' } as Animation;

package/src/lib/share/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import share from './share.json';
-
-export default { animationData: share, animationKey: 'share' } as Animation;

package/src/lib/skipBack/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import skipBack from './skipBack.json';
-
-export default { animationData: skipBack, animationKey: 'skipBack' } as Animation;

package/src/lib/skipForward/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import skipForward from './skipForward.json';
-
-export default { animationData: skipForward, animationKey: 'skipForward' } as Animation;

package/src/lib/star/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import star from './star.json';
-
-export default { animationData: star, animationKey: 'star' } as Animation;

package/src/lib/thumbUp/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import thumbUp from './thumbUp.json';
-
-export default { animationData: thumbUp, animationKey: 'thumbUp' } as Animation;

package/src/lib/toggle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import toggle from './toggle.json';
-
-export default { animationData: toggle, animationKey: 'toggle' } as Animation;

package/src/lib/trash/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import trash from './trash.json';
-
-export default { animationData: trash, animationKey: 'trash' } as Animation;

package/src/lib/trash2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import trash2 from './trash2.json';
-
-export default { animationData: trash2, animationKey: 'trash2' } as Animation;

package/src/lib/twitter/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import twitter from './twitter.json';
-
-export default { animationData: twitter, animationKey: 'twitter' } as Animation;

package/src/lib/userMinus/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import userMinus from './userMinus.json';
-
-export default { animationData: userMinus, animationKey: 'userMinus' } as Animation;

package/src/lib/userPlus/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import userPlus from './userPlus.json';
-
-export default { animationData: userPlus, animationKey: 'userPlus' } as Animation;

package/src/lib/userX/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import userX from './userX.json';
-
-export default { animationData: userX, animationKey: 'userX' } as Animation;

package/src/lib/video/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import video from './video.json';
-
-export default { animationData: video, animationKey: 'video' } as Animation;

package/src/lib/video2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import video2 from './video2.json';
-
-export default { animationData: video2, animationKey: 'video2' } as Animation;

package/src/lib/visibility/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import visibility from './visibility.json';
-
-export default { animationData: visibility, animationKey: 'visibility' } as Animation;

package/src/lib/visibility2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import visibility2 from './visibility2.json';
-
-export default { animationData: visibility2, animationKey: 'visibility2' } as Animation;

package/src/lib/volume/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import volume from './volume.json';
-
-export default { animationData: volume, animationKey: 'volume' } as Animation;

package/src/lib/youtube/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import youtube from './youtube.json';
-
-export default { animationData: youtube, animationKey: 'youtube' } as Animation;

package/src/lib/youtube2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import youtube2 from './youtube2.json';
-
-export default { animationData: youtube2, animationKey: 'youtube2' } as Animation;

package/src/lib/zoomIn/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import zoomIn from './zoomIn.json';
-
-export default { animationData: zoomIn, animationKey: 'zoomIn' } as Animation;

package/src/lib/zoomOut/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import zoomOut from './zoomOut.json';
-
-export default { animationData: zoomOut, animationKey: 'zoomOut' } as Animation;

package/src/stories/controlled.stories.tsx

@@ -1,257 +0,0 @@
-import React, { useState } from 'react';
-import { withInfo } from '@storybook/addon-info';
-import radioButton from '../lib/radioButton';
-import star from '../lib/star';
-import UseAnimation from '..';
-
-// ANIMATIONS WITH CLICK PLAY & BACKWARDS WILL HAVE REVERSE FUNCITONALITY FOR STATE MNG
-export default {
-  title: 'Controlled State',
-  component: UseAnimation,
-  decorators: [withInfo],
-};
-
-export const RadioButton = () => {
-  const [checked, setChecked] = useState(true);
-
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-      <div style={{ padding: '20px' }}>
-        <span>radioButton</span>
-        <UseAnimation
-          reverse={checked}
-          onClick={() => {
-            setChecked(!checked);
-          }}
-          size={40}
-          wrapperStyle={{ marginTop: '5px' }}
-          animation={radioButton}
-        />
-      </div>
-    </div>
-  );
-};
-
-RadioButton.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const RadioButton = () => {
-        const [checked, setChecked] = useState(true);
-      
-        return (
-          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-            <div style={{ padding: '20px' }}>
-              <span>radioButton</span>
-              <UseAnimation
-                reverse={checked}
-                onClick={() => {
-                  setChecked(!checked);
-                }}
-                size={40}
-                wrapperStyle={{ marginTop: '5px' }}
-                animation={radioButton}
-              />
-            </div>
-          </div>
-        );
-      };
-      ~~~
-    `,
-    },
-  },
-};
-
-export const ChangingStrokeColor = () => {
-  const [strokeColor, setStrokeColor] = useState('black');
-
-  const handleButtonOnClick = () =>
-    strokeColor === 'black' ? setStrokeColor('red') : setStrokeColor('black');
-
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
-      <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
-        Change Stroke Color
-      </button>
-      <div style={{ padding: '20px' }}>
-        <span>star</span>
-        <UseAnimation
-          pathCss="fill: pink"
-          strokeColor={strokeColor}
-          size={40}
-          wrapperStyle={{ marginTop: '5px' }}
-          animation={star}
-        />
-      </div>
-    </div>
-  );
-};
-
-ChangingStrokeColor.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const ChangingStrokeColor = () => {
-        const [strokeColor, setStrokeColor] = useState('black');
-      
-        const handleButtonOnClick = () =>
-          strokeColor === 'black' ? setStrokeColor('red') : setStrokeColor('black');
-      
-        return (
-          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
-            <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
-              Change Stroke Color
-            </button>
-            <div style={{ padding: '20px' }}>
-              <span>star</span>
-              <UseAnimation
-                strokeColor={strokeColor}
-                size={40}
-                wrapperStyle={{ marginTop: '5px' }}
-                animation={star}
-              />
-            </div>
-          </div>
-        );
-      };
-      ~~~
-    `,
-    },
-  },
-};
-
-export const ChangingFillColor = () => {
-  const [fillColor, setFillColor] = useState('black');
-
-  const handleButtonOnClick = () =>
-    fillColor === 'black' ? setFillColor('red') : setFillColor('black');
-
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
-      <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
-        Change Fill Color
-      </button>
-      <div style={{ padding: '20px' }}>
-        <span>star</span>
-        <UseAnimation
-          fillColor={fillColor}
-          size={40}
-          wrapperStyle={{ marginTop: '5px' }}
-          animation={star}
-        />
-      </div>
-    </div>
-  );
-};
-
-ChangingFillColor.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const ChangingFillColor = () => {
-        const [fillColor, setFillColor] = useState('black');
-      
-        const handleButtonOnClick = () =>
-          fillColor === 'black' ? setFillColor('red') : setFillColor('black');
-      
-        return (
-          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
-            <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
-              Change Fill Color
-            </button>
-            <div style={{ padding: '20px' }}>
-              <span>star</span>
-              <UseAnimation
-                fillColor={fillColor}
-                size={40}
-                wrapperStyle={{ marginTop: '5px' }}
-                animation={star}
-              />
-            </div>
-          </div>
-        );
-      };
-      ~~~
-    `,
-    },
-  },
-};
-
-export const ChangingPathCss = () => {
-  const defaultCssPath = 'fill: red; stroke: blue;';
-  const [pathCss, setPathCss] = useState(defaultCssPath);
-
-  const handleButtonOnClick = () =>
-    pathCss === defaultCssPath
-      ? setPathCss('fill: blue; stroke: red;')
-      : setPathCss(defaultCssPath);
-
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
-          Change Path Css
-        </button>
-        <span style={{ marginLeft: '20px' }}>
-          After changing, click the star back & forth to see the fill & stroke change taking an
-          effect
-        </span>
-      </div>
-      <div style={{ padding: '20px' }}>
-        <span>star</span>
-        <UseAnimation
-          pathCss={pathCss}
-          size={40}
-          wrapperStyle={{ marginTop: '5px' }}
-          animation={star}
-        />
-      </div>
-    </div>
-  );
-};
-
-ChangingPathCss.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const ChangingPathCss = () => {
-        const defaultCssPath = 'fill: red; stroke: blue;';
-        const [pathCss, setPathCss] = useState(defaultCssPath);
-      
-        const handleButtonOnClick = () =>
-          pathCss === defaultCssPath
-            ? setPathCss('fill: blue; stroke: red;')
-            : setPathCss(defaultCssPath);
-      
-        return (
-          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <button type="button" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>
-                Change Path Css
-              </button>
-              <span style={{ marginLeft: '20px' }}>
-                After changing, click the star back & forth to see the fill & stroke change taking an
-                effect
-              </span>
-            </div>
-            <div style={{ padding: '20px' }}>
-              <span>star</span>
-              <UseAnimation
-                pathCss={pathCss}
-                size={40}
-                wrapperStyle={{ marginTop: '5px' }}
-                animation={star}
-              />
-            </div>
-          </div>
-        );
-      };
-      ~~~
-    `,
-    },
-  },
-};