react-native-mantine 0.1.15 → 0.2.0

package/src/components/Image/index.tsx

@@ -0,0 +1,180 @@
+import React, { forwardRef, useState } from 'react';
+import {
+  Image as RNImage,
+  ActivityIndicator,
+  type ImageSourcePropType,
+  type ImageErrorEventData,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface ImageProps extends DefaultProps {
+  /** Image source */
+  source: ImageSourcePropType;
+
+  /** Image width */
+  width?: number;
+
+  /** Image height */
+  height?: number;
+
+  /** Image fit */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Placeholder to show when image is loading */
+  placeholder?: React.ReactNode;
+
+  /** Error message to show when image fails to load */
+  errorMessage?: string;
+
+  /** Custom error placeholder */
+  errorPlaceholder?: React.ReactNode;
+
+  /** Image alt text for accessibility */
+  alt?: string;
+
+  /** Called when image loads */
+  onLoad?: () => void;
+
+  /** Called when image fails to load */
+  onError?: (error: NativeSyntheticEvent<ImageErrorEventData>) => void;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      width,
+      height,
+      radius,
+      fit,
+    }: {
+      width?: number;
+      height?: number;
+      radius: MantineNumberSize;
+      fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    }
+  ) => ({
+    root: {
+      position: 'relative' as const,
+      width: width || 300,
+      height: height || 200,
+      borderRadius: theme.fn.radius(radius),
+      overflow: 'hidden' as const,
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[1],
+    },
+    image: {
+      width: '100%' as const,
+      height: '100%' as const,
+      resizeMode: (fit === 'scale-down' ? 'contain' : fit) as any,
+      borderRadius: theme.fn.radius(radius),
+    },
+    placeholder: {
+      position: 'absolute' as const,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center' as const,
+      alignItems: 'center' as const,
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[1],
+    },
+    errorContainer: {
+      position: 'absolute' as const,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center' as const,
+      alignItems: 'center' as const,
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[7] : theme.colors.gray?.[0],
+    },
+    errorText: {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
+      fontSize: 14,
+      textAlign: 'center' as const,
+      paddingHorizontal: 16,
+    },
+  })
+);
+
+const defaultProps: Partial<ImageProps> = {
+  fit: 'cover',
+  radius: 0,
+  errorMessage: 'Failed to load image',
+};
+
+export const Image = forwardRef<any, ImageProps>((props, ref) => {
+  const {
+    source,
+    width,
+    height,
+    fit,
+    radius,
+    placeholder,
+    errorMessage,
+    errorPlaceholder,
+    alt,
+    style,
+    onLoad,
+    onError,
+  } = useComponentDefaultProps('Image', defaultProps, props);
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const { styles, sx } = useStyles(
+    { width, height, radius, fit },
+    { name: 'Image' }
+  ) as any;
+
+  const handleLoad = () => {
+    setLoading(false);
+    setError(false);
+    onLoad?.();
+  };
+
+  const handleError = (event: NativeSyntheticEvent<ImageErrorEventData>) => {
+    setLoading(false);
+    setError(true);
+    onError?.(event);
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)}>
+      <RNImage
+        source={source}
+        style={styles.image}
+        onLoad={handleLoad}
+        onError={handleError}
+        {...(alt ? { accessible: true, accessibilityLabel: alt } : {})}
+      />
+
+      {loading && (
+        <BoxView style={styles.placeholder}>
+          {placeholder || <ActivityIndicator size="large" />}
+        </BoxView>
+      )}
+
+      {error && (
+        <BoxView style={styles.errorContainer}>
+          {errorPlaceholder || (
+            <Text style={styles.errorText}>{errorMessage}</Text>
+          )}
+        </BoxView>
+      )}
+    </BoxView>
+  );
+});
+
+Image.displayName = 'Image';

package/src/components/Indicator/index.tsx

