@umituz/react-native-design-system 2.6.103 → 2.6.105

package/src/atoms/AtomicCard.tsx

@@ -1,104 +0,0 @@
-/**
- * AtomicCard Component
- *
- * A simple, styled card container component
- */
-
-import React from 'react';
-import {
-  View,
-  Pressable,
-  StyleSheet,
-  type ViewStyle,
-  type StyleProp,
-  type GestureResponderEvent,
-} 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;
-  onPress?: (event: GestureResponderEvent) => void;
-  disabled?: boolean;
-}
-
-export const AtomicCard: React.FC<AtomicCardProps> = ({
-  children,
-  variant = 'elevated',
-  padding = 'md',
-  style,
-  testID,
-  onPress,
-  disabled,
-}) => {
-    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,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.outlineVariant || tokens.colors.outline,
-                };
-            case 'outlined':
-                return {
-                    backgroundColor: tokens.colors.surface,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.outline,
-                };
-            case 'filled':
-                return {
-                    backgroundColor: tokens.colors.surfaceVariant,
-                };
-            default:
-                return {};
-        }
-    };
-
-  const cardStyle = [
-    styles.card,
-    { borderRadius: tokens.borders.radius.md },
-    { padding: paddingValues[padding] },
-    getVariantStyle(),
-    style,
-  ];
-
-  if (onPress) {
-    return (
-      <Pressable
-        style={cardStyle}
-        testID={testID}
-        onPress={onPress}
-        disabled={disabled}
-      >
-        {children}
-      </Pressable>
-    );
-  }
-
-  return (
-    <View style={cardStyle} testID={testID}>
-      {children}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  card: {
-    overflow: 'hidden',
-  },
-});

package/src/molecules/GlowingCard/GlowingCard.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, StyleProp, ViewStyle, Pressable, GestureResponderEvent } from 'react-native';
-import { useAppDesignTokens } from '../../theme';
-
-export interface GlowingCardProps {
-  children: React.ReactNode;
-  glowColor?: string;
-  intensity?: number; // 0 to 1, default 1
-  style?: StyleProp<ViewStyle>;
-  onPress?: (event: GestureResponderEvent) => void;
-  testID?: string;
-}
-
-/**
- * GlowingCard
- * 
- * A card component with a neon-like glow effect using shadows.
- */
-export const GlowingCard: React.FC<GlowingCardProps> = ({
-  children,
-  glowColor,
-  intensity = 1,
-  style,
-  onPress,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-  const resolvedColor = glowColor || tokens.colors.primary;
-
-  const shadowStyle: ViewStyle = {
-    shadowColor: resolvedColor,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.6 * intensity,
-    shadowRadius: 10 * intensity,
-    elevation: 8 * intensity, // Android elevation
-    // We allow the style prop to override backgroundColor, default to surface if not provided
-    backgroundColor: tokens.colors.surface, 
-    borderRadius: tokens.borders.radius.md,
-    borderColor: resolvedColor,
-    borderWidth: 1,
-  };
-
-  // Extract background color from style if present to override default
-  const styleObj = StyleSheet.flatten(style) || {};
-  const finalBackgroundColor = styleObj.backgroundColor || shadowStyle.backgroundColor;
-
-  const containerStyle = [
-    styles.container,
-    shadowStyle,
-    style,
-    // Ensure background color is consistent
-    { backgroundColor: finalBackgroundColor }
-  ];
-
-  if (onPress) {
-    return (
-      <Pressable 
-        style={({ pressed }) => [
-          containerStyle,
-          pressed && { opacity: 0.9, transform: [{ scale: 0.98 }] }
-        ]} 
-        onPress={onPress}
-        testID={testID}
-      >
-        {children}
-      </Pressable>
-    );
-  }
-
-  return (
-    <View style={containerStyle} testID={testID}>
-      {children}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden', // Clip content to border radius
-  },
-});

package/src/molecules/GlowingCard/README.md

