npm - @janiscommerce/ui-native - Versions diffs - 1.14.0 → 1.14.2 - Mend

@janiscommerce/ui-native 1.14.0 → 1.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/components/atoms/Typography/index.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ interface TypographyProps extends TextProps {
     style?: StyleProp<TextStyle>;
     type?: TypographyType;
     size?: TypographySize;
+    color?: string;
 }
-declare const Typography: ({ children, style, type, size, ...props }: TypographyProps) => React.JSX.Element | null;
+declare const Typography: ({ children, style, type, size, color, ...props }: TypographyProps) => React.JSX.Element | null;
 export default Typography;

package/dist/components/atoms/Typography/index.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Text } from 'react-native';
 import getStyleByTypography from './utils/getStyleByTypography';
-const Typography = ({ children, style, type, size, ...props }) => {
+const Typography = ({ children, style, type, size, color, ...props }) => {
     if (!children) {
         return null;
     }
-    const typographyStyles = getStyleByTypography(type, size);
+    const typographyStyles = getStyleByTypography(type, size, color);
     return (<Text style={[style, typographyStyles.typography]} {...props}>
 			{children}
 		</Text>);

package/dist/components/atoms/Typography/utils/getStyleByTypography/index.d.ts CHANGED Viewed

@@ -1,17 +1,8 @@
 import { TextStyle } from 'react-native';
-import { Typography } from '../../../../../theme/typography';
+import typography, { Typography } from '../../../../../theme/typography';
 type TypographyType = keyof Typography;
 type TypographySize = 'large' | 'medium' | 'small';
-export declare const defaultStyles: {
+declare const getStyleByTypography: (type?: TypographyType | string, size?: TypographySize | string, color?: string) => {
     typography: TextStyle;
 };
-declare const getStyleByTypography: (type: TypographyType | string, size: TypographySize | string) => {
-    typography: TextStyle;
-} | {
-    typography: {
-        fontWeight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
-        fontSize: number;
-        lineHeight: number;
-    };
-};
 export default getStyleByTypography;

package/dist/components/atoms/Typography/utils/getStyleByTypography/index.js CHANGED Viewed

@@ -1,54 +1,19 @@
 import { StyleSheet } from 'react-native';
 import typography from '../../../../../theme/typography';
-const validTypes = Object.keys(typography);
-const validSizes = ['large', 'medium', 'small'];
-export const defaultStyles = StyleSheet.create({
-    typography: {
-        fontWeight: typography.body.medium.weight,
-        fontSize: typography.body.medium.size,
-        lineHeight: typography.body.medium.lineHeight,
-    },
-});
-const getStyleByTypography = (type, size) => {
-    if (!validTypes.includes(type) ||
-        !validSizes.includes(size)) {
-        return defaultStyles;
-    }
-    const typographyType = type;
-    const typographySize = size;
-    if (typographyType === 'display') {
-        return StyleSheet.create({
-            typography: {
-                fontWeight: typography.display.weight,
-                fontSize: typography.display.size,
-                lineHeight: typography.display.lineHeight,
-            },
-        });
-    }
-    if (typographyType === 'overline' && typographySize === 'medium') {
-        return StyleSheet.create({
-            typography: {
-                fontWeight: typography.overline.large.weight,
-                fontSize: typography.overline.large.size,
-                lineHeight: typography.overline.large.lineHeight,
-                letterSpacing: typography.overline.large.spacing,
-            },
-        });
-    }
-    const typographyObject = typography[typographyType];
-    // istanbul ignore next
-    if (typographyObject && typographySize in typographyObject) {
-        const typographyStyle = typographyObject[typographySize];
-        return StyleSheet.create({
-            typography: {
-                fontWeight: typographyStyle.weight,
-                fontSize: typographyStyle.size,
-                lineHeight: typographyStyle.lineHeight,
-                letterSpacing: typographyStyle.spacing,
-            },
-        });
-    }
-    // istanbul ignore next
-    return defaultStyles;
+const getStyleByTypography = (type = 'body', size = 'medium', color) => {
+    const validType = Object.keys(typography).includes(type)
+        ? type
+        : 'body';
+    const typographyCategory = typography[validType];
+    const validSize = Object.keys(typographyCategory).includes(size)
+        ? size
+        : 'medium';
+    const typographyStyle = typographyCategory[validSize];
+    return StyleSheet.create({
+        typography: {
+            ...typographyStyle,
+            ...(color && { color }),
+        },
+    });
 };
 export default getStyleByTypography;

package/dist/components/molecules/Button/utils/getButtonStyles/utils/styleConfigs/index.js CHANGED Viewed

@@ -53,31 +53,31 @@ export const colorConfig = (selectedColor) => {
         disabled: {
             background: {
                 contained: grey[200],
-                outlined: grey[100],
+                outlined: base.white,
                 text: 'transparent',
             },
             border: {
                 main: {
                     contained: 'transparent',
-                    outlined: 'transparent',
+                    outlined: grey[200],
                     text: 'transparent',
                 },
                 secondary: {
                     contained: 'transparent',
-                    outlined: grey[300],
+                    outlined: grey[200],
                     text: 'transparent',
                 },
             },
             text: {
                 main: {
-                    contained: grey[400],
-                    outlined: grey[300],
-                    text: grey[300],
+                    contained: base.white,
+                    outlined: grey[200],
+                    text: grey[200],
                 },
                 secondary: {
-                    contained: grey[400],
-                    outlined: grey[300],
-                    text: grey[300],
+                    contained: base.white,
+                    outlined: grey[200],
+                    text: grey[200],
                 },
             },
         },

package/dist/components/molecules/Input/index.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ interface BaseInputPropsExtended extends BaseInputProps {
     variant?: InputVariant;
     onChangeText?: (text: string) => void;
     totalValue?: number;
+    placeholder?: string;
 }
 type AmountTotalProps = BaseInputPropsExtended & {
     variant: 'amountTotal';

package/dist/components/molecules/Input/index.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import React, { forwardRef, useState, useRef } from 'react';
-import { StyleSheet, View, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import { StyleSheet, View, TouchableWithoutFeedback, Keyboard, Platform, } from 'react-native';
 import BaseInput from '../../atoms/BaseInput';
 import { palette } from '../../../theme/palette';
 import { moderateScale, scaledForDevice } from '../../../scale';
 import handleChangeText from './utils/handleChangeText';
 import Typography from '../../atoms/Typography';
+const isWeb = Platform.OS === 'web';
 var InputType;
 (function (InputType) {
     InputType["currency"] = "numeric";
@@ -17,8 +18,9 @@ var InputType;
     InputType["amountTotal"] = "numeric";
     InputType["numeric"] = "numeric";
 })(InputType || (InputType = {}));
-const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChangeText, ...props }, ref) => {
+const Input = forwardRef(({ style, type, variant = 'default', totalValue, placeholder, onChangeText, ...props }, ref) => {
     const [value, setValue] = useState('');
+    const isPlaceholderBeingShown = !value;
     const isAmountTotalVariant = variant === 'amountTotal';
     const internalRef = useRef(null);
     const inputRef = ref ?? internalRef;
@@ -36,14 +38,26 @@ const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChan
             justifyContent: 'center',
             alignItems: 'center',
             flexDirection: 'row',
+            position: 'relative',
         },
         input: {
             color: palette.black.main,
             fontSize: scaledForDevice(42, moderateScale),
+            height: '100%',
+            textAlign: 'center',
+            textAlignVertical: 'center',
+            includeFontPadding: false,
+            paddingVertical: 0,
+            ...(isPlaceholderBeingShown && { marginLeft: scaledForDevice(-12, moderateScale) }),
+            ...(isWeb && { flex: 1, maxWidth: isPlaceholderBeingShown ? '1%' : undefined }),
         },
         totalValue: {
             color: palette.primary.main,
         },
+        placeholder: {
+            color: '#A8AAAC',
+            marginLeft: scaledForDevice(-12, moderateScale),
+        },
     });
     const changeTextCb = (text) => {
         const transformedText = handleChangeText(text, variant);
@@ -68,10 +82,19 @@ const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChan
         }
         return InputType.default;
     })();
+    const renderPlaceholder = () => {
+        if (value.length > 0) {
+            return null;
+        }
+        return (<Typography type="display" style={styles.placeholder}>
+					{placeholder}
+				</Typography>);
+    };
     return (<TouchableWithoutFeedback onPress={handlePress}>
 				<View style={styles.container}>
-					<BaseInput style={[styles.input, style]} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
-					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display" size="medium">
+					<BaseInput testID="input" style={[styles.input, style].filter(Boolean)} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
+					{renderPlaceholder()}
+					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display">
 							{`/${totalValue?.toString()}`}
 						</Typography>)}
 				</View>

package/dist/theme/typography.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
 export type TypographyItem = {
-    weight: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-    size: number;
+    fontWeight: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontSize: number;
     lineHeight: number;
-    spacing?: number;
+    letterSpacing?: number;
 };
 export type Typography = {
-    display: TypographyItem;
+    display: {
+        medium: TypographyItem;
+    };
     heading: {
         large: TypographyItem;
         medium: TypographyItem;

package/dist/theme/typography.js CHANGED Viewed

@@ -1,29 +1,94 @@
 import { moderateScale, scaledForDevice } from '../scale';
+const scaleSize = (size) => scaledForDevice(size, moderateScale);
 const typography = {
-    display: { weight: '400', size: scaledForDevice(42, moderateScale), lineHeight: 50 },
+    display: {
+        medium: {
+            fontSize: scaleSize(42),
+            fontWeight: '400',
+            lineHeight: 50,
+        },
+    },
     heading: {
-        large: { weight: '500', size: scaledForDevice(34, moderateScale), lineHeight: 40 },
-        medium: { weight: '500', size: scaledForDevice(26, moderateScale), lineHeight: 32 },
-        small: { weight: '400', size: scaledForDevice(24, moderateScale), lineHeight: 28 },
+        large: {
+            fontSize: scaleSize(34),
+            fontWeight: '500',
+            lineHeight: 40,
+        },
+        medium: {
+            fontSize: scaleSize(26),
+            fontWeight: '500',
+            lineHeight: 32,
+        },
+        small: {
+            fontSize: scaleSize(24),
+            fontWeight: '400',
+            lineHeight: 28,
+        },
     },
     title: {
-        large: { weight: '400', size: scaledForDevice(20, moderateScale), lineHeight: 24 },
-        medium: { weight: '700', size: scaledForDevice(18, moderateScale), lineHeight: 22 },
-        small: { weight: '700', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
+        large: {
+            fontSize: scaleSize(20),
+            fontWeight: '400',
+            lineHeight: 24,
+        },
+        medium: {
+            fontSize: scaleSize(18),
+            fontWeight: '700',
+            lineHeight: 22,
+        },
+        small: {
+            fontSize: scaleSize(14),
+            fontWeight: '700',
+            lineHeight: 16,
+        },
     },
     label: {
-        large: { weight: '500', size: scaledForDevice(16, moderateScale), lineHeight: 18 },
-        medium: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
-        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14 },
+        large: {
+            fontSize: scaleSize(16),
+            fontWeight: '500',
+            lineHeight: 18,
+        },
+        medium: {
+            fontSize: scaleSize(14),
+            fontWeight: '500',
+            lineHeight: 16,
+        },
+        small: {
+            fontSize: scaleSize(12),
+            fontWeight: '500',
+            lineHeight: 14,
+        },
     },
     body: {
-        large: { weight: '400', size: scaledForDevice(16, moderateScale), lineHeight: 20 },
-        medium: { weight: '400', size: scaledForDevice(14, moderateScale), lineHeight: 18 },
-        small: { weight: '400', size: scaledForDevice(12, moderateScale), lineHeight: 16 },
+        large: {
+            fontSize: scaleSize(16),
+            fontWeight: '400',
+            lineHeight: 20,
+        },
+        medium: {
+            fontSize: scaleSize(14),
+            fontWeight: '400',
+            lineHeight: 18,
+        },
+        small: {
+            fontSize: scaleSize(12),
+            fontWeight: '400',
+            lineHeight: 16,
+        },
     },
     overline: {
-        large: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16, spacing: 1 },
-        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14, spacing: 0.7 },
+        large: {
+            fontSize: scaleSize(14),
+            fontWeight: '500',
+            lineHeight: 16,
+            letterSpacing: 1,
+        },
+        small: {
+            fontSize: scaleSize(12),
+            fontWeight: '500',
+            lineHeight: 14,
+            letterSpacing: 0.7,
+        },
     },
 };
 export default typography;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.14.0",
+	"version": "1.14.2",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",