react-useanimations 2.0.9 → 3.0.0-beta.1

package/src/stories/variants.stories.tsx

@@ -1,237 +0,0 @@
-import React from 'react';
-import { withInfo } from '@storybook/addon-info';
-import activity from '../lib/activity';
-import youtube from '../lib/youtube';
-import star from '../lib/star';
-import heart from '../lib/heart';
-import UseAnimation from '..';
-
-export default {
-  title: 'Variants',
-  component: UseAnimation,
-  decorators: [withInfo],
-};
-
-export const Stroke = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-    <div style={{ padding: '20px' }}>
-      <span>activity</span>
-      <UseAnimation
-        strokeColor="green"
-        size={40}
-        wrapperStyle={{ marginTop: '5px' }}
-        animation={activity}
-      />
-    </div>
-    <div style={{ padding: '20px' }}>
-      <span>activity</span>
-      <UseAnimation
-        strokeColor="red"
-        size={40}
-        wrapperStyle={{ marginTop: '5px' }}
-        animation={youtube}
-      />
-    </div>
-  </div>
-);
-
-Stroke.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const Stroke = () => (
-        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-          <div style={{ padding: '20px' }}>
-            <span>activity</span>
-            <UseAnimation
-              strokeColor="green"
-              size={40}
-              wrapperStyle={{ marginTop: '5px' }}
-              animation={activity}
-            />
-          </div>
-          <div style={{ padding: '20px' }}>
-            <span>activity</span>
-            <UseAnimation
-              strokeColor="red"
-              size={40}
-              wrapperStyle={{ marginTop: '5px' }}
-              animation={youtube}
-            />
-          </div>
-        </div>
-      );
-      ~~~
-    `,
-    },
-  },
-};
-
-export const Fill = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-    <div style={{ padding: '20px' }}>
-      <span>star</span>
-      <UseAnimation
-        fillColor="green"
-        size={40}
-        wrapperStyle={{ marginTop: '5px' }}
-        animation={star}
-      />
-    </div>
-    <div style={{ padding: '20px' }}>
-      <span>heart</span>
-      <UseAnimation
-        fillColor="red"
-        size={40}
-        wrapperStyle={{ marginTop: '5px' }}
-        animation={heart}
-      />
-    </div>
-  </div>
-);
-
-Fill.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const Fill = () => (
-        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-          <div style={{ padding: '20px' }}>
-            <span>star</span>
-            <UseAnimation
-              fillColor="green"
-              size={40}
-              wrapperStyle={{ marginTop: '5px' }}
-              animation={star}
-            />
-          </div>
-          <div style={{ padding: '20px' }}>
-            <span>heart</span>
-            <UseAnimation
-              fillColor="red"
-              size={40}
-              wrapperStyle={{ marginTop: '5px' }}
-              animation={heart}
-            />
-          </div>
-        </div>
-      );
-      ~~~
-    `,
-    },
-  },
-};
-
-export const CustomCSS = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-    <div style={{ padding: '20px' }}>
-      <span>activity</span>
-      <UseAnimation
-        size={40}
-        pathCss="stroke: purple; stroke-width: 2%;"
-        wrapperStyle={{ marginTop: '5px' }}
-        animation={activity}
-      />
-    </div>
-  </div>
-);
-
-CustomCSS.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const CustomCSS = () => (
-        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-          <div style={{ padding: '20px' }}>
-            <span>activity</span>
-            <UseAnimation
-              size={40}
-              pathCss="stroke: purple; stroke-width: 2%;"
-              wrapperStyle={{ marginTop: '5px' }}
-              animation={activity}
-            />
-          </div>
-        </div>
-      );
-      ~~~
-    `,
-    },
-  },
-};
-
-export const Size = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-    <div style={{ padding: '20px' }}>
-      <span>activity</span>
-      <UseAnimation size={60} wrapperStyle={{ marginTop: '5px' }} animation={activity} />
-    </div>
-  </div>
-);
-
-Size.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const Size = () => (
-        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-          <div style={{ padding: '20px' }}>
-            <span>activity</span>
-            <UseAnimation size={60} wrapperStyle={{ marginTop: '5px' }} animation={activity} />
-          </div>
-        </div>
-      );
-      ~~~
-    `,
-    },
-  },
-};
-
-export const WrapperElement = () => {
-  return (
-    <UseAnimation
-      animation={heart}
-      size={60}
-      onClick={() => {
-        // eslint-disable-next-line
-        console.log('additional onClick cb is working');
-      }}
-      render={(eventProps, animationProps) => (
-        <button style={{ padding: '20px' }} type="button" {...eventProps}>
-          <div {...animationProps} />
-        </button>
-      )}
-    />
-  );
-};
-
-WrapperElement.story = {
-  parameters: {
-    info: {
-      text: `
-      ~~~js
-      export const WrapperElement = () => {
-        return (
-          <UseAnimation
-            animation={heart}
-            size={60}
-            onClick={() => {
-              // eslint-disable-next-line
-              console.log('additional onClick cb is working');
-            }}
-            render={(eventProps, animationProps) => (
-              <button style={{ padding: '20px' }} type="button" {...eventProps}>
-                <div {...animationProps} />
-              </button>
-            )}
-          />
-        );
-      };
-      ~~~
-    `,
-    },
-  },
-};

