sapo-components-ui-rn 1.0.0

package/dist/types/index.d.ts

@@ -0,0 +1,65 @@
+import { ColorValue, TextStyle, ViewStyle } from 'react-native';
+export interface Theme {
+    dark: boolean;
+    colors: {
+        primary: string;
+        background: string;
+        surface: string;
+        accent: string;
+        error: string;
+        text: string;
+        disabled: string;
+        placeholder: string;
+        backdrop: string;
+        notification: string;
+    };
+    fonts: {
+        regular: TextStyle;
+        medium: TextStyle;
+        light: TextStyle;
+        thin: TextStyle;
+    };
+    animation: {
+        scale: number;
+    };
+}
+export interface ComponentProps {
+    style?: ViewStyle;
+    theme?: Theme;
+}
+export interface TextProps extends ComponentProps {
+    color?: ColorValue;
+    size?: number;
+    weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+}
+export interface ButtonProps extends ComponentProps {
+    onPress?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    mode?: 'text' | 'outlined' | 'contained';
+    color?: string;
+    dark?: boolean;
+    compact?: boolean;
+    contentStyle?: ViewStyle;
+    labelStyle?: TextStyle;
+}
+export interface CardProps extends ComponentProps {
+    onPress?: () => void;
+    elevation?: number;
+}
+export interface TextInputProps extends ComponentProps {
+    value: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    secureTextEntry?: boolean;
+    keyboardType?: 'default' | 'number-pad' | 'decimal-pad' | 'numeric' | 'email-address' | 'phone-pad';
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    autoCorrect?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    multiline?: boolean;
+    numberOfLines?: number;
+    maxLength?: number;
+    label?: string;
+}

package/dist/types.d.ts

