Skip to content

Commit cced852

Browse files
brianespinosabrianespinosa
committed
Add Presence Animation
1 parent f3fa44f commit cced852

File tree

4 files changed

+130
-2
lines changed

4 files changed

+130
-2
lines changed

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.14

‎packages/mdx/package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"cssnano": "^4.1.10",
6565
"diff": "^4.0.2",
6666
"esbuild": "^0.13.2",
67+
"framer-motion": "6.5.1",
6768
"mdx-bundler": "^8.0.1",
6869
"mdx-debugger": "^0.2.0",
6970
"next": "^12.1.0",
@@ -81,8 +82,13 @@
8182
"vite": "^2.8.6",
8283
"vitest": "^0.5.9"
8384
},
85+
"resolutions": {
86+
"@types/react": "17.0.45",
87+
"@types/react-dom": "17.0.2"
88+
},
8489
"peerDependencies": {
85-
"react": "^16.8.3 || ^17 || ^18"
90+
"react": "^16.8.3 || ^17 || ^18",
91+
"framer-motion": "^6.5.1"
8692
},
8793
"repository": "code-hike/codehike",
8894
"license": "MIT",

‎packages/mdx/src/mdx-client/slideshow.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { EditorProps, EditorStep } from "../mini-editor"
33
import { InnerCode, updateEditorStep } from "./code"
44
import { Preview, PresetConfig } from "./preview"
55
import { extractPreviewSteps } from "./steps"
6+
import { AnimatePresence } from "framer-motion"
67

