Fix linter and types issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto26/animatable-component",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "description": "A WebComponent to use Web Animations API in a declarative way! 💅",
   "author": "Juan David Nicholls Cardona",

src/animations/attention-seekers.ts

@@ -1,9 +1,9 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const BOUNCE_DEFAULT = {
   transform: 'translate(0)',
   easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'
-}
+};
 
 const BOUNCE: Keyframe[] = [
   { offset: 0, ...BOUNCE_DEFAULT },
@@ -138,4 +138,4 @@ export default {
   [ANIMATIONS.TADA]:   TADA,
   [ANIMATIONS.WOBBLE]: WOBBLE,
   [ANIMATIONS.HEART_BEAT]: HEART_BEAT
-}
+};

src/animations/bouncing-entrances.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const BOUNCE_IN: Keyframe[] = [
   { offset: 0, opacity: 0, transform: 'scale(0.3)', easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' },
@@ -47,4 +47,4 @@ export default {
   [ANIMATIONS.BOUNCE_IN_DOWN]: BOUNCE_IN_DOWN,
   [ANIMATIONS.BOUNCE_IN_RIGHT]: BOUNCE_IN_RIGHT,
   [ANIMATIONS.BOUNCE_IN_LEFT]: BOUNCE_IN_LEFT
-}
+};

src/animations/bouncing-exits.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const BOUNCE_OUT: Keyframe[] = [
   { offset: 0, opacity: 1, transform: 'scale(1)' },
@@ -50,4 +50,4 @@ export default {
   [ANIMATIONS.BOUNCE_OUT_DOWN]: BOUNCE_OUT_DOWN,
   [ANIMATIONS.BOUNCE_OUT_RIGHT]: BOUNCE_OUT_RIGHT,
   [ANIMATIONS.BOUNCE_OUT_LEFT]: BOUNCE_OUT_LEFT
-}
+};

src/animations/fading-entrances.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const FADE_IN: Keyframe[] = [
   { offset: 0, opacity: 0 },
@@ -55,4 +55,4 @@ export default {
   [ANIMATIONS.FADE_IN_RIGHT_BIG]: FADE_IN_RIGHT_BIG,
   [ANIMATIONS.FADE_IN_LEFT]: FADE_IN_LEFT,
   [ANIMATIONS.FADE_IN_LEFT_BIG]: FADE_IN_LEFT_BIG
-}
+};

src/animations/fading-exits.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const FADE_OUT: Keyframe[] = [
   { offset: 0, opacity: 1 },
@@ -55,4 +55,4 @@ export default {
   [ANIMATIONS.FADE_OUT_RIGHT_BIG]: FADE_OUT_RIGHT_BIG,
   [ANIMATIONS.FADE_OUT_LEFT]: FADE_OUT_LEFT,
   [ANIMATIONS.FADE_OUT_LEFT_BIG]: FADE_OUT_LEFT_BIG
-}
+};

src/animations/flippers.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const FLIP: Keyframe[] = [
   { offset: 0, backfaceVisibility: 'visible', easing: 'ease-out', transform: 'perspective(400px) scale(1) translateZ(0) rotateY(-360deg)' },
@@ -42,4 +42,4 @@ export default {
   [ANIMATIONS.FLIP_IN_Y]: FLIP_IN_Y,
   [ANIMATIONS.FLIP_OUT_X]: FLIP_OUT_X,
   [ANIMATIONS.FLIP_OUT_Y]: FLIP_OUT_Y
-}
+};

src/animations/index.ts

@@ -0,0 +1,38 @@
+import { ANIMATIONS, AnimationsType } from './common';
+import ATTENTION_SEEKERS from './attention-seekers';
+import BOUNCING_ENTRANCES from './bouncing-entrances';
+import BOUNCING_EXITS from './bouncing-exits';
+import FADING_ENTRANCES from './fading-entrances';
+import FADING_EXITS from './fading-exits';
+import FLIPPERS from './flippers';
+import LIGHTSPEED from './lightspeed';
+import ROTATING_ENTRANCES from './rotating-entrances';
+import ROTATING_EXITS from './rotating-exits';
+import SLIDING_ENTRANCES from './sliding-entrances';
+import SLIDING_EXITS from './sliding-exits';
+import ZOOM_ENTRANCES from './zoom-entrances';
+import ZOOM_EXITS from './zoom-exits';
+import SPECIALS from './specials';
+
+const DEFAULT_ANIMATION = {
+  [ANIMATIONS.NONE]: [] as Keyframe[]
+};
+export const ANIMATION_KEY_ERROR = 'Animation not supported';
+export { ANIMATIONS, AnimationsType };
+export default {
+  ...DEFAULT_ANIMATION,
+  ...ATTENTION_SEEKERS,
+  ...BOUNCING_ENTRANCES,
+  ...BOUNCING_EXITS,
+  ...FADING_ENTRANCES,
+  ...FADING_EXITS,
+  ...FLIPPERS,
+  ...LIGHTSPEED,
+  ...ROTATING_ENTRANCES,
+  ...ROTATING_EXITS,
+  ...SLIDING_ENTRANCES,
+  ...SLIDING_EXITS,
+  ...ZOOM_ENTRANCES,
+  ...ZOOM_EXITS,
+  ...SPECIALS
+} as const;

src/animations/lightspeed.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const LIGHT_SPEED_IN: Keyframe[] = [
   { offset: 0, easing: 'ease-out', opacity: 0, transform: 'translateX(200px) skewX(-30deg)' },
@@ -15,4 +15,4 @@ const LIGHT_SPEED_OUT: Keyframe[] = [
 export default {
   [ANIMATIONS.LIGHT_SPEED_IN]: LIGHT_SPEED_IN,
   [ANIMATIONS.LIGHT_SPEED_OUT]: LIGHT_SPEED_OUT
-}
+};

src/animations/rotating-entrances.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const ROTATE_IN: Keyframe[] = [
   { offset: 0, opacity: 0, transform: 'rotateZ(180deg)', transformOrigin: 'center' },
@@ -37,4 +37,4 @@ export default {
   [ANIMATIONS.ROTATE_IN_DOWN_RIGHT]: ROTATE_IN_DOWN_RIGHT,
   [ANIMATIONS.ROTATE_IN_UP_LEFT]: ROTATE_IN_UP_LEFT,
   [ANIMATIONS.ROTATE_IN_UP_RIGHT]: ROTATE_IN_UP_RIGHT
-}
+};

src/animations/rotating-exits.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const ROTATE_OUT: Keyframe[] = [
   { offset: 0, opacity: 1, transform: 'rotateZ(0deg)', transformOrigin: 'center' },
@@ -37,4 +37,4 @@ export default {
   [ANIMATIONS.ROTATE_OUT_DOWN_RIGHT]: ROTATE_OUT_DOWN_RIGHT,
   [ANIMATIONS.ROTATE_OUT_UP_LEFT]: ROTATE_OUT_UP_LEFT,
   [ANIMATIONS.ROTATE_OUT_UP_RIGHT]: ROTATE_OUT_UP_RIGHT
-}
+};

src/animations/sliding-entrances.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const SLIDE_IN_UP: Keyframe[] = [
   { offset: 0, transform: 'translateY(100%)', visibility: 'hidden' },
@@ -25,4 +25,4 @@ export default {
   [ANIMATIONS.SLIDE_IN_DOWN]: SLIDE_IN_DOWN,
   [ANIMATIONS.SLIDE_IN_LEFT]: SLIDE_IN_LEFT,
   [ANIMATIONS.SLIDE_IN_RIGHT]: SLIDE_IN_RIGHT
-}
+};

src/animations/sliding-exits.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const SLIDE_OUT_UP: Keyframe[] = [
   { offset: 0, transform: 'translateY(0)', visibility: 'visible' },
@@ -25,4 +25,4 @@ export default {
   [ANIMATIONS.SLIDE_OUT_DOWN]: SLIDE_OUT_DOWN,
   [ANIMATIONS.SLIDE_OUT_LEFT]: SLIDE_OUT_LEFT,
   [ANIMATIONS.SLIDE_OUT_RIGHT]: SLIDE_OUT_RIGHT
-}
+};

src/animations/specials.ts

@@ -1,10 +1,10 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const HINGE_DEFAULT = {
   opacity: 1,
   transformOrigin: 'top left',
   easing: 'ease-in-out'
-}
+};
 
 const HINGE: Keyframe[] = [
   { offset: 0, transform: 'rotate(0)', ...HINGE_DEFAULT },
@@ -37,4 +37,4 @@ export default {
   [ANIMATIONS.JACK_IN_THE_BOX]: JACK_IN_THE_BOX,
   [ANIMATIONS.ROLL_IN]: ROLL_IN,
   [ANIMATIONS.ROLL_OUT]: ROLL_OUT
-}
+};

src/animations/zoom-entrances.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const ZOOM_IN: Keyframe[] = [
   { offset: 0, opacity: 0, transform: 'scale(1)' },
@@ -36,4 +36,4 @@ export default {
   [ANIMATIONS.ZOOM_IN_DOWN]: ZOOM_IN_DOWN,
   [ANIMATIONS.ZOOM_IN_LEFT]: ZOOM_IN_LEFT,
   [ANIMATIONS.ZOOM_IN_RIGHT]: ZOOM_IN_RIGHT
-}
+};

src/animations/zoom-exits.ts

@@ -1,4 +1,4 @@
-import { ANIMATIONS } from './common'
+import { ANIMATIONS } from './common';
 
 const ZOOM_OUT: Keyframe[] = [
   { offset: 0, opacity: 1, transform: 'scale(1)' },
@@ -36,4 +36,4 @@ export default {
   [ANIMATIONS.ZOOM_OUT_DOWN]: ZOOM_OUT_DOWN,
   [ANIMATIONS.ZOOM_OUT_LEFT]: ZOOM_OUT_LEFT,
   [ANIMATIONS.ZOOM_OUT_RIGHT]: ZOOM_OUT_RIGHT
-}
+};

src/components.d.ts

@@ -9,7 +9,7 @@
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 import {
   AnimationsType,
-} from './animations/animations';
+} from './animations';
 
 export namespace Components {
   interface AnimatableComponent {

src/components/animatable-component/animatable-component.tsx

@@ -13,7 +13,7 @@ import {
 import Animations, {
   AnimationsType,
   ANIMATION_KEY_ERROR
-} from '../../animations/animations'
+} from '../../animations'
 
 import { EasingType, EASING_FUNCTIONS } from '../../easing/easing'
 
@@ -47,6 +47,7 @@ export class AnimatableComponent implements ComponentInterface {
   @Prop() animation?: AnimationsType
   @Watch('animation')
   animationDidChangeHandler(animation: AnimationsType) {
+    debugger;
     const keyFrames = Animations[animation];
     if (keyFrames) {
       this.keyFrames = keyFrames;

src/easing/easing.ts

@@ -60,6 +60,6 @@ export const EASING_FUNCTIONS = {
   [EASING.EASE_IN_BACK]: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
   [EASING.EASE_OUT_BACK]: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
   [EASING.EASE_IN_OUT_BACK]: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
-}
+};
 
 export type EasingType = typeof EASING[keyof typeof EASING];

src/index.ts

@@ -1,4 +1,4 @@
 export * from './components';
 export * from './easing/easing';
-export { ANIMATIONS } from './animations/animations'
+export { ANIMATIONS } from './animations'
 export { createAnimatableComponent } from './utils/utils';

src/utils/utils.tsx

@@ -1,6 +1,6 @@
 import { h, FunctionalComponent, ComponentInterface } from '@stencil/core';
 import { JSXBase, HTMLStencilElement } from '@stencil/core/internal';
-import { JSX } from '../components'
+import { JSX } from '../components';
 
 export function createAnimatableComponent<Props> (
   WrappedComponent: FunctionalComponent
@@ -66,5 +66,5 @@ export function createAnimatableComponent<Props> (
     >
       <WrappedComponent {...rest} />
     </animatable-component>
-  }
+  };
 };