react-native-mantine 0.1.15 → 0.3.0

package/src/components/Table/index.tsx

@@ -0,0 +1,402 @@
+import React, { forwardRef, createContext, useContext } from 'react';
+import { ScrollView } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, SpacingValue } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+interface TableContextValue {
+  striped: boolean;
+  highlightOnHover: boolean;
+  withBorder: boolean;
+  withColumnBorders: boolean;
+  fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  verticalSpacing: SpacingValue;
+  horizontalSpacing: SpacingValue;
+}
+
+const TableContext = createContext<TableContextValue | null>(null);
+
+const useTableContext = () => {
+  const context = useContext(TableContext);
+  return context;
+};
+
+export interface TableProps extends DefaultProps {
+  /** Table children (Thead, Tbody, Tfoot) */
+  children?: React.ReactNode;
+
+  /** Horizontal scroll on overflow */
+  horizontalSpacing?: SpacingValue;
+
+  /** Vertical spacing between rows */
+  verticalSpacing?: SpacingValue;
+
+  /** Font size */
+  fontSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Add striped rows styling */
+  striped?: boolean;
+
+  /** Highlight row on hover */
+  highlightOnHover?: boolean;
+
+  /** Add border to table */
+  withBorder?: boolean;
+
+  /** Add borders between columns */
+  withColumnBorders?: boolean;
+
+  /** Caption position */
+  captionSide?: 'top' | 'bottom';
+
+  /** Table caption */
+  caption?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface TableTheadProps extends DefaultProps {
+  /** Thead children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface TableTbodyProps extends DefaultProps {
+  /** Tbody children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface TableTfootProps extends DefaultProps {
+  /** Tfoot children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface TableTrProps extends DefaultProps {
+  /** Tr children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Internal row index */
+  __index?: number;
+}
+
+export interface TableThProps extends DefaultProps {
+  /** Th children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface TableTdProps extends DefaultProps {
+  /** Td children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const fontSizes = {
+  xs: rem(10),
+  sm: rem(12),
+  md: rem(14),
+  lg: rem(16),
+  xl: rem(18),
+};
+
+const useTableStyles = createStyles(
+  (
+    theme,
+    {
+      withBorder,
+      captionSide,
+    }: {
+      withBorder: boolean;
+      captionSide: 'top' | 'bottom';
+    }
+  ) => ({
+    wrapper: {
+      flex: 1,
+    },
+    root: {
+      width: '100%',
+      borderCollapse: 'collapse' as any,
+      ...(withBorder && {
+        borderWidth: 1,
+        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+      }),
+    },
+    caption: {
+      fontSize: theme.fontSizes.sm as number,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
+      paddingVertical: theme.spacing.xs,
+      textAlign: 'center',
+      ...(captionSide === 'bottom' && { order: 1 }),
+    },
+  })
+);
+
+const useTableHeadStyles = createStyles((theme) => ({
+  thead: {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+  },
+}));
+
+const useTableRowStyles = createStyles(
+  (
+    theme,
+    {
+      striped,
+      isEven,
+    }: {
+      striped: boolean;
+      highlightOnHover: boolean;
+      isEven: boolean;
+    }
+  ) => ({
+    tr: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+      ...(striped &&
+        isEven && {
+          backgroundColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[0],
+        }),
+    },
+  })
+);
+
+const useTableCellStyles = createStyles(
+  (
+    theme,
+    {
+      fontSize,
+      verticalSpacing,
+      horizontalSpacing,
+      withColumnBorders,
+      isHeader,
+    }: {
+      fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+      verticalSpacing: SpacingValue;
+      horizontalSpacing: SpacingValue;
+      withColumnBorders: boolean;
+      isHeader: boolean;
+    }
+  ) => {
+    const getVerticalPadding = () => {
+      if (typeof verticalSpacing === 'number') return rem(verticalSpacing);
+      return theme.spacing[verticalSpacing] || theme.spacing.xs;
+    };
+
+    const getHorizontalPadding = () => {
+      if (typeof horizontalSpacing === 'number') return rem(horizontalSpacing);
+      return theme.spacing[horizontalSpacing] || theme.spacing.xs;
+    };
+
+    return {
+      cell: {
+        paddingVertical: getVerticalPadding() as any,
+        paddingHorizontal: getHorizontalPadding() as any,
+        fontSize: fontSizes[fontSize],
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        textAlign: 'left',
+        ...(withColumnBorders && {
+          borderRightWidth: 1,
+          borderRightColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+        }),
+        ...(isHeader && {
+          fontWeight: '600',
+        }),
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<TableProps> = {
+  horizontalSpacing: 'xs',
+  verticalSpacing: 'xs',
+  fontSize: 'sm',
+  striped: false,
+  highlightOnHover: false,
+  withBorder: false,
+  withColumnBorders: false,
+  captionSide: 'top',
+};
+
+export const Table = forwardRef<any, TableProps>((props, ref) => {
+  const {
+    children,
+    horizontalSpacing,
+    verticalSpacing,
+    fontSize,
+    striped,
+    highlightOnHover: _highlightOnHover,
+    withBorder,
+    withColumnBorders,
+    captionSide,
+    caption,
+    style,
+    ...others
+  } = useComponentDefaultProps('Table', defaultProps, props);
+
+  const { styles, sx} = useTableStyles(
+    { withBorder, captionSide },
+    { name: 'Table' }
+  ) as any;
+
+  return (
+    <TableContext.Provider
+      value={{
+        striped: striped!,
+        highlightOnHover: _highlightOnHover!,
+        withBorder: withBorder!,
+        withColumnBorders: withColumnBorders!,
+        fontSize: fontSize!,
+        verticalSpacing: verticalSpacing!,
+        horizontalSpacing: horizontalSpacing!,
+      }}
+    >
+      <ScrollView horizontal style={styles.wrapper} showsHorizontalScrollIndicator>
+        <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+          {caption && <Text style={styles.caption}>{caption}</Text>}
+          {children}
+        </BoxView>
+      </ScrollView>
+    </TableContext.Provider>
+  );
+});
+
+export const Thead = forwardRef<any, TableTheadProps>((props, ref) => {
+  const { children, style, ...others} = props;
+  const { styles, sx} = useTableHeadStyles({}, { name: 'Thead' }) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.thead, style)} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+export const Tbody = forwardRef<any, TableTbodyProps>((props, ref) => {
+  const { children, style, ...others } = props;
+
+  const childrenArray = React.Children.toArray(children);
+
+  return (
+    <BoxView ref={ref} style={style} {...others}>
+      {childrenArray.map((child, index) => {
+        if (!React.isValidElement(child)) return child;
+        return React.cloneElement(child as React.ReactElement, {
+          key: index,
+          __index: index,
+        });
+      })}
+    </BoxView>
+  );
+});
+
+export const Tfoot = forwardRef<any, TableTfootProps>((props, ref) => {
+  const { children, style, ...others } = props;
+
+  return (
+    <BoxView ref={ref} style={style} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+export const Tr = forwardRef<any, TableTrProps>((props, ref) => {
+  const { children, style, __index, ...others} = props;
+  const context = useTableContext();
+
+  const { styles, sx} = useTableRowStyles(
+    {
+      striped: context?.striped ?? false,
+      highlightOnHover: context?.highlightOnHover ?? false,
+      isEven: (__index ?? 0) % 2 === 0,
+    },
+    { name: 'Tr' }
+  ) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.tr, style)} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+export const Th = forwardRef<any, TableThProps>((props, ref) => {
+  const { children, style, ...others} = props;
+  const context = useTableContext();
+
+  const { styles, sx} = useTableCellStyles(
+    {
+      fontSize: context?.fontSize ?? 'sm',
+      verticalSpacing: context?.verticalSpacing ?? 'xs',
+      horizontalSpacing: context?.horizontalSpacing ?? 'xs',
+      withColumnBorders: context?.withColumnBorders ?? false,
+      isHeader: true,
+    },
+    { name: 'Th' }
+  ) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
+      {typeof children === 'string' ? <Text style={styles.cell}>{children}</Text> : children}
+    </BoxView>
+  );
+});
+
+export const Td = forwardRef<any, TableTdProps>((props, ref) => {
+  const { children, style, ...others} = props;
+  const context = useTableContext();
+
+  const { styles, sx} = useTableCellStyles(
+    {
+      fontSize: context?.fontSize ?? 'sm',
+      verticalSpacing: context?.verticalSpacing ?? 'xs',
+      horizontalSpacing: context?.horizontalSpacing ?? 'xs',
+      withColumnBorders: context?.withColumnBorders ?? false,
+      isHeader: false,
+    },
+    { name: 'Td' }
+  ) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
+      {typeof children === 'string' ? <Text style={styles.cell}>{children}</Text> : children}
+    </BoxView>
+  );
+});
+
+Table.displayName = 'Table';
+Thead.displayName = 'Table.Thead';
+Tbody.displayName = 'Table.Tbody';
+Tfoot.displayName = 'Table.Tfoot';
+Tr.displayName = 'Table.Tr';
+Th.displayName = 'Table.Th';
+Td.displayName = 'Table.Td';
+
+// Attach sub-components
+(Table as any).Thead = Thead;
+(Table as any).Tbody = Tbody;
+(Table as any).Tfoot = Tfoot;
+(Table as any).Tr = Tr;
+(Table as any).Th = Th;
+(Table as any).Td = Td;

package/src/components/Text/index.tsx

@@ -12,6 +12,8 @@ export type TextProps = DefaultText['props'] & {
   fontSize?: number;
   color?: string;
   white?: boolean;
+  weight?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+  align?: 'left' | 'center' | 'right' | 'justify';
 };
 
 const propToColor = (
@@ -40,6 +42,8 @@ export const Text = forwardRef((props: TextProps, ref: any) => {
     questrial = false,
     semiBold = false,
     fontSize,
+    weight,
+    align,
     ...otherProps
   } = props;
 
@@ -65,13 +69,14 @@ export const Text = forwardRef((props: TextProps, ref: any) => {
               : questrial
                 ? 'Questrial'
                 : fontFamily,
-          fontWeight: bold ? '900' : '300',
+          fontWeight: weight || (bold ? '900' : '300'),
           fontSize: fontSize ? fontSize : get(fontSizes, size, 16),
           color: white
             ? 'white'
             : color
               ? propToColor(color, colors, primaryShade)
               : light.text,
+          ...(align ? { textAlign: align } : {}),
         },
         style,
       ]}

package/src/components/TextInput/index.tsx

@@ -0,0 +1,232 @@
+import React, { forwardRef } from 'react';
+import { TextInput as RNTextInput, type TextInputProps as RNTextInputProps } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type {
+  DefaultProps,
+  MantineNumberSize,
+  MantineSize,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles, getSize } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+import { INPUT_SIZES } from '../Input';
+
+export interface TextInputProps extends DefaultProps, Omit<RNTextInputProps, 'style'> {
+  /** Input label */
+  label?: React.ReactNode;
+
+  /** Input description */
+  description?: React.ReactNode;
+
+  /** Error message */
+  error?: React.ReactNode;
+
+  /** Input size */
+  size?: MantineSize;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Icon displayed on the left side of input */
+  icon?: React.ReactNode;
+
+  /** Right section of input */
+  rightSection?: React.ReactNode;
+
+  /** Right section width */
+  rightSectionWidth?: number;
+
+  /** Displays required asterisk */
+  required?: boolean;
+
+  /** Input variant */
+  variant?: 'default' | 'filled' | 'unstyled';
+
+  /** Additional styles */
+  style?: any;
+
+  /** Input wrapper style */
+  wrapperStyle?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      radius,
+      invalid,
+      withIcon,
+      withRightSection,
+      rightSectionWidth,
+    }: {
+      radius: MantineNumberSize;
+      invalid: boolean;
+      withIcon: boolean;
+      withRightSection: boolean;
+      rightSectionWidth?: number;
+    },
+    { variant, size }
+  ) => {
+    const getVariantStyles = () => {
+      if (variant === 'filled') {
+        return {
+          backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+          borderWidth: 1,
+          borderColor: 'transparent',
+        };
+      }
+
+      if (variant === 'unstyled') {
+        return {
+          backgroundColor: 'transparent',
+          borderWidth: 0,
+          paddingHorizontal: 0,
+        };
+      }
+
+      // default variant
+      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],
+      };
+    };
+
+    const sizeValue = INPUT_SIZES[size as keyof typeof INPUT_SIZES] || INPUT_SIZES.md;
+
+    return {
+      wrapper: {
+        width: '100%',
+      },
+      label: {
+        fontSize: theme.fontSizes.sm as number,
+        fontWeight: '500',
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        marginBottom: theme.spacing.xs / 2,
+      },
+      required: {
+        color: (theme.colors.red || [])[6],
+      },
+      description: {
+        fontSize: theme.fontSizes.xs as number,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+        marginTop: theme.spacing.xs / 2,
+        marginBottom: theme.spacing.xs / 2,
+      },
+      error: {
+        fontSize: theme.fontSizes.xs as number,
+        color: (theme.colors.red || [])[6],
+        marginTop: theme.spacing.xs / 2,
+      },
+      inputWrapper: {
+        position: 'relative',
+      },
+      input: {
+        ...theme.fn.fontStyles(),
+        height: sizeValue as any,
+        fontSize: getSize({ size, sizes: theme.fontSizes }) as any,
+        paddingHorizontal: (variant === 'unstyled' ? 0 : rem(12)) as any,
+        paddingLeft: (withIcon ? sizeValue : variant === 'unstyled' ? 0 : rem(12)) as any,
+        paddingRight: (withRightSection
+          ? rem(rightSectionWidth || sizeValue)
+          : variant === 'unstyled'
+          ? 0
+          : rem(12)) as any,
+        borderRadius: theme.fn.radius(radius),
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        ...getVariantStyles(),
+        ...(invalid && {
+          borderColor: (theme.colors.red || [])[6],
+          color: (theme.colors.red || [])[6],
+        }),
+      },
+      icon: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: sizeValue as any,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1,
+      },
+      rightSectionContainer: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: rem(rightSectionWidth || sizeValue) as any,
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<TextInputProps> = {
+  size: 'sm',
+  radius: 'sm',
+  variant: 'default',
+  required: false,
+};
+
+export const TextInput = forwardRef<RNTextInput, TextInputProps>((props, ref) => {
+  const {
+    label,
+    description,
+    error,
+    size,
+    radius,
+    icon,
+    rightSection,
+    rightSectionWidth,
+    required,
+    variant,
+    style,
+    wrapperStyle,
+    ...others
+  } = useComponentDefaultProps('TextInput', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    {
+      radius,
+      invalid: !!error,
+      withIcon: !!icon,
+      withRightSection: !!rightSection,
+      rightSectionWidth,
+    },
+    { name: 'TextInput', variant, size }
+  ) as any;
+
+  return (
+    <BoxView style={sx(styles.wrapper, wrapperStyle)}>
+      {label && (
+        <Text style={styles.label}>
+          {label}
+          {required && <Text style={styles.required}> *</Text>}
+        </Text>
+      )}
+
+      {description && <Text style={styles.description}>{description}</Text>}
+
+      <BoxView style={styles.inputWrapper}>
+        {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+
+        <RNTextInput
+          ref={ref}
+          style={sx(styles.input, style)}
+          {...others}
+        />
+
+        {rightSection && (
+          <BoxView style={styles.rightSectionContainer}>{rightSection}</BoxView>
+        )}
+      </BoxView>
+
+      {error && <Text style={styles.error}>{error}</Text>}
+    </BoxView>
+  );
+});
+
+TextInput.displayName = 'TextInput';