chore/update versions again

.github/workflows/release.yml

@@ -5,7 +5,7 @@ on: [push]
 jobs:
   release:
     runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    if: ${{!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')}}
     steps:
       - uses: actions/checkout@v2
 

.gitignore

@@ -4,4 +4,9 @@ storybook-static/
 build-storybook.log
 .DS_Store
 .env!/
-.yarn/
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -1 +1,3 @@
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

package.json

@@ -31,7 +31,6 @@
     "prebuild": "yarn clean",
     "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
     "build:watch": "concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"",
-    "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "prestorybook": "yarn buildBabel:cjs",
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --quiet\"",
@@ -42,79 +41,74 @@
     "chromatic": "npx chromatic --project-token=c9eb9dda8699"
   },
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.20.13",
-    "@expo/html-elements": "^0.2.0",
-    "@react-native-community/eslint-config": "^3.1.0",
-    "@storybook/addon-essentials": "^7.0.0",
-    "@storybook/react": "^7.0.0",
-    "@storybook/react-webpack5": "^7.0.0",
-    "@types/jest": "^27.4.1",
-    "@types/react-native-vector-icons": "^6.4.12",
-    "@types/react-test-renderer": "^18.0.0",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.23.7",
+    "@expo/html-elements": "^0.5.1",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/babel-preset": "^0.73.19",
+    "@storybook/addon-essentials": "~7.5",
+    "@storybook/react": "~7.5",
+    "@storybook/react-webpack5": "~7.5",
+    "@types/react-native-vector-icons": "^6.4.18",
     "auto": "^10.36.5",
-    "babel-jest": "^28.0.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
-    "babel-plugin-react-native-web": "^0.18.9",
+    "babel-plugin-react-native-web": "^0.19.10",
     "boxen": "^5.0.1",
-    "chromatic": "^6.11.2",
-    "concurrently": "^7.5.0",
-    "dedent": "^0.7.0",
-    "eslint": "^8.14.0",
-    "eslint-plugin-ft-flow": "^2.0.3",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.6",
-    "expo-linear-gradient": "^11.4.0",
-    "jest": "^28.0.0",
-    "@react-native/babel-preset": "^0.73.18",
-    "native-base": "^3.4.19",
-    "prettier": "^2.7.1",
-    "prop-types": "^15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "chromatic": "^10.2.0",
+    "concurrently": "^8.2.2",
+    "dedent": "^1.5.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-ft-flow": "^3.0.2",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "expo-linear-gradient": "^12.5.0",
+    "native-base": "^3.4.28",
+    "normalize-css-color": "^1.0.2",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "^0.73.1",
-    "react-native-gesture-handler": "^2.8.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-reanimated": "2.14.4",
-    "react-native-safe-area-context": "^4.4.1",
-    "react-native-screens": "^3.18.2",
-    "react-native-svg": "^13.4.0",
-    "react-native-vector-icons": "^9.2.0",
-    "react-native-web": "^0.18.9",
-    "react-test-renderer": "18.1.0",
-    "rimraf": "^3.0.2",
-    "storybook": "^7.0.0",
-    "typescript": "^4.9.5",
-    "victory": "^36.6.8",
-    "victory-native": "^36.6.8",
-    "webpack": "5",
+    "react-native-gesture-handler": "^2.14.0",
+    "react-native-paper": "^5.11.7",
+    "react-native-reanimated": "^3.6.1",
+    "react-native-safe-area-context": "^4.8.2",
+    "react-native-screens": "^3.29.0",
+    "react-native-svg": "^14.1.0",
+    "react-native-vector-icons": "^10.0.3",
+    "react-native-web": "^0.19.10",
+    "rimraf": "^5.0.5",
+    "storybook": "~7.5",
+    "typescript": "^5.3.3",
+    "victory": "^36.7.0",
+    "victory-native": "^40.0.3",
+    "webpack": "^5.89.0",
     "zx": "^6.1.0"
   },
   "peerDependencies": {
     "@babel/preset-react": "*",
     "@react-native/babel-preset": "*",
-    "metro-react-native-babel-preset": "*",
     "babel-plugin-react-native-web": "*",
+    "metro-react-native-babel-preset": "*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
-    "react": {
+    "@react-native/babel-preset": {
       "optional": true
     },
-    "react-dom": {
+    "metro-react-native-babel-preset": {
       "optional": true
     },
-    "@react-native/babel-preset": {
+    "react": {
       "optional": true
     },
-    "metro-react-native-babel-preset": {
+    "react-dom": {
       "optional": true
     }
   },
@@ -127,5 +121,9 @@
       "react-native"
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
-  }
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
+  "packageManager": "yarn@4.0.2"
 }

stories/libraries/Gesture/Draggable/Draggable.stories.tsx

@@ -1,33 +1,38 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { StyleSheet, Text, View } from 'react-native';
 import { Draggable } from './Draggable';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  fill: {
+    // @ts-ignore
+    height: '50vh',
+  },
 });
 
 export default {
   title: 'libraries/Gesture Handler/Draggable',
   component: Draggable,
   render: (args) => {
     return (
-      <Draggable {...args}>
-        <Text>{args.children}</Text>
-      </Draggable>
+      <GestureHandlerRootView style={styles.fill}>
+        <View style={styles.container}>
+          <Draggable {...args}>
+            <Text>{args.children}</Text>
+          </Draggable>
+        </View>
+      </GestureHandlerRootView>
     );
   },
-  decorators: [
-    (Story) => (
-      <View style={styles.container}>
-        <Story />
-      </View>
-    ),
-  ],
-} as ComponentMeta<typeof Draggable>;
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Draggable>;
 
 export const Basic = {
   args: {

stories/libraries/Gesture/Draggable/Draggable.tsx

@@ -1,115 +1,70 @@
-import React, { ReactNode, useRef } from 'react';
-import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { ReactNode } from 'react';
 import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-  TapGestureHandler,
-} from 'react-native-gesture-handler';
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TransformsStyle,
+  ViewStyle,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
-  withTiming,
 } from 'react-native-reanimated';
 
 type DraggableProps = {
   style?: StyleProp<ViewStyle>;
   children?: ReactNode | ReactNode[];
 };
 
