@xetwa/design-system 1.0.2

package/src/components/Charts/WeeklyProgressChart/WeeklyProgressChart.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export interface DailyProgress {
+  dayLabel: string;
+  value: number;
+  isCurrentDay?: boolean;
+}
+
+export interface WeeklyProgressChartProps {
+  title: string;
+  subtitle?: string;
+  data: DailyProgress[];
+  maxHeight?: number;
+  /** Size variant to automatically adjust dimensions */
+  size?: 'sm' | 'md' | 'lg';
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const WeeklyProgressChart = ({
+  title,
+  subtitle,
+  data,
+  maxHeight,
+  size = 'md',
+  style,
+}: WeeklyProgressChartProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  // Compute dimensions based on size variant
+  let defaultMaxHeight = 80;
+  let barWidth = 24;
+  let titleFontSize = 14;
+  let labelFontSize = 12;
+
+  if (size === 'sm') {
+    defaultMaxHeight = 50;
+    barWidth = 16;
+    titleFontSize = 12;
+    labelFontSize = 10;
+  } else if (size === 'lg') {
+    defaultMaxHeight = 110;
+    barWidth = 32;
+    titleFontSize = 16;
+    labelFontSize = 14;
+  }
+
+  const finalMaxHeight = maxHeight ?? defaultMaxHeight;
+
+
+  // Animation value from 0 to 1
+  const animValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    // Reset and animate on mount or data change
+    animValue.setValue(0);
+    Animated.timing(animValue, {
+      toValue: 1,
+      duration: 600,
+      easing: (value) => {
+        // Simple ease-out cubic
+        return 1 - Math.pow(1 - value, 3);
+      },
+      useNativeDriver: false, // Cannot use native driver for height/layout animations easily
+    }).start();
+  }, [animValue, data]);
+
+  // Find max value in data to scale bars relative to the highest value.
+  // If all values are 0, prevent division by zero by setting a default max of 1.
+  const maxValue = Math.max(...data.map(d => d.value), 1);
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Header / Title */}
+      <View style={styles.header}>
+        <Typography style={[styles.title, { fontSize: scaleText(titleFontSize) }]}>
+          {title.toUpperCase()}
+          {subtitle ? ` · ${subtitle.toUpperCase()}` : ''}
+        </Typography>
+      </View>
+
+      {/* Chart Area */}
+      <View style={styles.chartContainer}>
+        {data.map((item, index) => {
+          // Calculate the target height for this specific bar
+          const targetHeight = (item.value / maxValue) * scale(finalMaxHeight);
+
+          // Interpolate the animation value to the target height
+          const animatedHeight = animValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, targetHeight],
+          });
+
+          const isHighlighted = item.isCurrentDay;
+
+          // Using an opacity on primary to match the light peach/orange color
+          const barColor = isHighlighted
+            ? theme.colors.primary
+            : 'rgba(242, 151, 75, 0.35)'; // Light peach tone
+
+          const labelColor = isHighlighted
+            ? theme.colors.brown[800]
+            : theme.colors.brown[500];
+
+          return (
+            <View key={`bar-${index}`} style={styles.barWrapper}>
+              <View style={[styles.barTrack, { height: scale(finalMaxHeight) }]}>
+                <Animated.View
+                  style={[
+                    styles.barFill,
+                    {
+                      height: animatedHeight,
+                      backgroundColor: barColor,
+                      width: scale(barWidth),
+                      borderRadius: scale(8),
+                    }
+                  ]}
+                />
+              </View>
+              <Typography
+                style={[
+                  styles.dayLabel,
+                  {
+                    color: labelColor,
+                    fontSize: scaleText(labelFontSize),
+
+                    marginTop: scale(12),
+                  }
+                ]}
+              >
+                {item.dayLabel}
+              </Typography>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+    paddingVertical: 16,
+  },
+  header: {
+    marginBottom: 24,
+  },
+  title: {
+
+    color: theme.colors.brown[500],
+
+    letterSpacing: 0.5,
+  },
+  chartContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  barWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  barTrack: {
+    justifyContent: 'flex-end', // Aligns the bar to the bottom
+  },
+  barFill: {
+    // animated styles applied inline
+  },
+  dayLabel: {
+
+  },
+});

package/src/components/Charts/WeeklyProgressChart/index.ts

