react-native-mantine 0.6.0 → 0.8.0

package/src/hooks/use-form/validators.ts

@@ -0,0 +1,143 @@
+import type { FormValidator } from './types';
+
+/**
+ * Built-in validators
+ */
+
+/**
+ * Validates that a value is not empty
+ */
+export const isNotEmpty = (message = 'This field is required'): FormValidator<any> => {
+  return (value: any) => {
+    if (value === null || value === undefined || value === '') {
+      return message;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return message;
+    }
+    if (typeof value === 'string' && value.trim().length === 0) {
+      return message;
+    }
+    return null;
+  };
+};
+
+/**
+ * Validates minimum length
+ */
+export const minLength = (
+  min: number,
+  message?: string
+): FormValidator<string> => {
+  return (value: string) => {
+    if (!value) return null;
+    if (value.length < min) {
+      return message || `Must be at least ${min} characters`;
+    }
+    return null;
+  };
+};
+
+/**
+ * Validates maximum length
+ */
+export const maxLength = (
+  max: number,
+  message?: string
+): FormValidator<string> => {
+  return (value: string) => {
+    if (!value) return null;
+    if (value.length > max) {
+      return message || `Must be at most ${max} characters`;
+    }
+    return null;
+  };
+};
+
+/**
+ * Validates that value matches a pattern
+ */
+export const matches = (
+  pattern: RegExp,
+  message = 'Invalid format'
+): FormValidator<string> => {
+  return (value: string) => {
+    if (!value) return null;
+    if (!pattern.test(value)) {
+      return message;
+    }
+    return null;
+  };
+};
+
+/**
+ * Validates email format
+ */
+export const isEmail = (message = 'Invalid email'): FormValidator<string> => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return matches(emailRegex, message);
+};
+
+/**
+ * Validates minimum value
+ */
+export const min = (
+  minValue: number,
+  message?: string
+): FormValidator<number> => {
+  return (value: number) => {
+    if (value === null || value === undefined) return null;
+    if (value < minValue) {
+      return message || `Must be at least ${minValue}`;
+    }
+    return null;
+  };
+};
+
+/**
+ * Validates maximum value
+ */
+export const max = (
+  maxValue: number,
+  message?: string
+): FormValidator<number> => {
+  return (value: number) => {
+    if (value === null || value === undefined) return null;
+    if (value > maxValue) {
+      return message || `Must be at most ${maxValue}`;
+    }
+    return null;
+  };
+};
+
+/**
+ * Validates that value is in a range
+ */
+export const inRange = (
+  minValue: number,
+  maxValue: number,
+  message?: string
+): FormValidator<number> => {
+  return (value: number) => {
+    if (value === null || value === undefined) return null;
+    if (value < minValue || value > maxValue) {
+      return message || `Must be between ${minValue} and ${maxValue}`;
+    }
+    return null;
+  };
+};
+
+/**
+ * Validates that value is in a list
+ */
+export const isInArray = <T>(
+  array: T[],
+  message = 'Invalid value'
+): FormValidator<T> => {
+  return (value: T) => {
+    if (!array.includes(value)) {
+      return message;
+    }
+    return null;
+  };
+};

package/src/index.tsx

@@ -1,4 +1,5 @@
 export * from './theme';
 export * from './components';
+export * from './hooks';
 export type * from './theme/theme';
 export type * from './theme/types';

package/src/theme/utils/index.ts

@@ -0,0 +1,2 @@
+export { rem, em } from './rem';
+export { withTextWrapper, type WithTextWrapperProps } from './withTextWrapper';

package/src/theme/utils/withTextWrapper.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { Text } from '../../components/Text';
+import type { TextProps } from '../../components/Text';
+
+/**
+ * Conditionally wraps content in a Text component based on the withTextWrapper prop.
+ *
+ * In React Native, all text must be wrapped in a Text component. However, some
+ * components may need flexibility to render with or without this wrapper depending
+ * on whether their content is text or other components (like icons, views, etc.).
+ *
+ * @param children - The content to potentially wrap
+ * @param shouldWrap - Whether to wrap the content in a Text component
+ * @param textStyle - Optional style to apply to the Text wrapper
+ * @param textProps - Optional additional props to pass to the Text component
+ * @returns The children wrapped in Text if shouldWrap is true, otherwise just the children
+ *
+ * @example
+ * // Wrap text content
+ * withTextWrapper('Hello', true, styles.text)
+ *
+ * @example
+ * // Don't wrap components
+ * withTextWrapper(<Icon />, false)
+ *
+ * @example
+ * // Default behavior (wrap)
+ * withTextWrapper('Text', true, styles.text, { numberOfLines: 1 })
+ */
+export function withTextWrapper(
+  children: ReactNode,
+  shouldWrap: boolean = true,
+  textStyle?: any,
+  textProps?: Omit<TextProps, 'children' | 'style'>
+): ReactNode {
+  if (!shouldWrap) {
+    return children;
+  }
+
+  return (
+    <Text style={textStyle} {...textProps}>
+      {children}
+    </Text>
+  );
+}
+
+/**
+ * Type helper for components that support the withTextWrapper pattern.
+ * Add this to your component props interface.
+ */
+export interface WithTextWrapperProps {
+  /**
+   * If false, children will not be wrapped in a Text component.
+   * This is useful when the children contain non-text elements like icons or custom components.
+   * @default true
+   */
+  withTextWrapper?: boolean;
+}