Merge pull request #224 from flexbox/bump/sptorybook-7

fix: 🐛 migrate from storybook-6.5 to 7

Author: MatthysDev

hackathon/spacecraft/.storybook/index.js

@@ -1,8 +1,12 @@
-import { getStorybookUI } from '@storybook/react-native';
-import './storybook.requires';
+// .storybook/index.tsx
+import { view } from './storybook.requires';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
-const StorybookUIRoot = getStorybookUI({
-  // options go here
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
 });
 
-export default StorybookUIRoot
+export default StorybookUIRoot;

hackathon/spacecraft/.storybook/main.js

@@ -3,5 +3,10 @@ module.exports = {
     "../src/components/**/*.stories.?(ts|tsx|js|jsx)",
     "../src/screens/**/*.stories.?(ts|tsx|js|jsx)",
   ],
-  addons: ["@storybook/addon-ondevice-controls"],
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
 };

hackathon/spacecraft/.storybook/storybook.requires.js

@@ -0,0 +1,49 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import { start } from "@storybook/react-native";
+
+import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
+
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./src/components",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      "../src/components",
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+  {
+    titlePrefix: "",
+    directory: "./src/screens",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      "../src/screens",
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+// @ts-ignore
+global.STORIES = normalizedStories;
+
+export const view = start({
+  annotations: [
+    require("./preview"),
+    require("@storybook/react-native/dist/preview"),
+    require("@storybook/addon-actions/preview"),
+  ],
+  storyEntries: normalizedStories,
+});

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

@@ -1,8 +1,18 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require("expo/metro-config");
+// metro.config.js
+const path = require('path');
+const { getDefaultConfig } = require('expo/metro-config');
 
-const defaultConfig = getDefaultConfig(__dirname);
+const { generate } = require('@storybook/react-native/scripts/generate');
 
-defaultConfig.resolver.resolverMainFields.unshift("sbmodern");
+generate({
+  configPath: path.resolve(__dirname, './.storybook'),
+});
 
-module.exports = defaultConfig;
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
+
+config.transformer.unstable_allowRequireContext = true;
+
+config.resolver.sourceExts.push('mjs');
+
+module.exports = config;

hackathon/spacecraft/metro.config.js

@@ -64,10 +64,13 @@
     "@react-native-community/datetimepicker": "7.6.2",
     "@react-native-community/slider": "4.5.0",
     "@storybook/addon-controls": "^7.6.10",
-    "@storybook/addon-ondevice-controls": "^6.5.1",
+    "@storybook/addon-ondevice-actions": "^7.6.15",
+    "@storybook/addon-ondevice-backgrounds": "^7.6.15",
+    "@storybook/addon-ondevice-controls": "^7.6.15",
+    "@storybook/addon-ondevice-notes": "^7.6.15",
     "@storybook/addons": "^7.6.10",
     "@storybook/core-common": "^7.6.10",
-    "@storybook/react-native": "^6.5.1",
+    "@storybook/react-native": "^7.6.15",
     "@storybook/react-native-server": "^6.5.8",
     "@tanstack/eslint-plugin-query": "^5.17.20",
     "@testing-library/jest-native": "^5.4.3",

hackathon/spacecraft/package.json

@@ -30,6 +30,4 @@ export const NotForSale = () => (
   </NavigationContainer>
 );
 
-NotForSale.story = {
-  name: "Not for sale",
-};
+NotForSale.storyName = "Not for sale";