react-native-mantine 0.1.11

package/src/theme/get-size/index.ts

@@ -0,0 +1,18 @@
+import type { MantineNumberSize } from 'react-native-mantine';
+
+export function getSize<
+  Sizes extends Record<any, any>,
+  Key extends keyof Sizes,
+  Size extends MantineNumberSize
+>({
+  size,
+  sizes,
+}: {
+  size: Size;
+  sizes: Sizes;
+}): Size extends Key ? Sizes[Size] : Size extends number ? number : Size {
+  if (size in sizes) {
+    return sizes[size as any];
+  }
+  return (size as any) || sizes.md;
+}

package/src/theme/index.tsx

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

package/src/theme/theme-provider.tsx

@@ -0,0 +1,131 @@
+import { get } from 'lodash-es';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { ActivityIndicator, Appearance, Platform } from 'react-native';
+
+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 { filterProps } from './filter-props';
+import useCachedResources from '../hooks/useCachedResources';
+
+type ThemeProps = {
+  children: ReactNode;
+  theme?: Partial<TTheme>;
+  forceMode?: 'light' | 'dark';
+};
+
+export const ThemeContext = createContext<any>(null);
+
+export const ThemeProvider = ({
+  children,
+  theme,
+  forceMode,
+}: {
+  children: React.ReactNode;
+  theme: TTheme;
+  forceMode?: 'light' | 'dark';
+}): React.ReactElement => {
+  const { colors, primaryShade, primaryColor, secondaryColor } = theme;
+  const systemDarkMode = Appearance.getColorScheme();
+  const [currentMode, setCurrentMode] = useState<'light' | 'dark'>(
+    forceMode || systemDarkMode || 'light'
+  );
+
+  const toggleMode = (): void => {
+    setCurrentMode(currentMode === 'light' ? 'dark' : 'light');
+  };
+
+  const forceModeDevice = (mode: ColorSchemeName) => {
+    try {
+      Appearance.setColorScheme(mode);
+    } catch (e) {
+      console.log('failed set scheme');
+    }
+  };
+
+  useEffect(() => {
+    forceModeDevice(currentMode);
+  }, [currentMode]);
+
+  const memoValue = useMemo(() => {
+    const darkTheme = {
+      light: theme.dark,
+      dark: theme.light,
+    };
+
+    return {
+      ...theme,
+      primaryTextColor: get(colors, `${primaryColor}.${primaryShade}`, 'black'),
+      primaryBgColor: get(colors, `${primaryColor}.${primaryShade}`),
+      secondaryBgColor: get(colors, `${secondaryColor}.0`),
+      ...(currentMode === 'dark' ? darkTheme : {}),
+      window: Layout.window,
+      isSmallDevice: Layout.isSmallDevice,
+      screen: Layout.screen,
+      bottomNavBarHeight: Layout.bottomNavBarHeight,
+      isIOS: Platform.OS === 'ios',
+      OSVersion: Platform.Version ? parseInt(Platform.Version as any, 10) : 0,
+      currentMode,
+      toggleMode,
+      setCurrentMode,
+    };
+  }, [currentMode, theme]);
+
+  return (
+    <ThemeContext.Provider value={memoValue}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): TTheme => useContext(ThemeContext);
+
+export const Theme = ({
+  children,
+  theme: themeOverwrite,
+  forceMode,
+}: ThemeProps): React.ReactElement => {
+  const loaded = useCachedResources();
+
+  const theme = useMemo(() => {
+    return generateTheme(themeOverwrite);
+  }, [themeOverwrite]);
+
+  if (!loaded) {
+    return <ActivityIndicator />;
+  }
+  return (
+    <ThemeProvider theme={theme} forceMode={forceMode}>
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export function useComponentDefaultProps<
+  T extends Record<string, any>,
+  U extends Partial<T> = {},
+>(
+  component: string,
+  defaultProps: U,
+  props: T
+): T & {
+  [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>;
+} {
+  const theme = useTheme();
+  const contextPropsPayload = theme.components[component]?.defaultProps;
+  const contextProps =
+    typeof contextPropsPayload === 'function'
+      ? contextPropsPayload(theme)
+      : contextPropsPayload;
+
+  return { ...defaultProps, ...contextProps, ...filterProps(props) };
+}

package/src/theme/theme.d.ts

@@ -0,0 +1,13 @@
+export type Shade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+export type Palette = [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+];

package/src/theme/types/ColorScheme.ts

@@ -0,0 +1 @@
+export type ColorScheme = 'light' | 'dark';

package/src/theme/types/DefaultProps.ts

@@ -0,0 +1,13 @@
+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,
+      params: StylesParams,
+      context: any
+    ) => Partial<Record<StylesNames, CSSObject>>);
+
+export interface DefaultProps  {
+  style?: any;
+}

package/src/theme/types/MantineColor.ts

@@ -0,0 +1,28 @@
+import type { Tuple } from './Tuple';
+
+export type DefaultMantineColor =
+  | 'dark'
+  | 'gray'
+  | 'red'
+  | 'pink'
+  | 'grape'
+  | 'violet'
+  | 'indigo'
+  | 'blue'
+  | 'cyan'
+  | 'green'
+  | 'lime'
+  | 'yellow'
+  | 'orange'
+  | 'teal'
+  | (string & {});
+
+export type MantineThemeColorsOverride = {};
+
+export type MantineThemeColors = MantineThemeColorsOverride extends {
+  colors: Record<infer CustomColors, Tuple<string, 10>>;
+}
+  ? Record<CustomColors, Tuple<string, 10>>
+  : Record<DefaultMantineColor, Tuple<string, 10>>;
+
+export type MantineColor = keyof MantineThemeColors;

package/src/theme/types/MantineSize.ts

@@ -0,0 +1,3 @@
+export type MantineSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {});
+export type MantineNumberSize = MantineSize | number | (string & {});
+export type MantineSizes = Record<MantineSize, string>;

package/src/theme/types/MantineStyleSystem.ts

@@ -0,0 +1,62 @@
+import type { MantineNumberSize, MantineSize } from './MantineSize';
+
+export type SystemProp<Value> =
+  | Value
+  | Partial<Record<MantineSize | (string & {}), 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']>;
+// }

package/src/theme/types/Tuple.ts

@@ -0,0 +1,9 @@
+type _TupleOf<T, N extends number, R extends unknown[]> = R['length'] extends N
+  ? R
+  : _TupleOf<T, N, [T, ...R]>;
+
+export type Tuple<T, N extends number> = N extends N
+  ? number extends N
+    ? T[]
+    : _TupleOf<T, N, []>
+  : never;

package/src/theme/types/Variants.ts

@@ -0,0 +1 @@
+export type Variants<T> = T | (string & {});

package/src/theme/types/index.ts

@@ -0,0 +1,12 @@
+export type { ColorScheme } from './ColorScheme';
+export type { DefaultProps, ClassNames, Styles } from './DefaultProps';
+export type {
+  MantineColor,
+  MantineThemeColors,
+  DefaultMantineColor,
+  MantineThemeColorsOverride,
+} from './MantineColor';
+export type { MantineStyleSystemProps, SystemProp, SpacingValue } from './MantineStyleSystem';
+export type { MantineNumberSize, MantineSize, MantineSizes } from './MantineSize';
+export type { Tuple } from './Tuple';
+export type { Variants } from './Variants';