@xetwa/design-system 1.0.49 → 1.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/Chip/Chip.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Pressable, StyleSheet, Animated } from 'react-native';
+import { Pressable, StyleSheet, Animated, View } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { Typography } from '../../Typography/Typography';
 import { useResponsive } from '../../../hooks/useResponsive';
@@ -8,6 +8,8 @@ import { theme } from '../../../styles/theme';
 export interface ChipProps {
   /** Texto a ser exibido no chip */
   label: string;
+  /** Elemento extra à esquerda (ex: ícone, flag) */
+  leftElement?: React.ReactNode;
   /** Função a executar ao pressionar */
   onPress?: () => void;
   /** Tamanho do chip (afeta paddings e fonte) */
@@ -30,6 +32,7 @@ export interface ChipProps {
  */
 export const Chip = ({
   label,
+  leftElement,
   onPress,
   size = 'md',
   backgroundColor = theme.colors.white,
@@ -104,6 +107,7 @@ export const Chip = ({
           style,
         ]}
       >
+        {leftElement && <View style={{ marginRight: 6 }}>{leftElement}</View>}
         <Typography variant={typographyVariant} color={textColor} style={{ textAlign: 'center' }}>
           {label}
         </Typography>

package/src/components/DataDisplay/CircularProgress/CircularProgress.stories.tsx

@@ -0,0 +1,67 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View } from 'react-native';
+import { CircularProgress } from './CircularProgress';
+import { Typography } from '../../Typography/Typography';
+
+const meta = {
+  title: 'Components/DataDisplay/CircularProgress',
+  component: CircularProgress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'O **CircularProgress** exibe o progresso de uma determinada métrica num formato circular (usando SVG). Permite configurar cores, espessura da linha e incluir texto ou filhos personalizados no centro.\n\n### Exemplo de Uso\n```tsx\n<CircularProgress progress={50} size={120} strokeWidth={12} text="50%" />\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    progress: { control: { type: 'range', min: 0, max: 100 } },
+    size: { control: 'number' },
+    strokeWidth: { control: 'number' },
+    color: { control: 'color' },
+    trackColor: { control: 'color' },
+    text: { control: 'text' },
+  },
+} satisfies Meta<typeof CircularProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    progress: 45,
+    size: 100,
+    strokeWidth: 10,
+    text: '45%',
+  },
+};
+
+export const CustomTypography: Story = {
+  args: {
+    progress: 75,
+    size: 140,
+    strokeWidth: 12,
+  },
+  render: (args) => (
+    <CircularProgress {...args}>
+      <View style={{ alignItems: 'center' }}>
+        <Typography variant="h2">75%</Typography>
+        <Typography variant="small" color="#9a8478">Concluído</Typography>
+      </View>
+    </CircularProgress>
+  ),
+};
+
+export const Sizes: Story = {
+  args: { progress: 30 },
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 20, alignItems: 'center' }}>
+      <CircularProgress progress={15} size={50} strokeWidth={6} text="15%" />
+      <CircularProgress progress={30} size={80} strokeWidth={8} text="30%" />
+      <CircularProgress progress={85} size={120} strokeWidth={12} text="85%" />
+    </View>
+  ),
+};

