react-native-mantine 0.1.15 → 0.2.0

package/src/components/ColorSwatch/index.tsx

@@ -0,0 +1,106 @@
+import React, { forwardRef } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface ColorSwatchProps extends DefaultProps {
+  /** Swatch background color in any css valid format (hex, rgb, etc.) */
+  color: string;
+
+  /** Width and height in px */
+  size?: number;
+
+  /** Key of theme.radius or number to set border-radius in px */
+  radius?: MantineNumberSize;
+
+  /** ColorSwatch children, for example check icon */
+  children?: React.ReactNode;
+
+  /** Determines whether the swatch should have inner shadow */
+  withShadow?: boolean;
+
+  /** Called when swatch is pressed */
+  onPress?: () => void;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      size,
+      radius,
+      withShadow,
+    }: {
+      color: string;
+      size: number;
+      radius: MantineNumberSize;
+      withShadow: boolean;
+    }
+  ) => ({
+    root: {
+      width: size,
+      height: size,
+      borderRadius: theme.fn.radius(radius),
+      backgroundColor: color,
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden',
+      ...(withShadow && {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.1,
+        shadowRadius: 1,
+        elevation: 1,
+      }),
+    },
+    overlay: {
+      position: 'absolute' as const,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  })
+);
+
+const defaultProps: Partial<ColorSwatchProps> = {
+  size: 25,
+  radius: 'xl',
+  withShadow: true,
+};
+
+export const ColorSwatch = forwardRef<any, ColorSwatchProps>((props, ref) => {
+  const { color, size, radius, withShadow, children, onPress, style, ...others} =
+    useComponentDefaultProps('ColorSwatch', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { color, size, radius, withShadow },
+    { name: 'ColorSwatch' }
+  ) as any;
+
+  const content = (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {children && <BoxView style={styles.overlay}>{children}</BoxView>}
+    </BoxView>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+});
+
+ColorSwatch.displayName = 'ColorSwatch';

package/src/components/Container/index.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef } from 'react';
+import { BoxView } from '../BoxView';
+import type { ViewProps } from '../BoxView';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useTheme } from '../../theme/theme-provider';
+import { Dimensions } from 'react-native';
+
+export interface ContainerProps extends DefaultProps, Omit<ViewProps, 'style'> {
+  /** Predefined container max-width or number for max-width in px */
+  size?: MantineNumberSize | number;
+
+  /** If true, container will take 100% of available width */
+  fluid?: boolean;
+
+  /** Container children */
+  children?: React.ReactNode;
+
+  /** Horizontal padding defined in theme.spacing, or number for padding in px */
+  px?: MantineNumberSize | number;
+
+  /** Vertical padding defined in theme.spacing, or number for padding in px */
+  py?: MantineNumberSize | number;
+}
+
+const SIZES = {
+  xs: 540,
+  sm: 720,
+  md: 960,
+  lg: 1140,
+  xl: 1320,
+};
+
+/**
+ * Container component provides max-width constraint and centers content
+ */
+export const Container = forwardRef<any, ContainerProps>((props, ref) => {
+  const {
+    children,
+    style,
+    size = 'md',
+    fluid = false,
+    px = 'md',
+    py,
+    ...others
+  } = props;
+
+  const theme = useTheme();
+  const screenWidth = Dimensions.get('window').width;
+
+  // Get max width based on size prop
+  const getMaxWidth = () => {
+    if (fluid) {
+      return '100%';
+    }
+
+    if (typeof size === 'number') {
+      return Math.min(size, screenWidth);
+    }
+
+    const maxWidth = SIZES[size as keyof typeof SIZES] || SIZES.md;
+    return Math.min(maxWidth, screenWidth);
+  };
+
+  // Get padding value from theme or use number directly
+  const getPadding = (value: MantineNumberSize | number | undefined) => {
+    if (value === undefined) return undefined;
+    if (typeof value === 'number') return value;
+    return theme.spacing[value as keyof typeof theme.spacing] || 0;
+  };
+
+  return (
+    <BoxView
+      ref={ref}
+      style={[
+        {
+          maxWidth: getMaxWidth(),
+          width: '100%',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          paddingHorizontal: getPadding(px),
+          paddingVertical: getPadding(py),
+        },
+        style,
+      ]}
+      {...others}
+    >
+      {children}
+    </BoxView>
+  );
+});
+
+Container.displayName = 'Container';

