react-native-mantine 0.1.11 → 0.1.15

package/src/components/Button/index.tsx

@@ -0,0 +1,175 @@
+import React, { forwardRef } from 'react';
+import { UnstyledButton } from '../UnstyledButton';
+import type {
+  DefaultProps,
+  MantineColor,
+  MantineNumberSize,
+  MantineSize,
+  Variants,
+} from '../../theme/types';
+import type { MantineGradient } from '../../theme/theme';
+import type { LoaderProps } from '../Loader';
+import { ActivityIndicator } from 'react-native';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import useStyles from './Button.styles';
+import { BoxView } from '../BoxView';
+
+export type ButtonStylesNames = any;
+
+export interface ButtonProps extends DefaultProps {
+  /** Predefined button size */
+  size?: MantineSize;
+
+  /** Button type attribute */
+  type?: 'submit' | 'button' | 'reset';
+
+  /** Button color from theme */
+  color?: MantineColor;
+
+  /** Adds icon before button label  */
+  leftIcon?: React.ReactNode;
+
+  /** Adds icon after button label  */
+  rightIcon?: React.ReactNode;
+
+  /** Sets button width to 100% of parent element */
+  fullWidth?: boolean;
+
+  /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */
+  radius?: MantineNumberSize;
+
+  /** Controls button appearance */
+  variant?: Variants<
+    'filled' | 'outline' | 'light' | 'white' | 'default' | 'subtle' | 'gradient'
+  >;
+
+  /** Controls gradient settings in gradient variant only */
+  gradient?: MantineGradient;
+
+  /** Set text-transform to uppercase */
+  uppercase?: boolean;
+
+  /** Reduces vertical and horizontal spacing */
+  compact?: boolean;
+
+  /** Indicate loading state */
+  loading?: boolean;
+
+  /** Props spread to Loader component */
+  loaderProps?: LoaderProps;
+
+  /** Loader position relative to button label */
+  loaderPosition?: 'left' | 'right' | 'center';
+
+  /** Button label */
+  children?: React.ReactNode;
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  style?: any;
+}
+
+const defaultProps: Partial<ButtonProps> = {
+  size: 'sm',
+  type: 'button',
+  variant: 'filled',
+  loaderPosition: 'left',
+};
+
+export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      // className,
+      size,
+      color,
+      type,
+      disabled,
+      children,
+      leftIcon,
+      rightIcon,
+      fullWidth,
+      variant,
+      radius,
+      uppercase,
+      compact,
+      loading,
+      loaderPosition,
+      loaderProps,
+      gradient,
+      // classNames,
+      // styles,
+      // unstyled,
+      style,
+      ...others
+    } = useComponentDefaultProps('Button', defaultProps, props);
+
+    const { styles, sx } = useStyles(
+      {
+        radius,
+        color,
+        fullWidth,
+        compact,
+        gradient,
+        withLeftIcon: !!leftIcon,
+        withRightIcon: !!rightIcon,
+      },
+      {
+        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}>
+          {(leftIcon || (loading && loaderPosition === 'left')) && (
+            <BoxView style={sx(styles.icon, styles.leftIcon)}>
+              {loading && loaderPosition === 'left' ? loader : leftIcon}
+            </BoxView>
+          )}
+
+          {loading && loaderPosition === 'center' && (
+            <BoxView style={styles.centerLoader}>{loader}</BoxView>
+          )}
+
+          <BoxView
+            style={styles.label}
+            // style={{ textTransform: uppercase ? 'uppercase' : undefined }}
+          >
+            {children}
+          </BoxView>
+
+          {(rightIcon || (loading && loaderPosition === 'right')) && (
+            <BoxView style={sx(styles.icon, styles.rightIcon)}>
+              {loading && loaderPosition === 'right' ? loader : rightIcon}
+            </BoxView>
+          )}
+        </BoxView>
+      </UnstyledButton>
+    );
+  }
+) as any;

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

@@ -0,0 +1,225 @@
+import type { MantineNumberSize } from '../../theme/types';
+import { rem } from '../../theme/utils/rem';
+
+export interface InputStylesParams {
+  radius: MantineNumberSize;
+  multiline: boolean;
+  invalid: boolean;
+  rightSectionWidth: string | number;
+  withRightSection: boolean;
+  iconWidth: string | number;
+  offsetBottom: boolean;
+  offsetTop: boolean;
+  pointer: boolean;
+}
+
+export const sizes = {
+  xs: rem(30),
+  sm: rem(36),
+  md: rem(42),
+  lg: rem(50),
+  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 }),
+//       },
+//     };
+//   }
+// );

package/src/components/Input/index.ts

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

package/src/components/index.tsx

@@ -2,5 +2,6 @@ export * from './BoxView';
 export * from './Group';
 export * from './Stack';
 export * from './Text';
+export * from './Button';
 export * from './UnstyledButton';
 export * from './ActionIcon';

package/src/theme/create-styles.ts

