Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: recommend framer-motion name installation instead of motion/react #2443

Merged
merged 5 commits into from
Dec 10, 2024
Merged

fix: recommend framer-motion name installation instead of motion/react #2443

merged 5 commits into from
Dec 10, 2024

Conversation

saurabhdaware
Copy link
Member

@saurabhdaware saurabhdaware commented Dec 10, 2024 •
edited
Loading

Description

So due the name change of framer-motion -> motion. There's several gotchas that we end up with on consumer depending on bundlers and package installers they are using. E.g.

  • pnpm fails when you install subdependency because it has flat directory structure so there we have to provide extra custom config that resolves the correct package. But it works fine in yarn and npm
  • vite is resolving motion and framer-motion as separate instances for some reasons so provider of motion + animation from framer-motion is not working correctly
  • I tried to mark motion as external package in build but that too starts throwing other babel issues

There are configs and ways to solve these for each bundler and package installer but that makes our upgrade guide confusing and things can break with those hacky setups

So for now to simplify setups, I've changed docs to recommend framer-motion installation only as I can see them shipping new versions there. Since v11 is there under framer-motion name as well we should be good for some time now

Changes

Changes instances from motion to framer-motion in docs and stackblitz

Additional Information

Component Checklist

  • Update Component Status Page
  • Perform Manual Testing in Other Browsers
  • Add KitchenSink Story
  • Add Interaction Tests (if applicable)
  • Add changeset

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 10, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 16a0afe

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@saurabhdaware saurabhdaware marked this pull request as draft December 10, 2024 07:59
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 10, 2024 •
edited
Loading

✅ PR title follows Conventional Commits specification.

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Dec 10, 2024 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 16a0afe:

Sandbox Source
razorpay/blade: basic Configuration

@rzpcibot
Copy link
Collaborator

rzpcibot commented Dec 10, 2024 •
edited
Loading

Bundle Size Report