78
export function Slideshow({
89
children,
@@ -130,7 +131,11 @@ export function Slideshow({
130131

131132
{hasNotes && (
132133
<div className="ch-slideshow-note">
133-
{stepsChildren[state.stepIndex]}
134+
<AnimatePresence>
135+
<>
136+
{stepsChildren[state.stepIndex]}
137+
</>
138+
</AnimatePresence>
134139
</div>
135140
)}
136141
</div>

‎yarn.lock

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3012,6 +3012,18 @@
30123012
resolved "https://registry.yarnpkg.com/@effect-ts/system/-/system-0.55.1.tgz#fe157e7639ff6b05a51b62379961662569da98fb"
30133013
integrity sha512-OEnwd9JhrV2Q5S7cke/ZgR56Hn75DSr1aIkA0PBE1edoX6GKB6nOdu8u/vPhvqjxLHfMgN8o+EVaWUHPLIC1UQ==
30143014

3015+
"@emotion/is-prop-valid@^0.8.2":
3016+
version "0.8.8"
3017+
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
3018+
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
3019+
dependencies:
3020+
"@emotion/memoize" "0.7.4"
3021+
3022+
"@emotion/[email protected]":
3023+
version "0.7.4"
3024+
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
3025+
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
3026+
30153027
"@endemolshinegroup/cosmiconfig-typescript-loader@^3.0.2":
30163028
version "3.0.2"
30173029
resolved "https://registry.yarnpkg.com/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz#eea4635828dde372838b0909693ebd9aafeec22d"
@@ -3992,6 +4004,59 @@
39924004
"@monaco-editor/loader" "^1.3.2"
39934005
prop-types "^15.7.2"
39944006

4007+
"@motionone/animation@^10.12.0":
4008+
version "10.13.1"
4009+
resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.13.1.tgz#ebacb50df4b7eb4957cf398c221ae10852f28520"
4010+
integrity sha512-dxQ+1wWxL6iFHDy1uv6hhcPjIdOg36eDT56jN4LI7Z5HZRyLpq8x1t7JFQclo/IEIb+6Bk4atmyinGFdXVECuA==
4011+
dependencies:
4012+
"@motionone/easing" "^10.13.1"
4013+
"@motionone/types" "^10.13.0"
4014+
"@motionone/utils" "^10.13.1"
4015+
tslib "^2.3.1"
4016+
4017+
"@motionone/[email protected]":
4018+
version "10.12.0"
4019+
resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
4020+
integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
4021+
dependencies:
4022+
"@motionone/animation" "^10.12.0"
4023+
"@motionone/generators" "^10.12.0"
4024+
"@motionone/types" "^10.12.0"
4025+
"@motionone/utils" "^10.12.0"
4026+
hey-listen "^1.0.8"
4027+
tslib "^2.3.1"
4028+
4029+
"@motionone/easing@^10.13.1":
4030+
version "10.13.1"
4031+
resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.13.1.tgz#7927b7fe96135989e37c2cda957e4101a4b85aa8"
4032+
integrity sha512-INEsInHHDHVgx0dp5qlXi1lMXBqYicgLMMSn3zfGzaIvcaEbI1Uz8BoyNV4BiclTupG7RYIh+T6BU83ZcEe74g==
4033+
dependencies:
4034+
"@motionone/utils" "^10.13.1"
4035+
tslib "^2.3.1"
4036+
4037+
"@motionone/generators@^10.12.0":
4038+
version "10.13.1"
4039+
resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.13.1.tgz#d4989d887b864e0aefbbec63eed35ce298a73773"
4040+
integrity sha512-+HK5u2YcNJCckTTqfOLgSVcrWv2z1dVwrSZEMVJuAh0EnWEWGDJRvMBoPc0cFf/osbkA2Rq9bH2+vP0Ex/D8uw==
4041+
dependencies:
4042+
"@motionone/types" "^10.13.0"
4043+
"@motionone/utils" "^10.13.1"
4044+
tslib "^2.3.1"
4045+
4046+
"@motionone/types@^10.12.0", "@motionone/types@^10.13.0":
4047+
version "10.13.0"
4048+
resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.13.0.tgz#b22c549931ebd88ed5528158b5d611dc9dbb3756"
4049+
integrity sha512-qegk4qg8U1N9ZwAJ187BG3TkZz1k9LP/pvNtCSlqdq/PMUDKlCFG4ZnjJ481P0IOH/vIw1OzIbKIuyg0A3rk9g==
4050+
4051+
"@motionone/utils@^10.12.0", "@motionone/utils@^10.13.1":
4052+
version "10.13.1"
4053+
resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.13.1.tgz#14919dfcda36b54b184fff690bc0125d554f60cd"
4054+
integrity sha512-TjDPTIppaf3ofBXQv4ZzAketJgN0sclALXfZ6mfrkjJkOy83mLls9744F+6S+VKCpBmvbZcBY4PQfrfhAfeMtA==
4055+
dependencies:
4056+
"@motionone/types" "^10.13.0"
4057+
hey-listen "^1.0.8"
4058+
tslib "^2.3.1"
4059+
39954060
"@next/[email protected]":
39964061
version "12.1.0"
39974062
resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.0.tgz#73713399399b34aa5a01771fb73272b55b22c314"
@@ -5150,6 +5215,13 @@
51505215
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
51515216
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
51525217

5218+
"@types/[email protected]":
5219+
version "17.0.2"
5220+
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
5221+
integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==
5222+
dependencies:
5223+
"@types/react" "*"
5224+
51535225
"@types/react-dom@^17.0.2":
51545226
version "17.0.17"
51555227
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
@@ -9561,6 +9633,27 @@ fraction.js@^4.2.0:
95619633
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
95629634
integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
95639635

9636+
[email protected]:
9637+
version "6.5.1"
9638+
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
9639+
integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
9640+
dependencies:
9641+
"@motionone/dom" "10.12.0"
9642+
framesync "6.0.1"
9643+
hey-listen "^1.0.8"
9644+
popmotion "11.0.3"
9645+
style-value-types "5.0.0"
9646+
tslib "^2.1.0"
9647+
optionalDependencies:
9648+
"@emotion/is-prop-valid" "^0.8.2"
9649+
9650+
[email protected]:
9651+
version "6.0.1"
9652+
resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
9653+
integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
9654+
dependencies:
9655+
tslib "^2.1.0"
9656+
95649657
[email protected]:
95659658
version "0.5.2"
95669659
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -10308,6 +10401,11 @@ hex-color-regex@^1.1.0:
1030810401
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
1030910402
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
1031010403

10404+
hey-listen@^1.0.8:
10405+
version "1.0.8"
10406+
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
10407+
integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
10408+
1031110409
history@^4.9.0:
1031210410
version "4.10.1"
1031310411
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -13944,6 +14042,16 @@ point-in-polygon@^1.1.0:
1394414042
resolved "https://registry.yarnpkg.com/point-in-polygon/-/point-in-polygon-1.1.0.tgz#b0af2616c01bdee341cbf2894df643387ca03357"
1394514043
integrity sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw==
1394614044

14045+
[email protected]:
14046+
version "11.0.3"
14047+
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
14048+
integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
14049+
dependencies:
14050+
framesync "6.0.1"
14051+
hey-listen "^1.0.8"
14052+
style-value-types "5.0.0"
14053+
tslib "^2.1.0"
14054+
1394714055
postcss-calc@^7.0.1:
1394814056
version "7.0.5"
1394914057
resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
@@ -16691,6 +16799,14 @@ [email protected], style-to-object@^0.3.0:
1669116799
dependencies:
1669216800
inline-style-parser "0.1.1"
1669316801

16802+
[email protected]:
16803+
version "5.0.0"
16804+
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
16805+
integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
16806+
dependencies:
16807+
hey-listen "^1.0.8"
16808+
tslib "^2.1.0"
16809+
1669416810
[email protected]:
1669516811
version "5.0.0"
1669616812
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0.tgz#816b4b92e07b1786c6b7111821750e0ba4d26e77"

0 commit comments

Comments
 (0)