[FEAT] Add & setup StoryBook

.ondevice/index.js

@@ -0,0 +1,8 @@
+import {AppRegistry} from 'react-native';
+import {getStorybookUI} from '@storybook/react-native';
+import {name as appName} from '../app.json';
+import '../.storybook/storybook.requires';
+
+const StorybookUIRoot = getStorybookUI({});
+
+AppRegistry.registerComponent(appName, () => StorybookUIRoot);

.ondevice/metro.storybook.js

@@ -0,0 +1,15 @@
+const path = require('path');
+module.exports = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+  resolver: {
+    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
+  },
+  watchFolders: [path.resolve(__dirname, '..')],
+};

.storybook/StoryDecorator.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {View} from 'react-native';
+
+interface StoryDecoratorProps {
+  Story: React.FC;
+}
+
+export const StoryDecorator: React.FC<StoryDecoratorProps> = ({Story}) => {
+  return (
+    <View style={{flex: 1, margin: 24}}>
+      <Story />
+    </View>
+  );
+};

.storybook/components/molecules/Button.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {StoryDecorator} from '../../StoryDecorator';
+import {Button} from 'react-native';
+
+const Playground: StoryObj<typeof Button> = {};
+const ButtonStory: Meta<typeof Button> = {
+  title: 'Atoms/Button',
+  component: Button,
+  args: {
+    title: 'Click me!',
+    disabled: false,
+    testID: 'button',
+  },
+  argTypes: {
+    onPress: {
+      action: 'onPress',
+    },
+  },
+  decorators: [Story => <StoryDecorator Story={Story} />],
+};
+
+export default ButtonStory;
+export {Playground};

.storybook/index.tsx

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

.storybook/main.ts

