mfe

mobile/components/ui/text/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { Text as RNText } from 'react-native';
+import { textStyle } from './styles';
+
+type ITextProps = React.ComponentProps<typeof RNText> &
+  VariantProps<typeof textStyle>;
+
+const Text = React.forwardRef<React.ComponentRef<typeof RNText>, ITextProps>(
+  function Text(
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <RNText
+        className={textStyle({
+          isTruncated: isTruncated as boolean,
+          bold: bold as boolean,
+          underline: underline as boolean,
+          strikeThrough: strikeThrough as boolean,
+          size,
+          sub: sub as boolean,
+          italic: italic as boolean,
+          highlight: highlight as boolean,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Text.displayName = 'Text';
+
+export { Text };

mobile/components/ui/text/index.web.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { textStyle } from './styles';
+
+type ITextProps = React.ComponentProps<'span'> & VariantProps<typeof textStyle>;
+
+const Text = React.forwardRef<React.ComponentRef<'span'>, ITextProps>(
+  function Text(
+    {
+      className,
+      isTruncated,
+      bold,
+      underline,
+      strikeThrough,
+      size = 'md',
+      sub,
+      italic,
+      highlight,
+      ...props
+    }: { className?: string } & ITextProps,
+    ref
+  ) {
+    return (
+      <span
+        className={textStyle({
+          isTruncated: isTruncated as boolean,
+          bold: bold as boolean,
+          underline: underline as boolean,
+          strikeThrough: strikeThrough as boolean,
+          size,
+          sub: sub as boolean,
+          italic: italic as boolean,
+          highlight: highlight as boolean,
+          class: className,
+        })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Text.displayName = 'Text';
+
+export { Text };

mobile/components/ui/text/styles.tsx

@@ -0,0 +1,47 @@
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { isWeb } from '@gluestack-ui/utils/nativewind-utils';
+
+const baseStyle = isWeb
+  ? 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word'
+  : '';
+
+export const textStyle = tva({
+  base: `text-typography-700 font-body ${baseStyle}`,
+
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});