@procivis/one-react-native-components 0.1.63

package/lib/typescript/text/typography.d.ts

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { BaseTextProps } from './base';
+declare const presets: {
+    readonly xl: {
+        readonly fontSize: 26;
+        readonly lineHeight: 36;
+        readonly letterSpacing: 0.2;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly l: {
+        readonly fontSize: 24;
+        readonly lineHeight: 33;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly 'l/line-height-large': {
+        readonly fontSize: 24;
+        readonly lineHeight: 28;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly regular: {
+        readonly fontSize: 17;
+        readonly lineHeight: 24;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly m: {
+        readonly fontSize: 17;
+        readonly lineHeight: 22;
+        readonly letterSpacing: -0.2;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly 'm/heading': {
+        readonly fontSize: 17;
+        readonly lineHeight: 22;
+        readonly letterSpacing: -0.2;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly s: {
+        readonly fontSize: 14;
+        readonly lineHeight: 22;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly 's/line-height-capped': {
+        readonly fontSize: 14;
+        readonly lineHeight: 22;
+        readonly letterSpacing: -0.2;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly 's/line-height-small': {
+        readonly fontSize: 14;
+        readonly lineHeight: 18;
+        readonly letterSpacing: 0.3;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly 's/code': {
+        readonly fontSize: 14;
+        readonly lineHeight: 22;
+        readonly letterSpacing: 0.2;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly xs: {
+        readonly fontSize: 12;
+        readonly lineHeight: 22;
+        readonly letterSpacing: -0.1;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly 'xs/line-height-small': {
+        readonly fontSize: 12;
+        readonly lineHeight: 18;
+        readonly letterSpacing: 0.3;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+    readonly 'xs/code': {
+        readonly fontSize: 12;
+        readonly lineHeight: 18;
+        readonly letterSpacing: 0.3;
+        readonly fontFamily?: string | undefined;
+        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+    };
+};
+export type TypographyProps = BaseTextProps & {
+    preset?: keyof typeof presets;
+    caps?: boolean;
+};
+/**
+ * General text component
+ * @see https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1045-30326
+ */
+declare const Typography: React.ForwardRefExoticComponent<import("react-native").TextProps & {
+    align?: "center" | "left" | "right" | undefined;
+    color: import("react-native").ColorValue;
+    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
+    announcementActive?: boolean | undefined;
+    announcementCumulative?: boolean | undefined;
+    onAnnouncementFinished?: ((finished: boolean) => void) | undefined;
+} & {
+    preset?: "s" | "regular" | "xl" | "l" | "l/line-height-large" | "m" | "m/heading" | "s/line-height-capped" | "s/line-height-small" | "s/code" | "xs" | "xs/line-height-small" | "xs/code" | undefined;
+    caps?: boolean | undefined;
+} & React.RefAttributes<Text>>;
+export default Typography;

package/lib/typescript/theme/color-scheme-context.d.ts

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren } from 'react';
+import type { ColorScheme } from './color-scheme';
+export declare function ColorSchemeProvider<Scheme extends ColorScheme = ColorScheme>(props: PropsWithChildren<{
+    colorScheme: Scheme;
+}>): React.JSX.Element;
+/**
+ * A hook to gain access to the current `ColorScheme`
+ * @note A custom superset of `ColorScheme` can be used (must also be passed to the `ColorSchemeProvider`)
+ */
+export declare function useAppColorScheme<Scheme extends ColorScheme = ColorScheme>(): Readonly<Scheme>;

package/lib/typescript/theme/color-scheme.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Color flavour of the application
+ * colors according to figma design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=0-1
+ */
+export interface ColorScheme {
+    accent: string;
+    accentText: string;
+    background: string;
+    backgroundScroll: string;
+    black: string;
+    codeAccent: string;
+    credentialHeaderBackground: string;
+    error: string;
+    grayDark: string;
+    linkText: string;
+    success: string;
+    successText: string;
+    text: string;
+    warning: string;
+    white: string;
+    darkMode: boolean;
+    nerdView: {
+        background: string;
+        attributeLabel: string;
+        attributeSectionBackground: string;
+        attributeValueBackground: string;
+        attributeValueBorder: string;
+        button: string;
+        codeHighlightText: string;
+    };
+}

package/lib/typescript/theme/index.d.ts

@@ -0,0 +1,3 @@
+export type { ColorScheme } from './color-scheme';
+import { ColorSchemeProvider, useAppColorScheme } from './color-scheme-context';
+export { ColorSchemeProvider, useAppColorScheme };

package/lib/typescript/utils/color.d.ts

@@ -0,0 +1,4 @@
+import type { ColorValue } from 'react-native';
+export declare const colorArray: (color: ColorValue) => number[];
+export declare const colorWithAlphaComponent: (color: ColorValue, alpha: number) => ColorValue;
+export declare const getBrightness: (color: ColorValue) => number;

package/lib/typescript/utils/contrasting-status-bar.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ColorValue, StatusBarProps } from 'react-native';
+interface ContrastingStatusBarProps extends Omit<StatusBarProps, 'barStyle'> {
+    backgroundColor: ColorValue;
+}
+/**
+ * Defines transparent status bar with content contrasting to the background
+ */
+declare const ContrastingStatusBar: FC<ContrastingStatusBarProps>;
+export default ContrastingStatusBar;

package/lib/typescript/utils/date.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Date only format
+ */
+export declare const formatDate: (date: Date, locale?: string, options?: Intl.DateTimeFormatOptions) => string | undefined;
+/**
+ * Time only format
+ */
+export declare const formatTime: (date: Date, locale?: string) => string | undefined;
+/**
+ * Date and time format
+ */
+export declare const formatDateTime: (date: Date, locale?: string) => string | undefined;

package/lib/typescript/utils/hooks/header/on-scroll-header-state.d.ts

@@ -0,0 +1,5 @@
+import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+export declare const useOnScrollHeaderState: (offset?: number) => {
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    titleVisible: boolean;
+};

package/lib/typescript/utils/hooks/index.d.ts

@@ -0,0 +1,4 @@
+import { useOnScrollHeaderState } from './header/on-scroll-header-state';
+import { useListContentInset } from './list/list-content-inset';
+export { useOnScrollHeaderState };
+export { useListContentInset };

package/lib/typescript/utils/hooks/list/list-content-inset.d.ts

@@ -0,0 +1,8 @@
+import { ViewStyle } from 'react-native';
+type ListContentInsetProps = {
+    additionalBottomPadding?: number;
+    headerHeight?: number;
+    modalPresentation?: boolean;
+};
+export declare const useListContentInset: ({ additionalBottomPadding, headerHeight, modalPresentation }?: ListContentInsetProps) => ViewStyle;
+export {};

package/lib/typescript/utils/index.d.ts

@@ -0,0 +1,8 @@
+import ContrastingStatusBar from './contrasting-status-bar';
+import { formatDate, formatDateTime, formatTime } from './date';
+import { useBlockOSBackNavigation } from './navigation';
+import { useForwardedRef } from './ref';
+import { concatTestID } from './testID';
+import { useMemoAsync } from './useMemoAsync';
+export { concatTestID, ContrastingStatusBar, formatDate, formatDateTime, formatTime, useBlockOSBackNavigation, useForwardedRef, useMemoAsync, };
+export * from './hooks';

package/lib/typescript/utils/navigation.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Prevent OS back navigation
+ * * iOS: block back swipe gesture
+ * * Android: block back button from system task bar
+ * @param block Whether to prevent the default behavior (default: true)
+ * @param onAndroidBack (Android only) Custom callback triggered when OS back button is pressed while blocked
+ *   * return `false` to allow back navigation, return `true` to block back navigation
+ */
+export declare const useBlockOSBackNavigation: (block?: boolean, onAndroidBack?: () => boolean) => void;

package/lib/typescript/utils/ref.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * Transforms a forwarded ref to a locally usable reference object
+ * @example
+ * const Component = forwardRef<RefComponent, Props>((props, ref) => {
+ *    const [forwardedRef, refObject] = useForwardedRef(ref);
+ *    const onAction = useCallback(() => doSomething(refObject.current), [refObject]);
+ *    return <RefComponent ref={forwardedRef} {...props} />;
+ * }
+ */
+export declare const useForwardedRef: <Component extends React.ComponentClass<any, any> | React.Component<any, {}, any>>(passedRef?: React.Ref<Component> | undefined) => [React.Ref<Component>, React.RefObject<Component>];

package/lib/typescript/utils/testID.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Create `testID` prop by concatenating parts
+ * @returns {string} concatenated identifier or undefined if one part is missing
+ */
+export declare function concatTestID(part1: string, ...args: Array<string>): string;
+export declare function concatTestID(part1: string | undefined, ...args: Array<string | undefined>): string | undefined;

package/lib/typescript/utils/testID.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/utils/useMemoAsync.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react-native" />
+import { DependencyList } from 'react';
+interface FactoryFn<Value> {
+    /**
+     * Custom factory function
+     * @param abortSignal Signaled when the deps change and the factory function need to be called again or when the parent component unmounts
+     * @returns Result to be returned from the {@link useMemoAsync}
+     */
+    (abortSignal: AbortSignal): Value | Promise<Value>;
+}
+/**
+ * Utility hook that can be used the same way as `useMemo` when the initializer needs to be async
+ * @param factory Factory function to produce a value
+ * @param deps Hook dependency list (to trigger an update)
+ * @param initialValue Initial value before factory finishes producing a value (default = `undefined`)
+ * @param fallbackValue Used when factory fails to produce a value (default = `initialValue`)
+ * @returns Result from the {@link factory}, {@link initialValue} or {@link fallbackValue}
+ */
+export declare function useMemoAsync<Value, FallbackValue = Value | undefined>(factory: FactoryFn<Value>, deps: DependencyList, initialValue: FallbackValue, fallbackValue?: FallbackValue): Value | FallbackValue;
+export declare function useMemoAsync<Value>(factory: FactoryFn<Value>, deps: DependencyList): Value | undefined;
+export {};

package/package.json

@@ -0,0 +1,240 @@
+{
+  "name": "@procivis/one-react-native-components",
+  "version": "0.1.63",
+  "author": "Procivis AG (https://procivis.ch)",
+  "license": "Apache-2.0",
+  "description": "Common Procivis ONE UI components for react-native",
+  "homepage": "https://procivis.ch",
+  "repository": "https://github.com/procivis/one-react-native-components",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint:eslint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:eslint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "lint:ts": "tsc --noEmit",
+    "lint": "yarn lint:eslint",
+    "lint:fix": "yarn lint:eslint:fix",
+    "prepare": "npx patch-package && bob build",
+    "release": "release-it",
+    "bootstrap": "yarn",
+    "android": "react-native run-android --appId=ch.procivis.storybook",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "update-stories": "sb-rn-get-stories --config-path .ondevice",
+    "prestart": "yarn update-stories",
+    "storybook-watcher": "sb-rn-watcher --config-path .ondevice",
+    "storybook": "start-storybook -p 6006 -s ./.storybook/assets",
+    "build-storybook": "build-storybook -s ./.storybook/assets",
+    "pods": "npx pod-install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@procivis/react-native-picker": "5.0.3",
+    "@react-native-async-storage/async-storage": "^1.17.3",
+    "@react-native-community/blur": "^4.4.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/slider": "^4.5.2",
+    "@react-native/babel-preset": "0.73.21",
+    "@react-native/eslint-config": "0.73.2",
+    "@react-native/metro-config": "0.73.5",
+    "@react-native/normalize-color": "^2.0.0",
+    "@react-native/typescript-config": "0.73.1",
+    "@react-navigation/native": "^6.0.6",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@storybook/addon-actions": "6.5",
+    "@storybook/addon-controls": "6.5",
+    "@storybook/addon-essentials": "6.5",
+    "@storybook/addon-links": "6.5",
+    "@storybook/addon-ondevice-actions": "^6.0.1-beta.12",
+    "@storybook/addon-ondevice-backgrounds": "^6.0.1-beta.12",
+    "@storybook/addon-ondevice-controls": "^6.0.1-beta.12",
+    "@storybook/addon-react-native-web": "^0.0.19",
+    "@storybook/react": "6.5",
+    "@storybook/react-native": "^6.0.1-beta.12",
+    "@types/jest": "^29.2.1",
+    "@types/qrcode-svg": "^1",
+    "@types/react": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "babel-jest": "^29.6.3",
+    "babel-loader": "^8.2.4",
+    "babel-plugin-react-native-web": "^0.18.9",
+    "commitlint": "^11.0.0",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-ft-flow": "^3.0.7",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "husky": "^6.0.0",
+    "jest": "^29.6.3",
+    "metro-react-native-babel-preset": "0.73.10",
+    "patch-package": "^6.4.7",
+    "prettier": "2.8.8",
+    "pure-svg-code": "1.0.6",
+    "qrcode-svg": "1.1.0",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.73.9",
+    "react-native-builder-bob": "^0.18.0",
+    "react-native-gesture-handler": "2.14.0",
+    "react-native-reanimated": "^3.15.0",
+    "react-native-reanimated-carousel": "^3.5.1",
+    "react-native-safe-area-context": "^3.3.2",
+    "react-native-screens": "^3.21.0",
+    "react-native-svg": "^15.1.0",
+    "react-native-vision-camera": "^4.5.1",
+    "react-native-web": "^0.18.9",
+    "release-it": "^14.2.2",
+    "storybook-addon-designs": "^6.3.1",
+    "typescript": "5.0.4"
+  },
+  "peerDependencies": {
+    "@procivis/react-native-picker": "*",
+    "@react-native-community/blur": "*",
+    "@react-native/normalize-color": "*",
+    "@react-navigation/native": "*",
+    "pure-svg-code": "*",
+    "qrcode-svg": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated-carousel": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "react-native-vision-camera": "^4"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/storybook/",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint",
+      "import",
+      "simple-import-sort",
+      "jest"
+    ],
+    "rules": {
+      "no-restricted-imports": [
+        "error",
+        {
+          "paths": [
+            {
+              "name": "react-native",
+              "importNames": [
+                "SafeAreaView"
+              ],
+              "message": "Please use SafeAreaView from 'react-native-safe-area-context' instead."
+            },
+            {
+              "name": "react-native",
+              "importNames": [
+                "TouchableOpacity",
+                "TouchableHighlight",
+                "TouchableWithoutFeedback",
+                "Pressable"
+              ],
+              "message": "Please import touchables from './src/accessibility/accessibilityHistoryWrappers' instead."
+            }
+          ],
+          "patterns": [
+            {
+              "group": [
+                "/src",
+                "src/*",
+                "storybook/*"
+              ],
+              "message": "Use relative import paths"
+            }
+          ]
+        }
+      ],
+      "no-shadow": "off",
+      "no-undef": "off",
+      "react-native/sort-styles": "warn",
+      "react-native/no-unused-styles": "warn",
+      "react/display-name": "warn",
+      "simple-import-sort/imports": "warn",
+      "simple-import-sort/exports": "warn",
+      "import/newline-after-import": "warn",
+      "import/no-duplicates": "warn",
+      "import/no-absolute-path": "warn"
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "storybook-static/",
+    "lib/"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "resolutions": {
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
+  },
+  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+}