@xetwa/design-system 1.0.2

package/src/components/Cards/PlanCard/PlanCard.tsx

@@ -0,0 +1,317 @@
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { BaseCard } from '../BaseCard/BaseCard';
+import { Check, X } from 'lucide-react-native';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+export type PlanCardTier = 'decouverte' | 'explorateur' | 'fluent';
+
+/**
+ * Propriedades para configurar o cartão de plano de assinatura.
+ */
+export interface PlanCardProps {
+  /** Categoria do plano. */
+  tier: PlanCardTier;
+  /** Rótulo customizado do nível (e.g. "DÉCOUVERTE"). */
+  tierLabel?: string;
+  /** Nome do plano. */
+  planName: string;
+  /** Valor a ser exibido. */
+  priceText: string;
+  /** Período do preço (e.g. "/mês"). */
+  pricePeriod?: string;
+  /** Lista de itens incluídos no plano. */
+  includedItems?: string[];
+  /** Lista de itens não incluídos no plano. */
+  excludedItems?: string[];
+  /** Define se o cartão deve exibir o badge de "mais popular". */
+  isPopular?: boolean;
+  /** Estilização customizada do container. */
+  style?: ViewStyle | ViewStyle[];
+  /** Variante de layout do cartão (completo ou miniatura). */
+  variant?: 'default' | 'mini';
+}
+
+export const PlanCard = ({
+  tier,
+  tierLabel,
+  planName,
+  priceText,
+  pricePeriod = '/mês',
+  includedItems = [],
+  excludedItems = [],
+  isPopular = false,
+  style,
+  variant = 'default',
+}: PlanCardProps) => {
+  const { scale, scaleText } = useResponsive();
+  const isMini = variant === 'mini';
+
+  // Determine container config based on plan tier
+  const getContainerConfig = () => {
+    switch (tier) {
+      case 'decouverte':
+        return {
+          borderWidth: 1.5,
+          borderColor: '#efe2d6',
+          backgroundColor: '#ffffff',
+          borderRadius: scale(18),
+          paddingVertical: scale(13),
+          paddingHorizontal: scale(14),
+          shadow: 'none' as const,
+          overflow: 'visible' as const,
+          flatShadow: false,
+        };
+      case 'explorateur':
+        return {
+          borderWidth: 2,
+          borderColor: '#f2974b',
+          backgroundColor: '#ffffff',
+          borderRadius: scale(18),
+          paddingVertical: scale(14),
+          paddingHorizontal: scale(15),
+          shadow: 'sm' as const,
+          overflow: 'visible' as const,
+          flatShadow: false,
+        };
+      case 'fluent':
+        return {
+          borderWidth: 0,
+          borderColor: 'transparent',
+          backgroundColor: '#51332d',
+          borderRadius: scale(18),
+          paddingVertical: scale(13),
+          paddingHorizontal: scale(14),
+          shadow: 'none' as const,
+          overflow: 'visible' as const,
+          flatShadow: true, // Uses border bottom for flat 3D shadow
+        };
+    }
+  };
+
+  const config = getContainerConfig();
+
+  // Resolve dynamic colors based on tier
+  const getDynamicColors = () => {
+    const isDark = tier === 'fluent';
+    if (isDark) {
+      return {
+        labelColor: '#f2974b',
+        titleColor: '#ffffff',
+        priceColor: '#fde9d5',
+        periodColor: '#cbb6a4',
+        itemTextColor: '#fde9d5',
+        checkColor: '#f2974b',
+        crossColor: '#c3b1a4',
+      };
+    }
+    return {
+      labelColor: tier === 'explorateur' ? '#cf7a30' : '#9a8478',
+      titleColor: '#51332d',
+      priceColor: tier === 'explorateur' ? '#f2974b' : '#51332d',
+      periodColor: '#9a8478',
+      itemTextColor: '#51332d',
+      checkColor: '#16915a',
+      crossColor: '#c3b1a4',
+    };
+  };
+
+  const colors = getDynamicColors();
+
+  return (
+    <View style={[styles.cardWrapper, { paddingTop: scale(10) }]}>
+      <BaseCard
+        borderWidth={config.borderWidth}
+        borderColor={config.borderColor}
+        backgroundColor={config.backgroundColor}
+        borderRadius={config.borderRadius}
+        paddingVertical={config.paddingVertical}
+        paddingHorizontal={config.paddingHorizontal}
+        shadow={config.shadow}
+        overflow={config.overflow}
+        style={[
+          config.flatShadow ? styles.fluentFlatShadow : null,
+          ...(Array.isArray(style) ? style : [style].filter(Boolean)),
+        ] as ViewStyle[]}
+      >
+        {/* Floating popular badge */}
+        {isPopular && (
+          <View style={[
+            styles.popularBadge,
+            {
+              top: scale(-10),
+              paddingVertical: scale(4),
+              paddingHorizontal: scale(12),
+              borderRadius: scale(20),
+            }
+          ]}>
+            <Typography style={[styles.popularBadgeText, { fontSize: scaleText(9), letterSpacing: scale(0.8) }]}>MAIS POPULAR</Typography>
+          </View>
+        )}
+
+        {isMini ? (
+          <View style={[styles.miniHeader, { marginTop: scale(8), marginBottom: scale(4) }]}>
+            <View style={styles.miniLeft}>
+              <Typography style={[styles.labelTier, { color: colors.labelColor, fontSize: scaleText(10), letterSpacing: scale(1.0) }]}>
+                {tierLabel || tier.toUpperCase()}
+              </Typography>
+              <Typography style={[styles.planName, { color: colors.titleColor, fontSize: scaleText(18), lineHeight: scaleText(20) }]}>
+                {planName}
+              </Typography>
+            </View>
+            <View style={styles.priceRow}>
+              <Typography style={[styles.priceText, { color: colors.priceColor, fontSize: scaleText(22) }]}>
+                {priceText}
+              </Typography>
+              <Typography style={[styles.periodText, { color: colors.periodColor, fontSize: scaleText(10), marginLeft: scale(2) }]}>
+                {pricePeriod}
+              </Typography>
+            </View>
+          </View>
+        ) : (
+          <View style={[styles.header, { gap: scale(4), marginTop: scale(8) }]}>
+            <Typography style={[styles.labelTier, { color: colors.labelColor, fontSize: scaleText(10), letterSpacing: scale(1.0) }]}>
+              {tierLabel || tier.toUpperCase()}
+            </Typography>
+            <Typography style={[styles.planName, { color: colors.titleColor, fontSize: scaleText(18), lineHeight: scaleText(20) }]}>
+              {planName}
+            </Typography>
+            <View style={styles.priceRow}>
+              <Typography style={[styles.priceText, { color: colors.priceColor, fontSize: scaleText(22) }]}>
+                {priceText}
+              </Typography>
+              <Typography style={[styles.periodText, { color: colors.periodColor, fontSize: scaleText(10), marginLeft: scale(2) }]}>
+                {pricePeriod}
+              </Typography>
+            </View>
+          </View>
+        )}
+
+        {!isMini && (
+          <>
+            <BaseCard.Divider 
+              color={tier === 'fluent' ? 'rgba(255, 255, 255, 0.15)' : '#efe2d6'} 
+              verticalMargin={scale(14)} 
+            />
+
+            {/* Feature List */}
+            <View style={[styles.featureList, { gap: scale(10), marginBottom: scale(16) }]}>
+              {includedItems.map((item, idx) => (
+                <View key={`inc-${idx}`} style={styles.featureRow}>
+                  <View style={[styles.iconBox, { width: scale(20) }]}>
+                    <Check stroke={colors.checkColor} strokeWidth={2.6} size={scale(14)} />
+                  </View>
+                  <Typography style={[styles.featureText, { color: colors.itemTextColor, fontSize: scaleText(12), lineHeight: scaleText(14) }]}>
+                    {item}
+                  </Typography>
+                </View>
+              ))}
+
+              {excludedItems.map((item, idx) => (
+                <View key={`exc-${idx}`} style={styles.featureRow}>
+                  <View style={[styles.iconBox, { width: scale(20) }]}>
+                    <X stroke={colors.crossColor} strokeWidth={2.4} size={scale(14)} />
+                  </View>
+                  <Typography style={[styles.featureText, { color: '#9a8478', textDecorationLine: 'line-through', fontSize: scaleText(12), lineHeight: scaleText(14) }]}>
+                    {item}
+                  </Typography>
+                </View>
+              ))}
+            </View>
+          </>
+        )}
+
+      </BaseCard>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardWrapper: {
+    position: 'relative',
+    paddingTop: 10, // Margin to accommodate the floating badge without clipping
+  },
+  popularBadge: {
+    position: 'absolute',
+    top: -10,
+    alignSelf: 'center',
+    backgroundColor: '#f2974b',
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    zIndex: 10,
+    ...theme.shadows.sm,
+  },
+  popularBadgeText: {
+
+    fontSize: 9,
+    letterSpacing: 0.8,
+    color: '#ffffff',
+    textTransform: 'uppercase',
+  },
+  fluentFlatShadow: {
+    borderBottomWidth: 4,
+    borderBottomColor: '#3a241f',
+  },
+  header: {
+    alignItems: 'center',
+    gap: 4,
+    marginTop: 8,
+  },
+  miniHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
+  miniLeft: {
+    alignItems: 'flex-start',
+    gap: 4,
+  },
+  labelTier: {
+
+    fontSize: 10,
+    letterSpacing: 1.0,
+    textTransform: 'uppercase',
+  },
+  planName: {
+
+    fontSize: 18,
+    lineHeight: 20,
+  },
+  priceRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    marginTop: 2,
+  },
+  priceText: {
+
+    fontSize: 22,
+  },
+  periodText: {
+
+    fontSize: 10,
+    marginLeft: 2,
+  },
+  featureList: {
+    gap: 10,
+    marginBottom: 16,
+  },
+  featureRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconBox: {
+    width: 20,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  featureText: {
+
+    fontSize: 12,
+    lineHeight: 14,
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,83 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { PricingCard } from './PricingCard';
+
+const meta = {
+  title: 'Components/Cards/PricingCard',
+  component: PricingCard,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **PricingCard** exibe opções de subscrição na paywall.\n\n### Exemplo de Uso\n```tsx\n<PricingCard \n  title="Pro"\n  price="9,99€"\n  period="/mês"\n  features={["Acesso ilimitado", "Professores nativos"]}\n  isHighlighted={true}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    priceValue: { control: 'text' },
+    pricePeriod: { control: 'text' },
+    badgeLabel: { control: 'text' },
+    selected: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 350, backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    title: 'Mensal',
+    subtitle: 'Flexível · cancela quando quiseres',
+    priceValue: '€12,99',
+    pricePeriod: '/mês',
+    selected: false,
+  },
+};
+
+export const SelectedWithBadge: Story = {
+  args: {
+    title: 'Anual',
+    subtitle: '€89/ano · faturado uma vez',
+    priceValue: '€7,42',
+    pricePeriod: '/mês',
+    badgeLabel: 'POUPA 40%',
+    selected: true,
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    title: '',
+    priceValue: '',
+    pricePeriod: '',
+  },
+  render: () => (
+    <View style={{ gap: 24 }}>
+      <PricingCard 
+        title="Anual" 
+        subtitle="€89/ano · faturado uma vez" 
+        priceValue="€7,42" 
+        pricePeriod="/mês" 
+        badgeLabel="POUPA 40%" 
+        selected 
+      />
+      <PricingCard 
+        title="Mensal" 
+        subtitle="Flexível · cancela quando quiseres" 
+        priceValue="€12,99" 
+        pricePeriod="/mês" 
+      />
+    </View>
+  ),
+};

package/src/components/Cards/PricingCard/PricingCard.tsx

@@ -0,0 +1,144 @@
+import { View, StyleSheet, Pressable } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+
+/**
+ * Cartão para apresentar os diferentes planos e preços de subscrição.
+ */
+export interface PricingCardProps {
+  /** Título do plano (ex: 'Pro'). */
+  title: string;
+  /** Subtítulo do plano. */
+  subtitle?: string;
+  /** Preço formatado (ex: '9,99€'). */
+  priceValue: string;
+  /** Período de faturação (ex: '/mês'). */
+  pricePeriod: string;
+  /** Label opcional para destaque. */
+  badgeLabel?: string;
+  /** Estado de seleção. */
+  selected?: boolean;
+  /** Função ao selecionar o plano. */
+  onPress?: () => void;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const PricingCard = ({
+  title,
+  subtitle,
+  priceValue,
+  pricePeriod,
+  badgeLabel,
+  selected = false,
+  onPress,
+  style,
+}: PricingCardProps) => {
+  const { scale, scaleText } = useResponsive();
+
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        selected ? styles.selectedContainer : styles.defaultContainer,
+        {
+          padding: scale(20),
+          borderRadius: scale(16),
+        },
+        style,
+      ]}
+      onPress={onPress}
+    >
+      {badgeLabel && (
+        <View style={[
+          styles.badgeWrapper,
+          {
+            top: scale(-12),
+            right: scale(20),
+            paddingHorizontal: scale(8),
+            paddingVertical: scale(4),
+            borderRadius: scale(8),
+          }
+        ]}>
+          <Typography style={[styles.badgeText, { fontSize: scaleText(10), letterSpacing: scale(0.5) }]}>{badgeLabel}</Typography>
+        </View>
+      )}
+      
+      <View style={styles.leftCol}>
+        <Typography style={[styles.title, { fontSize: scaleText(18), marginBottom: scale(4) }]}>{title}</Typography>
+        {subtitle && <Typography style={[styles.subtitle, { fontSize: scaleText(12) }]}>{subtitle}</Typography>}
+      </View>
+
+      <View style={[styles.rightCol, { marginLeft: scale(16) }]}>
+        <Typography style={[styles.priceValue, { fontSize: scaleText(22) }]}>{priceValue}</Typography>
+        <Typography style={[styles.pricePeriod, { fontSize: scaleText(12) }]}>{pricePeriod}</Typography>
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 20,
+    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.white,
+  },
+  badgeWrapper: {
+    position: 'absolute',
+    top: -12,
+    right: 20,
+    backgroundColor: theme.colors.primary,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  badgeText: {
+
+    fontSize: 10,
+    textTransform: 'uppercase',
+    color: theme.colors.white,
+    letterSpacing: 0.5,
+  },
+  leftCol: {
+    flex: 1,
+  },
+  rightCol: {
+    alignItems: 'flex-end',
+    marginLeft: 16,
+  },
+  title: {
+
+    fontSize: 18,
+    color: theme.colors.brown[800],
+    marginBottom: 4,
+  },
+  subtitle: {
+
+    fontSize: 12,
+    color: theme.colors.brown[500],
+  },
+  priceValue: {
+
+    fontSize: 22,
+    color: theme.colors.brown[800],
+  },
+  pricePeriod: {
+
+    fontSize: 12,
+    color: theme.colors.brown[500],
+  },
+});

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

