Merge pull request #1783 from gluestack/feat/nativewind-components

Feat/nativewind components

.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>
+      );
+    },
+  },
+});

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

@@ -0,0 +1,99 @@
+/* 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: './components',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      '^\\.[\\\\/](?:components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
+  },
+];
+
+import '@storybook/addon-ondevice-notes/register';
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-backgrounds/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 [
+    // require('../src/components/Disclosure/Actionsheet/Actionsheet.stories.tsx'),
+    // require('../src/components/Disclosure/Accordion/Accordion.stories.tsx'),
+    // require('../src/components/Typography/Text/Text.stories.tsx'),
+    // require('../src/components/Overlay/AlertDialog/AlertDialog.stories.tsx'),
+    // require('../src/components/MediaAndIcons/Avatar/Avatar.stories.tsx'),
+    // require('../src/components/Feedback/Alert/Alert.stories.tsx'),
+    // require('../src/components/Forms/Button/Button.stories.tsx'),
+    // require('../src/components/DataDisplay/Badge/Badge.stories.tsx'),
+    require('../src/components/primitives/Button/Button.stories.tsx'),
+    // require('../src/components/Forms/Checkbox/Checkbox.stories.tsx'),
+    // require('../src/components/DataDisplay/Divider/Divider.stories.tsx'),
+    // require('../src/components/Others/Fab/Fab.stories.tsx'),
+    // require('../src/components/Forms/FormControl/FormControl.stories.tsx'),
+    // require('../src/components/Typography/Heading/Heading.stories.tsx'),
+    // require('../src/components/Layout/HStack/HStack.stories.tsx'),
+    // require('../src/components/MediaAndIcons/Icon/Icon.stories.tsx'),
+    // require('../src/components/Forms/Input/Input.stories.tsx'),
+    // require('../src/components/Forms/Link/Link.stories.tsx'),
+    // require('../src/components/Overlay/Menu/Menu.stories.tsx'),
+    // require('../src/components/Overlay/Modal/Modal.stories.tsx'),
+    // require('../src/components/Overlay/Popover/Popover.stories.tsx'),
+    // require('../src/components/Forms/Pressable/Pressable.stories.tsx'),
+    // require('../src/components/Feedback/Progress/Progress.stories.tsx'),
+    // require('../src/components/Forms/Radio/Radio.stories.tsx'),
+    // require('../src/components/Forms/Select/Select.stories.tsx'),
+    // require('../src/components/Forms/Slider/Slider.stories.tsx'),
+    // require('../src/components/Feedback/Spinner/Spinner.stories.tsx'),
+    // require('../src/components/Forms/Switch/Switch.stories.tsx'),
+    // require('../src/components/Forms/Textarea/Textarea.stories.tsx'),
+    // require('../src/components/Feedback/Toast/Toast.stories.tsx'),
+    // require('../src/components/Overlay/Tooltip/Tooltip.stories.tsx'),
+    // require('../src/components/Layout/VStack/VStack.stories.tsx'),
+    // require('../src/components/Layout/LinearGradient/LinearGradient.stories.tsx'),
+    // require('../src/components/Forms/Tabs/Tabs.stories.tsx'),
+    // require('../src/components/MediaAndIcons/Image/Image.stories.tsx'),
+    // require('../src/react-native-components/FlatList/FlatList.stories.tsx'),
+    // require('../src/react-native-components/SectionList/SectionList.stories.tsx'),
+    // require('../src/react-native-components/ScrollView/ScrollView.stories.tsx'),
+    // require('../src/react-native-components/View/View.stories.tsx'),
+    // require('../src/react-native-components/KeyboardAvoidingView/KeyboardAvoidingView.stories.tsx'),
+    // require('../src/react-native-components/StatusBar/StatusBar.stories.tsx'),
+    // require('../src/hooks/use-token/use-token.stories.tsx'),
+    // require('../src/hooks/use-breakpoint-value/use-breakpoint-value.stories.tsx'),
+    // require('../src/hooks/use-color-mode/use-color-mode.stories.tsx'),
+  ];
+};
+
+configure(getStories, module, false);

example/storybook-nativewind/.storybook/gstheme.js

@@ -0,0 +1,35 @@
+// .storybook/YourTheme.js
+
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: 'hotpink',
+  colorSecondary: 'deepskyblue',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: 'grey',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: 'silver',
+  barSelectedColor: 'black',
+  barBg: 'hotpink',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+});

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

@@ -0,0 +1,47 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    'storybook-dark-mode',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-react-native-web',
+    '@storybook/addon-docs',
+    '@geometricpanda/storybook-addon-iframe',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        cssLoaderOptions: {
+          importLoaders: 1,
+        },
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  staticDirs: ['../public'],
+  framework: '@storybook/react',
+  typescript: {
+    reactDocgen: 'none',
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.module.rules.push({
+      test: /\.(js|ts|tsx)$/,
+      use: 'babel-loader',
+    });
+
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+      loader: 'babel-loader',
+      options: {
+        presets: ['@babel/preset-env'],
+      },
+    });
+
+    return config;
+  },
+};

example/storybook-nativewind/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import gstheme from './gstheme';
+
+addons.setConfig({
+  theme: gstheme,
+});