@umituz/react-native-design-system 2.5.14 → 2.5.16

package/package.json

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

package/src/atoms/AtomicSwitch.tsx

@@ -0,0 +1,83 @@
+/**
+ * AtomicSwitch - Toggle Switch Component
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Boolean toggle across all apps
+ */
+
+import React from 'react';
+import { View, Switch, StyleSheet, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText } from './AtomicText';
+
+export interface AtomicSwitchProps {
+  label?: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  description?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+export const AtomicSwitch: React.FC<AtomicSwitchProps> = ({
+  label,
+  value,
+  onValueChange,
+  disabled = false,
+  description,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      <View style={styles.row}>
+        {label && (
+          <View style={styles.labelContainer}>
+            <AtomicText
+              type="bodyMedium"
+              style={{ color: tokens.colors.textPrimary }}
+            >
+              {label}
+            </AtomicText>
+            {description && (
+              <AtomicText
+                type="bodySmall"
+                style={{ color: tokens.colors.textSecondary, marginTop: 2 }}
+              >
+                {description}
+              </AtomicText>
+            )}
+          </View>
+        )}
+        <Switch
+          value={value}
+          onValueChange={onValueChange}
+          disabled={disabled}
+          trackColor={{
+            false: tokens.colors.border,
+            true: tokens.colors.primary,
+          }}
+          thumbColor={value ? tokens.colors.onPrimary : tokens.colors.surface}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  labelContainer: {
+    flex: 1,
+    marginRight: 16,
+  },
+});

package/src/atoms/AtomicTextArea.tsx

@@ -0,0 +1,105 @@
+/**
+ * AtomicTextArea - Multiline Text Input Component
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Multiline text input across all apps
+ */
+
+import React from 'react';
+import { View, TextInput, StyleSheet, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText } from './AtomicText';
+
+export interface AtomicTextAreaProps {
+  label?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  placeholder?: string;
+  helperText?: string;
+  errorText?: string;
+  maxLength?: number;
+  numberOfLines?: number;
+  disabled?: boolean;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  helperText,
+  errorText,
+  maxLength,
+  numberOfLines = 4,
+  disabled = false,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const hasError = !!errorText;
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {label && (
+        <AtomicText
+          type="labelMedium"
+          style={[styles.label, { color: tokens.colors.textSecondary }]}
+        >
+          {label}
+        </AtomicText>
+      )}
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={tokens.colors.textTertiary}
+        maxLength={maxLength}
+        numberOfLines={numberOfLines}
+        multiline
+        editable={!disabled}
+        textAlignVertical="top"
+        style={[
+          styles.input,
+          {
+            backgroundColor: tokens.colors.surface,
+            borderColor: hasError ? tokens.colors.error : tokens.colors.border,
+            color: tokens.colors.textPrimary,
+            minHeight: numberOfLines * 24,
+          },
+          disabled && { opacity: 0.5 },
+        ]}
+      />
+      {(helperText || errorText) && (
+        <AtomicText
+          type="bodySmall"
+          style={[
+            styles.helperText,
+            { color: hasError ? tokens.colors.error : tokens.colors.textSecondary },
+          ]}
+        >
+          {errorText || helperText}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    marginBottom: 8,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+    fontSize: 16,
+  },
+  helperText: {
+    marginTop: 4,
+  },
+});

package/src/atoms/AtomicTouchable.tsx

@@ -0,0 +1,42 @@
+/**
+ * AtomicTouchable - Touchable Component
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Touchable wrapper across all apps
+ */
+
+import React from 'react';
+import { TouchableOpacity, ViewStyle, StyleProp } from 'react-native';
+
+export interface AtomicTouchableProps {
+  children: React.ReactNode;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  disabled?: boolean;
+  activeOpacity?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
+  children,
+  onPress,
+  onLongPress,
+  disabled = false,
+  activeOpacity = 0.7,
+  style,
+  testID,
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      onLongPress={onLongPress}
+      disabled={disabled}
+      activeOpacity={activeOpacity}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};

package/src/atoms/EmptyState.tsx

@@ -0,0 +1,121 @@
+/**
+ * EmptyState - Universal Empty State Component
+ *
+ * Displays when no data is available
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Empty state indication across all apps
+ */
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
+import { AtomicIcon } from './AtomicIcon';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens, STATIC_TOKENS } from '../theme';
+
+export interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  subtitle?: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  illustration?: React.ReactNode;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon = 'inbox',
+  title,
+  subtitle,
+  description,
+  actionLabel,
+  onAction,
+  illustration,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const displayDescription = description || subtitle;
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {illustration ? (
+        illustration
+      ) : (
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: tokens.colors.surface },
+          ]}
+        >
+          <AtomicIcon name={icon} size="xxl" color="secondary" />
+        </View>
+      )}
+
+      <AtomicText
+        type="headlineSmall"
+        color="primary"
+        style={[styles.title, { textAlign: 'center' }]}
+      >
+        {title}
+      </AtomicText>
+
+      {displayDescription && (
+        <AtomicText
+          type="bodyMedium"
+          color="secondary"
+          style={[styles.description, { textAlign: 'center' }]}
+        >
+          {displayDescription}
+        </AtomicText>
+      )}
+
+      {actionLabel && onAction && (
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            { backgroundColor: tokens.colors.primary },
+          ]}
+          onPress={onAction}
+          activeOpacity={0.8}
+        >
+          <AtomicText type="labelLarge" color="onPrimary">
+            {actionLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: STATIC_TOKENS.spacing.xl,
+  },
+  iconContainer: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: STATIC_TOKENS.spacing.lg,
+  },
+  title: {
+    marginBottom: STATIC_TOKENS.spacing.sm,
+  },
+  description: {
+    marginBottom: STATIC_TOKENS.spacing.lg,
+    maxWidth: 280,
+  },
+  actionButton: {
+    paddingHorizontal: STATIC_TOKENS.spacing.lg,
+    paddingVertical: STATIC_TOKENS.spacing.md,
+    borderRadius: STATIC_TOKENS.borders.radius.md,
+    marginTop: STATIC_TOKENS.spacing.sm,
+  },
+});

package/src/atoms/index.ts

@@ -91,7 +91,20 @@ export {
 // Spinner
 export {
     AtomicSpinner,
+    AtomicSpinner as LoadingSpinner,
     type AtomicSpinnerProps,
     type SpinnerSize,
     type SpinnerColor,
 } from './AtomicSpinner';
+
+// Empty State
+export { EmptyState, type EmptyStateProps } from './EmptyState';
+
+// TextArea
+export { AtomicTextArea, type AtomicTextAreaProps } from './AtomicTextArea';
+
+// Switch
+export { AtomicSwitch, type AtomicSwitchProps } from './AtomicSwitch';
+
+// Touchable
+export { AtomicTouchable, type AtomicTouchableProps } from './AtomicTouchable';

package/src/index.ts

@@ -189,6 +189,8 @@ export {
   AtomicSkeleton,
   AtomicBadge,
   AtomicSpinner,
+  LoadingSpinner,
+  EmptyState,
   type IconName,
   type IconSize,
   type IconColor,
@@ -224,6 +226,13 @@ export {
   type AtomicSpinnerProps,
   type SpinnerSize,
   type SpinnerColor,
+  type EmptyStateProps,
+  AtomicTextArea,
+  type AtomicTextAreaProps,
+  AtomicSwitch,
+  type AtomicSwitchProps,
+  AtomicTouchable,
+  type AtomicTouchableProps,
 } from './atoms';
 
 // =============================================================================