deps(mobile): Expo SDK v54へのアップデートと依存関係の更新

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# macOS
+.DS_Store
+
 # Dependencies
 node_modules
 .pnp

apps/catalog/.gitignore

@@ -11,8 +11,9 @@ npm-debug.*
 *.orig.*
 web-build/
 
-# macOS
-.DS_Store
+# expo
+ios/
+android/
 
 # @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
 # The following patterns were generated by expo-cli

apps/catalog/.rnstorybook/main.ts

@@ -0,0 +1,27 @@
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import type { StorybookConfig } from "@storybook/react-native";
+
+const require = createRequire(import.meta.url);
+
+const main: StorybookConfig = {
+	stories: [
+		{
+			directory: "../../mobile/src",
+			files: "**/*.story.@(ts|tsx)",
+			titlePrefix: "app - mobile",
+		},
+		{
+			directory: "../../../packages/ui/src",
+			files: "**/*.native.story.@(ts|tsx)",
+			titlePrefix: "package - ui",
+		},
+	],
+	addons: [getAbsolutePath("@storybook/addon-ondevice-controls"), getAbsolutePath("@storybook/addon-ondevice-actions")],
+};
+
+export default main;
+
+function getAbsolutePath(value: string) {
+	return dirname(require.resolve(join(value, "package.json")));
+}

apps/catalog/.storybook/mobile/preview.tsx → apps/catalog/.rnstorybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react-webpack5";
 
 const preview: Preview = {
 	parameters: {

apps/catalog/.storybook/mobile/storybook.requires.ts → apps/catalog/.rnstorybook/storybook.requires.ts

@@ -1,20 +1,18 @@
 /* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-import { start, updateView } from "@storybook/react-native";
-
-import "@storybook/addon-ondevice-controls/register";
-import "@storybook/addon-ondevice-actions/register";
+import "/Users/kousuke/Desktop/projects/@me/mona-ca/node_modules/@storybook/addon-ondevice-controls/register";
+import "/Users/kousuke/Desktop/projects/@me/mona-ca/node_modules/@storybook/addon-ondevice-actions/register";
 
 const normalizedStories = [
   {
     titlePrefix: "app - mobile",
     directory: "../mobile/src",
     files: "**/*.story.@(ts|tsx)",
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(ts|tsx))$/,
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(ts|tsx))$/,
     // @ts-ignore
     req: require.context(
-      "../../../mobile/src",
+      '../../mobile/src',
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.story\.(ts|tsx))$/
     ),
@@ -23,40 +21,43 @@ const normalizedStories = [
     titlePrefix: "package - ui",
     directory: "../../packages/ui/src",
     files: "**/*.native.story.@(ts|tsx)",
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.native\.story\.(ts|tsx))$/,
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.native\.story\.(ts|tsx))$/,
     // @ts-ignore
     req: require.context(
-      "../../../../packages/ui/src",
+      '../../../packages/ui/src',
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.native\.story\.(ts|tsx))$/
     ),
-  },
+  }
 ];
 
+
 declare global {
-  var view: ReturnType<typeof start>;
+  var view: View;
   var STORIES: typeof normalizedStories;
 }
 
+
 const annotations = [
-  require("./preview"),
-  require("@storybook/react-native/preview"),
-  require("@storybook/addon-ondevice-actions/preview"),
+  require('./preview'),
+  require("@storybook/react-native/preview")
 ];
 
 global.STORIES = normalizedStories;
 
 // @ts-ignore
 module?.hot?.accept?.();
 
+
+
 if (!global.view) {
   global.view = start({
     annotations,
     storyEntries: normalizedStories,
+
   });
 } else {
   updateView(global.view, annotations, normalizedStories);
 }
 
-export const view = global.view;
+export const view: View = global.view;

apps/catalog/.storybook/web/main.ts → apps/catalog/.storybook/main.ts

