Skip to content

Commit 2968a78

Browse files
WillsonHawWillsonHaw
authored
Reanimated builders support
Add support for Reanimated animation builders Remove storybook plextv prefix
1 parent f5e9a51 commit 2968a78

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1490
-307
lines changed

‎.changeset/mean-donuts-hear.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@plextv/react-native-lightning-example": patch
3+
"@plextv/react-native-lightning": patch
4+
"@plextv/react-lightning-plugin-reanimated": patch
5+
"@plextv/react-lightning": patch
6+
"@plextv/react-lightning-storybook": patch
7+
---
8+
9+
Add support for reanimated animation builders

‎apps/react-native-lightning-example/src/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
import { AppRegistry, Button } from 'react-native';
1515
import { ErrorBoundary } from './ErrorBoundary';
1616
import { keyMap } from './keyMap';
17+
import { AnimationBuilderTest } from './pages/AnimationBuilderTest';
1718
import { AnimationTest } from './pages/AnimationTest';
1819
import { ComponentTest } from './pages/ComponentTest';
1920
import { FlashListTest } from './pages/FlashListTest';
@@ -52,6 +53,7 @@ const CustomStack = createCustomNavigator();
5253
const screens = {
5354
Layout: 'layout',
5455
Animation: 'animation',
56+
AnimationBuilder: 'animationBuilder',
5557
Library: 'library',
5658
Simple: 'simple',
5759
Components: 'components',
@@ -94,6 +96,11 @@ const MainApp = () => {
9496
color={'rgba(55, 55, 22, 1)'}
9597
onPress={() => nav.navigate('Animation')}
9698
/>
99+
<Button
100+
title="Animation Builder"
101+
color={'rgba(55, 55, 22, 1)'}
102+
onPress={() => nav.navigate('AnimationBuilder')}
103+
/>
97104
<Button
98105
title="Library"
99106
color={'rgba(55, 55, 22, 1)'}
@@ -133,6 +140,10 @@ const MainApp = () => {
133140
>
134141
<CustomStack.Screen name="Layout" component={LayoutTest} />
135142
<CustomStack.Screen name="Animation" component={AnimationTest} />
143+
<CustomStack.Screen
144+
name="AnimationBuilder"
145+
component={AnimationBuilderTest}
146+
/>
136147
<CustomStack.Screen name="Library" component={LibraryTest} />
137148
<CustomStack.Screen name="Simple" component={SimpleTest} />
138149
<CustomStack.Screen name="Components" component={ComponentTest} />

‎apps/react-native-lightning-example/src/pages/AnimationBuilderTest.tsx

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import Animated, {
2+
FadeIn as FadeInBuilder,
3+
FadeInDown as FadeInDownBuilder,
4+
FadeInLeft as FadeInLeftBuilder,
5+
FadeInRight as FadeInRightBuilder,
6+
FadeInUp as FadeInUpBuilder,
7+
FadeOut as FadeOutBuilder,
8+
FadeOutDown as FadeOutDownBuilder,
9+
FadeOutLeft as FadeOutLeftBuilder,
10+
FadeOutRight as FadeOutRightBuilder,
11+
FadeOutUp as FadeOutUpBuilder,
12+
type ReanimatedAnimation,
13+
SlideInDown as SlideInDownBuilder,
14+
SlideInLeft as SlideInLeftBuilder,
15+
SlideInRight as SlideInRightBuilder,
16+
SlideInUp as SlideInUpBuilder,
17+
SlideOutDown as SlideOutDownBuilder,
18+
SlideOutLeft as SlideOutLeftBuilder,
19+
SlideOutRight as SlideOutRightBuilder,
20+
SlideOutUp as SlideOutUpBuilder,
21+
} from '@plextv/react-lightning-plugin-reanimated';
22+
import { Button } from '@plextv/react-native-lightning';
23+
import { Column, Row } from '@plextv/react-native-lightning-components';
24+
import { type FC, useMemo, useState } from 'react';
25+
26+
type AnimatedProps = {
27+
visible: boolean;
28+
entering?: ReanimatedAnimation;
29+
exiting?: ReanimatedAnimation;
30+
};
31+
32+
function randomColor() {
33+
return `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`;
34+
}
35+
36+
const AnimatedBox: FC<AnimatedProps> = ({ visible, ...props }) => {
37+
const color = useMemo(() => randomColor(), []);
38+
39+
return visible ? (
40+
<Animated.View
41+
{...props}
42+
style={{
43+
width: 75,
44+
height: 75,
45+
backgroundColor: color,
46+
borderRadius: 16,
47+
}}
48+
/>
49+
) : null;
50+
};
51+
52+
const AnimationExample: FC<{
53+
buttonPrefix: string;
54+
buttonSuffix?: string;
55+
entering?: ReanimatedAnimation;
56+
exiting?: ReanimatedAnimation;
57+
}> = ({ buttonPrefix, buttonSuffix = '', entering, exiting }) => {
58+
const [visible, setVisible] = useState(true);
59+
60+
return (
61+
<Row style={{ gap: 25 }}>
62+
<Button
63+
title={`${buttonPrefix} ${visible ? 'Out' : 'In'} ${buttonSuffix}`}
64+
color="rgba(46, 43, 0, 1)"
65+
onPress={() => setVisible(!visible)}
66+
style={{
67+
width: 150,
68+
height: 75,
69+
borderRadius: 16,
70+
}}
71+
></Button>
72+
<AnimatedBox visible={visible} entering={entering} exiting={exiting} />
73+
</Row>
74+
);
75+
};
76+
77+
const AnimationBuilderTest = () => {
78+
return (
79+
<Row style={{ gap: 25 }}>
80+
<Column style={{ gap: 15 }}>
81+
<AnimationExample
82+
buttonPrefix="Fade"
83+
entering={FadeInBuilder.duration(1000)}
84+
exiting={FadeOutBuilder.duration(1000)}
85+
/>
86+
87+
<AnimationExample
88+
buttonPrefix="Fade"
89+
buttonSuffix="Up"
90+
entering={FadeInUpBuilder.duration(1000)}
91+
exiting={FadeOutUpBuilder.duration(1000)}
92+
/>
93+
94+
<AnimationExample
95+
buttonPrefix="Fade"
96+
buttonSuffix="Right"
97+
entering={FadeInRightBuilder.duration(1000)}
98+
exiting={FadeOutRightBuilder.duration(1000)}
99+
/>
100+
101+
<AnimationExample
102+
buttonPrefix="Fade"
103+
buttonSuffix="Down"
104+
entering={FadeInDownBuilder.duration(1000)}
105+
exiting={FadeOutDownBuilder.duration(1000)}
106+
/>
107+
108+
<AnimationExample
109+
buttonPrefix="Fade"
110+
buttonSuffix="Left"
111+
entering={FadeInLeftBuilder.duration(1000)}
112+
exiting={FadeOutLeftBuilder.duration(1000)}
113+
/>
114+
</Column>
115+
116+
<Column style={{ gap: 15 }}>
117+
<AnimationExample
118+
buttonPrefix="Slide"
119+
buttonSuffix="Up"
120+
entering={SlideInUpBuilder.duration(1000)}
121+
exiting={SlideOutUpBuilder.duration(1000)}
122+
/>
123+
124+
<AnimationExample
125+
buttonPrefix="Slide"
126+
buttonSuffix="Right"
127+
entering={SlideInRightBuilder.duration(1000)}
128+
exiting={SlideOutRightBuilder.duration(1000)}
129+
/>
130+
131+
<AnimationExample
132+
buttonPrefix="Slide"
133+
buttonSuffix="Down"
134+
entering={SlideInDownBuilder.duration(1000)}
135+
exiting={SlideOutDownBuilder.duration(1000)}
136+
/>
137+
138+
<AnimationExample
139+
buttonPrefix="Slide"
140+
buttonSuffix="Left"
141+
entering={SlideInLeftBuilder.duration(1000)}
142+
exiting={SlideOutLeftBuilder.duration(1000)}
143+
/>
144+
</Column>
145+
</Row>
146+
);
147+
};
148+
149+
export { AnimationBuilderTest };

‎apps/react-native-lightning-example/vite.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const config = defineConfig((env) => ({
3333
__DEV__: JSON.stringify(
3434
(env.mode ?? process.env.NODE_ENV) !== 'production',
3535
),
36+
'process.env.NODE_ENV': JSON.stringify(env.mode),
3637
},
3738
}));
3839

‎apps/storybook/.storybook/main.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const config: StorybookConfig = {
1919
__DEV__: JSON.stringify(
2020
(config.mode ?? process.env.NODE_ENV) !== 'production',
2121
),
22+
'process.env.NODE_ENV': JSON.stringify(config.mode),
2223
};
2324

2425
config.plugins = [

‎apps/storybook/.storybook/preview.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ const preview: Preview = {
1414
order: [
1515
'Getting Started',
1616
['Introduction', 'Quick Start'],
17-
'@plextv∕react-lightning',
18-
'@plextv∕react-lightning-components',
19-
'@plextv∕react-native-lightning',
20-
'@plextv∕react-native-lightning-components',
17+
'react-lightning',
18+
'react-lightning-components',
19+
'react-native-lightning',
20+
'react-native-lightning-components',
2121
'Plugins',
2222
],
2323
},

‎apps/storybook/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@plextv/react-lightning-components": "workspace:*",
2626
"@plextv/react-lightning-plugin-flexbox": "workspace:*",
2727
"@plextv/react-lightning-plugin-flexbox-lite": "workspace:*",
28+
"@plextv/react-lightning-plugin-reanimated": "workspace:*",
2829
"@plextv/react-native-lightning": "workspace:*",
2930
"@plextv/react-native-lightning-components": "workspace:*",
3031
"@storybook/addon-essentials": "8.6.12",

‎apps/storybook/src/components/StorybookDecorator.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import { DefaultStoryHeight, DefaultStoryWidth } from '../helpers/constants';
88

99
type Props = {
1010
story: () => JSX.Element;
11-
tags: string[];
11+
tags?: string[];
1212
canvasOptions?: Partial<RenderOptions>;
1313
};
1414

1515
export function StorybookDecorator({
1616
story: Story,
17-
tags = [],
17+
tags,
1818
canvasOptions,
1919
}: Props) {
2020
const options: RenderOptions = useMemo(
@@ -41,7 +41,7 @@ export function StorybookDecorator({
4141
'RoundedWithShadow',
4242
'RoundedWithBorderAndShadow',
4343
],
44-
plugins: tags.includes('reactNative') ? getPlugins() : [flexPlugin()],
44+
plugins: tags?.includes('reactNative') ? getPlugins() : [flexPlugin()],
4545
...canvasOptions,
4646
}),
4747
[tags, canvasOptions],

‎apps/storybook/src/plugin-flexbox-lite/FlexboxLite.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const ExampleBox = () => {
3232
};
3333

3434
export default {
35-
title: 'Plugins/@plextv∕react-lightning-plugin-flexbox-lite/FlexBoxLite',
35+
title: 'Plugins/react-lightning-plugin-flexbox-lite/FlexBoxLite',
3636
decorators: [
3737
(Story) => (
3838
<StorybookDecorator

‎apps/storybook/src/plugin-reanimated/AnimationSampler.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import Animated, {
2+
type ReanimatedAnimation,
3+
} from '@plextv/react-lightning-plugin-reanimated';
4+
import { Row } from '@plextv/react-native-lightning-components';
5+
import { type FC, useMemo, useState } from 'react';
6+
import Button from '../components/Button';
7+
8+
type AnimatedProps = {
9+
visible: boolean;
10+
entering?: ReanimatedAnimation;
11+
exiting?: ReanimatedAnimation;
12+
};
13+
14+
function randomColor() {
15+
return `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`;
16+
}
17+
18+
const AnimatedBox: FC<AnimatedProps> = ({ visible, ...props }) => {
19+
const color = useMemo(() => randomColor(), []);
20+
21+
return visible ? (
22+
<Animated.View
23+
{...props}
24+
style={{
25+
width: 75,
26+
height: 75,
27+
backgroundColor: color,
28+
borderRadius: 16,
29+
}}
30+
/>
31+
) : null;
32+
};
33+
34+
export const AnimationSampler: FC<{
35+
buttonPrefix: string;
36+
buttonSuffix?: string;
37+
entering?: ReanimatedAnimation;
38+
exiting?: ReanimatedAnimation;
39+
}> = ({ buttonPrefix, buttonSuffix = '', entering, exiting }) => {
40+
const [visible, setVisible] = useState(true);
41+
42+
return (
43+
<Row style={{ gap: 15 }}>
44+
<Button onPress={() => setVisible(!visible)}>
45+
{buttonPrefix} {visible ? 'Out' : 'In'} {buttonSuffix}
46+
</Button>
47+
48+
<AnimatedBox visible={visible} entering={entering} exiting={exiting} />
49+
</Row>
50+
);
51+
};

0 commit comments

Comments
 (0)