react-native-shared-components 0.2.0 → 0.3.2

package/src/components/BaseContainer/index.tsx

@@ -0,0 +1,108 @@
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  type ColorValue,
+  type TextStyle,
+  type ViewStyle,
+  type KeyboardAvoidingViewProps,
+} from 'react-native';
+import { type ReactNode } from 'react';
+import { styles } from './styles';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import BaseText, { type BaseTextType } from '../BaseText';
+
+interface IBaseContainer {
+  title?: string;
+  center?: ReactNode;
+  right?: ReactNode;
+  left?: ReactNode;
+  onPressLeft?: () => void;
+  onPressRight?: () => void;
+  onPressCenter?: () => void;
+  styleTitle?: TextStyle;
+  isHeader?: boolean;
+  barStyle?: 'default' | 'light-content' | 'dark-content';
+  children: ReactNode;
+  style?: ViewStyle;
+  styleHeader?: ViewStyle;
+  backgroundColorStatusBar?: ColorValue | undefined;
+  edges?: Array<'top' | 'bottom' | 'left' | 'right'>;
+  keyboardAvoidingViewProps?: Omit<KeyboardAvoidingViewProps, 'children'>;
+  type?: BaseTextType;
+}
+
+export const BaseContainer = ({
+  style,
+  title,
+  left,
+  right,
+  center,
+  onPressLeft,
+  onPressRight,
+  onPressCenter,
+  styleTitle,
+  isHeader,
+  children,
+  backgroundColorStatusBar,
+  barStyle,
+  styleHeader,
+  edges,
+  keyboardAvoidingViewProps,
+  type = 'Medium',
+}: IBaseContainer) => {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={styles.container}
+      {...keyboardAvoidingViewProps}
+    >
+      <View style={styles.container}>
+        <StatusBar
+          backgroundColor={backgroundColorStatusBar}
+          barStyle={barStyle}
+        />
+        <SafeAreaView style={[styles.safeView, style]} edges={edges}>
+          {isHeader && (
+            <View style={[styles.header, styleHeader]}>
+              {left ? (
+                <TouchableOpacity disabled={!onPressLeft} onPress={onPressLeft}>
+                  {left}
+                </TouchableOpacity>
+              ) : (
+                <View />
+              )}
+              {center ? (
+                <TouchableOpacity
+                  disabled={!onPressCenter}
+                  onPress={onPressCenter}
+                >
+                  {center}
+                </TouchableOpacity>
+              ) : title ? (
+                <BaseText type={type} style={styleTitle}>
+                  {title}
+                </BaseText>
+              ) : (
+                <View />
+              )}
+              {right ? (
+                <TouchableOpacity
+                  disabled={!onPressRight}
+                  onPress={onPressRight}
+                >
+                  {right}
+                </TouchableOpacity>
+              ) : (
+                <View />
+              )}
+            </View>
+          )}
+          {children}
+        </SafeAreaView>
+      </View>
+    </KeyboardAvoidingView>
+  );
+};

package/src/components/BaseContainer/styles.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  safeView: {
+    flex: 1,
+  },
+  header: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    width: '100%',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+  },
+});

package/src/components/BaseText/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, StyleSheet, type TextProps } from 'react-native';
+
+export type BaseTextType = 'ExtraBold' | 'Bold' | 'SemiBold' | 'Medium';
+
+interface BaseTextProps extends TextProps {
+  type?: BaseTextType;
+  size?: number;
+  children: React.ReactNode;
+}
+
+const BaseText: React.FC<BaseTextProps> = ({
+  type = 'Medium',
+  size,
+  style,
+  children,
+  ...props
+}) => {
+  return (
+    <Text
+      allowFontScaling={false}
+      style={[styles[type], { fontSize: size }, style]}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  ExtraBold: {
+    fontWeight: '700',
+  },
+  Bold: {
+    fontWeight: '600',
+  },
+  SemiBold: {
+    fontWeight: '500',
+  },
+  Medium: {
+    fontWeight: '400',
+  },
+});
+
+export default BaseText;

package/src/components/index.tsx

@@ -1 +1,3 @@
-export * from './Button';
+export * from './BaseButton';
+export * from './BaseContainer';
+export * from './BaseText';

