cdslibrary 1.0.0

package/components/Onboarding.jsx

@@ -0,0 +1,65 @@
+import { Animated, FlatList, StyleSheet, Text, View } from "react-native";
+
+
+import { getSlides } from "../assets/onboarding/slides";
+import { OnboardingItem } from "./onboardingItem";
+import { useTheme } from "../context/CDSThemeContext";
+import { CDSBottomSheet } from "./CDSBottomSheet";
+import { useEffect, useRef, useState } from "react";
+import { Paginator } from "./Paginator";
+
+export const Onboarding = () => {
+    const [parentWidth, setParentWidth] = useState(0);
+
+    // Función onLayout para obtener las dimensiones del contenedor padre
+    const handleLayout = (event) => {
+        const { width } = event.nativeEvent.layout;
+        setParentWidth(width);  // Guardamos el ancho en el estado
+    };
+
+
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const viewableItemsChanged = useRef(({ viewableItems }) => {
+        setCurrentIndex(viewableItems[0].index);
+    }).current;
+
+    const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
+
+    const scrollX = useRef(new Animated.Value(0)).current;
+console.log(scrollX)
+    const slidesRef = useRef(null);
+
+    const { isDarkMode } = useTheme();
+    const slides = getSlides(isDarkMode);
+
+
+    return (
+        <View style={Styles.container} onLayout={handleLayout}>
+            <FlatList data={slides} renderItem={({ item }) => <OnboardingItem item={item} parentWidth={parentWidth} />}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                pagingEnabled
+                bounces={false}
+                keyExtractor={(item) => item.id}
+                onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], { useNativeDriver: false })}
+                onViewableItemsChanged={viewableItemsChanged}
+                viewabilityConfig={viewConfig}
+                scrollEventThrottle={32}
+                ref={slidesRef}
+                style={{ width: '100%' }}
+            />
+            <Paginator width={parentWidth} data={slides} scrollX={scrollX}/>
+        </View>
+    )
+}
+
+
+
+const Styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        width: '100%',
+    }
+})

package/components/Paginator.jsx

@@ -0,0 +1,52 @@
+import { View, Text, StyleSheet, Animated, useWindowDimensions } from "react-native";
+import { useTheme } from "../context/CDSThemeContext";
+
+
+
+
+export const Paginator = ({ data, scrollX, width }) => {
+
+    const { theme } = useTheme();
+
+    return (
+        <View style={styles.container}>
+            {data.map((_, index) => {
+
+                const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
+                const dotWidth = scrollX.interpolate({
+                    inputRange,
+                    outputRange: [8, 16, 8],
+                    extrapolate: "clamp",
+                });
+                const dotColor = scrollX.interpolate({
+                    inputRange,
+                    outputRange: [theme.surface.special.progressbarBg, theme.surface.special.progress, theme.surface.special.progressbarBg],
+                    extrapolate: "clamp",
+                });
+                return (
+                    <Animated.View
+                        key={index.toString()}
+                        style={[
+                            styles.dot,
+                            { width: dotWidth, backgroundColor: dotColor },
+                        ]}
+                    />
+                );
+            })}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        height: 64,
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        marginHorizontal: 4,
+        backgroundColor: 'red'
+    },
+});

package/components/onboardingItem.jsx

@@ -0,0 +1,39 @@
+import { View, Text, Image, useWindowDimensions, StyleSheet } from "react-native";
+import { getSemanticTextStyles } from "../tokens/CDSsemanticTextStyles";
+import { useTheme } from "../context/CDSThemeContext";
+export const OnboardingItem = ({ item, parentWidth }) => {
+
+    const { theme } = useTheme();
+    const textStyles = getSemanticTextStyles(theme);
+
+    return (
+        <View style={[styles.container, {width: parentWidth}]}>
+            <View style={[styles.textContainer]}>
+                <Text style={textStyles.bold.lg}>{item.title}</Text>
+                <Text style={textStyles.regular.md}>{item.description}</Text>
+            </View>
+            <Image source={item.image} resizeMode="contain" style={[styles.image,]} />
+        </View>
+    );
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "flex-end",
+        alignItems: "center",
+        gap: 40,
+        backgroundColor: 'red',
+        
+    },
+
+    textContainer: {
+        width: '100%',
+        gap: 16,
+    },
+
+    image: {
+        height: 353,
+    },
+});

package/context/CDSThemeContext.js