@@ -0,0 +1,77 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { SelectionCard } from './SelectionCard';
+import { Plane, Briefcase, Star, GraduationCap } from 'lucide-react-native';
+import { theme } from '../../../styles/theme';
+
+const meta = {
+  title: 'Components/Cards/SelectionCard',
+  component: SelectionCard,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **SelectionCard** é utilizado nos inquéritos ou ecrãs de onboarding onde o utilizador precisa de selecionar uma resposta (ex: "Qual é a tua motivação?").\n\n### Exemplo de Uso\n```tsx\n<SelectionCard \n  title="Viagem"\n  description="Para as tuas próximas férias"\n  isSelected={true}\n  onPress={() => selecionar("Viagem")}\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    selected: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 350 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Default: Story = {
+  args: {
+    label: 'Viajar para França',
+    iconNode: <Plane size={24} color={theme.colors.brown[500]} />,
+    selected: false,
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    label: 'Trabalho e carreira',
+    iconNode: <Briefcase size={24} color={theme.colors.white} />,
+    selected: true,
+  },
+};
+
+export const Grid: Story = {
+  args: {
+    label: '',
+  },
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <SelectionCard 
+        label="Viajar para França" 
+        iconNode={<Plane size={24} color={theme.colors.white} />} 
+        selected 
+      />
+      <SelectionCard 
+        label="Trabalho e carreira" 
+        iconNode={<Briefcase size={24} color={theme.colors.brown[500]} />} 
+      />
+      <SelectionCard 
+        label="Cultura e diversão" 
+        iconNode={<Star size={24} color={theme.colors.brown[500]} />} 
+      />
+      <SelectionCard 
+        label="Estudos / exames" 
+        iconNode={<GraduationCap size={24} color={theme.colors.brown[500]} />} 
+      />
+    </View>
+  ),
+};