chore: 🤖 bump spacecraft to Expo SDK 58

hackathon/spacecraft/.storybook/index.ts

@@ -0,0 +1,12 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import { view } from "./storybook.requires";
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

hackathon/spacecraft/.storybook/main.js → hackathon/spacecraft/.storybook/main.ts

@@ -1,7 +1,11 @@
-module.exports = {
+import type { StorybookConfig } from "@storybook/react-native";
+
+const main: StorybookConfig = {
+  addons: [],
   stories: [
     "../src/components/**/*.stories.?(ts|tsx|js|jsx)",
     "../src/screens/**/*.stories.?(ts|tsx|js|jsx)",
   ],
-  addons: [],
 };
+
+export default main;

hackathon/spacecraft/.storybook/preview.tsx

@@ -0,0 +1,19 @@
+import type { Preview } from "@storybook/react-native";
+
+import { View } from "react-native";
+
+const preview: Preview = {
+  decorators: [
+    // Using a decorator to apply padding for every story
+    (StoryFn) => (
+      <View style={{ flex: 1 }}>
+        <StoryFn />
+      </View>
+    ),
+  ],
+  parameters: {
+    my_param: "anything",
+  },
+};
+
+export default preview;

hackathon/spacecraft/.storybook/storybook.requires.ts

@@ -1,21 +1,18 @@
 /* do not change this file, it is auto generated by storybook. */
+/// <reference types="@storybook/react-native/metro-env" />
+import { start, updateView, type View, type Features } from '@storybook/react-native';
+
+
 
-import {
-  start,
-  prepareStories,
-  getProjectAnnotations,
-} from "@storybook/react-native";
 
 const normalizedStories = [
   {
     titlePrefix: "",
     directory: "./src/components",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
-    // @ts-ignore
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
     req: require.context(
-      "../src/components",
+      '../src/components',
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),
@@ -24,47 +21,46 @@ const normalizedStories = [
     titlePrefix: "",
     directory: "./src/screens",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
-    // @ts-ignore
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
     req: require.context(
-      "../src/screens",
+      '../src/screens',
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),
-  },
+  }
 ];
 
+
 declare global {
-  var view: ReturnType<typeof start>;
+  var view: View;
   var STORIES: typeof normalizedStories;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
+  var FEATURES: Features;
 }
 
+
 const annotations = [
-  require("./preview"),
-  require("@storybook/react-native/dist/preview"),
+  require('./preview'),
+  require("@storybook/react-native/preview")
 ];
 
-global.STORIES = normalizedStories;
+globalThis.STORIES = normalizedStories;
+
 
-// @ts-ignore
 module?.hot?.accept?.();
 
-if (!global.view) {
-  global.view = start({
+const options = {}
+
+if (!globalThis.view) {
+  globalThis.view = start({
     annotations,
     storyEntries: normalizedStories,
+    options,
   });
 } else {
-  const { importMap } = prepareStories({ storyEntries: normalizedStories });
-
-  global.view._preview.onStoriesChanged({
-    importFn: async (importPath: string) => importMap[importPath],
-  });
-
-  global.view._preview.onGetProjectAnnotationsChanged({
-    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
-  });
+  updateView(globalThis.view, annotations, normalizedStories, options);
 }
 
-export const view = global.view;
+export const view: View = globalThis.view;

hackathon/spacecraft/App.tsx

@@ -1,12 +1,13 @@
 import "@/polyfills/fetch";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Constants from "expo-constants";
+import { Provider as PaperProvider } from "react-native-paper";
+
 import { AuthenticationProvider } from "@/context/Authentication";
 import { NetworkProvider } from "@/context/Network";
 import { useAppearanceTheme } from "@/hooks/useAppearanceTheme";
 import { Navigator } from "@/navigation/Navigator";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Constants from "expo-constants";
-import { Provider as PaperProvider } from "react-native-paper";
 
 const queryClient = new QueryClient();
 
@@ -29,9 +30,7 @@ const App = () => {
 let AppEntryPoint = App;
 
 if (Constants.expoConfig?.extra?.storybookEnabled === "true") {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   AppEntryPoint = require("./.storybook").default;
 }
 
-// eslint-disable-next-line import/no-default-export -- required for expo
 export default AppEntryPoint;

hackathon/spacecraft/app.config.ts

@@ -48,17 +48,26 @@ export default ({ config }: { config: ExpoConfig }): ExpoConfig => {
     name: name,
     orientation: "portrait",
     owner: OWNER,
-    plugins: ["expo-web-browser", "expo-font"],
+    plugins: [
+      "expo-web-browser",
+      "expo-font",
+      "expo-image",
+      "expo-status-bar",
+      "@react-native-community/datetimepicker",
+      [
+        "expo-splash-screen",
+        {
+          backgroundColor: "#ffffff",
+          image: "./assets/splash.png",
+          resizeMode: "contain",
+        },
+      ],
+    ],
     runtimeVersion: {
       policy: "appVersion",
     },
     scheme: scheme,
     slug: PROJECT_SLUG,
-    splash: {
-      backgroundColor: "#ffffff",
-      image: "./assets/splash.png",
-      resizeMode: "contain",
-    },
     updates: {
       fallbackToCacheTimeout: 0,
       url: `https://u.expo.dev/${EAS_PROJECT_ID}`,