react-native-mantine 0.1.15 → 0.2.0

package/src/components/NativeSelect/index.tsx

@@ -0,0 +1,387 @@
+import React, { forwardRef, useState } from 'react';
+import { TouchableOpacity, Modal, FlatList } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type {
+  DefaultProps,
+  MantineNumberSize,
+  MantineSize,
+} from '../../theme/types';
+import { useComponentDefaultProps, useTheme } from '../../theme/theme-provider';
+import { createStyles, getSize } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+import { INPUT_SIZES } from '../Input';
+
+export interface SelectItem {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface NativeSelectProps extends DefaultProps {
+  /** Select label */
+  label?: React.ReactNode;
+
+  /** Select description */
+  description?: React.ReactNode;
+
+  /** Select error message */
+  error?: React.ReactNode;
+
+  /** Select size */
+  size?: MantineSize;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Select variant */
+  variant?: 'default' | 'filled' | 'unstyled';
+
+  /** If true, select will take full width */
+  fullWidth?: boolean;
+
+  /** Select data */
+  data: (string | SelectItem)[];
+
+  /** Current value */
+  value?: string;
+
+  /** Default value */
+  defaultValue?: string;
+
+  /** Called when value changes */
+  onChange?: (value: string) => void;
+
+  /** If true, select will be disabled */
+  disabled?: boolean;
+
+  /** Placeholder */
+  placeholder?: string;
+
+  /** Icon on the left */
+  icon?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Wrapper style */
+  wrapperStyle?: any;
+
+  /** If true, requires a value to be selected */
+  required?: boolean;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      radius,
+      variant,
+      fullWidth,
+      error,
+      disabled,
+      withIcon,
+    }: {
+      size: MantineSize;
+      radius: MantineNumberSize;
+      variant: 'default' | 'filled' | 'unstyled';
+      fullWidth: boolean;
+      error: boolean;
+      disabled: boolean;
+      withIcon: boolean;
+    }
+  ) => {
+    const getVariantStyles = () => {
+      switch (variant) {
+        case 'filled':
+          return {
+            backgroundColor:
+              theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+            borderWidth: 1,
+            borderColor: 'transparent',
+          };
+        case 'unstyled':
+          return {
+            backgroundColor: 'transparent',
+            borderWidth: 0,
+          };
+        default:
+          return {
+            backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : theme.white,
+            borderWidth: 1,
+            borderColor:
+              theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+          };
+      }
+    };
+
+    return {
+      wrapper: {
+        width: fullWidth ? '100%' : undefined,
+      },
+      label: {
+        fontSize: theme.fontSizes.sm as number,
+        fontWeight: '500',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        marginBottom: theme.spacing.xs,
+      },
+      description: {
+        fontSize: theme.fontSizes.xs as number,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+        marginTop: theme.spacing.xs,
+      },
+      error: {
+        fontSize: theme.fontSizes.xs as number,
+        color: (theme.colors.red || [])[6],
+        marginTop: theme.spacing.xs,
+      },
+      selectWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: getSize({ size, sizes: INPUT_SIZES }) as any,
+        borderRadius: theme.fn.radius(radius),
+        ...getVariantStyles(),
+        ...(error && {
+          borderColor: (theme.colors.red || [])[6],
+        }),
+        ...(disabled && {
+          opacity: 0.6,
+        }),
+      } as any,
+      icon: {
+        paddingLeft: theme.spacing.sm,
+        paddingRight: theme.spacing.xs,
+      },
+      selectText: {
+        flex: 1,
+        fontSize: getSize({ size, sizes: theme.fontSizes }),
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        paddingHorizontal: theme.spacing.sm,
+        ...(withIcon && {
+          paddingLeft: 0,
+        }),
+      },
+      placeholder: {
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[3] : (theme.colors.gray || [])[5],
+      },
+      chevron: {
+        paddingRight: theme.spacing.sm,
+      },
+      chevronText: {
+        fontSize: rem(16) as any,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+      },
+      modalOverlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+      },
+      modalContent: {
+        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+        borderTopLeftRadius: theme.fn.radius('md'),
+        borderTopRightRadius: theme.fn.radius('md'),
+        maxHeight: '70%',
+      },
+      modalHeader: {
+        padding: theme.spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[2],
+      },
+      modalTitle: {
+        fontSize: theme.fontSizes.lg as number,
+        fontWeight: '600',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      },
+      option: {
+        padding: theme.spacing.md,
+        borderBottomWidth: 1,
+        borderBottomColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[2],
+      },
+      optionSelected: {
+        backgroundColor:
+          theme.colorScheme === 'dark'
+            ? theme.fn.rgba(theme.colors[theme.primaryColor]?.[9] || theme.primaryBgColor, 0.25)
+            : theme.colors[theme.primaryColor]?.[0] || (theme.colors.gray || [])[1],
+      },
+      optionDisabled: {
+        opacity: 0.4,
+      },
+      optionText: {
+        fontSize: theme.fontSizes.sm as number,
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      },
+      optionTextSelected: {
+        fontWeight: '600',
+        color: theme.colors[theme.primaryColor]?.[6] || theme.primaryBgColor,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<NativeSelectProps> = {
+  size: 'sm',
+  radius: 'sm',
+  variant: 'default',
+  fullWidth: false,
+  disabled: false,
+  required: false,
+};
+
+export const NativeSelect = forwardRef<any, NativeSelectProps>((props, ref) => {
+  const {
+    label,
+    description,
+    error,
+    size,
+    radius,
+    variant,
+    fullWidth,
+    data,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    disabled,
+    placeholder,
+    icon,
+    style,
+    wrapperStyle,
+    required,
+    ...others
+  } = useComponentDefaultProps('NativeSelect', defaultProps, props);
+
+  const theme = useTheme();
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || '');
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const { styles, sx} = useStyles(
+    {
+      size,
+      radius,
+      variant,
+      fullWidth,
+      error: !!error,
+      disabled,
+      withIcon: !!icon,
+    },
+    { name: 'NativeSelect' }
+  ) as any;
+
+  const normalizedData: SelectItem[] = data.map((item) =>
+    typeof item === 'string' ? { value: item, label: item } : item
+  );
+
+  const selectedItem = normalizedData.find((item) => item.value === value);
+
+  const handleSelect = (itemValue: string) => {
+    if (controlledValue === undefined) {
+      setUncontrolledValue(itemValue);
+    }
+    onChange?.(itemValue);
+    setModalVisible(false);
+  };
+
+  const handlePress = () => {
+    if (!disabled) {
+      setModalVisible(true);
+    }
+  };
+
+  return (
+    <BoxView style={sx(styles.wrapper, wrapperStyle)}>
+      {label && (
+        <Text style={styles.label}>
+          {typeof label === 'string' ? label : label}
+          {required && <Text style={{ color: (theme.colors.red || [])[6] }}> *</Text>}
+        </Text>
+      )}
+
+      <TouchableOpacity
+        ref={ref}
+        style={sx(styles.selectWrapper, style)}
+        onPress={handlePress}
+        disabled={disabled}
+        activeOpacity={0.7}
+        {...others}
+      >
+        {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+
+        <Text
+          style={sx(
+            styles.selectText,
+            !selectedItem && styles.placeholder
+          )}
+          numberOfLines={1}
+        >
+          {selectedItem ? selectedItem.label : placeholder || 'Select option'}
+        </Text>
+
+        <BoxView style={styles.chevron}>
+          <Text style={styles.chevronText}>▼</Text>
+        </BoxView>
+      </TouchableOpacity>
+
+      {description && (
+        <Text style={styles.description}>
+          {typeof description === 'string' ? description : description}
+        </Text>
+      )}
+
+      {error && <Text style={styles.error}>{typeof error === 'string' ? error : error}</Text>}
+
+      <Modal
+        visible={modalVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <TouchableOpacity
+          style={styles.modalOverlay}
+          activeOpacity={1}
+          onPress={() => setModalVisible(false)}
+        >
+          <TouchableOpacity activeOpacity={1} onPress={(e) => e.stopPropagation()}>
+            <BoxView style={styles.modalContent}>
+              <BoxView style={styles.modalHeader}>
+                <Text style={styles.modalTitle}>
+                  {typeof label === 'string' ? label : 'Select an option'}
+                </Text>
+              </BoxView>
+
+              <FlatList
+                data={normalizedData}
+                keyExtractor={(item) => item.value}
+                renderItem={({ item }) => (
+                  <TouchableOpacity
+                    style={sx(
+                      styles.option,
+                      item.value === value && styles.optionSelected,
+                      item.disabled && styles.optionDisabled
+                    )}
+                    onPress={() => handleSelect(item.value)}
+                    disabled={item.disabled}
+                    activeOpacity={0.7}
+                  >
+                    <Text
+                      style={sx(
+                        styles.optionText,
+                        item.value === value && styles.optionTextSelected
+                      )}
+                    >
+                      {item.label}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              />
+            </BoxView>
+          </TouchableOpacity>
+        </TouchableOpacity>
+      </Modal>
+    </BoxView>
+  );
+});
+
+NativeSelect.displayName = 'NativeSelect';

package/src/components/NavLink/index.tsx

@@ -0,0 +1,205 @@
+import React, { forwardRef } from 'react';
+import { UnstyledButton } from '../UnstyledButton';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type {
+  DefaultProps,
+  MantineColor,
+  Variants,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface NavLinkProps extends DefaultProps {
+  /** Link label */
+  label?: React.ReactNode;
+
+  /** Link description */
+  description?: React.ReactNode;
+
+  /** Icon displayed on the left side */
+  icon?: React.ReactNode;
+
+  /** Section displayed on the right side */
+  rightSection?: React.ReactNode;
+
+  /** Link color from theme */
+  color?: MantineColor;
+
+  /** Link variant */
+  variant?: Variants<'filled' | 'light' | 'subtle'>;
+
+  /** Active state */
+  active?: boolean;
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /** Children NavLinks */
+  children?: React.ReactNode;
+
+  /** Called when link is pressed */
+  onPress?: () => void;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Disable link if no onPress handler is provided */
+  disableIfNoPress?: boolean;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      active,
+      disabled,
+    }: {
+      color: MantineColor;
+      active: boolean;
+      disabled: boolean;
+    },
+    { variant }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+
+    const getVariantStyles = () => {
+      if (disabled) {
+        return {
+          backgroundColor: 'transparent',
+          color: (theme.colors.gray || [])[5],
+        };
+      }
+
+      if (!active) {
+        return {
+          backgroundColor: 'transparent',
+          color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        };
+      }
+
+      switch (variant) {
+        case 'filled':
+          return {
+            backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            color: theme.white,
+          };
+        case 'light':
+          return {
+            backgroundColor: colors?.[0] || colors?.[1] || (theme.colors.gray || [])[0],
+            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+          };
+        case 'subtle':
+          return {
+            backgroundColor:
+              theme.colorScheme === 'dark'
+                ? 'rgba(255, 255, 255, 0.05)'
+                : 'rgba(0, 0, 0, 0.05)',
+            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+          };
+        default:
+          return {
+            backgroundColor: colors?.[0] || colors?.[1] || (theme.colors.gray || [])[0],
+            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+          };
+      }
+    };
+
+    const variantStyles = getVariantStyles();
+
+    return {
+      root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.sm,
+        backgroundColor: variantStyles.backgroundColor,
+        opacity: disabled ? 0.6 : 1,
+      },
+      icon: {
+        marginRight: theme.spacing.sm,
+        color: variantStyles.color,
+      },
+      body: {
+        flex: 1,
+      },
+      label: {
+        fontSize: rem(14) as any,
+        fontWeight: '500',
+        color: variantStyles.color,
+      },
+      description: {
+        fontSize: rem(12),
+        marginTop: rem(2) as any,
+        color:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[2]
+            : (theme.colors.gray || [])[6],
+      },
+      rightSection: {
+        marginLeft: theme.spacing.sm,
+        color: variantStyles.color,
+      },
+      children: {
+        marginTop: theme.spacing.xs,
+        marginLeft: theme.spacing.md,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<NavLinkProps> = {
+  color: 'blue',
+  variant: 'light',
+  active: false,
+  disabled: false,
+  disableIfNoPress: true,
+};
+
+export const NavLink = forwardRef<any, NavLinkProps>((props, ref) => {
+  const {
+    label,
+    description,
+    icon,
+    rightSection,
+    color,
+    variant,
+    active,
+    disabled,
+    children,
+    onPress,
+    style,
+    disableIfNoPress,
+    ...others
+  } = useComponentDefaultProps('NavLink', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { color, active, disabled },
+    { name: 'NavLink', variant }
+  ) as any;
+
+  const isDisabled = disabled || (disableIfNoPress && !onPress);
+
+  return (
+    <BoxView>
+      <UnstyledButton
+        ref={ref}
+        onPress={isDisabled ? undefined : onPress}
+        style={sx(styles.root, isDisabled && { opacity: 0.6 }, style)}
+        {...others}
+      >
+        {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+        <BoxView style={styles.body}>
+          {label && <Text style={styles.label}>{label}</Text>}
+          {description && <Text style={styles.description}>{description}</Text>}
+        </BoxView>
+        {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
+      </UnstyledButton>
+      {children && <BoxView style={styles.children}>{children}</BoxView>}
+    </BoxView>
+  );
+});
+
+NavLink.displayName = 'NavLink';