@@ -0,0 +1,14 @@
+// .storybook/main.ts
+import {StorybookConfig} from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: ['./components/**/*.stories.?(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};
+
+export default main;

.storybook/preview.tsx

@@ -0,0 +1,28 @@
+// .storybook/preview.tsx
+import React from 'react';
+import type {Preview} from '@storybook/react';
+import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
+import {View} from 'react-native';
+
+const preview: Preview = {
+  decorators: [
+    withBackgrounds,
+    Story => (
+      <View style={{flex: 1, backgroundColor: 'red'}}>
+        <Story />
+      </View>
+    ),
+  ],
+  parameters: {
+    backgrounds: {
+      default: 'plain',
+      values: [
+        {name: 'plain', value: 'white'},
+        {name: 'warm', value: 'hotpink'},
+        {name: 'cool', value: 'deepskyblue'},
+      ],
+    },
+  },
+};
+
+export default preview;

.storybook/storybook.requires.ts

@@ -0,0 +1,50 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import {start, updateView} from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-backgrounds/register';
+import '@storybook/addon-ondevice-actions/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: './.storybook/components',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      './components',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    ),
+  },
+];
+
+declare global {
+  var view: ReturnType<typeof start>;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+  require('./preview'),
+  require('@storybook/react-native/preview'),
+  require('@storybook/addon-ondevice-actions/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;

ios/Podfile.lock

@@ -1289,6 +1289,49 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-slider (4.5.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - react-native-slider/common (= 4.5.6)
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-slider/common (4.5.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - react-native-webview (13.13.1):
     - DoubleConversion
     - glog
@@ -1641,6 +1684,27 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNDateTimePicker (8.3.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNGestureHandler (2.22.0):
     - DoubleConversion
     - glog
@@ -1909,6 +1973,7 @@ DEPENDENCIES:
   - react-native-app-auth (from `../node_modules/react-native-app-auth`)
   - react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1941,6 +2006,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - "RNNotifee (from `../node_modules/@notifee/react-native`)"
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -2036,6 +2102,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-encrypted-storage"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   React-nativeconfig:
@@ -2100,6 +2168,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-bootsplash"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNDateTimePicker:
+    :path: "../node_modules/@react-native-community/datetimepicker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNNotifee:
@@ -2157,6 +2227,7 @@ SPEC CHECKSUMS:
   react-native-app-auth: 79605228ffe689f63ad5b046319f5e154e3e96c2
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
   react-native-safe-area-context: 6b85173d2cee963d5232ac2fd260e8ebd63273dc
+  react-native-slider: e7f302c8d3296ddb49c642473f77f8f98809d53b
   react-native-webview: b375842af66a9f0ab979378bdc8b26eeb5d8e3ee
   React-nativeconfig: cd0fbb40987a9658c24dab5812c14e5522a64929
   React-NativeModulesApple: 45187d13c68d47250a7416b18ff082c7cc07bff7
@@ -2189,6 +2260,7 @@ SPEC CHECKSUMS:
   ReactCommon: 6014af4276bb2debc350e2620ef1bd856b4d981c
   RNBootSplash: 3e5a5c0e579351fd79291d21ab57cab03b562a05
   RNCAsyncStorage: 309dabeb856c37a9167db791615cf7738d201103
+  RNDateTimePicker: 5567e082958470867c4a27dd90cdaf2ea54bde0c
   RNGestureHandler: 4e7defe5095e936424173fc75f0bf2af5bba8e23
   RNNotifee: 4a6ee5c7deaf00e005050052d73ee6315dff7ec9
   RNReanimated: ef80cf675203a39bb5e5464234cb08a0f0040ac2

ios/playlistnotify.xcodeproj/project.pbxproj

@@ -392,7 +392,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -462,7 +465,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				"SWIFT_OBJC_BRIDGING_HEADER[arch=*]" = "$(SRCROOT)/playlistnotify/Bridging.h";

metro.config.js

@@ -1,15 +1,27 @@
-// metro.config.js
-const {getDefaultConfig} = require('@react-native/metro-config');
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const path = require('path');
 const {withMonicon} = require('@monicon/metro');
-const config = getDefaultConfig(__dirname);
 
-config.resolver.blockList = [/@monicon\/runtime/].concat(
-  config.resolver.blockList,
-);
+const defaultConfig = getDefaultConfig(__dirname);
+const isDevelopment = process.env.NODE_ENV !== 'production';
 
-module.exports = withMonicon(config, {
+// Asegurar que defaultConfig.resolver existe
+defaultConfig.resolver = defaultConfig.resolver || {};
+
+// Si blockList no es un array, conviértelo en uno
+if (!Array.isArray(defaultConfig.resolver.blockList)) {
+  defaultConfig.resolver.blockList = [];
+}
+
+defaultConfig.resolver.blockList.push(/@monicon\/runtime/);
+
+const customConfig = {
+  resolver: defaultConfig.resolver, // Asegura que blockList se mantiene
+};
+
+const mergedConfig = mergeConfig(defaultConfig, customConfig);
+const moniconConfig = withMonicon(mergedConfig, {
   icons: [
-    // http://icones.js.org
     'feather:activity',
     'logos:active-campaign',
     'lucide:badge-check',
@@ -35,5 +47,21 @@ module.exports = withMonicon(config, {
     'nrk:media-playlist-add',
     'nrk:media-playlist-remove',
   ],
-  collections: ['radix-icons'], // entire collection if you do not want to list icons
+  collections: ['radix-icons'],
 });
+
+// Solo importa Storybook en desarrollo
+let finalConfig = moniconConfig;
+if (isDevelopment) {
+  try {
+    const withStorybook = require('@storybook/react-native/metro/withStorybook');
+    finalConfig = withStorybook(moniconConfig, {
+      enabled: true,
+      configPath: path.resolve(__dirname, './.storybook'),
+    });
+  } catch (error) {
+    console.warn('⚠️ Storybook no está instalado, continuando sin él.');
+  }
+}
+
+module.exports = finalConfig;