package/src/components/CopyButton/index.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef, useState, useEffect, useRef } from 'react';
+import * as Clipboard from 'expo-clipboard';
+import type { DefaultProps } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+
+export interface CopyButtonProps extends DefaultProps {
+  /** Value to copy to clipboard */
+  value: string;
+
+  /** Copied state timeout in ms */
+  timeout?: number;
+
+  /** Function that returns JSX based on current state */
+  children: (payload: { copied: boolean; copy: () => void }) => React.ReactNode;
+}
+
+const defaultProps: Partial<CopyButtonProps> = {
+  timeout: 1000,
+};
+
+export const CopyButton = forwardRef<any, CopyButtonProps>((props) => {
+  const { value, timeout, children } = useComponentDefaultProps(
+    'CopyButton',
+    defaultProps,
+    props
+  );
+
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const copy = async () => {
+    try {
+      await Clipboard.setStringAsync(value);
+      setCopied(true);
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        setCopied(false);
+        timeoutRef.current = null;
+      }, timeout);
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+    }
+  };
+
+  return <>{children({ copied, copy })}</>;
+});
+
+CopyButton.displayName = 'CopyButton';

package/src/components/Dialog/index.tsx

@@ -0,0 +1,189 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { Paper } from '../Paper';
+import type { DefaultProps, MantineNumberSize, SpacingValue } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface DialogProps extends DefaultProps {
+  /** Dialog opened state */
+  opened: boolean;
+
+  /** Dialog content */
+  children?: React.ReactNode;
+
+  /** Dialog size */
+  size?: MantineNumberSize | number;
+
+  /** Dialog padding */
+  padding?: SpacingValue;
+
+  /** Dialog border radius */
+  radius?: MantineNumberSize;
+
+  /** Dialog position */
+  position?: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
+
+  /** If true, dialog will show shadow */
+  withShadow?: boolean;
+
+  /** If true, dialog will show border */
+  withBorder?: boolean;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Animation duration in ms */
+  transitionDuration?: number;
+}
+
+const sizes = {
+  xs: 200,
+  sm: 280,
+  md: 360,
+  lg: 440,
+  xl: 560,
+};
+
+const useStyles = createStyles(
+  (
+    _theme,
+    {
+      size,
+      position,
+    }: {
+      size: MantineNumberSize | number;
+      position?: {
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+      };
+    }
+  ) => {
+    const getSize = () => {
+      if (typeof size === 'number') return rem(size);
+      const sizeKey = size as keyof typeof sizes;
+      return rem(sizes[sizeKey] || sizes.md);
+    };
+
+    const defaultPosition = {
+      bottom: 20,
+      right: 20,
+    };
+
+    const finalPosition = position || defaultPosition;
+    const posTop = 'top' in finalPosition ? finalPosition.top : undefined;
+    const posBottom = 'bottom' in finalPosition ? finalPosition.bottom : undefined;
+    const posLeft = 'left' in finalPosition ? finalPosition.left : undefined;
+    const posRight = 'right' in finalPosition ? finalPosition.right : undefined;
+
+    return {
+      root: {
+        position: 'absolute' as const,
+        width: getSize() as any,
+        maxWidth: '90%' as any as any,
+        zIndex: 1000,
+        ...(posTop !== undefined && { top: rem(posTop) as any }),
+        ...(posBottom !== undefined && { bottom: rem(posBottom) as any }),
+        ...(posLeft !== undefined && { left: rem(posLeft) as any }),
+        ...(posRight !== undefined && { right: rem(posRight) as any }),
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<DialogProps> = {
+  size: 'md',
+  padding: 'md',
+  radius: 'md',
+  withShadow: true,
+  withBorder: false,
+  transitionDuration: 200,
+};
+
+export const Dialog = forwardRef<any, DialogProps>((props, ref) => {
+  const {
+    opened,
+    children,
+    size,
+    padding,
+    radius,
+    position,
+    withShadow,
+    withBorder,
+    style,
+    transitionDuration,
+    ...otherProps
+  } = useComponentDefaultProps('Dialog', defaultProps, props);
+
+  const { styles, sx } = useStyles({ size, position}, { name: 'Dialog' }) as any;
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(50)).current;
+
+  useEffect(() => {
+    if (opened) {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: transitionDuration,
+          useNativeDriver: true,
+        }),
+        Animated.spring(slideAnim, {
+          toValue: 0,
+          useNativeDriver: true,
+          friction: 8,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: transitionDuration,
+          useNativeDriver: true,
+        }),
+        Animated.timing(slideAnim, {
+          toValue: 50,
+          duration: transitionDuration,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [opened, fadeAnim, slideAnim, transitionDuration]);
+
+  if (!opened) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      ref={ref}
+      style={[
+        sx(styles.root, style),
+        {
+          opacity: fadeAnim,
+          transform: [{ translateY: slideAnim }],
+        },
+      ]}
+      {...otherProps}
+    >
+      <Paper
+        shadow={withShadow ? 'lg' : undefined}
+        radius={radius}
+        p={padding}
+        withBorder={withBorder}
+      >
+        {children}
+      </Paper>
+    </Animated.View>
+  );
+});
+
+Dialog.displayName = 'Dialog';

package/src/components/Divider/index.tsx

@@ -0,0 +1,161 @@
+import React, { forwardRef } from 'react';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface DividerProps extends DefaultProps {
+  /** Line orientation */
+  orientation?: 'horizontal' | 'vertical';
+
+  /** Line color from theme */
+  color?: MantineColor;
+
+  /** Line thickness */
+  size?: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Divider label */
+  label?: React.ReactNode;
+
+  /** Label position */
+  labelPosition?: 'left' | 'center' | 'right';
+
+  /** Divider variant */
+  variant?: 'solid' | 'dashed' | 'dotted';
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: rem(1),
+  sm: rem(2),
+  md: rem(3),
+  lg: rem(4),
+  xl: rem(5),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      orientation,
+      color,
+      size,
+      variant,
+      labelPosition,
+    }: {
+      orientation: 'horizontal' | 'vertical';
+      color?: MantineColor;
+      size: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+      variant: 'solid' | 'dashed' | 'dotted';
+      labelPosition: 'left' | 'center' | 'right';
+    }
+  ) => {
+    const lineColor =
+      color && theme.colors[color]
+        ? (theme.colors[color] || [])[3]
+        : theme.colorScheme === 'dark'
+        ? (theme.colors.dark || [])[4]
+        : (theme.colors.gray || [])[3];
+
+    const lineSize = typeof size === 'number' ? rem(size) : sizes[size as keyof typeof sizes] || sizes.sm;
+
+    const getBorderStyle = () => {
+      if (variant === 'dashed') {
+        return 'dashed';
+      }
+      if (variant === 'dotted') {
+        return 'dotted';
+      }
+      return 'solid';
+    };
+
+    const isHorizontal = orientation === 'horizontal';
+
+    return {
+      root: {
+        flexDirection: isHorizontal ? 'row' : 'column',
+        alignItems: 'center',
+        ...(isHorizontal
+          ? { width: '100%', height: lineSize as any }
+          : { height: '100%', width: lineSize as any }),
+      } as any,
+      line: {
+        ...(isHorizontal
+          ? {
+              height: lineSize as any,
+              borderBottomWidth: lineSize as any,
+              borderBottomColor: lineColor,
+              borderStyle: getBorderStyle(),
+            }
+          : {
+              width: lineSize as any,
+              borderLeftWidth: lineSize as any,
+              borderLeftColor: lineColor,
+              borderStyle: getBorderStyle(),
+            }),
+      } as any,
+      withLabel: {
+        flex: 1,
+      },
+      labelContainer: {
+        paddingHorizontal: isHorizontal ? theme.spacing.xs : 0,
+        paddingVertical: isHorizontal ? 0 : theme.spacing.xs,
+      },
+      label: {
+        fontSize: theme.fontSizes.sm as number,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[1] : (theme.colors.gray || [])[7],
+      },
+      lineLeft: {
+        ...(labelPosition === 'left' ? { flex: 0.3 } : { flex: 1 }),
+      },
+      lineRight: {
+        ...(labelPosition === 'right' ? { flex: 0.3 } : { flex: 1 }),
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<DividerProps> = {
+  orientation: 'horizontal',
+  size: 'sm',
+  labelPosition: 'center',
+  variant: 'solid',
+};
+
+export const Divider = forwardRef<any, DividerProps>((props, ref) => {
+  const {
+    orientation,
+    color,
+    size,
+    label,
+    labelPosition,
+    variant,
+    style,
+    ...others
+  } = useComponentDefaultProps('Divider', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { orientation, color, size, variant, labelPosition },
+    { name: 'Divider' }
+  ) as any;
+
+  if (!label) {
+    return <BoxView ref={ref} style={sx(styles.root, styles.line, style)} {...others} />;
+  }
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      <BoxView style={[styles.line, styles.withLabel, styles.lineLeft]} />
+      <BoxView style={styles.labelContainer}>
+        {typeof label === 'string' ? <Text style={styles.label}>{label}</Text> : label}
+      </BoxView>
+      <BoxView style={[styles.line, styles.withLabel, styles.lineRight]} />
+    </BoxView>
+  );
+});
+
+Divider.displayName = 'Divider';