@xetwa/design-system 1.0.2

package/src/components/Cards/SelectionCard/SelectionCard.tsx

@@ -0,0 +1,111 @@
+import { View, StyleSheet, Pressable, Platform } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import type { ReactNode } from 'react';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Cartão genérico para selecionar opções simples, usado frequentemente em formulários de Onboarding.
+ */
+export interface SelectionCardProps {
+  /** Texto da opção. */
+  label: string;
+  /** Ícone ou elemento a renderizar do lado esquerdo. */
+  iconNode?: ReactNode;
+  /** Se a opção está selecionada. */
+  selected?: boolean;
+  /** Função disparada ao clicar. */
+  onPress?: () => void;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const SelectionCard = ({
+  label,
+  iconNode,
+  selected = false,
+  onPress,
+  style,
+}: SelectionCardProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        selected ? styles.selectedContainer : styles.defaultContainer,
+        {
+          padding: scale(16),
+          borderRadius: scale(16),
+        },
+        style,
+      ]}
+      onPress={onPress}
+    >
+      {iconNode && (
+        <View style={[
+          styles.iconBox,
+          selected ? styles.selectedIconBox : styles.defaultIconBox,
+          {
+            width: scale(44),
+            height: scale(44),
+            borderRadius: scale(12),
+            marginRight: scale(16),
+          }
+        ]}>
+          {iconNode}
+        </View>
+      )}
+      <Typography style={[styles.label, { fontSize: scaleText(16) }]}>{label}</Typography>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    width: '100%',
+  },
+  defaultContainer: {
+    borderColor: theme.colors.brown[100],
+    backgroundColor: theme.colors.white,
+  },
+  selectedContainer: {
+    borderColor: theme.colors.primary,
+    backgroundColor: theme.colors.primaryLight,
+    ...Platform.select({
+      web: { boxShadow: `0px 4px 0px rgba(242, 151, 75, 0.3)` },
+      default: {
+        shadowColor: theme.colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 0,
+        elevation: 0,
+      },
+    }),
+  },
+  iconBox: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  defaultIconBox: {
+    backgroundColor: theme.colors.brown[50],
+  },
+  selectedIconBox: {
+    backgroundColor: theme.colors.primary,
+  },
+  label: {
+
+    fontSize: 16,
+    color: theme.colors.brown[800],
+  },
+});

package/src/components/Cards/TeacherCard/TeacherCard.stories.tsx

@@ -0,0 +1,126 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { TeacherCard } from './TeacherCard';
+
+const meta = {
+  title: 'Components/Cards/TeacherCard',
+  component: TeacherCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **TeacherCard** é um dos componentes mais complexos e flexíveis do Design System.\n\n### Exemplo de Uso\n```tsx\n<TeacherCard \n  name="Maria Silva"\n  avatarInitials="MS"\n  rating={4.8}\n  classesCount={120}\n  durationText="45 min"\n  dateText="Hoje, 24 Jun"\n  timeText="14:00 - 14:45"\n  countryFlagName="br"\n  onPress={() => console.log("Clicou no cartão!")}\n  renderActionButton={() => (\n    <Button variant="primary" size="sm" onPress={() => {}}>\n      Marcar Aula\n    </Button>\n  )}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'text' },
+    avatarInitials: { control: 'text' },
+    avatarUrl: { control: 'text' },
+    
+    
+    rating: { control: 'number' },
+    classesCount: { control: 'number' },
+    location: { control: 'text' },
+    durationText: { control: 'text' },
+    countryFlagName: { control: 'text' },
+    dateText: { control: 'text' },
+    timeText: { control: 'text' },
+    isSelected: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    name: 'Prof. Camille',
+    avatarInitials: 'C',
+    
+    rating: 4.9,
+    durationText: '30 min',
+  },
+};
+
+export const Selected: Story = {
+  name: "Selecionado (Interactive)",
+  args: {
+    name: 'Prof. Camille',
+    avatarInitials: 'C',
+    
+    rating: 4.9,
+    durationText: '30 min',
+    isSelected: true,
+  },
+};
+
+export const Scheduled: Story = {
+  name: "Com Agendamento (Scheduled)",
+  args: {
+    name: 'Prof. Aïssa',
+    avatarInitials: 'A',
+    
+    location: 'Senegal',
+    
+    countryFlagName: 'Senegal',
+    dateText: 'Ter, 24 Mar',
+    timeText: '17:30 · 30min',
+  },
+};
+
+export const FullProfileInfo: Story = {
+  name: "Perfil Detalhado (Full Info)",
+  args: {
+    name: 'Prof. Aïssa',
+    avatarInitials: 'A',
+    rating: 4.9,
+    location: 'Dakar',
+    classesCount: 320,
+    durationText: '30 min',
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    name: '',
+  },
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <TeacherCard
+        name="Prof. Camille"
+        avatarInitials="C"
+        specialty="Conversação A1"
+        rating={4.9}
+        durationText="30 min"
+      />
+      <TeacherCard
+        name="Prof. Aïssa"
+        avatarInitials="A"
+        specialty="Conversação A1"
+        rating={4.9}
+        durationText="30 min"
+        isSelected
+      />
+      <TeacherCard
+        name="Prof. Aïssa"
+        avatarInitials="A"
+        specialty="Aula + teste"
+        location="Senegal"
+        level="B2"
+        countryFlagName="Senegal"
+        dateText="Ter, 24 Mar"
+        timeText="17:30 · 30min"
+      />
+    </View>
+  ),
+};

