react-native-mantine 0.3.0 → 0.5.0

package/lib/typescript/module/src/components/Input/index.d.ts

@@ -1,2 +1,2 @@
-export { sizes as INPUT_SIZES } from './Input.styles';
+export { INPUT_SIZES } from './Input.styles';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/components/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/typescript/module/src/components/UnstyledButton/UnstyledButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnstyledButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/UnstyledButton/UnstyledButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,cAAc;YAEO,GAAG;6BAkBnC,CAAC"}
+{"version":3,"file":"UnstyledButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/UnstyledButton/UnstyledButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,cAAc;YAEO,GAAG;6BAkBnC,CAAC"}

package/lib/typescript/module/src/hooks/useCachedResources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCachedResources.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useCachedResources.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,OAAO,CA0BpD"}
+{"version":3,"file":"useCachedResources.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useCachedResources.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,OAAO,CAuBpD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mantine",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Make Mantine Accessable on React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/Button/Button.styles.ts

@@ -56,15 +56,10 @@ interface GetSizeStyles {
 }
 
 function getSizeStyles({
-  // compact,
   size,
   withLeftIcon,
   withRightIcon,
 }: GetSizeStyles): any {
-  // if (compact) {
-  //   return sizes[`compact-${size}`];
-  // }
-
   const _sizes: (typeof sizes)[keyof typeof sizes] = sizes[size];
 
   if (!_sizes) {
@@ -87,42 +82,6 @@ const getWidthStyles = (fullWidth: boolean) => ({
   width: fullWidth ? '100%' : 'auto',
 });
 
-// interface GetVariantStyles {
-//   theme: MantineTheme;
-//   color: MantineColor;
-//   variant: string;
-//   gradient: MantineGradient;
-// }
-
-// function getVariantStyles({
-//   variant,
-//   theme,
-//   color,
-//   gradient,
-// }: GetVariantStyles) {
-//   if (!BUTTON_VARIANTS.includes(variant)) {
-//     return null;
-//   }
-
-//   const colors = theme.fn.variant({ color, variant, gradient });
-
-//   if (variant === 'gradient') {
-//     return {
-//       border: 0,
-//       backgroundImage: colors.background,
-//       color: colors.color,
-//       ...theme.fn.hover({ backgroundSize: '200%' }),
-//     };
-//   }
-
-//   return {
-//     border: `${rem(1)} solid ${colors.border}`,
-//     backgroundColor: colors.background,
-//     color: colors.color,
-//     ...theme.fn.hover({ backgroundColor: colors.hover }),
-//   };
-// }
-
 interface GetVariantStylesInput {
   variant: string;
   color: MantineColor;
@@ -163,10 +122,7 @@ const useStyles = createStyles(
       color,
       gradient,
     }: ButtonStylesParams,
-    {
-      variant,
-      size,
-    }
+    { variant, size }
   ) => {
     return {
       root: {
@@ -245,6 +201,7 @@ const useStyles = createStyles(
         overflow: 'hidden',
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'center',
       },
     };
   }

package/src/components/Button/index.tsx

@@ -9,10 +9,11 @@ import type {
 } from '../../theme/types';
 import type { MantineGradient } from '../../theme/theme';
 import type { LoaderProps } from '../Loader';
-import { ActivityIndicator } from 'react-native';
+import { ActivityIndicator, View } from 'react-native';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import useStyles from './Button.styles';
 import { BoxView } from '../BoxView';
+import { Text } from '../Text';
 
 export type ButtonStylesNames = any;
 
@@ -77,10 +78,9 @@ const defaultProps: Partial<ButtonProps> = {
   loaderPosition: 'left',
 };
 
-export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
+export const _Button = forwardRef<View, ButtonProps>(
   (props, ref) => {
     const {
-      // className,
       size,
       color,
       type,
@@ -97,9 +97,6 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
       loaderPosition,
       loaderProps,
       gradient,
-      // classNames,
-      // styles,
-      // unstyled,
       style,
       ...others
     } = useComponentDefaultProps('Button', defaultProps, props);
@@ -116,33 +113,20 @@ export const _Button = forwardRef<HTMLButtonElement, 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}>
@@ -156,11 +140,12 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
             <BoxView style={styles.centerLoader}>{loader}</BoxView>
           )}
 
-          <BoxView
-            style={styles.label}
-            // style={{ textTransform: uppercase ? 'uppercase' : undefined }}
-          >
-            {children}
+          <BoxView style={styles.label}>
+            {typeof children === 'string' || typeof children === 'number' ? (
+              <Text>{children}</Text>
+            ) : (
+              children
+            )}
           </BoxView>
 
           {(rightIcon || (loading && loaderPosition === 'right')) && (

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/components/UnstyledButton/UnstyledButton.tsx

@@ -3,7 +3,6 @@ import { BoxView } from '../BoxView';
 import useStyles from './UnstyledButton.styles';
 import { TouchableOpacity } from 'react-native';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
-import { Text } from '../Text';
 
 export interface UnstyledButtonProps {
   variant?: string;
@@ -27,7 +26,7 @@ export const UnstyledButton = forwardRef<
       onPress={typeof onPress === 'function' ? onPress : () => {}}
     >
       <BoxView ref={ref} style={[styles.root, style]} {...others}>
-        <Text>{children}</Text>
+        {children}
       </BoxView>
     </TouchableOpacity>
   );

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']>;
-// }