Skip to content

Commit 4178c59

Browse files
saurabhdawaresaurabhdaware
authored
docs: remove stackblitz and add story code (#2446)
* docs: remove stackblitz and add story code * Create brave-apricots-yawn.md
1 parent 65125bf commit 4178c59

File tree

5 files changed

+226
-17
lines changed

5 files changed

+226
-17
lines changed

‎.changeset/brave-apricots-yawn.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@razorpay/blade": patch
3+
---
4+
5+
docs: remove stackblitz and add story code
6+
fix: export Stagger and AnimateInteractions

‎packages/blade/docs/migration-docs/upgrade-v12.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Blade v12 introduces `framer-motion` as peer dependency and requires you to set
2121
We have codemod to help you do the required token changes. You can run the codemod with following command (Replace `./PATH_TO_YOUR_DIR` with glob path of files / directories you want to migrate)-
2222

2323
```sh
24-
npx jscodeshift ./PATH_TO_YOUR_DIR --extensions=tsx,ts,jsx,js -t ./node_modules/@razorpay/blade/codemods/migrate-motion-tokens/transformers/index.ts --ignore-pattern="**/node_modules/**
24+
npx jscodeshift ./PATH_TO_YOUR_DIR --extensions=tsx,ts,jsx,js -t ./node_modules/@razorpay/blade/codemods/migrate-motion-tokens/transformers/index.ts --ignore-pattern="**/node_modules/**"
2525
```
2626

2727
<details>
@@ -59,7 +59,7 @@ You can skip this if you've run the codemod but in case not or you see some edge
5959
We realised that several projects in razorpay are already using `framer-motion` and are on older versions.
6060
To give some time to consumers to upgrade to framer-motion v11+, we'll be supporting framer-motion v4+ from blade. Although we will be dropping this support in next major version of blade so we recommend planning out framer-motion upgrade in coming quarter.
6161

62-
- **If you're on React 18**, migrating to framer-motion v11 should be fairly simple and low-effort. Checkout [Migrating from framer-motion v4+ to framer-motion v11+](#migrating-from-framer-motion-v4-to-motionreact-aka-framer-motion-v11)
62+
- **If you're on React 18**, migrating to framer-motion v11 should be fairly simple and low-effort. Checkout [Migrating from framer-motion v4+ to framer-motion v11+](#migrating-from-framer-motion-v4-to-framer-motion-v11)
6363
- **For projects not on React 18 yet**, do plan out the upgrade soon to make sure future blade upgrades don't become blocker
6464

6565
#### Migrating from `framer-motion` v4+ to `framer-motion` v11+

‎packages/blade/src/components/BaseMotion/docs/MotionIntro.stories.mdx

+15-15
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ import MotionInstallation from './MotionInstallation.mdx';
1717

1818
import { Showcase } from './MotionIntroUtils';
1919
import {
20-
FadeSandbox,
21-
MoveSandbox,
22-
SlideSandbox,
23-
ScaleSandbox,
24-
MorphSandbox,
25-
AnimateInteractionsSandbox,
26-
StaggerSandbox,
27-
} from './codeExamples';
20+
FadeIntro,
21+
MoveIntro,
22+
SlideIntro,
23+
ScaleIntro,
24+
MorphIntro,
25+
StaggerIntro,
26+
AnimateInteractionsIntro,
27+
} from './introExamples';
2828

2929
<Meta title="Motion/Introduction to Motion" />
3030

@@ -70,7 +70,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
7070
The Fade component is a motion preset that animates the opacity of its children, allowing them to smoothly appear or disappear. It ensures seamless transitions while keeping the UI visually engaging.
7171
</Text>
7272

73-
<FadeSandbox padding={['spacing.4', 'spacing.0']} />
73+
<FadeIntro />
7474
<p align="right">[View Fade Documentation](/?path=/docs/motion-fade--docs)</p>
7575
</Box>
7676

@@ -81,7 +81,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
8181
allowing them to smoothly appear or disappear. It ensures seamless transitions while keeping the
8282
UI visually engaging.
8383
</Text>
84-
<MoveSandbox padding={['spacing.4', 'spacing.0']} />
84+
<MoveIntro />
8585
<p align="right">[View Move Documentation](/?path=/docs/motion-move--docs)</p>
8686
</Box>
8787

