V3 examples

apps/common-app/src/common.tsx

@@ -1,10 +1,102 @@
-import React from 'react';
-import { Text, StyleSheet, ViewStyle, StyleProp } from 'react-native';
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Text,
+  StyleSheet,
+  ViewStyle,
+  StyleProp,
+  View,
+  Platform,
+} from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+export interface Example {
+  name: string;
+  component: React.ComponentType;
+  unsupportedPlatforms?: Set<typeof Platform.OS>;
+}
+
+export interface ExamplesSection {
+  sectionTitle: string;
+  data: Example[];
+}
+
+/* eslint-disable react-native/no-unused-styles */
+export const commonStyles = StyleSheet.create({
+  centerView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box: {
+    height: 150,
+    width: 150,
+    borderRadius: 20,
+    marginBottom: 30,
+  },
+  ball: {
+    height: 120,
+    width: 120,
+    borderRadius: 60,
+    marginBottom: 100,
+    // @ts-expect-error `grab` is correct value for `cursor` property
+    cursor: 'grab',
+  },
+  instructions: {
+    marginTop: 8,
+    textAlign: 'center',
+    paddingHorizontal: 16,
+  },
+  subcontainer: {
+    flex: 1,
+    width: '100%',
+    gap: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+  },
+  header: {
+    fontSize: 24,
+    marginVertical: 10,
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+});
+/* eslint-enable react-native/no-unused-styles */
 
 const styles = StyleSheet.create({
   lipsum: {
     padding: 10,
   },
+  info_container: {
+    padding: 16,
+    backgroundColor: '#F5F7FA',
+    borderRadius: 12,
+    marginVertical: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
+  info_body: {
+    fontSize: 15,
+    lineHeight: 22,
+    color: '#4A5568',
+  },
+  feedback: {
+    marginTop: 20,
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });
 
 type Props = {
@@ -25,9 +117,99 @@ export class LoremIpsum extends React.Component<Props> {
   }
 }
 
+interface InfoSectionProps {
+  description: string;
+}
+
+export function InfoSection({ description }: InfoSectionProps) {
+  return (
+    <View style={styles.info_container}>
+      <Text style={styles.info_body}>{description}</Text>
+    </View>
+  );
+}
+
+type FeedbackProps = {
+  duration?: number;
+  ref?: RefObject<FeedbackHandle | null>;
+};
+
+export type FeedbackHandle = {
+  showMessage: (message: string) => void;
+};
+
+export const Feedback = ({ duration = 1000, ref }: FeedbackProps) => {
+  const [text, setText] = useState('Feedback');
+  const timerRef = useRef<number | null>(null);
+
+  const opacity = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const displayMessage = useCallback(
+    (message: string) => {
+      console.log(message);
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
+      setText(message);
+      opacity.value = withTiming(1, {
+        duration: 100,
+        easing: Easing.out(Easing.ease),
+      });
+
+      timerRef.current = setTimeout(() => {
+        opacity.value = withTiming(0, {
+          duration: 500,
+          easing: Easing.out(Easing.ease),
+        });
+        timerRef.current = null;
+      }, duration) as unknown as number;
+    },
+    [duration, opacity]
+  );
+
+  useImperativeHandle(ref, () => ({
+    showMessage: (message: string) => {
+      displayMessage(message);
+    },
+  }));
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <Animated.Text style={[styles.feedback, animatedStyle]}>
+      {text}
+    </Animated.Text>
+  );
+};
+
 export const COLORS = {
   offWhite: '#f8f9ff',
   headerSeparator: '#eef0ff',
+  PURPLE: '#b58df1',
+  NAVY: '#001A72',
+  RED: '#A41623',
+  YELLOW: '#F2AF29',
+  GREEN: '#0F956F',
+  GRAY: '#ADB1C2',
+  KINDA_RED: '#FFB2AD',
+  KINDA_YELLOW: '#FFF096',
+  KINDA_GREEN: '#C4E7DB',
+  KINDA_BLUE: '#A0D5EF',
 };
 
 const LOREM_IPSUM = `

apps/common-app/src/basic/bouncing/index.tsx → apps/common-app/src/legacy/basic/bouncing/index.tsx

@@ -11,7 +11,7 @@ import {
   RotationGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
-import { USE_NATIVE_DRIVER } from '../../config';
+import { USE_NATIVE_DRIVER } from '../../../config';
 
 class Snappable extends Component<PropsWithChildren<Record<string, unknown>>> {
   private onGestureEvent?: (event: PanGestureHandlerGestureEvent) => void;

apps/common-app/src/basic/draggable/index.tsx → apps/common-app/src/legacy/basic/draggable/index.tsx

@@ -9,8 +9,8 @@ import {
   ScrollView,
 } from 'react-native-gesture-handler';
 
-import { USE_NATIVE_DRIVER } from '../../config';
-import { LoremIpsum } from '../../common';
+import { USE_NATIVE_DRIVER } from '../../../config';
+import { LoremIpsum } from '../../../common';
 
 type DraggableBoxProps = {
   minDist?: number;

apps/common-app/src/basic/forcetouch/index.tsx → apps/common-app/src/legacy/basic/forcetouch/index.tsx

@@ -7,7 +7,7 @@ import {
   ForceTouchGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
-import { USE_NATIVE_DRIVER } from '../../config';
+import { USE_NATIVE_DRIVER } from '../../../config';
 
 export default class Example extends Component {
   private force = new Animated.Value(0);

apps/common-app/src/basic/multitap/index.tsx → apps/common-app/src/legacy/basic/multitap/index.tsx

@@ -10,7 +10,7 @@ import {
   TapGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
 
-import { LoremIpsum } from '../../common';
+import { LoremIpsum } from '../../../common';
 
 interface PressBoxProps {
   setDuration?: (duration: number) => void;

apps/common-app/src/basic/panResponder/index.tsx → apps/common-app/src/legacy/basic/panResponder/index.tsx

@@ -12,7 +12,7 @@ import {
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { DraggableBox } from '../draggable';
-import { LoremIpsum } from '../../common';
+import { LoremIpsum } from '../../../common';
 
 const CIRCLE_SIZE = 80;