package/src/constants/Colors.ts

@@ -0,0 +1,148 @@
+export const Colors = {
+  bg_default_primary_light: '#FFFFFF',
+  bg_default_primary_dark: '#27272A',
+  bg_default_secondary_light: '#F9F9FB',
+  bg_default_secondary_dark: '#38383D',
+  bg_default_tertiary_light: '#F5F6FB',
+  bg_default_tertiary_dark: '#515158',
+  bg_neutral_tertiary_light: '#EBEBF0',
+  bg_inverse_primary_light: '#000000',
+  bg_disabled_primary_light: '#DDDDE3',
+  bg_brand_primary: '#00B894',
+  bg_brand_secondary: '#00B894',
+  bg_brand_tertiary: '#EAFFF8',
+  bg_brand_over_light: '#00A484',
+  bg_brand_over_dark: '#006758',
+  bg_green_primary: '#1FC86E',
+  bg_green_secondary: '#84F1B6',
+  bg_green_tertiary: '#F0FDF5',
+  bg_green_over_light: '#14AE5C',
+  bg_green_over_dark: '#F0FDF5',
+  bg_yellow_primary: '#FBD204',
+  bg_yellow_secondary: '#FFF044',
+  bg_yellow_tertiary: '#FEFEE8',
+  bg_yellow_over_light: '#CE9B00',
+  bg_yellow_over_dark: '#FEFEE8',
+  bg_red_primary: '#FF424E',
+  bg_red_secondary: '#FF99A0',
+  bg_red_tertiary: '#FFF0F1',
+  bg_red_over_light: '#D93843',
+  bg_red_over_dark: '#FFF0F1',
+  //Border
+  border_default_primary_light: '#F9F9FB',
+  border_default_primary_dark: '#38383D',
+  border_default_secondary_light: '#EBEBF0',
+  border_default_secondary_dark: '#515158',
+  border_default_tertiary_light: '#DDDDE3',
+  border_default_tertiary_dark: '#64646D',
+  border_neutral_primary_light: '#64646D',
+  border_neutral_primary_dark: '#DDDDE3',
+  border_neutral_secondary: '#A6A6B0',
+  border_neutral_tertiary_light: '#C4C4CF',
+  border_neutral_tertiary_dark: '#808089',
+  border_disabled_primary_light: '#DDDDE3',
+  border_disabled_primary_dark: '#64646D',
+  border_disabled_secondary_light: '#EBEBF0',
+  border_disabled_secondary_dark: '#515158',
+  border_disabled_tertiary_light: '#F9F9FB',
+  border_disabled_tertiary_dark: '#38383D',
+  border_brand_primary: '#00B894',
+  border_brand_secondary: '#63F2CC',
+  border_brand_tertiary: '#EAFFF8',
+  border_green_primary: '#1FC86E',
+  border_green_secondary: '#84F1B6',
+  border_green_tertiary: '#F0FDF5',
+  border_yellow_primary: '#FBD204',
+  border_yellow_secondary: '#FFF044',
+  border_yellow_tertiary: '#FEFEE8',
+  border_red_primary: '#FF424E',
+  border_red_secondary: '#FF99A0',
+  border_red_tertiary: '#FFF0F1',
+  //Icon
+  icon_default_primary_light: '#38383D',
+  icon_default_primary_dark: '#F9F9FB',
+  icon_default_secondary_light: '#64646D',
+  icon_default_secondary_dark: '#EBEBF0',
+  icon_default_tertiary_light: '#808089',
+  icon_default_tertiary_dark: '#DDDDE3',
+  icon_neutral_primary_light: '#808089',
+  icon_neutral_primary_dark: '#F9F9FB',
+  icon_neutral_secondary_light: '#A6A6B0',
+  icon_neutral_secondary_dark: '#DDDDE3',
+  icon_neutral_tertiary: '#C4C4CF',
+  icon_inverse_primary_light: '#FFFFFF',
+  icon_inverse_primary_dark: '#27272A',
+  icon_inverse_secondary_light: '#DDDDE3',
+  icon_inverse_secondary_dark: '#64646D',
+  icon_inverse_tertiary: '#A6A6B0',
+  icon_disabled_primary_light: '#FFFFFF',
+  icon_disabled_primary_dark: '#27272A',
+  icon_disabled_secondary_light: '#EBEBF0',
+  icon_disabled_secondary_dark: '#515158',
+  icon_disabled_tertiary_light: '#C4C4CF',
+  icon_disabled_tertiary_dark: '#808089',
+  icon_brand_primary: '#00B894',
+  icon_brand_secondary: '#63F2CC',
+  icon_brand_tertiary: '#EAFFF8',
+  icon_brand_over: '#006758',
+  icon_green_primary: '#1FC86E',
+  icon_green_secondary: '#84F1B6',
+  icon_green_tertiary: '#F0FDF5',
+  icon_yellow_primary: '#FBD204',
+  icon_yellow_secondary: '#FFF044',
+  icon_yellow_tertiary: '#FEFEE8',
+  icon_red_primary: '#FF424E',
+  icon_red_secondary: '#FF99A0',
+  icon_red_tertiary: '#FFF0F1',
+  //Text
+  text_default_primary_light: '#38383D',
+  text_default_primary_dark: '#F9F9FB',
+  text_default_secondary_light: '#64646D',
+  text_default_secondary_dark: '#EBEBF0',
+  text_default_tertiary_light: '#808089',
+  text_default_tertiary_dark: '#DDDDE3',
+  text_neutral_primary_light: '#808089',
+  text_neutral_primary_dark: '#F9F9FB',
+  text_neutral_secondary_light: '#A6A6B0',
+  text_neutral_secondary_dark: '#DDDDE3',
+  text_neutral_tertiary: '#C4C4CF',
+  text_inverse_primary_light: '#FFFFFF',
+  text_inverse_primary_dark: '#27272A',
+  text_inverse_secondary_light: '#DDDDE3',
+  text_inverse_secondary_dark: '#64646D',
+  text_inverse_tertiary: '#A6A6B0',
+  text_disabled_primary_light: '#FFFFFF',
+  text_disabled_primary_dark: '#27272A',
+  text_disabled_secondary_light: '#EBEBF0',
+  text_disabled_secondary_dark: '#515158',
+  text_disabled_tertiary_light: '#C4C4CF',
+  text_disabled_tertiary_dark: '#808089',
+  text_brand_primary: '#00B894',
+  text_brand_secondary: '#63F2CC',
+  text_brand_tertiary: '#EAFFF8',
+  text_brand_over: '#006758',
+  text_green_primary: '#1FC86E',
+  text_green_secondary: '#84F1B6',
+  text_green_tertiary: '#F0FDF5',
+  text_yellow_primary: '#FBD204',
+  text_yellow_secondary: '#FFF044',
+  text_yellow_tertiary: '#FEFEE8',
+  text_red_primary: '#FF424E',
+  text_red_secondary: '#FF99A0',
+  text_red_tertiary: '#FFF0F1',
+  //Overlay
+  overlay_4: 'rgba(0,0,0,0.04)',
+  overlay_20_light: 'rgba(0,0,0,0.2)',
+  overlay_20_dark: 'rgba(255,255,255,0.2)',
+  overlay_30_light: 'rgba(0,0,0,0.3)',
+  overlay_30_dark: 'rgba(255,255,255,0.3)',
+  overlay_40_light: 'rgba(0,0,0,0.4)',
+  overlay_40_dark: 'rgba(255,255,255,0.4)',
+  overlay_60_light: 'rgba(0,0,0,0.6)',
+  overlay_60_dark: 'rgba(255,255,255,0.6)',
+  overlay_80_light: 'rgba(0,0,0,0.8)',
+  overlay_80_dark: 'rgba(255,255,255,0.8)',
+  overlay_4_light: 'rgba(255,255,255,0.04)',
+  overlay_8_light: 'rgba(255,255,255,0.08)',
+  overlay_70_light: 'rgba(255,255,255,0.7)',
+};