@@ -0,0 +1,52 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { Appearance, Platform } from 'react-native';
+import {CDSsemanticColors} from '../tokens/CDSsemanticColors';
+
+
+const ThemeContext = createContext();
+
+export const CDSThemeProvider = ({ children }) => {
+
+  const getSystemTheme = () => {
+    if (Platform.OS === 'web') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return Appearance.getColorScheme() || 'light';
+  };
+
+  const [theme, setTheme] = useState(getSystemTheme);
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  const isDarkMode = theme === 'dark';
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = (e) => {
+        setTheme(e.matches ? 'dark' : 'light');
+      };
+      mediaQuery.addEventListener('change', handleChange);
+
+      return () => {
+        mediaQuery.removeEventListener('change', handleChange);
+      };
+    } else {
+      const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+        setTheme(colorScheme);
+      });
+
+      return () => subscription.remove();
+    }
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme: CDSsemanticColors[theme], toggleTheme, isDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);

package/index.js

@@ -0,0 +1,21 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
+
+export {CDSBottomSheet} from './components/CDSBottomSheet';
+export {CDSButton} from './components/CDSButton';
+export {CDSCarousel} from './components/CDSCarousel';
+export {CDSCarouselDots} from './components/CDSCarouselDots';
+export {CDSInput} from './components/CDSInput';
+export {CDSOnboarding} from './components/CDSOnboarding';
+export {CDSSwitch} from './components/CDSSwitch';
+
+
+export {CDSThemeProvider, useTheme} from './context/CDSThemeContext';
+export {getSemanticTextStyles} from './tokens/CDSsemanticTextStyles';
+export {CDSsemanticColors} from './tokens/CDSsemanticColors';

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "cdslibrary",
+  "license": "0BSD",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Nat Viramontes",
+  "description": "A library of components for the CDS project",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo-google-fonts/inter": "^0.2.3",
+    "@expo/metro-runtime": "~4.0.1",
+    "@expo/vector-icons": "^14.0.2",
+    "expo": "~52.0.38",
+    "expo-status-bar": "~2.0.1",
+    "react": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-web": "~0.19.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": false
+}

package/tokens/CDSprimitiveTokens.js

@@ -0,0 +1,146 @@
+export const CDSprimitiveColors = {
+  brand: {
+    50: "#FEF5F8",
+    100: "#FEECF2",
+    150: "#FBB1C9",
+    200: "#F98BAE",
+    300: "#F76492",
+    400: "#F53D77",
+    500: "#F3165C",
+    600: "#D50B4E",
+    700: "#AE0940",
+    800: "#880732",
+    900: "#610524",
+  },
+  neutral: {
+    0: "#FFFFFF",
+    100: "#F9F9F9",
+    200: "#F1F3F3",
+    300: "#E8EAEB",
+    400: "#D8DCDE",
+    500: "#9DA5A9",
+    600: "#586061",
+    700: "#40484D",
+    800: "#283238",
+    850: "#36383B",
+    900: "#0E1319",
+    950: "#292B2D",
+    975: "#1E1E1E",
+    1000: "#000000",
+  },
+  blue: {
+    100: "#EFF5FD",
+    200: "#B1D1FB",
+    250: "#A0BFE8",
+    275: "#3780DF",
+    300: "#0B63D5",
+    350: "#063674",
+  },
+  green: {
+    100: "#EFFDF5",
+    200: "#A2EAC2",
+    250: "#B5D0C1",
+    300: "#0E8142",
+    350: "#0A5C2F",
+  },
+  scarlet: {
+    100: "#FCF0F0",
+    200: "#F3BAB6",
+    250: "#D9B5B5",
+    300: "#C02121",
+    350: "#831616",
+  },
+  marigold: {
+    100: "#FFF7F0",
+    200: "#FFD3AD",
+    250: "#E7C3A6",
+    300: "#E06900",
+    350: "#A34D00",
+  },
+  brown: {
+    100: "#F6F4F5",
+    150: "#DAD2D3",
+    200: "#C8BCBE",
+    300: "#B6A5A8",
+    400: "#A38F92",
+    500: "#91787C",
+    600: "#7B6568",
+    700: "#655255",
+    800: "#4F4043",
+    900: "#3D292C",
+    950: "#382E2F",
+  },
+  overlay: {light:"rgba(0, 0, 0, 0.50)",
+    dark: 'rgba(0,0,0,0.75)'
+  },
+};
+
+
+
+
+export const CDSprimitiveFontValues = {
+  
+  family: {
+    interRegular: 'Inter_400Regular',
+    interSemiBold: 'Inter_600SemiBold',
+    interBold: 'Inter_700Bold',
+  },
+
+  size: {
+    typography: {
+      mobile: {
+        xs: 12,
+        sm: 14,
+        md: 17,
+        lg: 21,
+        xl: 25,
+        "2xl": 30,
+        "3xl": 36,
+      },
+      desktop: {
+        xs: 14,
+        sm: 16,
+        md: 21,
+        lg: 27,
+        xl: 36,
+        "2xl": 47,
+        "3xl": 61,
+      },
+    },
+    iconography: {
+      mobile: {
+        xs: 14,
+        sm: 18,
+        md: 22,
+        lg: 40,
+      },
+      desktop: {
+        xs: 16,
+        sm: 20,
+        md: 24,
+        lg: 48,
+      },
+    },
+  },
+
+  lineHeight: {
+    mobile: {
+      xs: 18,
+      sm: 20,
+      md: 24,
+      lg: 28,
+      xl: 31,
+      "2xl": 38,
+      "3xl": 44,
+    },
+    desktop: {
+      xs: 18,
+      sm: 22,
+      md: 28,
+      lg: 35,
+      xl: 43,
+      "2xl": 56,
+      "3xl": 71,
+    },
+  },
+};