@@ -0,0 +1,220 @@
+import type * as React from "react";
+import type { $DeepPartial } from "@callstack/react-theme-provider";
+export type Font = {
+    fontFamily: string;
+    fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+    fontStyle?: "normal" | "italic" | undefined;
+};
+export type Fonts = {
+    regular: Font;
+    medium: Font;
+    light: Font;
+    thin: Font;
+};
+type Mode = "adaptive" | "exact";
+export type ThemeColors = {
+    elevation: MD3ElevationColors;
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    borderBrandDefault: string;
+    borderCriticalDefault: string;
+    borderCriticalHover: string;
+    borderCriticalPressed: string;
+    borderCriticalInverseDefault: string;
+    borderCriticalInverseHover: string;
+    borderCriticalInversePressed: string;
+    borderErrorInverseDefault: string;
+    borderPrimaryFocused: string;
+    borderWarningInverseDefault: string;
+    borderSuccessInverseDefault: string;
+    borderErrorDefault: string;
+    borderInfoDefault: string;
+    borderPrimaryDefault: string;
+    borderPrimaryDisabled: string;
+    borderPrimaryHovered: string;
+    borderPrimaryInverseDefault: string;
+    borderPrimaryPressed: string;
+    borderSuccessDefault: string;
+    borderWarningDefault: string;
+    iconBrandDefault: string;
+    iconCriticalDefault: string;
+    iconErrorDefault: string;
+    iconInfoDefault: string;
+    iconPrimaryDefault: string;
+    iconPrimaryHover: string;
+    iconPrimaryDisabled: string;
+    iconPrimaryInverseDefault: string;
+    iconPrimaryInverseHover: string;
+    iconPrimaryInversePressed: string;
+    iconPrimaryPressed: string;
+    iconSuccessDefault: string;
+    iconWarningDefault: string;
+    surfaceBrandDefault: string;
+    surfaceBrandDisabled: string;
+    surfaceBrandHover: string;
+    surfaceBrandInverseDefault: string;
+    surfaceBrandInverseHover: string;
+    surfaceBrandInversePressed: string;
+    surfaceBrandPressed: string;
+    surfaceCriticalDefault: string;
+    surfaceCriticalDisabled: string;
+    surfaceCriticalHover: string;
+    surfaceCriticalInverseDefault: string;
+    surfaceCriticalInverseHover: string;
+    surfaceCriticalInversePressed: string;
+    surfaceCriticalPressed: string;
+    surfaceErrorDefault: string;
+    surfaceErrorDisabled: string;
+    surfaceErrorHover: string;
+    surfaceErrorInverseDefault: string;
+    surfaceErrorInverseHover: string;
+    surfaceErrorInversePressed: string;
+    surfaceErrorPressed: string;
+    surfaceInfoDefault: string;
+    surfaceInfoDisabled: string;
+    surfaceInfoHover: string;
+    surfaceInfoInverseDefault: string;
+    surfaceInfoInverseHover: string;
+    surfaceInfoInversePressed: string;
+    surfaceInfoPressed: string;
+    surfacePrimaryDefault: string;
+    surfacePrimaryDisabled: string;
+    surfacePrimaryHover: string;
+    surfacePrimaryInverseDefault: string;
+    surfacePrimaryInverseHover: string;
+    surfacePrimaryInversePressed: string;
+    surfacePrimaryPressed: string;
+    surfaceSecondaryDefault: string;
+    surfaceSecondaryDisabled: string;
+    surfaceSecondaryHover: string;
+    surfaceSecondaryPressed: string;
+    surfaceSuccessDefault: string;
+    surfaceSuccessDisabled: string;
+    surfaceSuccessHover: string;
+    surfaceSuccessInverseDefault: string;
+    surfaceSuccessInverseHover: string;
+    surfaceSuccessInversePressed: string;
+    surfaceSuccessPressed: string;
+    surfaceWarningDefault: string;
+    surfaceWarningDisabled: string;
+    surfaceWarningHover: string;
+    surfaceWarningInverseDefault: string;
+    surfaceWarningInverseHover: string;
+    surfaceWarningInversePressed: string;
+    surfaceWarningPressed: string;
+    textDefault: string;
+    textDisabled: string;
+    textPlaceholder: string;
+    textSecondary: string;
+    textBrandDefault: string;
+    textBrandDisabled: string;
+    textBrandHovered: string;
+    textBrandPressed: string;
+    textCriticalDefault: string;
+    textCriticalDisabled: string;
+    textCriticalHovered: string;
+    textCriticalPressed: string;
+    textErrorDefault: string;
+    textErrorDisabled: string;
+    textErrorHovered: string;
+    textErrorPressed: string;
+    textInfoDefault: string;
+    textInfoDisabled: string;
+    textInfoHovered: string;
+    textInfoPressed: string;
+    textLinkDefault: string;
+    textLinkDisabled: string;
+    textLinkHovered: string;
+    textLinkPressed: string;
+    textLinkVisitedDefault: string;
+    textLinkVisitedDisabled: string;
+    textLinkVisitedHovered: string;
+    textLinkVisitedPressed: string;
+    textOnFillDefault: string;
+    textOnFillDisabled: string;
+    textOnFillHovered: string;
+    textOnFillPressed: string;
+    textSuccessDefault: string;
+    textSuccessDisabled: string;
+    textSuccessHovered: string;
+    textSuccessPressed: string;
+    textWarningDefault: string;
+    textWarningDisabled: string;
+    textWarningHovered: string;
+    textWarningPressed: string;
+    selectBackgroundDisabled: string;
+    selectIconDisabled: string;
+};
+export type ThemeProp = $DeepPartial<InternalTheme>;
+export type ThemeBase = {
+    dark: boolean;
+    mode?: Mode;
+    roundness: number;
+    animation: {
+        scale: number;
+        defaultAnimationDuration?: number;
+    };
+};
+export type AppTheme = ThemeBase & {
+    version: 3;
+    colors: ThemeColors;
+    fonts: MD3Typescale;
+};
+export type InternalTheme = AppTheme;
+export declare enum MD3TypescaleKey {
+    displayLarge = "displayLarge",
+    displayMedium = "displayMedium",
+    displaySmall = "displaySmall",
+    headlineLarge = "headlineLarge",
+    headlineMedium = "headlineMedium",
+    headlineSmall = "headlineSmall",
+    titleLarge = "titleLarge",
+    titleMedium = "titleMedium",
+    titleSmall = "titleSmall",
+    labelLarge = "labelLarge",
+    labelMedium = "labelMedium",
+    labelSmall = "labelSmall",
+    bodyLarge = "bodyLarge",
+    bodyMedium = "bodyMedium",
+    bodySmall = "bodySmall"
+}
+export type MD3Type = {
+    fontFamily: string;
+    letterSpacing: number;
+    fontWeight: Font["fontWeight"];
+    lineHeight: number;
+    fontSize: number;
+    fontStyle?: Font["fontStyle"];
+};
+export type MD3Typescale = {
+    [key in MD3TypescaleKey]: MD3Type;
+} & {
+    ["default"]: Omit<MD3Type, "lineHeight" | "fontSize">;
+};
+export type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5;
+export declare enum ElevationLevels {
+    "level0" = 0,
+    "level1" = 1,
+    "level2" = 2,
+    "level3" = 3,
+    "level4" = 4,
+    "level5" = 5
+}
+export type MD3ElevationColors = {
+    [key in keyof typeof ElevationLevels]: string;
+};
+export type $Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+export type $RemoveChildren<T extends React.ComponentType<any>> = $Omit<React.ComponentPropsWithoutRef<T>, "children">;
+export type EllipsizeProp = "head" | "middle" | "tail" | "clip";
+export type NavigationTheme = {
+    dark: boolean;
+    colors: {
+        primary: string;
+        background: string;
+        card: string;
+        text: string;
+        border: string;
+        notification: string;
+    };
+};
+export {};