@@ -1,306 +0,0 @@
-# GlowingCard
-
-A card component with neon-like glowing shadow effect for highlighting important content and creating visual emphasis.
-
-## Import & Usage
-
-```typescript
-import { GlowingCard } from 'react-native-design-system/src/molecules/GlowingCard';
-```
-
-**Location:** `src/molecules/GlowingCard/GlowingCard.tsx`
-
-## Basic Usage
-
-```tsx
-<GlowingCard glowColor="#6366f1" intensity={0.5}>
-  <YourContent />
-</GlowingCard>
-```
-
-## Strategy
-
-**Purpose**: Create visual emphasis and draw attention to specific content through glowing effects.
-
-**When to Use**:
-- Featured products or items
-- Premium content highlighting
-- Important announcements
-- Achievement badges
-- Limited-time offers
-- User highlights (verified users, contributors)
-
-**When NOT to Use**:
-- Regular content cards (use AtomicCard instead)
-- Multiple items on same screen (causes visual clutter)
-- Background elements
-- Non-essential content
-
-## Rules
-
-### Required
-
-1. **MUST** provide a `glowColor` prop
-2. **MUST** keep `intensity` between 0.3 and 0.8
-3. **ALWAYS** use sparingly (max 1-2 per screen)
-4. **MUST** ensure sufficient contrast with glow color
-5. **SHOULD** have purpose (highlight featured content)
-
-### Intensity Guidelines
-
-1. **Subtle emphasis**: 0.3 - 0.5
-2. **Medium emphasis**: 0.5 - 0.7
-3. **Strong emphasis**: 0.7 - 0.8
-
-**Never use intensity > 0.8** (too distracting)
-
-### Color Selection
-
-1. **MUST** use theme colors when possible
-2. **SHOULD** match content purpose
-3. **NEVER** use pure neon colors (#00FF00, #FF00FF, etc.)
-
-## Forbidden
-
-❌ **NEVER** do these:
-
-```tsx
-// ❌ No glow color
-<GlowingCard>
-  <Content />
-</GlowingCard>
-
-// ❌ Too high intensity
-<GlowingCard glowColor="#6366f1" intensity={1.0}>
-  <Content />
-</GlowingCard>
-
-// ❌ Too many glowing cards
-<View>
-  <GlowingCard glowColor="#6366f1"><Content1 /></GlowingCard>
-  <GlowingCard glowColor="#10b981"><Content2 /></GlowingCard>
-  <GlowingCard glowColor="#f59e0b"><Content3 /></GlowingCard>
-  {/* ❌ Max 1-2 per screen */}
-</View>
-
-// ❌ Neon colors
-<GlowingCard glowColor="#00FF00" intensity={0.8}>
-  <Content />
-</GlowingCard>
-
-// ❌ Non-essential content
-<GlowingCard glowColor="#6366f1">
-  <RegularContent /> {/* ❌ Use AtomicCard instead */}
-</GlowingCard>
-
-// ❌ Nested GlowingCards
-<GlowingCard glowColor="#6366f1">
-  <GlowingCard glowColor="#10b981">
-    <Content />
-  </GlowingCard>
-</GlowingCard>
-```
-
-## Best Practices
-
-### Featured Content
-
-✅ **DO**:
-```tsx
-<GlowingCard
-  glowColor={tokens.colors.primary}
-  intensity={0.6}
-  onPress={() => navigateTo(featuredItem)}
->
-  <FeaturedProductCard product={featuredProduct} />
-</GlowingCard>
-```
-
-❌ **DON'T**:
-```tsx
-<GlowingCard glowColor="#ff0000" intensity={0.9}>
-  <RegularProduct />
-</GlowingCard>
-```
-
-### Achievement Badges
-
-✅ **DO**:
-```tsx
-<GlowingCard
-  glowColor="#f59e0b"
-  intensity={0.5}
-  style={{ width: 120, height: 120 }}
->
-  <AchievementBadge achievement={achievement} />
-</GlowingCard>
-```
-
-### User Highlights
-
-✅ **DO**:
-```tsx
-<GlowingCard glowColor="#8b5cf6" intensity={0.4}>
-  <UserHighlight user={verifiedUser} />
-</GlowingCard>
-```
-
-### Color by Purpose
-
-✅ **DO**:
-- Primary actions: Theme primary color
-- Success: Green (#10b981, #22c55e)
-- Warning: Orange/Amber (#f59e0b, #f97316)
-- Error: Red (#ef4444, #dc2626)
-- Info: Blue (#3b82f6, #2563eb)
-
-❌ **DON'T**:
-```tsx
-// ❌ Random colors
-<GlowingCard glowColor="#123456" />
-
-// ❌ Too bright
-<GlowingCard glowColor="#00FF00" />
-```
-
-## AI Coding Guidelines
-
-### For AI Agents
-
-When generating GlowingCard components, follow these rules:
-
-1. **Always import from correct path**:
-   ```typescript
-   import { GlowingCard } from 'react-native-design-system/src/molecules/GlowingCard';
-   ```
-
-2. **Always specify glowColor**:
-   ```tsx
-   <GlowingCard
-     glowColor={根据内容选择合适的颜色}
-     intensity={0.5-0.7之间的值}
-   >
-     {content}
-   </GlowingCard>
-   ```
-
-3. **Never use without purpose**:
-   ```tsx
-   // ❌ Bad - arbitrary use
-   <GlowingCard glowColor="#6366f1">
-     <RegularContent />
-   </GlowingCard>
-
-   // ✅ Good - featured content
-   {isFeatured && (
-     <GlowingCard glowColor="#6366f1" intensity={0.6}>
-       <FeaturedContent />
-     </GlowingCard>
-   )}
-   ```
-
-4. **Always limit usage on screen**:
-   ```tsx
-   // ✅ Good - conditional highlighting
-   <View>
-     {items.map((item, index) =>
-       item.isFeatured ? (
-         <GlowingCard key={item.id} glowColor="#6366f1" intensity={0.6}>
-           <ItemCard item={item} />
-         </GlowingCard>
-       ) : (
-         <AtomicCard key={item.id}>
-           <ItemCard item={item} />
-         </AtomicCard>
-       )
-     )}
-   </View>
-   ```
-
-5. **Always use semantic colors**:
-   ```tsx
-   // ✅ Good - color by purpose
-   const getGlowColor = (type: 'success' | 'warning' | 'error') => {
-     switch (type) {
-       case 'success': return '#10b981';
-       case 'warning': return '#f59e0b';
-       case 'error': return '#ef4444';
-       default: return tokens.colors.primary;
-     }
-   };
-
-   <GlowingCard glowColor={getGlowColor(type)} />
-   ```
-
-### Common Patterns
-
-#### Featured Product
-```tsx
-<GlowingCard
-  glowColor="#6366f1"
-  intensity={0.6}
-  onPress={() => navigation.navigate('Product', { productId: product.id })}
->
-  <ProductCard product={product} variant="featured" />
-</GlowingCard>
-```
-
-#### Achievement Badge
-```tsx
-<GlowingCard
-  glowColor="#f59e0b"
-  intensity={0.5}
-  style={{ margin: 8 }}
->
-  <AchievementBadge achievement={achievement} />
-</GlowingCard>
-```
-
-#### Notification Card
-```tsx
-<GlowingCard
-  glowColor={notification.urgency === 'high' ? '#ef4444' : '#3b82f6'}
-  intensity={notification.urgency === 'high' ? 0.7 : 0.4}
-  onPress={() => markAsRead(notification.id)}
->
-  <NotificationCard notification={notification} />
-</GlowingCard>
-```
-
-## Props Reference
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `glowColor` | `string` | **Yes** | Theme primary color | Glow color (hex) |
-| `intensity` | `number` | No | `0.5` | Glow intensity (0-1) |
-| `borderWidth` | `number` | No | `0` | Border width |
-| `borderColor` | `string` | No | Same as glowColor | Border color |
-| `onPress` | `() => void` | No | - | Press callback |
-| `style` | `ViewStyle` | No | - | Custom container style |
-| `children` | `ReactNode` | **Yes** | - | Card content |
-
-## Accessibility
-
-- ✅ Screen reader announces card content
-- ✅ Touch target size maintained (min 44x44pt)
-- ✅ Focus indicators for pressable cards
-- ✅ Sufficient color contrast with glow
-- ✅ Semantic structure preserved
-
-## Performance Tips
-
-1. **Use sparingly**: Only for highlights (1-2 per screen max)
-2. **Lower intensity**: Better performance with 0.3-0.5
-3. **Avoid animation**: Static glow more performant
-4. **Conditional rendering**: Don't use for every card
-5. **Memo content**: Memo card content to prevent re-renders
-
-## Related Components
-
-- [`AtomicCard`](../../atoms/AtomicCard/README.md) - Base card component
-- [`MediaCard`](../media-card/README.md) - Media card component
-- [`AtomicIcon`](../../atoms/AtomicIcon/README.md) - Icon component
-
-## License
-
-MIT

package/src/molecules/GlowingCard/index.ts

@@ -1 +0,0 @@
-export * from './GlowingCard';

package/src/molecules/info-card/InfoCard.tsx

@@ -1,44 +0,0 @@
-
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText } from '../../atoms/AtomicText';
-import { useAppDesignTokens } from '../../theme';
-import type { InfoCardProps } from './types';
-
-export const InfoCard: React.FC<InfoCardProps> = ({
-  title,
-  content,
-  style,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = StyleSheet.create({
-    container: {
-      backgroundColor: tokens.colors.surface,
-      borderRadius: tokens.borders.radius.xl,
-      padding: tokens.spacing.lg,
-      borderWidth: 1,
-      borderColor: tokens.colors.outlineVariant,
-    },
-    title: {
-      ...tokens.typography.labelLarge,
-      color: tokens.colors.primary,
-      fontWeight: '800', // Using string as expected by RN
-      textTransform: 'uppercase',
-      letterSpacing: 1,
-      marginBottom: tokens.spacing.xs,
-    },
-    content: {
-      ...tokens.typography.bodyMedium,
-      color: tokens.colors.textPrimary,
-      lineHeight: 22,
-    },
-  });
-
-  return (
-    <View style={[styles.container, style]}>
-      <AtomicText style={styles.title}>{title}</AtomicText>
-      <AtomicText style={styles.content}>{content}</AtomicText>
-    </View>
-  );
-};

package/src/molecules/info-card/index.ts

@@ -1,3 +0,0 @@
-
-export * from './InfoCard';
-export * from './types';

package/src/molecules/info-card/types.ts

@@ -1,9 +0,0 @@
-
-import React from 'react';
-import { ViewStyle, StyleProp } from 'react-native';
-
-export interface InfoCardProps {
-  title: string;
-  content: string;
-  style?: StyleProp<ViewStyle>;
-}

package/src/molecules/media-card/MediaCard.tsx

@@ -1,157 +0,0 @@
-/**
- * AtomicMediaCard - Reusable media card component
- *
- * Displays an image with optional overlay text, badge, and selection state.
- * Used for grids of images, memes, templates, etc.
- */
-
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  type ImageStyle,
-} from 'react-native';
-import { AtomicText, AtomicIcon } from '../../atoms';
-import { useAppDesignTokens } from '../../theme';
-
-import type { MediaCardProps } from './types';
-
-export const MediaCard: React.FC<MediaCardProps> = ({
-  uri,
-  title,
-  subtitle,
-  badge,
-  selected = false,
-  size = 'md',
-  aspectRatio = 0.8,
-  overlayPosition = 'bottom',
-  showOverlay = true,
-  onPress,
-  width,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const sizeConfig = {
-    sm: { width: width || 120, borderRadius: tokens.radius.sm },
-    md: { width: width || 144, borderRadius: tokens.radius.md },
-    lg: { width: width || 160, borderRadius: tokens.radius.lg },
-  };
-
-  const config = sizeConfig[size];
-  const height = config.width / aspectRatio;
-
-  const styles = StyleSheet.create({
-    container: {
-      width: config.width,
-      height,
-      borderRadius: config.borderRadius,
-      overflow: 'hidden',
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderWidth: selected ? tokens.borders.width.medium : tokens.borders.width.thin,
-      borderColor: selected ? tokens.colors.primary : tokens.colors.outline,
-    },
-    image: {
-      width: '100%',
-      height: '100%',
-    } as ImageStyle,
-    badge: {
-      position: 'absolute',
-      top: tokens.spacing.sm,
-      right: tokens.spacing.sm,
-      backgroundColor: tokens.colors.primary,
-      paddingHorizontal: tokens.spacing.sm,
-      paddingVertical: tokens.spacing.xs,
-      borderRadius: tokens.borders.radius.full,
-      zIndex: 10,
-    },
-    badgeText: {
-      color: tokens.colors.onPrimary,
-      fontSize: tokens.typography.labelSmall.fontSize,
-      fontWeight: 'bold',
-    },
-    overlay: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      backgroundColor: tokens.colors.surfaceVariant,
-      opacity: 0.95,
-      justifyContent: 'flex-end',
-      paddingVertical: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.sm,
-    },
-    textContainer: {
-      width: '100%',
-    },
-    title: {
-      fontSize: tokens.typography.bodyMedium.fontSize,
-      fontWeight: 'bold',
-      color: tokens.colors.textInverse,
-      textAlign: 'left',
-      marginBottom: tokens.spacing.xs,
-    },
-    subtitle: {
-      fontSize: tokens.typography.bodySmall.fontSize,
-      color: tokens.colors.textSecondary,
-      opacity: 0.9,
-      textAlign: 'left',
-    },
-    checkCircle: {
-      position: 'absolute',
-      top: tokens.spacing.sm,
-      right: tokens.spacing.sm,
-      backgroundColor: tokens.colors.primary,
-      borderRadius: tokens.borders.radius.full,
-      width: tokens.spacing.lg,
-      height: tokens.spacing.lg,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-  });
-
-  const CardWrapper = onPress ? TouchableOpacity : View;
-  const wrapperProps = onPress
-    ? {
-        onPress,
-        activeOpacity: 0.8,
-        testID,
-      }
-    : { testID };
-
-  return (
-    <CardWrapper style={styles.container} {...wrapperProps}>
-      {badge && (
-        <View style={styles.badge}>
-          <AtomicText style={styles.badgeText}>{badge}</AtomicText>
-        </View>
-      )}
-      <Image source={{ uri }} style={styles.image} resizeMode="cover" />
-
-      {showOverlay && (title || subtitle) && (
-        <View style={styles.overlay}>
-          <View style={styles.textContainer}>
-            {title && (
-              <AtomicText style={styles.title} numberOfLines={1}>
-                {title}
-              </AtomicText>
-            )}
-            {subtitle && (
-              <AtomicText style={styles.subtitle} numberOfLines={1}>
-                {subtitle}
-              </AtomicText>
-            )}
-          </View>
-        </View>
-      )}
-
-      {selected && (
-        <View style={styles.checkCircle}>
-          <AtomicIcon name="checkmark-outline" size="sm" color="onPrimary" />
-        </View>
-      )}
-    </CardWrapper>
-  );
-};