@xetwa/design-system 1.0.2

package/src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { View } from 'react-native';
+import { Typography } from './Typography';
+
+const meta: Meta<typeof Typography> = {
+  title: 'Components/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'display1',
+        'display2',
+        'h1',
+        'h2',
+        'h3',
+        'label',
+        'bodyLg',
+        'bodyMd',
+        'bodySm',
+        'caption',
+        'btnLg',
+        'btnMd',
+        'btnSm',
+      ],
+    },
+    color: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Typography>;
+
+export const Default: Story = {
+  args: {
+    variant: 'bodyMd',
+    children: 'A Vava viaja contigo de Paris a Beirute pelo mundo francófono.',
+  },
+};
+
+export const Display1: Story = {
+  args: {
+    variant: 'display1',
+    children: 'Aprende francês',
+  },
+};
+
+export const Display2: Story = {
+  args: {
+    variant: 'display2',
+    children: 'Aprende francês',
+  },
+};
+
+export const H1: Story = {
+  args: {
+    variant: 'h1',
+    children: 'Aprende francês',
+  },
+};
+
+export const H2: Story = {
+  args: {
+    variant: 'h2',
+    children: 'Cumprimentos',
+  },
+};
+
+export const H3: Story = {
+  args: {
+    variant: 'h3',
+    children: 'Bom dia',
+  },
+};
+
+export const Label: Story = {
+  args: {
+    variant: 'label',
+    children: 'MÓDULO 1',
+  },
+};
+
+export const BodyLg: Story = {
+  args: {
+    variant: 'bodyLg',
+    children: '5 minutos por dia + aulas a sério com os professores da Xetwa.',
+  },
+};
+
+export const BodyMd: Story = {
+  args: {
+    variant: 'bodyMd',
+    children: 'A Vava viaja contigo de Paris a Beirute pelo mundo francófono.',
+  },
+};
+
+export const BodySm: Story = {
+  args: {
+    variant: 'bodySm',
+    children: '3 de 5 lições concluídas',
+  },
+};
+
+export const Caption: Story = {
+  args: {
+    variant: 'caption',
+    children: 'com professor • abre o Módulo 2',
+  },
+};
+
+export const ScaleDemonstration: StoryObj = {
+  render: () => (
+    <View style={{ gap: 16, padding: 12 }}>
+      <Typography variant="display1">Display 1 • Aprende francês</Typography>
+      <Typography variant="display2">Display 2 • Aprende francês</Typography>
+      <Typography variant="h1">H1 • Aprende francês</Typography>
+      <Typography variant="h2">H2 • Cumprimentos</Typography>
+      <Typography variant="h3">H3 • Bom dia</Typography>
+      <Typography variant="label">LABEL • MÓDULO 1</Typography>
+      <Typography variant="bodyLg">Body LG • 5 minutos por dia + aulas a sério com os professores da Xetwa.</Typography>
+      <Typography variant="bodyMd">Body MD • A Vava viaja contigo de Paris a Beirute pelo mundo francófono.</Typography>
+      <Typography variant="bodySm">Body SM • 3 de 5 lições concluídas</Typography>
+      <Typography variant="caption">Caption • com professor • abre o Módulo 2</Typography>
+    </View>
+  ),
+};

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import type { TextProps as RNTextProps, TextStyle } from 'react-native';
+import { theme } from '../../styles/theme';
+import type { TypographyVariant } from '../../styles/theme';
+import { useTheme } from '../../hooks/useTheme';
+import { useResponsive } from '../../hooks/useResponsive';
+
+/**
+ * Componente base para renderização de texto com a tipografia do sistema.
+ */
+export interface TypographyProps extends RNTextProps {
+  /** Variante tipográfica (h1, h2, body, caption, etc). Controla tamanho e peso. */
+  variant?: TypographyVariant;
+  /** Alinhamento do texto. */
+  align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+  /** Cor do texto (em formato hexadecimal ou rgba). */
+  color?: string;
+}
+
+export const Typography = React.forwardRef<React.ElementRef<typeof RNText>, TypographyProps>(
+  ({ variant = 'bodyMd', color, style, children, ...props }, ref) => {
+    const { colors } = useTheme();
+    const { scaleText } = useResponsive();
+    
+    // Resolve variant styles from the static theme tokens
+    const typographyStyle = theme.typography[variant];
+    
+    // Default text color based on the current active theme
+    const defaultColor = colors.textPrimary;
+
+    const responsiveStyle: TextStyle = {
+      ...typographyStyle,
+      fontSize: typographyStyle.fontSize ? scaleText(typographyStyle.fontSize) : undefined,
+      lineHeight: typographyStyle.lineHeight ? scaleText(typographyStyle.lineHeight) : undefined,
+    };
+
+    const combinedStyles = [
+      { color: defaultColor },
+      responsiveStyle,
+      color ? { color } : null,
+      style,
+    ];
+
+    return (
+      <RNText ref={ref} style={combinedStyles} {...props}>
+        {children}
+      </RNText>
+    );
+  }
+);
+
+Typography.displayName = 'Typography';

