Merge pull request #1579 from gluestack/release/@gluestack-style/reac…

…[email protected] Release/@gluestack style/[email protected]
gluestack · Jan 4, 2024 · 912f350 · 912f350
2 parents 7fb21b5 + 5296e22
commit 912f350
Show file tree

Hide file tree

Showing 17 changed files with 447 additions and 75,518 deletions.
diff --git a/example/babel-plugin-styled-resolver-expo/gluestack-style.config.ts b/example/babel-plugin-styled-resolver-expo/gluestack-style.config.ts
diff --git a/example/babel-plugin-styled-resolver-expo/tsconfig.json b/example/babel-plugin-styled-resolver-expo/tsconfig.json
@@ -14,7 +14,7 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": true,
     "esModuleInterop": true,
-    "importsNotUsedAsValues": "error",
+    "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["esnext", "dom"],

diff --git a/example/storybook/.ondevice/preview.js b/example/storybook/.ondevice/preview.js
@@ -1,14 +1,9 @@
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
-<<<<<<< HEAD
 import { addParameters } from '@storybook/client-api';
 import { GluestackUIProvider, Box, VStack } from '@gluestack-ui/themed';
 import { config } from '@gluestack-ui/config';
 
 import { useState } from 'react';
-=======
-
-export const decorators = [withBackgrounds];
->>>>>>> source-gluestack-style
 
 export const parameters = {
   backgrounds: {
@@ -26,9 +21,8 @@ export const parameters = {
     },
   },
 };
-<<<<<<< HEAD
 
-import { useDarkMode } from '../src/hooks/useDarkMode';
+import { useDarkMode } from '../src/ui/hooks/useDarkMode';
 import { Platform } from 'react-native';
 
 export const decorators = [
@@ -89,5 +83,3 @@ addParameters({
     },
   },
 });
