react-native-mantine 0.1.15 → 0.2.0

package/src/components/Drawer/index.tsx

@@ -0,0 +1,315 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import {
+  Modal as RNModal,
+  TouchableOpacity,
+  Animated,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import { Overlay } from '../Overlay';
+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 DrawerProps extends DefaultProps {
+  /** Drawer opened state */
+  opened: boolean;
+
+  /** Called when drawer is closed */
+  onClose: () => void;
+
+  /** Drawer title */
+  title?: React.ReactNode;
+
+  /** Drawer content */
+  children?: React.ReactNode;
+
+  /** Drawer size */
+  size?: MantineNumberSize | number;
+
+  /** Drawer padding */
+  padding?: SpacingValue;
+
+  /** Drawer position */
+  position?: 'left' | 'right' | 'top' | 'bottom';
+
+  /** If true, drawer cannot be closed by clicking outside */
+  closeOnClickOutside?: boolean;
+
+  /** If true, drawer will show overlay */
+  withOverlay?: boolean;
+
+  /** Overlay opacity */
+  overlayOpacity?: number;
+
+  /** Overlay color */
+  overlayColor?: string;
+
+  /** If true, close button will be shown */
+  withCloseButton?: boolean;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Animation duration in ms */
+  transitionDuration?: number;
+
+  /** Z-index */
+  zIndex?: number;
+}
+
+const sizes = {
+  xs: 180,
+  sm: 240,
+  md: 320,
+  lg: 420,
+  xl: 560,
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      padding,
+      position,
+    }: {
+      size: MantineNumberSize | number;
+      padding: SpacingValue;
+      position: 'left' | 'right' | 'top' | 'bottom';
+    }
+  ) => {
+    const getPadding = () => {
+      if (padding === undefined) return theme.spacing.md;
+      if (typeof padding === 'number') return rem(padding);
+      return theme.spacing[padding] || theme.spacing.md;
+    };
+
+    const getSize = () => {
+      if (typeof size === 'number') return rem(size);
+      return rem(sizes[size as keyof typeof sizes] || sizes.md);
+    };
+
+    const isHorizontal = position === 'left' || position === 'right';
+    const dimensionKey = isHorizontal ? 'width' : 'height';
+
+    return {
+      overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.001)',
+        justifyContent: position === 'bottom' ? 'flex-end' : position === 'top' ? 'flex-start' : 'center',
+        alignItems: position === 'right' ? 'flex-end' : position === 'left' ? 'flex-start' : 'stretch',
+      },
+      container: {
+        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+        [dimensionKey]: getSize(),
+        maxHeight: '100%',
+        maxWidth: '100%' as any,
+        ...(position === 'left' && {
+          borderTopRightRadius: theme.fn.radius('md'),
+          borderBottomRightRadius: theme.fn.radius('md'),
+        }),
+        ...(position === 'right' && {
+          borderTopLeftRadius: theme.fn.radius('md'),
+          borderBottomLeftRadius: theme.fn.radius('md'),
+        }),
+        ...(position === 'top' && {
+          borderBottomLeftRadius: theme.fn.radius('md'),
+          borderBottomRightRadius: theme.fn.radius('md'),
+        }),
+        ...(position === 'bottom' && {
+          borderTopLeftRadius: theme.fn.radius('md'),
+          borderTopRightRadius: theme.fn.radius('md'),
+        }),
+      },
+      header: {
+        padding: getPadding(),
+        borderBottomWidth: 1,
+        borderBottomColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[2],
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      },
+      title: {
+        fontSize: theme.fontSizes.lg as number,
+        fontWeight: '600',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        flex: 1,
+      },
+      closeButton: {
+        width: rem(32) as any,
+        height: rem(32) as any,
+        borderRadius: rem(16) as any,
+        backgroundColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: theme.spacing.md,
+      },
+      closeButtonText: {
+        fontSize: rem(20) as any,
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      },
+      body: {
+        padding: getPadding(),
+        flex: 1,
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<DrawerProps> = {
+  size: 'md',
+  padding: 'md',
+  position: 'left',
+  closeOnClickOutside: true,
+  withOverlay: true,
+  overlayOpacity: 0.6,
+  overlayColor: '#000',
+  withCloseButton: true,
+  transitionDuration: 250,
+  zIndex: 1000,
+};
+
+export const Drawer = forwardRef<any, DrawerProps>((props, ref) => {
+  const {
+    opened,
+    onClose,
+    title,
+    children,
+    size,
+    padding,
+    position,
+    closeOnClickOutside,
+    withOverlay,
+    overlayOpacity,
+    overlayColor,
+    withCloseButton,
+    style,
+    transitionDuration,
+    ...others
+  } = useComponentDefaultProps('Drawer', defaultProps, props);
+
+  const { styles, sx } = useStyles({ size: size!, padding: padding!, position: position! }, { name: 'Drawer' }) as any;
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+
+  const getSlideValue = () => {
+    const screenWidth = Dimensions.get('window').width;
+    const screenHeight = Dimensions.get('window').height;
+
+    switch (position) {
+      case 'left':
+        return -screenWidth;
+      case 'right':
+        return screenWidth;
+      case 'top':
+        return -screenHeight;
+      case 'bottom':
+        return screenHeight;
+      default:
+        return -screenWidth;
+    }
+  };
+
+  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 {
+      slideAnim.setValue(getSlideValue());
+      fadeAnim.setValue(0);
+    }
+  }, [opened, fadeAnim, slideAnim, transitionDuration]);
+
+  const handleOverlayPress = () => {
+    if (closeOnClickOutside) {
+      onClose();
+    }
+  };
+
+  const getTransform = () => {
+    switch (position) {
+      case 'left':
+      case 'right':
+        return [{ translateX: slideAnim }];
+      case 'top':
+      case 'bottom':
+        return [{ translateY: slideAnim }];
+      default:
+        return [{ translateX: slideAnim }];
+    }
+  };
+
+  return (
+    <RNModal
+      visible={opened}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      {withOverlay && (
+        <Animated.View
+          style={{
+            flex: 1,
+            opacity: fadeAnim,
+          }}
+        >
+          <Overlay
+            opacity={overlayOpacity}
+            color={overlayColor}
+            onPress={handleOverlayPress}
+            style={{ position: 'absolute' }}
+          />
+        </Animated.View>
+      )}
+
+      <BoxView style={styles.overlay} pointerEvents="box-none">
+        <Animated.View
+          ref={ref}
+          style={[
+            sx(styles.container, style),
+            {
+              opacity: fadeAnim,
+              transform: getTransform(),
+            },
+          ]}
+          {...others}
+        >
+          {(title || withCloseButton) && (
+            <BoxView style={styles.header}>
+              {typeof title === 'string' ? <Text style={styles.title}>{title}</Text> : title}
+              {withCloseButton && (
+                <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                  <Text style={styles.closeButtonText}>×</Text>
+                </TouchableOpacity>
+              )}
+            </BoxView>
+          )}
+
+          <ScrollView style={styles.body} showsVerticalScrollIndicator={false}>
+            {children}
+          </ScrollView>
+        </Animated.View>
+      </BoxView>
+    </RNModal>
+  );
+});
+
+Drawer.displayName = 'Drawer';