package/dist/utils/BackHandler/BackHandler.d.ts

@@ -0,0 +1,9 @@
+declare function emptyFunction(): void;
+export declare const BackHandler: {
+    exitApp: typeof emptyFunction;
+    addEventListener(): {
+        remove: () => void;
+    };
+    removeEventListener: typeof emptyFunction;
+};
+export {};

package/dist/utils/BackHandler/BackHandler.native.d.ts

@@ -0,0 +1,2 @@
+import { BackHandler } from 'react-native';
+export { BackHandler };

package/dist/utils/addEventListener.d.ts

@@ -0,0 +1,12 @@
+import type { NativeEventSubscription, EmitterSubscription } from 'react-native';
+export declare function addEventListener<T extends {
+    addEventListener: (...args: any) => NativeEventSubscription | EmitterSubscription;
+} & {
+    removeEventListener?: (...args: any) => void;
+} & {
+    remove?: (...args: any) => void;
+}>(Module: T, ...rest: Parameters<typeof Module.addEventListener>): NativeEventSubscription | EmitterSubscription;
+export declare function addListener<T extends {
+    addListener: (...args: any) => EmitterSubscription;
+    removeEventListener: (...args: any) => void;
+}>(Module: T, ...rest: Parameters<typeof Module.addListener>): EmitterSubscription;

package/dist/utils/forwardRef.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefRenderFunction, PropsWithoutRef, RefAttributes, ForwardRefExoticComponent } from 'react';
+export type ForwardRefComponent<T, P = {}> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+/**
+ * TypeScript generated a large union of props from `ViewProps` in
+ * `d.ts` files when using `React.forwardRef`. To prevent this
+ * `ForwardRefComponent` was created and exported. Use this
+ * `forwardRef` instead of `React.forwardRef` so you don't have to
+ * import `ForwardRefComponent`.
+ * More info: https://github.com/callstack/react-native-paper/pull/3603
+ */
+export declare const forwardRef: <T, P = {}>(render: ForwardRefRenderFunction<T, P>) => ForwardRefComponent<T, P>;

package/dist/utils/function-utils.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare function deepEqualWithDate(a: any, b: any): boolean;
+export declare function deepEqualWithArguments(a: any, b: any): boolean;
+export declare function memoDeepEqual<T>(component: React.ComponentType<T>): React.MemoExoticComponent<React.ComponentType<T>>;
+export declare const memoWithRef: (component: any) => React.NamedExoticComponent<React.RefAttributes<unknown>>;
+export declare const detectEmail: (email: string) => boolean;
+export declare const detectUserName: (name: string) => boolean;
+export declare const detectPhoneNumber: (phoneNum: string) => boolean;
+export declare function withAnimated(WrappedComponent: React.ComponentType<any>): React.ComponentType;
+export declare const phoneValid: (phone: string) => boolean;
+export declare const lightenColor: (color: string, percent: number) => string;
+export declare function getFileExtension(filename: string): string;

