@umituz/react-native-design-system 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography and responsive utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicCard.tsx

@@ -0,0 +1,84 @@
+/**
+ * AtomicCard Component
+ * 
+ * A simple, styled card container component
+ */
+
+import React from 'react';
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+
+export type AtomicCardVariant = 'elevated' | 'outlined' | 'filled';
+export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface AtomicCardProps {
+    children: React.ReactNode;
+    variant?: AtomicCardVariant;
+    padding?: AtomicCardPadding;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+
+export const AtomicCard: React.FC<AtomicCardProps> = ({
+    children,
+    variant = 'elevated',
+    padding = 'md',
+    style,
+    testID,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const paddingValues: Record<AtomicCardPadding, number> = {
+        none: 0,
+        sm: tokens.spacing.sm,
+        md: tokens.spacing.md,
+        lg: tokens.spacing.lg,
+    };
+
+    const getVariantStyle = (): ViewStyle => {
+        switch (variant) {
+            case 'elevated':
+                return {
+                    backgroundColor: tokens.colors.surface,
+                    shadowColor: '#000',
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 2,
+                };
+            case 'outlined':
+                return {
+                    backgroundColor: tokens.colors.surface,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.outline,
+                };
+            case 'filled':
+                return {
+                    backgroundColor: tokens.colors.surfaceVariant,
+                };
+            default:
+                return {};
+        }
+    };
+
+    return (
+        <View
+            style={[
+                styles.card,
+                { borderRadius: tokens.borders.radius.md },
+                { padding: paddingValues[padding] },
+                getVariantStyle(),
+                style,
+            ]}
+            testID={testID}
+        >
+            {children}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    card: {
+        overflow: 'hidden',
+    },
+});

package/src/atoms/index.ts

@@ -5,39 +5,39 @@
 
 // Button
 export {
-  AtomicButton,
-  type AtomicButtonProps,
-  type ButtonVariant,
-  type ButtonSize,
+    AtomicButton,
+    type AtomicButtonProps,
+    type ButtonVariant,
+    type ButtonSize,
 } from './AtomicButton';
 
 // Text
 export { AtomicText, type AtomicTextProps } from './AtomicText';
 
-// Card - Note: Card may not exist, check later
-// export {
-//   AtomicCard,
-//   type AtomicCardProps,
-//   type AtomicCardVariant,
-//   type AtomicCardPadding,
-// } from './AtomicCard';
+// Card
+export {
+    AtomicCard,
+    type AtomicCardProps,
+    type AtomicCardVariant,
+    type AtomicCardPadding,
+} from './AtomicCard';
 
 // Input
 export {
-  AtomicInput,
-  type AtomicInputProps,
-  type AtomicInputVariant,
-  type AtomicInputState,
-  type AtomicInputSize,
+    AtomicInput,
+    type AtomicInputProps,
+    type AtomicInputVariant,
+    type AtomicInputState,
+    type AtomicInputSize,
 } from './AtomicInput';
 
 // Icon
 export {
-  AtomicIcon,
-  type AtomicIconProps,
-  type IconSize,
-  type IconColor,
-  type IconName,
+    AtomicIcon,
+    type AtomicIconProps,
+    type IconSize,
+    type IconColor,
+    type IconName,
 } from './AtomicIcon';
 
 // Avatar
@@ -51,19 +51,19 @@ export { AtomicProgress, type AtomicProgressProps } from './AtomicProgress';
 
 // Fab
 export {
-  AtomicFab,
-  type AtomicFabProps,
-  type FabSize,
-  type FabVariant,
-  getFabVariants,
+    AtomicFab,
+    type AtomicFabProps,
+    type FabSize,
+    type FabVariant,
+    getFabVariants,
 } from './AtomicFab';
 
 // Picker
 export {
-  AtomicPicker,
-  type AtomicPickerProps,
-  type PickerOption,
-  type PickerSize,
+    AtomicPicker,
+    type AtomicPickerProps,
+    type PickerOption,
+    type PickerSize,
 } from './AtomicPicker';
 
 // DatePicker

package/src/index.ts

@@ -116,6 +116,7 @@ export {
   AtomicIcon,
   AtomicButton,
   AtomicInput,
+  AtomicCard,
   AtomicFab,
   AtomicAvatar,
   AtomicChip,
@@ -134,6 +135,9 @@ export {
   type AtomicInputVariant,
   type AtomicInputState,
   type AtomicInputSize,
+  type AtomicCardProps,
+  type AtomicCardVariant,
+  type AtomicCardPadding,
   type AtomicFabProps,
   type FabSize,
   type FabVariant,

package/src/molecules/Divider/Divider.tsx

@@ -0,0 +1,187 @@
+/**
+ * Divider Domain - Divider Component
+ *
+ * Universal divider component for visual separation.
+ * Supports horizontal, vertical, and text dividers.
+ *
+ * @domain divider
+ * @layer presentation/components
+ */
+
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
+import { AtomicText } from '../../atoms/AtomicText';
+import type { DividerOrientation, DividerStyle, DividerSpacing } from './types';
+import {
+    DividerUtils,
+    DIVIDER_CONSTANTS,
+} from './types';
+
+/**
+ * Divider component props
+ */
+export interface DividerProps {
+    /** Orientation (horizontal or vertical) */
+    orientation?: DividerOrientation;
+    /** Line style (solid, dashed, dotted) */
+    lineStyle?: DividerStyle;
+    /** Spacing (margin) */
+    spacing?: DividerSpacing;
+    /** Custom color */
+    color?: string;
+    /** Custom thickness */
+    thickness?: number;
+    /** Text label (for text divider) */
+    text?: string;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Divider Component
+ *
+ * Visual separator for content sections.
+ * Supports horizontal, vertical, and text variants.
+ *
+ * USAGE:
+ * ```typescript
+ * // Horizontal divider (default)
+ * <Divider />
+ *
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * // Text divider (OR separator)
+ * <Divider text="OR" />
+ *
+ * // Custom spacing
+ * <Divider spacing="large" />
+ *
+ * // Dashed style
+ * <Divider lineStyle="dashed" />
+ *
+ * // Custom color
+ * <Divider color="#FF0000" />
+ * ```
+ */
+export const Divider: React.FC<DividerProps> = ({
+    orientation = DIVIDER_CONSTANTS.DEFAULT_ORIENTATION,
+    lineStyle = DIVIDER_CONSTANTS.DEFAULT_STYLE,
+    spacing = DIVIDER_CONSTANTS.DEFAULT_SPACING,
+    color,
+    thickness = DIVIDER_CONSTANTS.DEFAULT_THICKNESS,
+    text,
+    style,
+}) => {
+    const tokens = useAppDesignTokens();
+    const spacingValue = DividerUtils.getSpacing(spacing);
+    const borderColor = color || tokens.colors.border;
+
+    // Determine border style based on lineStyle
+    const getBorderStyle = (): 'solid' | 'dashed' | 'dotted' => {
+        return lineStyle;
+    };
+
+    // Horizontal divider
+    if (orientation === 'horizontal' && !text) {
+        return (
+            <View
+                style={[
+                    styles.horizontal,
+                    {
+                        marginVertical: spacingValue,
+                        borderBottomWidth: thickness,
+                        borderBottomColor: borderColor,
+                        borderStyle: getBorderStyle(),
+                    },
+                    style,
+                ]}
+            />
+        );
+    }
+
+    // Vertical divider
+    if (orientation === 'vertical') {
+        return (
+            <View
+                style={[
+                    styles.vertical,
+                    {
+                        marginHorizontal: spacingValue,
+                        borderLeftWidth: thickness,
+                        borderLeftColor: borderColor,
+                        borderStyle: getBorderStyle(),
+                    },
+                    style,
+                ]}
+            />
+        );
+    }
+
+    // Text divider (horizontal with text label)
+    if (text) {
+        return (
+            <View
+                style={[
+                    styles.textContainer,
+                    {
+                        marginVertical: spacingValue,
+                    },
+                    style,
+                ]}
+            >
+                <View
+                    style={[
+                        styles.textLine,
+                        {
+                            borderBottomWidth: thickness,
+                            borderBottomColor: borderColor,
+                            borderStyle: getBorderStyle(),
+                        },
+                    ]}
+                />
+                <AtomicText
+                    type="bodySmall"
+                    color="secondary"
+                    style={styles.textLabel}
+                >
+                    {text}
+                </AtomicText>
+                <View
+                    style={[
+                        styles.textLine,
+                        {
+                            borderBottomWidth: thickness,
+                            borderBottomColor: borderColor,
+                            borderStyle: getBorderStyle(),
+                        },
+                    ]}
+                />
+            </View>
+        );
+    }
+
+    return null;
+};
+
+const styles = StyleSheet.create({
+    horizontal: {
+        width: '100%',
+    },
+    vertical: {
+        height: '100%',
+    },
+    textContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+    },
+    textLine: {
+        flex: 1,
+    },
+    textLabel: {
+        marginHorizontal: 12,
+        fontWeight: '500',
+    },
+});

package/src/molecules/Divider/index.ts

@@ -0,0 +1,2 @@
+export * from './Divider';
+export * from './types';

package/src/molecules/Divider/types.ts

@@ -0,0 +1,88 @@
+/**
+ * Divider Domain - Entity Definitions
+ *
+ * Core types and interfaces for dividers and separators.
+ * Simple visual separators for content sections.
+ *
+ * @domain divider
+ * @layer domain/entities
+ */
+
+/**
+ * Divider orientation
+ */
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Divider style
+ */
+export type DividerStyle = 'solid' | 'dashed' | 'dotted';
+
+/**
+ * Divider spacing
+ */
+export type DividerSpacing = 'none' | 'small' | 'medium' | 'large';
+
+/**
+ * Divider configuration
+ */
+export interface DividerConfig {
+    /** Orientation */
+    orientation: DividerOrientation;
+    /** Line style */
+    style: DividerStyle;
+    /** Spacing (margin) */
+    spacing: DividerSpacing;
+    /** Custom color */
+    color?: string;
+    /** Custom thickness */
+    thickness?: number;
+    /** Text label (for text divider) */
+    text?: string;
+}
+
+/**
+ * Spacing configurations (px)
+ */
+export const SPACING_CONFIGS: Record<DividerSpacing, number> = {
+    none: 0,
+    small: 8,
+    medium: 16,
+    large: 24,
+};
+
+/**
+ * Divider utility class
+ */
+export class DividerUtils {
+    /**
+     * Get spacing value
+     */
+    static getSpacing(spacing: DividerSpacing): number {
+        return SPACING_CONFIGS[spacing];
+    }
+
+    /**
+     * Validate divider config
+     */
+    static validateConfig(config: Partial<DividerConfig>): DividerConfig {
+        return {
+            orientation: config.orientation || 'horizontal',
+            style: config.style || 'solid',
+            spacing: config.spacing || 'medium',
+            color: config.color,
+            thickness: config.thickness || 1,
+            text: config.text,
+        };
+    }
+}
+
+/**
+ * Divider constants
+ */
+export const DIVIDER_CONSTANTS = {
+    DEFAULT_ORIENTATION: 'horizontal' as DividerOrientation,
+    DEFAULT_STYLE: 'solid' as DividerStyle,
+    DEFAULT_SPACING: 'medium' as DividerSpacing,
+    DEFAULT_THICKNESS: 1,
+} as const;

package/src/molecules/index.ts

@@ -17,3 +17,6 @@ export type {
   ConfirmationModalProps,
   ConfirmationModalVariant,
 } from './confirmation-modal/types/';
+
+// Divider
+export * from './Divider';