@grupalia/rn-ui-kit 0.1.0 → 0.2.0

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

@@ -4,7 +4,6 @@ import { ViewProps } from 'react-native';
 
 import { View, Text } from '../hoc-components';
 import BaseIcon from './BaseIcon';
-import utilityColors from '../styles/utility-colors';
 import { HeroIcon } from '../types/heroicons';
 
 export type BadgeVariant =
@@ -29,8 +28,8 @@ interface BaseBadgeProps extends ViewProps {
   text: string;
   transparent?: boolean;
   squared?: boolean;
-  LeftIcon?: HeroIcon | null;
-  RightIcon?: HeroIcon | null;
+  leftIcon?: HeroIcon | null;
+  rightIcon?: HeroIcon | null;
 }
 
 function BaseBadge({
@@ -39,8 +38,8 @@ function BaseBadge({
   text,
   transparent = false,
   squared = false,
-  LeftIcon = null,
-  RightIcon = null,
+  leftIcon = null,
+  rightIcon = null,
   ...props
 }: BaseBadgeProps) {
   const variantStyles = {
@@ -146,41 +145,40 @@ function BaseBadge({
     right: 'ml-1.5',
   };
 
-  // @TODO handle dark mode
   const iconColors = {
-    gray: utilityColors['gray-500'].light,
-    brand: utilityColors['brand-500'].light,
-    error: utilityColors['error-500'].light,
-    warning: utilityColors['warning-500'].light,
-    success: utilityColors['success-500'].light,
-    blue_gray: utilityColors['gray_blue-500'].light,
-    blue_light: utilityColors['blue_light-500'].light,
-    blue: utilityColors['blue-500'].light,
-    indigo: utilityColors['indigo-500'].light,
-    purple: utilityColors['purple-500'].light,
-    pink: utilityColors['pink-500'].light,
-    orange: utilityColors['orange-500'].light,
-  };
+    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 && (
+      {leftIcon && (
         <View className={iconSpacingStyles.left}>
           <BaseIcon
-            icon={LeftIcon}
+            icon={leftIcon}
             size={iconSizes[size]}
             color={iconColors[variant]}
           />
         </View>
       )}
       <Text className={textStyles}>{text}</Text>
-      {RightIcon && (
+      {rightIcon && (
         <View className={iconSpacingStyles.right}>
           <BaseIcon
-            icon={RightIcon}
+            icon={rightIcon}
             size={iconSizes[size]}
             color={iconColors[variant]}
           />

package/src/components/BaseButton.tsx

@@ -7,7 +7,7 @@ import {
   Pressable, Text, View, ActivityIndicator,
 } from '../hoc-components';
 import BaseIcon from './BaseIcon';
-import textColors from '../styles/text-colors';
+import { Color as ForegroundColor } from '../styles/foreground-colors';
 import { HeroIcon } from '../types/heroicons';
 
 interface ButtonProps extends PressableProps {
@@ -17,8 +17,8 @@ interface ButtonProps extends PressableProps {
   loading?: boolean;
   disabled?: boolean;
   destructive?: boolean;
-  LeftIcon?: HeroIcon | null;
-  RightIcon?: HeroIcon | null;
+  leftIcon?: HeroIcon | null;
+  rightIcon?: HeroIcon | null;
   countdownSecs?: number;
 }
 
@@ -29,8 +29,8 @@ function BaseButton({
   loading = false,
   disabled = false,
   destructive = false,
-  LeftIcon = null,
-  RightIcon = null,
+  leftIcon = null,
+  rightIcon = null,
   hitSlop = 6,
   countdownSecs = 0,
   ...props
@@ -156,11 +156,11 @@ function BaseButton({
     buttonState = 'disabled';
   }
 
-  const isIconOnly = !text && (LeftIcon || RightIcon);
+  const isIconOnly = !text && (leftIcon || rightIcon);
 
   const buttonStyles = clsx(
     'flex flex-row items-center justify-center',
-    isIconOnly ? iconOnlyClasses[size] : clsx('w-full', sizeClasses[size]),
+    isIconOnly ? iconOnlyClasses[size] : sizeClasses[size],
     containerClasses[variant][buttonState],
   );
 
@@ -172,29 +172,29 @@ function BaseButton({
 
   const iconColors = {
     primary: {
-      default: textColors['text-primary'].light,
-      disabled: textColors['text-disabled'].light,
-      loading: textColors['text-primary'].light,
+      default: 'fg-white',
+      disabled: 'fg-disabled',
+      loading: 'fg-white',
     },
     secondary: {
-      default: textColors['text-secondary'].light,
-      disabled: textColors['text-disabled'].light,
-      loading: textColors['text-secondary'].light,
+      default: 'fg-secondary',
+      disabled: 'fg-disabled',
+      loading: 'fg-secondary',
     },
     tertiary: {
-      default: textColors['text-tertiary'].light,
-      disabled: textColors['text-disabled'].light,
-      loading: textColors['text-tertiary'].light,
+      default: 'fg-tertiary',
+      disabled: 'fg-disabled',
+      loading: 'fg-tertiary',
     },
     'link-color': {
-      default: textColors['text-brand-tertiary'].light,
-      disabled: textColors['text-disabled'].light,
-      loading: textColors['text-brand-tertiary'].light,
+      default: 'fg-brand-primary',
+      disabled: 'fg-disabled',
+      loading: 'fg-brand-primary',
     },
     'link-gray': {
-      default: textColors['text-tertiary'].light,
-      disabled: textColors['text-disabled'].light,
-      loading: textColors['text-tertiary'].light,
+      default: 'fg-secondary',
+      disabled: 'fg-disabled',
+      loading: 'fg-secondary',
     },
   };
 
@@ -243,11 +243,11 @@ function BaseButton({
       {...props}
     >
       <View className={clsx('flex flex-row items-center justify-center', loading && 'opacity-0')}>
-        {LeftIcon && (
+        {leftIcon && (
           <BaseIcon
-            icon={LeftIcon}
+            icon={leftIcon}
             size={iconSizes[size]}
-            color={iconColors[variant][buttonState]}
+            color={iconColors[variant][buttonState] as ForegroundColor}
             className="mr-1.5"
           />
         )}
@@ -257,11 +257,11 @@ function BaseButton({
             {timer > 0 ? ` (${timer})` : ''}
           </Text>
         )}
-        {RightIcon && (
+        {rightIcon && (
           <BaseIcon
-            icon={RightIcon}
+            icon={rightIcon}
             size={iconSizes[size]}
-            color={iconColors[variant][buttonState]}
+            color={iconColors[variant][buttonState] as ForegroundColor}
             className="ml-1.5"
           />
         )}

package/src/components/BaseIcon.tsx

@@ -1,26 +1,40 @@
 import { styled } from 'nativewind';
 
-import { View } from '../hoc-components';
-import { HeroIcon } from '../types/heroicons';
+import foregroundColors, { Color as ForegroundColor } from '../styles/foreground-colors';
+import utilityColors, { Color as UtilityColor } from '../styles/utility-colors';
+import { HeroIcon, HeroIconProps } from '../types/heroicons';
 
-export interface BaseIconProps {
+type IconColor = ForegroundColor | UtilityColor;
+
+export interface BaseIconProps extends HeroIconProps {
   icon: HeroIcon;
-  size?: number;
-  color?: string;
+  size?: number | string;
+  color?: IconColor;
+  strokeWidth?: number;
+}
+
+function isForegroundColor(color: IconColor): color is ForegroundColor {
+  return Object.keys(foregroundColors).includes(color as string);
 }
 
 function BaseIcon({
   icon: Icon,
   size = 20,
-  color,
+  color = 'fg-primary',
+  strokeWidth = 1,
+  ...props
 }: BaseIconProps) {
+  const colorValue = isForegroundColor(color)
+    ? foregroundColors[color].light
+    : utilityColors[color as UtilityColor].light;
+
   return (
-    <View>
-      <Icon
-        size={size}
-        color={color}
-      />
-    </View>
+    <Icon
+      size={size}
+      color={colorValue}
+      strokeWidth={strokeWidth}
+      {...props}
+    />
   );
 }
 

package/src/components/BaseStackedList.tsx

@@ -109,7 +109,7 @@ function BaseStackedList<T>({
             variant="secondary"
             onPress={onPrevPage}
             disabled={!hasPrevPage}
-            LeftIcon={ArrowLeftIcon}
+            leftIcon={ArrowLeftIcon}
           />
 
           <Text className="text-sm font-medium text-secondary">
@@ -126,7 +126,7 @@ function BaseStackedList<T>({
             variant="secondary"
             onPress={onNextPage}
             disabled={!hasNextPage}
-            LeftIcon={ArrowRightIcon}
+            leftIcon={ArrowRightIcon}
           />
         </View>
       )}

package/src/components/index.ts

@@ -3,3 +3,4 @@ export { default as BaseBadge } from './BaseBadge';
 export { default as BaseSpinner } from './BaseSpinner';
 export { default as BaseStackedList } from './BaseStackedList';
 export { default as BaseIcon } from './BaseIcon';
+export { default as BaseAlert } from './BaseAlert';

package/src/preset.ts

@@ -2,6 +2,7 @@ import type { Config } from 'tailwindcss';
 
 import backgroundColors from './styles/background-colors';
 import borderColors from './styles/border-colors';
+import foregroundColors from './styles/foreground-colors';
 import textColors from './styles/text-colors';
 
 type SemanticColorObject = Record<string, { light: string; dark?: string }>;
@@ -26,6 +27,9 @@ const preset: Config = {
       backgroundColor: mapLightColors(backgroundColors, 'bg'),
       textColor: mapLightColors(textColors, 'text'),
       borderColor: mapLightColors(borderColors, 'border'),
+      colors: {
+        ...mapLightColors(foregroundColors, 'fg'),
+      },
     },
   },
   plugins: [],

package/src/styles/background-colors.ts

@@ -138,7 +138,7 @@ const backgroundColors: BackgroundColorsType = {
 };
 
 Object.entries(utilityColors).forEach(([key, value]) => {
-  backgroundColors[`bg-utility-${key}`] = {
+  backgroundColors[`bg-${key}`] = {
     light: value.light,
     dark: value.dark,
   };

package/src/styles/border-colors.ts

@@ -54,7 +54,7 @@ const borderColors: BorderColorsType = {
 };
 
 Object.entries(utilityColors).forEach(([key, value]) => {
-  borderColors[`border-utility-${key}`] = {
+  borderColors[`border-${key}`] = {
     light: value.light,
     dark: value.dark,
   };

package/src/styles/foreground-colors.ts

@@ -1,5 +1,24 @@
 import colors from './colors';
 
+export type Color =
+  | 'fg-primary'
+  | 'fg-secondary'
+  | 'fg-tertiary'
+  | 'fg-quaternary'
+  | 'fg-white'
+  | 'fg-disabled'
+  | 'fg-disabled_subtle'
+  | 'fg-brand-primary'
+  | 'fg-brand-primary_alt'
+  | 'fg-brand-secondary'
+  | 'fg-brand-secondary_alt'
+  | 'fg-error-primary'
+  | 'fg-error-secondary'
+  | 'fg-warning-primary'
+  | 'fg-warning-secondary'
+  | 'fg-success-primary'
+  | 'fg-success-secondary';
+
 export default {
   'fg-primary': {
     light: colors.gray_light['900'],
@@ -9,26 +28,14 @@ export default {
     light: colors.gray_light['700'],
     dark: colors.gray_dark['300'],
   },
-  'fg-secondary_hover': {
-    light: colors.gray_light['800'],
-    dark: colors.gray_dark['200'],
-  },
   'fg-tertiary': {
     light: colors.gray_light['600'],
     dark: colors.gray_dark['400'],
   },
-  'fg-tertiary_hover': {
-    light: colors.gray_light['700'],
-    dark: colors.gray_dark['300'],
-  },
   'fg-quaternary': {
     light: colors.gray_light['400'],
     dark: colors.gray_dark['600'],
   },
-  'fg-quaternary_hover': {
-    light: colors.gray_light['500'],
-    dark: colors.gray_dark['500'],
-  },
   'fg-white': {
     light: colors.base.white,
     dark: colors.base.white,

package/src/styles/text-colors.ts

@@ -118,7 +118,7 @@ const textColors: TextColorsType = {
 };
 
 Object.entries(utilityColors).forEach(([key, value]) => {
-  textColors[`text-utility-${key}`] = {
+  textColors[`text-${key}`] = {
     light: value.light,
     dark: value.dark,
   };