package/src/components/Flex/index.tsx

@@ -0,0 +1,87 @@
+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 type { FlexStyle } from 'react-native';
+
+export interface FlexProps extends DefaultProps, Omit<ViewProps, 'style'> {
+  /** Set flex-direction property */
+  direction?: FlexStyle['flexDirection'];
+
+  /** Set flex-wrap property */
+  wrap?: FlexStyle['flexWrap'];
+
+  /** Set align-items property */
+  align?: FlexStyle['alignItems'];
+
+  /** Set justify-content property */
+  justify?: FlexStyle['justifyContent'];
+
+  /** Gap between flex items from theme or number */
+  gap?: MantineNumberSize | number;
+
+  /** Column gap from theme or number */
+  columnGap?: MantineNumberSize | number;
+
+  /** Row gap from theme or number */
+  rowGap?: MantineNumberSize | number;
+
+  /** Flex children */
+  children?: React.ReactNode;
+}
+
+/**
+ * Flex component provides flexible box layout
+ */
+export const Flex = forwardRef<any, FlexProps>((props, ref) => {
+  const {
+    children,
+    style,
+    direction = 'row',
+    wrap = 'nowrap',
+    align,
+    justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...others
+  } = props;
+
+  const theme = useTheme();
+
+  // Get spacing value from theme or use number directly
+  const getSpacing = (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;
+  };
+
+  const gapValue = getSpacing(gap);
+  const columnGapValue = getSpacing(columnGap);
+  const rowGapValue = getSpacing(rowGap);
+
+  return (
+    <BoxView
+      ref={ref}
+      style={[
+        {
+          display: 'flex',
+          flexDirection: direction,
+          flexWrap: wrap,
+          alignItems: align,
+          justifyContent: justify,
+          ...(gapValue !== undefined && { gap: gapValue }),
+          ...(columnGapValue !== undefined && { columnGap: columnGapValue }),
+          ...(rowGapValue !== undefined && { rowGap: rowGapValue }),
+        },
+        style,
+      ]}
+      {...others}
+    >
+      {children}
+    </BoxView>
+  );
+});
+
+Flex.displayName = 'Flex';