package/src/constants/commonStyles.ts

@@ -0,0 +1,17 @@
+import { Dimensions } from 'react-native';
+
+export const SCREEN_WIDTH: number = Dimensions.get('window').width;
+export const SCREEN_HEIGHT: number = Dimensions.get('window').height;
+const space_default = 4;
+export const space_squish = ({
+  vertical = space_default,
+  horizontal = space_default,
+}: {
+  vertical?: number;
+  horizontal?: number;
+}) => {
+  return {
+    paddingVertical: vertical,
+    paddingHorizontal: horizontal,
+  };
+};

package/src/constants/index.tsx

@@ -0,0 +1,2 @@
+export * from './Colors';
+export * from './commonStyles';

package/src/index.tsx

@@ -1,3 +1,3 @@
-export function multiply(a: number, b: number): number {
-  return a * b;
-}
+export * from './components';
+export * from './constants';
+export * from './utils';

package/src/utils/helper.ts

@@ -0,0 +1,4 @@
+export const filterLayoutProps = (props: any) => {
+  const { ...otherProps } = props;
+  return { otherProps };
+};

package/src/utils/index.tsx

@@ -0,0 +1 @@
+export * from './helper';

package/lib/module/components/Button/index.js

@@ -1,24 +0,0 @@
-"use strict";
-
-import { Text, TouchableOpacity } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Button = ({
-  onPress,
-  title,
-  textBtnStyles
-}) => {
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    onPress: onPress,
-    children: /*#__PURE__*/_jsx(Text, {
-      style: {
-        // color: typography?.['Text_text-primary_(700)'] ?? 'white',
-        // fontSize: typography?.text1_fontSize ?? 15,
-        // fontWeight: typography?.text1_fontWeight ?? '600',
-        // lineHeight: typography?.text1_lineHeight ?? 18,
-        ...textBtnStyles
-      },
-      children: title
-    })
-  });
-};
-//# sourceMappingURL=index.js.map

