Added vscode settings and changes for imports

gfviegas · Dec 29, 2020 · 476ecd4 · 476ecd4
1 parent c760fa4
commit 476ecd4
Show file tree

Hide file tree

Showing 21 changed files with 172 additions and 267 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,10 +5,6 @@
 # XDE
 .expo/
 
-# VSCode
-.vscode/
-jsconfig.json
-
 # Xcode
 #
 build/

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,23 @@
+{
+  "javascript.validate.enable": true,
+  "eslint.enable": false,
+  "tslint.enable": true,
+  "tslint.autoFixOnSave": true,
+  "flow.enabled": false,
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.formatOnSave": true,
+  "flow.useNPMPackagedFlow": true,
+  "editor.formatOnPaste": false,
+
+  // A list of languages IDs to disable this extension on
+  "prettier.disableLanguages": ["vue"],
+
+  // Path to a .prettierignore or similar file
+  "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",
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  }
+}
diff --git a/example/storybook/stories/index.ts b/example/storybook/stories/index.ts
@@ -7,61 +7,61 @@ export * from './components/composites/AppBar';
 export * from './components/composites/AspectRatio';
 export * from './components/composites/Avatar';
 export * from './components/composites/Badge';
-export * from './components/primitives/Box';
 export * from './components/composites/BreadCrumb';
-export * from './components/primitives/Button';
 export * from './components/composites/Center';
-export * from './components/primitives/Checkbox';
 export * from './components/composites/CircularProgress';
 export * from './components/composites/CloseButton';
 export * from './components/composites/Code';
 export * from './components/composites/Collapse';
-export * from './components/primitives/Column';
 export * from './components/composites/Container';
-export * from './theme/Custom';
 export * from './components/composites/Divider';
-export * from './components/primitives/Flex';
 export * from './components/composites/FormControl';
-export * from './components/primitives/Heading';
-export * from './components/primitives/HStack';
-export * from './components/primitives/Icon';
 export * from './components/composites/IconButton';
-export * from './components/primitives/Image';
-export * from './components/primitives/Input';
 export * from './components/composites/Kbd';
-export * from './components/primitives/Link';
-export * from './components/primitives/List';
 export * from './components/composites/Menu';
 export * from './components/composites/Modal';
-export * from './theme/Mode';
 export * from './components/composites/NumberInput';
-export * from './components/primitives/Overlay';
 export * from './components/composites/PinInput';
 export * from './components/composites/Popover';
 export * from './components/composites/Progress';
-export * from './components/primitives/Radio';
-export * from './theme/Responsive';
-export * from './components/primitives/Row';
+export * from './components/composites/SimpleGrid';
 export * from './components/composites/Skeleton';
-export * from './components/primitives/Slider';
 export * from './components/composites/Snackbar';
-export * from './components/primitives/Spinner';
-export * from './components/primitives/Stack';
 export * from './components/composites/Stat';
-export * from './components/primitives/Switch';
 export * from './components/composites/Tabs';
 export * from './components/composites/Tag';
-export * from './components/primitives/Text';
-export * from './components/primitives/TextArea';
 export * from './components/composites/Toast';
 export * from './components/composites/Transitions';
 export * from './components/composites/Typeahead';
+export * from './components/composites/Wrap';
+export * from './components/primitives/Box';
+export * from './components/primitives/Button';
+export * from './components/primitives/Checkbox';
+export * from './components/primitives/Column';
+export * from './components/primitives/Flex';
+export * from './components/primitives/Heading';
+export * from './components/primitives/HStack';
+export * from './components/primitives/Icon';
+export * from './components/primitives/Image';
+export * from './components/primitives/Input';
+export * from './components/primitives/Link';
+export * from './components/primitives/List';
+export * from './components/primitives/Overlay';
+export * from './components/primitives/Radio';
+export * from './components/primitives/Row';
+export * from './components/primitives/Slider';
+export * from './components/primitives/Spinner';
+export * from './components/primitives/Stack';
+export * from './components/primitives/Switch';
+export * from './components/primitives/Text';
+export * from './components/primitives/TextArea';
+export * from './components/primitives/VStack';
+export * from './components/primitives/ZStack';
 export * from './hooks/useBreakpointValue';
 export * from './hooks/useClipboard';
 export * from './hooks/useDisclose';
 export * from './hooks/useMediaQuery';
 export * from './hooks/usePopover';