@@ -92,7 +92,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
9292
outside of viewport, allowing them to smoothly appear or disappear. Unlike Move, Slide is meant
9393
to animate components from outside of viewport
9494
</Text>
95-
<SlideSandbox padding={['spacing.4', 'spacing.0']} />
95+
<SlideIntro />
9696
<p align="right">[View Slide Documentation](/?path=/docs/motion-slide--docs)</p>
9797
</Box>
9898

@@ -102,7 +102,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
102102
Scale component animates over CSS `scale` property and allows you to enlarge or shrink element
103103
on certain interactions
104104
</Text>
105-
<ScaleSandbox padding={['spacing.4', 'spacing.0']} />
105+
<ScaleIntro />
106106
<p align="right">[View Scale Documentation](/?path=/docs/motion-scale--docs)</p>
107107
</Box>
108108

@@ -112,7 +112,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
112112
Morph component is a abstraction on motion react's layout animations. It allows you to morph
113113
between 2 elements
114114
</Text>
115-
<MorphSandbox padding={['spacing.4', 'spacing.0']} />
115+
<MorphIntro />
116116
<p align="right">[View Morph Documentation](/?path=/docs/motion-morph--docs)</p>
117117
</Box>
118118

@@ -122,7 +122,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
122122
AnimateInteractions is a component that allows you to animate child components based on
123123
interactions on parent. This is similar to doing `.parent:hover .child {}` styling in CSS.
124124
</Text>
125-
<AnimateInteractionsSandbox padding={['spacing.4', 'spacing.0']} />
125+
<AnimateInteractionsIntro />
126126
<p align="right">
127127
[View AnimateInterations Documentation](/?path=/docs/motion-animateinteractions--docs)
128128
</p>
@@ -134,7 +134,7 @@ We offer several easy-to-use motion presets to simplify integrating motion in yo
134134
Stagger component allows you to stagger children (make them appear one after the other). Its a
135135
utility preset. You can use any of the base presets like Move, Fade, Slide inside of it
136136
</Text>
137-
<StaggerSandbox padding={['spacing.4', 'spacing.0']} />
137+
<StaggerIntro />
138138
<p align="right">[View Stagger Documentation](/?path=/docs/motion-stagger--docs)</p>
139139
</Box>
140140

