fix: allow addon config objects (#664)

* fix: allow addon config objects

* fix

Author: dannyhw

examples/expo-example/.storybook/main.ts

@@ -17,7 +17,7 @@ const main: StorybookConfig = {
     // '../components/**/*.storiesof.?(ts|tsx|js|jsx)',
   ],
   addons: [
-    '@storybook/addon-ondevice-controls',
+    { name: '@storybook/addon-ondevice-controls' },
     '@storybook/addon-ondevice-backgrounds',
     '@storybook/addon-ondevice-actions',
     '@storybook/addon-ondevice-notes',

packages/react-native/scripts/common.js

@@ -59,6 +59,8 @@ function getPreviewExists({ configPath }) {
 }
 
 function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configPath) {
+  if (!addon || typeof addon !== 'string') return null;
+
   try {
     const basePath = `${addon}/${file}`;
 
@@ -91,6 +93,16 @@ function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configP
   return null;
 }
 
+function getAddonName(addon) {
+  if (typeof addon === 'string') return addon;
+
+  if (typeof addon === 'object' && addon.name && typeof addon.name === 'string') return addon.name;
+
+  console.error('Invalid addon configuration', addon);
+
+  return null;
+}
+
 module.exports = {
   toRequireContext,
   requireUncached,
@@ -99,4 +111,5 @@ module.exports = {
   ensureRelativePathHasDot,
   getPreviewExists,
   resolveAddonFile,
+  getAddonName,
 };

packages/react-native/scripts/generate.js

@@ -4,6 +4,7 @@ const {
   getMain,
   getPreviewExists,
   resolveAddonFile,
+  getAddonName,
 } = require('./common');
 const { normalizeStories, globToRegexp } = require('@storybook/core/common');
 const fs = require('fs');
@@ -51,7 +52,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   for (const addon of main.addons) {
     const registerPath = resolveAddonFile(
-      addon,
+      getAddonName(addon),
       'register',
       ['js', 'mjs', 'jsx', 'ts', 'tsx'],
       configPath
@@ -68,7 +69,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   for (const addon of main.addons) {
     const previewPath = resolveAddonFile(
-      addon,
+      getAddonName(addon),
       'preview',
       ['js', 'mjs', 'jsx', 'ts', 'tsx'],
       configPath

packages/react-native/src/index.ts

@@ -6,6 +6,6 @@ export { start, prepareStories, getProjectAnnotations, updateView } from './Star
 
 export interface StorybookConfig {
   stories: StorybookConfigBase['stories'];
-  addons: string[];
+  addons: Array<string | { name: string; options?: Record<string, any> }>;
   reactNative?: ReactNativeOptions;
 }