fix: common stories

example/storybook-nativewind/src/components/Select/SelectScrollView.tsx

@@ -53,7 +53,7 @@ const SelectWithScrollView = ({ isDisabled, isInvalid, ...props }: any) => {
   );
 };
 
-SelectWithScrollView.displayName =
+SelectWithScrollView.description =
   'SelectWithScrollView is an example of how to use Select with list that uses ScrollView on native';
 
 export default SelectWithScrollView;

example/storybook-nativewind/src/components/Select/SelectSectionList.tsx

@@ -72,7 +72,7 @@ const SelectWithSectionList = ({ isDisabled, isInvalid, ...props }: any) => {
   );
 };
 
-SelectWithSectionList.displayName =
+SelectWithSectionList.description =
   'SelectWithSectionList is an example of how to use Select with list that uses SectionList on native';
 
 export default SelectWithSectionList;

example/storybook-nativewind/src/components/Select/SelectVirtualizedList.tsx

@@ -70,7 +70,7 @@ const SelectWithVirtualizedList = ({
   );
 };
 
-SelectWithVirtualizedList.displayName =
+SelectWithVirtualizedList.description =
   'SelectWithVirtualizedList is an example of how to use Select with list that uses VirtualizedList on native';
 
 export default SelectWithVirtualizedList;

example/storybook-v7/.ondevice/main.ts

@@ -1,7 +1,9 @@
 import { StorybookConfig } from '@storybook/react-native';
 
 const main: StorybookConfig = {
-  stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
+  stories: [
+    '../../storybook-nativewind/src/components/**/*.stories.?(ts|tsx|js|jsx)',
+  ],
   addons: [
     '@storybook/addon-ondevice-notes',
     '@storybook/addon-ondevice-controls',

example/storybook-v7/.ondevice/preview.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 // import { addParameters } from '@storybook/client-api';
-import { GluestackUIProvider } from '../src/core-components/nativewind';
+import { GluestackUIProvider } from '../../storybook-nativewind/src/core-components/nativewind';
 
 import { View } from 'react-native';
 import { useState } from 'react';
 import type { Preview } from '@storybook/react';
-import { useDarkMode } from '../src/components/hooks/useDarkMode';
+import { useDarkMode } from '../../storybook-nativewind/src/components/hooks/useDarkMode';
 import { Platform } from 'react-native';
 
 const preview: Preview = {

example/storybook-v7/.ondevice/storybook.requires.js

@@ -14,13 +14,13 @@ import "@storybook/addon-ondevice-actions/register";
 const normalizedStories = [
   {
     titlePrefix: "",
-    directory: "./src/components",
+    directory: "../storybook-nativewind/src/components",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
     importPathMatcher:
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
 
     req: require.context(
-      "../src/components",
+      "../../storybook-nativewind/src/components",
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),

example/storybook-v7/App.tsx

@@ -1,17 +1,14 @@
 import { StyleSheet, Text, View } from 'react-native';
 import Constants from 'expo-constants';
-import { GluestackUIProvider } from './src/core-components/nativewind/gluestack-ui-provider';
 
 import './global.css';
 function App() {
   return (
-    <GluestackUIProvider>
-      <View style={styles.container}>
-        <View className="bg-primary-500">
-          <Text>Open up App.tsx to start working on your app! 22</Text>
-        </View>
+    <View style={styles.container}>
+      <View className="bg-primary-500">
+        <Text>Open up App.tsx to start working on your app! 22</Text>
       </View>
-    </GluestackUIProvider>
+    </View>
   );
 }
 

example/storybook-v7/babel.config.js

@@ -15,13 +15,25 @@ module.exports = function (api) {
           alias: {
             '@/components/ui':
               process.env.STYLE_ENGINE === 'gluestack'
-                ? path.resolve(__dirname, './src/core-components/themed')
-                : path.resolve(__dirname, './src/core-components/nativewind'),
+                ? path.resolve(
+                    __dirname,
+                    './../storybook-nativewind/src/core-components/themed'
+                  )
+                : path.resolve(
+                    __dirname,
+                    './../storybook-nativewind/src/core-components/nativewind'
+                  ),
 
             'global.css':
               process.env.STYLE_ENGINE === 'gluestack'
-                ? path.resolve(__dirname, './global-gluestack.css')
-                : path.resolve(__dirname, './global.css'),
+                ? path.resolve(
+                    __dirname,
+                    './../storybook-nativewind/global-gluestack.css'
+                  )
+                : path.resolve(
+                    __dirname,
+                    './../storybook-nativewind/global.css'
+                  ),
 
             '@gluestack-ui/checkbox': path.resolve(
               __dirname,
@@ -110,7 +122,7 @@ module.exports = function (api) {
             ),
             '@/extra-components/nativewind': path.resolve(
               __dirname,
-              './src/core-components/nativewind'
+              './../storybook-nativewind/src/core-components/nativewind'
             ),
             'tailwind.config': path.join(__dirname, './tailwind.config.js'),
           },

example/storybook-v7/metro.config.js

@@ -18,13 +18,15 @@ defaultConfig.watchFolders = [
   path.join(workspaceRoot, 'packages', 'unstyled'),
   path.join(workspaceRoot, 'packages', 'nativewind'),
   path.join(workspaceRoot, 'packages', 'styled'),
+  path.join(projectRoot, '..', 'storybook-nativewind'),
 ];
 // defaultConfig.resolver.disableHierarchicalLookup = true;
 defaultConfig.resolver.nodeModulesPaths = [
   path.resolve(projectRoot, 'node_modules'),
   // path.resolve(workspaceRoot, 'node_modules'),
 ];
 
+defaultConfig.projectRoot = path.resolve(__dirname, '../storybook-nativewind'); // path to the external module
 // defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
 //   const defaultResolveResult = context.resolveRequest(
 //     context,