package/src/components/Cards/TeacherCard/TeacherCard.tsx

@@ -0,0 +1,236 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { BaseCard } from '../BaseCard/BaseCard';
+import { Flag } from '../../DataDisplay/Flag/Flag';
+import { Avatar } from '../../DataDisplay/Avatar/Avatar';
+import { Calendar, Clock } from 'lucide-react-native';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Cartão de apresentação de um Professor ou Curso.
+ * Suporta imagens, bandeiras, avaliações, botões de ação e rodapé de agendamento.
+ */
+export interface TeacherCardProps {
+  // Identidade
+  /** Nome principal a exibir no cartão. */
+  name: string;
+  /** Letras para o avatar, caso a imagem falhe (ex: 'AM'). */
+  avatarInitials: string;
+  /** URL remoto da fotografia do professor. */
+  avatarUrl?: string;
+  /** Especialidade do professor. */
+  specialty?: string;
+  /** Nível de ensino. */
+  level?: string;
+  
+  // Metadados
+  /** Etiqueta superior opcional (ex: 'Super Professor'). */
+  badgeText?: string;
+  /** Nota de avaliação (ex: 4.8). */
+  rating?: number;
+  /** Número de aulas lecionadas. */
+  classesCount?: number;
+  /** Localização (ex: 'Lisboa'). */
+  location?: string;
+  /** Texto livre a exibir ao lado da bandeira. */
+  durationText?: string;
+  /** Nome ou URL da bandeira. Em produção deverá mapear para um SVG real. */
+  countryFlagName?: string;
+
+  // Footer (Agendamento)
+  /** Texto à esquerda no rodapé (ex: data). O rodapé só aparece se houver dateText ou timeText. */
+  dateText?: string;
+  /** Texto à direita no rodapé (ex: hora). */
+  timeText?: string;
+
+  // Interação
+  /** Destaca visualmente o cartão com uma borda laranja quando ativo. */
+  isSelected?: boolean;
+  /** Callback ao clicar em qualquer parte do cartão. */
+  onPress?: () => void;
+  
+  // Ações Extra
+  /** Elemento customizado para renderizar o botão principal ("Marcar Aula" / "Ver Perfil"). */
+  renderActionButton?: () => React.ReactNode;
+  
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const TeacherCard = ({
+  name,
+  avatarInitials = 'P',
+  avatarUrl,
+  specialty,
+  level,
+  rating,
+  classesCount,
+  location,
+  durationText,
+  countryFlagName,
+  dateText,
+  timeText,
+  isSelected = false,
+  onPress,
+  style,
+}: TeacherCardProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  // Star character in text (as requested by spec: "★ em texto (não ícone)")
+  const renderDetailsLine = () => {
+    const parts: string[] = [];
+    if (specialty) parts.push(specialty);
+    if (location) parts.push(location);
+    if (rating !== undefined) parts.push(`★ ${rating}`);
+    if (classesCount !== undefined) parts.push(`${classesCount} aulas`);
+
+    return parts.join(' · ');
+  };
+
+  const hasFooter = !!(dateText || timeText);
+
+  return (
+    <BaseCard
+      onPress={onPress}
+      isSelected={isSelected}
+      paddingVertical={scale(12)}
+      paddingHorizontal={scale(14)}
+      style={[{ maxWidth: 400, width: '100%' }, style] as any}
+    >
+      <View style={styles.topRow}>
+        {/* Left Side: Avatar */}
+        <Avatar
+          variant="circle"
+          size="md"
+          src={avatarUrl}
+          initials={avatarInitials}
+        />
+
+        {/* Center: Details */}
+        <View style={[styles.infoCol, { marginLeft: scale(12) }]}>
+          <Typography style={[styles.nameText, { fontSize: scaleText(16), lineHeight: scaleText(18), marginBottom: scale(4) }]}>
+            {name}
+          </Typography>
+
+          <Typography style={[styles.detailsText, { fontSize: scaleText(12), lineHeight: scaleText(14) }]}>
+            {renderDetailsLine()}
+          </Typography>
+
+          {level && (
+            <Typography style={[styles.levelText, { fontSize: scaleText(12), lineHeight: scaleText(14), marginTop: scale(2) }]}>
+              {level}
+            </Typography>
+          )}
+        </View>
+
+        {/* Right Side: Optional Duration Badge or Flag */}
+        {countryFlagName ? (
+          <View style={[styles.flagContainer, { marginLeft: scale(12) }]}>
+            <Flag countryCode={countryFlagName} size={scale(28)} />
+          </View>
+        ) : (
+          durationText && (
+            <View style={[
+              styles.durationChip,
+              {
+                paddingVertical: scale(5),
+                paddingHorizontal: scale(10),
+                borderRadius: scale(9),
+                marginLeft: scale(12),
+              }
+            ]}>
+              <Typography style={[styles.durationText, { fontSize: scaleText(11) }]}>{durationText}</Typography>
+            </View>
+          )
+        )}
+      </View>
+
+      {/* Optional Divider & Scheduling Details */}
+      {hasFooter && (
+        <View>
+          <BaseCard.Divider verticalMargin={scale(12)} />
+
+          <View style={[styles.footerRow, { gap: scale(16) }]}>
+            {dateText && (
+              <View style={[styles.footerItem, { gap: scale(6) }]}>
+                <Calendar stroke="#cf7a30" strokeWidth={2.2} size={scale(15)} />
+                <Typography style={[styles.footerText, { fontSize: scaleText(13) }]}>{dateText}</Typography>
+              </View>
+            )}
+
+            {timeText && (
+              <View style={[styles.footerItem, { gap: scale(6) }]}>
+                <Clock stroke="#cf7a30" strokeWidth={2.2} size={scale(15)} />
+                <Typography style={[styles.footerText, { fontSize: scaleText(13) }]}>{timeText}</Typography>
+              </View>
+            )}
+          </View>
+        </View>
+      )}
+    </BaseCard>
+  );
+};
+
+const styles = StyleSheet.create({
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  infoCol: {
+    flex: 1,
+    marginLeft: 12,
+    justifyContent: 'center',
+  },
+  nameText: {
+
+    fontSize: 16,
+    color: '#51332d',
+    lineHeight: 18,
+    marginBottom: 4,
+  },
+  detailsText: {
+
+    fontSize: 12,
+    color: '#9a8478',
+    lineHeight: 14,
+  },
+  levelText: {
+
+    fontSize: 12,
+    color: '#9a8478',
+    lineHeight: 14,
+    marginTop: 2,
+  },
+  flagContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 12,
+  },
+  durationChip: {
+    backgroundColor: '#fef0e2',
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 9,
+    marginLeft: 12,
+  },
+  durationText: {
+
+    fontSize: 11,
+    color: '#cf7a30',
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  footerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  footerText: {
+
+    fontSize: 13,
+    color: '#51332d',
+  },
+});

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { WeeklyProgressChart } from './WeeklyProgressChart';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Charts/WeeklyProgressChart',
+  component: WeeklyProgressChart,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `O **WeeklyProgressChart** exibe um gráfico de barras animado para mostrar a atividade do utilizador (ex: XP) ao longo de uma semana.
+A barra do dia atual pode ser destacada usando \`isCurrentDay: true\`.
+Possui uma propriedade \`size\` ('sm', 'md', 'lg') para ajustar facilmente a escala do gráfico.
+`
+      }
+    }
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ width: '100%', maxWidth: 400, alignSelf: 'center', backgroundColor: theme.colors.white, padding: 24, borderRadius: 20 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+const mockData = [
+  { dayLabel: 'S', value: 180 },
+  { dayLabel: 'T', value: 250 },
+  { dayLabel: 'Q', value: 120 },
+  { dayLabel: 'Q', value: 220 },
+  { dayLabel: 'S', value: 320, isCurrentDay: true },
+  { dayLabel: 'S', value: 60 },
+  { dayLabel: 'D', value: 60 },
+];
+
+export const Default: Story = {
+  name: 'Medidor Padrão (Medium)',
+  args: {
+    title: 'ESTA SEMANA',
+    subtitle: '320 XP',
+    data: mockData,
+    size: 'md',
+  },
+};
+
+export const Small: Story = {
+  name: 'Tamanho Pequeno (Small)',
+  args: {
+    title: 'ESTA SEMANA',
+    subtitle: '320 XP',
+    data: mockData,
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  name: 'Tamanho Grande (Large)',
+  args: {
+    title: 'ESTA SEMANA',
+    subtitle: '320 XP',
+    data: mockData,
+    size: 'lg',
+  },
+};
+
+export const EmptyWeek: Story = {
+  name: 'Semana Vazia (Sem XP)',
+  args: {
+    title: 'ESTA SEMANA',
+    subtitle: '0 XP',
+    data: [
+      { dayLabel: 'S', value: 0 },
+      { dayLabel: 'T', value: 0 },
+      { dayLabel: 'Q', value: 0 },
+      { dayLabel: 'Q', value: 0 },
+      { dayLabel: 'S', value: 0, isCurrentDay: true },
+      { dayLabel: 'S', value: 0 },
+      { dayLabel: 'D', value: 0 },
+    ],
+    size: 'md',
+  },
+};