Updated Components
Status Component Base Size (kb) Current Size (kb) Diff
⬆ Accordion, AccordionItemHeader, AccordionItemBody, AccordionItem 8.048 8.146 +0.098 KB
⬆ ActionList, ActionListItem, ActionListItemAvatar, ActionListItemBadge, ActionListItemBadgeGroup, ActionListItemIcon, ActionListItemText, ActionListSection 16.499 16.634 +0.135 KB
⬇ Alert 11.622 11.537 -0.085 KB
⬆ Amount 1.310 1.344 +0.034 KB
⬆ Avatar, AvatarGroup, TrustedBadgeIcon 6.303 6.334 +0.031 KB
⬆ Badge 0.833 0.890 +0.057 KB
⬆ useBaseMenuItem -0.109 -0.042 +0.067 KB
⬆ MotionDiv 0.000 -0.046 +-0.046 KB
⬆ BladeProvider 1.647 1.716 +0.069 KB
⬆ BottomNav, BottomNavItem 1.021 1.096 +0.075 KB
⬆ BottomSheet 9.541 9.603 +0.062 KB
⬆ Box 0.805 0.861 +0.056 KB
⬆ Breadcrumb, BreadcrumbItem 2.602 2.645 +0.043 KB
⬆ ButtonGroup 1.156 1.210 +0.054 KB
⬇ Card, CardBody, CardHeader, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderTrailing, CardFooter, CardFooterLeading, CardFooterTrailing 9.414 9.367 -0.047 KB
⬇ Carousel, CarouselItem 7.306 7.139 -0.167 KB
⬆ Checkbox 6.267 6.382 +0.115 KB
⬇ Chip, ChipGroup 8.564 8.504 -0.060 KB
⬇ Collapsible, CollapsibleLink, CollapsibleButton, CollapsibleBody 9.806 9.756 -0.050 KB
⬆ Counter 0.782 0.842 +0.060 KB
⬆ DatePicker 86.510 86.656 +0.146 KB
⬆ Divider 0.549 0.550 +0.001 KB
⬆ Drawer, DrawerBody, DrawerHeader, drawerPadding 17.340 17.386 +0.046 KB
⬆ Dropdown, DropdownOverlay, DropdownButton, DropdownLink, DropdownFooter, DropdownHeader 28.624 28.831 +0.207 KB
⬆ Fade 0.000 1.066 +1.066 KB
⬆ FileUpload 17.624 17.763 +0.139 KB
⬆ Indicator 1.029 1.084 +0.055 KB
⬆ List, ListItem, ListItemLink, ListItemCode, ListItemText 5.161 5.222 +0.061 KB
⬆ Menu, MenuItem, MenuOverlay, MenuDivider, MenuFooter, MenuHeader 29.480 29.518 +0.038 KB
⬆ Modal 13.217 13.267 +0.050 KB
⬆ Morph 0.000 0.234 +0.234 KB
⬆ Move 0.000 1.104 +1.104 KB
⬆ Popover, PopoverInteractiveWrapper 21.373 21.432 +0.059 KB
⬇ ProgressBar 3.142 3.050 -0.092 KB
⬆ Radio 5.000 5.114 +0.114 KB
⬆ Scale 0.000 0.916 +0.916 KB
⬆ SideNav, SideNavLink, SideNavLevel, SideNavSection, SideNavItem, SideNavFooter, SideNavBody, SIDE_NAV_EXPANDED_L1_WIDTH_BASE, SIDE_NAV_EXPANDED_L1_WIDTH_XL 33.088 33.189 +0.101 KB
⬆ Skeleton 0.764 0.773 +0.009 KB
⬆ Slide 0.000 1.276 +1.276 KB
⬆ SpotlightPopoverTour, SpotlightPopoverTourFooter, SpotlightPopoverTourStep 29.752 29.830 +0.078 KB
⬆ StepGroup, StepItem, StepItemIcon, StepItemIndicator 6.448 6.524 +0.076 KB
⬆ Switch 4.726 4.857 +0.131 KB
⬆ Table, TableHeader, TableHeaderCell, TableHeaderRow, TableBody, TableCell, TableRow, TableFooter, TableFooterCell, TableFooterRow, TablePagination, TableToolbar, TableToolbarActions, TableEditableCell, TableEditableDropdownCell 66.644 66.847 +0.203 KB
⬆ Tabs, TabItem, TabList, TabPanel 7.264 7.309 +0.045 KB
⬆ Tag 3.788 3.864 +0.076 KB
⬆ ToastContainer, useToast 12.814 12.881 +0.067 KB
⬆ Tooltip, TooltipInteractiveWrapper 15.824 15.892 +0.068 KB
⬆ TopNav, TopNavActions, TopNavBrand, TopNavContent 1.234 1.328 +0.094 KB
⬆ Button 6.045 6.117 +0.072 KB
⬆ IconButton 1.044 1.110 +0.066 KB
⬆ CheckboxGroup 5.074 5.129 +0.055 KB
⬆ SelectInput, AutoComplete 36.379 36.533 +0.154 KB
⬆ OTPInput 30.188 30.336 +0.148 KB
⬆ PasswordInput 31.951 32.088 +0.137 KB
⬆ PhoneNumberInput 60.657 60.838 +0.181 KB
⬆ SearchInput 34.607 34.750 +0.143 KB
⬆ TextArea 32.450 32.610 +0.160 KB
⬆ TextInput 34.045 34.193 +0.148 KB
⬆ Link 2.137 2.191 +0.054 KB
⬆ RadioGroup 5.061 5.102 +0.041 KB
⬆ Spinner 1.824 1.909 +0.085 KB
⬆ TabNav, TabNavItems, TabNavItem 3.042 3.070 +0.028 KB
⬇ Code 0.609 0.603 -0.006 KB
⬇ Display 0.423 0.322 -0.101 KB
⬇ Heading, getHeadingProps 0.367 0.325 -0.042 KB
⬆ Text -0.060 0.003 +0.063 KB

Generated by 🚫 dangerJS against 16a0afe

@saurabhdaware saurabhdaware marked this pull request as ready for review December 10, 2024 10:08
@saurabhdaware saurabhdaware changed the title fix: babel error in built version fix: recommend framer-motion name installation instead of motion/react Dec 10, 2024
@saurabhdaware
Copy link
Member Author

@anuraghazra I am merging this into integration branch. You can add any comment / approval there.