package/dist/utils/getContrastingColor.d.ts

@@ -0,0 +1,2 @@
+import type { ColorValue } from 'react-native';
+export default function getContrastingColor(input: ColorValue, light: string, dark: string): string;

package/dist/utils/hasTouchHandler.d.ts

@@ -0,0 +1,5 @@
+import type { GestureResponderEvent } from 'react-native';
+declare const touchableEvents: readonly ["onPress", "onLongPress", "onPressIn", "onPressOut"];
+type TouchableEventObject = Partial<Record<(typeof touchableEvents)[number], (event: GestureResponderEvent) => void>>;
+export default function hasTouchHandler(touchableEventObject: TouchableEventObject): boolean;
+export {};

package/dist/utils/roundLayoutSize.d.ts

@@ -0,0 +1 @@
+export declare const roundLayoutSize: (size: number) => number;

package/dist/utils/splitStyles.d.ts

@@ -0,0 +1,19 @@
+import type { ViewStyle } from 'react-native';
+type FiltersArray = readonly ((style: keyof ViewStyle) => boolean)[];
+type MappedTuple<Tuple extends FiltersArray> = {
+    [Index in keyof Tuple]: ViewStyle;
+} & {
+    length: Tuple['length'];
+};
+/**
+ * Utility function to extract styles in separate objects
+ *
+ * @param styles The style object you want to filter
+ * @param filters The filters by which you want to split the styles
+ * @returns An array of filtered style objects:
+ * - The first style object contains the properties that didn't match any filter
+ * - After that there will be a style object for each filter you passed in the same order as the matching filters
+ * - A style property will exist in a single style object, the first filter it matched
+ */
+export declare function splitStyles<Tuple extends FiltersArray>(styles: ViewStyle, ...filters: Tuple): [ViewStyle, ...MappedTuple<Tuple>];
+export {};

package/dist/utils/toast-manager.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface ToastRef {
+    show: (params: {
+        message?: string;
+        duration?: number;
+        position?: "top" | "bottom";
+        type?: "success" | "info" | "warning" | "error";
+        onPress?: () => void;
+        title?: string;
+    }) => void;
+}
+export declare const toastRef: React.RefObject<ToastRef | null>;
+export declare const showToast: ({ message, duration, position, type, onPress, title, }: {
+    message?: string;
+    duration?: number;
+    position?: "top" | "bottom";
+    type?: "success" | "info" | "warning" | "error";
+    onPress?: () => void;
+    title?: string;
+}) => void;
+export {};

package/dist/utils/useAnimatedValue.d.ts

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export default function useAnimatedValue(initialValue: number): Animated.Value;

package/dist/utils/useAnimatedValueArray.d.ts

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export default function useAnimatedValueArray(initialValues: number[]): Animated.Value[];

package/dist/utils/useIsKeyboardShown.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onShow: () => void;
+    onHide: () => void;
+};
+export default function useIsKeyboardShown({ onShow, onHide }: Props): void;
+export {};

package/dist/utils/useLayout.d.ts

@@ -0,0 +1,6 @@
+import type { LayoutChangeEvent } from 'react-native';
+export default function useLayout(): readonly [{
+    height: number;
+    width: number;
+    measured: boolean;
+}, (e: LayoutChangeEvent) => void];

