Merge pull request #1822 from gluestack/patch

Patch

Author: Viraj-10

.vscode/settings.json

@@ -17,6 +17,10 @@
   "prettier.ignorePath": ".prettierignore",
   // If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line
   "editor.wordWrap": "on",
-  "cSpell.words": ["gluestack", "themeable"],
-  "cSpell.enableFiletypes": ["mdx"]
+  "cSpell.words": ["Actionsheet", "gluestack", "nativewind", "themeable"],
+  "cSpell.enableFiletypes": ["mdx"],
+  "tailwindCSS.experimental.classRegex": [
+    ["tva\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
+  "cmake.sourceDirectory": "/Users/vidhikataria/Documents/Projects/gluestack-ui/gluestack-ui/node_modules/expo/node_modules/expo-modules-core/android"
 }

example/expo-router-example/app/_layout.tsx

@@ -44,7 +44,6 @@ export default function RootLayout() {
   if (!loaded) {
     return null;
   }
-
   return <RootLayoutNav />;
 }
 

example/storybook-nativewind/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

example/storybook-nativewind/.gitignore

@@ -0,0 +1,19 @@
+node_modules/
+.env
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+lib
+
+# macOS
+.DS_Store
+
+#build
+storybook-static/

example/storybook-nativewind/.npmignore

@@ -0,0 +1,19 @@
+# Dotfiles
+.babelrc
+.eslintignore
+.eslintrc.json
+.gitattributes
+_config.yml
+.editorconfig
+
+# Documents
+CONTRIBUTING.md
+ISSUE_TEMPLATE.txt
+img
+
+# Test cases
+__tests__
+dist/__tests__
+
+# Example
+storybook-static/

example/storybook-nativewind/.nvmrc

@@ -0,0 +1 @@
+v16.13.0

example/storybook-nativewind/.ondevice/Storybook.tsx

@@ -0,0 +1,6 @@
+import { getStorybookUI } from '@storybook/react-native';
+import './doctools';
+import './storybook.requires';
+
+const StorybookUIRoot = getStorybookUI({});
+export default StorybookUIRoot;

example/storybook-nativewind/.ondevice/doctools.js

@@ -0,0 +1,10 @@
+import { extractArgTypes } from '@storybook/react/dist/modern/client/docs/extractArgTypes';
+import { addArgTypesEnhancer, addParameters } from '@storybook/react-native';
+import { enhanceArgTypes } from '@storybook/docs-tools';
+
+addArgTypesEnhancer(enhanceArgTypes);
+addParameters({
+  docs: {
+    extractArgTypes,
+  },
+});

example/storybook-nativewind/.ondevice/main.js

@@ -0,0 +1,9 @@
+module.exports = {
+  stories: ['../components/primitives/Button/*.stories.?(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};

example/storybook-nativewind/.ondevice/preview.js

@@ -0,0 +1,85 @@
+import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
+import { addParameters } from '@storybook/client-api';
+import { GluestackUIProvider, Box, VStack } from '@custom-ui/themed';
+import { config } from '@custom-ui/config';
+
+import { useState } from 'react';
+
+export const parameters = {
+  backgrounds: {
+    default: 'plain',
+    values: [
+      { name: 'plain', value: 'white' },
+      { name: 'warm', value: 'hotpink' },
+      { name: 'cool', value: 'deepskyblue' },
+    ],
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+import { useDarkMode } from '../src/hooks/useDarkMode';
+import { Platform } from 'react-native';
+
+export const decorators = [
+  withBackgrounds,
+  (Story) => {
+    let value = false;
+
+    if (Platform.OS === 'web') {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      value = useDarkMode();
+    }
+    const [isDark] = useState(false);
+
+    function getColorMode() {
+      //@ts-ignore
+      if (Platform.OS === 'web') {
+        return value ? 'dark' : 'light';
+      } else {
+        return isDark ? 'dark' : 'light';
+      }
+    }
+    return (
+      <GluestackUIProvider config={config}>
+        <Box flex={1} p="$10">
+          <Story />
+        </Box>
+      </GluestackUIProvider>
+    );
+  },
+];
+
+addParameters({
+  docs: {
+    container: ({ children, context }) => {
+      let value = false;
+
+      if (Platform.OS === 'web') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        value = useDarkMode();
+      }
+      const [isDark] = useState(false);
+
+      function getColorMode() {
+        //@ts-ignore
+        if (Platform.OS === 'web') {
+          return value ? 'dark' : 'light';
+        } else {
+          return isDark ? 'dark' : 'light';
+        }
+      }
+      return (
+        <DocsContainer context={context}>
+          <GluestackUIProvider config={config} colorMode={getColorMode()}>
+            {children}
+          </GluestackUIProvider>
+        </DocsContainer>
+      );
+    },
+  },
+});