@grupalia/rn-ui-kit 0.0.41 → 0.2.0

package/src/components/BaseIcon.tsx

@@ -0,0 +1,41 @@
+import { styled } from 'nativewind';
+
+import foregroundColors, { Color as ForegroundColor } from '../styles/foreground-colors';
+import utilityColors, { Color as UtilityColor } from '../styles/utility-colors';
+import { HeroIcon, HeroIconProps } from '../types/heroicons';
+
+type IconColor = ForegroundColor | UtilityColor;
+
+export interface BaseIconProps extends HeroIconProps {
+  icon: HeroIcon;
+  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 = 'fg-primary',
+  strokeWidth = 1,
+  ...props
+}: BaseIconProps) {
+  const colorValue = isForegroundColor(color)
+    ? foregroundColors[color].light
+    : utilityColors[color as UtilityColor].light;
+
+  return (
+    <Icon
+      size={size}
+      color={colorValue}
+      strokeWidth={strokeWidth}
+      {...props}
+    />
+  );
+}
+
+export default styled(BaseIcon);

package/src/components/BaseSpinner.tsx

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+
+import { ActivityIndicator } from '../hoc-components';
+import colors from '../styles/colors';
+
+interface BaseSpinnerProps extends ComponentProps<typeof ActivityIndicator> {
+  size?: 'small' | 'large' | number;
+}
+
+export default function BaseSpinner({ size = 'large', ...props }: BaseSpinnerProps) {
+  return (
+    <ActivityIndicator
+      size={size}
+      color={colors.brand[600]}
+      {...props}
+    />
+  );
+}

package/src/components/BaseStackedList.tsx

@@ -0,0 +1,137 @@
+import { styled } from 'nativewind';
+import React, { ReactNode, useMemo } from 'react';
+import { ViewProps } from 'react-native';
+import { InboxIcon } from 'react-native-heroicons/outline';
+import { ArrowLeftIcon, ArrowRightIcon } from 'react-native-heroicons/solid';
+
+import { View, Text } from '../hoc-components';
+import BaseButton from './BaseButton';
+import BaseSpinner from './BaseSpinner';
+import colors from '../styles/colors';
+
+export interface BaseStackedListProps<T> {
+  itemsCount: number;
+  items: T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  onNextPage: () => void;
+  onPrevPage: () => void;
+  header?: ReactNode;
+  pageSize: number;
+  loading: boolean;
+  currentPage?: number;
+  keyExtractor?: (item: T, index: number) => string;
+  emptyStateDescription?: string;
+  minHeight?: number;
+}
+
+interface EmptyStateProps extends ViewProps {
+  description?: string;
+}
+
+function EmptyState({ description }: EmptyStateProps) {
+  return (
+    <View className="flex flex-col justify-center px-4 py-8">
+      <View className="h-12 w-12 items-center justify-center rounded-full bg-tertiary">
+        <InboxIcon
+          size={24}
+          color={colors.gray_light[500]}
+        />
+      </View>
+      <Text className="mt-4 text-base font-medium text-primary">No hay nada que mostrar</Text>
+      {description && (
+        <Text className="mt-2 text-sm text-tertiary">{description}</Text>
+      )}
+    </View>
+  );
+}
+
+function BaseStackedList<T>({
+  itemsCount,
+  items,
+  renderItem,
+  onNextPage,
+  onPrevPage,
+  header,
+  pageSize,
+  loading,
+  currentPage = 0,
+  keyExtractor,
+  emptyStateDescription,
+  minHeight = 0,
+}: BaseStackedListProps<T>) {
+  const totalPages = useMemo(() => Math.ceil(itemsCount / pageSize), [itemsCount, pageSize]);
+  const hasNextPage = currentPage < totalPages - 1;
+  const hasPrevPage = currentPage > 0;
+
+  const currentPageItems = useMemo(() => {
+    const startIndex = currentPage * pageSize;
+    const endIndex = startIndex + pageSize;
+    return items.slice(startIndex, endIndex);
+  }, [items, currentPage, pageSize]);
+
+  const isEmpty = items.length === 0 && !loading;
+  const hasItemsForCurrentPage = currentPageItems.length > pageSize * (currentPage + 1);
+
+  return (
+    <View className="flex flex-col rounded-xl border border-secondary bg-primary shadow-sm">
+      <View className="border-b border-secondary p-4">
+        {header}
+      </View>
+      {loading && !hasItemsForCurrentPage && (
+        <View
+          className="flex items-center justify-center py-12"
+          style={{ minHeight }}
+        >
+          <BaseSpinner />
+        </View>
+      )}
+      {!loading && isEmpty && <EmptyState description={emptyStateDescription} />}
+      {!loading && !isEmpty && (
+        <View
+          className="flex flex-col"
+          style={{ minHeight }}
+        >
+          {currentPageItems.map((item, index) => {
+            const itemKey = keyExtractor ? keyExtractor(item, index) : `item-${currentPage}-${index}`;
+            return (
+              <React.Fragment key={itemKey}>
+                {index > 0 && <View className="h-px w-full bg-gray-200" />}
+                {renderItem(item, index + (currentPage * pageSize))}
+              </React.Fragment>
+            );
+          })}
+        </View>
+      )}
+
+      {(hasNextPage || hasPrevPage) && items.length > 0 && (
+        <View className="flex flex-row items-center justify-between border-t border-secondary p-4">
+          <BaseButton
+            variant="secondary"
+            onPress={onPrevPage}
+            disabled={!hasPrevPage}
+            leftIcon={ArrowLeftIcon}
+          />
+
+          <Text className="text-sm font-medium text-secondary">
+            Página
+            {' '}
+            {currentPage + 1}
+            {' '}
+            de
+            {' '}
+            {totalPages}
+          </Text>
+
+          <BaseButton
+            variant="secondary"
+            onPress={onNextPage}
+            disabled={!hasNextPage}
+            leftIcon={ArrowRightIcon}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+export default styled(BaseStackedList);

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export { default as BaseButton } from './BaseButton';
+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.cjs

@@ -1,2 +1,2 @@
 // CommonJS wrapper for preset
-module.exports = require('../lib/commonjs/preset.js').default; 
+module.exports = require('../lib/commonjs/preset.js').default;

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 }>;
@@ -18,12 +19,17 @@ function mapLightColors(
 }
 
 const preset: Config = {
-  content: [],
+  content: [
+    './node_modules/@grupalia/rn-ui-kit/lib/module/components/**',
+  ],
   theme: {
     extend: {
       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,
   };