@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Gluestack/tooltip/index.tsx

@@ -0,0 +1,125 @@
+'use client';
+import React from 'react';
+import { createTooltip } from '@gluestack-ui/tooltip';
+import { View, Text, Platform } from 'react-native';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates';
+
+import { Motion, AnimatePresence } from '@legendapp/motion';
+
+export const UITooltip = createTooltip({
+  Root:
+    Platform.OS === 'web'
+      ? withStyleContext(View)
+      : withStyleContextAndStates(View),
+  Content: Motion.View,
+  Text: Text,
+  AnimatePresence: AnimatePresence,
+});
+
+const tooltipStyle = tva({
+  base: 'w-full h-full web:pointer-events-none',
+});
+
+const tooltipContentStyle = tva({
+  base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto',
+});
+
+const tooltipTextStyle = tva({
+  base: 'font-normal tracking-normal web:select-none text-xs text-typography-50',
+
+  variants: {
+    isTruncated: {
+      true: {
+        props: 'line-clamp-1 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',
+    },
+  },
+});
+
+cssInterop(UITooltip, { className: 'style' });
+cssInterop(UITooltip.Content, { className: 'style' });
+cssInterop(UITooltip.Text, { className: 'style' });
+
+type ITooltipProps = React.ComponentProps<typeof UITooltip> &
+  VariantProps<typeof tooltipStyle> & { className?: string };
+type ITooltipContentProps = React.ComponentProps<typeof UITooltip.Content> &
+  VariantProps<typeof tooltipContentStyle> & { className?: string };
+type ITooltipTextProps = React.ComponentProps<typeof UITooltip.Text> &
+  VariantProps<typeof tooltipTextStyle> & { className?: string };
+
+export const Tooltip = React.forwardRef<
+  React.ElementRef<typeof UITooltip>,
+  ITooltipProps
+>(({ className, ...props }, ref) => {
+  return (
+    <UITooltip
+      ref={ref}
+      className={tooltipStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+export const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof UITooltip.Content>,
+  ITooltipContentProps & { className?: string }
+>(({ className, ...props }, ref) => {
+  return (
+    <UITooltip.Content
+      ref={ref}
+      {...props}
+      className={tooltipContentStyle({
+        class: className,
+      })}
+      pointerEvents="auto"
+    />
+  );
+});
+
+export const TooltipText = React.forwardRef<
+  React.ElementRef<typeof UITooltip.Text>,
+  ITooltipTextProps & { className?: string }
+>(({ size, className, ...props }, ref) => {
+  return (
+    <UITooltip.Text
+      ref={ref}
+      className={tooltipTextStyle({ size, class: className })}
+      {...props}
+    />
+  );
+});

package/src/Components/Gluestack/utils/use-break-point-value.ts

@@ -0,0 +1,101 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+import { useEffect, useState } from 'react';
+
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from 'tailwind.config';
+
+const TailwindTheme = resolveConfig(tailwindConfig);
+const screenSize = TailwindTheme.theme.screens;
+
+type breakpoints = keyof typeof screenSize | 'default';
+
+type BreakPointValue = Partial<Record<breakpoints, any>>;
+
+const resolveScreenWidth: any = {
+  default: 0,
+};
+
+Object.entries(screenSize).forEach(([key, value]) => {
+  resolveScreenWidth[key] = parseInt(value.replace('px', ''));
+});
+
+export const getBreakPointValue = (values: any, width: any) => {
+  if (typeof values !== 'object') return values;
+
+  let finalBreakPointResolvedValue: any;
+  const mediaQueriesBreakpoints: any = [
+    {
+      key: 'default',
+      breakpoint: 0,
+      isValid: true,
+    },
+  ];
+  Object.keys(resolveScreenWidth).forEach((key) => {
+    const isValid = isValidBreakpoint(resolveScreenWidth[key], width);
+
+    mediaQueriesBreakpoints.push({
+      key: key,
+      breakpoint: resolveScreenWidth[key],
+      isValid: isValid,
+    });
+  });
+
+  mediaQueriesBreakpoints.sort((a: any, b: any) => a.breakpoint - b.breakpoint);
+
+  mediaQueriesBreakpoints.forEach((breakpoint: any, index: any) => {
+    breakpoint.value = values.hasOwnProperty(breakpoint.key)
+      ? // @ts-ignore
+        values[breakpoint.key]
+      : mediaQueriesBreakpoints[index - 1]?.value ||
+        mediaQueriesBreakpoints[0]?.value;
+  });
+
+  const lastValidObject = getLastValidObject(mediaQueriesBreakpoints);
+
+  if (!lastValidObject) {
+    finalBreakPointResolvedValue = values;
+  } else {
+    finalBreakPointResolvedValue = lastValidObject?.value;
+  }
+  return finalBreakPointResolvedValue;
+};
+
+export function useBreakpointValue(values: BreakPointValue): any {
+  const { width } = useWindowDimensions();
+
+  const [currentBreakPointValue, setCurrentBreakPointValue] = useState(
+    getBreakPointValue(values, width)
+  );
+
+  useEffect(() => {
+    if (typeof values === 'object') {
+      const finalBreakPointResolvedValue = getBreakPointValue(values, width);
+      setCurrentBreakPointValue(finalBreakPointResolvedValue);
+    }
+  }, [values, width]);
+
+  if (typeof values !== 'object') return values;
+
+  return currentBreakPointValue;
+}
+
+export function isValidBreakpoint(
+  breakPointWidth: any,
+  width: any = Dimensions.get('window')?.width
+) {
+  const windowWidth = width;
+
+  if (windowWidth >= breakPointWidth) {
+    return true;
+  }
+  return false;
+}
+
+function getLastValidObject(mediaQueries: any) {
+  for (let i = mediaQueries.length - 1; i >= 0; i--) {
+    if (mediaQueries[i].isValid) {
+      return mediaQueries[i];
+    }
+  }
+  return null; // No valid object found
+}

package/src/Components/Gluestack/view/index.tsx

@@ -0,0 +1,2 @@
+'use client';
+export { View } from 'react-native';

package/src/Components/Gluestack/virtualized-list/index.tsx

@@ -0,0 +1,2 @@
+'use client';
+export { VirtualizedList } from 'react-native';

package/src/Components/Gluestack/vstack/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View } from 'react-native';
+
+import { vstackStyle } from './styles';
+
+type IVStackProps = React.ComponentProps<typeof View> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef<React.ElementRef<typeof View>, IVStackProps>(
+  ({ className, space, reversed, ...props }, ref) => {
+    return (
+      <View
+        className={vstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };

package/src/Components/Gluestack/vstack/index.web.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+import { vstackStyle } from './styles';
+
+type IVStackProps = React.ComponentProps<'div'> &
+  VariantProps<typeof vstackStyle>;
+
+const VStack = React.forwardRef<React.ElementRef<'div'>, IVStackProps>(
+  ({ className, space, reversed, ...props }, ref) => {
+    return (
+      <div
+        className={vstackStyle({ space, reversed, class: className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  }
+);
+
+VStack.displayName = 'VStack';
+
+export { VStack };

package/src/Components/Gluestack/vstack/styles.tsx

@@ -0,0 +1,25 @@
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+
+const baseStyle = isWeb
+  ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
+  : '';
+
+export const vstackStyle = tva({
+  base: `flex-col ${baseStyle}`,
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    reversed: {
+      true: 'flex-col-reverse',
+    },
+  },
+});