From fe9daca83ab729ce9ff49f23783d9deb740c2077 Mon Sep 17 00:00:00 2001 From: madou Date: Sat, 25 May 2019 15:03:01 +1000 Subject: [PATCH] chore(package-name): rename to element motion --- README.md | 52 +++++++++--------- doczrc.js | 5 +- package.json | 11 ++-- packages/{yubaba => core}/.gitignore | 0 packages/{yubaba => core}/.npmignore | 0 packages/{yubaba => core}/CHANGELOG.md | 0 packages/{yubaba => core}/package.json | 24 ++++---- .../src/Animator/__docs__/docs.mdx | 6 +- .../src/Animator/__snapshots__/test.tsx.snap | 6 +- .../{yubaba => core}/src/Animator/index.tsx | 0 .../{yubaba => core}/src/Animator/stories.tsx | 2 +- .../{yubaba => core}/src/Animator/test.tsx | 2 +- .../{yubaba => core}/src/Animator/types.tsx | 0 .../src/Collector/__docs__/docs.mdx | 2 +- .../{yubaba => core}/src/Collector/index.tsx | 0 .../{yubaba => core}/src/Collector/test.tsx | 0 .../src/FocalTarget/__docs__/docs.mdx | 2 +- .../src/FocalTarget/index.tsx | 0 .../src/VisibilityManager/__docs__/docs.mdx | 2 +- .../src/VisibilityManager/index.tsx | 0 .../src/VisibilityManager/stories.tsx | 4 +- .../src/VisibilityManager/test.tsx | 0 .../src/Wait/__docs__/docs.mdx | 2 +- packages/{yubaba => core}/src/Wait/index.tsx | 0 .../src/__docs__/1-introduction/docs.mdx | 23 ++++---- .../src/__docs__/2-getting-started/docs.mdx | 16 +++--- .../__docs__/2-getting-started/images/1.png | Bin .../__docs__/2-getting-started/images/2.jpeg | Bin .../__docs__/2-getting-started/images/3.jpeg | Bin .../__docs__/2-getting-started/images/4.png | Bin .../__docs__/2-getting-started/images/5.png | Bin .../__docs__/2-getting-started/images/6.jpeg | Bin .../2-getting-started/images/avatar.jpg | Bin .../__docs__/2-getting-started/images/jg.jpg | Bin .../src/__docs__/2-getting-started/styled.tsx | 0 .../__docs__/3-advanced-usage/EmailChain.tsx | 2 +- .../3-advanced-usage/PopmotionMoveRight.tsx | 0 .../src/__docs__/3-advanced-usage/docs.mdx | 14 ++--- .../3-advanced-usage/images/ovechkin.jpg | Bin .../src/__docs__/3-advanced-usage/styled.tsx | 0 .../4-custom-animations/OneFullRotation.tsx | 0 .../SupportingAnimation.tsx | 0 .../src/__docs__/4-custom-animations/docs.mdx | 14 ++--- .../__docs__/4-custom-animations/styled.tsx | 0 .../src/__docs__/5-troubleshooting/docs.mdx | 2 +- .../__docs__/composite-components/docs.mdx | 2 +- .../src/__docs__/focal-animations/docs.mdx | 2 +- .../__docs__/supporting-animations/docs.mdx | 0 .../{yubaba => core}/src/__tests__/utils.tsx | 0 .../animations/CircleExpand/__docs__/docs.mdx | 4 +- .../CircleExpand/__docs__/styled.tsx | 0 .../src/animations/CircleExpand/index.tsx | 0 .../src/animations/CircleExpand/stories.tsx | 4 +- .../animations/CircleShrink/__docs__/docs.mdx | 4 +- .../CircleShrink/__docs__/styled.tsx | 0 .../src/animations/CircleShrink/index.tsx | 0 .../src/animations/CircleShrink/stories.tsx | 4 +- .../CrossFadeMove/__docs__/docs.mdx | 4 +- .../CrossFadeMove/__docs__/styled.tsx | 0 .../src/animations/CrossFadeMove/index.tsx | 0 .../src/animations/CrossFadeMove/stories.tsx | 4 +- .../src/animations/FadeMove/__docz__/docs.mdx | 4 +- .../animations/FadeMove/__docz__/styled.tsx | 0 .../src/animations/FadeMove/index.tsx | 0 .../src/animations/FadeMove/stories.tsx | 4 +- .../FocalConcealMove/__docs__/docs.mdx | 2 +- .../__docs__/images/foster.jpg | Bin .../FocalConcealMove/__docs__/styled.tsx | 0 .../src/animations/FocalConcealMove/index.tsx | 2 +- .../animations/FocalConcealMove/stories.tsx | 4 +- .../animations/FocalReveal/__docz__/docs.mdx | 4 +- .../src/animations/FocalReveal/index.tsx | 2 +- .../FocalRevealMove/__docs__/docs.mdx | 2 +- .../__docs__/images/halcyda.png | Bin .../FocalRevealMove/__docs__/styled.tsx | 0 .../src/animations/FocalRevealMove/index.tsx | 0 .../animations/FocalRevealMove/stories.tsx | 4 +- .../src/animations/Move/__docs__/docs.mdx | 4 +- .../src/animations/Move/__docs__/styled.tsx | 0 .../src/animations/Move/index.tsx | 2 +- .../src/animations/Move/stories.tsx | 4 +- .../src/animations/Noop/__docs__/docs.mdx | 2 +- .../src/animations/Noop/index.tsx | 0 .../__docz__/TripeHoverMenu.tsx | 2 +- .../ReshapingContainer/__docz__/docs.mdx | 2 +- .../ReshapingContainer/__docz__/styled.tsx | 0 .../animations/ReshapingContainer/index.tsx | 0 .../animations/ReshapingContainer/stories.tsx | 4 +- .../src/animations/Reveal/__docz__/docs.mdx | 4 +- .../src/animations/Reveal/index.tsx | 0 .../src/animations/Reveal/stories.tsx | 4 +- .../__docz__/docs.mdx | 4 +- .../__docz__/styled.tsx | 0 .../RevealReshapingContainer/index.tsx | 0 .../RevealReshapingContainer/stories.tsx | 4 +- .../src/animations/SimpleKeyframe.tsx | 0 .../src/animations/SimpleTween.tsx | 0 .../src/animations/Swipe/__docs__/docs.mdx | 4 +- .../src/animations/Swipe/__docs__/styled.tsx | 0 .../src/animations/Swipe/index.tsx | 0 .../src/animations/Swipe/stories.tsx | 4 +- .../{yubaba => core}/src/animations/types.tsx | 0 packages/{yubaba => core}/src/index.tsx | 0 .../src/lib/animatorStore.tsx | 0 packages/{yubaba => core}/src/lib/curves.tsx | 0 packages/{yubaba => core}/src/lib/defer.tsx | 0 packages/{yubaba => core}/src/lib/dom.tsx | 0 .../src/lib/duration/index.tsx | 0 .../src/lib/duration/test.tsx | 0 packages/{yubaba => core}/src/lib/log.tsx | 4 +- packages/{yubaba => core}/src/lib/math.tsx | 0 packages/{yubaba => core}/src/lib/noop.tsx | 0 packages/{yubaba => core}/src/lib/style.tsx | 0 packages/{yubaba => core}/src/lib/types.tsx | 0 packages/{yubaba => core}/tsconfig.cjs.json | 0 packages/{yubaba => core}/tsconfig.esm.json | 0 packages/{yubaba-common => dev}/CHANGELOG.md | 0 packages/{yubaba-common => dev}/package.json | 8 +-- .../src/RestoreScrollOnMount.tsx | 0 .../src/ScrollTopOnMount.tsx | 0 .../src/SmallViewport.tsx | 0 .../src/StickyButton.tsx | 0 .../{yubaba-common => dev}/src/Toggler.tsx | 0 .../src/createMoveExamples/index.tsx | 0 .../src/createMoveExamples/styled.tsx | 0 packages/{yubaba-common => dev}/src/index.tsx | 0 packages/{yubaba-common => dev}/tsconfig.json | 0 .../src/__docs__/1-introduction/styled.tsx | 5 -- 128 files changed, 150 insertions(+), 158 deletions(-) rename packages/{yubaba => core}/.gitignore (100%) rename packages/{yubaba => core}/.npmignore (100%) rename packages/{yubaba => core}/CHANGELOG.md (100%) rename packages/{yubaba => core}/package.json (64%) rename packages/{yubaba => core}/src/Animator/__docs__/docs.mdx (92%) rename packages/{yubaba => core}/src/Animator/__snapshots__/test.tsx.snap (98%) rename packages/{yubaba => core}/src/Animator/index.tsx (100%) rename packages/{yubaba => core}/src/Animator/stories.tsx (98%) rename packages/{yubaba => core}/src/Animator/test.tsx (99%) rename packages/{yubaba => core}/src/Animator/types.tsx (100%) rename packages/{yubaba => core}/src/Collector/__docs__/docs.mdx (94%) rename packages/{yubaba => core}/src/Collector/index.tsx (100%) rename packages/{yubaba => core}/src/Collector/test.tsx (100%) rename packages/{yubaba => core}/src/FocalTarget/__docs__/docs.mdx (93%) rename packages/{yubaba => core}/src/FocalTarget/index.tsx (100%) rename packages/{yubaba => core}/src/VisibilityManager/__docs__/docs.mdx (95%) rename packages/{yubaba => core}/src/VisibilityManager/index.tsx (100%) rename packages/{yubaba => core}/src/VisibilityManager/stories.tsx (97%) rename packages/{yubaba => core}/src/VisibilityManager/test.tsx (100%) rename packages/{yubaba => core}/src/Wait/__docs__/docs.mdx (89%) rename packages/{yubaba => core}/src/Wait/index.tsx (100%) rename packages/{yubaba => core}/src/__docs__/1-introduction/docs.mdx (67%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/docs.mdx (96%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/1.png (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/2.jpeg (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/3.jpeg (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/4.png (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/5.png (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/6.jpeg (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/avatar.jpg (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/images/jg.jpg (100%) rename packages/{yubaba => core}/src/__docs__/2-getting-started/styled.tsx (100%) rename packages/{yubaba => core}/src/__docs__/3-advanced-usage/EmailChain.tsx (99%) rename packages/{yubaba => core}/src/__docs__/3-advanced-usage/PopmotionMoveRight.tsx (100%) rename packages/{yubaba => core}/src/__docs__/3-advanced-usage/docs.mdx (95%) rename packages/{yubaba => core}/src/__docs__/3-advanced-usage/images/ovechkin.jpg (100%) rename packages/{yubaba => core}/src/__docs__/3-advanced-usage/styled.tsx (100%) rename packages/{yubaba => core}/src/__docs__/4-custom-animations/OneFullRotation.tsx (100%) rename packages/{yubaba => core}/src/__docs__/4-custom-animations/SupportingAnimation.tsx (100%) rename packages/{yubaba => core}/src/__docs__/4-custom-animations/docs.mdx (94%) rename packages/{yubaba => core}/src/__docs__/4-custom-animations/styled.tsx (100%) rename packages/{yubaba => core}/src/__docs__/5-troubleshooting/docs.mdx (93%) rename packages/{yubaba => core}/src/__docs__/composite-components/docs.mdx (76%) rename packages/{yubaba => core}/src/__docs__/focal-animations/docs.mdx (89%) rename packages/{yubaba => core}/src/__docs__/supporting-animations/docs.mdx (100%) rename packages/{yubaba => core}/src/__tests__/utils.tsx (100%) rename packages/{yubaba => core}/src/animations/CircleExpand/__docs__/docs.mdx (92%) rename packages/{yubaba => core}/src/animations/CircleExpand/__docs__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/CircleExpand/index.tsx (100%) rename packages/{yubaba => core}/src/animations/CircleExpand/stories.tsx (96%) rename packages/{yubaba => core}/src/animations/CircleShrink/__docs__/docs.mdx (92%) rename packages/{yubaba => core}/src/animations/CircleShrink/__docs__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/CircleShrink/index.tsx (100%) rename packages/{yubaba => core}/src/animations/CircleShrink/stories.tsx (96%) rename packages/{yubaba => core}/src/animations/CrossFadeMove/__docs__/docs.mdx (92%) rename packages/{yubaba => core}/src/animations/CrossFadeMove/__docs__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/CrossFadeMove/index.tsx (100%) rename packages/{yubaba => core}/src/animations/CrossFadeMove/stories.tsx (70%) rename packages/{yubaba => core}/src/animations/FadeMove/__docz__/docs.mdx (92%) rename packages/{yubaba => core}/src/animations/FadeMove/__docz__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/FadeMove/index.tsx (100%) rename packages/{yubaba => core}/src/animations/FadeMove/stories.tsx (70%) rename packages/{yubaba => core}/src/animations/FocalConcealMove/__docs__/docs.mdx (98%) rename packages/{yubaba => core}/src/animations/FocalConcealMove/__docs__/images/foster.jpg (100%) rename packages/{yubaba => core}/src/animations/FocalConcealMove/__docs__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/FocalConcealMove/index.tsx (99%) rename packages/{yubaba => core}/src/animations/FocalConcealMove/stories.tsx (96%) rename packages/{yubaba => core}/src/animations/FocalReveal/__docz__/docs.mdx (83%) rename packages/{yubaba => core}/src/animations/FocalReveal/index.tsx (99%) rename packages/{yubaba => core}/src/animations/FocalRevealMove/__docs__/docs.mdx (98%) rename packages/{yubaba => core}/src/animations/FocalRevealMove/__docs__/images/halcyda.png (100%) rename packages/{yubaba => core}/src/animations/FocalRevealMove/__docs__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/FocalRevealMove/index.tsx (100%) rename packages/{yubaba => core}/src/animations/FocalRevealMove/stories.tsx (98%) rename packages/{yubaba => core}/src/animations/Move/__docs__/docs.mdx (92%) rename packages/{yubaba => core}/src/animations/Move/__docs__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/Move/index.tsx (99%) rename packages/{yubaba => core}/src/animations/Move/stories.tsx (70%) rename packages/{yubaba => core}/src/animations/Noop/__docs__/docs.mdx (83%) rename packages/{yubaba => core}/src/animations/Noop/index.tsx (100%) rename packages/{yubaba => core}/src/animations/ReshapingContainer/__docz__/TripeHoverMenu.tsx (98%) rename packages/{yubaba => core}/src/animations/ReshapingContainer/__docz__/docs.mdx (95%) rename packages/{yubaba => core}/src/animations/ReshapingContainer/__docz__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/ReshapingContainer/index.tsx (100%) rename packages/{yubaba => core}/src/animations/ReshapingContainer/stories.tsx (96%) rename packages/{yubaba => core}/src/animations/Reveal/__docz__/docs.mdx (85%) rename packages/{yubaba => core}/src/animations/Reveal/index.tsx (100%) rename packages/{yubaba => core}/src/animations/Reveal/stories.tsx (90%) rename packages/{yubaba => core}/src/animations/RevealReshapingContainer/__docz__/docs.mdx (97%) rename packages/{yubaba => core}/src/animations/RevealReshapingContainer/__docz__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/RevealReshapingContainer/index.tsx (100%) rename packages/{yubaba => core}/src/animations/RevealReshapingContainer/stories.tsx (96%) rename packages/{yubaba => core}/src/animations/SimpleKeyframe.tsx (100%) rename packages/{yubaba => core}/src/animations/SimpleTween.tsx (100%) rename packages/{yubaba => core}/src/animations/Swipe/__docs__/docs.mdx (88%) rename packages/{yubaba => core}/src/animations/Swipe/__docs__/styled.tsx (100%) rename packages/{yubaba => core}/src/animations/Swipe/index.tsx (100%) rename packages/{yubaba => core}/src/animations/Swipe/stories.tsx (94%) rename packages/{yubaba => core}/src/animations/types.tsx (100%) rename packages/{yubaba => core}/src/index.tsx (100%) rename packages/{yubaba => core}/src/lib/animatorStore.tsx (100%) rename packages/{yubaba => core}/src/lib/curves.tsx (100%) rename packages/{yubaba => core}/src/lib/defer.tsx (100%) rename packages/{yubaba => core}/src/lib/dom.tsx (100%) rename packages/{yubaba => core}/src/lib/duration/index.tsx (100%) rename packages/{yubaba => core}/src/lib/duration/test.tsx (100%) rename packages/{yubaba => core}/src/lib/log.tsx (64%) rename packages/{yubaba => core}/src/lib/math.tsx (100%) rename packages/{yubaba => core}/src/lib/noop.tsx (100%) rename packages/{yubaba => core}/src/lib/style.tsx (100%) rename packages/{yubaba => core}/src/lib/types.tsx (100%) rename packages/{yubaba => core}/tsconfig.cjs.json (100%) rename packages/{yubaba => core}/tsconfig.esm.json (100%) rename packages/{yubaba-common => dev}/CHANGELOG.md (100%) rename packages/{yubaba-common => dev}/package.json (69%) rename packages/{yubaba-common => dev}/src/RestoreScrollOnMount.tsx (100%) rename packages/{yubaba-common => dev}/src/ScrollTopOnMount.tsx (100%) rename packages/{yubaba-common => dev}/src/SmallViewport.tsx (100%) rename packages/{yubaba-common => dev}/src/StickyButton.tsx (100%) rename packages/{yubaba-common => dev}/src/Toggler.tsx (100%) rename packages/{yubaba-common => dev}/src/createMoveExamples/index.tsx (100%) rename packages/{yubaba-common => dev}/src/createMoveExamples/styled.tsx (100%) rename packages/{yubaba-common => dev}/src/index.tsx (100%) rename packages/{yubaba-common => dev}/tsconfig.json (100%) delete mode 100644 packages/yubaba/src/__docs__/1-introduction/styled.tsx 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/) πŸ’¨βœ¨ -[![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) -Moving from a persisted element -Moving to another distinct element -Moving using a focal target +Moving from a persisted element +Moving to another distinct element +Moving using a focal target -## 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/) πŸ’¨βœ¨ -[![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) -## 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}

;