diff --git a/README.md b/README.md
index 4b7e3a3..939aee5 100644
--- a/README.md
+++ b/README.md
@@ -1,47 +1,49 @@
-# yubaba π§β¨
+
+ 
+
-/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/) π¨β¨
-[](https://www.npmjs.com/package/yubaba) [](https://bundlephobia.com/result?p=yubaba)
+[](https://www.npmjs.com/package/@element-motion/core) [](https://bundlephobia.com/result?p=@element-motion/core)
-
-
-
+
+
+
-## 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 }) => (
@@ -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
diff --git a/doczrc.js b/doczrc.js
index 3cba2c5..bd96ae0 100644
--- a/doczrc.js
+++ b/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,
diff --git a/package.json b/package.json
index 7f0d27b..3fd13b1 100644
--- a/package.json
+++ b/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",
diff --git a/packages/yubaba/.gitignore b/packages/core/.gitignore
similarity index 100%
rename from packages/yubaba/.gitignore
rename to packages/core/.gitignore
diff --git a/packages/yubaba/.npmignore b/packages/core/.npmignore
similarity index 100%
rename from packages/yubaba/.npmignore
rename to packages/core/.npmignore
diff --git a/packages/yubaba/CHANGELOG.md b/packages/core/CHANGELOG.md
similarity index 100%
rename from packages/yubaba/CHANGELOG.md
rename to packages/core/CHANGELOG.md
diff --git a/packages/yubaba/package.json b/packages/core/package.json
similarity index 64%
rename from packages/yubaba/package.json
rename to packages/core/package.json
index 5c0dd85..cea60c0 100644
--- a/packages/yubaba/package.json
+++ b/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"
}
}
diff --git a/packages/yubaba/src/Animator/__docs__/docs.mdx b/packages/core/src/Animator/__docs__/docs.mdx
similarity index 92%
rename from packages/yubaba/src/Animator/__docs__/docs.mdx
rename to packages/core/src/Animator/__docs__/docs.mdx
index e9b6bec..0086e0f 100644
--- a/packages/yubaba/src/Animator/__docs__/docs.mdx
+++ b/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 }) => (
@@ -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 }) => [
diff --git a/packages/yubaba/src/Animator/__snapshots__/test.tsx.snap b/packages/core/src/Animator/__snapshots__/test.tsx.snap
similarity index 98%
rename from packages/yubaba/src/Animator/__snapshots__/test.tsx.snap
rename to packages/core/src/Animator/__snapshots__/test.tsx.snap
index a90302a..0494a26 100644
--- a/packages/yubaba/src/Animator/__snapshots__/test.tsx.snap
+++ b/packages/core/src/Animator/__snapshots__/test.tsx.snap
@@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[` 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[` 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[` 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\\"."
`;
diff --git a/packages/yubaba/src/Animator/index.tsx b/packages/core/src/Animator/index.tsx
similarity index 100%
rename from packages/yubaba/src/Animator/index.tsx
rename to packages/core/src/Animator/index.tsx
diff --git a/packages/yubaba/src/Animator/stories.tsx b/packages/core/src/Animator/stories.tsx
similarity index 98%
rename from packages/yubaba/src/Animator/stories.tsx
rename to packages/core/src/Animator/stories.tsx
index 711edc9..4e5f0c5 100644
--- a/packages/yubaba/src/Animator/stories.tsx
+++ b/packages/core/src/Animator/stories.tsx
@@ -135,7 +135,7 @@ class AnimatorProfiler extends React.Component )
.add('profiler (10)', () => )
.add('profiler (100)', () => )
diff --git a/packages/yubaba/src/Animator/test.tsx b/packages/core/src/Animator/test.tsx
similarity index 99%
rename from packages/yubaba/src/Animator/test.tsx
rename to packages/core/src/Animator/test.tsx
index 8702501..e00439e 100644
--- a/packages/yubaba/src/Animator/test.tsx
+++ b/packages/core/src/Animator/test.tsx
@@ -39,7 +39,7 @@ describe('', () => {
mount({props => });
- 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.`);
});
diff --git a/packages/yubaba/src/Animator/types.tsx b/packages/core/src/Animator/types.tsx
similarity index 100%
rename from packages/yubaba/src/Animator/types.tsx
rename to packages/core/src/Animator/types.tsx
diff --git a/packages/yubaba/src/Collector/__docs__/docs.mdx b/packages/core/src/Collector/__docs__/docs.mdx
similarity index 94%
rename from packages/yubaba/src/Collector/__docs__/docs.mdx
rename to packages/core/src/Collector/__docs__/docs.mdx
index 89102f0..77a73de 100644
--- a/packages/yubaba/src/Collector/__docs__/docs.mdx
+++ b/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 = () => {};
diff --git a/packages/yubaba/src/Collector/index.tsx b/packages/core/src/Collector/index.tsx
similarity index 100%
rename from packages/yubaba/src/Collector/index.tsx
rename to packages/core/src/Collector/index.tsx
diff --git a/packages/yubaba/src/Collector/test.tsx b/packages/core/src/Collector/test.tsx
similarity index 100%
rename from packages/yubaba/src/Collector/test.tsx
rename to packages/core/src/Collector/test.tsx
diff --git a/packages/yubaba/src/FocalTarget/__docs__/docs.mdx b/packages/core/src/FocalTarget/__docs__/docs.mdx
similarity index 93%
rename from packages/yubaba/src/FocalTarget/__docs__/docs.mdx
rename to packages/core/src/FocalTarget/__docs__/docs.mdx
index 873e461..cc6b82e 100644
--- a/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
+++ b/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 }) => (
diff --git a/packages/yubaba/src/FocalTarget/index.tsx b/packages/core/src/FocalTarget/index.tsx
similarity index 100%
rename from packages/yubaba/src/FocalTarget/index.tsx
rename to packages/core/src/FocalTarget/index.tsx
diff --git a/packages/yubaba/src/VisibilityManager/__docs__/docs.mdx b/packages/core/src/VisibilityManager/__docs__/docs.mdx
similarity index 95%
rename from packages/yubaba/src/VisibilityManager/__docs__/docs.mdx
rename to packages/core/src/VisibilityManager/__docs__/docs.mdx
index 64baae3..0060259 100644
--- a/packages/yubaba/src/VisibilityManager/__docs__/docs.mdx
+++ b/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 }) => (
diff --git a/packages/yubaba/src/VisibilityManager/index.tsx b/packages/core/src/VisibilityManager/index.tsx
similarity index 100%
rename from packages/yubaba/src/VisibilityManager/index.tsx
rename to packages/core/src/VisibilityManager/index.tsx
diff --git a/packages/yubaba/src/VisibilityManager/stories.tsx b/packages/core/src/VisibilityManager/stories.tsx
similarity index 97%
rename from packages/yubaba/src/VisibilityManager/stories.tsx
rename to packages/core/src/VisibilityManager/stories.tsx
index d6e108d..056cfda 100644
--- a/packages/yubaba/src/VisibilityManager/stories.tsx
+++ b/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', () => (
{({ shown, toggle }) => (
diff --git a/packages/yubaba/src/VisibilityManager/test.tsx b/packages/core/src/VisibilityManager/test.tsx
similarity index 100%
rename from packages/yubaba/src/VisibilityManager/test.tsx
rename to packages/core/src/VisibilityManager/test.tsx
diff --git a/packages/yubaba/src/Wait/__docs__/docs.mdx b/packages/core/src/Wait/__docs__/docs.mdx
similarity index 89%
rename from packages/yubaba/src/Wait/__docs__/docs.mdx
rename to packages/core/src/Wait/__docs__/docs.mdx
index cf0f300..8f1fbfc 100644
--- a/packages/yubaba/src/Wait/__docs__/docs.mdx
+++ b/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 }) => (
diff --git a/packages/yubaba/src/Wait/index.tsx b/packages/core/src/Wait/index.tsx
similarity index 100%
rename from packages/yubaba/src/Wait/index.tsx
rename to packages/core/src/Wait/index.tsx
diff --git a/packages/yubaba/src/__docs__/1-introduction/docs.mdx b/packages/core/src/__docs__/1-introduction/docs.mdx
similarity index 67%
rename from packages/yubaba/src/__docs__/1-introduction/docs.mdx
rename to packages/core/src/__docs__/1-introduction/docs.mdx
index 3219df6..8d04042 100644
--- a/packages/yubaba/src/__docs__/1-introduction/docs.mdx
+++ b/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
-
+formerly `yubaba` - element motion for [React.js](https://reactjs.org/) π¨β¨
-[](https://www.npmjs.com/package/yubaba) [](https://bundlephobia.com/result?p=yubaba)
+[](https://www.npmjs.com/package/@element-motion/core) [](https://bundlephobia.com/result?p=@element-motion/core)
-## 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 }) => (
diff --git a/packages/yubaba/src/__docs__/2-getting-started/docs.mdx b/packages/core/src/__docs__/2-getting-started/docs.mdx
similarity index 96%
rename from packages/yubaba/src/__docs__/2-getting-started/docs.mdx
rename to packages/core/src/__docs__/2-getting-started/docs.mdx
index bb8a605..39b35ad 100644
--- a/packages/yubaba/src/__docs__/2-getting-started/docs.mdx
+++ b/packages/core/src/__docs__/2-getting-started/docs.mdx
@@ -5,10 +5,10 @@ order: 4
---
import { Playground } from 'docz';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
import MenuIcon from '@material-ui/icons/Menu';
import CloseIcon from '@material-ui/icons/Close';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import BackIcon from '@material-ui/icons/ArrowBack';
import MicIcon from '@material-ui/icons/Mic';
import { IconButton } from '@material-ui/core';
@@ -31,7 +31,7 @@ import johnny from './images/jg.jpg';
# Getting started
-The bread and butter animation in `yubaba` is moving an element.
+The bread and butter animation with `element motion` is moving an element.
Simple enough - after a state change we can automatically have the element animate into the its new position.
> **Tip -** You can interact with any examples!
@@ -97,12 +97,12 @@ For this example we are animating from one element to another over a state chang
-> **Tip -** In `yubaba` animations are triggered by state changes.
+> **Tip -** In `element motion` animations are triggered by state changes.
> This can occur either by mounting/unmounting or changing the `in` prop of [Animator](/animator) elements.
## Reshaping containers
-One powerful aspect of `yubaba` is being able to compose different animations and behaviours together.
+One powerful aspect of `element motion` is being able to compose different animations and behaviours together.
Taking some inspiration from [Facebook Messenger](http://messenger.com) -
here is their message notification pill made using [ReshapingContainer](/reshaping-container) and [VisibilityManager](/visibility-manager).
@@ -140,7 +140,7 @@ here is their message notification pill made using [ReshapingContainer](/reshapi
-> **Tip -** `yubaba` strives to have the best out of the box animated experience for developers.
+> **Tip -** `element motion` strives to have the best out of the box animated experience for developers.
> Some components combine multiple animations and behavior - we call them [Composite Components](/composite-components).
## Moving to the same element
@@ -175,7 +175,7 @@ we just update the key at the same time as the state change.
-> **Tip -** The beauty of using `yubaba` is that all the animations are dynamic.
+> **Tip -** The beauty of using `element motion` is that all the animations are dynamic.
> Elements can be positioned in an infinite amount of states and we can animate between them all -
> no hard coding.
@@ -234,7 +234,7 @@ for that we can use the [CrossFadeMove](/cross-fade-move) animation to transitio
## Animating route transitions
-Remember that `yubaba` animations are triggered after a state change,
+Remember that `element motion` animations are triggered after a state change,
and if you're using a router the state is just kept at a higher level.
Here we have the above example re-written with [React Router](https://reacttraining.com/react-router/).
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/1.png b/packages/core/src/__docs__/2-getting-started/images/1.png
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/1.png
rename to packages/core/src/__docs__/2-getting-started/images/1.png
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/2.jpeg b/packages/core/src/__docs__/2-getting-started/images/2.jpeg
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/2.jpeg
rename to packages/core/src/__docs__/2-getting-started/images/2.jpeg
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/3.jpeg b/packages/core/src/__docs__/2-getting-started/images/3.jpeg
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/3.jpeg
rename to packages/core/src/__docs__/2-getting-started/images/3.jpeg
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/4.png b/packages/core/src/__docs__/2-getting-started/images/4.png
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/4.png
rename to packages/core/src/__docs__/2-getting-started/images/4.png
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/5.png b/packages/core/src/__docs__/2-getting-started/images/5.png
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/5.png
rename to packages/core/src/__docs__/2-getting-started/images/5.png
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/6.jpeg b/packages/core/src/__docs__/2-getting-started/images/6.jpeg
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/6.jpeg
rename to packages/core/src/__docs__/2-getting-started/images/6.jpeg
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/avatar.jpg b/packages/core/src/__docs__/2-getting-started/images/avatar.jpg
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/avatar.jpg
rename to packages/core/src/__docs__/2-getting-started/images/avatar.jpg
diff --git a/packages/yubaba/src/__docs__/2-getting-started/images/jg.jpg b/packages/core/src/__docs__/2-getting-started/images/jg.jpg
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/images/jg.jpg
rename to packages/core/src/__docs__/2-getting-started/images/jg.jpg
diff --git a/packages/yubaba/src/__docs__/2-getting-started/styled.tsx b/packages/core/src/__docs__/2-getting-started/styled.tsx
similarity index 100%
rename from packages/yubaba/src/__docs__/2-getting-started/styled.tsx
rename to packages/core/src/__docs__/2-getting-started/styled.tsx
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx b/packages/core/src/__docs__/3-advanced-usage/EmailChain.tsx
similarity index 99%
rename from packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx
rename to packages/core/src/__docs__/3-advanced-usage/EmailChain.tsx
index 6d4445e..d630784 100644
--- a/packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx
+++ b/packages/core/src/__docs__/3-advanced-usage/EmailChain.tsx
@@ -1,6 +1,6 @@
/* eslint-disable import/no-extraneous-dependencies, react/no-array-index-key */
import * as React from 'react';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import MoreVert from '@material-ui/icons/MoreVert';
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/PopmotionMoveRight.tsx b/packages/core/src/__docs__/3-advanced-usage/PopmotionMoveRight.tsx
similarity index 100%
rename from packages/yubaba/src/__docs__/3-advanced-usage/PopmotionMoveRight.tsx
rename to packages/core/src/__docs__/3-advanced-usage/PopmotionMoveRight.tsx
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx b/packages/core/src/__docs__/3-advanced-usage/docs.mdx
similarity index 95%
rename from packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
rename to packages/core/src/__docs__/3-advanced-usage/docs.mdx
index b7e4882..06c2cfd 100644
--- a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
+++ b/packages/core/src/__docs__/3-advanced-usage/docs.mdx
@@ -5,7 +5,7 @@ order: 3
---
import { Playground } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import MoreVert from '@material-ui/icons/MoreVert';
@@ -44,7 +44,7 @@ import PopmotionMoveRight from './PopmotionMoveRight';
## Use with other libaries
Doing everything is a pretty hard gig.
-Luckily `yubaba` works great with other libraries!
+Luckily `element motion` works great with other libraries!
### [React Transition Group](https://reactcommunity.org/react-transition-group)
@@ -71,7 +71,7 @@ for example here in our _tripe.com_ menu we use it for just that!
### [Popmotion](https://popmotion.io/pure/)
Creating [custom animations](/custom-animations) with third party libraries works a treat,
-remember that although `yubaba` comes with beautiful animations out of the box -
+remember that although `element motion` comes with beautiful animations out of the box -
at its core is a powerful orchestration layer you can use to write your own!
Here we use Popmotion to do the animating.
@@ -89,7 +89,7 @@ Here we use Popmotion to do the animating.
> **Tip -** [React Spring](https://www.react-spring.io/) can also be used for similar results using its imperative [Manual API](https://www.react-spring.io/docs/props/gotchas#manual-api).
```js
-import { Collector } from 'yubaba';
+import { Collector } from '@element-motion/core';
import React, { useRef } from 'react';
import { styler, tween } from 'popmotion';
@@ -183,7 +183,7 @@ Continuing the example above,
if we introduce the Wait component:
```js
-import { Wait } from 'yubaba';
+import { Wait } from '@element-motion/core';
() => (
@@ -215,7 +215,7 @@ Luckily [VisibilityManager](/visibility-manager) exists to do just that!
Make it a parent of any [Animator](/animator) and it will show its content only when the animation has finished.
```js
-import { VisibilityManager } from 'yubaba';
+import { VisibilityManager } from '@element-motion/core';
() => (
@@ -240,7 +240,7 @@ Children content will be shown after **all** animations have completed.
## Using supporting animations
-While movement is a large part of `yubaba` we can do so much more!
+While movement is a large part of `element motion` we can do so much more!
When building a great user experience its also useful to have supporting animation to help seamlessly transition from one state to another.
Two extra tools we have to do this is [CircleExpand](/circle-expand) and [CircleShrink](/circle-shrink) animations,
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/images/ovechkin.jpg b/packages/core/src/__docs__/3-advanced-usage/images/ovechkin.jpg
similarity index 100%
rename from packages/yubaba/src/__docs__/3-advanced-usage/images/ovechkin.jpg
rename to packages/core/src/__docs__/3-advanced-usage/images/ovechkin.jpg
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/styled.tsx b/packages/core/src/__docs__/3-advanced-usage/styled.tsx
similarity index 100%
rename from packages/yubaba/src/__docs__/3-advanced-usage/styled.tsx
rename to packages/core/src/__docs__/3-advanced-usage/styled.tsx
diff --git a/packages/yubaba/src/__docs__/4-custom-animations/OneFullRotation.tsx b/packages/core/src/__docs__/4-custom-animations/OneFullRotation.tsx
similarity index 100%
rename from packages/yubaba/src/__docs__/4-custom-animations/OneFullRotation.tsx
rename to packages/core/src/__docs__/4-custom-animations/OneFullRotation.tsx
diff --git a/packages/yubaba/src/__docs__/4-custom-animations/SupportingAnimation.tsx b/packages/core/src/__docs__/4-custom-animations/SupportingAnimation.tsx
similarity index 100%
rename from packages/yubaba/src/__docs__/4-custom-animations/SupportingAnimation.tsx
rename to packages/core/src/__docs__/4-custom-animations/SupportingAnimation.tsx
diff --git a/packages/yubaba/src/__docs__/4-custom-animations/docs.mdx b/packages/core/src/__docs__/4-custom-animations/docs.mdx
similarity index 94%
rename from packages/yubaba/src/__docs__/4-custom-animations/docs.mdx
rename to packages/core/src/__docs__/4-custom-animations/docs.mdx
index 0bdb86c..1677d3e 100644
--- a/packages/yubaba/src/__docs__/4-custom-animations/docs.mdx
+++ b/packages/core/src/__docs__/4-custom-animations/docs.mdx
@@ -5,7 +5,7 @@ order: 2
---
import { Playground } from 'docz';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
import { WrappedAnimator as Animator } from '../../Animator';
import Move from '../../animations/Move';
import OneFullRotation from './OneFullRotation';
@@ -14,11 +14,11 @@ import * as Styled from './styled';
# Custom animations
-At its core `yubaba` is a powerful orchestration layer which provides a way to collect and trigger animations,
+At its core `element motion` is a powerful orchestration layer which provides a way to collect and trigger animations,
as well as providing snapshots of the DOM to the animations,
this can be helpful for example when figuring out where you'd like to move an element.
-> **Tip -** `yubaba` works great with [other animation libraries](/advanced-usage#use-with-other-libaries) just incase you're wondering.
+> **Tip -** `element motion` works great with [other animation libraries](/advanced-usage#use-with-other-libaries) just incase you're wondering.
## Lifecyle of an animation
@@ -94,7 +94,7 @@ We are going to make a custom animation that makes the target element _do one fu
```js
import React, { Component } from 'react';
-import { Collector } from 'yubaba';
+import { Collector } from '@element-motion/core';
export default class OneFullRotation extends Component {
// Before animate is used to set up the animation.
@@ -185,7 +185,7 @@ export default class OneFullRotation extends Component {
### Composing animations
-Composability is a primary feature of `yubaba` - with a small change we can compose the two animations together.
+Composability is a primary feature of `element motion` - with a small change we can compose the two animations together.
If we introduce [Move](/move) we can make the element rotate and move to the new destination.
```diff
@@ -239,7 +239,7 @@ For this example let's make something similar to swipe except it starts from the
```js
import React from 'react';
-import { Collector } from 'yubaba';
+import { Collector } from '@element-motion/core';
export default class SupportingAnimation extends React.Component {
beforeAnimate = (elements, onFinish, setChildProps) => {
@@ -354,5 +354,5 @@ export default class SupportingAnimation extends React.Component {
-> **Tip -** Having some trouble using `yubaba`?
+> **Tip -** Having some trouble using `element motion`?
> Check out [Troubleshooting](/troubleshooting) - there may some help for you there.
diff --git a/packages/yubaba/src/__docs__/4-custom-animations/styled.tsx b/packages/core/src/__docs__/4-custom-animations/styled.tsx
similarity index 100%
rename from packages/yubaba/src/__docs__/4-custom-animations/styled.tsx
rename to packages/core/src/__docs__/4-custom-animations/styled.tsx
diff --git a/packages/yubaba/src/__docs__/5-troubleshooting/docs.mdx b/packages/core/src/__docs__/5-troubleshooting/docs.mdx
similarity index 93%
rename from packages/yubaba/src/__docs__/5-troubleshooting/docs.mdx
rename to packages/core/src/__docs__/5-troubleshooting/docs.mdx
index 793fc7e..2f66e7c 100644
--- a/packages/yubaba/src/__docs__/5-troubleshooting/docs.mdx
+++ b/packages/core/src/__docs__/5-troubleshooting/docs.mdx
@@ -30,4 +30,4 @@ Double check your [Animator](/animator) elements.
```
-> ** Tip -** Can't find what you're looking for? [Raise an issue on Github](https://github.com/madou/yubaba/issues/new).
+> ** Tip -** Can't find what you're looking for? [Raise an issue on Github](https://github.com/madou/element-motion/issues/new).
diff --git a/packages/yubaba/src/__docs__/composite-components/docs.mdx b/packages/core/src/__docs__/composite-components/docs.mdx
similarity index 76%
rename from packages/yubaba/src/__docs__/composite-components/docs.mdx
rename to packages/core/src/__docs__/composite-components/docs.mdx
index cb1ecfe..5d85153 100644
--- a/packages/yubaba/src/__docs__/composite-components/docs.mdx
+++ b/packages/core/src/__docs__/composite-components/docs.mdx
@@ -7,7 +7,7 @@ menu: Composite components
# What are composite components?
Composite components are experiences that you can drop into your application and use right away.
-They consume `yubaba` animations and add a bit of extra spice πΆ so you don't have to.
+They consume `element motion` animations and add a bit of extra spice πΆ so you don't have to.
They're also great inspiration for creating your own!
Look at their source code π’.
diff --git a/packages/yubaba/src/__docs__/focal-animations/docs.mdx b/packages/core/src/__docs__/focal-animations/docs.mdx
similarity index 89%
rename from packages/yubaba/src/__docs__/focal-animations/docs.mdx
rename to packages/core/src/__docs__/focal-animations/docs.mdx
index f0e6f6c..84ae8b3 100644
--- a/packages/yubaba/src/__docs__/focal-animations/docs.mdx
+++ b/packages/core/src/__docs__/focal-animations/docs.mdx
@@ -6,7 +6,7 @@ menu: Focal animations
# What are focal animations?
-The bread and butter of `yubaba` π.
+The bread and butter of `element motion` π.
Focal animations are all about a single focal element that we want to transition from one state to another.
While multiple elements _may_ be utilised in a focal animation (e.g. how [FocalRevealMove](/focal-reveal-move) works),
diff --git a/packages/yubaba/src/__docs__/supporting-animations/docs.mdx b/packages/core/src/__docs__/supporting-animations/docs.mdx
similarity index 100%
rename from packages/yubaba/src/__docs__/supporting-animations/docs.mdx
rename to packages/core/src/__docs__/supporting-animations/docs.mdx
diff --git a/packages/yubaba/src/__tests__/utils.tsx b/packages/core/src/__tests__/utils.tsx
similarity index 100%
rename from packages/yubaba/src/__tests__/utils.tsx
rename to packages/core/src/__tests__/utils.tsx
diff --git a/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx b/packages/core/src/animations/CircleExpand/__docs__/docs.mdx
similarity index 92%
rename from packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
rename to packages/core/src/animations/CircleExpand/__docs__/docs.mdx
index 7120759..885fa25 100644
--- a/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
+++ b/packages/core/src/animations/CircleExpand/__docs__/docs.mdx
@@ -5,7 +5,7 @@ menu: Supporting animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import Animator from '../../../Animator';
import CircleExpand from '../index';
import * as Styled from './styled';
@@ -20,7 +20,7 @@ Generally you should use [CircleExpand](/circle-expand) and [CricleShrink](/circ
## Usage
```js
-import { CircleExpand } from 'yubaba';
+import { CircleExpand } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/CircleExpand/__docs__/styled.tsx b/packages/core/src/animations/CircleExpand/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/CircleExpand/__docs__/styled.tsx
rename to packages/core/src/animations/CircleExpand/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/CircleExpand/index.tsx b/packages/core/src/animations/CircleExpand/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/CircleExpand/index.tsx
rename to packages/core/src/animations/CircleExpand/index.tsx
diff --git a/packages/yubaba/src/animations/CircleExpand/stories.tsx b/packages/core/src/animations/CircleExpand/stories.tsx
similarity index 96%
rename from packages/yubaba/src/animations/CircleExpand/stories.tsx
rename to packages/core/src/animations/CircleExpand/stories.tsx
index 061dc00..57f6ff7 100644
--- a/packages/yubaba/src/animations/CircleExpand/stories.tsx
+++ b/packages/core/src/animations/CircleExpand/stories.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Animator, { CircleExpand } from '../../../src';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
const Root = styled.div`
width: 100px;
@@ -29,7 +29,7 @@ const Container = styled.div`
min-height: 100vh;
`;
-storiesOf('yubaba/CircleExpand', module)
+storiesOf('@element-motion/core/CircleExpand', module)
.add('FromStaticPosition', () => (
{({ shown, toggle }) => (
diff --git a/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx b/packages/core/src/animations/CircleShrink/__docs__/docs.mdx
similarity index 92%
rename from packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
rename to packages/core/src/animations/CircleShrink/__docs__/docs.mdx
index 9e91e34..a1b44fa 100644
--- a/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
+++ b/packages/core/src/animations/CircleShrink/__docs__/docs.mdx
@@ -5,7 +5,7 @@ menu: Supporting animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import Animator from '../../../Animator';
import * as Styled from './styled';
import CircleShrink from '../index';
@@ -20,7 +20,7 @@ Generally you should use [CircleExpand](/circle-expand) and [CricleShrink](/circ
## Usage
```js
-import { CircleShrink } from 'yubaba';
+import { CircleShrink } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/CircleShrink/__docs__/styled.tsx b/packages/core/src/animations/CircleShrink/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/CircleShrink/__docs__/styled.tsx
rename to packages/core/src/animations/CircleShrink/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/CircleShrink/index.tsx b/packages/core/src/animations/CircleShrink/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/CircleShrink/index.tsx
rename to packages/core/src/animations/CircleShrink/index.tsx
diff --git a/packages/yubaba/src/animations/CircleShrink/stories.tsx b/packages/core/src/animations/CircleShrink/stories.tsx
similarity index 96%
rename from packages/yubaba/src/animations/CircleShrink/stories.tsx
rename to packages/core/src/animations/CircleShrink/stories.tsx
index 4fee7b2..a166553 100644
--- a/packages/yubaba/src/animations/CircleShrink/stories.tsx
+++ b/packages/core/src/animations/CircleShrink/stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import { storiesOf } from '@storybook/react';
import BodyClassName from 'react-body-classname';
import Animator, { CircleShrink } from '../../../src';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
const Root = styled.div`
width: 100px;
@@ -37,7 +37,7 @@ const Padding = styled.div`
flex-shrink: 0;
`;
-storiesOf('yubaba/CircleShrink', module)
+storiesOf('@element-motion/core/CircleShrink', module)
.add('Default', () => (
{({ shown, toggle }) => (
diff --git a/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx b/packages/core/src/animations/CrossFadeMove/__docs__/docs.mdx
similarity index 92%
rename from packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
rename to packages/core/src/animations/CrossFadeMove/__docs__/docs.mdx
index 438dfd9..004079d 100644
--- a/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
+++ b/packages/core/src/animations/CrossFadeMove/__docs__/docs.mdx
@@ -5,7 +5,7 @@ menu: Focal animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import Animator from '../../../Animator';
import CrossFadeMove from '../index';
import * as Styled from './styled';
@@ -18,7 +18,7 @@ Useful for animating an element moving from one position to another when the ele
## Usage
```js
-import { CrossFadeMove } from 'yubaba';
+import { CrossFadeMove } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/CrossFadeMove/__docs__/styled.tsx b/packages/core/src/animations/CrossFadeMove/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/CrossFadeMove/__docs__/styled.tsx
rename to packages/core/src/animations/CrossFadeMove/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/CrossFadeMove/index.tsx b/packages/core/src/animations/CrossFadeMove/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/CrossFadeMove/index.tsx
rename to packages/core/src/animations/CrossFadeMove/index.tsx
diff --git a/packages/yubaba/src/animations/CrossFadeMove/stories.tsx b/packages/core/src/animations/CrossFadeMove/stories.tsx
similarity index 70%
rename from packages/yubaba/src/animations/CrossFadeMove/stories.tsx
rename to packages/core/src/animations/CrossFadeMove/stories.tsx
index f245add..7c464d4 100644
--- a/packages/yubaba/src/animations/CrossFadeMove/stories.tsx
+++ b/packages/core/src/animations/CrossFadeMove/stories.tsx
@@ -1,12 +1,12 @@
import { storiesOf } from '@storybook/react';
import Animator from '../../Animator';
import CrossFadeMove from './index';
-import { createMoveExamples } from 'yubaba-common';
+import { createMoveExamples } from '@element-motion/dev';
const Examples = createMoveExamples({ namePrefix: 'CrossFadeMove', useDistinctEnd: true })(
Animator,
CrossFadeMove
);
-const stories = storiesOf('yubaba/CrossFadeMove', module);
+const stories = storiesOf('@element-motion/core/CrossFadeMove', module);
Object.keys(Examples).forEach(key => stories.add(key, Examples[key]));
diff --git a/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx b/packages/core/src/animations/FadeMove/__docz__/docs.mdx
similarity index 92%
rename from packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
rename to packages/core/src/animations/FadeMove/__docz__/docs.mdx
index 438e7c2..6d40627 100644
--- a/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
+++ b/packages/core/src/animations/FadeMove/__docz__/docs.mdx
@@ -5,7 +5,7 @@ menu: Focal animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import Animator from '../../../Animator';
import FadeMove from '../index';
import * as Styled from './styled';
@@ -20,7 +20,7 @@ Generally you'd want to use [Move](/move) or [CrossFadeMove](/cross-fade-move) o
## Usage
```js
-import { FadeMove } from 'yubaba';
+import { FadeMove } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx b/packages/core/src/animations/FadeMove/__docz__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx
rename to packages/core/src/animations/FadeMove/__docz__/styled.tsx
diff --git a/packages/yubaba/src/animations/FadeMove/index.tsx b/packages/core/src/animations/FadeMove/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/FadeMove/index.tsx
rename to packages/core/src/animations/FadeMove/index.tsx
diff --git a/packages/yubaba/src/animations/FadeMove/stories.tsx b/packages/core/src/animations/FadeMove/stories.tsx
similarity index 70%
rename from packages/yubaba/src/animations/FadeMove/stories.tsx
rename to packages/core/src/animations/FadeMove/stories.tsx
index 9a3a7c8..3db40fd 100644
--- a/packages/yubaba/src/animations/FadeMove/stories.tsx
+++ b/packages/core/src/animations/FadeMove/stories.tsx
@@ -1,5 +1,5 @@
import { storiesOf } from '@storybook/react';
-import { createMoveExamples } from 'yubaba-common';
+import { createMoveExamples } from '@element-motion/dev';
import Animator from '../../Animator';
import FadeMove from './index';
@@ -8,5 +8,5 @@ const Examples = createMoveExamples({ namePrefix: 'FadeMove', useDistinctEnd: tr
FadeMove
);
-const stories = storiesOf('yubaba/FadeMove', module);
+const stories = storiesOf('@element-motion/core/FadeMove', module);
Object.keys(Examples).forEach(key => stories.add(key, Examples[key]));
diff --git a/packages/yubaba/src/animations/FocalConcealMove/__docs__/docs.mdx b/packages/core/src/animations/FocalConcealMove/__docs__/docs.mdx
similarity index 98%
rename from packages/yubaba/src/animations/FocalConcealMove/__docs__/docs.mdx
rename to packages/core/src/animations/FocalConcealMove/__docs__/docs.mdx
index 33950f7..10b4428 100644
--- a/packages/yubaba/src/animations/FocalConcealMove/__docs__/docs.mdx
+++ b/packages/core/src/animations/FocalConcealMove/__docs__/docs.mdx
@@ -36,7 +36,7 @@ Requires the use of the [FocalTarget](/focal-target) component to specify the fo
## Usage
```js
-import Animator, { FocalConcealMove, FocalTarget } from 'yubaba';
+import Animator, { FocalConcealMove, FocalTarget } from '@element-motion/core';
```
> **Tip -** Click the back button in the album art to conceal it.
diff --git a/packages/yubaba/src/animations/FocalConcealMove/__docs__/images/foster.jpg b/packages/core/src/animations/FocalConcealMove/__docs__/images/foster.jpg
similarity index 100%
rename from packages/yubaba/src/animations/FocalConcealMove/__docs__/images/foster.jpg
rename to packages/core/src/animations/FocalConcealMove/__docs__/images/foster.jpg
diff --git a/packages/yubaba/src/animations/FocalConcealMove/__docs__/styled.tsx b/packages/core/src/animations/FocalConcealMove/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/FocalConcealMove/__docs__/styled.tsx
rename to packages/core/src/animations/FocalConcealMove/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/FocalConcealMove/index.tsx b/packages/core/src/animations/FocalConcealMove/index.tsx
similarity index 99%
rename from packages/yubaba/src/animations/FocalConcealMove/index.tsx
rename to packages/core/src/animations/FocalConcealMove/index.tsx
index d426213..cd0b076 100644
--- a/packages/yubaba/src/animations/FocalConcealMove/index.tsx
+++ b/packages/core/src/animations/FocalConcealMove/index.tsx
@@ -44,7 +44,7 @@ export default class FocalConcealMove extends React.Component {
if (!data.origin.focalTargetElementBoundingBox) {
- throw new Error(`yubaba
+ throw new Error(`@element-motion/core
was not found, if you haven't defined one make sure to add one as a descendant of your target Animator.`);
}
diff --git a/packages/yubaba/src/animations/FocalConcealMove/stories.tsx b/packages/core/src/animations/FocalConcealMove/stories.tsx
similarity index 96%
rename from packages/yubaba/src/animations/FocalConcealMove/stories.tsx
rename to packages/core/src/animations/FocalConcealMove/stories.tsx
index c82875a..05975b1 100644
--- a/packages/yubaba/src/animations/FocalConcealMove/stories.tsx
+++ b/packages/core/src/animations/FocalConcealMove/stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
import Animator from '../../Animator';
import Target from '../../FocalTarget';
import FocalConcealMove from './index';
@@ -120,7 +120,7 @@ const build = (width: number, height: number, orientation: Orientation) => (
);
-storiesOf('yubaba/FocalConcealMove', module)
+storiesOf('@element-motion/core/FocalConcealMove', module)
.addDecorator(story => {story()})
.add('TargetHeight', () => build(200, 200, 'vertical'))
.add('TargetWidth', () => build(200, 200, 'horizontal'))
diff --git a/packages/yubaba/src/animations/FocalReveal/__docz__/docs.mdx b/packages/core/src/animations/FocalReveal/__docz__/docs.mdx
similarity index 83%
rename from packages/yubaba/src/animations/FocalReveal/__docz__/docs.mdx
rename to packages/core/src/animations/FocalReveal/__docz__/docs.mdx
index 6af9e8b..c07ccb5 100644
--- a/packages/yubaba/src/animations/FocalReveal/__docz__/docs.mdx
+++ b/packages/core/src/animations/FocalReveal/__docz__/docs.mdx
@@ -5,7 +5,7 @@ menu: Focal animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import FocalReveal from '../index';
# FocalReveal
@@ -19,7 +19,7 @@ This component requires the use of a [FocalTarget](/focal-target) to mark the fo
## Usage
```js
-import { FocalReveal } from 'yubaba';
+import { FocalReveal } from '@element-motion/core';
```
## Props
diff --git a/packages/yubaba/src/animations/FocalReveal/index.tsx b/packages/core/src/animations/FocalReveal/index.tsx
similarity index 99%
rename from packages/yubaba/src/animations/FocalReveal/index.tsx
rename to packages/core/src/animations/FocalReveal/index.tsx
index 50ff138..abc1ada 100644
--- a/packages/yubaba/src/animations/FocalReveal/index.tsx
+++ b/packages/core/src/animations/FocalReveal/index.tsx
@@ -56,7 +56,7 @@ export default class FocalReveal extends React.Component {
beforeAnimate: AnimationCallback = (data, onFinish, setChildProps) => {
if (!data.destination.focalTargetElementBoundingBox) {
- throw new Error(`yubaba
+ throw new Error(`@element-motion/core
was not found, if you haven't defined one make sure to add one as a descendant of your target Animator.`);
}
diff --git a/packages/yubaba/src/animations/FocalRevealMove/__docs__/docs.mdx b/packages/core/src/animations/FocalRevealMove/__docs__/docs.mdx
similarity index 98%
rename from packages/yubaba/src/animations/FocalRevealMove/__docs__/docs.mdx
rename to packages/core/src/animations/FocalRevealMove/__docs__/docs.mdx
index b33000f..7b9c18d 100644
--- a/packages/yubaba/src/animations/FocalRevealMove/__docs__/docs.mdx
+++ b/packages/core/src/animations/FocalRevealMove/__docs__/docs.mdx
@@ -37,7 +37,7 @@ Requires the use of the [FocalTarget](/focal-target) component to specify the fo
## Usage
```js
-import Animator, { FocalRevealMove, FocalTarget } from 'yubaba';
+import Animator, { FocalRevealMove, FocalTarget } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/FocalRevealMove/__docs__/images/halcyda.png b/packages/core/src/animations/FocalRevealMove/__docs__/images/halcyda.png
similarity index 100%
rename from packages/yubaba/src/animations/FocalRevealMove/__docs__/images/halcyda.png
rename to packages/core/src/animations/FocalRevealMove/__docs__/images/halcyda.png
diff --git a/packages/yubaba/src/animations/FocalRevealMove/__docs__/styled.tsx b/packages/core/src/animations/FocalRevealMove/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/FocalRevealMove/__docs__/styled.tsx
rename to packages/core/src/animations/FocalRevealMove/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/FocalRevealMove/index.tsx b/packages/core/src/animations/FocalRevealMove/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/FocalRevealMove/index.tsx
rename to packages/core/src/animations/FocalRevealMove/index.tsx
diff --git a/packages/yubaba/src/animations/FocalRevealMove/stories.tsx b/packages/core/src/animations/FocalRevealMove/stories.tsx
similarity index 98%
rename from packages/yubaba/src/animations/FocalRevealMove/stories.tsx
rename to packages/core/src/animations/FocalRevealMove/stories.tsx
index 929ab9a..3640276 100644
--- a/packages/yubaba/src/animations/FocalRevealMove/stories.tsx
+++ b/packages/core/src/animations/FocalRevealMove/stories.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
import Animator from '../../Animator';
import Noop from '../Noop';
import Target from '../../FocalTarget';
@@ -146,7 +146,7 @@ const build = (
);
-storiesOf('yubaba/FocalRevealMove', module)
+storiesOf('@element-motion/core/FocalRevealMove', module)
.add('RevealHeight/Left', () => build(200, 200, 'vertical', 'left'))
.add('RevealWidth/Left', () => build(200, 200, 'horizontal', 'left'))
.add('RevealBoth/Left', () => build(200, 200, 'both', 'left'))
diff --git a/packages/yubaba/src/animations/Move/__docs__/docs.mdx b/packages/core/src/animations/Move/__docs__/docs.mdx
similarity index 92%
rename from packages/yubaba/src/animations/Move/__docs__/docs.mdx
rename to packages/core/src/animations/Move/__docs__/docs.mdx
index 59ab845..de89d3c 100644
--- a/packages/yubaba/src/animations/Move/__docs__/docs.mdx
+++ b/packages/core/src/animations/Move/__docs__/docs.mdx
@@ -5,7 +5,7 @@ menu: Focal animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import Animator from '../../../Animator';
import Move from '../index';
import * as Styled from './styled';
@@ -19,7 +19,7 @@ This animation uses the [FLIP technique](https://css-tricks.com/animating-layout
## Usage
```js
-import { Move } from 'yubaba';
+import { Move } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/Move/__docs__/styled.tsx b/packages/core/src/animations/Move/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/Move/__docs__/styled.tsx
rename to packages/core/src/animations/Move/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/Move/index.tsx b/packages/core/src/animations/Move/index.tsx
similarity index 99%
rename from packages/yubaba/src/animations/Move/index.tsx
rename to packages/core/src/animations/Move/index.tsx
index 4c267c7..4418f4e 100644
--- a/packages/yubaba/src/animations/Move/index.tsx
+++ b/packages/core/src/animations/Move/index.tsx
@@ -63,7 +63,7 @@ export default class Move extends React.Component {
const { zIndex, useFocalTarget, transformX, transformY } = this.props;
if (useFocalTarget && !data.destination.focalTargetElementBoundingBox) {
- throw new Error(`yubaba
+ throw new Error(`@element-motion/core
was not found, if you haven't defined one make sure to add one as a descendant of your target Animator.`);
}
diff --git a/packages/yubaba/src/animations/Move/stories.tsx b/packages/core/src/animations/Move/stories.tsx
similarity index 70%
rename from packages/yubaba/src/animations/Move/stories.tsx
rename to packages/core/src/animations/Move/stories.tsx
index aaf3ced..0e82665 100644
--- a/packages/yubaba/src/animations/Move/stories.tsx
+++ b/packages/core/src/animations/Move/stories.tsx
@@ -1,12 +1,12 @@
import { storiesOf } from '@storybook/react';
import Animator from '../../Animator';
import Move from './index';
-import { createMoveExamples } from 'yubaba-common';
+import { createMoveExamples } from '@element-motion/dev';
const Examples = createMoveExamples({
namePrefix: 'Move',
useDistinctEnd: false,
})(Animator, Move);
-const stories = storiesOf('yubaba/Move', module);
+const stories = storiesOf('@element-motion/core/Move', module);
Object.keys(Examples).forEach(key => stories.add(key, Examples[key]));
diff --git a/packages/yubaba/src/animations/Noop/__docs__/docs.mdx b/packages/core/src/animations/Noop/__docs__/docs.mdx
similarity index 83%
rename from packages/yubaba/src/animations/Noop/__docs__/docs.mdx
rename to packages/core/src/animations/Noop/__docs__/docs.mdx
index 0acf350..f3050aa 100644
--- a/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
+++ b/packages/core/src/animations/Noop/__docs__/docs.mdx
@@ -14,7 +14,7 @@ A no-operation "noop" animation.
## Usage
```js
-import { Noop } from 'yubaba';
+import { Noop } from '@element-motion/core';
```
## Props
diff --git a/packages/yubaba/src/animations/Noop/index.tsx b/packages/core/src/animations/Noop/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/Noop/index.tsx
rename to packages/core/src/animations/Noop/index.tsx
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/TripeHoverMenu.tsx b/packages/core/src/animations/ReshapingContainer/__docz__/TripeHoverMenu.tsx
similarity index 98%
rename from packages/yubaba/src/animations/ReshapingContainer/__docz__/TripeHoverMenu.tsx
rename to packages/core/src/animations/ReshapingContainer/__docz__/TripeHoverMenu.tsx
index 571fae9..0427b35 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/__docz__/TripeHoverMenu.tsx
+++ b/packages/core/src/animations/ReshapingContainer/__docz__/TripeHoverMenu.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import * as Common from 'yubaba-common'; // eslint-disable-line import/no-extraneous-dependencies
+import * as Common from '@element-motion/dev'; // eslint-disable-line import/no-extraneous-dependencies
import { Transition } from 'react-transition-group'; // eslint-disable-line import/no-extraneous-dependencies
import ReshapingContainer from '../index';
import * as Styled from './styled';
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx b/packages/core/src/animations/ReshapingContainer/__docz__/docs.mdx
similarity index 95%
rename from packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
rename to packages/core/src/animations/ReshapingContainer/__docz__/docs.mdx
index db1fd58..6373f2c 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
+++ b/packages/core/src/animations/ReshapingContainer/__docz__/docs.mdx
@@ -25,7 +25,7 @@ for example a hover menu!
```js
-import { ReshapingContainer } from 'yubaba';
+import { ReshapingContainer } from '@element-motion/core';
({ children }) => (
(
diff --git a/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx b/packages/core/src/animations/Reveal/__docz__/docs.mdx
similarity index 85%
rename from packages/yubaba/src/animations/Reveal/__docz__/docs.mdx
rename to packages/core/src/animations/Reveal/__docz__/docs.mdx
index 2b5f59d..784d98c 100644
--- a/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx
+++ b/packages/core/src/animations/Reveal/__docz__/docs.mdx
@@ -5,7 +5,7 @@ menu: Focal animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import Reveal from '../index';
# Reveal
@@ -15,7 +15,7 @@ Will reveal the destination element from the origin size to the destination size
## Usage
```js
-import { Reveal } from 'yubaba';
+import { Reveal } from '@element-motion/core';
```
## Props
diff --git a/packages/yubaba/src/animations/Reveal/index.tsx b/packages/core/src/animations/Reveal/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/Reveal/index.tsx
rename to packages/core/src/animations/Reveal/index.tsx
diff --git a/packages/yubaba/src/animations/Reveal/stories.tsx b/packages/core/src/animations/Reveal/stories.tsx
similarity index 90%
rename from packages/yubaba/src/animations/Reveal/stories.tsx
rename to packages/core/src/animations/Reveal/stories.tsx
index 792a7d2..856ab1b 100644
--- a/packages/yubaba/src/animations/Reveal/stories.tsx
+++ b/packages/core/src/animations/Reveal/stories.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
import { WrappedAnimator as Animator } from '../../Animator';
import Reveal from './index';
@@ -15,7 +15,7 @@ const Header = styled.h1`
margin: 0.67rem 0;
`;
-storiesOf('yubaba/Reveal', module).add('ChildrenHeightChanging', () => (
+storiesOf('@element-motion/core/Reveal', module).add('ChildrenHeightChanging', () => (
{toggler => (
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx b/packages/core/src/animations/RevealReshapingContainer/__docz__/docs.mdx
similarity index 97%
rename from packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
rename to packages/core/src/animations/RevealReshapingContainer/__docz__/docs.mdx
index 4d7874c..3cc3739 100644
--- a/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
+++ b/packages/core/src/animations/RevealReshapingContainer/__docz__/docs.mdx
@@ -5,7 +5,7 @@ menu: Composite components
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import RevealReshapingContainer from '../index';
import * as Styled from './styled';
@@ -21,7 +21,7 @@ For example a modal dialog!
## Usage
```js
-import { RevealReshapingContainer } from 'yubaba';
+import { RevealReshapingContainer } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/styled.tsx b/packages/core/src/animations/RevealReshapingContainer/__docz__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/RevealReshapingContainer/__docz__/styled.tsx
rename to packages/core/src/animations/RevealReshapingContainer/__docz__/styled.tsx
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx b/packages/core/src/animations/RevealReshapingContainer/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
rename to packages/core/src/animations/RevealReshapingContainer/index.tsx
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/stories.tsx b/packages/core/src/animations/RevealReshapingContainer/stories.tsx
similarity index 96%
rename from packages/yubaba/src/animations/RevealReshapingContainer/stories.tsx
rename to packages/core/src/animations/RevealReshapingContainer/stories.tsx
index 2f6d736..a7c7f0b 100644
--- a/packages/yubaba/src/animations/RevealReshapingContainer/stories.tsx
+++ b/packages/core/src/animations/RevealReshapingContainer/stories.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
-import { Toggler } from 'yubaba-common';
+import { Toggler } from '@element-motion/dev';
import RevealReshapingContainer from './index';
const FixedContainer = styled.div`
@@ -18,7 +18,7 @@ const Container = styled.div`
display: flex;
`;
-storiesOf('yubaba/RevealReshapingContainer', module)
+storiesOf('@element-motion/core/RevealReshapingContainer', module)
.add('HeightOnly', () => (
diff --git a/packages/yubaba/src/animations/SimpleKeyframe.tsx b/packages/core/src/animations/SimpleKeyframe.tsx
similarity index 100%
rename from packages/yubaba/src/animations/SimpleKeyframe.tsx
rename to packages/core/src/animations/SimpleKeyframe.tsx
diff --git a/packages/yubaba/src/animations/SimpleTween.tsx b/packages/core/src/animations/SimpleTween.tsx
similarity index 100%
rename from packages/yubaba/src/animations/SimpleTween.tsx
rename to packages/core/src/animations/SimpleTween.tsx
diff --git a/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx b/packages/core/src/animations/Swipe/__docs__/docs.mdx
similarity index 88%
rename from packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
rename to packages/core/src/animations/Swipe/__docs__/docs.mdx
index 0d06e55..7741550 100644
--- a/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
+++ b/packages/core/src/animations/Swipe/__docs__/docs.mdx
@@ -5,7 +5,7 @@ menu: Supporting animations
---
import { Playground, Props } from 'docz';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
import Animator from '../../../Animator';
import Swipe from '../index';
import * as Styled from './styled';
@@ -17,7 +17,7 @@ Will animate a square swiping over the viewport.
## Usage
```js
-import { Swipe } from 'yubaba';
+import { Swipe } from '@element-motion/core';
```
diff --git a/packages/yubaba/src/animations/Swipe/__docs__/styled.tsx b/packages/core/src/animations/Swipe/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/Swipe/__docs__/styled.tsx
rename to packages/core/src/animations/Swipe/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/Swipe/index.tsx b/packages/core/src/animations/Swipe/index.tsx
similarity index 100%
rename from packages/yubaba/src/animations/Swipe/index.tsx
rename to packages/core/src/animations/Swipe/index.tsx
diff --git a/packages/yubaba/src/animations/Swipe/stories.tsx b/packages/core/src/animations/Swipe/stories.tsx
similarity index 94%
rename from packages/yubaba/src/animations/Swipe/stories.tsx
rename to packages/core/src/animations/Swipe/stories.tsx
index 09b40b0..8046bb9 100644
--- a/packages/yubaba/src/animations/Swipe/stories.tsx
+++ b/packages/core/src/animations/Swipe/stories.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Animator, { Swipe } from '../../../src';
-import * as Common from 'yubaba-common';
+import * as Common from '@element-motion/dev';
const Root = styled.button`
width: 100px;
@@ -49,7 +49,7 @@ const makeStory = (direction: string) => (
);
-storiesOf('yubaba/Swipe', module)
+storiesOf('@element-motion/core/Swipe', module)
.add('Up', () => makeStory('up'))
.add('Down', () => makeStory('down'))
.add('Left', () => makeStory('left'))
diff --git a/packages/yubaba/src/animations/types.tsx b/packages/core/src/animations/types.tsx
similarity index 100%
rename from packages/yubaba/src/animations/types.tsx
rename to packages/core/src/animations/types.tsx
diff --git a/packages/yubaba/src/index.tsx b/packages/core/src/index.tsx
similarity index 100%
rename from packages/yubaba/src/index.tsx
rename to packages/core/src/index.tsx
diff --git a/packages/yubaba/src/lib/animatorStore.tsx b/packages/core/src/lib/animatorStore.tsx
similarity index 100%
rename from packages/yubaba/src/lib/animatorStore.tsx
rename to packages/core/src/lib/animatorStore.tsx
diff --git a/packages/yubaba/src/lib/curves.tsx b/packages/core/src/lib/curves.tsx
similarity index 100%
rename from packages/yubaba/src/lib/curves.tsx
rename to packages/core/src/lib/curves.tsx
diff --git a/packages/yubaba/src/lib/defer.tsx b/packages/core/src/lib/defer.tsx
similarity index 100%
rename from packages/yubaba/src/lib/defer.tsx
rename to packages/core/src/lib/defer.tsx
diff --git a/packages/yubaba/src/lib/dom.tsx b/packages/core/src/lib/dom.tsx
similarity index 100%
rename from packages/yubaba/src/lib/dom.tsx
rename to packages/core/src/lib/dom.tsx
diff --git a/packages/yubaba/src/lib/duration/index.tsx b/packages/core/src/lib/duration/index.tsx
similarity index 100%
rename from packages/yubaba/src/lib/duration/index.tsx
rename to packages/core/src/lib/duration/index.tsx
diff --git a/packages/yubaba/src/lib/duration/test.tsx b/packages/core/src/lib/duration/test.tsx
similarity index 100%
rename from packages/yubaba/src/lib/duration/test.tsx
rename to packages/core/src/lib/duration/test.tsx
diff --git a/packages/yubaba/src/lib/log.tsx b/packages/core/src/lib/log.tsx
similarity index 64%
rename from packages/yubaba/src/lib/log.tsx
rename to packages/core/src/lib/log.tsx
index 01792ca..eb56204 100644
--- a/packages/yubaba/src/lib/log.tsx
+++ b/packages/core/src/lib/log.tsx
@@ -2,14 +2,14 @@ import pkg from '../../package.json';
export const precondition = (check: any, message: string) => {
if (!check) {
- throw new Error(`yubaba v${pkg.version}
+ throw new Error(`@element-motion/core v${pkg.version}
${message}`);
}
};
export const warn = (message: string) => {
- console.warn(`yubaba v${pkg.version}
+ console.warn(`@element-motion/core v${pkg.version}
${message}`);
};
diff --git a/packages/yubaba/src/lib/math.tsx b/packages/core/src/lib/math.tsx
similarity index 100%
rename from packages/yubaba/src/lib/math.tsx
rename to packages/core/src/lib/math.tsx
diff --git a/packages/yubaba/src/lib/noop.tsx b/packages/core/src/lib/noop.tsx
similarity index 100%
rename from packages/yubaba/src/lib/noop.tsx
rename to packages/core/src/lib/noop.tsx
diff --git a/packages/yubaba/src/lib/style.tsx b/packages/core/src/lib/style.tsx
similarity index 100%
rename from packages/yubaba/src/lib/style.tsx
rename to packages/core/src/lib/style.tsx
diff --git a/packages/yubaba/src/lib/types.tsx b/packages/core/src/lib/types.tsx
similarity index 100%
rename from packages/yubaba/src/lib/types.tsx
rename to packages/core/src/lib/types.tsx
diff --git a/packages/yubaba/tsconfig.cjs.json b/packages/core/tsconfig.cjs.json
similarity index 100%
rename from packages/yubaba/tsconfig.cjs.json
rename to packages/core/tsconfig.cjs.json
diff --git a/packages/yubaba/tsconfig.esm.json b/packages/core/tsconfig.esm.json
similarity index 100%
rename from packages/yubaba/tsconfig.esm.json
rename to packages/core/tsconfig.esm.json
diff --git a/packages/yubaba-common/CHANGELOG.md b/packages/dev/CHANGELOG.md
similarity index 100%
rename from packages/yubaba-common/CHANGELOG.md
rename to packages/dev/CHANGELOG.md
diff --git a/packages/yubaba-common/package.json b/packages/dev/package.json
similarity index 69%
rename from packages/yubaba-common/package.json
rename to packages/dev/package.json
index cfec350..7ac9f0e 100644
--- a/packages/yubaba-common/package.json
+++ b/packages/dev/package.json
@@ -1,12 +1,12 @@
{
- "name": "yubaba-common",
+ "name": "@element-motion/dev",
"private": true,
"version": "2.4.0",
- "repository": "madou/yubaba",
+ "repository": "madou/element-motion",
"author": "Michael Dougall",
"license": "MIT",
- "main": "dist/packages/yubaba-common/src/index.js",
- "module": "dist/packages/yubaba-common/src/index.js",
+ "main": "dist/packages/dev/src/index.js",
+ "module": "dist/packages/dev/src/index.js",
"scripts": {
"build": "rm -rf dist && tsc -p ./tsconfig.json"
},
diff --git a/packages/yubaba-common/src/RestoreScrollOnMount.tsx b/packages/dev/src/RestoreScrollOnMount.tsx
similarity index 100%
rename from packages/yubaba-common/src/RestoreScrollOnMount.tsx
rename to packages/dev/src/RestoreScrollOnMount.tsx
diff --git a/packages/yubaba-common/src/ScrollTopOnMount.tsx b/packages/dev/src/ScrollTopOnMount.tsx
similarity index 100%
rename from packages/yubaba-common/src/ScrollTopOnMount.tsx
rename to packages/dev/src/ScrollTopOnMount.tsx
diff --git a/packages/yubaba-common/src/SmallViewport.tsx b/packages/dev/src/SmallViewport.tsx
similarity index 100%
rename from packages/yubaba-common/src/SmallViewport.tsx
rename to packages/dev/src/SmallViewport.tsx
diff --git a/packages/yubaba-common/src/StickyButton.tsx b/packages/dev/src/StickyButton.tsx
similarity index 100%
rename from packages/yubaba-common/src/StickyButton.tsx
rename to packages/dev/src/StickyButton.tsx
diff --git a/packages/yubaba-common/src/Toggler.tsx b/packages/dev/src/Toggler.tsx
similarity index 100%
rename from packages/yubaba-common/src/Toggler.tsx
rename to packages/dev/src/Toggler.tsx
diff --git a/packages/yubaba-common/src/createMoveExamples/index.tsx b/packages/dev/src/createMoveExamples/index.tsx
similarity index 100%
rename from packages/yubaba-common/src/createMoveExamples/index.tsx
rename to packages/dev/src/createMoveExamples/index.tsx
diff --git a/packages/yubaba-common/src/createMoveExamples/styled.tsx b/packages/dev/src/createMoveExamples/styled.tsx
similarity index 100%
rename from packages/yubaba-common/src/createMoveExamples/styled.tsx
rename to packages/dev/src/createMoveExamples/styled.tsx
diff --git a/packages/yubaba-common/src/index.tsx b/packages/dev/src/index.tsx
similarity index 100%
rename from packages/yubaba-common/src/index.tsx
rename to packages/dev/src/index.tsx
diff --git a/packages/yubaba-common/tsconfig.json b/packages/dev/tsconfig.json
similarity index 100%
rename from packages/yubaba-common/tsconfig.json
rename to packages/dev/tsconfig.json
diff --git a/packages/yubaba/src/__docs__/1-introduction/styled.tsx b/packages/yubaba/src/__docs__/1-introduction/styled.tsx
deleted file mode 100644
index 6b91f2c..0000000
--- a/packages/yubaba/src/__docs__/1-introduction/styled.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-const { description } = require('../../../package.json');
-
-export const Description = () => {description}
;