package/lib/module/components/Button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Text","TouchableOpacity","jsx","_jsx","Button","onPress","title","textBtnStyles","children","style"],"sourceRoot":"../../../../src","sources":["components/Button/index.tsx"],"mappings":";;AAAA,SACEA,IAAI,EACJC,gBAAgB,QAIX,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAStB,OAAO,MAAMC,MAAM,GAAGA,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAAuB,CAAC,KAAK;EACpE,oBACEJ,IAAA,CAACF,gBAAgB;IAACI,OAAO,EAAEA,OAAQ;IAAAG,QAAA,eACjCL,IAAA,CAACH,IAAI;MACHS,KAAK,EAAE;QACL;QACA;QACA;QACA;QACA,GAAGF;MACL,CAAE;MAAAC,QAAA,EAEDF;IAAK,CACF;EAAC,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}

package/lib/typescript/src/components/Button/index.d.ts

@@ -1,11 +0,0 @@
-import { type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
-export interface IButton {
-    title: string;
-    buttonStyles?: ViewStyle;
-    textBtnStyles?: TextStyle;
-    isLoading?: boolean;
-    onPress?: (e: GestureResponderEvent) => void;
-    type?: 'primary' | 'secondary';
-}
-export declare const Button: ({ onPress, title, textBtnStyles }: IButton) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/Button/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAChC;AACD,eAAO,MAAM,MAAM,GAAI,mCAAmC,OAAO,4CAgBhE,CAAC"}

package/src/components/Button/index.tsx

@@ -1,32 +0,0 @@
-import {
-  Text,
-  TouchableOpacity,
-  type GestureResponderEvent,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-export interface IButton {
-  title: string;
-  buttonStyles?: ViewStyle;
-  textBtnStyles?: TextStyle;
-  isLoading?: boolean;
-  onPress?: (e: GestureResponderEvent) => void;
-  type?: 'primary' | 'secondary';
-}
-export const Button = ({ onPress, title, textBtnStyles }: IButton) => {
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <Text
-        style={{
-          // color: typography?.['Text_text-primary_(700)'] ?? 'white',
-          // fontSize: typography?.text1_fontSize ?? 15,
-          // fontWeight: typography?.text1_fontWeight ?? '600',
-          // lineHeight: typography?.text1_lineHeight ?? 18,
-          ...textBtnStyles,
-        }}
-      >
-        {title}
-      </Text>
-    </TouchableOpacity>
-  );
-};