package/src/typings.d.ts

@@ -1,6 +0,0 @@
-declare module '*.json' {
-  const value: any;
-  export default value;
-}
-
-declare module '@storybook/addon-info';

package/src/utils/constants.ts

@@ -1,93 +0,0 @@
-export type AnimationEffect =
-  | 'CLICK_PLAY_AND_BACKWARDS'
-  | 'HOVER_PLAY_AND_STOP'
-  | 'HOVER_PLAY_AND_BACKWARDS'
-  | 'CLICK_PLAY'
-  | 'LOOP_PLAY'
-  | 'CLICK_PLAY_AND_SEGMENTS';
-
-export type Animation = {
-  animationData: any;
-  animationKey: AnimationKey;
-};
-
-export type AnimationKey =
-  | 'activity'
-  | 'airplay'
-  | 'alertCircle'
-  | 'alertOctagon'
-  | 'alertTriangle'
-  | 'archive'
-  | 'arrowDown'
-  | 'arrowDownCircle'
-  | 'arrowLeftCircle'
-  | 'arrowRightCircle'
-  | 'arrowUp'
-  | 'arrowUpCircle'
-  | 'bookmark'
-  | 'behance'
-  | 'calendar'
-  | 'checkBox'
-  | 'checkmark'
-  | 'codepen'
-  | 'copy'
-  | 'download'
-  | 'dribbble'
-  | 'edit'
-  | 'error'
-  | 'explore'
-  | 'facebook'
-  | 'folder'
-  | 'github'
-  | 'heart'
-  | 'help'
-  | 'home'
-  | 'infinity'
-  | 'info'
-  | 'instagram'
-  | 'linkedin'
-  | 'loading'
-  | 'loading2'
-  | 'loading3'
-  | 'lock'
-  | 'mail'
-  | 'maximizeMinimize'
-  | 'maximizeMinimize2'
-  | 'menu'
-  | 'menu2'
-  | 'menu3'
-  | 'menu4'
-  | 'microphone'
-  | 'microphone2'
-  | 'notification'
-  | 'notification2'
-  | 'playPause'
-  | 'playPauseCircle'
-  | 'plusToX'
-  | 'pocket'
-  | 'radioButton'
-  | 'scrollDown'
-  | 'searchToX'
-  | 'settings'
-  | 'settings2'
-  | 'share'
-  | 'skipBack'
-  | 'skipForward'
-  | 'star'
-  | 'thumbUp'
-  | 'toggle'
-  | 'trash'
-  | 'trash2'
-  | 'twitter'
-  | 'userMinus'
-  | 'userPlus'
-  | 'userX'
-  | 'video'
-  | 'video2'
-  | 'visibility'
-  | 'visibility2'
-  | 'volume'
-  | 'youtube'
-  | 'youtube2'
-  | 'zoomIn'
-  | 'zoomOut';

package/src/utils/getEffect.ts