-type ContextType = {
-  x: number;
-  y: number;
-};
-
 export const Draggable = ({ children, style }: DraggableProps) => {
-  const x = useSharedValue(0);
-  const y = useSharedValue(0);
-  const tapActive = useSharedValue(false);
-  const panActive = useSharedValue(false);
-  const tapRef = useRef();
-  const panRef = useRef();
-
-  const endPan = () => {
-    'worklet';
-    panActive.value = false;
-  };
+  const Xposition = useSharedValue(0);
+  const Yposition = useSharedValue(0);
+  const scale = useSharedValue(1);
 
-  const endTap = () => {
-    'worklet';
-    tapActive.value = false;
-  };
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      Xposition.value = e.translationX;
+      Yposition.value = e.translationY;
+      scale.value = withSpring(1.2);
+    })
+    .onEnd((_e) => {
+      Xposition.value = withSpring(0);
+      Yposition.value = withSpring(0);
+      scale.value = withSpring(1);
+    });
 
-  const panGestureEvent = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    ContextType
-  >({
-    onStart: (_, context) => {
-      context.x = x.value;
-      context.y = y.value;
-      panActive.value = true;
-    },
-    onActive: (event, context) => {
-      x.value = event.translationX + context.x;
-      y.value = event.translationY + context.y;
-    },
-    onEnd: () => {
-      x.value = withSpring(0);
-      y.value = withSpring(0);
-      endPan();
-    },
-    onFinish: endPan,
-    onCancel: endPan,
-    onFail: endPan,
-  });
+  const tapGesture = Gesture.Tap()
+    .onTouchesDown(() => {
+      scale.value = withSpring(1.2);
+    })
+    .onTouchesUp(() => {
+      scale.value = withSpring(1);
+    });
 
-  const panStyle = Platform.select({
-    android: { transform: [] }, // currently useanimated style is crashing for android
-    default: useAnimatedStyle(() => {
-      return {
+  const animatedStyle = useAnimatedStyle(
+    () =>
+      ({
         transform: [
-          { scale: withTiming(tapActive.value || panActive.value ? 1.2 : 1) },
-          {
-            translateX: x.value,
-          },
-          {
-            translateY: y.value,
-          },
+          { translateX: Xposition.value },
+          { translateY: Yposition.value },
+          { scale: scale.value },
         ],
-      };
-    }, [x, y, tapActive, panActive]),
-  });
+      } as TransformsStyle),
+  );
 
   return (
-    <PanGestureHandler
-      ref={panRef}
-      onGestureEvent={panGestureEvent}
-      simultaneousHandlers={tapRef}
-    >
-      <Animated.View style={styles.z}>
-        <TapGestureHandler
-          simultaneousHandlers={panRef}
-          ref={tapRef}
-          onBegan={() => {
-            tapActive.value = true;
-          }}
-          onEnded={endTap}
-          onFailed={endTap}
-          onCancelled={endTap}
-        >
-          <Animated.View style={[styles.box, panStyle, style]}>
-            {children}
-          </Animated.View>
-        </TapGestureHandler>
+    <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
+      <Animated.View style={[styles.box, animatedStyle, style]}>
+        {children}
       </Animated.View>
-    </PanGestureHandler>
+    </GestureDetector>
   );
 };
 
 const styles = StyleSheet.create({
   box: {
-    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     shadowColor: '#000',
@@ -122,10 +77,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.2,
     shadowRadius: 1.41,
 
+    zIndex: 999,
     elevation: 2,
     ...Platform.select({ web: { cursor: 'grab' }, default: {} }),
   },
-  z: {
-    zIndex: 999,
-  },
 });