‎packages/blade/src/components/BaseMotion/docs/introExamples.tsx

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { Story } from '@storybook/addon-docs';
2+
import { Box } from '~components/Box';
3+
import { SandboxHighlighter } from '~utils/storybook/Sandbox/SandpackEditor';
4+
5+
export const FadeIntro = (): React.ReactElement => {
6+
return (
7+
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
8+
<Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
9+
<SandboxHighlighter>{`import {
10+
Fade,
11+
Card,
12+
CardBody
13+
} from '@razorpay/blade/components';
14+
15+
16+
<Fade>
17+
<Card>
18+
<CardBody>Card that animates</CardBody>
19+
</Card>
20+
</Fade>
21+
`}</SandboxHighlighter>
22+
</Box>
23+
<Box flex="1">
24+
<Story id="motion-fade--default" />
25+
</Box>
26+
</Box>
27+
);
28+
};
29+
30+
export const MoveIntro = (): React.ReactElement => {
31+
return (
32+
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
33+
<Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
34+
<SandboxHighlighter>{`import {
35+
Move,
36+
Card,
37+
CardBody
38+
} from '@razorpay/blade/components';
39+
40+
41+
<Move>
42+
<Card>
43+
<CardBody>Card that animates</CardBody>
44+
</Card>
45+
</Move>
46+
`}</SandboxHighlighter>
47+
</Box>
48+
<Box flex="1">
49+
<Story id="motion-move--default" />
50+
</Box>
51+
</Box>
52+
);
53+
};
54+
55+
export const SlideIntro = (): React.ReactElement => {
56+
return (
57+
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
58+
<Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
59+
<SandboxHighlighter>{`import {
60+
Slide,
61+
Card,
62+
CardBody
63+
} from '@razorpay/blade/components';
64+
65+
66+
<Slide direction={{ enter: 'right', exit: 'bottom' }}>
67+
<Card>
68+
<CardBody>Card that animates</CardBody>
69+
</Card>
70+
</Slide>
71+
`}</SandboxHighlighter>
72+
</Box>
73+
<Box flex="1">
74+
<Story id="motion-slide--with-different-directions" />
75+
</Box>
76+
</Box>
77+
);
78+
};
79+
80+
export const ScaleIntro = (): React.ReactElement => {
81+
return (
82+
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
83+
<Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
84+
<SandboxHighlighter>{`import {
85+
Scale,
86+
} from '@razorpay/blade/components';
87+
88+
89+
<Scale motionTriggers={['hover']}>
90+
<img src="" alt="" />
91+
</Scale>
92+
`}</SandboxHighlighter>
93+
</Box>
94+
<Box flex="1">
95+
<Story id="motion-scale--default" />
96+
</Box>
97+
</Box>
98+
);
99+
};
100+
101+
export const MorphIntro = (): React.ReactElement => {
102+
return (
103+
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
104+
<Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
105+
<SandboxHighlighter>{`import {
106+
Morph,
107+
Button,
108+
TextInput
109+
} from '@razorpay/blade/components';
110+
import { AnimatePresence } from 'framer-motion';
111+
112+
<AnimatePresence>
113+
{
114+
isButton
115+
? (
116+
<Morph layoutId="input-button-morph">
117+
<Button>Click to Enter</Button>
118+
</Morph>
119+
)
120+
: (
121+
<Morph layoutId="input-button-morph">
122+
<TextInput />
123+
</Morph>
124+
)
125+
}
126+
</AnimatePresence>
127+
`}</SandboxHighlighter>
128+
</Box>
129+
<Box flex="1">
130+
<Story id="motion-morph--default" />
131+
</Box>
132+
</Box>
133+
);
134+
};
135+
136+
export const StaggerIntro = (): React.ReactElement => {
137+
return (
138+
<Box
139+
display="flex"
140+
gap="spacing.4"
141+
alignItems="center"
142+
flexDirection="column-reverse"
143+
justifyContent="space-between"
144+
>
145+
<Box padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
146+
<SandboxHighlighter>{`import {
147+
Stagger,
148+
Move,
149+
Card,
150+
CardBody
151+
} from '@razorpay/blade/components';
152+
153+
154+
<Stagger>
155+
<Move><Card /></Move>
156+
<Move><Card /></Move>
157+
<Move><Card /></Move>
158+
</Stagger
159+
`}</SandboxHighlighter>
160+
</Box>
161+
<Box maxWidth="100%">
162+
<Story id="motion-stagger--default" />
163+
</Box>
164+
</Box>
165+
);
166+
};
167+
168+
export const AnimateInteractionsIntro = (): React.ReactElement => {
169+
return (
170+
<Box display="flex" gap="spacing.10" alignItems="center" justifyContent="space-between">
171+
<Box flex="1" padding="spacing.4" elevation="lowRaised" borderRadius="medium" width="100%">
172+
<SandboxHighlighter>{`import {
173+
AnimateInteractions,
174+
Move,
175+
Card,
176+
CardBody,
177+
Box,
178+
Button
179+
} from '@razorpay/blade/components';
180+
181+
182+
<AnimateInteractions motionTrigggers={['hover']}>
183+
<Card>
184+
<CardBody>
185+
<Text>Card text</Text>
186+
<Move motionTriggers={['on-animate-interactions']}>
187+
<Box>
188+
<Button>Submit</Button>
189+
</Box>
190+
</Move>
191+
</CardBody>
192+
</Card>
193+
</AnimateInteractions>
194+
`}</SandboxHighlighter>
195+
</Box>
196+
<Box flex="1">
197+
<Story id="motion-animateinteractions--animate-child-on-card-hover" />
198+
</Box>
199+
</Box>
200+
);
201+
};

‎packages/blade/src/components/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from './Accordion';
22
export * from './ActionList';
33
export * from './Alert';
44
export * from './Amount';
5+
export * from './AnimateInteractions';
56
export * from './Avatar';
67
export * from './Badge';
78
export * from './BladeProvider';
@@ -49,6 +50,7 @@ export * from './Skeleton';
4950
export * from './SkipNav';
5051
export * from './Spinner';
5152
export * from './SpotlightPopoverTour';
53+
export * from './Stagger';
5254
export * from './StepGroup';
5355
export * from './Slide';
5456
export * from './Switch';

0 commit comments

Comments
 (0)