@saurabhdaware saurabhdaware merged commit 6a8497d into motion/integration Dec 10, 2024
16 checks passed
@saurabhdaware saurabhdaware deleted the motion/fix-peer branch December 10, 2024 11:30
@saurabhdaware saurabhdaware mentioned this pull request Dec 11, 2024
Merged
8 tasks
saurabhdaware added a commit that referenced this pull request Dec 11, 2024
@saurabhdaware
feat(Motion): motion integration branch (#2435)
663da58 
* start integration branch

* docs(motion-presets): Motion Refresh / Presets RFC 2024 (#2336)

* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* docs: update animationInteractions docs

* feat: add view transitions API note

* feat: add view transitions API note

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add videos locally

* feat: revert to previous fade video

* feat: rename transition prop to type

* docs: update AnimateInteractions prop

* remove unrelated changes

* feat: add PR link

* fix: PR link

* feat: add breaking change note

* feat(motion.ts): add refreshed tokens and internal components migration (#2356)

* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* fix: durations map

* docs: update animationInteractions docs

* feat: add view transitions API note

* feat: add view transitions API note

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat(motion): add initial presets code (#2360)

* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* feat: add base entry exit presets

* fix: example card alignment

* feat: add stagger component

* feat: add animateInteractions

* refactor: use common BaseMotionBox

* refactor: move stagger and animateinteraction check

* fix: durations map

* feat: add morph and scale preset

* feat: add Slide

* refactor: remove unused code add todo

* docs: update animationInteractions docs

* feat: add css bezier function

* feat: add view transitions API note

* feat: add view transitions API note

* feat: add controled scale, enhancer animateinteraction

* feat: replace framer-motion imports with motion/react

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add fade token values

* fix(AnimateInteractions): a11y focus issues

* feat: add token valyes for move

* feat: add slide tokens

* fix: stories

* fix: typecheck

* feat: add refs to components till checkbox

* feat: add refs till radio

* feat: migration to ref till typography

* feat: add withRef story

* fix: scale box

* feat: add shouldUnmountWhenHidden

* feat: handle no unmount transitions in stagger

* feat: add slideFromOffset prop

* refactor: simplify basemotion

* feat: add memo for variants object

* fix: focus on animate interactions

* fix: resolve anurag's comments

* feat: add comments for getOuterMotionRef

* feat: add delay prop

* fix: stagger type

* feat: support framer-motion v4

* feat: add borderRadius and backgroundColor morph support

* feat: remove reduced motion handling

* docs(Motion Presets): add motion presets documentation (#2428)

* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* feat: add base entry exit presets

* fix: example card alignment

* feat: add stagger component

* feat: add animateInteractions

* refactor: use common BaseMotionBox

* refactor: move stagger and animateinteraction check

* fix: durations map

* feat: add morph and scale preset

* feat: add Slide

* refactor: remove unused code add todo

* docs: update animationInteractions docs

* feat: add css bezier function

* feat: add view transitions API note

* feat: add view transitions API note

* feat: add controled scale, enhancer animateinteraction

* feat: replace framer-motion imports with motion/react

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add fade token values

* fix(AnimateInteractions): a11y focus issues

* feat: add token valyes for move

* feat: add slide tokens

* fix: stories

* fix: typecheck

* feat: add refs to components till checkbox

* feat: add refs till radio

* feat: migration to ref till typography

* feat: add withRef story

* fix: scale box

* feat: add basic stories

* refactor: docs

* feat: add shouldUnmountWhenHidden

* docs: add docs for other entry/exit presets

* feat: add stagger documentation

* feat: handle no unmount transitions in stagger

* feat: add dashboard example

* fix: workspace animation on dashboard recipe

* feat: add slideFromOffset prop

* feat: add loading screen to dashboard example

* refactor: simplify basemotion

* feat: add slide docs fix

* docs: minor docs changes

* feat: add memo for variants object

* feat: add installation docs, expose overlay colors

* fix: focus on animate interactions

* docs: remove docs page of recipes

* fix: scale performance

* fix: ts

* feat: add basic intro page for motion

* docs: finish motion intro docs

* feat: add basic upgrade guide info

* fix: resolve anurag's comments

* feat: add comments for getOuterMotionRef

* feat: add delay prop

* fix: types

* fix: stagger type

* feat: support framer-motion v4

* feat: add version upgrade guide

* feat: add jsdoc, pass down boxProps to stagger

* feat: reuse motion installation mdx

* feat: add borderRadius and backgroundColor morph support

* fix: button morph example

* fix: morph showcase

* feat: add lazy motion

* test(Motion): add tests and codemod (#2436)

* feat: init motion presets rfc

* docs: add poc video

* docs: add comparison table and pocs

* feat: add gsap poc

* add layout animations poc with blade components

* feat: add basic API decision

* feat: add api decisions and memes

* feat: add api decisions and memes

* feat: remove unrelated changes

* docs: add morph note

* feat: add video example

* docs: add note for previews

* docs: add more videos

* fix: images

* fix: code alignments

* docs: fix widths of cols

* feat: add chat interface demo

* typo

* fix: width of previews

* feat: update all token values

* feat: motion, migrate internal motion tokens

* fix: ts check

* fix: ts

* fix: switch delay

* feat: add base entry exit presets

* fix: example card alignment

* feat: add stagger component

* feat: add animateInteractions

* refactor: use common BaseMotionBox

* refactor: move stagger and animateinteraction check

* fix: durations map

* feat: add morph and scale preset

* feat: add Slide

* refactor: remove unused code add todo

* docs: update animationInteractions docs

* feat: add css bezier function

* feat: add view transitions API note

* feat: add view transitions API note

* feat: add controled scale, enhancer animateinteraction

* feat: replace framer-motion imports with motion/react

* feat: rename framer motion to motion/react

* feat: add framer motion name change note in library table

* docs: add new open questions and conclusions

* fix: change misleading scale heading

* feat: add fade token values

* fix(AnimateInteractions): a11y focus issues

* feat: add token valyes for move

* feat: add slide tokens

* fix: stories

* fix: typecheck

* feat: add refs to components till checkbox

* feat: add refs till radio

* feat: migration to ref till typography

* feat: add withRef story

* fix: scale box

* feat: add basic stories

* refactor: docs

* feat: add shouldUnmountWhenHidden

* docs: add docs for other entry/exit presets

* feat: add stagger documentation

* feat: handle no unmount transitions in stagger

* feat: add dashboard example

* fix: workspace animation on dashboard recipe

* feat: add slideFromOffset prop

* feat: add loading screen to dashboard example

* refactor: simplify basemotion

* feat: add slide docs fix

* docs: minor docs changes

* feat: add memo for variants object

* feat: add installation docs, expose overlay colors

* fix: focus on animate interactions

* docs: remove docs page of recipes

* fix: scale performance

* fix: ts

* feat: add basic intro page for motion

* docs: finish motion intro docs

* feat: add tests for basic components

* tests: update snapshots

* feat: add interaction tests

* feat: add codemod

* feat: add basic upgrade guide info

* fix: resolve anurag's comments

* feat: add comments for getOuterMotionRef

* feat: add delay prop

* fix: types

* fix: stagger type

* feat: support framer-motion v4

* feat: add version upgrade guide

* feat: add jsdoc, pass down boxProps to stagger

* feat: reuse motion installation mdx

* fix: basemotion mock

* fix: motion/react instances

* fix: native test

* fix: transitions on card

* fix: snapshot for card

* fix: lint issues

* fix: typecheck

* fix: lint

* fix: regex lint

* fix: text lint

* feat: add borderRadius and backgroundColor morph support

* fix: slide test

* upgrade guide cleanup

* heading level cleanup in upgrade guide

* fix: button morph example

* fix: morph showcase

* feat: add lazy motion

* fix: typecheck

* fix: native snapshots

* Create fluffy-bikes-drop.md

* fix: conflicts

* fix: features.js extension in PR preview sandbox

* fix: GlobalStyles undefined

* feat: add motion to peerDependency as well like framer-motion

* fix: recommend `framer-motion` name installation instead of `motion/react` (#2443)

* fix: mark motion as optional peer deps

* feat: mark motion external

* fix: check if its working without motion as external

* fix: mark motion/react as external

* feat: recommend framer-motion name instead

* fix: stackblitz examples minor cleanup
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chaitanyadeorukhkar chaitanyadeorukhkar Awaiting requested review from chaitanyadeorukhkar

@kamleshchandnani kamleshchandnani Awaiting requested review from kamleshchandnani

@anuraghazra anuraghazra Awaiting requested review from anuraghazra

@snitin315 snitin315 Awaiting requested review from snitin315

@tewarig tewarig Awaiting requested review from tewarig

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@saurabhdaware @rzpcibot