mumucc 0.4.4 → 0.4.10

package/defaults/plugin-seed/marketplaces/claude-code-workflows/plugins/ui-design/skills/react-native-design/references/styling-patterns.md

@@ -0,0 +1,871 @@
+# React Native Styling Patterns
+
+## StyleSheet Fundamentals
+
+### Creating Styles
+
+```typescript
+import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from "react-native";
+
+// Typed styles for better IDE support
+interface Styles {
+  container: ViewStyle;
+  title: TextStyle;
+  image: ImageStyle;
+}
+
+const styles = StyleSheet.create<Styles>({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: "#ffffff",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: "#1f2937",
+  },
+  image: {
+    width: 100,
+    height: 100,
+    borderRadius: 8,
+  },
+});
+```
+
+### Combining Styles
+
+```typescript
+import { StyleProp, ViewStyle } from 'react-native';
+
+interface BoxProps {
+  style?: StyleProp<ViewStyle>;
+  variant?: 'default' | 'primary' | 'danger';
+}
+
+function Box({ style, variant = 'default' }: BoxProps) {
+  return (
+    <View
+      style={[
+        styles.base,
+        variant === 'primary' && styles.primary,
+        variant === 'danger' && styles.danger,
+        style, // Allow external style overrides
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: '#f3f4f6',
+  },
+  primary: {
+    backgroundColor: '#6366f1',
+  },
+  danger: {
+    backgroundColor: '#ef4444',
+  },
+});
+```
+
+## Theme System
+
+### Theme Context
+
+```typescript
+import React, { createContext, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+
+interface Theme {
+  colors: {
+    primary: string;
+    secondary: string;
+    background: string;
+    surface: string;
+    text: string;
+    textSecondary: string;
+    border: string;
+    error: string;
+    success: string;
+  };
+  spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  borderRadius: {
+    sm: number;
+    md: number;
+    lg: number;
+    full: number;
+  };
+  typography: {
+    h1: { fontSize: number; fontWeight: string; lineHeight: number };
+    h2: { fontSize: number; fontWeight: string; lineHeight: number };
+    body: { fontSize: number; fontWeight: string; lineHeight: number };
+    caption: { fontSize: number; fontWeight: string; lineHeight: number };
+  };
+}
+
+const lightTheme: Theme = {
+  colors: {
+    primary: '#6366f1',
+    secondary: '#8b5cf6',
+    background: '#ffffff',
+    surface: '#f9fafb',
+    text: '#1f2937',
+    textSecondary: '#6b7280',
+    border: '#e5e7eb',
+    error: '#ef4444',
+    success: '#10b981',
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  },
+  borderRadius: {
+    sm: 4,
+    md: 8,
+    lg: 16,
+    full: 9999,
+  },
+  typography: {
+    h1: { fontSize: 32, fontWeight: '700', lineHeight: 40 },
+    h2: { fontSize: 24, fontWeight: '600', lineHeight: 32 },
+    body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
+    caption: { fontSize: 12, fontWeight: '400', lineHeight: 16 },
+  },
+};
+
+const darkTheme: Theme = {
+  ...lightTheme,
+  colors: {
+    primary: '#818cf8',
+    secondary: '#a78bfa',
+    background: '#111827',
+    surface: '#1f2937',
+    text: '#f9fafb',
+    textSecondary: '#9ca3af',
+    border: '#374151',
+    error: '#f87171',
+    success: '#34d399',
+  },
+};
+
+const ThemeContext = createContext<Theme>(lightTheme);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const colorScheme = useColorScheme();
+  const theme = useMemo(
+    () => (colorScheme === 'dark' ? darkTheme : lightTheme),
+    [colorScheme]
+  );
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+```
+
+### Using Theme
+
+```typescript
+import { useTheme } from './theme';
+
+function ThemedCard() {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={{
+        backgroundColor: theme.colors.surface,
+        padding: theme.spacing.md,
+        borderRadius: theme.borderRadius.lg,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+      }}
+    >
+      <Text
+        style={{
+          ...theme.typography.h2,
+          color: theme.colors.text,
+          marginBottom: theme.spacing.sm,
+        }}
+      >
+        Card Title
+      </Text>
+      <Text
+        style={{
+          ...theme.typography.body,
+          color: theme.colors.textSecondary,
+        }}
+      >
+        Card description text
+      </Text>
+    </View>
+  );
+}
+```
+
+## Responsive Design
+
+### Screen Dimensions
+
+```typescript
+import { Dimensions, useWindowDimensions, PixelRatio } from 'react-native';
+
+// Get dimensions once (may be stale after rotation)
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+// Responsive scaling
+const guidelineBaseWidth = 375;
+const guidelineBaseHeight = 812;
+
+export const scale = (size: number) =>
+  (SCREEN_WIDTH / guidelineBaseWidth) * size;
+
+export const verticalScale = (size: number) =>
+  (SCREEN_HEIGHT / guidelineBaseHeight) * size;
+
+export const moderateScale = (size: number, factor = 0.5) =>
+  size + (scale(size) - size) * factor;
+
+// Hook for dynamic dimensions (handles rotation)
+function ResponsiveComponent() {
+  const { width, height } = useWindowDimensions();
+  const isLandscape = width > height;
+  const isTablet = width >= 768;
+
+  return (
+    <View style={{ flexDirection: isLandscape ? 'row' : 'column' }}>
+      {/* Content */}
+    </View>
+  );
+}
+```
+
+### Breakpoint System
+
+```typescript
+import { useWindowDimensions } from 'react-native';
+
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+
+const breakpoints = {
+  sm: 0,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+};
+
+export function useBreakpoint(): Breakpoint {
+  const { width } = useWindowDimensions();
+
+  if (width >= breakpoints.xl) return 'xl';
+  if (width >= breakpoints.lg) return 'lg';
+  if (width >= breakpoints.md) return 'md';
+  return 'sm';
+}
+
+export function useResponsiveValue<T>(values: Partial<Record<Breakpoint, T>>): T | undefined {
+  const breakpoint = useBreakpoint();
+  const breakpointOrder: Breakpoint[] = ['xl', 'lg', 'md', 'sm'];
+  const currentIndex = breakpointOrder.indexOf(breakpoint);
+
+  for (let i = currentIndex; i < breakpointOrder.length; i++) {
+    const bp = breakpointOrder[i];
+    if (values[bp] !== undefined) {
+      return values[bp];
+    }
+  }
+
+  return undefined;
+}
+
+// Usage
+function ResponsiveGrid() {
+  const columns = useResponsiveValue({ sm: 1, md: 2, lg: 3, xl: 4 }) ?? 1;
+
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+      {items.map((item) => (
+        <View key={item.id} style={{ width: `${100 / columns}%` }}>
+          <ItemCard item={item} />
+        </View>
+      ))}
+    </View>
+  );
+}
+```
+
+## Layout Components
+
+### Container
+
+```typescript
+import { View, ViewStyle, StyleProp } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from './theme';
+
+interface ContainerProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  edges?: ('top' | 'bottom' | 'left' | 'right')[];
+}
+
+export function Container({ children, style, edges = ['top', 'bottom'] }: ContainerProps) {
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        {
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          paddingTop: edges.includes('top') ? insets.top : 0,
+          paddingBottom: edges.includes('bottom') ? insets.bottom : 0,
+          paddingLeft: edges.includes('left') ? insets.left : 0,
+          paddingRight: edges.includes('right') ? insets.right : 0,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+```
+
+### Stack Components
+
+```typescript
+import { View, ViewStyle, StyleProp } from 'react-native';
+
+interface StackProps {
+  children: React.ReactNode;
+  spacing?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function VStack({ children, spacing = 8, style }: StackProps) {
+  return (
+    <View style={[{ gap: spacing }, style]}>
+      {children}
+    </View>
+  );
+}
+
+export function HStack({ children, spacing = 8, style }: StackProps) {
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center', gap: spacing }, style]}>
+      {children}
+    </View>
+  );
+}
+
+// Usage
+function Example() {
+  return (
+    <VStack spacing={16}>
+      <HStack spacing={8}>
+        <Avatar />
+        <VStack spacing={2}>
+          <Text style={styles.name}>John Doe</Text>
+          <Text style={styles.email}>john@example.com</Text>
+        </VStack>
+      </HStack>
+      <Button title="Edit Profile" />
+    </VStack>
+  );
+}
+```
+
+### Spacer
+
+```typescript
+import { View } from 'react-native';
+
+interface SpacerProps {
+  size?: number;
+  flex?: number;
+}
+
+export function Spacer({ size, flex }: SpacerProps) {
+  if (flex) {
+    return <View style={{ flex }} />;
+  }
+  return <View style={{ height: size, width: size }} />;
+}
+
+// Usage
+<HStack>
+  <Text>Left</Text>
+  <Spacer flex={1} />
+  <Text>Right</Text>
+</HStack>
+```
+
+## Shadow Styles
+
+### Cross-Platform Shadows
+
+```typescript
+import { Platform, ViewStyle } from "react-native";
+
+export function createShadow(elevation: number, color = "#000000"): ViewStyle {
+  if (Platform.OS === "android") {
+    return { elevation };
+  }
+
+  // iOS shadow mapping based on elevation
+  const shadowMap: Record<number, ViewStyle> = {
+    1: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.18,
+      shadowRadius: 1,
+    },
+    2: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+    },
+    4: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.22,
+      shadowRadius: 4,
+    },
+    8: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.25,
+      shadowRadius: 8,
+    },
+    16: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.3,
+      shadowRadius: 16,
+    },
+  };
+
+  return shadowMap[elevation] || shadowMap[4];
+}
+
+// Predefined shadow styles
+export const shadows = {
+  sm: createShadow(2),
+  md: createShadow(4),
+  lg: createShadow(8),
+  xl: createShadow(16),
+};
+
+// Usage
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#ffffff",
+    borderRadius: 12,
+    padding: 16,
+    ...shadows.md,
+  },
+});
+```
+
+## Typography System
+
+### Text Components
+
+```typescript
+import { Text as RNText, TextStyle, StyleProp, TextProps as RNTextProps } from 'react-native';
+import { useTheme } from './theme';
+
+type Variant = 'h1' | 'h2' | 'h3' | 'body' | 'bodySmall' | 'caption' | 'label';
+type Color = 'primary' | 'secondary' | 'text' | 'textSecondary' | 'error' | 'success';
+
+interface TextProps extends RNTextProps {
+  variant?: Variant;
+  color?: Color;
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  align?: 'left' | 'center' | 'right';
+}
+
+const variantStyles: Record<Variant, TextStyle> = {
+  h1: { fontSize: 32, lineHeight: 40, fontWeight: '700' },
+  h2: { fontSize: 24, lineHeight: 32, fontWeight: '600' },
+  h3: { fontSize: 20, lineHeight: 28, fontWeight: '600' },
+  body: { fontSize: 16, lineHeight: 24, fontWeight: '400' },
+  bodySmall: { fontSize: 14, lineHeight: 20, fontWeight: '400' },
+  caption: { fontSize: 12, lineHeight: 16, fontWeight: '400' },
+  label: { fontSize: 14, lineHeight: 20, fontWeight: '500' },
+};
+
+const weightStyles: Record<string, TextStyle> = {
+  normal: { fontWeight: '400' },
+  medium: { fontWeight: '500' },
+  semibold: { fontWeight: '600' },
+  bold: { fontWeight: '700' },
+};
+
+export function Text({
+  variant = 'body',
+  color = 'text',
+  weight,
+  align,
+  style,
+  ...props
+}: TextProps) {
+  const theme = useTheme();
+
+  return (
+    <RNText
+      style={[
+        variantStyles[variant],
+        { color: theme.colors[color] },
+        weight && weightStyles[weight],
+        align && { textAlign: align },
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+
+// Usage
+<Text variant="h1">Heading</Text>
+<Text variant="body" color="textSecondary">Body text</Text>
+<Text variant="label" weight="semibold">Label</Text>
+```
+
+## Button Styles
+
+### Customizable Button
+
+```typescript
+import { Pressable, StyleSheet, ActivityIndicator } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from 'react-native-reanimated';
+import { useTheme } from './theme';
+
+type Variant = 'filled' | 'outlined' | 'ghost';
+type Size = 'sm' | 'md' | 'lg';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: Variant;
+  size?: Size;
+  disabled?: boolean;
+  loading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function Button({
+  title,
+  onPress,
+  variant = 'filled',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  leftIcon,
+  rightIcon,
+}: ButtonProps) {
+  const theme = useTheme();
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const sizeStyles = {
+    sm: { paddingVertical: 8, paddingHorizontal: 12, fontSize: 14 },
+    md: { paddingVertical: 12, paddingHorizontal: 16, fontSize: 16 },
+    lg: { paddingVertical: 16, paddingHorizontal: 24, fontSize: 18 },
+  };
+
+  const variantStyles = {
+    filled: {
+      backgroundColor: theme.colors.primary,
+      textColor: '#ffffff',
+    },
+    outlined: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: theme.colors.primary,
+      textColor: theme.colors.primary,
+    },
+    ghost: {
+      backgroundColor: 'transparent',
+      textColor: theme.colors.primary,
+    },
+  };
+
+  const currentVariant = variantStyles[variant];
+  const currentSize = sizeStyles[size];
+
+  return (
+    <AnimatedPressable
+      style={[
+        styles.base,
+        {
+          backgroundColor: currentVariant.backgroundColor,
+          borderWidth: currentVariant.borderWidth,
+          borderColor: currentVariant.borderColor,
+          paddingVertical: currentSize.paddingVertical,
+          paddingHorizontal: currentSize.paddingHorizontal,
+          opacity: disabled ? 0.5 : 1,
+        },
+        animatedStyle,
+      ]}
+      onPress={onPress}
+      onPressIn={() => { scale.value = withSpring(0.97); }}
+      onPressOut={() => { scale.value = withSpring(1); }}
+      disabled={disabled || loading}
+    >
+      {loading ? (
+        <ActivityIndicator color={currentVariant.textColor} />
+      ) : (
+        <>
+          {leftIcon}
+          <Text
+            style={{
+              color: currentVariant.textColor,
+              fontSize: currentSize.fontSize,
+              fontWeight: '600',
+              marginHorizontal: leftIcon || rightIcon ? 8 : 0,
+            }}
+          >
+            {title}
+          </Text>
+          {rightIcon}
+        </>
+      )}
+    </AnimatedPressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+  },
+});
+```
+
+## Form Styles
+
+### Input Component
+
+```typescript
+import { useState } from 'react';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TextInputProps,
+  Pressable,
+} from 'react-native';
+import { useTheme } from './theme';
+
+interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export function Input({
+  label,
+  error,
+  leftIcon,
+  rightIcon,
+  style,
+  ...props
+}: InputProps) {
+  const theme = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
+
+  const borderColor = error
+    ? theme.colors.error
+    : isFocused
+    ? theme.colors.primary
+    : theme.colors.border;
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={[styles.label, { color: theme.colors.text }]}>
+          {label}
+        </Text>
+      )}
+      <View
+        style={[
+          styles.inputContainer,
+          {
+            borderColor,
+            backgroundColor: theme.colors.surface,
+          },
+        ]}
+      >
+        {leftIcon && <View style={styles.icon}>{leftIcon}</View>}
+        <TextInput
+          style={[
+            styles.input,
+            { color: theme.colors.text },
+            style,
+          ]}
+          placeholderTextColor={theme.colors.textSecondary}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          {...props}
+        />
+        {rightIcon && <View style={styles.icon}>{rightIcon}</View>}
+      </View>
+      {error && (
+        <Text style={[styles.error, { color: theme.colors.error }]}>
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 6,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 12,
+    fontSize: 16,
+  },
+  icon: {
+    marginHorizontal: 4,
+  },
+  error: {
+    fontSize: 12,
+    marginTop: 4,
+  },
+});
+```
+
+## List Styles
+
+### FlatList with Styling
+
+```typescript
+import { FlatList, View, StyleSheet } from 'react-native';
+
+interface Item {
+  id: string;
+  title: string;
+  subtitle: string;
+}
+
+function StyledList({ items }: { items: Item[] }) {
+  return (
+    <FlatList
+      data={items}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item, index }) => (
+        <View
+          style={[
+            styles.item,
+            index === 0 && styles.firstItem,
+            index === items.length - 1 && styles.lastItem,
+          ]}
+        >
+          <Text style={styles.itemTitle}>{item.title}</Text>
+          <Text style={styles.itemSubtitle}>{item.subtitle}</Text>
+        </View>
+      )}
+      ItemSeparatorComponent={() => <View style={styles.separator} />}
+      ListHeaderComponent={() => (
+        <Text style={styles.header}>List Header</Text>
+      )}
+      ListEmptyComponent={() => (
+        <View style={styles.empty}>
+          <Text>No items found</Text>
+        </View>
+      )}
+      contentContainerStyle={styles.listContent}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  listContent: {
+    padding: 16,
+  },
+  item: {
+    backgroundColor: '#ffffff',
+    padding: 16,
+  },
+  firstItem: {
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
+  lastItem: {
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
+  },
+  itemTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  itemSubtitle: {
+    fontSize: 14,
+    color: '#6b7280',
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#e5e7eb',
+  },
+  header: {
+    fontSize: 20,
+    fontWeight: '700',
+    marginBottom: 16,
+  },
+  empty: {
+    alignItems: 'center',
+    padding: 32,
+  },
+});
+```