@@ -1,91 +0,0 @@
-import type { AnimationKey, AnimationEffect } from '.';
-
-type Animations = {
-  [Key in AnimationKey]: AnimationEffect;
-};
-
-const animations: Animations = {
-  activity: 'LOOP_PLAY',
-  airplay: 'LOOP_PLAY',
-  alertCircle: 'LOOP_PLAY',
-  alertOctagon: 'LOOP_PLAY',
-  alertTriangle: 'LOOP_PLAY',
-  archive: 'HOVER_PLAY_AND_BACKWARDS',
-  arrowDown: 'LOOP_PLAY',
-  arrowDownCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  arrowLeftCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  arrowRightCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  arrowUp: 'LOOP_PLAY',
-  arrowUpCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  bookmark: 'CLICK_PLAY_AND_BACKWARDS',
-  behance: 'HOVER_PLAY_AND_STOP',
-  calendar: 'HOVER_PLAY_AND_STOP',
-  checkBox: 'CLICK_PLAY_AND_BACKWARDS',
-  checkmark: 'LOOP_PLAY',
-  codepen: 'HOVER_PLAY_AND_STOP',
-  copy: 'CLICK_PLAY',
-  download: 'CLICK_PLAY',
-  dribbble: 'HOVER_PLAY_AND_BACKWARDS',
-  edit: 'CLICK_PLAY',
-  error: 'LOOP_PLAY',
-  explore: 'HOVER_PLAY_AND_BACKWARDS',
-  facebook: 'HOVER_PLAY_AND_STOP',
-  folder: 'HOVER_PLAY_AND_STOP',
-  github: 'HOVER_PLAY_AND_STOP',
-  help: 'LOOP_PLAY',
-  heart: 'CLICK_PLAY_AND_BACKWARDS',
-  home: 'HOVER_PLAY_AND_STOP',
-  infinity: 'LOOP_PLAY',
-  info: 'HOVER_PLAY_AND_BACKWARDS',
-  instagram: 'HOVER_PLAY_AND_STOP',
-  linkedin: 'HOVER_PLAY_AND_STOP',
-  loading: 'LOOP_PLAY',
-  loading2: 'LOOP_PLAY',
-  loading3: 'LOOP_PLAY',
-  lock: 'CLICK_PLAY_AND_BACKWARDS',
-  mail: 'CLICK_PLAY',
-  maximizeMinimize: 'CLICK_PLAY_AND_BACKWARDS',
-  maximizeMinimize2: 'CLICK_PLAY_AND_BACKWARDS',
-  menu: 'CLICK_PLAY_AND_BACKWARDS',
-  menu2: 'CLICK_PLAY_AND_BACKWARDS',
-  menu3: 'CLICK_PLAY_AND_BACKWARDS',
-  menu4: 'CLICK_PLAY_AND_BACKWARDS',
-  microphone: 'CLICK_PLAY_AND_BACKWARDS',
-  microphone2: 'CLICK_PLAY_AND_BACKWARDS',
-  notification: 'CLICK_PLAY_AND_BACKWARDS',
-  notification2: 'CLICK_PLAY_AND_BACKWARDS',
-  playPause: 'CLICK_PLAY_AND_BACKWARDS',
-  playPauseCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  plusToX: 'CLICK_PLAY_AND_BACKWARDS',
-  pocket: 'HOVER_PLAY_AND_STOP',
-  radioButton: 'CLICK_PLAY_AND_BACKWARDS',
-  scrollDown: 'LOOP_PLAY',
-  searchToX: 'CLICK_PLAY_AND_BACKWARDS',
-  settings: 'HOVER_PLAY_AND_BACKWARDS',
-  settings2: 'CLICK_PLAY_AND_BACKWARDS',
-  skipForward: 'CLICK_PLAY_AND_SEGMENTS',
-  skipBack: 'CLICK_PLAY_AND_SEGMENTS',
-  share: 'HOVER_PLAY_AND_BACKWARDS',
-  star: 'CLICK_PLAY_AND_BACKWARDS',
-  toggle: 'CLICK_PLAY_AND_BACKWARDS',
-  trash: 'HOVER_PLAY_AND_BACKWARDS',
-  trash2: 'HOVER_PLAY_AND_BACKWARDS',
-  thumbUp: 'CLICK_PLAY_AND_BACKWARDS',
-  twitter: 'HOVER_PLAY_AND_STOP',
-  userMinus: 'HOVER_PLAY_AND_STOP',
-  userPlus: 'HOVER_PLAY_AND_STOP',
-  userX: 'HOVER_PLAY_AND_STOP',
-  video: 'CLICK_PLAY_AND_BACKWARDS',
-  video2: 'CLICK_PLAY_AND_BACKWARDS',
-  visibility: 'CLICK_PLAY_AND_BACKWARDS',
-  visibility2: 'CLICK_PLAY_AND_BACKWARDS',
-  volume: 'CLICK_PLAY_AND_BACKWARDS',
-  youtube: 'HOVER_PLAY_AND_STOP',
-  youtube2: 'HOVER_PLAY_AND_STOP',
-  zoomIn: 'LOOP_PLAY',
-  zoomOut: 'LOOP_PLAY',
-};
-
-const getEffect = (animationKey: AnimationKey) => animations[animationKey] || '';
-
-export default getEffect;

