@umituz/react-native-design-system 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Umit Uz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+# @umituz/react-native-design-system
+
+Universal design system for React Native apps following Domain-Driven Design (DDD) architecture with Material Design 3 components.
+
+## ✨ Features
+
+- 🎨 **Material Design 3** - Modern, accessible UI components
+- ⚛️ **Atomic Design** - Organized component hierarchy (Atoms → Molecules → Organisms)
+- 🏗️ **DDD Architecture** - Clean domain-driven structure
+- 🌓 **Theme Support** - Built-in light/dark mode
+- 📱 **Responsive** - Adaptive layouts for phones and tablets
+- ♿ **Accessible** - WCAG AA compliant components
+- 🎭 **Animations** - Smooth React Native Reanimated animations
+- 📦 **Zero Config** - Works out of the box
+
+## 📦 Installation
+
+```bash
+npm install @umituz/react-native-design-system
+```
+
+### Peer Dependencies
+
+```bash
+npm install react@18.3.1 react-native@0.76.3 react-native-paper@^5.12.5 react-native-reanimated@~3.10.1
+```
+
+## 🚀 Usage
+
+```typescript
+import {
+  AtomicButton,
+  AtomicText,
+  AtomicInput,
+  ScreenLayout,
+  useAppDesignTokens,
+} from '@umituz/react-native-design-system';
+
+const MyScreen = () => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <ScreenLayout>
+      <AtomicText type="headingLarge">Welcome</AtomicText>
+      <AtomicInput
+        label="Email"
+        placeholder="Enter your email"
+      />
+      <AtomicButton
+        variant="primary"
+        onPress={() => console.log('Pressed')}
+      >
+        Submit
+      </AtomicButton>
+    </ScreenLayout>
+  );
+};
+```
+
+## 🧩 Components
+
+### Atoms (Primitive UI Components)
+- `AtomicButton` - Material Design 3 buttons with variants
+- `AtomicText` - Typography with MD3 type scale
+- `AtomicInput` - Text inputs with validation
+- `AtomicCard` - Container cards
+- `AtomicIcon` - Icon components
+- `AtomicSwitch` - Toggle switches
+- `AtomicBadge` - Status badges
+- `AtomicProgress` - Progress indicators
+- And 15+ more...
+
+### Molecules (Composite Components)
+- `FormField` - Input with label and error
+- `ListItem` - Standard list item
+- `SearchBar` - Search input with icon
+- `EmptyState` - Empty state placeholder
+- `ScreenHeader` - Screen title header
+- And more...
+
+### Organisms (Complex Patterns)
+- `ScreenLayout` - Screen wrapper with safe area
+- `AppHeader` - Application header
+- `FormContainer` - Form layout container
+
+## 🎨 Design Tokens
+
+```typescript
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+const tokens = useAppDesignTokens();
+
+// Colors
+tokens.colors.primary
+tokens.colors.secondary
+tokens.colors.background
+tokens.colors.textPrimary
+
+// Spacing
+tokens.spacing.xs  // 4
+tokens.spacing.sm  // 8
+tokens.spacing.md  // 16
+tokens.spacing.lg  // 24
+tokens.spacing.xl  // 32
+
+// Typography
+tokens.typography.headingLarge
+tokens.typography.bodyMedium
+tokens.typography.caption
+```
+
+## 📱 Responsive Utilities
+
+```typescript
+import { useResponsive } from '@umituz/react-native-design-system';
+
+const responsive = useResponsive();
+
+// Device detection
+responsive.isSmallPhone
+responsive.isTablet
+responsive.isLandscape
+
+// Responsive values (pre-calculated)
+responsive.logoSize
+responsive.inputHeight
+responsive.horizontalPadding
+```
+
+## 🌓 Theme Integration
+
+This package works seamlessly with `@umituz/react-native-theme`:
+
+```typescript
+import { ThemeProvider } from '@umituz/react-native-theme';
+import { ScreenLayout } from '@umituz/react-native-design-system';
+
+const App = () => (
+  <ThemeProvider>
+    <ScreenLayout>
+      {/* Your app */}
+    </ScreenLayout>
+  </ThemeProvider>
+);
+```
+
+## 📖 Documentation
+
+Full documentation: [Coming Soon]
+
+## 🤝 Contributing
+
+Contributions welcome! This is the universal design system used across 100+ React Native apps.
+
+## 📄 License
+
+MIT © Umit Uz

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@umituz/react-native-design-system",
+  "version": "1.0.0",
+  "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "keywords": [
+    "react-native",
+    "design-system",
+    "material-design-3",
+    "ui-components",
+    "atomic-design",
+    "ddd",
+    "domain-driven-design"
+  ],
+  "author": "Umit Uz",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-design-system"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-paper": "^5.12.5",
+    "react-native-reanimated": "~3.10.1",
+    "@react-native-community/datetimepicker": "8.0.1",
+    "@expo/vector-icons": "^14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-community/datetimepicker": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/index.ts

