Skip to content
This repository was archived by the owner on Apr 14, 2020. It is now read-only.

Commit fe9daca

Browse files
itsdougesitsdouges
committed
chore(package-name): rename to element motion
1 parent 80750c8 commit fe9daca

128 files changed

Lines changed: 150 additions & 158 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,49 @@
1-
# yubaba 🧙✨
1+
<h1>
2+
<img aria-label="element motion" src="https://user-images.githubusercontent.com/6801309/58364853-bf21cd80-7efd-11e9-8300-df952b3a03c8.png" height="100" />
3+
</h1>
24

3-
/juːbaːba/ out of the box animated experiences for [React.js](https://reactjs.org/) 🧙✨
5+
formerly `yubaba` - element motion for [React.js](https://reactjs.org/) 💨✨
46

5-
[![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)
7+
[![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)
68

7-
<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>
8-
<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>
9-
<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>
9+
<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>
10+
<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>
11+
<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>
1012

11-
## What is yubaba???
13+
## Why element motion?
1214

13-
It's all about ✨**animation over state transitions** ✨it can help with:
15+
It's all about ✨**motion over state transitions** ✨it can help with:
1416

15-
- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
16-
- 🚚 [Moving an element](https://yubabajs.com/move) from one location to another
17-
- 💨 [Revealing elements](https://yubabajs.com/focal-reveal-move) inside another element
18-
- 👓 [Supporting animations](https://yubabajs.com/supporting-animations) by obstructing elements in view
19-
- 🤫 [Hiding children elements](https://yubabajs.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users
20-
- 🔢 [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)
21-
- 📝 Composing animations together to create composite animations, for example [CrossFadeMove](https://yubabajs.com/cross-fade-move)
22-
- 🤯 [Anything you can imagine](https://yubabajs.com/custom-animations), seriously
17+
- 📴 Enabling animations to be possible between disconnected elements in the React tree
18+
- 🚚 [Moving an element](https://elementmotion.com/move) from one location to another
19+
- 💨 [Revealing elements](https://elementmotion.com/focal-reveal-move) inside another element
20+
- 👓 [Supporting animations](https://elementmotion.com/supporting-animations) by obstructing elements in view
21+
- 🤫 [Hiding children elements](https://elementmotion.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users
22+
- 🔢 [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)
23+
- 📝 Composing animations together to create composite animations, for example [CrossFadeMove](https://elementmotion.com/cross-fade-move)
24+
- 🤯 [Anything you can imagine](https://elementmotion.com/custom-animations), seriously
2325

2426
## Installation
2527

26-
`yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
27-
2828
```bash
29-
npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x --save
29+
npm install @element-motion/core react react-dom emotion --save
3030
```
3131

3232
or
3333

3434
```bash
35-
yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x
35+
yarn add @element-motion/core react react-dom emotion
3636
```
3737

38+
React should be greater or equal to `v16.4`, emotion should be greater or equal to `v9`.
39+
3840
> **Tip -** Both es and commonjs modules are provided in the package.
3941
> Make sure to consume the es modules for their tree shaking ability!
4042
4143
## Usage
4244

4345
```js
44-
import Animator, { Move } from 'yubaba';
46+
import Animator, { Move } from '@element-motion/core';
4547

4648
({ isLarge }) => (
4749
<Animator triggerSelfKey={isLarge}>
@@ -52,7 +54,7 @@ import Animator, { Move } from 'yubaba';
5254

5355
## Next steps
5456

55-
- **First time** here? After installing head over to [Getting started](https://yubabajs.com/getting-started) to start learning the basics
56-
- Interested in **animating an element**? Check out [Focal animations](https://yubabajs.com/focal-animations)
57-
- For **ready made experiences** check out [Composite components](https://yubabajs.com/composite-components), just grab them and go!
58-
- Having **trouble**? Maybe [Troubleshooting](https://yubabajs.com/troubleshooting) has your answers
57+
- **First time** here? After installing head over to [Getting started](https://elementmotion.com/getting-started) to start learning the basics
58+
- Interested in **animating an element**? Check out [Focal animations](https://elementmotion.com/focal-animations)
59+
- For **ready made experiences** check out [Composite components](https://elementmotion.com/composite-components), just grab them and go!
60+
- Having **trouble**? Maybe [Troubleshooting](https://elementmotion.com/troubleshooting) has your answers

‎doczrc.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
const pkg = require('./packages/yubaba/package.json');
21
const { css } = require('styled-components'); // eslint-disable-line
32

43
const primary = 'rgb(133, 47, 255)';
@@ -7,8 +6,8 @@ const primaryText = 'rgba(255, 255, 255, 0.95)';
76
const background = `linear-gradient(135deg, ${altPrimary} 25%, ${primary} 100%)`;
87

98
module.exports = {
10-
title: `yubaba ${pkg.description}`,
11-
description: `yubaba ${pkg.description}`,
9+
title: 'element motion for React.js 💨✨',
10+
description: 'element motion for React.js 💨✨',
1211
typescript: true,
1312
dest: '/docs',
1413
codeSandbox: false,

‎package.json‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
{
2-
"name": "yubaba-repo",
2+
"name": "element-motion",
33
"private": true,
4-
"repository": "madou/yubaba",
4+
"repository": "madou/element-motion",
55
"author": "Michael Dougall",
66
"license": "MIT",
7-
"files": [
8-
"dist/"
9-
],
107
"scripts": {
118
"tdd": "jest --watch",
129
"build": "lerna run build",
1310
"lint": "eslint --ext .tsx .",
1411
"test": "jest",
15-
"size": "lerna exec --ignore yubaba-common -- yarn size",
12+
"size": "lerna exec --ignore @element-motion/dev -- yarn size",
1613
"pre-cut-version": "yarn test",
1714
"postinstall": "yarn build && lerna link",
1815
"cut-version": "yarn pre-cut-version && lerna publish --conventional-commits --skip-npm && yarn post-cut-version",
1916
"cut-version-beta": "yarn pre-cut-version && lerna publish --skip-npm --npm-tag beta && yarn post-cut-version",
2017
"post-cut-version": "git push && git push --tags",
21-
"push-to-npm": "lerna exec --ignore yubaba-common -- npm publish",
18+
"push-to-npm": "lerna exec --ignore @element-motion/dev -- npm publish",
2219
"codecov": "echo \"not implemented\"",
2320
"storybook": "start-storybook -p 6006",
2421
"fix-duplicates": "yarn-tools fix-duplicates yarn.lock > fixed-yarn.lock && rm yarn.lock && mv fixed-yarn.lock yarn.lock && yarn install",

packages/yubaba/.gitignore renamed to packages/core/.gitignore

File renamed without changes.

packages/yubaba/.npmignore renamed to packages/core/.npmignore

File renamed without changes.

packages/yubaba/CHANGELOG.md renamed to packages/core/CHANGELOG.md

File renamed without changes.

packages/yubaba/package.json renamed to packages/core/package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
{
2-
"name": "yubaba",
2+
"name": "@element-motion/core",
33
"version": "2.4.1",
4-
"repository": "madou/yubaba",
4+
"repository": "madou/element-motion",
55
"author": "Michael Dougall",
66
"license": "MIT",
7-
"main": "dist/cjs/packages/yubaba/src/index.js",
8-
"module": "dist/esm/packages/yubaba/src/index.js",
7+
"main": "dist/cjs/packages/core/src/index.js",
8+
"module": "dist/esm/packages/core/src/index.js",
99
"sideEffects": false,
10-
"description": "/juːbaːba/ out of the box animated experiences for React.js 🧙✨",
10+
"description": "element motion for React.js 🧙✨",
1111
"keywords": [
1212
"react",
1313
"flip",
1414
"animation",
1515
"transition",
16-
"magic-move",
17-
"reactjs",
18-
"element-to-element",
19-
"material-transition"
16+
"element",
17+
"element-motion",
18+
"material-motion",
19+
"motion"
2020
],
2121
"scripts": {
2222
"build": "rm -rf dist && tsc -p ./tsconfig.cjs.json && tsc -p ./tsconfig.esm.json && cp ../../README.md README.md",
@@ -25,7 +25,7 @@
2525
"size-limit": [
2626
{
2727
"limit": "7 KB",
28-
"path": "dist/esm/packages/yubaba/src/index.js"
28+
"path": "dist/esm/packages/core/src/index.js"
2929
}
3030
],
3131
"peerDependencies": {
@@ -34,6 +34,7 @@
3434
"react-dom": ">=16.4"
3535
},
3636
"devDependencies": {
37+
"@element-motion/dev": "^2.4.0",
3738
"@storybook/react": "5.0.11",
3839
"emotion": "^10.0.9",
3940
"polished": "^3.3.0",
@@ -44,7 +45,6 @@
4445
"react-router-dom": "^5.0.0",
4546
"react-select": "^2.4.2",
4647
"size-limit": "^1.3.2",
47-
"styled-components": "^4.2.0",
48-
"yubaba-common": "^2.4.0"
48+
"styled-components": "^4.2.0"
4949
}
5050
}

packages/yubaba/src/Animator/__docs__/docs.mdx renamed to packages/core/src/Animator/__docs__/docs.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ It will animate between an element that unmounts and an element that mounts over
2828
[Moving to another element](/getting-started#moving-to-another-element) is a good example of this.
2929

3030
```js
31-
import Animator, { Move } from 'yubaba';
31+
import Animator, { Move } from '@element-motion/core';
3232

3333
({ isShown }) => [
3434
!isShown && (
@@ -50,7 +50,7 @@ Using the `triggerSelfKey` prop to force an animation on itself over a state cha
5050
[Moving to the same element](/getting-started#moving-to-the-same-element) is a good example of this.
5151

5252
```js
53-
import Animator, { Move } from 'yubaba';
53+
import Animator, { Move } from '@element-motion/core';
5454

5555
({ children, itemId }) => (
5656
<Animator triggerSelfKey={itemId}>
@@ -69,7 +69,7 @@ Using the `in` prop to mark a persisted component if it is considered in or not.
6969
[Moving from a persisted element](/getting-started#moving-from-a-persisted-element) is a good example of this.
7070

7171
```js
72-
import Animator, { Move } from 'yubaba';
72+
import Animator, { Move } from '@element-motion/core';
7373

7474
({ isShown }) => [
7575
<Animator name="default" in={!isShown}>

packages/yubaba/src/Animator/__snapshots__/test.tsx.snap renamed to packages/core/src/Animator/__snapshots__/test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`<Animator /> persisted animations should throw when changing into "in" after initial mount 1`] = `
4-
"yubaba v0.0.0
4+
"@element-motion/core v0.0.0
55
66
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."
77
`;
88

99
exports[`<Animator /> self targetted animations should throw when changing into "triggerSelfKey" after initial mount 1`] = `
10-
"yubaba v0.0.0
10+
"@element-motion/core v0.0.0
1111
1212
You're switching between self triggering modes, don't do this. Either always set the \\"triggerSelfKey\\" prop, or keep as undefined."
1313
`;
1414

1515
exports[`<Animator /> self targetted animations should throw when using both "in" and "triggerSelfKey" props after initial mount 1`] = `
16-
"yubaba v0.0.0
16+
"@element-motion/core v0.0.0
1717
1818
Don't use \\"in\\" and \\"triggerSelfKey\\" together. If your element is persisted use \\"in\\". If your element is targeting itself for animations use \\"triggerSelfKey\\"."
1919
`;

packages/yubaba/src/Animator/index.tsx renamed to packages/core/src/Animator/index.tsx

File renamed without changes.

0 commit comments

Comments
 (0)