English Comments to Components

Author: SkitPie

src/components/common/CustomButtonDock.js

@@ -2,18 +2,27 @@ import React from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import { colors, paddings } from '../../style';
 
+/**
+ * CustomButtonDock Component
+ * A container component that displays buttons in a docked position at the bottom of the screen.
+ * Supports both vertical and horizontal button layouts.
+ *
+ * @param {string} direction - Layout direction for buttons: "vertical" or "horizontal"
+ * @param {React.ReactNode} firstButton - The first button component to display
+ * @param {React.ReactNode} secondButton - The second button component to display
+ */
 const CustomButtonDock = ({ direction = "vertical", firstButton, secondButton }) => {
  return (
  <View style={styles.overlay} pointerEvents="box-none">
  <View style={styles.bottomContainer} pointerEvents="box-none">
  <View style={[styles.dock, direction === "horizontal" ? styles.horizontal : styles.vertical]}>
  {firstButton && (
- <View style={[styles.buttonWrapper, direction === "horizontal" && { flex: 1 }]}>
+ <View style={[direction === "horizontal" && { flex: 1 }]}>
  {firstButton}
  </View>
  )}
  {secondButton && (
- <View style={[styles.buttonWrapper, direction === "horizontal" && { flex: 1 }]}>
+ <View style={[direction === "horizontal" && { flex: 1 }]}>
  {secondButton}
  </View>
  )}
@@ -23,6 +32,7 @@ const CustomButtonDock = ({ direction = "vertical", firstButton, secondButton })
  );
 };
 