@@ -0,0 +1,345 @@
+/**
+ * @umituz/react-native-design-system - Public API
+ *
+ * Universal UI component library for React Native apps
+ * Domain-Driven Design (DDD) Architecture
+ *
+ * This is the SINGLE SOURCE OF TRUTH for all UI components.
+ * ALL imports from the design system MUST go through this file.
+ *
+ * Architecture:
+ * - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
+ * - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
+ * - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
+ * - presentation/loading: Loading states (LoadingState, LoadingSpinner)
+ * - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
+ * - presentation/utils: Utility functions and helpers
+ *
+ * Usage:
+ *   import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, LoadingState, STATIC_TOKENS } from '@umituz/react-native-design-system';
+ */
+
+// =============================================================================
+// ATOMS - Primitive UI Components
+// =============================================================================
+
+export {
+  AtomicButton,
+  type AtomicButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+} from './presentation/atoms/AtomicButton';
+
+export {
+  AtomicText,
+  type AtomicTextProps,
+} from './presentation/atoms/AtomicText';
+
+export {
+  AtomicCard,
+  type AtomicCardProps,
+  type AtomicCardVariant,
+  type AtomicCardPadding,
+} from './presentation/atoms/AtomicCard';
+
+export {
+  AtomicInput,
+  type AtomicInputProps,
+  type AtomicInputVariant,
+  type AtomicInputState,
+  type AtomicInputSize,
+} from './presentation/atoms/AtomicInput';
+
+export {
+  AtomicNumberInput,
+  type AtomicNumberInputProps,
+} from './presentation/atoms/AtomicNumberInput';
+
+export {
+  AtomicSwitch,
+  type AtomicSwitchProps,
+} from './presentation/atoms/AtomicSwitch';
+
+export {
+  AtomicIcon,
+  type AtomicIconProps,
+  type AtomicIconSize,
+  type AtomicIconColor,
+} from './presentation/atoms/AtomicIcon';
+
+export {
+  AtomicFormError,
+  type AtomicFormErrorProps,
+} from './presentation/atoms/AtomicFormError';
+
+export {
+  AtomicDatePicker,
+  type AtomicDatePickerProps,
+} from './presentation/atoms/AtomicDatePicker';
+
+export {
+  AtomicPicker,
+  type AtomicPickerProps,
+  type PickerOption,
+  type PickerSize,
+} from './presentation/atoms/AtomicPicker';
+
+export {
+  AtomicTextArea,
+  type AtomicTextAreaProps,
+} from './presentation/atoms/AtomicTextArea';
+
+export {
+  AtomicBadge,
+  type AtomicBadgeProps,
+} from './presentation/atoms/AtomicBadge';
+
+export {
+  AtomicProgress,
+  type AtomicProgressProps,
+} from './presentation/atoms/AtomicProgress';
+
+export {
+  AtomicDivider,
+  type AtomicDividerProps,
+} from './presentation/atoms/AtomicDivider';
+
+export {
+  AtomicFab,
+  type AtomicFabProps,
+  type FabSize,
+  type FabVariant,
+  getFabVariants,
+} from './presentation/atoms/AtomicFab';
+
+export {
+  AtomicFilter,
+  type AtomicFilterProps,
+  type FilterOption,
+  getFilterContainerStyle,
+  getClearAllContainerStyle,
+  getScrollContentContainerStyle,
+} from './presentation/atoms/AtomicFilter';
+
+export {
+  AtomicTouchable,
+  type AtomicTouchableProps,
+  type TouchableFeedback,
+  type FeedbackStrength,
+  type HitSlop,
+  TouchablePresets,
+  getOpacityValue,
+  normalizeHitSlop,
+} from './presentation/atoms/AtomicTouchable';
+
+export {
+  AtomicSearchBar,
+  type AtomicSearchBarProps,
+} from './presentation/atoms/AtomicSearchBar';
+
+export {
+  AtomicSort,
+  type AtomicSortProps,
+  type SortOption,
+  type SortDirection,
+} from './presentation/atoms/AtomicSort';
+
+// =============================================================================
+// MOLECULES - Composite Components
+// =============================================================================
+
+export {
+  FormField,
+  type FormFieldProps,
+} from './presentation/molecules/FormField';
+
+export {
+  ListItem,
+  type ListItemProps,
+} from './presentation/molecules/ListItem';
+
+export {
+  SearchBar,
+  type SearchBarProps,
+} from './presentation/molecules/SearchBar';
+
+export {
+  LanguageSwitcher,
+} from './presentation/molecules/LanguageSwitcher';
+
+// SettingItem moved to @domains/settings/presentation/components/SettingItem
+// Import directly: import { SettingItem } from '@domains/settings/presentation/components/SettingItem';
+
+export {
+  SectionCard,
+} from './presentation/molecules/SectionCard';
+
+export {
+  IconContainer,
+} from './presentation/molecules/IconContainer';
+
+export {
+  SectionHeader,
+} from './presentation/molecules/SectionHeader';
+
+export {
+  EmptyState,
+} from './presentation/molecules/EmptyState';
+
+export {
+  GridContainer,
+} from './presentation/molecules/GridContainer';
+
+export {
+  SectionContainer,
+} from './presentation/molecules/SectionContainer';
+
+export {
+  ScreenHeader,
+  type ScreenHeaderProps,
+} from './presentation/molecules/ScreenHeader';
+
+export {
+  AtomicConfirmationModal,
+  useConfirmationModal,
+  type AtomicConfirmationModalProps,
+  type ConfirmationModalVariant,
+} from './presentation/molecules/AtomicConfirmationModal';
+
+// =============================================================================
+// ORGANISMS - Complex Patterns
+// =============================================================================
+
+export {
+  ScreenLayout,
+  type ScreenLayoutProps,
+} from './presentation/organisms/ScreenLayout';
+
+export {
+  AppHeader,
+  type AppHeaderProps,
+} from './presentation/organisms/AppHeader';
+
+export {
+  FormContainer,
+  type FormContainerProps,
+} from './presentation/organisms/FormContainer';
+
+// Note: FeedbackModal moved to @domains/feedback
+// Import from feedback domain: import { FeedbackModal } from '@domains/feedback';
+
+// =============================================================================
+// LOADING - Loading States
+// =============================================================================
+
+export {
+  LoadingState,
+  type LoadingStateProps,
+  type LoadingStateSize,
+} from './presentation/loading/presentation/components/LoadingState';
+
+export {
+  LoadingSpinner,
+  type LoadingSpinnerProps,
+  type LoadingSpinnerSize,
+  type LoadingSpinnerColor,
+} from './presentation/loading/presentation/components/LoadingSpinner';
+
+export {
+  useLoading,
+  type LoadingConfig,
+  type UseLoadingReturn,
+} from './presentation/loading/presentation/hooks/useLoading';
+
+// =============================================================================
+// TOKENS - Design Tokens (Refactored with ZERO duplication)
+// =============================================================================
+
+export {
+  // Static tokens (don't change with theme)
+  STATIC_TOKENS,
+  BASE_TOKENS,
+
+  // Token factory
+  createDesignTokens,
+
+  // Color utilities
+  withAlpha,
+  lightColors,
+  darkColors,
+  getColorPalette,
+
+  // Individual base tokens
+  spacing,
+  typography,
+  animations,
+  borders,
+
+  // Type exports
+  type DesignTokens,
+  type ThemeMode,
+  type ColorPalette,
+  type Spacing,
+  type Typography,
+  type Animations,
+  type Borders,
+  type BaseTokens,
+} from './presentation/tokens/AppDesignTokens';
+
+// Hook for dynamic theme-aware tokens (exported separately to avoid cycle)
+export { useAppDesignTokens } from './presentation/hooks/useAppDesignTokens';
+
+export {
+  useCommonStyles,
+} from './presentation/tokens/commonStyles';
+
+// =============================================================================
+// UTILITIES - Helper Functions
+// =============================================================================
+
+export {
+  IOS_HIG,
+  ANDROID_MATERIAL,
+  PLATFORM_CONSTANTS,
+  isValidTouchTarget,
+  getMinTouchTarget,
+} from './presentation/utils/platformConstants';
+
+// =============================================================================
+// RESPONSIVE UTILITIES - Centralized Responsive Management
+// =============================================================================
+
+export {
+  useResponsive,
+  useResponsiveSizes,
+  useDeviceType,
+  type UseResponsiveReturn,
+} from './presentation/hooks/useResponsive';
+
+export {
+  getScreenDimensions,
+  isSmallPhone,
+  isTablet,
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveHorizontalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveGridColumns,
+  getResponsiveMaxWidth,
+  getResponsiveFontSize,
+  isLandscape,
+  getKeyboardBehavior,
+  getDeviceType,
+  getMinTouchTargetSize,
+  getSpacingMultiplier,
+  getOnboardingIconMarginTop,
+  getOnboardingIconMarginBottom,
+  getOnboardingTitleMarginBottom,
+  getOnboardingTextPadding,
+  getOnboardingDescriptionMarginTop,
+  DeviceType,
+} from './presentation/utils/responsive';