package/tokens/CDSsemanticColors.js

@@ -0,0 +1,213 @@
+import { CDSprimitiveColors } from "./CDSprimitiveTokens";
+import { Dimensions, Platform } from "react-native";
+const { width } = Dimensions.get("window");
+
+export const CDSsemanticColors = {
+  light: {
+    logo:{
+      source:"../assets/logoMonte.png"
+    },
+    icon: {
+      neutral: {
+        primary: CDSprimitiveColors.neutral[800],
+        secondary: CDSprimitiveColors.neutral[0],
+        tertiary: CDSprimitiveColors.neutral[200],
+        primaryVariant: CDSprimitiveColors.neutral[300],
+        tertiaryVariant: CDSprimitiveColors.neutral[600],
+        secondaryVariant: CDSprimitiveColors.neutral[100],
+      },
+      brand: {
+        primary: CDSprimitiveColors.brand[600],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[300],
+        success: CDSprimitiveColors.green[300],
+        warning: CDSprimitiveColors.marigold[300],
+        error: CDSprimitiveColors.scarlet[300],
+      },
+    },
+    surface: {
+      action: {
+        disabled: CDSprimitiveColors.neutral[400],
+        primary: CDSprimitiveColors.neutral[800],
+        pressed: CDSprimitiveColors.neutral[200],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[100],
+        success: CDSprimitiveColors.green[100],
+        warning: CDSprimitiveColors.marigold[100],
+        error: CDSprimitiveColors.scarlet[100],
+      },
+      neutral: {
+        primary: CDSprimitiveColors.neutral[0],
+        tertiary: CDSprimitiveColors.neutral[200],
+        primaryVariant: CDSprimitiveColors.neutral[300],
+        tertiaryVariant: CDSprimitiveColors.neutral[600],
+        secondary: CDSprimitiveColors.neutral[100],
+      },
+      background: {
+        default: CDSprimitiveColors.brown[100],
+      },
+      special: {
+        overlay: CDSprimitiveColors.overlay.light,
+        scroll: CDSprimitiveColors.neutral[400],
+        tooltip: CDSprimitiveColors.neutral[500],
+        progress: CDSprimitiveColors.brand[600],
+        progressbarBg: CDSprimitiveColors.neutral[400],
+        display: CDSprimitiveColors.neutral[800],
+        footer: CDSprimitiveColors.neutral[800],
+        illustrationIdCardDevice: CDSprimitiveColors.neutral[400],
+        illustrationIdCard: CDSprimitiveColors.neutral[500],
+      },
+    },
+    outline: {
+      brand: {
+        primary: CDSprimitiveColors.brand[600],
+        secondary: CDSprimitiveColors.brand[400],
+        tertiary: CDSprimitiveColors.brand[50],
+      },
+      action: {
+        disabled: CDSprimitiveColors.neutral[400],
+        primary: CDSprimitiveColors.neutral[800],
+      },
+      neutral: {
+        focus: CDSprimitiveColors.neutral[800],
+        tertiary: CDSprimitiveColors.neutral[600],
+        primary: CDSprimitiveColors.neutral[300],
+        secondary: CDSprimitiveColors.neutral[400],
+        primaryVariant: CDSprimitiveColors.neutral[200],
+        tertiaryVariant: CDSprimitiveColors.neutral[500],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[300],
+        success: CDSprimitiveColors.green[300],
+        warning: CDSprimitiveColors.marigold[300],
+        error: CDSprimitiveColors.scarlet[300],
+      },
+    },
+    text: {
+      neutral: {
+        primary: CDSprimitiveColors.neutral[800],
+        contrast: CDSprimitiveColors.neutral[0],
+        disabled: CDSprimitiveColors.neutral[500],
+        secondary: CDSprimitiveColors.neutral[600],
+        tertiary: CDSprimitiveColors.neutral[900],
+        placeholder: CDSprimitiveColors.neutral[500],
+      },
+      brand: {
+        primary: CDSprimitiveColors.brand[600],
+        secondary: CDSprimitiveColors.brand[400],
+        tertiary: CDSprimitiveColors.brand[800],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[300],
+        success: CDSprimitiveColors.green[300],
+        warning: CDSprimitiveColors.marigold[300],
+        error: CDSprimitiveColors.scarlet[300],
+      },
+    },
+  },
+  dark: {
+    logo:{
+      source:'../assets/logoMonteW.png'
+    },
+    icon: {
+      neutral: {
+        primary: CDSprimitiveColors.neutral[200],
+        secondary: CDSprimitiveColors.neutral[1000],
+        tertiary: CDSprimitiveColors.neutral[200],
+        primaryVariant: CDSprimitiveColors.neutral[700],
+        tertiaryVariant: CDSprimitiveColors.neutral[600],
+        secondaryVariant: CDSprimitiveColors.neutral[975],
+      },
+      brand: {
+        primary: CDSprimitiveColors.brand[150],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[350],
+        success: CDSprimitiveColors.green[350],
+        warning: CDSprimitiveColors.marigold[350],
+        error: CDSprimitiveColors.scarlet[350],
+      },
+    },
+    surface: {
+      action: {
+        disabled: CDSprimitiveColors.neutral[600],
+        primary: CDSprimitiveColors.neutral[200],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[250],
+        success: CDSprimitiveColors.green[250],
+        warning: CDSprimitiveColors.marigold[250],
+        error: CDSprimitiveColors.scarlet[250],
+      },
+      neutral: {
+        primary: CDSprimitiveColors.neutral[950],
+        tertiary: CDSprimitiveColors.neutral[200],
+        primaryVariant: CDSprimitiveColors.neutral[700],
+        tertiaryVariant: CDSprimitiveColors.neutral[600],
+        secondary: CDSprimitiveColors.neutral[975],
+      },
+      background: {
+        default: CDSprimitiveColors.neutral[950],
+      },
+      special: {
+        overlay: CDSprimitiveColors.overlay.dark,
+        scroll: CDSprimitiveColors.neutral[400],
+        tooltip: CDSprimitiveColors.neutral[500],
+        progress: CDSprimitiveColors.brand[600],
+        progressbarBg: CDSprimitiveColors.neutral[400],
+        display: CDSprimitiveColors.neutral[800],
+        footer: CDSprimitiveColors.neutral[800],
+        illustrationIdCardDevice: CDSprimitiveColors.neutral[400],
+        illustrationIdCard: CDSprimitiveColors.neutral[500],
+      },
+    },
+    outline: {
+      brand: {
+        primary: CDSprimitiveColors.brand[500],
+        secondary: CDSprimitiveColors.brand[150],
+        tertiary: CDSprimitiveColors.brand[900],
+      },
+      action: {
+        disabled: CDSprimitiveColors.neutral[600],
+        primary: CDSprimitiveColors.neutral[200],
+      },
+      neutral: {
+        focus: CDSprimitiveColors.neutral[0],
+        tertiary: CDSprimitiveColors.neutral[200],
+        primary: CDSprimitiveColors.neutral[700],
+        secondary: CDSprimitiveColors.neutral[800],
+        primaryVariant: CDSprimitiveColors.neutral[600],
+        tertiaryVariant: CDSprimitiveColors.neutral[500],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[350],
+        success: CDSprimitiveColors.green[350],
+        warning: CDSprimitiveColors.marigold[350],
+        error: CDSprimitiveColors.scarlet[350],
+      },
+    },
+    text: {
+      neutral: {
+        primary: CDSprimitiveColors.neutral[200],
+        contrast: CDSprimitiveColors.neutral[1000],
+        disabled: CDSprimitiveColors.neutral[850],
+        secondary: CDSprimitiveColors.neutral[400],
+        tertiary: CDSprimitiveColors.neutral[100],
+        placeholder: CDSprimitiveColors.neutral[300],
+      },
+      brand: {
+        primary: CDSprimitiveColors.brand[150],
+        secondary: CDSprimitiveColors.brand[700],
+        tertiary: CDSprimitiveColors.brand[900],
+      },
+      feedback: {
+        info: CDSprimitiveColors.blue[350],
+        success: CDSprimitiveColors.green[350],
+        warning: CDSprimitiveColors.marigold[350],
+        error: CDSprimitiveColors.scarlet[350],
+      },
+    },
+  },
+};