@@ -0,0 +1 @@
+export * from './WeeklyProgressChart';

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

@@ -0,0 +1,85 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { Avatar } from './Avatar';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/DataDisplay/Avatar',
+  component: Avatar,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **Avatar** é utilizado para representar utilizadores ou professores.\n\nPossui fallback automático: tenta carregar a imagem `src`. Se não existir ou der erro, mostra as `initials`. Se nem iniciais houver, mostra um ícone genérico de utilizador.\n\n### Exemplo de Uso\n```tsx\n<Avatar \n  src="https://exemplo.com/foto.jpg"\n  initials="AB"\n  size="lg"\n  variant="circle"\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    variant: { control: 'radio', options: ['circle', 'square'] },
+    src: { control: 'text' },
+    initials: { control: 'text' },
+    color: { control: 'color' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, backgroundColor: theme.colors.cream, alignItems: 'center' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const DefaultCircle: Story = {
+  args: {
+    size: 'md',
+    variant: 'circle',
+    initials: 'V',
+  },
+};
+
+export const SquareVariant: Story = {
+  args: {
+    size: 'md',
+    variant: 'square',
+    initials: 'C',
+    color: theme.colors.brown[800],
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    size: 'lg',
+    variant: 'circle',
+    src: 'https://i.pravatar.cc/150?img=68',
+  },
+};
+
+export const AllSizesCircle: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+      <Avatar size="xs" initials="xs" />
+      <Avatar size="sm" initials="sm" />
+      <Avatar size="md" initials="md" />
+      <Avatar size="lg" initials="lg" />
+      <Avatar size="xl" initials="xl" />
+    </View>
+  ),
+};
+
+export const AllSizesSquare: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+      <Avatar size="xs" variant="square" initials="xs" color={theme.colors.success} />
+      <Avatar size="sm" variant="square" initials="sm" color={theme.colors.success} />
+      <Avatar size="md" variant="square" initials="md" color={theme.colors.success} />
+      <Avatar size="lg" variant="square" initials="lg" color={theme.colors.success} />
+      <Avatar size="xl" variant="square" initials="xl" color={theme.colors.success} />
+    </View>
+  ),
+};

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -0,0 +1,118 @@
+
+import { View, StyleSheet, Image } from 'react-native';
+import type { ViewStyle, ImageSourcePropType } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarVariant = 'circle' | 'square';
+
+/**
+ * Componente Avatar para exibir imagens de perfil, iniciais do utilizador ou ícones de fallback.
+ */
+export interface AvatarProps {
+  /** Fonte da imagem (URI remoto ou require local). */
+  src?: string | ImageSourcePropType;
+  /** Iniciais a mostrar caso não exista imagem (ex: 'WS'). */
+  initials?: string;
+  /** Tamanho predefinido do avatar. */
+  size?: AvatarSize;
+  /** O formato do avatar (circular ou com cantos arredondados). */
+  variant?: AvatarVariant;
+  /** Cor de fundo para o fallback de iniciais. */
+  color?: string;
+  /** Estilos adicionais para o contentor. */
+  style?: ViewStyle | ViewStyle[];
+  /** Função disparada ao clicar no avatar. */
+  onPress?: () => void;
+}
+
+const SIZE_MAP: Record<AvatarSize, number> = {
+  xs: 28,
+  sm: 36,
+  md: 48,
+  lg: 60,
+  xl: 80,
+};
+
+const SQUARE_RADIUS_MAP: Record<AvatarSize, number> = {
+  xs: 8,
+  sm: 10,
+  md: 14,
+  lg: 18,
+  xl: 22,
+};
+
+const FONT_SIZE_MAP: Record<AvatarSize, number> = {
+  xs: 12,
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+};
+
+export const Avatar = ({
+  size = 'md',
+  variant = 'circle',
+  src,
+  initials,
+  color = theme.colors.primary,
+  style,
+}: AvatarProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  const pxSize = scale(SIZE_MAP[size]);
+  const borderRadius = variant === 'circle'
+    ? pxSize / 2
+    : scale(SQUARE_RADIUS_MAP[size]);
+
+  const fontSize = scaleText(FONT_SIZE_MAP[size]);
+  const lineHeight = fontSize * 1.2;
+
+  const containerStyles = [
+    styles.container,
+    {
+      width: pxSize,
+      height: pxSize,
+      borderRadius,
+      backgroundColor: src ? 'transparent' : color,
+    },
+    style,
+  ];
+
+  if (src) {
+    return (
+      <View style={containerStyles}>
+        <Image
+          source={typeof src === 'string' ? { uri: src } : src}
+          style={{ width: pxSize, height: pxSize, borderRadius }}
+          resizeMode="cover"
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={containerStyles}>
+      {initials ? (
+        <Typography style={[styles.text, { fontSize, lineHeight }]}>
+          {initials}
+        </Typography>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  text: {
+
+    color: theme.colors.white,
+    textAlign: 'center',
+  },
+});

package/src/components/DataDisplay/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

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

@@ -0,0 +1,62 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Components/DataDisplay/Badge',
+  component: Badge,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **Badge** é utilizado para mostrar pequenas quantidades numéricas (ex: notificações), etiquetas curtas, ou pequenos ícones de status.\n\n### Exemplo de Uso\n```tsx\n<Badge \n  content="3"\n  variant="error"\n  size="md"\n  outline={true}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'radio', options: ['neutro', 'primary', 'success', 'error'] },
+    size: { control: 'radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    content: { control: 'text' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, flexDirection: 'row', gap: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: { content: '3', variant: 'primary', size: 'sm' },
+};
+
+export const Variants: Story = {
+  args: { content: '' },
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 10 }}>
+      <Badge content="3" variant="primary" />
+      <Badge content="✓" variant="success" />
+      <Badge content="!" variant="error" />
+      <Badge content="12" variant="neutro" />
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  args: { content: '' },
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>
+      <Badge content="1" size="xs" />
+      <Badge content="2" size="sm" />
+      <Badge content="3" size="md" />
+      <Badge content="4" size="lg" />
+      <Badge content="5" size="xl" />
+    </View>
+  ),
+};