+// Styles for the dock container and button layout
 const styles = StyleSheet.create({
  overlay: {
  position: 'absolute',
@@ -36,7 +46,6 @@ const styles = StyleSheet.create({
  flex: 1,
  justifyContent: 'flex-end',
  pointerEvents: 'box-none',
- 
  },
  dock: {
  backgroundColor: colors.white,
@@ -53,9 +62,6 @@ const styles = StyleSheet.create({
  vertical: {
  flexDirection: 'column',
  },
- buttonWrapper: {
-
- },
 });
 
 export default CustomButtonDock;

src/components/common/CustomButtonIcon.js

@@ -3,6 +3,10 @@ import { Text, StyleSheet, View, Pressable } from "react-native";
 import { colors, paddings, rounded, textStyles } from '../../style';
 import LoadingDots from "../../animations/LoadingDots";
 
+/**
+ * Style configurations for different button types
+ * Defines background colors, text colors, and border styles for each button type
+ */
 const typeStyles = {
  primary: { backgroundColor: colors.violet500, textColor: colors.white },
  secondary: { backgroundColor: colors.grey800, textColor: colors.white },
@@ -14,6 +18,10 @@ const typeStyles = {
  },
 };
 
+/**
+ * Style configurations for different button states
+ * Defines how buttons appear in different states: default, hover, pressed, disabled, loading
+ */
 const stateStyles = {
  default: {
  primary: { backgroundColor: colors.violet500 },
@@ -34,7 +42,6 @@ const stateStyles = {
  primary: { backgroundColor: colors.grey100, textColor: colors.grey600 },
  secondary: { backgroundColor: colors.grey100, textColor: colors.grey600 },
  tertiary: { backgroundColor: colors.white, textColor: colors.grey500, borderColor: colors.grey500, borderWidth: 1 },
-
  },
  loading: {
  primary: { backgroundColor: colors.violet500 },
@@ -43,13 +50,24 @@ const stateStyles = {
  },
 };
 
+/**
+ * Style configurations for different button sizes
+ * Defines height and padding for each size variant
+ */
 const sizeStyles = {
  1: { height: 32, padding: paddings.p_4 },
  2: { height: 40, padding: paddings.p_8 },
  3: { height: 48, padding: paddings.p_12 },
  4: { height: 56, padding: paddings.p_16 },
 };
 
+/**
+ * Combines styles based on button type, state, and size
+ * @param {string} type - Button type (primary, secondary, tertiary)
+ * @param {string} state - Button state (default, hover, pressed, disabled, loading)
+ * @param {number} size - Button size (1-4)
+ * @returns {Object} Combined style object
+ */
 const getCombinedStyles = (type, state, size) => {
  const typeStyle = typeStyles[type];
  const stateStyle = stateStyles[state]?.[type];
@@ -62,6 +80,17 @@ const getCombinedStyles = (type, state, size) => {
  };
 };
 
+/**
+ * CustomButtonIcon Component
+ * A button component that displays an icon with configurable styles and states
+ * 
+ * @param {Object} containerStyle - Custom styles for the button container
+ * @param {Function} onPress - Function to call when button is pressed
+ * @param {string} type - Button type: "primary", "secondary", or "tertiary"
+ * @param {number} size - Button size: 1 (smallest) to 4 (largest)
+ * @param {React.ReactNode} icon - Icon component to display
+ * @param {boolean} disabled - Whether the button is disabled
+ */
 const CustomButtonIcon = ({
  containerStyle,
  onPress,
@@ -74,6 +103,7 @@ const CustomButtonIcon = ({
  const state = disabled ? 'disabled' : buttonState;
  const combinedStyles = getCombinedStyles(type, state, size);
 
+ // Handle button press events
  const handlePressIn = () => {
  if (!disabled) {
  setButtonState('pressed');
@@ -111,13 +141,13 @@ const CustomButtonIcon = ({
  ]}
  onPress={handlePress}
  onPressIn={handlePressIn}
- onPressOut={handlePressOut}
+ onPressOut={handlePressOut} 
  disabled={disabled}
- >
- <View style={styles.contentContainer}>
- {icon && <View style={styles.icon}>{icon}</View>}
- </View>
- </Pressable>
+  >
+  <View style={styles.contentContainer}>
+  {icon && <View style={styles.icon}>{icon}</View>}
+  </View>
+  </Pressable>
  );
 };
 

src/components/common/CustomCard.js

@@ -2,18 +2,21 @@ import * as React from "react";
 import { Image, Pressable, StyleSheet, Text, View } from "react-native";
 import { colors, paddings, rounded, textStyles } from "../../style";
 
+/**
+ * CustomCard Component
+ * A versatile card component that can be used to display content with an icon, title, and description.
+ */
 const CustomCard = ({
- iconSource = {},
- title,
- description,
- size = "md", // "md" oder "lg"
- state = "default", // State: "active", "default" oder "disabled"
- showDescription = true, // Standardmäßig aktiv
- onPress
+ iconSource = {}, // Icon source - can be an image or React component
+ title, // Card title
+ description, // Card description
+ size = "md",  // Card size: "md" (medium) or "lg" (large)
+ state = "default", // Card state: "active", "default", or "disabled"
+ showDescription = true, // Whether to show the description
+ onPress // Function to call when card is pressed
 }) => {
- // Bestimme den Container-Stil:
- // Im active-Zustand wird der aktive Style genutzt,
- // In default und disabled wird der Container-Style wie bei disabled angewandt.
+ // Determine container style based on state and size
+ // For active state, use active style; for default and disabled states, use disabled style
  const containerStyle =
  state === "active"
  ? size === "md"
@@ -23,18 +26,15 @@ const CustomCard = ({
  ? styles.cardMdDisabled
  : [styles.cardLgDisabled, !showDescription && { height: 92}];
 
- // Beim Text: Nur im disabled-Zustand wird durchgestrichen.
+ // Apply text styles - strikethrough for disabled state only
  const titleStyle = [styles.title, state === "disabled" && styles.strikeThroughText];
  const descriptionStyle = [styles.description, state === "disabled" && styles.strikeThroughText];
-
- // Text-Wrapper (für md bzw. lg)
+ // Text wrapper styles for medium and large sizes
  const textWrapperStyle = size === "md" ? styles.textWrapperMd : styles.textWrapperLg;
-
- // Icon: Falls iconSource ein React-Element ist, setzen wir per cloneElement die Farbe auf Schwarz.
+ // Handle icon - if iconSource is a React element, clone it and set color to black
  const iconElement = React.isValidElement(iconSource)
  ? React.cloneElement(iconSource, { color: colors.black })
  : iconSource;
-
  return (
  <Pressable style={containerStyle} onPress={onPress}>
  <View style={[styles.iconContainer, size === "lg" && { alignSelf: "flex-start" }]}>
@@ -56,7 +56,7 @@ const CustomCard = ({
 
 const styles = StyleSheet.create({
  // -------------------------------
- // Active Styles (voll aktiv)
+ // Active Styles
  // -------------------------------
  cardMdContainer: {
  gap: paddings.p_12,
@@ -84,10 +84,10 @@ const styles = StyleSheet.create({
  borderColor: colors.black,
  },
  // -------------------------------
- // Disabled Styles (wie bisher)
+ // Disabled Styles
  // -------------------------------
- // (Sowohl für default als auch disabled wird hier der Container-Stil genutzt –
- // der Unterschied zeigt sich nur beim Text: bei disabled wird der Text durchgestrichen.)
+ // Used for both default and disabled states
+ // The only difference is text strikethrough in disabled state
  cardMdDisabled: {
  gap: paddings.p_12,
  padding: paddings.p_12,
@@ -112,7 +112,6 @@ const styles = StyleSheet.create({
  height: 112,
  borderWidth: 1,
  borderColor: colors.grey200,
- 
  },
  // -------------------------------
  // Icon-Container
@@ -147,7 +146,7 @@ const styles = StyleSheet.create({
  overflow: "hidden",
  alignSelf: "stretch",
  },
- // Durchgestrichener Text (nur im disabled-Zustand angewandt)
+ // Strikethrough text (only applied in the disabled state)
  strikeThroughText: {
  textDecorationLine: "line-through",
  color: colors.grey500,