update `tamagui` (#495)

* update `tamagui`

* a ch

* f

* f

.changeset/poor-wolves-give.md

@@ -0,0 +1,6 @@
+---
+'@status-im/components': minor
+'@status-im/icons': minor
+---
+
+update `tamagui`

apps/mobile/package.json

@@ -34,7 +34,7 @@
   "devDependencies": {
     "@babel/core": "^7.17.9",
     "@expo/metro-config": "^0.3.21",
-    "@tamagui/babel-plugin": "1.36.4",
+    "@tamagui/babel-plugin": "1.74.21",
     "@types/react-native": "~0.70.6",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",

apps/web/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@status-im/components": "*",
     "@status-im/icons": "*",
-    "@tamagui/core": "1.36.4",
+    "@tamagui/core": "1.74.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-web": "^0.18.12",
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@status-im/eslint-config": "*",
-    "@tamagui/vite-plugin": "1.36.4",
+    "@tamagui/vite-plugin": "1.74.21",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.2.0",

packages/components/consts/opacity.ts

@@ -0,0 +1,109 @@
+// note: opacity hex https://stackoverflow.com/a/8254129/6924883
+// note: opacity amount https://tailwindcss.com/docs/opacity
+export const opacity = {
+  100: {
+    hex: 'FF',
+    percentage: '100%',
+    decimal: 1,
+  },
+  95: {
+    hex: 'F2',
+    percentage: '95%',
+    decimal: 0.95,
+  },
+  90: {
+    hex: 'E5',
+    percentage: '90%',
+    decimal: 0.9,
+  },
+  85: {
+    hex: 'D8',
+    percentage: '85%',
+    decimal: 0.85,
+  },
+  80: {
+    hex: 'CC',
+    percentage: '80%',
+    decimal: 0.8,
+  },
+  75: {
+    hex: 'BF',
+    percentage: '75%',
+    decimal: 0.75,
+  },
+  70: {
+    hex: 'B2',
+    percentage: '70%',
+    decimal: 0.7,
+  },
+  65: {
+    hex: 'A5',
+    percentage: '65%',
+    decimal: 0.65,
+  },
+  60: {
+    hex: '99',
+    percentage: '60%',
+    decimal: 0.6,
+  },
+  55: {
+    hex: '8C',
+    percentage: '55%',
+    decimal: 0.55,
+  },
+  50: {
+    hex: '7F',
+    percentage: '50%',
+    decimal: 0.5,
+  },
+  45: {
+    hex: '72',
+    percentage: '45%',
+    decimal: 0.45,
+  },
+  40: {
+    hex: '66',
+    percentage: '40%',
+    decimal: 0.4,
+  },
+  35: {
+    hex: '59',
+    percentage: '35%',
+    decimal: 0.35,
+  },
+  30: {
+    hex: '4C',
+    percentage: '30%',
+    decimal: 0.3,
+  },
+  25: {
+    hex: '3F',
+    percentage: '25%',
+    decimal: 0.25,
+  },
+  20: {
+    hex: '33',
+    percentage: '20%',
+    decimal: 0.2,
+  },
+  15: {
+    hex: '26',
+    percentage: '15%',
+    decimal: 0.15,
+  },
+  10: {
+    hex: '19',
+    percentage: '10%',
+    decimal: 0.1,
+  },
+  5: {
+    hex: '0C',
+    percentage: '5%',
+    decimal: 0.05,
+  },
+  0: {
+    hex: '00',
+    percentage: '0%',
+    decimal: 0,
+  },
+}

packages/components/package.json

@@ -37,22 +37,24 @@
     "@radix-ui/react-tooltip": "^1.0.5",
     "@status-im/colors": "*",
     "@status-im/icons": "*",
-    "@tamagui/animations-css": "1.36.4",
+    "@tamagui/animations-css": "1.74.21",
-    "@tamagui/animations-react-native": "1.36.4",
+    "@tamagui/animations-react-native": "1.74.21",
-    "@tamagui/core": "1.36.4",
+    "@tamagui/core": "1.74.21",
-    "@tamagui/font-inter": "1.36.4",
+    "@tamagui/font-inter": "1.74.21",
-    "@tamagui/react-native-media-driver": "1.36.4",
+    "@tamagui/image": "1.74.21",
-    "@tamagui/shorthands": "1.36.4",
+    "@tamagui/react-native-media-driver": "1.74.21",
-    "@tamagui/theme-base": "1.36.4",
+    "@tamagui/shorthands": "1.74.21",
-    "@tamagui/web": "1.36.4",
+    "@tamagui/themes": "1.74.21",
+    "@tamagui/web": "1.74.21",
     "date-fns": "^2.30.0",
     "expo-blur": "^12.2.2",
     "expo-linear-gradient": "^12.1.2",
     "react-day-picker": "^8.7.1",
-    "tamagui": "1.36.4",
+    "tamagui": "1.74.21",
     "zustand": "^4.3.7"
   },
   "devDependencies": {
+    "@status-im/eslint-config": "*",
     "@storybook/addon-essentials": "7.4.3",
     "@storybook/addon-interactions": "7.4.3",
     "@storybook/addon-links": "7.4.3",
@@ -60,9 +62,8 @@
     "@storybook/react": "7.4.3",
     "@storybook/react-vite": "7.4.3",
     "@storybook/testing-library": "^0.1.0",
-    "@tamagui/vite-plugin": "1.36.4",
+    "@tamagui/vite-plugin": "1.74.21",
     "@vitejs/plugin-react-swc": "^3.2.0",
-    "@status-im/eslint-config": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-svg": "^13.8.0",

packages/components/src/button/button.tsx

@@ -209,7 +209,7 @@ const Base = styled(View, {
         pressStyle: { backgroundColor: '$camel-50' },
       },
       magenta: {
-        backgroundColor: '$magenta',
+        backgroundColor: '$magenta-50',
         hoverStyle: { backgroundColor: '$magenta-60' },
         pressStyle: { backgroundColor: '$magenta-50' },
       },

packages/components/src/checkbox/checkbox.tsx

@@ -54,7 +54,7 @@ const Base = styled(Root, {
   accessibilityRole: 'checkbox',
 
   backgroundColor: 'transparent',
-  borderRadius: '$2',
+  borderRadius: '$6',
 
   cursor: 'pointer',
   animation: 'fast',

packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx

@@ -14,7 +14,7 @@ const DividerNewMessages = (props: Props) => {
 
   return (
     <Stack position="relative" height={42} backgroundColor={color}>
-      <LinearGradient height={42} colors={['$white-95', '$white-100']}>
+      <LinearGradient height={42} colors={['$white-90', '$white-100']}>
         <Stack paddingHorizontal={56} paddingVertical={12} zIndex={10}>
           <Text size={13} weight="medium" color={color}>
             New Messages

packages/components/src/dropdown-menu/dropdown-menu.tsx

@@ -103,7 +103,7 @@ const Content = styled(DropdownMenuContent, {
   backgroundColor: '$white-100',
 
   shadowRadius: 30,
-  shadowOffset: '0px 8px',
+  shadowOffset: { width: 0, height: 8 },
   shadowColor: 'rgba(9, 16, 28, 0.12)',
 })
 

packages/components/src/image/image.tsx

@@ -1,17 +1,15 @@
 import { forwardRef } from 'react'
 
-import { setupReactNative, styled } from '@tamagui/core'
+import { styled } from '@tamagui/core'
-import { Image as RNImage } from 'react-native'
+import { Image as TamaguiImage } from '@tamagui/image'
 
 import type { GetProps, GetVariants } from '../types'
 import type { Ref } from 'react'
 
-setupReactNative({
-  Image: RNImage,
-})
-
 type Variants = GetVariants<typeof Base>
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Expression produces a union type that is too complex to represent.
 type Props = GetProps<typeof Base> & {
   src: string
   width: number | 'full'
@@ -48,7 +46,7 @@ const _Image = forwardRef(Image)
 export { _Image as Image }
 export type { Props as ImageProps }
 
-const Base = styled(RNImage, {
+const Base = styled(TamaguiImage, {
   name: 'Image',
   position: 'relative',
   zIndex: 1,
@@ -78,7 +76,7 @@ const Base = styled(RNImage, {
         borderRadius: 999, // fix this once Image is migrated to tamagui image
       },
     },
-  },
+  } as const,
 
   backgroundColor: '$white-100',
 })

packages/components/src/input/input.tsx

@@ -2,7 +2,7 @@ import { cloneElement, forwardRef, useRef, useState } from 'react'
 
 import { composeRefs } from '@radix-ui/react-compose-refs'
 import { ClearIcon } from '@status-im/icons'
-import { setupReactNative, Stack, styled } from '@tamagui/core'
+import { Stack, styled } from '@tamagui/core'
 import { focusableInputHOC } from '@tamagui/focusable'
 import { TextInput } from 'react-native'
 
@@ -12,10 +12,6 @@ import { Text } from '../text'
 import type { GetProps } from '@tamagui/core'
 import type { Ref } from 'react'
 
-setupReactNative({
-  TextInput,
-})
-
 type Props = GetProps<typeof InputFrame> & {
   button?: {
     label: string

packages/components/src/popover/popover.tsx

@@ -40,7 +40,7 @@ const PopoverContent = (props: ContentProps) => {
       backgroundColor="$white-100"
       borderRadius="$12"
       shadowRadius={30}
-      shadowOffset="0px 8px"
+      shadowOffset={{ width: 0, height: 8 }}
       shadowColor="rgba(9, 16, 28, 0.12)"
     >
       {children}

packages/components/src/tabs/tabs.tsx

@@ -174,7 +174,7 @@ const TriggerBase = styled(View, {
         },
       },
     },
-  },
+  } as const,
 })
 
 const triggerTextSizes: Record<Variants['size'], TextProps['size']> = {

packages/components/src/tag/tag.stories.tsx

@@ -46,7 +46,7 @@ export const Default: Story = {
           <Tag label="New tag #7140FD" size={24} color="#7140FD" icon="🧙‍♂️" />
 
           <Tag
-            label="custom color purple"
+            label="New tag $purple-50"
             size={24}
             icon="🐷"
             color="$purple-50"

packages/components/src/tag/tag.tsx

@@ -6,6 +6,7 @@ import { View } from 'react-native'
 import { getColorWithOpacity } from '../../utils/get-color-with-opacity'
 import { Text } from '../text'
 
+import type { HexColor, RGBAColor } from '../../utils/get-color-with-opacity'
 import type { TextProps } from '../text'
 import type { IconProps } from '@status-im/icons'
 import type { ColorTokens } from '@tamagui/core'
@@ -19,7 +20,7 @@ type Props = {
   selected?: boolean
   disabled?: boolean
   onPress?: PressableProps['onPress']
-  color?: ColorTokens | `#${string}`
+  color?: ColorTokens | HexColor
 }
 
 const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
@@ -100,20 +101,23 @@ const Base = styled(View, {
   },
 
   variants: {
-    variant: (token: ColorTokens | string, { tokens }) => {
+    variant: (color: Props['color'], { tokens }) => {
-      const color = tokens.colors[token as keyof typeof tokens.colors]
+      if (!color) {
-        ? tokens.colors[token as keyof typeof tokens.colors].val
+        return
-        : token
+      }
+
+      const key = color as keyof typeof tokens.colors
+      const val = (tokens.colors[key]?.val as RGBAColor) ?? (color as HexColor)
 
       return {
-        borderColor: getColorWithOpacity(color, 0.2),
+        borderColor: getColorWithOpacity(val, 20),
         pressStyle: {
-          borderColor: getColorWithOpacity(color, 0.3),
+          borderColor: getColorWithOpacity(val, 30),
-          backgroundColor: getColorWithOpacity(color, 0.1),
+          backgroundColor: getColorWithOpacity(val, 10),
         },
         hoverStyle: {
-          borderColor: getColorWithOpacity(color, 0.3),
+          borderColor: getColorWithOpacity(val, 30),
-          backgroundColor: getColorWithOpacity(color, 0.1),
+          backgroundColor: getColorWithOpacity(val, 10),
         },
       }
     },

packages/components/src/tokens.ts

@@ -10,7 +10,7 @@ import {
   white,
 } from '@status-im/colors'
 import { createTokens } from '@tamagui/core'
-import { size, space, zIndex } from '@tamagui/theme-base'
+import { size, space, zIndex } from '@tamagui/themes'
 
 function prefixColors(prefix: string, color: Record<string, string>) {
   return Object.entries(color).reduce((acc, [key, value]) => {

packages/components/utils/get-color-with-opacity.ts

@@ -1,18 +1,21 @@
-/**
+import { opacity as colorOpacity } from '../consts/opacity'
- * Gets the color with opacity based on the original color and opacity value
- * @param color - the original color
- * @param opacity - the opacity value
- * @returns the color with opacity
- **/
 
-function getColorWithOpacity(color: string, opacity: number): string {
+export type RGBAColor = `rgba(${string} / ${string}%)`
-  // Ensure the opacity value is within the valid range of 0 to 1
-  const clampedOpacity = Math.max(0, Math.min(1, opacity)) * 100
 
-  // Construct the color string with opacity using CSS color-mix function
+export type HexColor = `#${string}`
-  const newColor = `color-mix(in srgb, ${color} ${clampedOpacity}%, transparent)`
 
-  return newColor
+type Opacity = keyof typeof colorOpacity
+
+export function getColorWithOpacity(
+  color: RGBAColor | HexColor,
+  opacity: Opacity
+): string {
+  if (color.startsWith('rgba')) {
+    return color
+      .replace(' / ', '/')
+      .replace(/\s/g, ',')
+      .replace(/(\d+)%/, `${colorOpacity[opacity].decimal}`)
+  }
+
+  return `${color}${colorOpacity[opacity].hex}`
 }
-
-export { getColorWithOpacity }

packages/icons/package.json

@@ -34,9 +34,9 @@
     "clean": "rimraf dist node_modules .turbo"
   },
   "dependencies": {
-    "@tamagui/core": "1.36.4",
+    "@tamagui/core": "1.74.21",
-    "@tamagui/web": "1.36.4",
+    "@tamagui/web": "1.74.21",
-    "tamagui": "1.36.4"
+    "tamagui": "1.74.21"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.x || ^18.x",

patches/@tamagui+static+1.11.1.patch

@@ -1,24 +0,0 @@
-diff --git a/node_modules/@tamagui/static/dist/cjs/extractor/bundle.js b/node_modules/@tamagui/static/dist/cjs/extractor/bundle.js
-index 0709a69..5138aa5 100644
---- a/node_modules/@tamagui/static/dist/cjs/extractor/bundle.js
-+++ b/node_modules/@tamagui/static/dist/cjs/extractor/bundle.js
-@@ -87,7 +87,18 @@ function getESBuildConfig({ entryPoints, resolvePlatformSpecificEntries, ...opti
-         ...aliases
-       })
-     ],
--    ...options
-+    ...options,
-+    resolveExtensions: [
-+      '.web.js',
-+      '.web.ts',
-+      '.web.tsx',
-+      '.js',
-+      '.jsx',
-+      '.json',
-+      '.ts',
-+      '.tsx',
-+      '.mjs',
-+    ],
-   };
-   return res;
- }