package/src/components/DataDisplay/Badge/Badge.tsx

@@ -0,0 +1,146 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import type { ReactNode } from 'react';
+import { Typography } from '../../Typography/Typography';
+
+export type BadgeVariant = 'neutro' | 'primary' | 'success' | 'error' | 'disabled';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Distintivo (Badge) usado para exibir notificações, números ou pequenos ícones.
+ */
+export interface BadgeProps {
+  /** Conteúdo a exibir dentro do badge (texto, número, ou ícone). */
+  content?: string | number | ReactNode;
+  /** Variante de cor do badge. */
+  variant?: BadgeVariant;
+  /** Tamanho predefinido. */
+  size?: BadgeSize;
+  /** Estilização extra para o componente. */
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const Badge = ({
+  content,
+  variant = 'primary',
+  size = 'sm',
+  style,
+}: BadgeProps) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'success':
+        return {
+          backgroundColor: theme.colors.success,
+          color: theme.colors.white,
+          borderWidth: 0,
+          borderColor: 'transparent',
+        };
+      case 'error':
+        return {
+          backgroundColor: theme.colors.error,
+          color: theme.colors.white,
+          borderWidth: 0,
+          borderColor: 'transparent',
+        };
+      case 'disabled':
+        return {
+          backgroundColor: '#ebdcd5',
+          color: theme.colors.white,
+          borderWidth: 0,
+          borderColor: 'transparent',
+        };
+      case 'neutro':
+        return {
+          backgroundColor: theme.colors.brown[50],
+          color: theme.colors.brown[800],
+          borderWidth: 1,
+          borderColor: theme.colors.brown[100],
+        };
+      case 'primary':
+      default:
+        return {
+          backgroundColor: theme.colors.primary,
+          color: theme.colors.white,
+          borderWidth: 0,
+          borderColor: 'transparent',
+        };
+    }
+  };
+
+  const vStyles = getVariantStyles();
+
+  return (
+    <View style={[
+      styles.container,
+      size === 'xs' ? styles.sizeXs : size === 'sm' ? styles.sizeSm : size === 'md' ? styles.sizeMd : size === 'lg' ? styles.sizeLg : size === 'xl' ? styles.sizeXl : styles.sizeXxl,
+      { backgroundColor: vStyles.backgroundColor, borderColor: vStyles.borderColor, borderWidth: vStyles.borderWidth },
+      style
+    ]}>
+      {typeof content === 'string' || typeof content === 'number' ? (
+        <Typography style={[
+          styles.text,
+          size === 'xs' ? styles.textXs : size === 'sm' ? styles.textSm : size === 'md' ? styles.textMd : size === 'lg' ? styles.textLg : size === 'xl' ? styles.textXl : styles.textXxl,
+          { color: vStyles.color }
+        ]}>
+          {content}
+        </Typography>
+      ) : (
+        content
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 999,
+  },
+  sizeXs: {
+    width: 18,
+    height: 18,
+  },
+  sizeSm: {
+    width: 22,
+    height: 22,
+  },
+  sizeMd: {
+    width: 26,
+    height: 26,
+  },
+  sizeLg: {
+    width: 30,
+    height: 30,
+  },
+  sizeXl: {
+    width: 34,
+    height: 34,
+  },
+  sizeXxl: {
+    width: 44,
+    height: 44,
+  },
+  text: {
+
+  },
+  textXs: {
+    fontSize: 9,
+  },
+  textSm: {
+    fontSize: 10,
+  },
+  textMd: {
+    fontSize: 12,
+  },
+  textLg: {
+    fontSize: 14,
+  },
+  textXl: {
+    fontSize: 16,
+  },
+  textXxl: {
+    fontSize: 18,
+  },
+});

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

