Reanimated builders support

.changeset/mean-donuts-hear.md

@@ -0,0 +1,9 @@
+---
+"@plextv/react-native-lightning-example": patch
+"@plextv/react-native-lightning": patch
+"@plextv/react-lightning-plugin-reanimated": patch
+"@plextv/react-lightning": patch
+"@plextv/react-lightning-storybook": patch
+---
+
+Add support for reanimated animation builders

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

@@ -14,6 +14,7 @@ import {
 import { AppRegistry, Button } from 'react-native';
 import { ErrorBoundary } from './ErrorBoundary';
 import { keyMap } from './keyMap';
+import { AnimationBuilderTest } from './pages/AnimationBuilderTest';
 import { AnimationTest } from './pages/AnimationTest';
 import { ComponentTest } from './pages/ComponentTest';
 import { FlashListTest } from './pages/FlashListTest';
@@ -52,6 +53,7 @@ const CustomStack = createCustomNavigator();
 const screens = {
   Layout: 'layout',
   Animation: 'animation',
+  AnimationBuilder: 'animationBuilder',
   Library: 'library',
   Simple: 'simple',
   Components: 'components',
@@ -94,6 +96,11 @@ const MainApp = () => {
           color={'rgba(55, 55, 22, 1)'}
           onPress={() => nav.navigate('Animation')}
         />
+        <Button
+          title="Animation Builder"
+          color={'rgba(55, 55, 22, 1)'}
+          onPress={() => nav.navigate('AnimationBuilder')}
+        />
         <Button
           title="Library"
           color={'rgba(55, 55, 22, 1)'}
@@ -133,6 +140,10 @@ const MainApp = () => {
         >
           <CustomStack.Screen name="Layout" component={LayoutTest} />
           <CustomStack.Screen name="Animation" component={AnimationTest} />
+          <CustomStack.Screen
+            name="AnimationBuilder"
+            component={AnimationBuilderTest}
+          />
           <CustomStack.Screen name="Library" component={LibraryTest} />
           <CustomStack.Screen name="Simple" component={SimpleTest} />
           <CustomStack.Screen name="Components" component={ComponentTest} />

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

@@ -0,0 +1,149 @@
+import Animated, {
+  FadeIn as FadeInBuilder,
+  FadeInDown as FadeInDownBuilder,
+  FadeInLeft as FadeInLeftBuilder,
+  FadeInRight as FadeInRightBuilder,
+  FadeInUp as FadeInUpBuilder,
+  FadeOut as FadeOutBuilder,
+  FadeOutDown as FadeOutDownBuilder,
+  FadeOutLeft as FadeOutLeftBuilder,
+  FadeOutRight as FadeOutRightBuilder,
+  FadeOutUp as FadeOutUpBuilder,
+  type ReanimatedAnimation,
+  SlideInDown as SlideInDownBuilder,
+  SlideInLeft as SlideInLeftBuilder,
+  SlideInRight as SlideInRightBuilder,
+  SlideInUp as SlideInUpBuilder,
+  SlideOutDown as SlideOutDownBuilder,
+  SlideOutLeft as SlideOutLeftBuilder,
+  SlideOutRight as SlideOutRightBuilder,
+  SlideOutUp as SlideOutUpBuilder,
+} from '@plextv/react-lightning-plugin-reanimated';
+import { Button } from '@plextv/react-native-lightning';
+import { Column, Row } from '@plextv/react-native-lightning-components';
+import { type FC, useMemo, useState } from 'react';
+
+type AnimatedProps = {
+  visible: boolean;
+  entering?: ReanimatedAnimation;
+  exiting?: ReanimatedAnimation;
+};
+
+function randomColor() {
+  return `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`;
+}
+
+const AnimatedBox: FC<AnimatedProps> = ({ visible, ...props }) => {
+  const color = useMemo(() => randomColor(), []);
+
+  return visible ? (
+    <Animated.View
+      {...props}
+      style={{
+        width: 75,
+        height: 75,
+        backgroundColor: color,
+        borderRadius: 16,
+      }}
+    />
+  ) : null;
+};
+
+const AnimationExample: FC<{
+  buttonPrefix: string;
+  buttonSuffix?: string;
+  entering?: ReanimatedAnimation;
+  exiting?: ReanimatedAnimation;
+}> = ({ buttonPrefix, buttonSuffix = '', entering, exiting }) => {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <Row style={{ gap: 25 }}>
+      <Button
+        title={`${buttonPrefix} ${visible ? 'Out' : 'In'} ${buttonSuffix}`}
+        color="rgba(46, 43, 0, 1)"
+        onPress={() => setVisible(!visible)}
+        style={{
+          width: 150,
+          height: 75,
+          borderRadius: 16,
+        }}
+      ></Button>
+      <AnimatedBox visible={visible} entering={entering} exiting={exiting} />
+    </Row>
+  );
+};
+
+const AnimationBuilderTest = () => {
+  return (
+    <Row style={{ gap: 25 }}>
+      <Column style={{ gap: 15 }}>
+        <AnimationExample
+          buttonPrefix="Fade"
+          entering={FadeInBuilder.duration(1000)}
+          exiting={FadeOutBuilder.duration(1000)}
+        />
+
+        <AnimationExample
+          buttonPrefix="Fade"
+          buttonSuffix="Up"
+          entering={FadeInUpBuilder.duration(1000)}
+          exiting={FadeOutUpBuilder.duration(1000)}
+        />
+
+        <AnimationExample
+          buttonPrefix="Fade"
+          buttonSuffix="Right"
+          entering={FadeInRightBuilder.duration(1000)}
+          exiting={FadeOutRightBuilder.duration(1000)}
+        />
+
+        <AnimationExample
+          buttonPrefix="Fade"
+          buttonSuffix="Down"
+          entering={FadeInDownBuilder.duration(1000)}
+          exiting={FadeOutDownBuilder.duration(1000)}
+        />
+
+        <AnimationExample
+          buttonPrefix="Fade"
+          buttonSuffix="Left"
+          entering={FadeInLeftBuilder.duration(1000)}
+          exiting={FadeOutLeftBuilder.duration(1000)}
+        />
+      </Column>
+
+      <Column style={{ gap: 15 }}>
+        <AnimationExample
+          buttonPrefix="Slide"
+          buttonSuffix="Up"
+          entering={SlideInUpBuilder.duration(1000)}
+          exiting={SlideOutUpBuilder.duration(1000)}
+        />
+
+        <AnimationExample
+          buttonPrefix="Slide"
+          buttonSuffix="Right"
+          entering={SlideInRightBuilder.duration(1000)}
+          exiting={SlideOutRightBuilder.duration(1000)}
+        />
+
+        <AnimationExample
+          buttonPrefix="Slide"
+          buttonSuffix="Down"
+          entering={SlideInDownBuilder.duration(1000)}
+          exiting={SlideOutDownBuilder.duration(1000)}
+        />
+
+        <AnimationExample
+          buttonPrefix="Slide"
+          buttonSuffix="Left"
+          entering={SlideInLeftBuilder.duration(1000)}
+          exiting={SlideOutLeftBuilder.duration(1000)}
+        />
+      </Column>
+    </Row>
+  );
+};
+
+export { AnimationBuilderTest };

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

@@ -33,6 +33,7 @@ const config = defineConfig((env) => ({
     __DEV__: JSON.stringify(
       (env.mode ?? process.env.NODE_ENV) !== 'production',
     ),
+    'process.env.NODE_ENV': JSON.stringify(env.mode),
   },
 }));
 

apps/storybook/.storybook/main.ts

@@ -19,6 +19,7 @@ const config: StorybookConfig = {
       __DEV__: JSON.stringify(
         (config.mode ?? process.env.NODE_ENV) !== 'production',
       ),
+      'process.env.NODE_ENV': JSON.stringify(config.mode),
     };
 
     config.plugins = [

apps/storybook/.storybook/preview.tsx

@@ -14,10 +14,10 @@ const preview: Preview = {
         order: [
           'Getting Started',
           ['Introduction', 'Quick Start'],
-          '@plextv∕react-lightning',
-          '@plextv∕react-lightning-components',
-          '@plextv∕react-native-lightning',
-          '@plextv∕react-native-lightning-components',
+          'react-lightning',
+          'react-lightning-components',
+          'react-native-lightning',
+          'react-native-lightning-components',
           'Plugins',
         ],
       },

apps/storybook/package.json

@@ -25,6 +25,7 @@
     "@plextv/react-lightning-components": "workspace:*",
     "@plextv/react-lightning-plugin-flexbox": "workspace:*",
     "@plextv/react-lightning-plugin-flexbox-lite": "workspace:*",
+    "@plextv/react-lightning-plugin-reanimated": "workspace:*",
     "@plextv/react-native-lightning": "workspace:*",
     "@plextv/react-native-lightning-components": "workspace:*",
     "@storybook/addon-essentials": "8.6.12",

apps/storybook/src/components/StorybookDecorator.tsx

@@ -8,13 +8,13 @@ import { DefaultStoryHeight, DefaultStoryWidth } from '../helpers/constants';
 
 type Props = {
   story: () => JSX.Element;
-  tags: string[];
+  tags?: string[];
   canvasOptions?: Partial<RenderOptions>;
 };
 
 export function StorybookDecorator({
   story: Story,
-  tags = [],
+  tags,
   canvasOptions,
 }: Props) {
   const options: RenderOptions = useMemo(
@@ -41,7 +41,7 @@ export function StorybookDecorator({
         'RoundedWithShadow',
         'RoundedWithBorderAndShadow',
       ],
-      plugins: tags.includes('reactNative') ? getPlugins() : [flexPlugin()],
+      plugins: tags?.includes('reactNative') ? getPlugins() : [flexPlugin()],
       ...canvasOptions,
     }),
     [tags, canvasOptions],

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

@@ -32,7 +32,7 @@ const ExampleBox = () => {
 };
 
 export default {
-  title: 'Plugins/@plextv∕react-lightning-plugin-flexbox-lite/FlexBoxLite',
+  title: 'Plugins/react-lightning-plugin-flexbox-lite/FlexBoxLite',
   decorators: [
     (Story) => (
       <StorybookDecorator

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

@@ -0,0 +1,51 @@
+import Animated, {
+  type ReanimatedAnimation,
+} from '@plextv/react-lightning-plugin-reanimated';
+import { Row } from '@plextv/react-native-lightning-components';
+import { type FC, useMemo, useState } from 'react';
+import Button from '../components/Button';
+
+type AnimatedProps = {
+  visible: boolean;
+  entering?: ReanimatedAnimation;
+  exiting?: ReanimatedAnimation;
+};
+
+function randomColor() {
+  return `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`;
+}
+
+const AnimatedBox: FC<AnimatedProps> = ({ visible, ...props }) => {
+  const color = useMemo(() => randomColor(), []);
+
+  return visible ? (
+    <Animated.View
+      {...props}
+      style={{
+        width: 75,
+        height: 75,
+        backgroundColor: color,
+        borderRadius: 16,
+      }}
+    />
+  ) : null;
+};
+
+export const AnimationSampler: FC<{
+  buttonPrefix: string;
+  buttonSuffix?: string;
+  entering?: ReanimatedAnimation;
+  exiting?: ReanimatedAnimation;
+}> = ({ buttonPrefix, buttonSuffix = '', entering, exiting }) => {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <Row style={{ gap: 15 }}>
+      <Button onPress={() => setVisible(!visible)}>
+        {buttonPrefix} {visible ? 'Out' : 'In'} {buttonSuffix}
+      </Button>
+
+      <AnimatedBox visible={visible} entering={entering} exiting={exiting} />
+    </Row>
+  );
+};

apps/storybook/src/plugin-reanimated/Fade.stories.tsx

@@ -0,0 +1,61 @@
+import {
+  FadeIn,
+  FadeInDown,
+  FadeInLeft,
+  FadeInRight,
+  FadeInUp,
+  FadeOut,
+  FadeOutDown,
+  FadeOutLeft,
+  FadeOutRight,
+  FadeOutUp,
+} from '@plextv/react-lightning-plugin-reanimated';
+import { Column } from '@plextv/react-native-lightning-components';
+import type { Meta } from '@storybook/react';
+import { AnimationSampler } from './AnimationSampler';
+
+export default {
+  title: 'Plugins/react-lightning-plugin-reanimated/Fade',
+  tags: ['reactNative'],
+} as Meta;
+
+// The rest of the story definitions
+export const Fade = () => {
+  return (
+    <Column style={{ gap: 15 }}>
+      <AnimationSampler
+        buttonPrefix="Fade"
+        entering={FadeIn.duration(1000)}
+        exiting={FadeOut.duration(1000)}
+      />
+
+      <AnimationSampler
+        buttonPrefix="Fade"
+        buttonSuffix="Up"
+        entering={FadeInUp.duration(1000)}
+        exiting={FadeOutUp.duration(1000)}
+      />
+
+      <AnimationSampler
+        buttonPrefix="Fade"
+        buttonSuffix="Right"
+        entering={FadeInRight.duration(1000)}
+        exiting={FadeOutRight.duration(1000)}
+      />
+
+      <AnimationSampler
+        buttonPrefix="Fade"
+        buttonSuffix="Down"
+        entering={FadeInDown.duration(1000)}
+        exiting={FadeOutDown.duration(1000)}
+      />
+
+      <AnimationSampler
+        buttonPrefix="Fade"
+        buttonSuffix="Left"
+        entering={FadeInLeft.duration(1000)}
+        exiting={FadeOutLeft.duration(1000)}
+      />
+    </Column>
+  );
+};