Merge pull request #122 from madou/material-motion-rename

chore(package-name): rename library

README.md

@@ -1,47 +1,49 @@
-# yubaba 🧙✨
+<h1>
+  <img aria-label="element motion" src="https://user-images.githubusercontent.com/6801309/58364853-bf21cd80-7efd-11e9-8300-df952b3a03c8.png" height="100" />
+</h1>
 
-/juːbaːba/ out of the box animated experiences for [React.js](https://reactjs.org/) 🧙✨
+formerly `yubaba` - element motion for [React.js](https://reactjs.org/) 💨✨
 
-[![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba) [![npm bundle size (minified + gzip)](https://badgen.net/bundlephobia/minzip/yubaba)](https://bundlephobia.com/result?p=yubaba)
+[![npm](https://img.shields.io/npm/v/@element-motion/core.svg)](https://www.npmjs.com/package/@element-motion/core) [![npm bundle size (minified + gzip)](https://badgen.net/bundlephobia/minzip/@element-motion/core)](https://bundlephobia.com/result?p=@element-motion/core)
 
-<a href="https://yubabajs.com/getting-started#moving-from-a-persisted-element"><img src="https://user-images.githubusercontent.com/6801309/57364146-eff7c800-71c5-11e9-9ddd-98ec510a6002.gif" height="500" alt="Moving from a persisted element" /></a>
-<a href="https://yubabajs.com/getting-started#moving-to-another-distinct-element"><img src="https://user-images.githubusercontent.com/6801309/57364968-88db1300-71c7-11e9-8a51-b45b45eb64ab.gif" height="500" alt="Moving to another distinct element" /></a>
-<a href="https://yubabajs.com/advanced-usage#moving-using-a-focal-target"><img src="https://user-images.githubusercontent.com/6801309/57364297-3cdb9e80-71c6-11e9-9a5f-e69ad9a7184b.gif" height="500" alt="Moving using a focal target" /></a>
+<a href="https://elementmotion.com/getting-started#moving-from-a-persisted-element"><img src="https://user-images.githubusercontent.com/6801309/57364146-eff7c800-71c5-11e9-9ddd-98ec510a6002.gif" height="500" alt="Moving from a persisted element" /></a>
+<a href="https://elementmotion.com/getting-started#moving-to-another-distinct-element"><img src="https://user-images.githubusercontent.com/6801309/57364968-88db1300-71c7-11e9-8a51-b45b45eb64ab.gif" height="500" alt="Moving to another distinct element" /></a>
+<a href="https://elementmotion.com/advanced-usage#moving-using-a-focal-target"><img src="https://user-images.githubusercontent.com/6801309/57364297-3cdb9e80-71c6-11e9-9a5f-e69ad9a7184b.gif" height="500" alt="Moving using a focal target" /></a>
 
-## What is yubaba???
+## Why element motion?
 
-It's all about ✨**animation over state transitions** ✨it can help with:
+It's all about ✨**motion over state transitions** ✨it can help with:
 
-- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
-- 🚚 [Moving an element](https://yubabajs.com/move) from one location to another
-- 💨 [Revealing elements](https://yubabajs.com/focal-reveal-move) inside another element
-- 👓 [Supporting animations](https://yubabajs.com/supporting-animations) by obstructing elements in view
-- 🤫 [Hiding children elements](https://yubabajs.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users
-- 🔢 [Orchestrating](https://yubabajs.com/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should start and [in what order](https://yubabajs.com/advanced-usage#controlling-in-what-order-animations-should-execute)
-- 📝 Composing animations together to create composite animations, for example [CrossFadeMove](https://yubabajs.com/cross-fade-move)
-- 🤯 [Anything you can imagine](https://yubabajs.com/custom-animations), seriously
+- 📴 Enabling animations to be possible between disconnected elements in the React tree
+- 🚚 [Moving an element](https://elementmotion.com/move) from one location to another
+- 💨 [Revealing elements](https://elementmotion.com/focal-reveal-move) inside another element
+- 👓 [Supporting animations](https://elementmotion.com/supporting-animations) by obstructing elements in view
+- 🤫 [Hiding children elements](https://elementmotion.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users
+- 🔢 [Orchestrating](https://elementmotion.com/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should start and [in what order](https://elementmotion.com/advanced-usage#controlling-in-what-order-animations-should-execute)
+- 📝 Composing animations together to create composite animations, for example [CrossFadeMove](https://elementmotion.com/cross-fade-move)
+- 🤯 [Anything you can imagine](https://elementmotion.com/custom-animations), seriously
 
 ## Installation
 
-`yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
-
 ```bash
-npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x --save
+npm install @element-motion/core react react-dom emotion --save
 ```
 
 or
 
 ```bash
-yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x
+yarn add @element-motion/core react react-dom emotion
 ```
 
+React should be greater or equal to `v16.4`, emotion should be greater or equal to `v9`.
+
 > **Tip -** Both es and commonjs modules are provided in the package.
 > Make sure to consume the es modules for their tree shaking ability!
 
 ## Usage
 
 ```js
-import Animator, { Move } from 'yubaba';
+import Animator, { Move } from '@element-motion/core';
 
 ({ isLarge }) => (
   <Animator triggerSelfKey={isLarge}>
@@ -52,7 +54,7 @@ import Animator, { Move } from 'yubaba';
 
 ## Next steps
 
-- **First time** here? After installing head over to [Getting started](https://yubabajs.com/getting-started) to start learning the basics
-- Interested in **animating an element**? Check out [Focal animations](https://yubabajs.com/focal-animations)
-- For **ready made experiences** check out [Composite components](https://yubabajs.com/composite-components), just grab them and go!
-- Having **trouble**? Maybe [Troubleshooting](https://yubabajs.com/troubleshooting) has your answers
+- **First time** here? After installing head over to [Getting started](https://elementmotion.com/getting-started) to start learning the basics
+- Interested in **animating an element**? Check out [Focal animations](https://elementmotion.com/focal-animations)
+- For **ready made experiences** check out [Composite components](https://elementmotion.com/composite-components), just grab them and go!
+- Having **trouble**? Maybe [Troubleshooting](https://elementmotion.com/troubleshooting) has your answers

doczrc.js

@@ -1,4 +1,3 @@
-const pkg = require('./packages/yubaba/package.json');
 const { css } = require('styled-components'); // eslint-disable-line
 
 const primary = 'rgb(133, 47, 255)';
@@ -7,8 +6,8 @@ const primaryText = 'rgba(255, 255, 255, 0.95)';
 const background = `linear-gradient(135deg, ${altPrimary} 25%, ${primary} 100%)`;
 
 module.exports = {
-  title: `yubaba ${pkg.description}`,
-  description: `yubaba ${pkg.description}`,
+  title: 'element motion for React.js 💨✨',
+  description: 'element motion for React.js 💨✨',
   typescript: true,
   dest: '/docs',
   codeSandbox: false,

package.json

@@ -1,24 +1,21 @@
 {
-  "name": "yubaba-repo",
+  "name": "element-motion",
   "private": true,
-  "repository": "madou/yubaba",
+  "repository": "madou/element-motion",
   "author": "Michael Dougall",
   "license": "MIT",
-  "files": [
-    "dist/"
-  ],
   "scripts": {
     "tdd": "jest --watch",
     "build": "lerna run build",
     "lint": "eslint --ext .tsx .",
     "test": "jest",
-    "size": "lerna exec --ignore yubaba-common -- yarn size",
+    "size": "lerna exec --ignore @element-motion/dev -- yarn size",
     "pre-cut-version": "yarn test",
     "postinstall": "yarn build && lerna link",
     "cut-version": "yarn pre-cut-version && lerna publish --conventional-commits --skip-npm && yarn post-cut-version",
     "cut-version-beta": "yarn pre-cut-version && lerna publish --skip-npm --npm-tag beta && yarn post-cut-version",
     "post-cut-version": "git push && git push --tags",
-    "push-to-npm": "lerna exec --ignore yubaba-common -- npm publish",
+    "push-to-npm": "lerna exec --ignore @element-motion/dev -- npm publish",
     "codecov": "echo \"not implemented\"",
     "storybook": "start-storybook -p 6006",
     "fix-duplicates": "yarn-tools fix-duplicates yarn.lock > fixed-yarn.lock && rm yarn.lock && mv fixed-yarn.lock yarn.lock && yarn install",

packages/yubaba/package.json → packages/core/package.json

@@ -1,22 +1,22 @@
 {
-  "name": "yubaba",
+  "name": "@element-motion/core",
   "version": "2.4.1",
-  "repository": "madou/yubaba",
+  "repository": "madou/element-motion",
   "author": "Michael Dougall",
   "license": "MIT",
-  "main": "dist/cjs/packages/yubaba/src/index.js",
-  "module": "dist/esm/packages/yubaba/src/index.js",
+  "main": "dist/cjs/packages/core/src/index.js",
+  "module": "dist/esm/packages/core/src/index.js",
   "sideEffects": false,
-  "description": "/juːbaːba/ out of the box animated experiences for React.js 🧙✨",
+  "description": "element motion for React.js 🧙✨",
   "keywords": [
     "react",
     "flip",
     "animation",
     "transition",
-    "magic-move",
-    "reactjs",
-    "element-to-element",
-    "material-transition"
+    "element",
+    "element-motion",
+    "material-motion",
+    "motion"
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p ./tsconfig.cjs.json && tsc -p ./tsconfig.esm.json && cp ../../README.md README.md",
@@ -25,7 +25,7 @@
   "size-limit": [
     {
       "limit": "7 KB",
-      "path": "dist/esm/packages/yubaba/src/index.js"
+      "path": "dist/esm/packages/core/src/index.js"
     }
   ],
   "peerDependencies": {
@@ -34,6 +34,7 @@
     "react-dom": ">=16.4"
   },
   "devDependencies": {
+    "@element-motion/dev": "^2.4.0",
     "@storybook/react": "5.0.11",
     "emotion": "^10.0.9",
     "polished": "^3.3.0",
@@ -44,7 +45,6 @@
     "react-router-dom": "^5.0.0",
     "react-select": "^2.4.2",
     "size-limit": "^1.3.2",
-    "styled-components": "^4.2.0",
-    "yubaba-common": "^2.4.0"
+    "styled-components": "^4.2.0"
   }
 }

packages/yubaba/src/Animator/__docs__/docs.mdx → packages/core/src/Animator/__docs__/docs.mdx

@@ -28,7 +28,7 @@ It will animate between an element that unmounts and an element that mounts over
 [Moving to another element](/getting-started#moving-to-another-element) is a good example of this.
 
 ```js
-import Animator, { Move } from 'yubaba';
+import Animator, { Move } from '@element-motion/core';
 
 ({ isShown }) => [
   !isShown && (
@@ -50,7 +50,7 @@ Using the `triggerSelfKey` prop to force an animation on itself over a state cha
 [Moving to the same element](/getting-started#moving-to-the-same-element) is a good example of this.
 
 ```js
-import Animator, { Move } from 'yubaba';
+import Animator, { Move } from '@element-motion/core';
 
 ({ children, itemId }) => (
   <Animator triggerSelfKey={itemId}>
@@ -69,7 +69,7 @@ Using the `in` prop to mark a persisted component if it is considered in or not.
 [Moving from a persisted element](/getting-started#moving-from-a-persisted-element) is a good example of this.
 
 ```js
-import Animator, { Move } from 'yubaba';
+import Animator, { Move } from '@element-motion/core';
 
 ({ isShown }) => [
   <Animator name="default" in={!isShown}>

packages/yubaba/src/Animator/__snapshots__/test.tsx.snap → packages/core/src/Animator/__snapshots__/test.tsx.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Animator /> persisted animations should throw when changing into "in" after initial mount 1`] = `
-"yubaba v0.0.0
+"@element-motion/core v0.0.0
 
 You're switching between persisted and unpersisted, don't do this. Either always set the \\"in\\" prop as true or false, or keep as undefined."
 `;
 
 exports[`<Animator /> self targetted animations should throw when changing into "triggerSelfKey" after initial mount 1`] = `
-"yubaba v0.0.0
+"@element-motion/core v0.0.0
 
 You're switching between self triggering modes, don't do this. Either always set the \\"triggerSelfKey\\" prop, or keep as undefined."
 `;
 
 exports[`<Animator /> self targetted animations should throw when using both "in" and "triggerSelfKey" props after initial mount 1`] = `
-"yubaba v0.0.0
+"@element-motion/core v0.0.0
 
 Don't use \\"in\\" and \\"triggerSelfKey\\" together. If your element is persisted use \\"in\\". If your element is targeting itself for animations use \\"triggerSelfKey\\"."
 `;

packages/yubaba/src/Animator/stories.tsx → packages/core/src/Animator/stories.tsx

@@ -135,7 +135,7 @@ class AnimatorProfiler extends React.Component<AnimatorProfilerProps, AnimatorPr
   }
 }
 
-storiesOf('yubaba/Animator', module)
+storiesOf('@element-motion/core/Animator', module)
   .add('profiler (1)', () => <AnimatorProfiler iterations={1} />)
   .add('profiler (10)', () => <AnimatorProfiler iterations={10} />)
   .add('profiler (100)', () => <AnimatorProfiler iterations={100} />)

packages/yubaba/src/Animator/test.tsx → packages/core/src/Animator/test.tsx

@@ -39,7 +39,7 @@ describe('<Animator />', () => {
 
     mount(<Animator>{props => <div {...props} />}</Animator>);
 
-    expect(console.warn).toHaveBeenCalledWith(`yubaba v0.0.0
+    expect(console.warn).toHaveBeenCalledWith(`@element-motion/core v0.0.0
 
 "name" prop needs to be defined. Without it you may have problems matching up animator targets. You will not get this error when using "triggerSelfKey" prop.`);
   });

packages/yubaba/src/Collector/__docs__/docs.mdx → packages/core/src/Collector/__docs__/docs.mdx

@@ -18,7 +18,7 @@ See [Custom animations](/custom-animations) for help.
 ## Usage
 
 ```js
-import Animator, { Collector } from 'yubaba';
+import Animator, { Collector } from '@element-motion/core';
 
 const CustomAnimation = ({ children }) => {
   const beforeAnimation = () => {};

packages/yubaba/src/FocalTarget/__docs__/docs.mdx → packages/core/src/FocalTarget/__docs__/docs.mdx

@@ -18,7 +18,7 @@ for example [FocalConcealMove](/focal-conceal-move).
 ## Usage
 
 ```js
-import { FocalTarget, FocalConcealMove } from 'yubaba';
+import { FocalTarget, FocalConcealMove } from '@element-motion/core';
 
 const ItemDetails = ({ title, recipients, body, index }) => (
   <Animator name={`item-${index}`}>

packages/yubaba/src/VisibilityManager/__docs__/docs.mdx → packages/core/src/VisibilityManager/__docs__/docs.mdx

@@ -19,7 +19,7 @@ If it is the initial mount it will be shown **after** its child animation has fi
 ## Usage
 
 ```js
-import Animator, { VisibilityManager } from 'yubaba';
+import Animator, { VisibilityManager } from '@element-motion/core';
 
 const ItemDetails = ({ description }) => (
   <VisibilityManager>

packages/yubaba/src/VisibilityManager/stories.tsx → packages/core/src/VisibilityManager/stories.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import BodyClassName from 'react-body-classname';
 import Animator, { VisibilityManager, Noop } from '../../src';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
 
 const StyledBody = styled(BodyClassName)`
   background-color: #f2a2e8;
@@ -43,7 +43,7 @@ const TextContainer = styled.div`
   text-align: center;
 `;
 
-storiesOf('yubaba/VisibilityManager', module)
+storiesOf('@element-motion/core/VisibilityManager', module)
   .add('NoManager', () => (
     <Toggler>
       {({ shown, toggle }) => (

packages/yubaba/src/Wait/__docs__/docs.mdx → packages/core/src/Wait/__docs__/docs.mdx

@@ -15,7 +15,7 @@ Add it between two animations for the deeper descendant animation to start only
 ## Usage
 
 ```js
-import Animator, { Wait, Move, CircleExpand } from 'yubaba';
+import Animator, { Wait, Move, CircleExpand } from '@element-motion/core';
 
 export const AnimatedListItem = ({ id, children }) => (
   <Animator name={`list-item-${id}`}>

packages/yubaba/src/__docs__/1-introduction/docs.mdx → packages/core/src/__docs__/1-introduction/docs.mdx

@@ -5,21 +5,20 @@ order: 5
 ---
 
 import EmailChain from '../3-advanced-usage/EmailChain';
-import * as Styled from './styled';
 
-# yubaba
+# element motion
 
-<Styled.Description />
+formerly `yubaba` - element motion for [React.js](https://reactjs.org/) 💨✨
 
-[![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba) [![npm bundle size (minified + gzip)](https://badgen.net/bundlephobia/minzip/yubaba)](https://bundlephobia.com/result?p=yubaba)
+[![npm](https://img.shields.io/npm/v/@element-motion/core.svg)](https://www.npmjs.com/package/@element-motion/core) [![npm bundle size (minified + gzip)](https://badgen.net/bundlephobia/minzip/@element-motion/core)](https://bundlephobia.com/result?p=@element-motion/core)
 
 <EmailChain />
 
-## What is yubaba???
+## Why element motion?
 
-It's all about **animation** 🧙✨ - it can help with:
+It's all about ✨**motion over state transitions** ✨ - it can help with:
 
-- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
+- 📴 Enabling animations to be possible between disconnected elements in the React tree
 - 🚚 [Moving an element](/move) from one location to another
 - 💨 [Revealing elements](/focal-reveal-move) inside another element
 - 👓 [Supporting animations](/supporting-animations) by obstructing elements in view
@@ -30,25 +29,25 @@ It's all about **animation** 🧙✨ - it can help with:
 
 ## Installation
 
-`yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
-
 ```bash
-npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x --save
+npm install @element-motion/core react react-dom emotion --save
 ```
 
 or
 
 ```bash
-yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x
+yarn add @element-motion/core react react-dom emotion
 ```
 
+React should be greater or equal to `v16.4`, emotion should be greater or equal to `v9`.
+
 > **Tip -** Both es and commonjs modules are provided in the package.
 > Make sure to consume the es modules for their tree shaking ability!
 
 ## Usage
 
 ```js
-import Animator, { Move } from 'yubaba';
+import Animator, { Move } from '@element-motion/core';
 
 ({ isLarge }) => (
   <Animator triggerSelfKey={isLarge}>