package/src/hooks/useResponsive.ts

@@ -0,0 +1,41 @@
+import { useWindowDimensions } from 'react-native';
+
+export function useResponsive() {
+  const { width, height } = useWindowDimensions();
+
+  // Baseline standard mobile width (e.g. iPhone SE / 14 width is 375px or 390px)
+  const BASE_WIDTH = 375;
+
+  // Compute layout scale factor relative to 375px.
+  // We clamp this factor to prevent layouts from getting way too small on tiny screens
+  // or way too large on tablet/desktop displays.
+  const layoutFactor = Math.min(Math.max(width / BASE_WIDTH, 0.8), 1.25);
+
+  // Moderate scale factor for text sizing, so fonts scale slightly more gently
+  // than pure layout dimensions (text sizes are critical for legibility).
+  const textFactor = 1 + (layoutFactor - 1) * 0.7;
+
+  /**
+   * Scales a layout dimension (padding, margin, width, height, radius)
+   */
+  const scale = (size: number): number => {
+    return Math.round(size * layoutFactor);
+  };
+
+  /**
+   * Scales a font size
+   */
+  const scaleText = (size: number): number => {
+    return Math.round(size * textFactor);
+  };
+
+  return {
+    scale,
+    scaleText,
+    width,
+    height,
+    isMobile: width < 768,
+    isTablet: width >= 768 && width < 1024,
+    isDesktop: width >= 1024,
+  };
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { Appearance } from 'react-native';
+import { theme } from '../styles/theme';
+
+export function useTheme() {
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return document.documentElement.classList.contains('dark-theme');
+    }
+    return Appearance.getColorScheme() === 'dark';
+  });
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const observer = new MutationObserver(() => {
+        setIsDark(document.documentElement.classList.contains('dark-theme'));
+      });
+      observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+      return () => observer.disconnect();
+    } else {
+      const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+        setIsDark(colorScheme === 'dark');
+      });
+      return () => subscription.remove();
+    }
+  }, []);
+
+  return {
+    colors: isDark ? theme.colors.dark : theme.colors.light,
+    isDark,
+  };
+}

package/src/index.css

