Skip to content

Commit

Permalink
docs(Motion Presets): add motion presets documentation (#2428)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@saurabhdaware
saurabhdaware authored Dec 9, 2024
1 parent 12e1c2f commit fa0c45e
Show file tree
Hide file tree
Showing 48 changed files with 3,515 additions and 770 deletions.
31 changes: 22 additions & 9 deletions packages/blade/.storybook/react/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,17 @@ export const parameters = {
],
'Components',
['*', 'Interaction Tests', 'KitchenSink'],
'Motion',
[
'Introduction to Motion',
'Fade',
'Move',
'Slide',
'*',
'AnimateInteractions',
'Stagger',
'Recipes',
],
'Recipes',
],
},
Expand All @@ -96,13 +107,15 @@ export const parameters = {
}
return (
<DocsContainer context={context}>
<BladeProvider
key={`${context.store.globals.globals.themeTokenName}-${context.store.globals.globals.colorScheme}`}
themeTokens={getThemeTokens()}
colorScheme={context.store.globals.globals.colorScheme}
>
{children}
</BladeProvider>
<LazyMotion strict features={domMax}>
<BladeProvider
key={`${context.store.globals.globals.themeTokenName}-${context.store.globals.globals.colorScheme}`}
themeTokens={getThemeTokens()}
colorScheme={context.store.globals.globals.colorScheme}
>
{children}
</BladeProvider>
</LazyMotion>
</DocsContainer>
);
},
Expand Down Expand Up @@ -148,7 +161,8 @@ const StoryCanvas = styled.div<{ context }>(
context.kind.includes('/Carousel') ||
context.kind.includes('/TopNav') ||
context.kind.includes('/Examples') ||
context.kind.includes('/SideNav')
context.kind.includes('/SideNav') ||
context.kind.includes('/Recipes')
? '0rem'
: '2rem'
};
Expand Down Expand Up @@ -232,7 +246,6 @@ export const globalTypes = {
showName: true,
},
},
// TODO: Rebranding - Uncomment this when we fix white-labeling
brandColor: {
name: 'Brand Color',
description: 'Brand Color (You can pass any valid color to BladeProvider)',
Expand Down
17 changes: 15 additions & 2 deletions packages/blade/docs/guides/Installation.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import {
Box,
} from '../../src/components';

import MotionInstallation from '../../src/components/BaseMotion/docs/MotionInstallation.mdx';

<Meta title="Guides/Installation" />

# Installation
Expand Down Expand Up @@ -77,7 +79,8 @@ Before you install the package, make sure that you have performed the following
<TabList>
<TabItem value="basic">1. Basic Setup</TabItem>
<TabItem value="fonts">2. Install Fonts</TabItem>
<TabItem value="ts">3. TypeScript</TabItem>
<TabItem value="motion">3. Setup Motion React</TabItem>
<TabItem value="ts">4. TypeScript</TabItem>
</TabList>
</Box>
<TabPanel value="basic">
Expand All @@ -90,7 +93,7 @@ Before you install the package, make sure that you have performed the following
<Text>Blade has a few peer dependencies that you may already have installed in your project. If so, you can skip adding them again.</Text>

```shell
yarn add @razorpay/blade styled-components@5.3.11 @razorpay/i18nify-js@1.9.3 @razorpay/i18nify-react@4.0.8
yarn add @razorpay/blade styled-components@5.3.11 @razorpay/i18nify-js@1.9.3 @razorpay/i18nify-react@4.0.8 motion@11.12.0
```
<List>
<ListItem>
Expand Down Expand Up @@ -248,6 +251,16 @@ Before you install the package, make sure that you have performed the following
```

</TabPanel>

<TabPanel value="motion">
<Heading size="large" marginTop="spacing.7">Add motion to your application</Heading>

Assuming you've followed the first step and installed `motion` in your project, Here's how we recommend you to setup the project-

<MotionInstallation />

</TabPanel>

<TabPanel value="ts">
<Heading size="large" marginY="spacing.7">TypeScript Setup</Heading>

Expand Down
Loading

0 comments on commit fa0c45e

Please sign in to comment.