@xetwa/design-system 1.0.2

package/src/components/Cards/Passport/PassportViewer.tsx

@@ -0,0 +1,328 @@
+import { useRef, useState, useMemo } from 'react';
+import { View, StyleSheet, PanResponder, Platform, Animated } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { Typography } from '../../Typography/Typography';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { IconButton } from '../../Buttons/IconButton/IconButton';
+import { PassportCover } from './PassportCover';
+import { PassportIDPage, type PassportUserData } from './PassportIDPage';
+import { PassportStampPage, type PassportStampPageProps } from './PassportStampPage';
+
+export interface PassportViewerProps {
+  user: PassportUserData;
+  countries: Omit<PassportStampPageProps, 'stampRotation'>[];
+  onBack?: () => void;
+}
+
+const PASSPORT_ASPECT_RATIO = 1.4;
+
+export const PassportViewer = ({ user, countries, onBack }: PassportViewerProps) => {
+  const { scale, scaleText, width: windowWidthReactive } = useResponsive();
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const windowWidth = Platform.OS === 'web' ? Math.min(windowWidthReactive, 430) : windowWidthReactive;
+  const paddingHorizontal = scale(32);
+  const passportWidth = windowWidth - paddingHorizontal * 2;
+  const passportHeight = passportWidth * PASSPORT_ASPECT_RATIO;
+
+  const totalPages = 2 + countries.length;
+
+  const flipAnim = useRef(new Animated.Value(0)).current;
+  const isAnimating = useRef(false);
+
+  // Pre-calculate rotations for current page
+  const rotateForward = flipAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-90deg'],
+    extrapolate: 'clamp'
+  });
+
+  // Pre-calculate rotations for previous page
+  const rotateBackward = flipAnim.interpolate({
+    inputRange: [-1, 0],
+    outputRange: ['0deg', '-90deg'],
+    extrapolate: 'clamp'
+  });
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !isAnimating.current,
+      onMoveShouldSetPanResponder: (_, gestureState) => !isAnimating.current && Math.abs(gestureState.dx) > 10,
+      onPanResponderMove: (_, gestureState) => {
+        if (isAnimating.current) return;
+        let progress = -gestureState.dx / passportWidth;
+
+        if (activeIndex === 0 && progress < 0) progress = 0;
+        if (activeIndex === totalPages - 1 && progress > 0) progress = 0;
+
+        flipAnim.setValue(progress);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (isAnimating.current) return;
+        let progress = -gestureState.dx / passportWidth;
+        const velocity = -gestureState.vx;
+
+        let toValue = 0;
+        let nextIndex = activeIndex;
+
+        if (progress > 0.3 || velocity > 0.5) { // Flip forward
+          if (activeIndex < totalPages - 1) {
+            toValue = 1;
+            nextIndex = activeIndex + 1;
+          }
+        } else if (progress < -0.3 || velocity < -0.5) { // Flip backward
+          if (activeIndex > 0) {
+            toValue = -1;
+            nextIndex = activeIndex - 1;
+          }
+        }
+
+        if (toValue !== 0) {
+          isAnimating.current = true;
+          Animated.spring(flipAnim, {
+            toValue,
+            friction: 7,
+            tension: 30,
+            useNativeDriver: true
+          }).start(() => {
+            setActiveIndex(nextIndex);
+            flipAnim.setValue(0);
+            isAnimating.current = false;
+          });
+        } else {
+          // Snap back
+          Animated.spring(flipAnim, {
+            toValue: 0,
+            friction: 7,
+            tension: 40,
+            useNativeDriver: true
+          }).start();
+        }
+      }
+    })
+  ).current;
+
+  const flipTo = (direction: 'next' | 'prev') => {
+    if (isAnimating.current) return;
+
+    if (direction === 'next' && activeIndex < totalPages - 1) {
+      isAnimating.current = true;
+      Animated.spring(flipAnim, {
+        toValue: 1,
+        friction: 7,
+        tension: 30,
+        useNativeDriver: true
+      }).start(() => {
+        setActiveIndex(activeIndex + 1);
+        flipAnim.setValue(0);
+        isAnimating.current = false;
+      });
+    } else if (direction === 'prev' && activeIndex > 0) {
+      isAnimating.current = true;
+      Animated.spring(flipAnim, {
+        toValue: -1,
+        friction: 7,
+        tension: 30,
+        useNativeDriver: true
+      }).start(() => {
+        setActiveIndex(activeIndex - 1);
+        flipAnim.setValue(0);
+        isAnimating.current = false;
+      });
+    }
+  };
+
+  // Build array of page components
+  const pages = useMemo(() => {
+    const list = [
+      <PassportCover key="cover" />,
+      <PassportIDPage key="id" user={user} />
+    ];
+    countries.forEach((country, idx) => {
+      const rotation = ((idx * 13) % 20) - 10;
+      list.push(<PassportStampPage key={`country-${idx}`} {...country} stampRotation={rotation} />);
+    });
+    return list;
+  }, [user, countries]);
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.header, { padding: scale(24) }]}>
+        <View style={styles.headerLeft}>
+          <IconButton
+            iconName="ChevronLeft"
+            size="sm"
+            variant="secondary"
+            onPress={onBack}
+          />
+          <Typography style={[styles.headerTitle, { fontSize: scaleText(18), marginLeft: scale(16) }]}>
+            O meu passaporte
+          </Typography>
+        </View>
+        <Typography style={[styles.pageIndicator, { fontSize: scaleText(12) }]}>
+          {activeIndex + 1} / {totalPages}
+        </Typography>
+      </View>
+
+      <View style={[styles.bookContainer, { height: passportHeight }]} {...panResponder.panHandlers}>
+        {/* Render only visible layers to optimize performance */}
+
+        {/* BACKGROUND PAGE (Next Page) */}
+        {activeIndex < totalPages - 1 && (
+          <View style={[styles.pageLayer, { width: passportWidth, height: passportHeight, zIndex: 1 }]}>
+            {pages[activeIndex + 1]}
+          </View>
+        )}
+
+        {/* CURRENT PAGE (The one flipping forward) */}
+        <Animated.View style={[
+          styles.pageLayer,
+          {
+            width: passportWidth,
+            height: passportHeight,
+            zIndex: 2,
+            transform: [
+              { perspective: 800 },
+              { translateX: -passportWidth / 2 },
+              { rotateY: rotateForward },
+              { translateX: passportWidth / 2 }
+            ]
+          }
+        ]}>
+          {pages[activeIndex]}
+        </Animated.View>
+
+        {/* PREVIOUS PAGE (The one flipping backward from -90deg to 0) */}
+        {activeIndex > 0 && (
+          <Animated.View style={[
+            styles.pageLayer,
+            {
+              width: passportWidth,
+              height: passportHeight,
+              zIndex: 3,
+              transform: [
+                { perspective: 800 },
+                { translateX: -passportWidth / 2 },
+                { rotateY: rotateBackward },
+                { translateX: passportWidth / 2 }
+              ]
+            }
+          ]}>
+            {pages[activeIndex - 1]}
+          </Animated.View>
+        )}
+      </View>
+
+      <View style={[styles.footer, { paddingBottom: scale(32) }]}>
+        <View style={styles.paginationRow}>
+          <IconButton
+            iconName="ChevronLeft"
+            size="sm"
+            variant="primary"
+            onPress={() => flipTo('prev')}
+            disabled={activeIndex === 0 || isAnimating.current}
+            style={{ width: scale(48) }}
+          />
+
+          <View style={[styles.dotsContainer, { gap: scale(8) }]}>
+            {Array.from({ length: totalPages }).map((_, i) => (
+              <View
+                key={i}
+                style={[
+                  styles.dot,
+                  { width: scale(6), height: scale(6), borderRadius: scale(3) },
+                  i === activeIndex && { backgroundColor: theme.colors.primary }
+                ]}
+              />
+            ))}
+          </View>
+
+          <IconButton
+            iconName="ChevronRight"
+            size="sm"
+            variant="primary"
+            onPress={() => flipTo('next')}
+            disabled={activeIndex === totalPages - 1 || isAnimating.current}
+            style={{ width: scale(48) }}
+          />
+        </View>
+
+        <Typography style={[styles.helperText, { fontSize: scaleText(11), marginTop: scale(16) }]}>
+          {activeIndex === 0 ? "Toca na capa ou arrasta" : "Arrasta a página para desfolhar"}
+        </Typography>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#efe2d6',
+    width: '100%',
+    height: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerTitle: {
+
+    color: theme.colors.brown[800],
+  },
+  pageIndicator: {
+
+    color: theme.colors.brown[500],
+    letterSpacing: 1,
+  },
+  bookContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    position: 'relative',
+  },
+  pageLayer: {
+    position: 'absolute',
+    backfaceVisibility: 'hidden',
+  },
+  footer: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+    paddingTop: 24,
+  },
+  paginationRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingHorizontal: 24,
+  },
+  navBtn: {
+    backgroundColor: '#efe2d6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  navBtnActive: {
+    backgroundColor: theme.colors.primary,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dot: {
+    backgroundColor: '#e0c8b6',
+  },
+  helperText: {
+
+    color: theme.colors.brown[400],
+  }
+});

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