-=======
->>>>>>> source-gluestack-style
diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js
@@ -11,7 +11,7 @@ import { config } from '../src/components/nb.config';
 global.STORIES = [
   {
     titlePrefix: '',
-    directory: './components',
+    directory: '../src/',
     files: '**/*.stories.?(ts|tsx|js|jsx)',
     importPathMatcher:
       '^\\.[\\\\/](?:components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
@@ -49,50 +49,53 @@ try {
 
 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/Forms/Button/ButtonGroup.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'),
+    // 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/ui/components/Forms/Button/Button.stories.tsx'),
+    // require('../src/components/DataDisplay/Badge/Badge.stories.tsx'),
+    // require('../src/components/Forms/Button/ButtonGroup.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'),
+
+    // React Native Aria
+    require('../src/react-native-aria/Overlays/Overlays.stories.tsx'),
   ];
   // return {
   //   // "./src/api/AsForwarder/AsForwarder.stories.tsx": require("../src/api/AsForwarder/AsForwarder.stories.tsx"),

diff --git a/example/storybook/babel.config.js b/example/storybook/babel.config.js
@@ -1,5 +1,4 @@
 const path = require('path');
-console.log('herher');
 module.exports = function (api) {
   api.cache(true);
   return {

diff --git a/example/storybook/jest.config.js b/example/storybook/jest.config.js
@@ -45,10 +45,7 @@ module.exports = {
       '../../packages/textarea/src'
     ),
     '@gluestack-ui/input': path.join(__dirname, '../../packages/input/src'),
-<<<<<<< HEAD
     '@gluestack-ui/image': path.join(__dirname, '../../packages/image/src'),
-=======
->>>>>>> source-gluestack-style
     '@gluestack-ui/switch': path.join(__dirname, '../../packages/switch/src'),
     '@gluestack-ui/avatar': path.join(__dirname, '../../packages/avatar/src'),
     '@gluestack-ui/radio': path.join(__dirname, '../../packages/radio/src'),

diff --git a/example/storybook/metro.config.js b/example/storybook/metro.config.js
@@ -1,24 +1,6 @@
-<<<<<<< HEAD
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 
-var config = getDefaultConfig(__dirname);
-
-config.server = {
-  rewriteRequestUrl: (url) => {
-    if (!url.endsWith('.bundle')) {
-      return url;
-    }
-    // https://github.com/facebook/react-native/issues/36794
-    // JavaScriptCore strips query strings, so try to re-add them with a best guess.
-    return (
-      url +
-      '?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true'
-    );
-  },
-};
-=======
-const { getDefaultConfig } = require('expo/metro-config');
 const path = require('path');
 // const findWorkspaceRoot = require('find-yarn-workspace-root');
 
@@ -49,6 +31,5 @@ config.transformer.getTransformOptions = async () => ({
 });
 
 config.watchFolders = [...config.watchFolders];
->>>>>>> source-gluestack-style
 
 module.exports = config;
diff --git a/example/storybook/src/react-native-aria/Overlays/Overlays.stories.tsx b/example/storybook/src/react-native-aria/Overlays/Overlays.stories.tsx
@@ -1,27 +1,9 @@
-import React from 'react';
-
-import { OverlayContainerExample } from './index';
-import { Wrapper } from '../Wrapper';
 import type { ComponentMeta } from '@storybook/react-native';
-import DocsContainer from '@storybook/addon-docs';
-
-const MenuExample = () => {
-  return (
-    <Wrapper>
-      <OverlayContainerExample />
-    </Wrapper>
-  );
-};
+import { MenuExample } from './index';
 
-const OverlaysMeta: ComponentMeta<any> = {
-  title: 'react-native-aria/overlays',
+const OverlayMeta: ComponentMeta<typeof MenuExample> = {
+  title: 'stories/react-native-aria/Overlays',
   component: MenuExample,
-  parameters: {
-    docs: {
-      container: DocsContainer,
-      page: () => <></>,
-    },
-  },
 };
 
-export default OverlaysMeta;
+export default OverlayMeta;
diff --git a/example/storybook/src/react-native-aria/Overlays/index.tsx b/example/storybook/src/react-native-aria/Overlays/index.tsx
@@ -1,33 +1,33 @@
-import React from "react";
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
 import {
   Pressable,
   View,
   Text,
   StyleSheet,
   TouchableWithoutFeedback,
-  Button,
-} from "react-native";
+} from 'react-native';
 import {
   OverlayContainer,
   useOverlayPosition,
-} from "@react-native-aria/overlays";
-
+} from '@react-native-aria/overlays';
+import { Wrapper } from '../Wrapper';
 function CloseButton(props: any) {
   return (
     <TouchableWithoutFeedback
       onPress={props.onClose}
       accessible={false}
-      importantForAccessibility={"no-hide-descendants"}
+      importantForAccessibility={'no-hide-descendants'}
     >
-      <View style={StyleSheet.absoluteFill}></View>
+      <View style={StyleSheet.absoluteFill} />
     </TouchableWithoutFeedback>
   );
 }
 
-const OverlayContent = ({ targetRef }) => {
-  let overlayRef = React.useRef(null);
+const OverlayContent = ({ targetRef }: any) => {
+  const overlayRef = React.useRef(null);
   const { overlayProps } = useOverlayPosition({
-    placement: "bottom",
+    placement: 'bottom',
     targetRef,
     overlayRef,
   });
@@ -36,7 +36,7 @@ const OverlayContent = ({ targetRef }) => {
     <View
       ref={overlayRef}
       style={{
-        position: "absolute",
+        position: 'absolute',
         ...overlayProps.style,
       }}
     >
@@ -45,29 +45,36 @@ const OverlayContent = ({ targetRef }) => {
   );
 };
 
+export const MenuExample = () => {
+  return (
+    <Wrapper>
+      <OverlayContainerExample />
+    </Wrapper>
+  );
+};
 export function OverlayContainerExample(props: any) {
   const [visible, setVisible] = React.useState(false);
 
-  let ref = React.useRef(null);
+  const ref = React.useRef(null);
 
   return (
-    <View style={{ marginLeft: "auto", marginRight: "auto" }}>
+    <View style={{ marginLeft: 'auto', marginRight: 'auto' }}>
       <Pressable
         ref={ref}
         role="button"
         onPress={() => setVisible(!visible)}
         style={{
-          backgroundColor: "#F3F4F6",
+          backgroundColor: '#F3F4F6',
           maxWidth: 100,
           padding: 10,
-          justifyContent: "center",
-          alignItems: "center",
+          justifyContent: 'center',
+          alignItems: 'center',
         }}
       >
         <Text>Press me</Text>
       </Pressable>
       {visible && (
-        <OverlayContainer>
+        <OverlayContainer {...props}>
           <CloseButton onClose={() => setVisible(!visible)} />
           <OverlayContent targetRef={ref} />
         </OverlayContainer>

diff --git a/example/storybook/src/react-native-aria/Wrapper.tsx b/example/storybook/src/react-native-aria/Wrapper.tsx
@@ -1,9 +1,9 @@
-import React from "react";
-import { SafeAreaView } from "react-native";
-import { OverlayProvider } from "@react-native-aria/overlays";
-import { SSRProvider } from "@react-native-aria/utils";
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import { OverlayProvider } from '@react-native-aria/overlays';
+import { SSRProvider } from '@react-native-aria/utils';
 
-export function Wrapper({ children }) {
+export function Wrapper({ children }: any) {
   return (
     <OverlayProvider>
       <SSRProvider>

diff --git a/example/storybook/src/ui/overview/Introduction/index.stories.mdx b/example/storybook/src/ui/overview/Introduction/index.stories.mdx
@@ -26,23 +26,23 @@ We also broke down the library into two separate libraries for different respons
 
 - **Consistency**: gluestack-ui provides a consistent design language across different platforms, making it easier to build interfaces that look and feel the same on all the devices.
 
-- **Accessibility**: gluestack-ui aims to provide a set of accessible components that work across different platforms and devices. The components have [accessibility](ui/docs/core-concepts/accessibility) features such as ARIA attributes, keyboard navigation, and focus management.
+- **Accessibility**: gluestack-ui aims to provide a set of accessible components that work across different platforms and devices. The components have [accessibility](/ui/docs/core-concepts/accessibility) features such as ARIA attributes, keyboard navigation, and focus management.
 
-- **Ease of use**: The gluestack-ui components are designed to be easily [customizable](ui/docs/theme-configuration/customizing-theme). They have clear and concise APIs that make integration into existing projects simple.
+- **Ease of use**: The gluestack-ui components are designed to be easily [customizable](/ui/docs/theme-configuration/customizing-theme). They have clear and concise APIs that make integration into existing projects simple.
 
-- **Optional styling**: gluestack-ui provides an option to use the components with or without styling. The components can be used as-is or styled to fit your needs. You can choose to not pass the config and use the components as [unstyled](ui/docs/core-concepts/unstyled-library).
+- **Optional styling**: gluestack-ui provides an option to use the components with or without styling. The components can be used as-is or styled to fit your needs. You can choose to not pass the config and use the components as [unstyled](/ui/docs/core-concepts/unstyled-library).
 
-- **Theming tokens**: gluestack-ui takes a [config file](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) in the `GluestackUIProvider`, which contains theme tokens, aliases, component themes, etc, to help with the project requirements. You can install and import the [config](https://www.npmjs.com/package/@gluestack-ui/config) as a module. See more about [theming](ui/docs/core-concepts/themed-library).
+- **Theming tokens**: gluestack-ui takes a [config file](https://github.com/gluestack/gluestack-ui/blob/main/packages/config/src/gluestack-ui.config.ts) in the `GluestackUIProvider`, which contains theme tokens, aliases, component themes, etc, to help with the project requirements. You can install and import the [config](https://www.npmjs.com/package/@gluestack-ui/config) as a module. See more about [theming](/ui/docs/core-concepts/themed-library).
 
 - **Animation**: gluestack-ui provides a plugin to add support for Animation using Animation libraries like [@legendapp/motion](https://legendapp.com/open-source/motion/) and [moti](https://moti.fyi/). [Check here](https://gluestack.io/style/docs).
 
 ## Products
 
-- VS Code Extension: Our [VS Code extension](ui/docs/getting-started/vscode-extensions) is specifically designed to quicken your development process using `gluestack-ui`. These extensions provide gluestack snippets, which are shorthand for commonly used `gluestack-ui` components and recipes.
+- VS Code Extension: Our [VS Code extension](/ui/docs/getting-started/vscode-extensions) is specifically designed to quicken your development process using `gluestack-ui`. These extensions provide gluestack snippets, which are shorthand for commonly used `gluestack-ui` components and recipes.
 
-- Figma UI Kit: [Figma UI Kit](ui/docs/getting-started/figma-ui-kit) is a set of components that can be used to create mockups for your application. It includes all the components from `gluestack-ui` and is designed to be used with Figma. It has all the tokens, components with all the variants, and both light and dark mode.
+- Figma UI Kit: [Figma UI Kit](/ui/docs/getting-started/figma-ui-kit) is a set of components that can be used to create mockups for your application. It includes all the components from `gluestack-ui` and is designed to be used with Figma. It has all the tokens, components with all the variants, and both light and dark mode.
 
-- Head Starter Kit: [Free screens](ui/docs/getting-started/installation) made with `gluestack-ui` that let you get a taste of the library before you start using it.
+- Head Starter Kit: [Free screens](/ui/docs/getting-started/installation) made with `gluestack-ui` that let you get a taste of the library before you start using it.
 
 ## But aren't React Native and React Native Web sufficient?