@@ -1,31 +1,35 @@
-import path from "node:path";
+import { createRequire } from "node:module";
+import path, { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
+const require = createRequire(import.meta.url);
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 const config: StorybookConfig = {
 	stories: [
 		{
-			directory: "../../../web/src",
+			directory: "../../web/src",
 			files: "**/*.story.@(ts|tsx)",
 			titlePrefix: "app - web",
 		},
 		{
-			directory: "../../../../packages/ui/src",
+			directory: "../../../packages/ui/src",
 			files: "**/!(*.native).story.@(ts|tsx)",
 			titlePrefix: "package - ui",
 		},
 	],
+
 	addons: [
-		"@storybook/addon-onboarding",
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@chromatic-com/storybook",
-		"@storybook/addon-interactions",
-		"@storybook/addon-a11y",
-		"@storybook/addon-storysource",
-		"@storybook/addon-themes",
-		"@storybook/addon-webpack5-compiler-swc",
+		getAbsolutePath("@storybook/addon-onboarding"),
+		getAbsolutePath("@chromatic-com/storybook"),
+		getAbsolutePath("@storybook/addon-a11y"),
+		getAbsolutePath("@storybook/addon-themes"),
+		getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
 		{
-			name: "@storybook/addon-styling-webpack",
+			name: getAbsolutePath("@storybook/addon-styling-webpack"),
 			options: {
 				rules: [
 					// Replaces existing CSS rules to support PostCSS
@@ -50,7 +54,7 @@ const config: StorybookConfig = {
 			},
 		},
 		{
-			name: "@storybook/addon-react-native-web",
+			name: getAbsolutePath("@storybook/addon-react-native-web"),
 			options: {
 				modulesToTranspile: ["react-native-reanimated", "nativewind", "react-native-css-interop"],
 				// babelPresets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
@@ -66,15 +70,18 @@ const config: StorybookConfig = {
 				// ],
 			},
 		},
+		getAbsolutePath("@storybook/addon-docs"),
 	],
+
 	framework: {
-		name: "@storybook/react-webpack5",
+		name: getAbsolutePath("@storybook/react-webpack5"),
 		options: {
 			builder: {
 				useSWC: true,
 			},
 		},
 	},
+
 	webpackFinal: webpackConfig => {
 		if (webpackConfig.resolve) {
 			webpackConfig.resolve.alias = {
@@ -98,6 +105,7 @@ const config: StorybookConfig = {
 
 		return webpackConfig;
 	},
+
 	swc: () => ({
 		jsc: {
 			transform: {
@@ -107,9 +115,10 @@ const config: StorybookConfig = {
 			},
 		},
 	}),
-	docs: {
-		autodocs: "tag",
-	},
 };
 
 export default config;
+
+function getAbsolutePath(value: string) {
+	return dirname(require.resolve(join(value, "package.json")));
+}

apps/catalog/.storybook/web/preview.ts → apps/catalog/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import { withThemeByClassName, withThemeByDataAttribute } from "@storybook/addon-themes";
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
 import type { Preview } from "@storybook/react";
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
 import "./global.css";
 
 const DEFAULT_THEME = "light";
@@ -20,18 +20,18 @@ const preview: Preview = {
 			},
 		},
 		viewport: {
-			viewports: INITIAL_VIEWPORTS,
+			options: INITIAL_VIEWPORTS,
 		},
 		backgrounds: {
-			default: "Auto Change",
-			values: [
-				{
+			options: {
+				auto_change: {
 					name: "Auto Change",
 					value: BACKGROUND_CSS_VALUE,
 				},
-			],
+			},
 		},
 	},
+
 	decorators: [
 		withThemeByClassName({
 			themes: THEMES,
@@ -43,7 +43,14 @@ const preview: Preview = {
 			attributeName: ATTRIBUTE_NAME,
 		}),
 	],
+
 	tags: ["autodocs"],
+
+	initialGlobals: {
+		backgrounds: {
+			value: "auto_change",
+		},
+	},
 };
 
 export default preview;