@@ -0,0 +1,159 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { PlanCard } from './PlanCard';
+
+const meta = {
+  title: 'Components/Cards/PlanCard',
+  component: PlanCard,
+  parameters: { 
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'O **PlanCard** exibe o curso principal ativo do utilizador, o seu nível e o progresso em direção ao objetivo (ex: usado no dashboard principal).\n\n### Exemplo de Uso\n```tsx\n<PlanCard \n  courseName="Francês"\n  level="A2"\n  currentTopic="No mercado de Dakar"\n  progress={0.6}\n  nextClassDate="Hoje, 19:00"\n/>\n```',
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    tier: { control: { type: 'select', options: ['decouverte', 'explorateur', 'fluent'] } },
+    planName: { control: 'text' },
+    priceText: { control: 'text' },
+    pricePeriod: { control: 'text' },
+    isPopular: { control: 'boolean' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 24, maxWidth: 400, backgroundColor: '#f5f0eb' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<any>;
+
+export const Decouverte: Story = {
+  name: "Découverte (Grátis)",
+  args: {
+    tier: 'decouverte',
+    tierLabel: 'DÉCOUVERTE',
+    planName: 'Découverte',
+    priceText: 'Grátis',
+    pricePeriod: '/sempre',
+    includedItems: [
+      '1 aula por semana',
+      'Acesso ao vocabulário base',
+    ],
+    excludedItems: [
+      'Feedback personalizado',
+      'Suporte prioritário',
+    ],
+  },
+};
+
+export const Explorateur: Story = {
+  name: "Explorateur (Recomendado)",
+  args: {
+    tier: 'explorateur',
+    tierLabel: 'RECOMENDADO',
+    planName: 'Explorateur',
+    priceText: '15€',
+    pricePeriod: '/mês',
+    isPopular: true,
+    includedItems: [
+      'Aulas ilimitadas de conversação',
+      'Dicionário inteligente completo',
+      'Feedback de professores em 24h',
+    ],
+    excludedItems: [
+      'Suporte prioritário 1-para-1',
+    ],
+  },
+};
+
+export const Fluent: Story = {
+  name: "Fluent (Premium)",
+  args: {
+    tier: 'fluent',
+    tierLabel: 'PREMIUM',
+    planName: 'Fluent',
+    priceText: '29€',
+    pricePeriod: '/mês',
+    includedItems: [
+      'Tudo no plano Explorateur',
+      'Suporte prioritário 1-para-1',
+      'Mentoria mensal exclusiva',
+    ],
+  },
+};
+
+export const ExplorateurMini: Story = {
+  name: "Explorateur (Mini)",
+  args: {
+    variant: 'mini',
+    tier: 'explorateur',
+    tierLabel: 'EXPLORATEUR',
+    planName: 'Explorateur',
+    priceText: '15€',
+    pricePeriod: '/mês',
+    isPopular: true,
+  },
+};
+
+export const Stack: Story = {
+  name: "Stack de Planos (Grid)",
+  args: {
+    tier: 'decouverte',
+    planName: '',
+    priceText: '',
+  },
+  render: () => (
+    <View style={{ gap: 24 }}>
+      <PlanCard
+        tier="decouverte"
+        tierLabel="DÉCOUVERTE"
+        planName="Découverte"
+        priceText="Grátis"
+        pricePeriod="/sempre"
+        includedItems={[
+          '1 aula por semana',
+          'Acesso ao vocabulário base',
+        ]}
+        excludedItems={[
+          'Feedback de professores em 24h',
+          'Suporte prioritário',
+        ]}
+      />
+      <PlanCard
+        tier="explorateur"
+        tierLabel="EXPLORATEUR"
+        planName="Explorateur"
+        priceText="15€"
+        pricePeriod="/mês"
+        isPopular
+        includedItems={[
+          'Aulas ilimitadas de conversação',
+          'Dicionário inteligente completo',
+          'Feedback de professores em 24h',
+        ]}
+        excludedItems={[
+          'Suporte prioritário',
+        ]}
+      />
+      <PlanCard
+        tier="fluent"
+        tierLabel="FLUENT"
+        planName="Fluent"
+        priceText="29€"
+        pricePeriod="/mês"
+        includedItems={[
+          'Tudo no plano Explorateur',
+          'Suporte prioritário 1-para-1',
+          'Mentoria mensal exclusiva',
+        ]}
+      />
+    </View>
+  ),
+};