package/src/components/DataDisplay/CircularProgress/CircularProgress.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+
+export interface CircularProgressProps {
+  /** O valor do progresso (0 a 100) */
+  progress: number;
+  /** Tamanho total (largura/altura) do círculo */
+  size?: number;
+  /** Grossura da linha */
+  strokeWidth?: number;
+  /** Cor da linha de progresso */
+  color?: string;
+  /** Cor da linha de fundo (track) */
+  trackColor?: string;
+  /** Texto opcional para aparecer no centro */
+  text?: string;
+  /** Permite customizar o conteúdo central, sobrepõe a prop text */
+  children?: React.ReactNode;
+}
+
+export const CircularProgress = ({
+  progress,
+  size = 100,
+  strokeWidth = 10,
+  color = theme.colors.primary,
+  trackColor = theme.colors.primaryLight,
+  text,
+  children,
+}: CircularProgressProps) => {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  // Limita o progresso entre 0 e 100
+  const safeProgress = Math.min(Math.max(progress, 0), 100);
+  const strokeDashoffset = circumference - (safeProgress / 100) * circumference;
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      <Svg width={size} height={size} style={styles.svg}>
+        {/* Fundo do Progresso (Track) */}
+        <Circle
+          stroke={trackColor}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+        {/* Linha de Progresso */}
+        <Circle
+          stroke={color}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+        />
+      </Svg>
+
+      {/* Conteúdo Central */}
+      <View style={styles.contentContainer}>
+        {children ? (
+          children
+        ) : text ? (
+          <Typography variant="h3" color={theme.colors.brown[800]}>
+            {text}
+          </Typography>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  svg: {
+    transform: [{ rotate: '-90deg' }],
+  },
+  contentContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/DataDisplay/ProgressBar/ProgressBar.tsx

@@ -53,7 +53,7 @@ export const ProgressBar = ({
   }, [progress, animatedProgress]);
 
   const sizeStyles = {
-    xs: { height: 8, borderRadius: 5 },
+    xs: { height: 8, borderRadius: 4 },
     sm: { height: 12, borderRadius: 7 },
     md: { height: 16, borderRadius: 9 },
   }[size === 'lg' ? 'md' : size] || { height: 16, borderRadius: 9 };

package/src/components/Headers/CountryHeader/CountryHeader.tsx

@@ -1,4 +1,5 @@
-import { View, StyleSheet } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
 import type { ViewStyle } from 'react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
 import { getCountryTheme } from '../../../styles/countryThemes';
@@ -27,6 +28,8 @@ export interface CountryHeaderProps {
    * O developer deve passar o \`insets.top\` gerado pelo \`react-native-safe-area-context\`.
    */
   safeAreaTop?: number;
+  /** Se deve ocultar a barra de progresso com animação */
+  hideProgressBar?: boolean;
   /** Estilos customizados opcionais para o container principal */
   style?: ViewStyle | ViewStyle[];
 }
@@ -40,11 +43,23 @@ export const CountryHeader = ({
   progressSegments = 4,
   onBackPress,
   safeAreaTop = 0,
+  hideProgressBar = false,
   style,
 }: CountryHeaderProps) => {
   const { scale, scaleText } = useResponsive();
   const countryTheme = getCountryTheme(countryCode);
 
+  const progressAnim = useRef(new Animated.Value(hideProgressBar ? 0 : 1)).current;
+
+  useEffect(() => {
+    Animated.timing(progressAnim, {
+      toValue: hideProgressBar ? 0 : 1,
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [hideProgressBar, progressAnim]);
+
   return (
     <View style={[styles.container, { backgroundColor: countryTheme.bg }, style]}>
       {/* Círculo decorativo de fundo */}
@@ -87,13 +102,24 @@ export const CountryHeader = ({
         </View>
 
         {/* Progress Bar */}
-        <ProgressBar
-          progress={progress}
-          segments={progressSegments}
-          size="sm"
-          fillColor={countryTheme.progressFill}
-          trackColor={countryTheme.progressTrack}
-        />
+        <Animated.View
+          style={{
+            opacity: progressAnim,
+            height: progressAnim.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, 12],
+            }),
+            overflow: 'hidden',
+          }}
+        >
+          <ProgressBar
+            progress={progress}
+            segments={progressSegments}
+            size="sm"
+            fillColor={countryTheme.progressFill}
+            trackColor={countryTheme.progressTrack}
+          />
+        </Animated.View>
       </View>
     </View>
   );

package/src/components/Headers/RouteHeader/RouteHeader.tsx

@@ -202,7 +202,7 @@ export const RouteHeader = ({
       <ProgressBar
         progress={progress}
         segments={segments}
-        size="sm"
+        size="xs"
         variant="default" // Usa a cor primária (laranja)
         trackColor={theme.colors.brown[100]} // Fundo da barra um pouco mais escuro para ser visível
       />

package/src/index.ts

@@ -22,6 +22,7 @@ export * from './components/Cards/TeacherCard/TeacherCard';
 export * from './components/Charts/WeeklyProgressChart';
 export * from './components/DataDisplay/Avatar/Avatar';
 export * from './components/DataDisplay/Badge/Badge';
+export * from './components/DataDisplay/CircularProgress/CircularProgress';
 export * from './components/DataDisplay/Flag/Flag';
 export * from './components/DataDisplay/InstructionBubble/InstructionBubble';
 export * from './components/DataDisplay/LevelBadge/LevelBadge';

package/src/utils/iconMap.ts

@@ -1,4 +1,4 @@
-import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book, Mic, Home, Compass, GraduationCap, FolderOpen, User, ShoppingCart, FileText, Wallet, Bell, Globe } from 'lucide-react-native';
+import { Play, Volume2, Volume1, ArrowRight, X, Check, ChevronRight, ChevronLeft, Info, AlertTriangle, Book, Mic, Home, Compass, GraduationCap, FolderOpen, User, ShoppingCart, FileText, Wallet, Bell, Globe, Shield, Settings, CheckCheck, Users, ShieldAlert, Plus, Lock, MapPin, Clock, Smartphone } from 'lucide-react-native';
 
 /**
  * Para evitar que o Vite e o Metro (React Native) tentem empacotar os 1400+ ícones 
@@ -31,4 +31,14 @@ export const IconMap: Record<string, any> = {
   Wallet,
   Bell,
   Globe,
+  Shield,
+  Settings,
+  CheckCheck,
+  Users,
+  ShieldAlert,
+  Plus,
+  Lock,
+  MapPin,
+  Clock,
+  Smartphone,
 };