Expo 51 (#972)

* Updates packages in all

* Update example app packages

* Update version to 51.0.0

* Update yarn.lock

* Update more packages + use metro for example app + other fixes + updated eslint

* js -> jsx

* Fix tests

* Update workflow node version

* Fix web date picker

* Proper ts lint and address linter errors

* Fix build issue

* Fix remaining linter errors

* Update ci.yml with 51

Author: YoussefHenna

.github/workflows/ci.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - master
-      - 50
+      - 51
   pull_request:
     types: [assigned, opened, synchronize, reopened]
 
@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: "yarn"
           registry-url: https://registry.npmjs.org/
 
@@ -64,8 +64,8 @@ jobs:
             --yes \
             --no-verify-access
 
-      - name: Release packages (50)
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/50'
+      - name: Release packages (51)
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/51'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.JIGSAW_AUTH_TOKEN }}
         run: |
@@ -81,12 +81,12 @@ jobs:
           # This hits Snack twice because it commonly times out the first time
           export newversion=$(npm view @draftbit/ui dist-tags.next);
           sleep 10
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
         working-directory: packages/ui
 
       - name: Release to Snack
@@ -96,12 +96,12 @@ jobs:
           # This hits Snack twice because it commonly times out the first time
           export version=$(jq -r .version package.json);
           sleep 10
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=50.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
         working-directory: packages/ui
 
       - name: Add comment to pull request

.husky/pre-commit

@@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  quoteProps: "consistent",
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  useTabs: false,
+  bracketSpacing: true,
+  endOfLine: "auto",
+};

eslint.config.js

