chore: renames components

BREAKING CHANGE: FLIPMove has been renamed to Move. Target has been renamed to FocalTarget.

Author: itsdouges

.eslintrc

@@ -18,6 +18,7 @@
     "no-multi-str": "off",
     "react/prefer-stateless-function": "never",
     "react/sort-comp": "off",
+    "react/destructuring-assignment": "never",
     "import/no-extraneous-dependencies": [
       "error",
       { "devDependencies": ["**/*test.tsx", "**/*stories.tsx"] }

README.md

@@ -57,7 +57,7 @@ A range of different scenarios for each animation component. [Looking for compon
 
 Transitioning the same element from one place to another.
 
-- [Move](https://yubaba.netlify.com/?selectedKind=yubaba%2FFLIPMove&selectedStory=Default&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fnotes%2Fpanel)
+- [Move](https://yubaba.netlify.com/?selectedKind=yubaba%2FMove&selectedStory=Default&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fnotes%2Fpanel)
 - [CrossFadeMove](https://yubaba.netlify.com/?selectedKind=yubaba%2FCrossFadeMove&selectedStory=Default&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fnotes%2Fpanel)
 - [ConcealMove](https://yubaba.netlify.com/?selectedKind=yubaba%2FConcealMove&selectedStory=TargetHeight&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fnotes%2Fpanel)
 - [RevealMove](https://yubaba.netlify.com/?selectedKind=yubaba%2FRevealMove&selectedStory=TargetHeight&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fnotes%2Fpanel)
@@ -155,19 +155,19 @@ import Baba from 'yubaba';
 </Baba>;
 ```
 
-#### Target
+#### FocalTarget
 
-[Docs](https://yubaba.netlify.com/typedoc/classes/target.html) | [Props](https://yubaba.netlify.com/typedoc/interfaces/targetprops.html)
+[Docs](https://yubaba.netlify.com/typedoc/classes/focaltarget.html) | [Props](https://yubaba.netlify.com/typedoc/interfaces/targetprops.html)
 
 Used to explicitly mark the focal element,
 only a handful of animations require this component to be used,
 for example [Reveal](#reveal)`.
 
 ```jsx
-import Baba, { Target } from 'yubaba';
+import Baba, { FocalTarget } from 'yubaba';
 
 <Baba name="target">
-  <Target>{({ ref }) => <div ref={ref} />}</Target>
+  <FocalTarget>{({ ref }) => <div ref={ref} />}</FocalTarget>
 </Baba>;
 ```
 
@@ -199,15 +199,15 @@ import { Collector } from 'yubaba';
 
 Transitioning visually similar elements from one place to another.
 
-#### Move ([example](https://yubaba.netlify.com/?selectedKind=yubaba%2FFLIPMove&selectedStory=Default&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fnotes%2Fpanel))
+#### Move ([example](https://yubaba.netlify.com/?selectedKind=yubaba%2FMove&selectedStory=Default&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fnotes%2Fpanel))
 
-[Docs](https://yubaba.netlify.com/typedoc/classes/flipmove.html) | [Props](https://yubaba.netlify.com/typedoc/interfaces/flipmoveprops.html)
+[Docs](https://yubaba.netlify.com/typedoc/classes/Move.html) | [Props](https://yubaba.netlify.com/typedoc/interfaces/Moveprops.html)
 
 Will transition the destination element **from** the origin element position.
 
 ```jsx
 // origin-element.js
-import Baba, { FLIPMove as Move } from 'yubaba';
+import Baba, { Move } from 'yubaba';
 
 <Baba name="move">
   <Move>{baba => <div {...baba} />}</Move>
@@ -277,13 +277,13 @@ import Baba, { Reveal, Target } from 'yubaba';
 </Baba>;
 
 // destination-element.js
-import Baba, { Target, Noop } from 'yubaba';
+import Baba, { FocalTarget, Noop } from 'yubaba';
 
 <Baba name="reveal">
   <Noop>
     {baba => (
       <div {...baba}>
-        <Target>{target => <div {...target} />}</Target>
+        <FocalTarget>{target => <div {...target} />}</FocalTarget>
       </div>
     )}
   </Noop>
@@ -307,13 +307,13 @@ import Baba, { RevealMove } from 'yubaba';
 </Baba>;
 
 // destination-element.js
-import Baba, { Target, Noop } from 'yubaba';
+import Baba, { FocalTarget, Noop } from 'yubaba';
 
 <Baba name="reveal-move">
   <Noop>
     {baba => (
       <div {...baba}>
-        <Target>{target => <div {...target} />}</Target>
+        <FocalTarget>{target => <div {...target} />}</FocalTarget>
       </div>
     )}
   </Noop>
@@ -326,17 +326,17 @@ import Baba, { Target, Noop } from 'yubaba';
 
 Useful for transitioning from a child to a parent,
 will shrink from the container to the focal element.
-Requires the use of the [Target](#target) component to specify the focal element.
+Requires the use of the [FocalTarget](#focaltarget) component to specify the focal element.
 
 ```jsx
 // origin-element.js
-import Baba, { Target, ConcealMove } from 'yubaba';
+import Baba, { FocalTarget, ConcealMove } from 'yubaba';
 
 <Baba name="conceal-move">
   <ConcealMove>
     {baba => (
       <div {...baba}>
-        <Target>{target => <div {...target} />}</Target>
+        <FocalTarget>{target => <div {...target} />}</FocalTarget>
       </div>
     )}
   </ConcealMove>

packages/yubaba-examples/src/parentChild/emailThreads/stories.tsx

@@ -3,7 +3,7 @@ import { findDOMNode } from 'react-dom';
 import { storiesOf } from '@storybook/react';
 import { withMarkdownNotes } from '@storybook/addon-notes';
 import { MemoryRouter, Route, Switch } from 'react-router-dom';
-import Baba, { RevealMove, ConcealMove, Target } from 'yubaba';
+import Baba, { RevealMove, ConcealMove, FocalTarget as Target } from 'yubaba';
 import * as Common from 'yubaba-common';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';

packages/yubaba-examples/src/parentChild/imageSearch/stories.tsx

@@ -5,7 +5,7 @@ import BackIcon from '@material-ui/icons/Close';
 import { IconButton } from '@material-ui/core';
 
 import * as Common from 'yubaba-common';
-import Baba, { FLIPMove, BabaManager } from 'yubaba';
+import Baba, { Move, BabaManager } from 'yubaba';
 import * as Styled from './styled';
 
 const Image: React.StatelessComponent<Styled.ImageProps> = ({
@@ -19,7 +19,7 @@ const Image: React.StatelessComponent<Styled.ImageProps> = ({
   <Styled.Root>
     <Styled.ImageContainer>
       <Baba name={title} in={inn}>
-        <FLIPMove>
+        <Move>
           {({ ref, style }) => (
             <Styled.Img
               src={src}
@@ -28,7 +28,7 @@ const Image: React.StatelessComponent<Styled.ImageProps> = ({
               style={{ ...style, opacity: selected ? 0 : (style.opacity as any) }}
             />
           )}
-        </FLIPMove>
+        </Move>
       </Baba>
 
       <Styled.ImageBack />
@@ -53,9 +53,9 @@ const ImagePage: React.StatelessComponent<Styled.ImageProps> = ({ src, title, on
         </IconButton>
 
         <Baba name={title}>
-          <FLIPMove>
+          <Move>
             {({ ref, style }) => <Styled.PageImage src={src} innerRef={ref} style={style} />}
-          </FLIPMove>
+          </Move>
         </Baba>
 
         <Styled.ContentContainer>

packages/yubaba-examples/src/parentChild/musicPlayer/Album.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import StarIcon from '@material-ui/icons/StarBorder';
-import Baba, { FLIPMove as Move, CircleExpand, Collector } from 'yubaba';
+import Baba, { Move as Move, CircleExpand, Collector } from 'yubaba';
 import { Album as AlbumData } from './data';
 import { IconButton } from '@material-ui/core';
 

packages/yubaba-examples/src/parentChild/musicPlayer/AlbumDetails.tsx

@@ -14,7 +14,7 @@ import MoreVert from '@material-ui/icons/MoreVert';
 import StarIcon from '@material-ui/icons/StarBorder';
 import { lighten, readableColor } from 'polished';
 import { Album as AlbumData } from './data';
-import Baba, { FLIPMove as Move, CircleShrink, Wait, Collector } from 'yubaba';
+import Baba, { Move as Move, CircleShrink, Wait, Collector } from 'yubaba';
 
 interface Props extends AlbumData {
   onClick?: () => void;

packages/yubaba-examples/src/transformation/search/stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import Baba, { FLIPMove as Move } from 'yubaba';
+import Baba, { Move as Move } from 'yubaba';
 import { Toggler } from 'yubaba-common';
 import * as Styled from './styled';
 

packages/yubaba-examples/src/transformation/select/stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import Select from 'react-select';
-import Baba, { FLIPMove as Move } from 'yubaba';
+import Baba, { Move as Move } from 'yubaba';
 import { Toggler } from 'yubaba-common';
 import * as Styled from './styled';
 import data from './data';

packages/yubaba/src/Baba/test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { mount } from 'enzyme';
 import 'jest-enzyme';
 import { Baba } from '../Baba';
-import Target from '../Target';
+import Target from '../FocalTarget';
 import { getElementSizeLocation } from '../lib/dom';
 import defer from '../lib/defer';
 import * as utils from '../__tests__/utils';

packages/yubaba/src/Target/index.tsx packages/yubaba/src/FocalTarget/index.tsxpackages/yubaba/src/Target/index.tsx renamed to packages/yubaba/src/FocalTarget/index.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { CollectorContext, SupplyRefHandler } from '../Collector';
 import noop from '../lib/noop';
 
-interface TargetChildProps {
+interface FocalTargetChildProps {
   ref: SupplyRefHandler;
 }
 
-interface TargetProps {
-  children: (props: TargetChildProps) => React.ReactNode;
+interface FocalTargetProps {
+  children: (props: FocalTargetChildProps) => React.ReactNode;
 }
 
-export default class Target extends React.Component<TargetProps> {
+export default class Target extends React.Component<FocalTargetProps> {
   render() {
     return (
       <CollectorContext.Consumer>