@@ -0,0 +1,98 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { Flag } from './Flag';
+import { Typography } from '../../Typography/Typography';
+
+const countries = [
+  { code: 'FR', name: 'França' },
+  { code: 'BE', name: 'Bélgica' },
+  { code: 'CH', name: 'Suíça' },
+  { code: 'LU', name: 'Luxemburgo' },
+  { code: 'MC', name: 'Mónaco' },
+  { code: 'CA', name: 'Canadá' },
+  { code: 'CI', name: "Côte d'Ivoire" },
+  { code: 'SN', name: 'Senegal' },
+  { code: 'CM', name: 'Camarões' },
+  { code: 'CD', name: 'RD Congo' },
+  { code: 'MG', name: 'Madagascar' },
+  { code: 'BF', name: 'Burkina Faso' },
+  { code: 'NE', name: 'Níger' },
+  { code: 'ML', name: 'Mali' },
+  { code: 'TD', name: 'Chade' },
+  { code: 'GN', name: 'Guiné' },
+  { code: 'RW', name: 'Ruanda' },
+  { code: 'BI', name: 'Burundi' },
+  { code: 'BJ', name: 'Benim' },
+  { code: 'TG', name: 'Togo' },
+  { code: 'CF', name: 'Rep. Centro-Africana' },
+  { code: 'CG', name: 'Congo' },
+  { code: 'GA', name: 'Gabão' },
+  { code: 'GQ', name: 'Guiné Equatorial' },
+  { code: 'DJ', name: 'Djibouti' },
+  { code: 'KM', name: 'Comores' },
+  { code: 'VU', name: 'Vanuatu' },
+  { code: 'SC', name: 'Seychelles' },
+  { code: 'HT', name: 'Haiti' },
+];
+
+const meta = {
+  title: 'Components/DataDisplay/Flag',
+  component: Flag,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'A **Flag** renderiza bandeiras SVG otimizadas com formato circular, dado o nome ou código de um país.\n\n### Exemplo de Uso\n```tsx\n<Flag \n  countryCode="França"\n  size={48}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    countryCode: {
+      control: 'select',
+      options: countries.map(c => c.code),
+    },
+    size: { control: 'number' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, backgroundColor: '#f5f0eb', alignItems: 'center' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const InteractiveFlag: Story = {
+  name: 'Seletor de Bandeiras (Dropdown)',
+  args: {
+    countryCode: 'FR',
+    size: 80,
+  },
+};
+
+export const Catalog: Story = {
+  name: 'Catálogo Completo (29 Países)',
+  args: {
+    countryCode: 'FR',
+    size: 40,
+  },
+  render: () => {
+    return (
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 20, justifyContent: 'center', maxWidth: 650 }}>
+        {countries.map((c) => (
+          <View key={c.code} style={{ alignItems: 'center', width: 90, gap: 6 }}>
+            <Flag countryCode={c.code} size={48} />
+            <Typography style={{ fontSize: 10, fontWeight: '700', color: '#51332d', textAlign: 'center' }}>
+              {c.name}
+            </Typography>
+          </View>
+        ))}
+      </View>
+    );
+  },
+};