package/dist/utils/useLazyRef.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export default function useLazyRef<T>(callback: () => T): React.MutableRefObject<T>;

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "sapo-components-ui-rn",
+  "version": "1.0.0",
+  "description": "React Native UI Components Library",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest --passWithNoTests",
+    "lint": "eslint src --ext .ts,.tsx",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "clean": "rimraf dist",
+    "storybook-generate": "sb-rn-get-stories",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "storybook-native": "storybook start -p 7007"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.dktsoft.com:2008/sapo-mobile/mobile-components-rn.git"
+  },
+  "keywords": [
+    "react-native",
+    "ui",
+    "components",
+    "Sapo",
+    "typescript"
+  ],
+  "author": "Sapo",
+  "license": "MIT",
+  "peerDependencies": {
+    "@d11/react-native-fast-image": "*",
+    "@react-native-community/masked-view": ">=0.1.11",
+    "@react-navigation/native": "*",
+    "@react-navigation/stack": "*",
+    "color": "^4.2.3",
+    "deepmerge": "^4.3.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-gesture-handler": ">=2.9.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.5.0",
+    "react-native-screens": ">=3.20.0",
+    "react-native-svg": "^15.11.2",
+    "react-native-vector-icons": "^9.2.0",
+    "use-latest-callback": "^0.2.3",
+    "util": "^0.12.5"
+  },
+  "dependencies": {
+    "@callstack/react-theme-provider": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.0",
+    "@babel/runtime": "^7.12.0",
+    "@callstack/react-theme-provider": "^3.0.0",
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@react-native-async-storage/async-storage": "^2.1.2",
+    "@react-native-community/datetimepicker": "^8.3.0",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@react-native-community/slider": "^4.5.6",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-ondevice-actions": "^8.6.2",
+    "@storybook/addon-ondevice-controls": "^8.6.2",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/cli": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-native": "^8.6.2",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@types/color": "^4.2.0",
+    "@types/jest": "^27.0.0",
+    "@types/lodash": "^4.17.16",
+    "@types/react": "^19.1.2",
+    "@types/react-native": "^0.73.0",
+    "babel-loader": "^10.0.0",
+    "cpy": "^11.1.0",
+    "eslint": "^7.32.0",
+    "jest": "^27.0.0",
+    "lodash": "^4.17.21",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.1.0",
+    "react-native": "^0.78.0",
+    "react-native-storybook-loader": "^2.0.5",
+    "react-native-svg": "^15.11.2",
+    "react-native-svg-transformer": "^1.5.1",
+    "react-native-web": "^0.20.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.60.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.5"
+  }
+}

package/src/assets/svg/icon-checkbox-active.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="6" fill="#0088FF"/>
+<path d="M17.7745 8.32544L10.4245 15.6751L6.74951 12.0004" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svg/icon-checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.75" y="2.75" width="18.5" height="18.5" rx="5.25" fill="white" stroke="#A1A5AB" stroke-width="1.5"/>
+</svg>

package/src/babel/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "no-unused-vars": "off",
+    "import/no-duplicates": "off",
+    "import/no-unresolved": "off",
+  }
+}

package/src/babel/index.js

@@ -0,0 +1,63 @@
+const SKIP = Symbol('SKIP');
+
+module.exports = function rewire(babel, options) {
+  const t = babel.types;
+
+  const { name, index, mappings } = require(options.mappings ||
+    '../../mappings.json');
+
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        if (path.node.source.value !== name || path.node[SKIP]) {
+          return;
+        }
+
+        path.node.source.value = `${name}/${index}`;
+        path.replaceWithMultiple(
+          path.node.specifiers.reduce((declarations, specifier) => {
+            const mapping = mappings[specifier.imported.name];
+
+            if (mapping) {
+              const alias = `${name}/${mapping.path}`;
+              const identifier = t.identifier(specifier.local.name);
+
+              let s;
+
+              switch (mapping.name) {
+                case 'default':
+                  s = t.importDefaultSpecifier(identifier);
+                  break;
+                case '*':
+                  s = t.importNamespaceSpecifier(identifier);
+                  break;
+                default:
+                  s = t.importSpecifier(identifier, t.identifier(mapping.name));
+              }
+
+              declarations.push(
+                t.importDeclaration([s], t.stringLiteral(alias))
+              );
+            } else {
+              const previous = declarations.find(
+                (d) => d.source.value === path.node.source.value
+              );
+
+              if (previous) {
+                previous.specifiers.push(specifier);
+              } else {
+                const node = t.importDeclaration([specifier], path.node.source);
+                node[SKIP] = true;
+                declarations.push(node);
+              }
+            }
+
+            return declarations;
+          }, [])
+        );
+
+        path.requeue();
+      },
+    },
+  };
+};