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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.0.1",
+  "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/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';