@@ -0,0 +1,355 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-title: 'Fredoka', sans-serif;
+  
+  --color-primary: var(--primary);
+  --color-primary-dark: var(--primary-dark);
+  --color-primary-light: var(--primary-light);
+  
+  --color-brown-900: var(--brown-900);
+  --color-brown-800: var(--brown-800);
+  --color-brown-700: var(--brown-700);
+  --color-brown-600: var(--brown-600);
+  --color-brown-500: var(--brown-500);
+  --color-brown-400: var(--brown-400);
+  --color-brown-300: var(--brown-300);
+  --color-brown-100: var(--brown-100);
+  --color-brown-50: var(--brown-50);
+  
+  --color-cream: var(--cream);
+  --color-canvas: var(--canvas);
+  
+  --color-success: var(--success);
+  --color-error: var(--error);
+  --color-info: var(--info);
+  --color-black: var(--black);
+  --color-white: var(--white);
+  
+  --color-bg-app: var(--bg-app);
+  --color-bg-surface: var(--bg-surface);
+  --color-bg-surface-hover: var(--bg-surface-hover);
+  --color-border-color: var(--border-color);
+  
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
+  --radius-screen: 34px;
+  --radius-phone: 42px;
+
+  --shadow-xs: 0 1px 3px rgba(81, 51, 45, 0.08);
+  --shadow-sm: 0 2px 8px rgba(81, 51, 45, 0.10);
+  --shadow-md: 0 4px 14px rgba(81, 51, 45, 0.13);
+  --shadow-lg: 0 8px 26px rgba(81, 51, 45, 0.18);
+  --shadow-xl: 0 18px 40px rgba(81, 51, 45, 0.28);
+  --shadow-btn-primary: 0 4px 0 #cf7a30;
+  --shadow-btn-secondary: 0 4px 0 #efe2d6;
+  --shadow-btn-dark: 0 4px 0 #3a241f;
+  --shadow-focus: 0 0 0 3px rgba(242, 151, 75, 0.22);
+
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-medium: 300ms;
+  --duration-slow: 500ms;
+
+  --breakpoint-xs: 0px;
+  --breakpoint-sm: 375px;
+  --breakpoint-md: 430px;
+  --breakpoint-lg: 768px;
+  --breakpoint-xl: 1024px;
+  --breakpoint-xxl: 1280px;
+  --breakpoint-xxxl: 1440px;
+  
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  --layout-mobile-header-height: 52px;
+  --layout-mobile-tab-height: 56px;
+  --layout-desktop-sidebar-width: 220px;
+  --layout-tablet-header-height: 64px;
+  --layout-max-content-width: 1200px;
+}
+
+:root {
+  --primary: #f2974b;
+  --primary-dark: #cf7a30;
+  --primary-light: #fef6ee;
+  
+  --brown-900: #15100d;
+  --brown-800: #51332d;
+  --brown-700: #3f2620;
+  --brown-600: #6e5a4f;
+  --brown-500: #9a8478;
+  --brown-400: #b9a392;
+  --brown-300: #c3b1a4;
+  --brown-100: #efe2d6;
+  --brown-50: #fdf3ea;
+  
+  --cream: #fbf6f0;
+  --canvas: #e7e5df;
+  
+  --success: #16915a;
+  --error: #cf5b48;
+  --info: #2a6fc2;
+  --black: #000000;
+  --white: #ffffff;
+  
+  /* Light Theme Mapping */
+  --bg-app: #fbf6f0;         /* cream */
+  --bg-surface: #ffffff;     /* white */
+  --bg-surface-hover: #fdf3ea; /* brown-50 */
+  --border-color: #efe2d6;    /* brown-100 */
+  
+  --text-primary: #51332d;    /* brown-800 */
+  --text-secondary: #9a8478;  /* brown-500 */
+}
+
+.dark-theme {
+  /* Dark Theme Mapping */
+  --bg-app: #15100d;         /* brown-900 */
+  --bg-surface: #51332d;     /* brown-800 */
+  --bg-surface-hover: #3f2620; /* brown-700 */
+  --border-color: #3f2620;    /* brown-700 */
+  
+  --text-primary: #efe2d6;    /* brown-100 */
+  --text-secondary: #b9a392;  /* brown-400 */
+  
+  --primary-light: rgba(242, 151, 75, 0.15);
+}
+
+body {
+  background-color: var(--bg-app);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  transition: background-color 250ms, color 250ms;
+}
+
+/* Typography Scale */
+.text-display-1 {
+  font-family: var(--font-title);
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 1.08;
+}
+@media (min-width: 1024px) {
+  .text-display-1 {
+    font-size: 42px;
+  }
+}
+
+.text-display-2 {
+  font-family: var(--font-title);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 1.12;
+}
+@media (min-width: 1024px) {
+  .text-display-2 {
+    font-size: 34px;
+  }
+}
+
+.text-h1 {
+  font-family: var(--font-title);
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 1.15;
+}
+@media (min-width: 1024px) {
+  .text-h1 {
+    font-size: 28px;
+  }
+}
+
+.text-h2 {
+  font-family: var(--font-title);
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 1.2;
+}
+@media (min-width: 1024px) {
+  .text-h2 {
+    font-size: 22px;
+  }
+}
+
+.text-h3 {
+  font-family: var(--font-title);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1.25;
+}
+@media (min-width: 1024px) {
+  .text-h3 {
+    font-size: 19px;
+  }
+}
+
+.text-label {
+  font-family: var(--font-sans);
+  font-weight: 800;
+  font-size: 10px;
+  line-height: 1.0;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+@media (min-width: 1024px) {
+  .text-label {
+    font-size: 11px;
+  }
+}
+
+.text-body-lg {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.55;
+}
+@media (min-width: 1024px) {
+  .text-body-lg {
+    font-size: 17px;
+  }
+}
+
+.text-body-md {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 13.5px;
+  line-height: 1.5;
+}
+@media (min-width: 1024px) {
+  .text-body-md {
+    font-size: 15px;
+  }
+}
+
+.text-body-sm {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 1.45;
+}
+@media (min-width: 1024px) {
+  .text-body-sm {
+    font-size: 13px;
+  }
+}
+
+.text-caption {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 1.4;
+}
+@media (min-width: 1024px) {
+  .text-caption {
+    font-size: 11px;
+  }
+}
+
+.text-btn-lg {
+  font-family: var(--font-sans);
+  font-weight: 800;
+  font-size: 16px;
+  line-height: 1.0;
+  letter-spacing: 0.04em;
+}
+@media (min-width: 1024px) {
+  .text-btn-lg {
+    font-size: 17px;
+  }
+}
+
+.text-btn-md {
+  font-family: var(--font-sans);
+  font-weight: 800;
+  font-size: 14px;
+  line-height: 1.0;
+  letter-spacing: 0.04em;
+}
+@media (min-width: 1024px) {
+  .text-btn-md {
+    font-size: 15px;
+  }
+}
+
+.text-btn-sm {
+  font-family: var(--font-sans);
+  font-weight: 800;
+  font-size: 12px;
+  line-height: 1.0;
+  letter-spacing: 0.04em;
+}
+@media (min-width: 1024px) {
+  .text-btn-sm {
+    font-size: 12px;
+  }
+}
+
+/* Animation Keyframes and Helper Classes */
+@keyframes xtBob {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-7px); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes xtPop {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes xtFlame {
+  0%, 100% { transform: scale(1) rotate(0deg); }
+  50% { transform: scale(1.15) rotate(5deg); }
+}
+
+@keyframes xtRing {
+  0% { box-shadow: 0 0 0 0 rgba(242, 151, 75, 0.55); }
+  100% { box-shadow: 0 0 0 16px rgba(242, 151, 75, 0); }
+}
+
+.animate-bob {
+  animation: xtBob 2.9s ease-in-out infinite;
+}
+
+.animate-pop {
+  animation: xtPop 1.6s ease-in-out infinite;
+}
+
+.animate-flame {
+  animation: xtFlame 1.8s ease-in-out infinite;
+}
+
+.animate-ring {
+  animation: xtRing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes xtShadow {
+  0%, 100% { transform: scale(1); opacity: 0.20; }
+  50% { transform: scale(0.6); opacity: 0.08; }
+}
+
+.animate-contact-shadow {
+  animation: xtShadow 2.9s ease-in-out infinite;
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+export * from './components/Headers/CountryHeader/CountryHeader';
+export * from './components/Buttons/MainButton/MainButton';
+export * from './components/Buttons/BackButton/BackButton';
+export * from './components/Cards/ModuleCard/ModuleCard';
+export * from './components/Cards/ModuleCompletionCard/ModuleCompletionCard';
+export * from './components/Cards/AnswerOptionCard/AnswerOptionCard';
+export * from './components/DataDisplay/ProgressBar/ProgressBar';
+export * from './components/DataDisplay/Tag/Tag';
+export * from './components/DataDisplay/Badge/Badge';
+export * from './components/Inputs/TextInput/TextInput';
+export * from './components/Typography/Typography';
+export * from './components/Cards/BoardingPassCard/BoardingPassCard';
+export * from './components/Cards/SelectionCard/SelectionCard';
+export * from './components/Cards/PricingCard/PricingCard';
+export * from './components/DataDisplay/Flag/Flag';
+export * from './components/Cards/BaseCard/BaseCard';
+export * from './components/Cards/TeacherCard/TeacherCard';
+export * from './components/Cards/CountryCard/CountryCard';
+export * from './components/Cards/PlanCard/PlanCard';
+export * from './components/DataDisplay/LevelBadge/LevelBadge';
+export * from './hooks/useResponsive';
+export * from './components/Mascots/Vava/Vava';
+export * from './components/Mascots/Yaya/Yaya';
+export * from './components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet';
+export * from './components/Headers/ProfileHeader/ProfileHeader';
+export * from './components/Inputs/FillInTheBlank/FillInTheBlank';
+export * from './components/Charts/WeeklyProgressChart';
+export * from './components/Navigation/ProgressMap/ProgressMap';

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/mocks/codegenNativeComponent.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+// Mock for codegenNativeComponent to prevent Vite build failures on Web
+export default function codegenNativeComponent(name: string, _options?: any): any {
+  return name;
+}