package/src/utils/getEvents.ts

@@ -1,81 +0,0 @@
-import type { AnimationEffect } from './constants';
-
-const getClickAndPlaySegmentsEvents = (animation: any) => ({
-  onClick: () => animation.playSegments([0, 60], true),
-});
-
-const getClickPlayEvents = (animation: any) => ({
-  onClick: () => {
-    animation.stop();
-    animation.play();
-  },
-});
-
-const getHoverPlayAndStop = (animation: any) => ({
-  onMouseEnter: () => animation.play(),
-  onMouseLeave: () => animation.stop(),
-});
-
-const getHoverPlayBackwardsEvents = (animation: any) => ({
-  onMouseEnter: () => {
-    animation.setDirection(1);
-    animation.play();
-  },
-  onMouseLeave: () => {
-    animation.setDirection(-1);
-    animation.play();
-  },
-});
-
-const getClickAndPlayBackwardsEvents = (animation: any, reverse: boolean) => {
-  let directionMenu = 1;
-
-  // EG CHECKBOX WHICH NEED TO BE CHECKED AS INITIAL STATE, LET'S PLAY THE ANIMATION ASAP AUTOMATICALLY
-  if (reverse) {
-    animation.setDirection(directionMenu);
-    animation.play();
-    directionMenu *= -1;
-  }
-
-  return {
-    onClick: () => {
-      animation.setDirection(directionMenu);
-      animation.play();
-      directionMenu *= -1;
-    },
-  };
-};
-
-const getEvents = ({
-  animation,
-  reverse,
-  animEffect,
-}: {
-  animation: any;
-  reverse: boolean;
-  animEffect: AnimationEffect;
-}) => {
-  if (animEffect === 'CLICK_PLAY_AND_SEGMENTS') {
-    return getClickAndPlaySegmentsEvents(animation);
-  }
-
-  if (animEffect === 'CLICK_PLAY') {
-    return getClickPlayEvents(animation);
-  }
-
-  if (animEffect === 'HOVER_PLAY_AND_STOP') {
-    return getHoverPlayAndStop(animation);
-  }
-
-  if (animEffect === 'HOVER_PLAY_AND_BACKWARDS') {
-    return getHoverPlayBackwardsEvents(animation);
-  }
-
-  if (animEffect === 'CLICK_PLAY_AND_BACKWARDS') {
-    return getClickAndPlayBackwardsEvents(animation, reverse);
-  }
-
-  return getClickPlayEvents(animation);
-};
-
-export default getEvents;

package/src/utils/index.ts

@@ -1,3 +0,0 @@
-export { default as getEffect } from './getEffect';
-export { default as getEvents } from './getEvents';
-export type { Animation, AnimationKey, AnimationEffect } from './constants';

package/tsconfig.json

@@ -1,67 +0,0 @@
-{
-  "compilerOptions": {
-    /* Basic Options */
-    // "incremental": true,                   /* Enable incremental compilation */
-    "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
-    "allowJs": true, /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    "declaration": true, /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "outDir": "./dist", /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "composite": true,                     /* Enable project compilation */
-    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    "noEmit": false, /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-    /* Strict Type-Checking Options */
-    "strict": true, /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-    /* Module Resolution Options */
-    "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
-    /* Source Map Options */
-    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-    /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-    /* Advanced Options */
-    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}