@storybook/react-native 6.5.5-alpha.1 → 6.5.5

package/dist/preview/executeLoadable.js

@@ -24,7 +24,10 @@ function executeLoadable(loadable) {
             req.keys().forEach(function (filename) {
                 try {
                     var fileExports = req(filename);
-                    exportsMap.set(typeof req.resolve === 'function' ? req.resolve(filename) : filename, fileExports);
+                    exportsMap.set(
+                    // NOTE context.resolve is not yet implemented for metro
+                    // typeof req.resolve === 'function' ? req.resolve(filename) : filename,
+                    filename, fileExports);
                 }
                 catch (error) {
                     var errorString = error.message && error.stack ? "".concat(error.message, "\n ").concat(error.stack) : error.toString();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.5-alpha.1",
+  "version": "6.5.5",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -63,7 +63,7 @@
     "@storybook/core-events": "^6.5.14",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
     "@storybook/preview-web": "^6.5.14",
-    "@storybook/react-native-theming": "^6.5.5-alpha.1",
+    "@storybook/react-native-theming": "^6.5.5",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
@@ -78,7 +78,8 @@
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
-    "react-test-renderer": "18.2.0"
+    "react-test-renderer": "18.2.0",
+    "typescript": "^5.1.3"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1",
@@ -92,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3a03b09c728691717dee406e91439227d3483a7b"
+  "gitHead": "ad15a9640397fbaf3536c1b8469c7b13b70676d8"
 }

package/scripts/__snapshots__/loader.test.js.snap

@@ -41,11 +41,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/file-extensions/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
+          return {"./scripts/mocks/file-extensions/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -90,11 +93,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx": require("./components/FakeStory.stories.tsx")};
+          return {"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx": require("./components/FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -139,11 +145,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx": require("./include-components/FakeStory.stories.tsx")};
+          return {"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx": require("./include-components/FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -188,11 +197,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/all-config-files/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
+          return {"./scripts/mocks/all-config-files/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -219,11 +231,14 @@ import "@storybook/addon-ondevice-actions/register";
       } catch{}
     
 
+         
       const getStories=() => {
-        return {"./scripts/mocks/no-preview/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
+          return {"./scripts/mocks/no-preview/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;
 
@@ -243,10 +258,13 @@ exports[`loader writeRequires when there is no story glob or addons writes no st
 
       
 
+         
       const getStories=() => {
-        return {};
+          return {};
       }
 
       configure(getStories, module, false)
+    
+      
   "
 `;

package/scripts/handle-args.js

@@ -8,7 +8,11 @@ function getArguments() {
       'The path to your config folder relative to your project-dir',
       './.storybook'
     )
-    .option('-a, --absolute', 'Use absolute paths for story imports');
+    .option('-a, --absolute', 'Use absolute paths for story imports')
+    .option(
+      '-unstable_useRequireContext, --unstable_useRequireContext',
+      'Use experimental require.context to load stories'
+    );
 
   program.parse();
 

package/scripts/loader.js

@@ -2,7 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const glob = require('glob');
 const prettier = require('prettier');
-const normalizeStories = require('@storybook/core-common').normalizeStories;
+const { normalizeStories, toRequireContext } = require('@storybook/core-common');
 
 const cwd = process.cwd();
 const supportedExtensions = ['js', 'jsx', 'ts', 'tsx', 'cjs', 'mjs'];
@@ -45,14 +45,17 @@ function normalizeExcludePaths(paths) {
 
 function requireUncached(module) {
   delete require.cache[require.resolve(module)];
+
   return require(module);
 }
 
 function getMain({ configPath }) {
   const fileExtension = getFilePathExtension({ configPath }, 'main');
+
   if (fileExtension === null) {
     throw new Error('main config file not found');
   }
+
   const mainPath = path.resolve(cwd, configPath, `main.${fileExtension}`);
 
   return requireUncached(mainPath);
@@ -61,10 +64,12 @@ function getMain({ configPath }) {
 function getFilePathExtension({ configPath }, fileName) {
   for (const ext of supportedExtensions) {
     const filePath = path.resolve(cwd, configPath, `${fileName}.${ext}`);
+
     if (fs.existsSync(filePath)) {
       return ext;
     }
   }
+
   return null;
 }
 
@@ -76,13 +81,17 @@ function ensureRelativePathHasDot(relativePath) {
   return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
 }
 
-function writeRequires({ configPath, absolute = false }) {
+function writeRequires({ configPath, absolute = false, unstable_useRequireContext = false }) {
   const storybookRequiresLocation = path.resolve(cwd, configPath, 'storybook.requires.js');
 
   const mainImport = getMain({ configPath });
+
   const main = mainImport.default ?? mainImport;
+
   const reactNativeOptions = main.reactNativeOptions;
+
   const excludePaths = reactNativeOptions && reactNativeOptions.excludePaths;
+
   const normalizedExcludePaths = normalizeExcludePaths(excludePaths);
 
   const storiesSpecifiers = normalizeStories(main.stories, {
@@ -90,32 +99,61 @@ function writeRequires({ configPath, absolute = false }) {
     workingDir: cwd,
   });
 
-  const storyRequires = storiesSpecifiers.reduce((acc, specifier) => {
-    const paths = glob
-      .sync(specifier.files, {
-        cwd: path.resolve(cwd, specifier.directory),
-        absolute,
-        // default to always ignore (exclude) anything in node_modules
-        ignore: normalizedExcludePaths !== undefined ? normalizedExcludePaths : ['**/node_modules'],
-      })
-      .map((storyPath) => {
-        const pathWithDirectory = path.join(specifier.directory, storyPath);
-        const requirePath = absolute
-          ? storyPath
-          : ensureRelativePathHasDot(path.relative(configPath, pathWithDirectory));
-
-        const absolutePath = absolute ? requirePath : path.resolve(configPath, requirePath);
-        const pathRelativeToCwd = path.relative(cwd, absolutePath);
-
-        const normalizePathForWindows = (str) =>
-          path.sep === '\\' ? str.replace(/\\/g, '/') : str;
-
-        return `"./${normalizePathForWindows(
-          pathRelativeToCwd
-        )}": require("${normalizePathForWindows(requirePath)}")`;
-      });
-    return [...acc, ...paths];
-  }, []);
+  let configure = '';
+
+  if (unstable_useRequireContext) {
+    const contexts = storiesSpecifiers.map((specifier) => {
+      const { path: p, recursive: r, match: m } = toRequireContext(specifier);
+      // TODO remove this dot 👇 and find actual solution
+      return `require.context('.${p}', ${r}, ${m})`;
+    });
+
+    configure = `
+      const stories = [${contexts.join(',')}];
+      
+      configure(stories, module, false)
+    `;
+  } else {
+    const storyRequires = storiesSpecifiers.reduce((acc, specifier) => {
+      const paths = glob
+        .sync(specifier.files, {
+          cwd: path.resolve(cwd, specifier.directory),
+          absolute,
+          // default to always ignore (exclude) anything in node_modules
+          ignore:
+            normalizedExcludePaths !== undefined ? normalizedExcludePaths : ['**/node_modules'],
+        })
+        .map((storyPath) => {
+          const pathWithDirectory = path.join(specifier.directory, storyPath);
+
+          const requirePath = absolute
+            ? storyPath
+            : ensureRelativePathHasDot(path.relative(configPath, pathWithDirectory));
+
+          const absolutePath = absolute ? requirePath : path.resolve(configPath, requirePath);
+
+          const pathRelativeToCwd = path.relative(cwd, absolutePath);
+
+          const normalizePathForWindows = (str) =>
+            path.sep === '\\' ? str.replace(/\\/g, '/') : str;
+
+          return `"./${normalizePathForWindows(
+            pathRelativeToCwd
+          )}": require("${normalizePathForWindows(requirePath)}")`;
+        });
+      return [...acc, ...paths];
+    }, []);
+
+    const path_obj_str = `{${storyRequires.join(',')}}`;
+
+    configure = `   
+      const getStories=() => {
+          return ${path_obj_str};
+      }
+
+      configure(getStories, module, false)
+    `;
+  }
 
   fs.writeFileSync(storybookRequiresLocation, '');
 
@@ -123,14 +161,14 @@ function writeRequires({ configPath, absolute = false }) {
 
   let previewJs = previewExists ? previewImports : '';
 
-  const path_obj_str = `{${storyRequires.join(',')}}`;
-
   const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n');
+
   let enhancersImport = '';
+
   let enhancers = '';
 
   // TODO: implement presets or something similar
-  if (main.addons.includes('@storybook/addon-ondevice-actions')) {
+  if (main.addons?.includes('@storybook/addon-ondevice-actions')) {
     enhancersImport =
       'import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"';
 
@@ -167,11 +205,8 @@ function writeRequires({ configPath, absolute = false }) {
 
       ${enhancers}
 
-      const getStories=() => {
-        return ${path_obj_str};
-      }
-
-      configure(getStories, module, false)
+      ${configure}
+      
   `;
 
   const formattedFileContent = prettier.format(fileContent, { parser: 'babel' });

package/template/cli/storybook.requires.js

@@ -0,0 +1,54 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import {
+  configure,
+  addDecorator,
+  addParameters,
+  addArgsEnhancer,
+  clearDecorators,
+} from '@storybook/react-native';
+
+global.STORIES = [
+  {
+    titlePrefix: '',
+    directory: './.storybook/stories',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      '^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
+  },
+];
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-actions/register';
+
+import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs';
+
+import { decorators, parameters } from './preview';
+
+if (decorators) {
+  if (__DEV__) {
+    // stops the warning from showing on every HMR
+    require('react-native').LogBox.ignoreLogs([
+      '`clearDecorators` is deprecated and will be removed in Storybook 7.0',
+    ]);
+  }
+  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+  clearDecorators();
+  decorators.forEach((decorator) => addDecorator(decorator));
+}
+
+if (parameters) {
+  addParameters(parameters);
+}
+
+try {
+  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
+} catch {}
+
+const getStories = () => {
+  return {
+    './.storybook/stories/Button/Button.stories.js': require('./stories/Button/Button.stories.js'),
+  };
+};
+
+configure(getStories, module, false);