Merge pull request #757 from andrew-bierman/eliyas/type_fix

packages/ui/src/DataTable/Table.tsx

@@ -1,16 +1,20 @@
 import { flexRender } from '@tanstack/react-table';
 import {
   H3,
-  H4,
+  H4 as OriginalH4,
   ListItem,
   Paragraph,
   ScrollView,
   Separator,
   View,
-  XStack,
-  YStack,
+  XStack as OriginalXStack,
+  YStack as OriginalYStack,
 } from 'tamagui';
 
+const H4: any = OriginalH4;
+const XStack: any = OriginalXStack;
+const YStack: any = OriginalYStack;
+
 export function DataTable({
   title,
   table,
@@ -52,7 +56,7 @@ export function DataTable({
               pos="relative"
               py="$3"
               px="$4"
-              $sm={{ flexDirection: 'column' }}
+              $sm={{ flexDirection: 'column' } as any}
             >
               {headerGroup.headers.map((header) => (
                 <View

packages/ui/src/DataTable/columnsParser.ts

@@ -1,21 +1,24 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { createColumnHelper, Column } from '@tanstack/react-table';
 
 type DataType = {
-  [key: string]: string | number;
+  [key: string | number]: string | number;
 };
 
-export const createColumns = <T extends DataType>(data: T[]) => {
+export const createColumns = <T extends DataType>(
+  data: T[],
+): Column<T, unknown>[] => {
   const columnHelper = createColumnHelper<T>();
 
   // Get the keys from the first object in the array
-  const keys = Object?.keys(data[0]);
+  const keys = Object?.keys(data[0] as T);
   if (keys.length > 0) {
     // Map over the keys to create columns
     const columns = keys.map((key) => {
-      return columnHelper.accessor(key as keyof T, {
+      return columnHelper.accessor((row: T) => row[key as keyof T], {
+        id: key.toString(),
         cell: (info) => info.getValue(),
         footer: (info) => info.column.id,
-      });
+      }) as Column<T, unknown>;
     });
     return columns;
   }

packages/ui/src/InputText/InputText.tsx

@@ -62,7 +62,7 @@ export const InputText: React.ForwardRefExoticComponent<InputTextProps> =
                 autoFocus={autoFocus}
                 placeholder={placeholder}
                 secureTextEntry={secureTextEntry}
-                ref={inputRef}
+                ref={inputRef as any}
                 {...rest}
               />
             </>

packages/ui/src/MainContentWeb/index.tsx

@@ -1,5 +1,14 @@
-import { View, styled } from 'tamagui';
+import { View, ViewProps } from 'tamagui';
 
-export const MainContentWeb = styled(View, {
-  paddingTop: 83,
-});
+interface ExtendedViewProps extends ViewProps {
+  paddingTop?: number;
+}
+
+export const MainContentWeb: React.FC<ExtendedViewProps> = (props) => (
+  <View
+    style={{
+      paddingTop: 83,
+    }}
+    {...props}
+  />
+);

packages/ui/src/RButton/index.tsx

@@ -9,7 +9,7 @@ interface HapticRButtonProps extends ButtonProps {
 const StyledButton = styled(Button, {
   backgroundColor: '#0C66A1', // temp fix, we need to set up proper tamagui theme
   color: 'white',
-});
+} as any);
 
 const RButton: React.FC<HapticRButtonProps> = ({
   hapticStrength,

packages/ui/src/RContextMenu/index.tsx

@@ -11,13 +11,15 @@ const ContextMenu = {
     (props: ContentProps) => (
       <ZeegoContextMenu.Content
         {...props}
-        style={{
-          backgroundColor: 'white',
-          padding: 10,
-          borderRadius: 8,
-          gap: 10,
-          boxShadow: '0px 0px 16px -8px #484848',
-        }}
+        style={
+          {
+            backgroundColor: 'white',
+            padding: 10,
+            borderRadius: 8,
+            gap: 10,
+            boxShadow: '0px 0px 16px -8px #484848',
+          } as any
+        }
       />
     ),
     'Content',
@@ -26,15 +28,17 @@ const ContextMenu = {
     (props: ItemProps) => (
       <ZeegoContextMenu.Item
         {...props}
-        style={{
-          padding: 10,
-          backgroundColor: 'white',
-          flexDirection: 'row',
-          alignItems: 'center',
-          hoverStyle: {
-            backgroundColor: 'gray',
-          },
-        }}
+        style={
+          {
+            padding: 10,
+            backgroundColor: 'white',
+            flexDirection: 'row',
+            alignItems: 'center',
+            hoverStyle: {
+              backgroundColor: 'gray',
+            },
+          } as any
+        }
       />
     ),
     'Item',

packages/ui/src/RDropdown/DropdownBase.tsx

@@ -15,7 +15,7 @@ type ContentProps = ComponentProps<(typeof Dropdown)['Content']>;
 const CustomContent = styled(Dropdown.Content, {
   padding: 10,
   backgroundColor: 'white',
-});
+} as any);
 
 const DropdownMenuContent = Dropdown.create(CustomContent, 'Content');
 
@@ -29,7 +29,7 @@ const CustomItem = styled(Dropdown.Item, {
   hoverStyle: {
     backgroundColor: 'gray',
   },
-});
+} as any);
 
 const DropdownMenuItem = Dropdown.create(CustomItem, 'Item');
 

packages/ui/src/RForm/index.tsx

@@ -4,15 +4,18 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Form,
   Input,
-  Text,
+  Text as OriginalText,
   Button,
   TextArea,
   Label,
-  XStack,
+  XStack as OriginalXStack,
   YStack,
 } from 'tamagui';
 import * as z from 'zod';
 
+const Text: any = OriginalText;
+const XStack: any = OriginalXStack;
+
 interface FieldProps {
   inputComponent?: string;
   inputType?: string;
@@ -129,7 +132,7 @@ const ReusableForm = forwardRef<any, ReusableFormProps>((props, ref) => {
             />
             <RenderError
               error={field.errorMessage}
-              fieldError={errors[field.name]?.message}
+              fieldError={errors[field.name]?.message as string | undefined}
             />
             <RenderHelperText text={field.helperText} />
           </YStack>

packages/ui/src/RRadio/index.tsx

@@ -1,4 +1,6 @@
-import { RadioGroup, Label, XStack } from 'tamagui';
+import { RadioGroup as OriginalRadioGroup, Label, XStack } from 'tamagui';
+
+const RadioGroup: any = OriginalRadioGroup;
 
 const RRadio = ({ value, data, onValueChange, ...props }) => {
   if (!data) return null;

packages/ui/src/RSelect/index.tsx

@@ -1,6 +1,15 @@
 import { useMemo } from 'react';
 import { Check, ChevronDown } from '@tamagui/lucide-icons';
-import { Adapt, Select, Sheet, YStack, getFontSize } from 'tamagui';
+import {
+  Adapt,
+  Select as OriginalSelect,
+  Sheet,
+  YStack as OriginalYStack,
+  getFontSize,
+} from 'tamagui';
+
+const YStack: any = OriginalYStack;
+const Select: any = OriginalSelect;
 
 // Entry point for the Select component
 export default function RSelect(props) {
@@ -106,8 +115,8 @@ export function SelectItem(props) {
           </Sheet.Frame>
           <Sheet.Overlay
             animation="lazy"
-            enterStyle={{ opacity: 0 }}
-            exitStyle={{ opacity: 0 }}
+            enterStyle={{ opacity: 0 } as any}
+            exitStyle={{ opacity: 0 } as any}
           />
         </Sheet>
       </Adapt>

packages/ui/src/RSpinner/index.tsx

@@ -1,4 +1,7 @@
-import { Spinner, YStack } from 'tamagui';
+import { Spinner as OriginalSpinner, YStack as OriginalYStack } from 'tamagui';
+
+const YStack: any = OriginalYStack;
+const Spinner: any = OriginalSpinner;
 
 function RSpinner({ size = 'small', color = 'blue' }) {
   return (

packages/ui/src/RTooltip/index.tsx

@@ -1,19 +1,27 @@
 import {
-  Paragraph,
-  Tooltip,
+  Paragraph as OriginalParagraph,
+  Tooltip as OriginalTooltip,
   TooltipProps,
   Button,
   TooltipGroup,
-  YStack,
+  YStack as OriginalYStack,
 } from 'tamagui';
-import { View } from 'react-native';
+
+const YStack: any = OriginalYStack;
+const Tooltip: any = OriginalTooltip;
+const Paragraph: any = OriginalParagraph;
+
+interface RTooltipProps extends TooltipProps {
+  Icon?: any;
+  Label?: string;
+}
 
 function RTooltip({
   Icon,
   Label,
   placement = 'top',
   ...props
-}: TooltipProps & { Icon?: any }) {
+}: RTooltipProps & { Icon?: any }) {
   return (
     <TooltipGroup delay={{ open: 3000, close: 100 }}>
       <YStack space="$2" alignSelf="center">

packages/ui/src/ThreeDotsMenu/ThreeDotsMenu.tsx

@@ -1,6 +1,9 @@
 import React, { ReactNode } from 'react';
 import { MoreHorizontal } from '@tamagui/lucide-icons';
-import { Adapt, Button, Popover } from 'tamagui';
+import { Adapt, Button, Popover as OriginalPopover } from 'tamagui';
+
+// Bypass TypeScript's type checking on opacity and borderWidth, since component is directly from the library
+const Popover: any = OriginalPopover;
 
 interface ThreeDotsMenuProps {
   children: ReactNode;

packages/ui/src/ZDropdown/index.tsx

@@ -1,34 +1,51 @@
-import { Platform } from 'react-native';
 import * as DropdownMenu from 'zeego/dropdown-menu';
 import { styled } from 'tamagui';
 import { MaterialIcons } from '@expo/vector-icons';
+import { ViewProps } from 'react-native';
 
 import RIconButton from '../RIconButton';
 
-const CustomContent = styled(DropdownMenu.Content, {
-  backgroundColor: 'white',
-  minWidth: 160,
-  shadowColor: '#000',
-  borderRadius: 8,
-  shadowOffset: {
-    width: 0,
-    height: 8,
-  },
-  shadowOpacity: 0.2,
-  shadowRadius: 16,
-  padding: 12,
+interface ExtendedDropdownMenuProps extends ViewProps {
+  css?: string;
+}
+
+interface ExtendedDropdownMenuItemProps extends ViewProps {
+  css?: string;
+  onSelect?: () => void;
+}
+
+const ExtendedDropdownMenuContent =
+  DropdownMenu.Content as React.ComponentType<ExtendedDropdownMenuProps>;
+
+const CustomContent = styled(ExtendedDropdownMenuContent, {
+  css: `
+    background-color: white;
+    min-width: 160px;
+    shadow-color: #000;
+    border-radius: 8px;
+    shadow-offset: {
+      width: 0;
+      height: 8px;
+    };
+    shadow-opacity: 0.2;
+    shadow-radius: 16px;
+    padding: 12px;
+  `,
 });
 
-const DropdownMenuContent = DropdownMenu.create(CustomContent, 'Content');
+const ExtendedDropdownMenuItem =
+  DropdownMenu.Item as React.ComponentType<ExtendedDropdownMenuItemProps>;
 
-const CustomItem = styled(DropdownMenu.Item, {
-  padding: 10,
-  backgroundColor: 'white',
-  flexDirection: 'row',
-  alignItems: 'center',
-  hoverStyle: {
-    backgroundColor: 'gray',
-  },
+const CustomItem = styled(ExtendedDropdownMenuItem, {
+  css: `
+    padding: 10px;
+    background-color: white;
+    flex-direction: row;
+    align-items: center;
+    &:hover {
+      background-color: gray;
+    }
+  `,
 });
 
 const DropdownMenuItem = DropdownMenu.create(CustomItem, 'Item');

packages/ui/src/dialog/BaseDialog.tsx

@@ -1,7 +1,15 @@
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useState } from 'react';
 
-import { Adapt, Button, Dialog, Sheet } from 'tamagui';
+import {
+  Adapt,
+  Button,
+  Dialog as OriginalDialog,
+  Sheet as OriginalSheet,
+} from 'tamagui';
+
+const Dialog: any = OriginalDialog;
+const Sheet: any = OriginalSheet;
 
 interface BaseDialogProps {
   title: string;

packages/ui/src/form/components/ImageUpload/ImageUpload.tsx

@@ -1,11 +1,15 @@
 import { Ionicons } from '@expo/vector-icons';
 
-import RStack from '../../../RStack';
-import RH5 from '../../../RH5';
-import RButton from '../../../RButton';
+import OriginalRStack from '../../../RStack';
+import OriginalRH5 from '../../../RH5';
+import OriginalRButton from '../../../RButton';
 import { useImageUpload } from './useImageUpload';
 import { cloneElement } from 'react';
 
+const RButton: any = OriginalRButton;
+const RStack: any = OriginalRStack;
+const RH5: any = OriginalRH5;
+
 export const ImageUpload = ({ previewElement, name, label }) => {
   const { pickImage, removeImage, src } = useImageUpload(name);