@@ -0,0 +1,70 @@
+const { fixupPluginRules } = require("@eslint/compat");
+const esLintReactNative = require("eslint-plugin-react-native");
+const eslintPluginPrettierRecommended = require("eslint-plugin-prettier/recommended");
+const hooksPlugin = require("eslint-plugin-react-hooks");
+const tsEslint = require("typescript-eslint");
+
+module.exports = [
+  ...tsEslint.configs.recommended,
+  eslintPluginPrettierRecommended,
+
+  // Workaround for `eslint-plugin-react-native` not supporting eslint flat configs
+  // https://github.com/facebook/react-native/issues/42996#issuecomment-2275994981
+  {
+    name: "eslint-plugin-react-native",
+    plugins: {
+      "react-native": fixupPluginRules({
+        rules: esLintReactNative.rules,
+      }),
+    },
+    rules: {
+      ...esLintReactNative.configs.all.rules,
+      "react-native/sort-styles": "off",
+      "react-native/no-inline-styles": "warn",
+    },
+  },
+
+  // Workaround for `eslint-plugin-react-hooks` not supporting eslint flat configs
+  // https://github.com/facebook/react/issues/28313#issuecomment-2379308650
+  {
+    plugins: {
+      "react-hooks": fixupPluginRules(hooksPlugin),
+    },
+    rules: hooksPlugin.configs.recommended.rules,
+  },
+  {
+    ignores: [
+      "scripts",
+      "example/web-build",
+      "node_modules/",
+      "**/lib/**",
+      "**/__generated__/**",
+      "jest-setup.js",
+    ],
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-require-imports": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-unnecessary-type-constraint": "off",
+      "react-native/no-inline-styles": "off",
+      "react-native/no-color-literals": "off",
+
+      // ignore unused vars that start with underscore
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+];

example/app.json

@@ -1,6 +1,4 @@
 {
-  "name": "@draftbit/ui-example",
-  "displayName": "Ui Example",
   "expo": {
     "name": "@draftbit/ui-example",
     "slug": "draftbit-ui-example",
@@ -17,6 +15,7 @@
     "ios": {
       "supportsTablet": true
     },
-    "assetBundlePatterns": ["**/*"]
+    "assetBundlePatterns": ["**/*"],
+    "plugins": ["expo-asset", "expo-font"]
   }
 }

example/babel.config.js

@@ -3,7 +3,7 @@ module.exports = function (api) {
   return {
     presets: ["babel-preset-expo"],
     plugins: [
-      "@babel/plugin-proposal-export-namespace-from",
+      "@babel/plugin-transform-export-namespace-from",
       "react-native-reanimated/plugin",
     ],
   };

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "50.6.3",
+  "version": "51.0.0",
   "private": true,
   "scripts": {
     "android": "expo start --android",
@@ -14,32 +14,32 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "50.6.3",
-    "@draftbit/ui": "50.6.3",
+    "@draftbit/maps": "51.0.0",
+    "@draftbit/ui": "51.0.0",
     "@expo/dev-server": "0.1.123",
-    "@expo/webpack-config": "~19.0.1",
+    "@expo/metro-runtime": "~3.2.3",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
-    "@shopify/flash-list": "1.6.3",
-    "expo": "^50.0.0",
-    "expo-asset": "~9.0.2",
-    "expo-constants": "~15.4.6",
-    "expo-font": "~11.10.3",
-    "expo-splash-screen": "~0.26.4",
-    "expo-status-bar": "~1.11.1",
+    "@shopify/flash-list": "1.6.4",
+    "expo": "^51.0.0",
+    "expo-asset": "~10.0.10",
+    "expo-constants": "~16.0.2",
+    "expo-font": "~12.0.10",
+    "expo-splash-screen": "~0.27.7",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-get-random-values": "~1.8.0",
-    "react-native-reanimated": "~3.6.2",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-web": "~0.19.6",
+    "react-native": "0.74.5",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-get-random-values": "~1.11.0",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "@types/react": "~18.2.45",
     "@types/react-native": "~0.70.6",
     "babel-loader": "8.1.0",

example/src/AccordionExample.js example/src/AccordionExample.jsx

@@ -122,7 +122,7 @@ const ROUTES = {
   KeyboardAvoidingView: KeyboardAvoidingViewExample,
 };
 
-let customFonts = {
+const customFonts = {
   "FiraCode": require("./assets/fonts/FiraCode-Bold.otf"),
   "Testing": require("./assets/fonts/Sriracha-Regular.ttf"),
   "Inter-SemiBoldItalic":
@@ -374,7 +374,7 @@ function Example({ title, children }: ExampleProps) {
           />
         </TouchableOpacity>
 
-        <Text style={[exampleStyles.headerTextStyle]}>{title}</Text>
+        <Text style={exampleStyles.headerTextStyle}>{title}</Text>
         <TouchableOpacity
           style={exampleStyles.menuButtonStyle}
           onPress={() => {
@@ -428,11 +428,6 @@ function Examples() {
 }
 
 const exampleStyles = StyleSheet.create({
-  mainParent: {
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(251, 252, 253, 1)",
-  },
   headerStyle: {
     flexDirection: "row",
     alignItems: "center",
@@ -469,7 +464,4 @@ const exampleStyles = StyleSheet.create({
     marginBottom: 8,
     paddingVertical: 4,
   },
-  scrollViewStyle: {
-    paddingBottom: 20,
-  },
 });

example/src/ActionSheetExample.js example/src/ActionSheetExample.jsx

@@ -38,7 +38,7 @@ const TimerExample: React.FC = () => {
             }}
             onTimerEnd={() => {
               console.log("onTimerEnd");
-              // eslint-disable-next-line no-alert
+
               alert("onTimerEnd");
             }}
             style={{
@@ -66,11 +66,6 @@ const TimerExample: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    padding: 20,
-  },
   buttonsContainer: {
     marginTop: 20,
     gap: 10,

example/src/App.tsx

@@ -1,7 +1,6 @@
 {
-  "version": "50.6.3",
+  "version": "51.0.0",
   "npmClient": "yarn",
-  "useWorkspaces": true,
   "packages": ["packages/*", "example"],
   "command": {
     "publish": {