@@ -0,0 +1,240 @@
+import React, { forwardRef } from 'react';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type {
+  DefaultProps,
+  MantineColor,
+  MantineNumberSize,
+  MantineSize,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface IndicatorProps extends DefaultProps {
+  /** Indicator color from theme */
+  color?: MantineColor;
+
+  /** Indicator size */
+  size?: MantineSize | number;
+
+  /** Indicator border radius */
+  radius?: MantineNumberSize;
+
+  /** If true, indicator will have a border */
+  withBorder?: boolean;
+
+  /** Indicator position */
+  position?:
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'top-center'
+    | 'bottom-center'
+    | 'middle-start'
+    | 'middle-end'
+    | 'middle-center';
+
+  /** Indicator offset */
+  offset?: number;
+
+  /** Indicator label */
+  label?: React.ReactNode;
+
+  /** Disable indicator */
+  disabled?: boolean;
+
+  /** If true, indicator will render a dot instead of a badge */
+  inline?: boolean;
+
+  /** If true, indicator will process its children */
+  processing?: boolean;
+
+  /** If true, indicator will have a pulsing animation */
+  withPulse?: boolean;
+
+  /** Children wrapped by indicator */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: rem(6),
+  sm: rem(8),
+  md: rem(10),
+  lg: rem(12),
+  xl: rem(16),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      size,
+      radius,
+      withBorder,
+      position,
+      offset,
+      disabled,
+      inline,
+    }: {
+      color: MantineColor;
+      size: MantineSize | number;
+      radius: MantineNumberSize;
+      withBorder: boolean;
+      position: string;
+      offset: number;
+      disabled: boolean;
+      inline: boolean;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const indicatorSize =
+      typeof size === 'number' ? rem(size) : sizes[size as keyof typeof sizes] || sizes.md;
+
+    const getPositionStyles = (): any => {
+      const offsetValue = offset || 0;
+      switch (position) {
+        case 'top-start':
+          return { top: offsetValue, left: offsetValue };
+        case 'top-end':
+          return { top: offsetValue, right: offsetValue };
+        case 'bottom-start':
+          return { bottom: offsetValue, left: offsetValue };
+        case 'bottom-end':
+          return { bottom: offsetValue, right: offsetValue };
+        case 'top-center':
+          return {
+            top: offsetValue,
+            left: '50%',
+            transform: [{ translateX: -(typeof indicatorSize === 'number' ? indicatorSize : 10) / 2 }],
+          };
+        case 'bottom-center':
+          return {
+            bottom: offsetValue,
+            left: '50%',
+            transform: [{ translateX: -(typeof indicatorSize === 'number' ? indicatorSize : 10) / 2 }],
+          };
+        case 'middle-start':
+          return {
+            top: '50%',
+            left: offsetValue,
+            transform: [{ translateY: -(typeof indicatorSize === 'number' ? indicatorSize : 10) / 2 }],
+          };
+        case 'middle-end':
+          return {
+            top: '50%',
+            right: offsetValue,
+            transform: [{ translateY: -(typeof indicatorSize === 'number' ? indicatorSize : 10) / 2 }],
+          };
+        case 'middle-center':
+          return {
+            top: '50%',
+            left: '50%',
+            transform: [
+              { translateX: -(typeof indicatorSize === 'number' ? indicatorSize : 10) / 2 },
+              { translateY: -(typeof indicatorSize === 'number' ? indicatorSize : 10) / 2 },
+            ],
+          };
+        default:
+          return { top: offsetValue, right: offsetValue };
+      }
+    };
+
+    return {
+      root: {
+        position: 'relative',
+        display: 'flex',
+      },
+      indicator: {
+        ...(!inline && {
+          position: 'absolute',
+          zIndex: 1,
+          ...getPositionStyles(),
+        }),
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: theme.fn.radius(radius),
+        backgroundColor: disabled
+          ? theme.colors.gray?.[5] || theme.colors.gray?.[6]
+          : colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        ...(withBorder && {
+          borderWidth: 2,
+          borderColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+        }),
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: disabled ? 0.5 : 1,
+      },
+      label: {
+        fontSize: rem(10) as any,
+        fontWeight: '700',
+        color: theme.white,
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<IndicatorProps> = {
+  color: 'red',
+  size: 'md',
+  radius: 'xl',
+  withBorder: false,
+  position: 'top-end',
+  offset: 0,
+  disabled: false,
+  inline: false,
+  processing: false,
+  withPulse: false,
+};
+
+export const Indicator = forwardRef<any, IndicatorProps>((props, ref) => {
+  const {
+    color,
+    size,
+    radius,
+    withBorder,
+    position,
+    offset,
+    label,
+    disabled,
+    inline,
+    processing,
+    withPulse,
+    children,
+    style,
+    ...others
+  } = useComponentDefaultProps('Indicator', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { color, size, radius, withBorder, position, offset, disabled, inline },
+    { name: 'Indicator' }
+  ) as any;
+
+  const indicator = (
+    <BoxView style={styles.indicator}>
+      {label && typeof label === 'string' ? (
+        <Text style={styles.label}>{label}</Text>
+      ) : (
+        label
+      )}
+    </BoxView>
+  );
+
+  if (inline) {
+    return indicator;
+  }
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {indicator}
+      {children}
+    </BoxView>
+  );
+});
+
+Indicator.displayName = 'Indicator';

package/src/components/Kbd/index.tsx

@@ -0,0 +1,84 @@
+import React, { forwardRef } from 'react';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface KbdProps extends DefaultProps {
+  /** Kbd size */
+  size?: MantineSize;
+
+  /** Kbd content */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: { fontSize: rem(10), padding: rem(2), minWidth: rem(16) },
+  sm: { fontSize: rem(11), padding: rem(3), minWidth: rem(18) },
+  md: { fontSize: rem(12), padding: rem(4), minWidth: rem(20) },
+  lg: { fontSize: rem(14), padding: rem(5), minWidth: rem(24) },
+  xl: { fontSize: rem(16), padding: rem(6), minWidth: rem(28) },
+};
+
+const useStyles = createStyles(
+  (theme, _params, { size }) => {
+    const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        backgroundColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[5]
+            : (theme.colors.gray || [])[0],
+        borderWidth: 1,
+        borderBottomWidth: 2,
+        borderColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[4]
+            : (theme.colors.gray || [])[3],
+        borderRadius: theme.radius.sm,
+        paddingHorizontal: theme.spacing.xs,
+        paddingVertical: rem(2) as any as any,
+        minWidth: sizeStyles.minWidth as any,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      label: {
+        fontSize: sizeStyles.fontSize as any,
+        fontWeight: '700',
+        fontFamily: theme.fontFamilyMonospace,
+        color:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[0]
+            : (theme.colors.gray || [])[7],
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<KbdProps> = {
+  size: 'md',
+};
+
+export const Kbd = forwardRef<any, KbdProps>((props, ref) => {
+  const { size, children, style, ...otherProps} = useComponentDefaultProps(
+    'Kbd',
+    defaultProps,
+    props
+  );
+
+  const { styles, sx } = useStyles({}, { name: 'Kbd', size}) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...otherProps}>
+      <Text style={styles.label}>{children}</Text>
+    </BoxView>
+  );
+});
+
+Kbd.displayName = 'Kbd';