react-native-mantine 0.4.0 → 0.5.0

package/src/components/Button/index.tsx

@@ -81,7 +81,6 @@ const defaultProps: Partial<ButtonProps> = {
 export const _Button = forwardRef<View, ButtonProps>(
   (props, ref) => {
     const {
-      // className,
       size,
       color,
       type,
@@ -98,9 +97,6 @@ export const _Button = forwardRef<View, ButtonProps>(
       loaderPosition,
       loaderProps,
       gradient,
-      // classNames,
-      // styles,
-      // unstyled,
       style,
       ...others
     } = useComponentDefaultProps('Button', defaultProps, props);
@@ -117,33 +113,20 @@ export const _Button = forwardRef<View, ButtonProps>(
       },
       {
         name: 'Button',
-        // unstyled, classNames, styles,
         variant,
         size,
       }
     );
 
-    // const colors = theme.fn.variant({ color, variant });
-
-    // const loader = (
-    //   <Loader
-    //     color={colors.color}
-    //     size={`calc(${(getSize({ size, sizes }) as any).height} / 2)`}
-    //     {...loaderProps}
-    //   />
-    // );
     const loader = <ActivityIndicator />;
 
     return (
       <UnstyledButton
         style={sx(styles.root, style)}
-        // type={type}
-        // disabled={disabled}
         data-button
         data-disabled={disabled || undefined}
         data-loading={loading || undefined}
         ref={ref}
-        // unstyled={unstyled}
         {...others}
       >
         <BoxView style={styles.inner}>
@@ -157,10 +140,7 @@ export const _Button = forwardRef<View, ButtonProps>(
             <BoxView style={styles.centerLoader}>{loader}</BoxView>
           )}
 
-          <BoxView
-            style={styles.label}
-            // style={{ textTransform: uppercase ? 'uppercase' : undefined }}
-          >
+          <BoxView style={styles.label}>
             {typeof children === 'string' || typeof children === 'number' ? (
               <Text>{children}</Text>
             ) : (

package/src/components/Input/Input.styles.ts

@@ -21,205 +21,4 @@ export const sizes = {
   xl: rem(60),
 };
 
-// const INPUT_VARIANTS = ['default', 'filled', 'unstyled'];
-
-// interface GetVariantStylesInput {
-//   theme: MantineTheme;
-//   variant: string;
-// }
-
-// function getVariantStyles({ theme, variant }: GetVariantStylesInput) {
-//   if (!INPUT_VARIANTS.includes(variant)) {
-//     return null;
-//   }
-
-//   if (variant === 'default') {
-//     return {
-//       'border': `${rem(1)} solid ${
-//         theme.colorScheme === 'dark'
-//           ? theme.colors.dark[4]
-//           : theme.colors.gray[4]
-//       }`,
-//       'backgroundColor':
-//         theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
-//       'transition': 'border-color 100ms ease',
-//       '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),
-//     };
-//   }
-
-//   if (variant === 'filled') {
-//     return {
-//       'border': `${rem(1)} solid transparent`,
-//       'backgroundColor':
-//         theme.colorScheme === 'dark'
-//           ? theme.colors.dark[5]
-//           : theme.colors.gray[1],
-//       '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),
-//     };
-//   }
-
-//   return {
-//     'borderWidth': 0,
-//     'color': theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-//     'backgroundColor': 'transparent',
-//     'minHeight': rem(28),
-//     'outline': 0,
-
-//     '&:focus, &:focus-within': {
-//       outline: 'none',
-//       borderColor: 'transparent',
-//     },
-
-//     '&:disabled': {
-//       'backgroundColor': 'transparent',
-
-//       '&:focus, &:focus-within': {
-//         outline: 'none',
-//         borderColor: 'transparent',
-//       },
-//     },
-//   };
-// }
-
-// export default createStyles(
-//   (
-//     theme,
-//     {
-//       multiline,
-//       radius,
-//       invalid,
-//       rightSectionWidth,
-//       withRightSection,
-//       iconWidth,
-//       offsetBottom,
-//       offsetTop,
-//       pointer,
-//     }: InputStylesParams,
-//     { variant, size }
-//   ) => {
-//     const invalidColor = theme.fn.variant({
-//       variant: 'filled',
-//       color: 'red',
-//     }).background;
-//     const sizeStyles =
-//       variant === 'default' || variant === 'filled'
-//         ? {
-//             minHeight: getSize({ size, sizes }),
-//             paddingLeft: `calc(${getSize({ size, sizes })}  / 3)`,
-//             paddingRight: withRightSection
-//               ? rightSectionWidth || getSize({ size, sizes })
-//               : `calc(${getSize({ size, sizes })}  / 3)`,
-//             borderRadius: theme.fn.radius(radius),
-//           }
-//         : null;
-
-//     return {
-//       wrapper: {
-//         position: 'relative',
-//         marginTop: offsetTop ? `calc(${theme.spacing.xs} / 2)` : undefined,
-//         marginBottom: offsetBottom
-//           ? `calc(${theme.spacing.xs} / 2)`
-//           : undefined,
-//       },
-
-//       input: {
-//         ...theme.fn.fontStyles(),
-//         'height': multiline
-//           ? variant === 'unstyled'
-//             ? undefined
-//             : 'auto'
-//           : getSize({ size, sizes }),
-//         'WebkitTapHighlightColor': 'transparent',
-//         'lineHeight': multiline
-//           ? theme.lineHeight
-//           : `calc(${getSize({ size, sizes })} - ${rem(2)})`,
-//         'appearance': 'none',
-//         'resize': 'none',
-//         'boxSizing': 'border-box',
-//         'fontSize': getSize({ size, sizes: theme.fontSizes }),
-//         'width': '100%',
-//         'color':
-//           theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-//         'display': 'block',
-//         'textAlign': 'left',
-//         'cursor': pointer ? 'pointer' : undefined,
-//         ...getVariantStyles({ theme, variant }),
-//         ...sizeStyles,
-
-//         '&:disabled, &[data-disabled]': {
-//           'backgroundColor':
-//             theme.colorScheme === 'dark'
-//               ? theme.colors.dark[6]
-//               : theme.colors.gray[1],
-//           'color': theme.colors.dark[2],
-//           'opacity': 0.6,
-//           'cursor': 'not-allowed',
-
-//           '&::placeholder': {
-//             color: theme.colors.dark[2],
-//           },
-//         },
-
-//         '&[data-invalid]': {
-//           'color': invalidColor,
-//           'borderColor': invalidColor,
-
-//           '&::placeholder': {
-//             opacity: 1,
-//             color: invalidColor,
-//           },
-//         },
-
-//         '&[data-with-icon]': {
-//           paddingLeft:
-//             typeof iconWidth === 'number'
-//               ? rem(iconWidth)
-//               : getSize({ size, sizes }),
-//         },
-
-//         '&::placeholder': {
-//           ...theme.fn.placeholderStyles(),
-//           opacity: 1,
-//         },
-
-//         '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button, &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
-//           {
-//             appearance: 'none',
-//           },
-
-//         '&[type=number]': {
-//           MozAppearance: 'textfield',
-//         },
-//       },
-
-//       icon: {
-//         pointerEvents: 'none',
-//         position: 'absolute',
-//         zIndex: 1,
-//         left: 0,
-//         top: 0,
-//         bottom: 0,
-//         display: 'flex',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         width: iconWidth ? rem(iconWidth) : getSize({ size, sizes }),
-//         color: invalid
-//           ? theme.colors.red[theme.colorScheme === 'dark' ? 6 : 7]
-//           : theme.colorScheme === 'dark'
-//             ? theme.colors.dark[2]
-//             : theme.colors.gray[5],
-//       },
-
-//       rightSection: {
-//         position: 'absolute',
-//         top: 0,
-//         bottom: 0,
-//         right: 0,
-//         display: 'flex',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         width: rightSectionWidth || getSize({ size, sizes }),
-//       },
-//     };
-//   }
-// );
+export const INPUT_SIZES = sizes;

package/src/components/Input/index.ts

@@ -1 +1 @@
-export { sizes as INPUT_SIZES } from './Input.styles';
+export { INPUT_SIZES } from './Input.styles';

package/src/hooks/useCachedResources.ts

@@ -8,16 +8,13 @@ export default function useCachedResources(): boolean {
   useEffect(() => {
     async function loadResourcesAndDataAsync(): Promise<void> {
       try {
-        // SplashScreen.preventAutoHideAsync()
-        // Load fonts
         await Font.loadAsync({
           Nunito: require('../fonts/Nunito-Regular.ttf'),
           'Nunito Bold': require('../fonts/Nunito-Bold.ttf'),
           'Nunito SemiBold': require('../fonts/Nunito-SemiBold.ttf'),
         })
       } catch (e) {
-        // We might want to provide this error information to an error reporting service
-        // console.warn(e)
+        // Error silently ignored - consider adding error reporting in production
       } finally {
         setLoadingComplete(true)
       }

package/src/theme/theme-provider.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { Appearance, Platform } from 'react-native';
+import { ActivityIndicator, Appearance, Platform } from 'react-native';
 
 import type { ColorSchemeName } from 'react-native';
 
@@ -17,7 +17,7 @@ import type { MantineTheme } from './default-theme';
 import { createTheme } from './create-theme';
 
 import { filterProps } from './filter-props';
-// import useCachedResources from '../hooks/useCachedResources';
+import useCachedResources from '../hooks/useCachedResources';
 
 type ThemeProps = {
   children: ReactNode;
@@ -94,15 +94,15 @@ export const Theme = ({
   theme: themeOverwrite,
   forceMode,
 }: ThemeProps): React.ReactElement => {
-  // const loaded = useCachedResources();
+  const loaded = useCachedResources();
 
   const theme = useMemo(() => {
     return createTheme(themeOverwrite);
   }, [themeOverwrite]);
 
-  // if (!loaded) {
-  //   return <ActivityIndicator />;
-  // }
+  if (!loaded) {
+    return <ActivityIndicator />;
+  }
   return (
     <ThemeProvider theme={theme} forceMode={forceMode}>
       {children}

package/src/theme/types/MantineStyleSystem.ts

@@ -7,56 +7,3 @@ export type SystemProp<Value> =
 export type SpacingValue = MantineNumberSize | (string & {});
 
 export type MantineStyleSystemProps = any;
-
-// export interface MantineStyleSystemProps {
-//   m?: SystemProp<SpacingValue>;
-//   my?: SystemProp<SpacingValue>;
-//   mx?: SystemProp<SpacingValue>;
-//   mt?: SystemProp<SpacingValue>;
-//   mb?: SystemProp<SpacingValue>;
-//   ml?: SystemProp<SpacingValue>;
-//   mr?: SystemProp<SpacingValue>;
-
-//   p?: SystemProp<SpacingValue>;
-//   py?: SystemProp<SpacingValue>;
-//   px?: SystemProp<SpacingValue>;
-//   pt?: SystemProp<SpacingValue>;
-//   pb?: SystemProp<SpacingValue>;
-//   pl?: SystemProp<SpacingValue>;
-//   pr?: SystemProp<SpacingValue>;
-
-//   bg?: SystemProp<MantineColor>;
-//   c?: SystemProp<MantineColor>;
-//   opacity?: SystemProp<CSSProperties['opacity']>;
-
-//   ff?: SystemProp<CSSProperties['fontFamily']>;
-//   fz?: SystemProp<SpacingValue>;
-//   fw?: SystemProp<CSSProperties['fontWeight']>;
-//   lts?: SystemProp<CSSProperties['letterSpacing']>;
-//   ta?: SystemProp<CSSProperties['textAlign']>;
-//   lh?: SystemProp<CSSProperties['lineHeight']>;
-//   fs?: SystemProp<CSSProperties['fontStyle']>;
-//   tt?: SystemProp<CSSProperties['textTransform']>;
-//   td?: SystemProp<CSSProperties['textDecoration']>;
-
-//   w?: SystemProp<CSSProperties['width']>;
-//   miw?: SystemProp<CSSProperties['minWidth']>;
-//   maw?: SystemProp<CSSProperties['maxWidth']>;
-//   h?: SystemProp<CSSProperties['height']>;
-//   mih?: SystemProp<CSSProperties['minHeight']>;
-//   mah?: SystemProp<CSSProperties['maxHeight']>;
-
-//   bgsz?: SystemProp<CSSProperties['backgroundSize']>;
-//   bgp?: SystemProp<CSSProperties['backgroundPosition']>;
-//   bgr?: SystemProp<CSSProperties['backgroundRepeat']>;
-//   bga?: SystemProp<CSSProperties['backgroundAttachment']>;
-
-//   pos?: SystemProp<CSSProperties['position']>;
-//   top?: SystemProp<CSSProperties['top']>;
-//   left?: SystemProp<CSSProperties['left']>;
-//   bottom?: SystemProp<CSSProperties['bottom']>;
-//   right?: SystemProp<CSSProperties['right']>;
-//   inset?: SystemProp<CSSProperties['inset']>;
-
-//   display?: SystemProp<CSSProperties['display']>;
-// }