@@ -4,19 +4,30 @@ import { StyleSheet } from 'react-native';
 
 import { useTheme } from './theme-provider';
 
-import type { TTheme } from './default-theme';
+import type { MantineTheme } from './default-theme';
 
 type NamedStyles<T> = {
   [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
 };
 
+type Variations =
+  | {
+      variant?: string;
+      size: string | number;
+    }
+  | any;
+
 export function createStyles<T = any>(
-  input: (theme: TTheme, params: any) => NamedStyles<T>
+  input: (
+    theme: MantineTheme,
+    params: any,
+    variations?: Variations
+  ) => NamedStyles<T>
 ) {
   const getStyleObject = typeof input === 'function' ? input : () => input;
-  function useStyles(params?: any) {
+  function useStyles(params?: any, variations?: Variations) {
     const theme = useTheme();
-    const styleObject = getStyleObject(theme, params);
+    const styleObject = getStyleObject(theme, params, variations);
     const sx = (...args: any) => {
       return args;
     };

package/src/theme/{generate-theme.ts → create-theme.ts}

@@ -1,6 +1,7 @@
 import { DEFAULT_COLORS, DEFAULT_THEME } from './default-theme';
-import type { TTheme } from './default-theme';
-export const generateTheme = (theme?: Partial<TTheme>): TTheme => {
+import type { MantineTheme } from './default-theme';
+
+export const createTheme = (theme?: Partial<MantineTheme>): MantineTheme => {
   const { primaryShade = 7, other = {} } = theme || {};
   return {
     ...DEFAULT_THEME,

package/src/theme/default-theme.ts

@@ -214,7 +214,7 @@ export const DEFAULT_COLORS: {
 const tintColorLight = '#2f95dc';
 const tintColorDark = '#fff';
 
-export const _DEFAULT_THEME: TTheme = {
+export const _DEFAULT_THEME: MantineTheme = {
   fontFamily: 'System font',
   fontFamilyBold: 'System font',
   fontFamilySemiBold: 'System font',
@@ -261,7 +261,7 @@ export const _DEFAULT_THEME: TTheme = {
     xl: 20,
   },
 
-  defaultRadius:8,
+  defaultRadius: 8,
   radius: {
     xs: 2,
     sm: 4,
@@ -319,7 +319,7 @@ export type ThemeSize = {
 
 export type themeMode = 'dark' | 'light';
 
-export type TTheme = {
+export type MantineTheme = {
   fontFamily: string;
   fontFamilyBold: string;
 

package/src/theme/index.tsx

@@ -2,3 +2,4 @@ export { ThemeProvider, useTheme, Theme } from './theme-provider';
 export { createStyles } from './create-styles';
 export { filterProps } from './filter-props';
 export { getSize } from './get-size';
+export { createTheme } from './create-theme';

package/src/theme/theme-provider.tsx

@@ -13,15 +13,15 @@ import type { ColorSchemeName } from 'react-native';
 import type { ReactNode } from 'react';
 
 import { Layout } from './constants';
-import type { TTheme } from './default-theme';
-import { generateTheme } from './generate-theme';
+import type { MantineTheme } from './default-theme';
+import { createTheme } from './create-theme';
 
 import { filterProps } from './filter-props';
 import useCachedResources from '../hooks/useCachedResources';
 
 type ThemeProps = {
   children: ReactNode;
-  theme?: Partial<TTheme>;
+  theme?: Partial<MantineTheme>;
   forceMode?: 'light' | 'dark';
 };
 
@@ -33,7 +33,7 @@ export const ThemeProvider = ({
   forceMode,
 }: {
   children: React.ReactNode;
-  theme: TTheme;
+  theme: MantineTheme;
   forceMode?: 'light' | 'dark';
 }): React.ReactElement => {
   const { colors, primaryShade, primaryColor, secondaryColor } = theme;
@@ -87,7 +87,7 @@ export const ThemeProvider = ({
   );
 };
 
-export const useTheme = (): TTheme => useContext(ThemeContext);
+export const useTheme = (): MantineTheme => useContext(ThemeContext);
 
 export const Theme = ({
   children,
@@ -97,7 +97,7 @@ export const Theme = ({
   const loaded = useCachedResources();
 
   const theme = useMemo(() => {
-    return generateTheme(themeOverwrite);
+    return createTheme(themeOverwrite);
   }, [themeOverwrite]);
 
   if (!loaded) {

package/src/theme/theme.d.ts

@@ -11,3 +11,5 @@ export type Palette = [
   string,
   string,
 ];
+
+export type MantineGradient = any;

package/src/theme/types/DefaultProps.ts

@@ -1,6 +1,11 @@
-type CSSObject = any
-export type ClassNames<StylesNames extends string> = Partial<Record<StylesNames, string>>;
-export type Styles<StylesNames extends string, StylesParams extends Record<string, any> = never> =
+type CSSObject = any;
+export type ClassNames<StylesNames extends string> = Partial<
+  Record<StylesNames, string>
+>;
+export type Styles<
+  StylesNames extends string,
+  StylesParams extends Record<string, any> = never,
+> =
   | Partial<Record<StylesNames, CSSObject>>
   | ((
       theme: any,
@@ -8,6 +13,6 @@ export type Styles<StylesNames extends string, StylesParams extends Record<strin
       context: any
     ) => Partial<Record<StylesNames, CSSObject>>);
 
-export interface DefaultProps  {
+export interface DefaultProps {
   style?: any;
 }

package/src/theme/utils/rem.ts

@@ -0,0 +1,19 @@
+function createConverter(units: string) {
+  return (px: unknown) => {
+    if (typeof px === 'number') {
+      return `${px / 16}${units}`;
+    }
+
+    if (typeof px === 'string') {
+      const replaced = px.replace('px', '');
+      if (!Number.isNaN(Number(replaced))) {
+        return `${Number(replaced) / 16}${units}`;
+      }
+    }
+
+    return px as string;
+  };
+}
+
+export const rem = createConverter('rem');
+export const em = createConverter('em');

package/lib/commonjs/theme/generate-theme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_defaultTheme","require","generateTheme","theme","primaryShade","other","DEFAULT_THEME","fontFamily","fontFamilyBold","fontFamilySemiBold","fontFamilyInput","primaryColor","secondaryColor","headings","colors","DEFAULT_COLORS","exports"],"sourceRoot":"../../../src","sources":["theme/generate-theme.ts"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEO,MAAMC,aAAa,GAAIC,KAAuB,IAAa;EAChE,MAAM;IAAEC,YAAY,GAAG,CAAC;IAAEC,KAAK,GAAG,CAAC;EAAE,CAAC,GAAGF,KAAK,IAAI,CAAC,CAAC;EACpD,OAAO;IACL,GAAGG,2BAAa;IAChBF,YAAY,EAAEA,YAAY;IAC1BC,KAAK,EAAEA,KAAK;IACZE,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,aAAa;IAC7BC,kBAAkB,EAAE,iBAAiB;IACrCC,eAAe,EAAE,QAAQ;IACzBC,YAAY,EAAE,MAAM;IACpBC,cAAc,EAAE,MAAM;IACtBC,QAAQ,EAAE;MACRN,UAAU,EAAE;IACd,CAAC;IACDO,MAAM,EAAEC;EACV,CAAC;AACH,CAAC;AAACC,OAAA,CAAAd,aAAA,GAAAA,aAAA","ignoreList":[]}

package/lib/module/theme/generate-theme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["DEFAULT_COLORS","DEFAULT_THEME","generateTheme","theme","primaryShade","other","fontFamily","fontFamilyBold","fontFamilySemiBold","fontFamilyInput","primaryColor","secondaryColor","headings","colors"],"sourceRoot":"../../../src","sources":["theme/generate-theme.ts"],"mappings":";;AAAA,SAASA,cAAc,EAAEC,aAAa,QAAQ,oBAAiB;AAE/D,OAAO,MAAMC,aAAa,GAAIC,KAAuB,IAAa;EAChE,MAAM;IAAEC,YAAY,GAAG,CAAC;IAAEC,KAAK,GAAG,CAAC;EAAE,CAAC,GAAGF,KAAK,IAAI,CAAC,CAAC;EACpD,OAAO;IACL,GAAGF,aAAa;IAChBG,YAAY,EAAEA,YAAY;IAC1BC,KAAK,EAAEA,KAAK;IACZC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,aAAa;IAC7BC,kBAAkB,EAAE,iBAAiB;IACrCC,eAAe,EAAE,QAAQ;IACzBC,YAAY,EAAE,MAAM;IACpBC,cAAc,EAAE,MAAM;IACtBC,QAAQ,EAAE;MACRN,UAAU,EAAE;IACd,CAAC;IACDO,MAAM,EAAEb;EACV,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/typescript/commonjs/src/theme/generate-theme.d.ts

@@ -1,3 +0,0 @@
-import type { TTheme } from './default-theme';
-export declare const generateTheme: (theme?: Partial<TTheme>) => TTheme;
-//# sourceMappingURL=generate-theme.d.ts.map

package/lib/typescript/commonjs/src/theme/generate-theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-theme.d.ts","sourceRoot":"","sources":["../../../../../src/theme/generate-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,eAAO,MAAM,aAAa,WAAY,OAAO,CAAC,MAAM,CAAC,KAAG,MAiBvD,CAAC"}

package/lib/typescript/module/src/theme/generate-theme.d.ts

@@ -1,3 +0,0 @@
-import type { TTheme } from './default-theme';
-export declare const generateTheme: (theme?: Partial<TTheme>) => TTheme;
-//# sourceMappingURL=generate-theme.d.ts.map

package/lib/typescript/module/src/theme/generate-theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-theme.d.ts","sourceRoot":"","sources":["../../../../../src/theme/generate-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,eAAO,MAAM,aAAa,WAAY,OAAO,CAAC,MAAM,CAAC,KAAG,MAiBvD,CAAC"}