@grupalia/rn-ui-kit 0.0.41 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grupalia/rn-ui-kit",
-  "version": "0.0.41",
+  "version": "0.2.0",
   "description": "Grupalia React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/module/index.d.ts",
@@ -8,7 +8,8 @@
     "lib",
     "src/preset.ts",
     "src/preset.cjs",
-    "src/styles"
+    "src/styles",
+    "src/components"
   ],
   "scripts": {
     "dev": "chokidar \"src/**/*\" -c \"yarn bob build\"",
@@ -22,7 +23,9 @@
     "nativewind": "^2.0.11",
     "react": "*",
     "react-native": "*",
-    "tailwindcss": "3.3.2"
+    "tailwindcss": "3.3.2",
+    "react-native-heroicons": "^4.0.0",
+    "react-native-svg": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -44,7 +47,8 @@
     "react-native-builder-bob": "^0.40.6",
     "react-native-svg": "^15.11.2",
     "tailwindcss": "3.3.2",
-    "typescript": "~5.3.3"
+    "typescript": "~5.3.3",
+    "react-native-heroicons": "^4.0.0"
   },
   "exports": {
     ".": {

package/src/components/BaseAlert.tsx

@@ -0,0 +1,175 @@
+import clsx from 'clsx';
+import { InformationCircleIcon as OutlinedInformationCircleIcon } from 'react-native-heroicons/outline';
+import {
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+} from 'react-native-heroicons/solid';
+
+import { View, Text } from '../hoc-components';
+import BaseIcon from './BaseIcon';
+import { useIsAboveBreakpoint } from '../hooks/useIsAboveBreakpoint';
+
+interface IconComponentProps {
+  type: 'error' | 'success' | 'alert' | 'info' | 'notice';
+  variant?: 'primary' | 'secondary';
+}
+
+function IconComponent({ type, variant = 'primary' }: IconComponentProps) {
+  const iconColors = {
+    error: {
+      primary: 'fg-error-primary',
+      secondary: 'fg-error-secondary',
+    },
+    success: {
+      primary: 'fg-success-primary',
+      secondary: 'fg-success-secondary',
+    },
+    alert: {
+      primary: 'fg-warning-primary',
+      secondary: 'fg-warning-secondary',
+    },
+    info: {
+      primary: 'utility-gray-500',
+      secondary: 'utility-gray-400',
+    },
+    notice: {
+      primary: 'utility-blue-500',
+      secondary: 'utility-blue-400',
+    },
+  } as const;
+
+  const icons = {
+    error: XCircleIcon,
+    success: CheckCircleIcon,
+    alert: ExclamationTriangleIcon,
+    info: OutlinedInformationCircleIcon,
+    notice: InformationCircleIcon,
+  };
+
+  return (
+    <BaseIcon
+      icon={icons[type]}
+      size={20}
+      color={iconColors[type][variant]}
+    />
+  );
+}
+
+interface Props extends React.ComponentProps<typeof View> {
+  type: 'error' | 'success' | 'alert' | 'info' | 'notice';
+  message: string;
+  description?: string;
+  variant?: 'primary' | 'secondary';
+}
+
+export default function AlertComponent({
+  type,
+  message,
+  description,
+  variant = 'primary',
+  children,
+  ...props
+}: Props) {
+  const largePhone = useIsAboveBreakpoint('xs');
+  const alertClasses = () => {
+    if (variant === 'secondary') {
+      return 'bg-white border';
+    }
+
+    switch (type) {
+      case 'error':
+        return 'bg-error-secondary';
+      case 'success':
+        return 'bg-success-secondary';
+      case 'alert':
+        return 'bg-yellow-50 border-yellow-400';
+      case 'info':
+        return 'bg-white border border-gray-300';
+      case 'notice':
+      default:
+        return 'bg-blue-100';
+    }
+  };
+
+  const textColor = () => {
+    if (variant === 'secondary') {
+      switch (type) {
+        case 'error':
+          return 'text-red-500';
+        case 'success':
+          return 'text-green-500';
+        case 'alert':
+          return 'text-yellow-500';
+        case 'info':
+        case 'notice':
+        default:
+          return 'text-blue-500';
+      }
+    } else {
+      switch (type) {
+        case 'error':
+          return 'text-red-700';
+        case 'success':
+          return 'text-green-700';
+        case 'alert':
+          return 'text-yellow-700';
+        case 'info':
+          return 'text-gray-500';
+        case 'notice':
+        default:
+          return 'text-blue-700';
+      }
+    }
+  };
+
+  const borderColor = () => {
+    if (variant === 'secondary') {
+      switch (type) {
+        case 'error':
+          return 'border-red-300';
+        case 'success':
+          return 'border-green-300';
+        case 'alert':
+          return 'border-yellow-300';
+        case 'info':
+        case 'notice':
+        default:
+          return 'border-blue-300';
+      }
+    }
+
+    return '';
+  };
+
+  return (
+    <View
+      {...props}
+      className={clsx(
+        'flex flex-row rounded-lg',
+        alertClasses(),
+        borderColor(),
+        largePhone ? 'px-2 py-4' : 'px-1 py-2',
+      )}
+    >
+      <View className="shrink-0">
+        <IconComponent
+          type={type}
+          variant={variant}
+        />
+      </View>
+      <View className={clsx('flex flex-1 flex-col', largePhone ? 'ml-3' : 'ml-1')}>
+        <Text className={clsx('font-medium', textColor(), largePhone ? 'text-base' : 'text-xs')}>
+          {message}
+        </Text>
+        {description && (
+          <Text className={clsx('text-xs text-gray-700', largePhone ? 'mt-3' : 'mt-1')}>
+            {description}
+          </Text>
+        )}
+        {children}
+      </View>
+    </View>
+  );
+}

package/src/components/BaseBadge.tsx

@@ -0,0 +1,191 @@
+import clsx from 'clsx';
+import { styled } from 'nativewind';
+import { ViewProps } from 'react-native';
+
+import { View, Text } from '../hoc-components';
+import BaseIcon from './BaseIcon';
+import { HeroIcon } from '../types/heroicons';
+
+export type BadgeVariant =
+  'gray' |
+  'brand' |
+  'error' |
+  'warning' |
+  'success' |
+  'blue_gray' |
+  'blue_light' |
+  'blue' |
+  'indigo' |
+  'purple' |
+  'pink' |
+  'orange';
+
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+interface BaseBadgeProps extends ViewProps {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  text: string;
+  transparent?: boolean;
+  squared?: boolean;
+  leftIcon?: HeroIcon | null;
+  rightIcon?: HeroIcon | null;
+}
+
+function BaseBadge({
+  variant = 'gray',
+  size = 'md',
+  text,
+  transparent = false,
+  squared = false,
+  leftIcon = null,
+  rightIcon = null,
+  ...props
+}: BaseBadgeProps) {
+  const variantStyles = {
+    gray: {
+      bg: 'bg-utility-gray-50',
+      text: 'text-utility-gray-700',
+      border: 'border-utility-gray-200',
+    },
+    brand: {
+      bg: 'bg-utility-brand-50',
+      text: 'text-utility-brand-700',
+      border: 'border-utility-brand-200',
+    },
+    error: {
+      bg: 'bg-utility-error-50',
+      text: 'text-utility-error-700',
+      border: 'border-utility-error-200',
+    },
+    warning: {
+      bg: 'bg-utility-warning-50',
+      text: 'text-utility-warning-700',
+      border: 'border-utility-warning-200',
+    },
+    success: {
+      bg: 'bg-utility-success-50',
+      text: 'text-utility-success-700',
+      border: 'border-utility-success-200',
+    },
+    blue_gray: {
+      bg: 'bg-utility-gray_blue-50',
+      text: 'text-utility-gray_blue-700',
+      border: 'border-utility-gray_blue-200',
+    },
+    blue_light: {
+      bg: 'bg-utility-blue_light-50',
+      text: 'text-utility-blue_light-700',
+      border: 'border-utility-blue_light-200',
+    },
+    blue: {
+      bg: 'bg-utility-blue-50',
+      text: 'text-utility-blue-700',
+      border: 'border-utility-blue-200',
+    },
+    indigo: {
+      bg: 'bg-utility-indigo-50',
+      text: 'text-utility-indigo-700',
+      border: 'border-utility-indigo-200',
+    },
+    purple: {
+      bg: 'bg-utility-purple-50',
+      text: 'text-utility-purple-700',
+      border: 'border-utility-purple-200',
+    },
+    pink: {
+      bg: 'bg-utility-pink-50',
+      text: 'text-utility-pink-700',
+      border: 'border-utility-pink-200',
+    },
+    orange: {
+      bg: 'bg-utility-orange-50',
+      text: 'text-utility-orange-700',
+      border: 'border-utility-orange-200',
+    },
+  };
+
+  const sizeStyles = {
+    sm: {
+      container: 'px-1.5 py-0.5',
+      text: 'text-xs',
+    },
+    md: {
+      container: 'px-2.5 py-0.5',
+      text: 'text-sm',
+    },
+    lg: {
+      container: 'px-3 py-1',
+      text: 'text-base',
+    },
+  };
+
+  const iconSizes = {
+    sm: 12,
+    md: 14,
+    lg: 16,
+  };
+
+  const containerStyles = clsx(
+    'flex-row items-center justify-center border',
+    squared ? 'rounded-md' : 'rounded-full',
+    transparent ? 'bg-transparent' : variantStyles[variant].bg,
+    transparent ? 'border-primary' : variantStyles[variant].border,
+    sizeStyles[size].container,
+  );
+
+  const textStyles = clsx(
+    'font-medium',
+    variantStyles[variant].text,
+    sizeStyles[size].text,
+  );
+
+  const iconSpacingStyles = {
+    left: 'mr-1.5',
+    right: 'ml-1.5',
+  };
+
+  const iconColors = {
+    gray: 'utility-gray-500',
+    brand: 'utility-brand-500',
+    error: 'utility-error-500',
+    warning: 'utility-warning-500',
+    success: 'utility-success-500',
+    blue_gray: 'utility-gray_blue-500',
+    blue_light: 'utility-blue_light-500',
+    blue: 'utility-blue-500',
+    indigo: 'utility-indigo-500',
+    purple: 'utility-purple-500',
+    pink: 'utility-pink-500',
+    orange: 'utility-orange-500',
+  } as const;
+
+  return (
+    <View
+      className={containerStyles}
+      {...props}
+    >
+      {leftIcon && (
+        <View className={iconSpacingStyles.left}>
+          <BaseIcon
+            icon={leftIcon}
+            size={iconSizes[size]}
+            color={iconColors[variant]}
+          />
+        </View>
+      )}
+      <Text className={textStyles}>{text}</Text>
+      {rightIcon && (
+        <View className={iconSpacingStyles.right}>
+          <BaseIcon
+            icon={rightIcon}
+            size={iconSizes[size]}
+            color={iconColors[variant]}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+export default styled(BaseBadge);

package/src/components/BaseButton.tsx

@@ -0,0 +1,288 @@
+import clsx from 'clsx';
+import { styled } from 'nativewind';
+import React from 'react';
+import { PressableProps } from 'react-native';
+
+import {
+  Pressable, Text, View, ActivityIndicator,
+} from '../hoc-components';
+import BaseIcon from './BaseIcon';
+import { Color as ForegroundColor } from '../styles/foreground-colors';
+import { HeroIcon } from '../types/heroicons';
+
+interface ButtonProps extends PressableProps {
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'link-color' | 'link-gray';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  text?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  destructive?: boolean;
+  leftIcon?: HeroIcon | null;
+  rightIcon?: HeroIcon | null;
+  countdownSecs?: number;
+}
+
+function BaseButton({
+  variant = 'primary',
+  size = 'md',
+  text = '',
+  loading = false,
+  disabled = false,
+  destructive = false,
+  leftIcon = null,
+  rightIcon = null,
+  hitSlop = 6,
+  countdownSecs = 0,
+  ...props
+}: ButtonProps) {
+  const [timer, setTimer] = React.useState(countdownSecs);
+  const [isDisabled, setIsDisabled] = React.useState(disabled || countdownSecs > 0);
+
+  React.useEffect(() => {
+    let intervalId: NodeJS.Timeout;
+    if (countdownSecs > 0) {
+      setIsDisabled(true);
+      setTimer(countdownSecs);
+      intervalId = setInterval(() => {
+        setTimer((prevTimer: number) => {
+          if (prevTimer <= 1) {
+            clearInterval(intervalId);
+            setIsDisabled(Boolean(disabled));
+            return 0;
+          }
+          return prevTimer - 1;
+        });
+      }, 1000);
+    } else {
+      setIsDisabled(Boolean(disabled));
+    }
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [countdownSecs, disabled]);
+
+  const sizeClasses = {
+    xs: 'rounded-md h-7',
+    sm: 'rounded-md h-8',
+    md: 'rounded-lg h-9',
+    lg: 'rounded-lg h-10',
+    xl: 'rounded-lg h-11',
+  };
+
+  const iconOnlyClasses = {
+    xs: 'rounded-md h-8 w-8',
+    sm: 'rounded-md h-9 w-9',
+    md: 'rounded-lg h-10 w-10',
+    lg: 'rounded-lg h-11 w-11',
+    xl: 'rounded-lg h-12 w-12',
+  };
+
+  const containerClasses = {
+    primary: {
+      default: destructive ? 'bg-error-solid' : 'bg-brand-solid',
+      disabled: 'bg-disabled border border-disabled_subtle',
+      loading: destructive ? 'bg-error-solid' : 'bg-brand-solid_hover',
+    },
+    secondary: {
+      default: destructive ? 'bg-primary border border-error_subtle' : 'bg-primary border border-primary',
+      disabled: 'bg-primary border border-disabled_subtle',
+      loading: destructive ? 'bg-error-primary border border-error_subtle' : 'bg-primary_hover border border-primary',
+    },
+    tertiary: {
+      default: 'bg-transparent',
+      disabled: 'bg-transparent',
+      loading: destructive ? 'bg-error-primary' : 'bg-primary_hover',
+    },
+    'link-color': {
+      default: 'bg-transparent',
+      disabled: 'bg-transparent',
+      loading: 'bg-transparent',
+    },
+    'link-gray': {
+      default: 'bg-transparent',
+      disabled: 'bg-transparent',
+      loading: 'bg-transparent',
+    },
+  };
+
+  const textColorClasses = {
+    primary: {
+      default: 'text-white',
+      disabled: 'text-disabled',
+      loading: 'text-white',
+    },
+    secondary: {
+      default: destructive ? 'text-error' : 'text-secondary',
+      disabled: 'text-disabled',
+      loading: destructive ? 'text-error-primary' : 'text-secondary',
+    },
+    tertiary: {
+      default: destructive ? 'text-error' : 'text-tertiary',
+      disabled: 'text-disabled',
+      loading: destructive ? 'text-error-primary' : 'text-tertiary',
+    },
+    'link-color': {
+      default: destructive ? 'text-error' : 'text-brand-tertiary',
+      disabled: 'text-disabled',
+      loading: destructive ? 'text-error' : 'text-brand-tertiary',
+    },
+    'link-gray': {
+      default: destructive ? 'text-error' : 'text-tertiary',
+      disabled: 'text-disabled',
+      loading: destructive ? 'text-error' : 'text-tertiary',
+    },
+  };
+
+  const textSizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base',
+  };
+
+  const iconSizes = {
+    xs: 16,
+    sm: 18,
+    md: 20,
+    lg: 22,
+    xl: 24,
+  };
+
+  let buttonState: 'default' | 'disabled' | 'loading' = 'default';
+  if (loading) {
+    buttonState = 'loading';
+  } else if (isDisabled) {
+    buttonState = 'disabled';
+  }
+
+  const isIconOnly = !text && (leftIcon || rightIcon);
+
+  const buttonStyles = clsx(
+    'flex flex-row items-center justify-center',
+    isIconOnly ? iconOnlyClasses[size] : sizeClasses[size],
+    containerClasses[variant][buttonState],
+  );
+
+  const textStyles = clsx(
+    'font-medium',
+    textSizeClasses[size],
+    textColorClasses[variant][buttonState],
+  );
+
+  const iconColors = {
+    primary: {
+      default: 'fg-white',
+      disabled: 'fg-disabled',
+      loading: 'fg-white',
+    },
+    secondary: {
+      default: 'fg-secondary',
+      disabled: 'fg-disabled',
+      loading: 'fg-secondary',
+    },
+    tertiary: {
+      default: 'fg-tertiary',
+      disabled: 'fg-disabled',
+      loading: 'fg-tertiary',
+    },
+    'link-color': {
+      default: 'fg-brand-primary',
+      disabled: 'fg-disabled',
+      loading: 'fg-brand-primary',
+    },
+    'link-gray': {
+      default: 'fg-secondary',
+      disabled: 'fg-disabled',
+      loading: 'fg-secondary',
+    },
+  };
+
+  const spinnerColorMap = {
+    primary: {
+      default: '#fff',
+      disabled: '#9AA4B2', // text-disabled color
+      loading: '#fff',
+    },
+    secondary: {
+      default: destructive ? '#F04438' : '#667085',
+      disabled: '#9AA4B2', // text-disabled color
+      loading: destructive ? '#F04438' : '#667085',
+    },
+    tertiary: {
+      default: destructive ? '#F04438' : '#667085',
+      disabled: '#9AA4B2', // text-disabled color
+      loading: destructive ? '#F04438' : '#667085',
+    },
+    'link-color': {
+      default: destructive ? '#F04438' : '#7F56D9',
+      disabled: '#9AA4B2', // text-disabled color
+      loading: destructive ? '#F04438' : '#7F56D9',
+    },
+    'link-gray': {
+      default: destructive ? '#F04438' : '#667085',
+      disabled: '#9AA4B2', // text-disabled color
+      loading: destructive ? '#F04438' : '#667085',
+    },
+  };
+
+  let spinnerColor = '#fff';
+  if (buttonState === 'disabled') {
+    spinnerColor = spinnerColorMap[variant].disabled;
+  } else if (buttonState === 'loading') {
+    spinnerColor = spinnerColorMap[variant].loading;
+  } else {
+    spinnerColor = spinnerColorMap[variant].default;
+  }
+
+  return (
+    <Pressable
+      disabled={isDisabled || loading}
+      className={buttonStyles}
+      hitSlop={hitSlop}
+      {...props}
+    >
+      <View className={clsx('flex flex-row items-center justify-center', loading && 'opacity-0')}>
+        {leftIcon && (
+          <BaseIcon
+            icon={leftIcon}
+            size={iconSizes[size]}
+            color={iconColors[variant][buttonState] as ForegroundColor}
+            className="mr-1.5"
+          />
+        )}
+        {text && (
+          <Text className={textStyles}>
+            {text}
+            {timer > 0 ? ` (${timer})` : ''}
+          </Text>
+        )}
+        {rightIcon && (
+          <BaseIcon
+            icon={rightIcon}
+            size={iconSizes[size]}
+            color={iconColors[variant][buttonState] as ForegroundColor}
+            className="ml-1.5"
+          />
+        )}
+      </View>
+      {loading && (
+        <ActivityIndicator
+          size="small"
+          color={spinnerColor}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        />
+      )}
+    </Pressable>
+  );
+}
+
+export default styled(BaseButton);