package/src/components/Grid/index.tsx

@@ -0,0 +1,167 @@
+import React, { forwardRef, Children } from 'react';
+import { BoxView } from '../BoxView';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface GridProps extends DefaultProps {
+  /** Number of columns in the grid */
+  columns?: number;
+
+  /** Spacing between columns and rows */
+  gutter?: MantineNumberSize;
+
+  /** Grow columns to fit available space */
+  grow?: boolean;
+
+  /** Align items vertically */
+  align?: 'stretch' | 'center' | 'flex-start' | 'flex-end';
+
+  /** Justify items horizontally */
+  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+
+  /** Grid children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface GridColProps extends DefaultProps {
+  /** Column span */
+  span?: number;
+
+  /** Column offset */
+  offset?: number;
+
+  /** Column order */
+  order?: number;
+
+  /** Column children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useGridStyles = createStyles(
+  (
+    theme,
+    {
+      gutter,
+      align,
+      justify,
+    }: {
+      gutter: MantineNumberSize;
+      align: 'stretch' | 'center' | 'flex-start' | 'flex-end';
+      justify: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    }
+  ) => ({
+    root: {
+      flexDirection: 'row' as const,
+      flexWrap: 'wrap' as const,
+      alignItems: align,
+      justifyContent: justify,
+      margin: -theme.fn.size({ size: gutter, sizes: theme.spacing }) / 2,
+    },
+  })
+);
+
+const useColStyles = createStyles(
+  (
+    theme,
+    {
+      span,
+      offset,
+      order,
+      columns,
+      gutter,
+      grow,
+    }: {
+      span: number;
+      offset: number;
+      order: number;
+      columns: number;
+      gutter: MantineNumberSize;
+      grow: boolean;
+    }
+  ) => {
+    const gutterSize = theme.fn.size({ size: gutter, sizes: theme.spacing });
+    const colSpan = span || columns;
+    const percentage = (colSpan / columns) * 100;
+    const offsetPercentage = offset ? (offset / columns) * 100 : 0;
+
+    return {
+      col: {
+        flexBasis: grow ? 0 : `${percentage}%`,
+        flexGrow: grow ? colSpan : 0,
+        flexShrink: 0,
+        padding: gutterSize / 2,
+        marginLeft: offsetPercentage ? `${offsetPercentage}%` : 0,
+        ...(order && { order }),
+      },
+    };
+  }
+);
+
+const defaultGridProps: Partial<GridProps> = {
+  columns: 12,
+  gutter: 'md',
+  grow: false,
+  align: 'stretch',
+  justify: 'flex-start',
+};
+
+const defaultColProps: Partial<GridColProps> = {
+  span: 12,
+  offset: 0,
+  order: 0,
+};
+
+export const Grid = Object.assign(
+  forwardRef<any, GridProps>((props, ref) => {
+    const { columns, gutter, grow, align, justify, children, style, ...others} =
+      useComponentDefaultProps('Grid', defaultGridProps, props);
+
+    const { styles, sx} = useGridStyles(
+      { gutter, align, justify },
+      { name: 'Grid' }
+    ) as any;
+
+    // Pass columns and gutter to children via context or clone
+    const childrenWithProps = Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child as any, { columns, gutter, grow });
+      }
+      return child;
+    });
+
+    return (
+      <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+        {childrenWithProps}
+      </BoxView>
+    );
+  }),
+  {
+    Col: forwardRef<any, GridColProps & { columns?: number; gutter?: MantineNumberSize; grow?: boolean }>(
+      (props, ref) => {
+        const { span, offset, order, columns = 12, gutter = 'md', grow = false, children, style, ...others} =
+          useComponentDefaultProps('GridCol', defaultColProps, props);
+
+        const { styles, sx} = useColStyles(
+          { span, offset, order, columns, gutter, grow },
+          { name: 'GridCol' }
+        ) as any;
+
+        return (
+          <BoxView ref={ref} style={sx(styles.col, style)} {...others}>
+            {children}
+          </BoxView>
+        );
+      }
+    ),
+  }
+);
+
+Grid.displayName = 'Grid';
+Grid.Col.displayName = 'Grid.Col';

package/src/components/Group/index.tsx

@@ -7,6 +7,7 @@ export const Group = ({
   children,
   position,
   style,
+  align,
   alignCenter = true,
   alignBottom = false,
   noWrap = false,
@@ -14,11 +15,33 @@ export const Group = ({
   ...rest
 }: ViewProps & {
   position?: string;
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
   alignCenter?: boolean;
   alignBottom?: boolean;
   noWrap?: boolean;
   spacing?: number;
 }): React.ReactElement => {
+  // Map align values to flexbox alignItems
+  const getAlignItems = () => {
+    if (align) {
+      switch (align) {
+        case 'start':
+          return 'flex-start';
+        case 'center':
+          return 'center';
+        case 'end':
+          return 'flex-end';
+        case 'baseline':
+          return 'baseline';
+        case 'stretch':
+          return 'stretch';
+        default:
+          return 'center';
+      }
+    }
+    return alignCenter ? 'center' : alignBottom ? 'flex-end' : 'flex-start';
+  };
+
   return (
     <BoxView
       style={{
@@ -33,11 +56,7 @@ export const Group = ({
                 ? 'flex-end'
                 : 'flex-start',
         flexWrap: noWrap ? 'nowrap' : 'wrap',
-        alignItems: alignCenter
-          ? 'center'
-          : alignBottom
-            ? 'flex-end'
-            : 'flex-start',
+        alignItems: getAlignItems(),
         ...(style as ViewStyle),
       }}
       {...rest}

package/src/components/Highlight/index.tsx

@@ -0,0 +1,93 @@
+import { forwardRef } from 'react';
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
+import { useTheme } from '../../theme/theme-provider';
+
+export interface HighlightProps extends TextProps {
+  /** Substring or array of substrings to highlight */
+  highlight: string | string[];
+
+  /** Color for highlighted text, key from theme.colors */
+  highlightColor?: string;
+
+  /** Background color for highlighted text */
+  highlightStyles?: {
+    backgroundColor?: string;
+    color?: string;
+  };
+
+  /** Text in which to highlight substring */
+  children: string;
+}
+
+/**
+ * Highlight component highlights specified substrings within text
+ */
+export const Highlight = forwardRef<any, HighlightProps>((props, ref) => {
+  const {
+    children,
+    highlight,
+    highlightColor = 'yellow',
+    highlightStyles,
+    style,
+    ...others
+  } = props;
+
+  const theme = useTheme();
+
+  // Convert highlight to array for uniform processing
+  const highlights = Array.isArray(highlight) ? highlight : [highlight];
+
+  // Get default highlight background color
+  const defaultHighlightBg =
+    theme.colors[highlightColor]?.[2] || theme.colors.yellow?.[2] || '#ffec99';
+
+  const defaultStyles = {
+    backgroundColor: defaultHighlightBg,
+    ...highlightStyles,
+  };
+
+  // Function to split text and identify highlighted parts
+  const getHighlightedText = () => {
+    if (!children || highlights.length === 0 || highlights.every((h) => !h)) {
+      return <Text style={style}>{children}</Text>;
+    }
+
+    // Create regex pattern for all highlight strings (case insensitive)
+    const pattern = highlights
+      .filter((h) => h && h.length > 0)
+      .map((h) => h.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) // Escape special chars
+      .join('|');
+
+    if (!pattern) {
+      return <Text style={style}>{children}</Text>;
+    }
+
+    const regex = new RegExp(`(${pattern})`, 'gi');
+    const parts = children.split(regex);
+
+    return (
+      <Text ref={ref} style={style} {...others}>
+        {parts.map((part, index) => {
+          const isHighlighted = highlights.some(
+            (h) => h && part.toLowerCase() === h.toLowerCase()
+          );
+
+          if (isHighlighted) {
+            return (
+              <Text key={index} style={defaultStyles}>
+                {part}
+              </Text>
+            );
+          }
+
+          return part;
+        })}
+      </Text>
+    );
+  };
+
+  return getHighlightedText();
+});
+
+Highlight.displayName = 'Highlight';