-export * from './components/primitives/VStack';
-export * from './components/composites/Wrap';
-export * from './components/primitives/ZStack';
-export * from './components/composites/SimpleGrid';
+export * from './theme/Custom';
+export * from './theme/Mode';
+export * from './theme/Responsive';
diff --git a/src/components/composites/Popover/Tooltip.tsx b/src/components/composites/Popover/Tooltip.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { TouchableOpacity, Modal, I18nManager } from 'react-native';
-import Triangle from './Triangle';
-import { ScreenWidth, ScreenHeight, isIOS } from './helpers';
-import getTooltipCoordinate from './getTooltipCoordinate';
+import { I18nManager, Modal, TouchableOpacity } from 'react-native';
 import { View } from '../../primitives';
+import getTooltipCoordinate from './getTooltipCoordinate';
+import { isIOS, ScreenHeight, ScreenWidth } from './helpers';
+import Triangle from './Triangle';
+
 type State = {
   isVisible: boolean;
   yOffset: number;
@@ -69,36 +70,26 @@ class Tooltip extends React.Component<Props, State> {
       if (prevState.isVisible && !isIOS) {
         onClose && onClose();
       }
-
       return { isVisible: !prevState.isVisible };
     });
   };
 
   wrapWithAction = (actionType: any, children: {} | null | undefined) => {
-    switch (actionType) {
-      case 'press':
-        return (
-          <TouchableOpacity
-            onPress={this.toggleTooltip}
-            activeOpacity={1}
-            {...this.props.toggleWrapperProps}
-          >
-            {children}
-          </TouchableOpacity>
-        );
-      case 'longPress':
-        return (
-          <TouchableOpacity
-            onLongPress={this.toggleTooltip}
-            activeOpacity={1}
-            {...this.props.toggleWrapperProps}
-          >
-            {children}
-          </TouchableOpacity>
-        );
-      default:
-        return children;
+    if (actionType === 'press' || actionType === 'longPress') {
+      return (
+        <TouchableOpacity
+          onPress={actionType === 'press' ? this.toggleTooltip : undefined}
+          onLongPress={
+            actionType === 'longPress' ? this.toggleTooltip : undefined
+          }
+          activeOpacity={1}
+          {...this.props.toggleWrapperProps}
+        >
+          {children}
+        </TouchableOpacity>
+      );
     }
+    return children;
   };
 
   getTooltipStyle = () => {
@@ -244,9 +235,7 @@ class Tooltip extends React.Component<Props, State> {
               }}
               onPress={this.toggleTooltip}
             />
-          ) : (
-            <></>
-          )}
+          ) : null}
 
           {this.props.closeOnPopoverPress ? (
             <TouchableOpacity

diff --git a/src/components/composites/Popover/getTooltipCoordinate.ts b/src/components/composites/Popover/getTooltipCoordinate.ts
@@ -27,7 +27,7 @@ type Coord = {
   The tooltip coordinates are based on the element which it is wrapping.
   We take the x and y coordinates of the element and find the best position
   to place the tooltip. To find the best position we look for the side with the
-  most space. In order to find the side with the most space we divide the the 
+  most space. In order to find the side with the most space we divide the the
   surroundings in four quadrants and check for the one with biggest area.
   Once we know the quandrant with the biggest area it place the tooltip in that
   direction.

diff --git a/src/components/composites/Popover/helpers.ts b/src/components/composites/Popover/helpers.ts
@@ -1,4 +1,4 @@
-import { Platform, Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 
 const Screen = Dimensions.get('window');
 export const ScreenWidth: number = Screen.width;

diff --git a/src/components/composites/Popover/index.tsx b/src/components/composites/Popover/index.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
-import Tooltip from './Tooltip';
 import styled from 'styled-components/native';
-import { border, color, flexbox, layout, space, position } from 'styled-system';
+import { border, color, flexbox, layout, position, space } from 'styled-system';
+import { usePropsConfig } from '../../../hooks';
 import {
-  customBorder,
   customBackground,
-  customOutline,
-  customLayout,
+  customBorder,
   customExtra,
-  customShadow,
+  customLayout,
+  customOutline,
   customPosition,
+  customShadow,
 } from '../../../utils/customProps';
-
-import type { IPopoverProps } from './props';
-import { Box, View, IBoxProps } from '../../primitives';
+import { default as Box, IBoxProps } from '../../primitives/Box';
+import View from '../../primitives/View';
 import CloseButton from '../CloseButton';
-import { usePropsConfig } from '../../../hooks';
+import type { IPopoverProps } from './props';
+import Tooltip from './Tooltip';
 
 const StyledPopover = styled(Tooltip)<IPopoverProps>(
   color,
@@ -48,7 +48,6 @@ const PopoverContext = React.createContext({
   onClose: () => {},
   closeOnBlur: true,
   newProps: {
-    popoverCloseButtonStyle: {},
     popoverCloseButtonProps: {},
     popoverFooterProps: {},
     popoverBodyProps: {},
@@ -71,7 +70,7 @@ const Popover = ({
   borderColor,
   ...props
 }: IPopoverProps) => {
-  const [trigger, setTrigger] = React.useState(<></>);
+  const [trigger, setTrigger] = React.useState();
   const [isVisible, setIsVisible] = React.useState(false);
   const popOverRef: any = React.useRef(null);
   const newProps = usePropsConfig('Popover', props);
@@ -118,8 +117,10 @@ export const PopoverTrigger = ({ children }: any) => {
 };
 
 export const PopoverHeader = (props: IBoxProps) => {
-  const { newProps } = React.useContext(PopoverContext);
-  return <Box {...newProps.popoverHeaderProps} {...props} />;
+  const {
+    newProps: { popoverHeaderProps },
+  } = React.useContext(PopoverContext);
+  return <Box {...popoverHeaderProps} {...props} />;
 };
 
 export const PopoverContent = ({
@@ -148,14 +149,14 @@ export const PopoverContent = ({
       borderWidth={borderWidth}
       ref={PopoverRef}
       onOpen={() => {
-        onOpen ? onOpen() : '';
+        onOpen && onOpen();
         initialFocusRef?.current.focus();
       }}
       onClose={() => {
-        onClose ? onClose() : '';
+        onClose && onClose();
         finalFocusRef?.current.focus();
       }}
-      closeOnBlur={closeOnBlur === false ? false : true}
+      closeOnBlur={closeOnBlur ?? true}
       popover={
         <Box width="100%">
           <Box>{children}</Box>
@@ -169,12 +170,14 @@ export const PopoverContent = ({
 };
 
 export const PopoverBody = (props: any) => {
-  const { newProps, borderColor, borderWidth } = React.useContext(
-    PopoverContext
-  );
+  const {
+    newProps: { popoverBodyProps },
+    borderColor,
+    borderWidth,
+  } = React.useContext(PopoverContext);
   return (
     <Box
-      {...newProps.popoverBodyProps}
+      {...popoverBodyProps}
       borderTopColor={borderColor}
       borderTopWidth={borderWidth}
       {...props}
@@ -183,12 +186,14 @@ export const PopoverBody = (props: any) => {
 };
 
 export const PopoverFooter = (props: any) => {
-  const { newProps, borderColor, borderWidth } = React.useContext(
-    PopoverContext
-  );
+  const {
+    newProps: { popoverFooterProps },
+    borderColor,
+    borderWidth,
+  } = React.useContext(PopoverContext);
   return (
     <Box
-      {...newProps.popoverFooterProps}
+      {...popoverFooterProps}
       borderTopColor={borderColor}
       borderTopWidth={borderWidth}
       {...props}
@@ -197,16 +202,17 @@ export const PopoverFooter = (props: any) => {
 };
 
 export const PopoverCloseButton = (props: any) => {
-  const { PopoverRef, newProps }: any = React.useContext(PopoverContext);
+  const {
+    PopoverRef,
+    newProps: { popoverCloseButtonProps },
+  }: any = React.useContext(PopoverContext);
 
   return (
-    <View style={newProps.popoverCloseButtonStyle}>
+    <View position="absolute" right={0} top={0} zIndex={1}>
       <CloseButton
-        {...newProps.popoverCloseButtonProps}
+        {...popoverCloseButtonProps}
         {...props}
-        onPress={() => {
-          PopoverRef?.current.toggleTooltip();
-        }}
+        onPress={() => PopoverRef?.current.toggleTooltip()}
       />
     </View>
   );

diff --git a/src/components/composites/Popover/props.ts b/src/components/composites/Popover/props.ts
@@ -1,5 +1,4 @@
 import type { ViewStyle } from 'react-native';
-import type { Props as tooltipProps } from './Tooltip';
 import type {
   BorderProps,
   ColorProps,
@@ -8,13 +7,14 @@ import type {
   SpaceProps,
 } from 'styled-system';
 import type {
-  customBorderProps,
   customBackgroundProps,
-  customOutlineProps,
-  customLayoutProps,
+  customBorderProps,
   customExtraProps,
+  customLayoutProps,
+  customOutlineProps,
   customShadowProps,
 } from '../../../utils/customProps';
+import type { Props as tooltipProps } from './Tooltip';
 type SpaceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type IPopoverProps = ColorProps &
   SpaceProps &
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,10 +5,6 @@ @@
     # XDE
     .expo/
-    # VSCode
-    .vscode/
-    jsconfig.json
     # Xcode
     #
     build/
@@ Expand Down @@