@procivis/one-react-native-components 0.1.63

package/src/settings/setting-item.tsx

@@ -0,0 +1,68 @@
+import React, { ComponentType, FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: 60,
+    justifyContent: 'center',
+    width: '100%',
+  },
+  icon: {
+    alignItems: 'center',
+    borderRadius: 18,
+    height: 36,
+    justifyContent: 'center',
+    marginRight: 12,
+    width: 36,
+  },
+  label: {
+    flex: 1,
+    marginBottom: 0,
+    marginTop: 0,
+  },
+  wrapper: {
+    justifyContent: 'center',
+    marginHorizontal: 16,
+    paddingHorizontal: 12,
+  },
+});
+
+export type SettingItemProps = {
+  icon?: ComponentType<any> | ReactElement;
+  style?: StyleProp<ViewStyle>;
+  title: string;
+};
+
+const SettingItem: FunctionComponent<PropsWithChildren<SettingItemProps>> = ({ title, icon, style, children }) => {
+  const colorScheme = useAppColorScheme();
+  const iconView: React.ReactElement | undefined = useMemo(() => {
+    if (!icon) {
+      return undefined;
+    }
+    if (React.isValidElement(icon)) {
+      return icon;
+    } else {
+      const IconComponent = icon as React.ComponentType<any>;
+      return <IconComponent />;
+    }
+  }, [icon]);
+
+  return (
+    <View style={[styles.wrapper, { backgroundColor: colorScheme.white }, style]}>
+      <View style={styles.container}>
+        {iconView && <View style={[styles.icon, { backgroundColor: colorScheme.background }]}>{iconView}</View>}
+        <Typography accessible={false} color={colorScheme.text} preset="s" style={styles.label}>
+          {title}
+        </Typography>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+export default SettingItem;

package/src/settings/settings-button.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import ButtonSetting, { ButtonSettingProps } from './button-setting';
+
+export type SettingsButtonProps = ButtonSettingProps;
+
+const SettingsButton: FC<SettingsButtonProps> = ({ style, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return <ButtonSetting style={[styles.button, { backgroundColor: colorScheme.background }, style]} {...props} />;
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 12,
+    height: 68,
+    marginHorizontal: 0,
+    paddingHorizontal: 12,
+  },
+});
+
+export default SettingsButton;

package/src/settings/switch-setting.tsx

@@ -0,0 +1,33 @@
+import React, { ComponentType, FunctionComponent, ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { Switch } from '../control/switch';
+import SettingItem from './setting-item';
+
+export type SwitchSettingProps = {
+  disabled?: boolean;
+  icon?: ComponentType<any> | ReactElement;
+  onChange: (newValue: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  title: string;
+  value: boolean;
+};
+
+const SwitchSetting: FunctionComponent<SwitchSettingProps> = ({
+  title,
+  value,
+  onChange,
+  icon,
+  style,
+  disabled = false,
+  testID,
+}) => {
+  return (
+    <SettingItem icon={icon} style={style} title={title}>
+      <Switch accessibilityLabel={title} disabled={disabled} onChange={onChange} testID={testID} value={value} />
+    </SettingItem>
+  );
+};
+
+export default SwitchSetting;

package/src/state/error-screen.stories.tsx

@@ -0,0 +1,22 @@
+import type { ComponentMeta, Story } from '@storybook/react';
+import React from 'react';
+
+import ErrorScreen, { ErrorScreenProps } from './error-screen';
+
+const Basic: Story<ErrorScreenProps> = (props) => <ErrorScreen {...props} />;
+
+Basic.args = {
+  title: 'Error',
+  subtitle: 'The app has reached an error state.',
+  button: { label: 'Primary', onPress: () => null },
+};
+
+export { Basic as ErrorScreen };
+
+export default {
+  title: 'view/loading/Error Screen',
+  component: ErrorScreen,
+  parameters: {
+    noSafeArea: true,
+  },
+} as ComponentMeta<typeof ErrorScreen>;

package/src/state/error-screen.tsx

@@ -0,0 +1,71 @@
+import React, { FunctionComponent } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { ScrollViewScreen } from '..';
+import { Button } from '../buttons';
+import { CredentialWarningIcon } from '../icons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export interface ErrorScreenButton {
+  testID?: string;
+  label: string;
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+export interface ErrorScreenProps {
+  testID?: string;
+  title: string;
+  subtitle: string;
+  button: ErrorScreenButton;
+}
+
+const ErrorScreen: FunctionComponent<ErrorScreenProps> = ({ testID, title, subtitle, button }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <ScrollViewScreen
+      header={{
+        static: true,
+        title: title,
+      }}
+      modalPresentation
+      scrollView={{
+        testID,
+      }}>
+      <View style={[styles.wrapper, { backgroundColor: colorScheme.background }]}>
+        <View style={styles.warning}>
+          <CredentialWarningIcon height={42} width={42} />
+          <Typography color={colorScheme.text} preset="regular" style={styles.message}>
+            {subtitle}
+          </Typography>
+        </View>
+
+        {button ? (
+          <Button disabled={button.disabled} onPress={button.onPress} testID={button.testID} title={button.label} />
+        ) : undefined}
+      </View>
+    </ScrollViewScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  message: {
+    textAlign: 'center',
+  },
+  warning: {
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    paddingHorizontal: 16,
+  },
+});
+
+export default ErrorScreen;

package/src/state/index.ts

@@ -0,0 +1,3 @@
+import ErrorScreen, { ErrorScreenButton, ErrorScreenProps } from './error-screen';
+
+export { ErrorScreen, ErrorScreenButton, ErrorScreenProps };

package/src/text/base.tsx

@@ -0,0 +1,53 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+import { ColorValue, StyleProp, Text, TextProps, TextStyle } from 'react-native';
+
+import { useAccessibilityAnnouncementCumulative } from '../accessibility/accessibility';
+
+export type BaseTextProps = TextProps & {
+  align?: 'center' | 'left' | 'right';
+  color: ColorValue;
+  style?: StyleProp<TextStyle>;
+
+  /* accessibility automatic voice-over */
+  announcementActive?: boolean;
+  announcementCumulative?: boolean;
+  /* only supported (fired) on iOS */
+  onAnnouncementFinished?: (finished: boolean) => void;
+};
+
+export const BaseText = React.forwardRef<Text, PropsWithChildren<BaseTextProps>>(
+  (
+    {
+      align = 'left',
+      color,
+      style,
+      children,
+      announcementActive,
+      announcementCumulative,
+      onAnnouncementFinished,
+      ...props
+    },
+    ref,
+  ) => {
+    const announcementFinished = useAccessibilityAnnouncementCumulative(
+      announcementActive && typeof children === 'string' ? (children as string) : undefined,
+      announcementCumulative,
+    );
+    useEffect(() => {
+      onAnnouncementFinished?.(announcementFinished);
+    }, [announcementFinished, onAnnouncementFinished]);
+
+    const baseStyle: TextStyle = {
+      textAlign: align,
+      color,
+    };
+
+    return (
+      <Text ref={ref} style={[baseStyle, style]} maxFontSizeMultiplier={2} {...props}>
+        {children}
+      </Text>
+    );
+  },
+);
+
+BaseText.displayName = 'BaseText';

package/src/text/font.ts

@@ -0,0 +1,52 @@
+import { Platform, TextStyle } from 'react-native';
+
+export interface FontStyle {
+  fontFamily?: string;
+  fontWeight?: TextStyle['fontWeight'];
+}
+
+enum FontFace {
+  OpenSans = 'Open Sans',
+  IBMPlexMono = 'IBM Plex Mono',
+  ProcivisBook = 'Procivis-Book',
+}
+
+enum FontWeight {
+  Medium = '500',
+  Regular = '400',
+}
+
+export interface FontFactoryProps {
+  face: FontFace;
+  weight?: FontWeight;
+}
+
+// generate styles for a font with given weight and style
+export const fontFactory = ({ face, weight }: FontFactoryProps): FontStyle => {
+  if (Platform.OS === 'android') {
+    const filePrefix = Object.values(FontFace)[Object.values(FontFace).indexOf(face)]?.replace(' ', '');
+    if (!weight) {
+      return {
+        fontFamily: filePrefix,
+      };
+    }
+    const fileSuffix = Object.keys(FontWeight)[Object.values(FontWeight).indexOf(weight)];
+    return {
+      fontFamily: `${filePrefix}-${fileSuffix}`,
+    };
+  } else {
+    return {
+      fontFamily: face,
+      fontWeight: weight,
+    };
+  }
+};
+
+const font = {
+  regular: fontFactory({ face: FontFace.OpenSans, weight: FontWeight.Regular }),
+  medium: fontFactory({ face: FontFace.OpenSans, weight: FontWeight.Medium }),
+  code: fontFactory({ face: FontFace.IBMPlexMono, weight: FontWeight.Regular }),
+  heading: fontFactory({ face: FontFace.ProcivisBook }),
+};
+
+export default font;

package/src/text/index.ts

@@ -0,0 +1,3 @@
+import Typography, { TypographyProps } from './typography';
+
+export { Typography, TypographyProps };

package/src/text/typography.stories.tsx

@@ -0,0 +1,70 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import type { ColorValue } from 'react-native';
+
+import ColorSchemes from '../../storybook/colorScheme';
+import { ColorScheme, useAppColorScheme } from '../theme';
+import Typography from './typography';
+
+type ColorSchemeKey = keyof Omit<ColorScheme, 'darkMode'>;
+
+const Basic: ComponentStory<typeof Typography> = ({ color, ...args }) => {
+  const colorScheme = useAppColorScheme();
+  return <Typography {...args} color={colorScheme[color as ColorSchemeKey] as ColorValue} />;
+};
+
+Basic.args = {
+  children: 'Text',
+  preset: 'regular',
+  caps: false,
+  color: 'text',
+  align: 'left',
+  numberOfLines: 1,
+  ellipsizeMode: 'tail',
+};
+
+export { Basic as Typography };
+
+export default {
+  title: 'base/Typography',
+  component: Typography,
+  argTypes: {
+    preset: {
+      options: [
+        'xl',
+        'l',
+        'l/line-height-large',
+        'regular',
+        'm',
+        's',
+        's/line-height-capped',
+        's/line-height-small',
+        's/code',
+        'xs',
+        'xs/line-height-small',
+        'xs/code',
+      ],
+      control: { type: 'radio' },
+    },
+    color: {
+      options: Object.entries(ColorSchemes.procivis)
+        .filter(([_, value]) => typeof value === 'string')
+        .map(([key]) => key),
+      control: { type: 'select' },
+    },
+    align: {
+      options: ['left', 'center', 'right'],
+      control: { type: 'radio' },
+    },
+    ellipsizeMode: {
+      options: ['head', 'middle', 'tail', 'clip'],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1045-30326',
+    },
+  },
+} as ComponentMeta<typeof Typography>;

package/src/text/typography.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { useAppColorScheme } from '../theme';
+import { BaseText, BaseTextProps } from './base';
+import font from './font';
+
+const presets = {
+  xl: {
+    ...font.heading,
+    fontSize: 26,
+    lineHeight: 36,
+    letterSpacing: 0.2,
+  },
+  l: {
+    ...font.heading,
+    fontSize: 24,
+    lineHeight: 33,
+  },
+  'l/line-height-large': {
+    ...font.heading,
+    fontSize: 24,
+    lineHeight: 28,
+  },
+  regular: {
+    ...font.regular,
+    fontSize: 17,
+    lineHeight: 24,
+  },
+  m: {
+    ...font.medium,
+    fontSize: 17,
+    lineHeight: 22,
+    letterSpacing: -0.2,
+  },
+  'm/heading': {
+    ...font.heading,
+    fontSize: 17,
+    lineHeight: 22,
+    letterSpacing: -0.2,
+  },
+  s: {
+    ...font.regular,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  's/line-height-capped': {
+    ...font.regular,
+    fontSize: 14,
+    lineHeight: 22,
+    letterSpacing: -0.2,
+    // TODO: vertical trim: cap height
+  },
+  's/line-height-small': {
+    ...font.regular,
+    fontSize: 14,
+    lineHeight: 18,
+    letterSpacing: 0.3,
+  },
+  's/code': {
+    ...font.code,
+    fontSize: 14,
+    lineHeight: 22,
+    letterSpacing: 0.2,
+  },
+  xs: {
+    ...font.regular,
+    fontSize: 12,
+    lineHeight: 22,
+    letterSpacing: -0.1,
+  },
+  'xs/line-height-small': {
+    ...font.regular,
+    fontSize: 12,
+    lineHeight: 18,
+    letterSpacing: 0.3,
+  },
+  'xs/code': {
+    ...font.code,
+    fontSize: 12,
+    lineHeight: 18,
+    letterSpacing: 0.3,
+  },
+} as const;
+
+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
+ */
+const Typography = React.forwardRef<Text, TypographyProps>(
+  ({ preset = 'regular', color, caps, style, ...props }, ref) => {
+    const colorScheme = useAppColorScheme();
+    return (
+      <BaseText
+        ref={ref}
+        style={[presets[preset], caps && styles.caps, style]}
+        color={color ?? colorScheme.text}
+        {...props}
+      />
+    );
+  },
+);
+
+Typography.displayName = 'Typography';
+
+const styles = StyleSheet.create({
+  caps: {
+    textTransform: 'uppercase',
+  },
+});
+
+export default Typography;

package/src/theme/color-scheme-context.tsx

@@ -0,0 +1,48 @@
+import React, { PropsWithChildren } from 'react';
+
+import type { ColorScheme } from './color-scheme';
+
+const defaultColorScheme: ColorScheme = {
+  accent: '#0F151A',
+  accentText: '#EBF2F4',
+  background: '#F1F3F5',
+  backgroundScroll: 'rgba(241, 243, 245, 0.7)',
+  black: '#000000',
+  codeAccent: '#CFD2E7',
+  credentialHeaderBackground: 'rgba(255, 255, 255, 0.87)',
+  error: '#D90D0D',
+  grayDark: '#CDD4DA',
+  linkText: '#3F7BA6',
+  success: '#00D066',
+  successText: '#006B34',
+  text: '#0D0E10',
+  warning: '#F7BF0B',
+  white: '#FFFFFF',
+  darkMode: false,
+  nerdView: {
+    background: 'rgba(2, 4, 21, 0.95)',
+    attributeLabel: '#929497',
+    attributeValueBackground: 'rgba(255, 255, 255, 0.02)',
+    attributeValueBorder: 'rgba(255, 255, 255, 0.2)',
+    attributeSectionBackground: 'rgba(2, 4, 21, 0.8)',
+    button: 'rgba(255, 255, 255, 0.05)',
+    codeHighlightText: 'rgba(232, 135, 114, 1)',
+  },
+};
+
+const ColorSchemeContext = React.createContext<ColorScheme>(defaultColorScheme);
+ColorSchemeContext.displayName = 'ColorSchemeContext';
+
+export function ColorSchemeProvider<Scheme extends ColorScheme = ColorScheme>(
+  props: PropsWithChildren<{ colorScheme: Scheme }>,
+) {
+  return <ColorSchemeContext.Provider value={props.colorScheme}>{props.children}</ColorSchemeContext.Provider>;
+}
+
+/**
+ * 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 function useAppColorScheme<Scheme extends ColorScheme = ColorScheme>(): Readonly<Scheme> {
+  return React.useContext(ColorSchemeContext) as Scheme;
+}

package/src/theme/color-scheme.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/src/theme/index.ts

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

package/src/utils/color.ts

@@ -0,0 +1,34 @@
+/* eslint-disable no-bitwise */
+import normalizeColor from '@react-native/normalize-color';
+import type { ColorValue } from 'react-native';
+
+export const colorArray = (color: ColorValue) => {
+  const normalized = normalizeColor(color);
+
+  const r = (normalized >> 24) & 0xff;
+  const g = (normalized >> 16) & 0xff;
+  const b = (normalized >> 8) & 0xff;
+  const a = normalized & 0xff;
+
+  return [r / 255, g / 255, b / 255, a / 255];
+};
+
+export const colorWithAlphaComponent = (color: ColorValue, alpha: number): ColorValue => {
+  alpha = Math.min(1, Math.max(0, alpha));
+  const colorValues = colorArray(color);
+  colorValues[3] = alpha;
+  const colorHexString = colorValues
+    .map((value) =>
+      Math.round(255 * value)
+        .toString(16)
+        .padStart(2, '0'),
+    )
+    .join('');
+  return `#${colorHexString}`;
+};
+
+export const getBrightness = (color: ColorValue) => {
+  const rgb = colorArray(color);
+  // https://en.wikipedia.org/wiki/Relative_luminance
+  return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+};

package/src/utils/contrasting-status-bar.tsx

@@ -0,0 +1,21 @@
+import React, { FC, useMemo } from 'react';
+import { ColorValue, StatusBar, StatusBarProps, StatusBarStyle } from 'react-native';
+
+import { getBrightness } from './color';
+
+interface ContrastingStatusBarProps extends Omit<StatusBarProps, 'barStyle'> {
+  backgroundColor: ColorValue;
+}
+
+/**
+ * Defines transparent status bar with content contrasting to the background
+ */
+const ContrastingStatusBar: FC<ContrastingStatusBarProps> = ({ backgroundColor, ...props }) => {
+  const barStyle = useMemo<StatusBarStyle>(
+    () => (getBrightness(backgroundColor) > 0.5 ? 'dark-content' : 'light-content'),
+    [backgroundColor],
+  );
+  return <StatusBar translucent={true} barStyle={barStyle} backgroundColor={'transparent'} {...props} />;
+};
+
+export default ContrastingStatusBar;