sapo-components-ui-rn 1.0.0

package/src/index.tsx

@@ -0,0 +1,50 @@
+export { ThemeColors } from "./styles/themes/tokens";
+export { CONSTANTS } from "./styles/themes/tokens";
+export {
+  useTheme,
+  ThemeProvider,
+  DefaultTheme,
+  adaptNavigationTheme,
+} from "./core/theming";
+export * from "./styles/themes";
+
+export { default as shadow } from "./styles/shadow";
+export { default as overlay } from "./styles/overlay";
+export { default as configureFonts } from "./styles/fonts";
+export { default as ActivityIndicator } from "./components/ActivityIndicator";
+export { default as ProgressBar } from "./components/ProgressBar";
+export { default as Switch } from "./components/Switch/Switch";
+export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as Button } from "./components/Button";
+export { default as ButtonIcon } from "./components/ButtonIcon";
+export { default as FloatingButton } from "./components/FloatingButton";
+export { default as Text } from "./components/Text";
+export { default as Toast } from "./components/Toast";
+export { default as View } from "./components/View";
+export { default as Spacer } from "./components/Spacer";
+export { default as Image } from "./components/Image";
+export { default as Badge } from "./components/Badge";
+export { default as CountingDot } from "./components/CountingDot";
+export { default as ChipBar } from "./components/ChipBar";
+export { default as Checkbox } from "./components/Checkbox";
+export { default as RadioButton } from "./components/RadioButton";
+export { default as Avatar } from "./components/Avatar";
+export { default as SelectionField } from "./components/SelectionField";
+// Types
+export type { Props as ActivityIndicatorProps } from "./components/ActivityIndicator";
+export type { Props as SwitchProps } from "./components/Switch/Switch";
+export type { Props as TextInputProps } from "./components/TextInput/TextInput";
+export type { Props as TextInputAffixProps } from "./components/TextInput/Adornment/TextInputAffix";
+
+export type {
+  AppTheme,
+  ThemeBase,
+  MD3Elevation,
+  MD3TypescaleKey,
+} from "./types";
+
+// Toast Manager
+export * from "./utils/toast-manager";
+
+// Toast Provider
+export { default as ToastProvider } from "./components/Toast/ToastProvider";

package/src/styles/fonts.tsx

@@ -0,0 +1,89 @@
+import { typescale } from "./themes/tokens";
+import type { MD3Type, MD3Typescale, MD3TypescaleKey } from "../types";
+
+export const fontConfig = {
+  ios: {
+    regular: {
+      fontFamily: "System",
+      fontWeight: "400" as "400",
+    },
+    medium: {
+      fontFamily: "System",
+      fontWeight: "500" as "500",
+    },
+    light: {
+      fontFamily: "System",
+      fontWeight: "300" as "300",
+    },
+    thin: {
+      fontFamily: "System",
+      fontWeight: "100" as "100",
+    },
+  },
+  default: {
+    regular: {
+      fontFamily: "sans-serif",
+      fontWeight: "normal" as "normal",
+    },
+    medium: {
+      fontFamily: "sans-serif-medium",
+      fontWeight: "normal" as "normal",
+    },
+    light: {
+      fontFamily: "sans-serif-light",
+      fontWeight: "normal" as "normal",
+    },
+    thin: {
+      fontFamily: "sans-serif-thin",
+      fontWeight: "normal" as "normal",
+    },
+  },
+};
+
+type MD3FontsConfig =
+  | {
+      [key in MD3TypescaleKey]: Partial<MD3Type>;
+    }
+  | {
+      [key: string]: MD3Type;
+    }
+  | Partial<MD3Type>;
+
+function configureV3Fonts(
+  config: MD3FontsConfig
+): MD3Typescale | (MD3Typescale & { [key: string]: MD3Type }) {
+  if (!config) {
+    return typescale;
+  }
+
+  const isFlatConfig = Object.keys(config).every(
+    (key) => typeof config[key as keyof typeof config] !== "object"
+  );
+
+  if (isFlatConfig) {
+    return Object.fromEntries(
+      Object.entries(typescale).map(([variantName, variantProperties]) => [
+        variantName,
+        { ...variantProperties, ...config },
+      ])
+    ) as MD3Typescale;
+  }
+
+  return Object.assign(
+    {},
+    typescale,
+    ...Object.entries(config).map(([variantName, variantProperties]) => ({
+      [variantName]: {
+        ...typescale[variantName as MD3TypescaleKey],
+        ...variantProperties,
+      },
+    }))
+  );
+}
+
+// eslint-disable-next-line no-redeclare
+export default function configureFonts(params?: any) {
+  const { config } = params || {};
+
+  return configureV3Fonts(config);
+}

package/src/styles/overlay.tsx

@@ -0,0 +1,69 @@
+import { Animated } from "react-native";
+
+import color from "color";
+import { DarkTheme } from "./themes";
+
+export const isAnimatedValue = (
+  it: number | string | Animated.AnimatedInterpolation<number | string>
+): it is Animated.Value => it instanceof Animated.Value;
+
+export default function overlay<T extends Animated.Value | number>(
+  elevation: T,
+  surfaceColor: string = DarkTheme.colors?.backgroundPrimary
+): T extends number ? string : Animated.AnimatedInterpolation<number | string> {
+  if (isAnimatedValue(elevation)) {
+    const inputRange = [0, 1, 2, 3, 8, 24];
+
+    // @ts-expect-error: TS doesn't seem to refine the type correctly
+    return elevation.interpolate({
+      inputRange,
+      outputRange: inputRange.map((elevation) => {
+        return calculateColor(surfaceColor, elevation);
+      }),
+    });
+  }
+
+  // @ts-expect-error: TS doesn't seem to refine the type correctly
+  return calculateColor(surfaceColor, elevation);
+}
+
+function calculateColor(surfaceColor: string, elevation: number = 1) {
+  let overlayTransparency: number;
+  if (elevation >= 1 && elevation <= 24) {
+    overlayTransparency = elevationOverlayTransparency[elevation];
+  } else if (elevation > 24) {
+    overlayTransparency = elevationOverlayTransparency[24];
+  } else {
+    overlayTransparency = elevationOverlayTransparency[1];
+  }
+  return color(surfaceColor)
+    .mix(color("white"), overlayTransparency * 0.01)
+    .hex();
+}
+
+const elevationOverlayTransparency: Record<string, number> = {
+  1: 5,
+  2: 7,
+  3: 8,
+  4: 9,
+  5: 10,
+  6: 11,
+  7: 11.5,
+  8: 12,
+  9: 12.5,
+  10: 13,
+  11: 13.5,
+  12: 14,
+  13: 14.25,
+  14: 14.5,
+  15: 14.75,
+  16: 15,
+  17: 15.12,
+  18: 15.24,
+  19: 15.36,
+  20: 15.48,
+  21: 15.6,
+  22: 15.72,
+  23: 15.84,
+  24: 16,
+};

package/src/styles/shadow.tsx

@@ -0,0 +1,47 @@
+import { Animated } from "react-native";
+import colors from "../theme/colors";
+
+const MD3_SHADOW_OPACITY = 0.3;
+const MD3_SHADOW_COLOR = colors.ink.INK80;
+
+export default function shadow(elevation: number | Animated.Value = 0) {
+  return v3Shadow(elevation);
+}
+
+function v3Shadow(elevation: number | Animated.Value = 0) {
+  const inputRange = [0, 1, 2, 3, 4, 5];
+  const shadowHeight = [0, 1, 2, 4, 6, 8];
+  const shadowRadius = [0, 3, 6, 8, 10, 12];
+
+  if (elevation instanceof Animated.Value) {
+    return {
+      shadowColor: MD3_SHADOW_COLOR,
+      shadowOffset: {
+        width: new Animated.Value(0),
+        height: elevation.interpolate({
+          inputRange,
+          outputRange: shadowHeight,
+        }),
+      },
+      shadowOpacity: elevation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, MD3_SHADOW_OPACITY],
+        extrapolate: "clamp",
+      }),
+      shadowRadius: elevation.interpolate({
+        inputRange,
+        outputRange: shadowRadius,
+      }),
+    };
+  } else {
+    return {
+      shadowColor: MD3_SHADOW_COLOR,
+      shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,
+      shadowOffset: {
+        width: 0,
+        height: shadowHeight[elevation],
+      },
+      shadowRadius: shadowRadius[elevation],
+    };
+  }
+}

package/src/styles/themes/DarkTheme.tsx

@@ -0,0 +1,157 @@
+import type { AppTheme } from "../../types";
+import { LightTheme } from "./LightTheme";
+import ink from "../../theme/ink";
+import white from "../../theme/white";
+import blue from "../../theme/blue";
+import red from "../../theme/red";
+import green from "../../theme/green";
+import yellow from "../../theme/yellow";
+import purple from "../../theme/purple";
+
+export const DarkTheme: AppTheme = {
+  ...LightTheme,
+  dark: true,
+  mode: "adaptive",
+  version: 3,
+  colors: {
+    elevation: {
+      level0: "transparent",
+      level1: "rgb(37, 35, 42)",
+      level2: "rgb(44, 40, 49)",
+      level3: "rgb(49, 44, 56)",
+      level4: "rgb(51, 46, 58)",
+      level5: "rgb(52, 49, 63)",
+    },
+    //new theme colors
+    backgroundPrimary: ink.INK100,
+    backgroundSecondary: white.WHITE100,
+    borderBrandDefault: blue.BLUE100,
+    borderCriticalDefault: red.RED100,
+    borderCriticalHover: red.RED80,
+    borderCriticalPressed: red.RED120,
+    borderErrorDefault: red.RED100,
+    borderInfoDefault: blue.BLUE100,
+    borderPrimaryDefault: ink.INK10,
+    borderPrimaryDisabled: ink.INK10,
+    borderPrimaryHovered: ink.INK20,
+    borderPrimaryInverseDefault: blue.BLUE100,
+    borderPrimaryPressed: ink.INK20,
+    borderSuccessDefault: green.GREEN100,
+    borderWarningDefault: yellow.YELLOW100,
+    iconBrandDefault: blue.BLUE100,
+    iconCriticalDefault: red.RED100,
+    iconErrorDefault: red.RED100,
+    iconInfoDefault: blue.BLUE100,
+    iconPrimaryDefault: ink.INK40,
+    iconPrimaryHover: ink.INK60,
+    iconPrimaryDisabled: ink.INK60,
+    iconPrimaryInverseDefault: white.WHITE100,
+    iconPrimaryInverseHover: white.WHITE80,
+    iconPrimaryInversePressed: white.WHITE80,
+    iconPrimaryPressed: ink.INK60,
+    iconSuccessDefault: green.GREEN100,
+    iconWarningDefault: yellow.YELLOW100,
+    surfaceBrandDefault: blue.BLUE100,
+    surfaceBrandDisabled: ink.INK10,
+    surfaceBrandHover: blue.BLUE80,
+    surfaceBrandInverseDefault: blue.BLUE10,
+    surfaceBrandInverseHover: blue.BLUE20,
+    surfaceBrandInversePressed: blue.BLUE40,
+    surfaceBrandPressed: blue.BLUE120,
+    surfaceCriticalDefault: red.RED100,
+    surfaceCriticalDisabled: ink.INK10,
+    surfaceCriticalHover: red.RED80,
+    surfaceCriticalInverseDefault: red.RED10,
+    surfaceCriticalInverseHover: red.RED20,
+    surfaceCriticalInversePressed: red.RED40,
+    surfaceCriticalPressed: red.RED120,
+    surfaceErrorDefault: red.RED100,
+    surfaceErrorDisabled: ink.INK10,
+    surfaceErrorHover: red.RED80,
+    surfaceErrorInverseDefault: red.RED10,
+    surfaceErrorInverseHover: red.RED20,
+    surfaceErrorInversePressed: red.RED40,
+    surfaceErrorPressed: red.RED_STATUS,
+    surfaceInfoDefault: blue.BLUE100,
+    surfaceInfoDisabled: ink.INK10,
+    surfaceInfoHover: blue.BLUE80,
+    surfaceInfoInverseDefault: blue.BLUE10,
+    surfaceInfoInverseHover: blue.BLUE20,
+    surfaceInfoInversePressed: blue.BLUE40,
+    surfaceInfoPressed: blue.BLUE120,
+    surfacePrimaryDefault: white.WHITE100,
+    surfacePrimaryDisabled: ink.INK5,
+    surfacePrimaryHover: ink.INK5,
+    surfacePrimaryInverseDefault: ink.INK80,
+    surfacePrimaryInverseHover: ink.INK60,
+    surfacePrimaryInversePressed: ink.INK40,
+    surfacePrimaryPressed: ink.INK10,
+    surfaceSecondaryDefault: ink.INK5,
+    surfaceSecondaryDisabled: ink.INK5,
+    surfaceSecondaryHover: ink.INK10,
+    surfaceSecondaryPressed: ink.INK20,
+    surfaceSuccessDefault: green.GREEN100,
+    surfaceSuccessDisabled: ink.INK10,
+    surfaceSuccessHover: green.GREEN80,
+    surfaceSuccessInverseDefault: green.GREEN10,
+    surfaceSuccessInverseHover: green.GREEN20,
+    surfaceSuccessInversePressed: green.GREEN40,
+    surfaceSuccessPressed: green.GREEN_STATUS,
+    surfaceWarningDefault: yellow.YELLOW100,
+    surfaceWarningDisabled: ink.INK10,
+    surfaceWarningHover: yellow.YELLOW80,
+    surfaceWarningInverseDefault: yellow.YELLOW10,
+    surfaceWarningInverseHover: yellow.YELLOW20,
+    surfaceWarningInversePressed: yellow.YELLOW40,
+    surfaceWarningPressed: yellow.YELLOW120,
+    textDefault: ink.INK5,
+    textDisabled: ink.INK20,
+    textPlaceholder: ink.INK40,
+    textSecondary: ink.INK60,
+    textBrandDefault: blue.BLUE100,
+    textBrandDisabled: ink.INK20,
+    textBrandHovered: blue.BLUE80,
+    textBrandPressed: blue.BLUE120,
+    textCriticalDefault: red.RED100,
+    textCriticalDisabled: ink.INK20,
+    textCriticalHovered: red.RED80,
+    textCriticalPressed: red.RED_STATUS,
+    textErrorDefault: red.RED100,
+    textErrorDisabled: ink.INK20,
+    textErrorHovered: red.RED80,
+    textErrorPressed: red.RED_STATUS,
+    textInfoDefault: blue.BLUE100,
+    textInfoDisabled: ink.INK20,
+    textInfoHovered: blue.BLUE80,
+    textInfoPressed: blue.BLUE120,
+    textLinkDefault: blue.BLUE100,
+    textLinkDisabled: ink.INK20,
+    textLinkHovered: blue.BLUE80,
+    textLinkPressed: blue.BLUE120,
+    textLinkVisitedDefault: purple.PURPLE100,
+    textLinkVisitedDisabled: purple.PURPLE_BG,
+    textLinkVisitedHovered: purple.PURPLE_BG,
+    textLinkVisitedPressed: purple.PURPLE_BG,
+    textOnFillDefault: white.WHITE100,
+    textOnFillDisabled: white.WHITE20,
+    textOnFillHovered: white.WHITE80,
+    textOnFillPressed: white.WHITE80,
+    textSuccessDefault: green.GREEN100,
+    textSuccessDisabled: ink.INK20,
+    textSuccessHovered: green.GREEN80,
+    textSuccessPressed: green.GREEN_STATUS,
+    textWarningDefault: yellow.YELLOW100,
+    textWarningDisabled: ink.INK20,
+    textWarningHovered: yellow.YELLOW80,
+    textWarningPressed: yellow.YELLOW_STATUS,
+    selectBackgroundDisabled: white.WHITE40,
+    selectIconDisabled: white.WHITE40,
+    borderCriticalInverseDefault: red.RED40,
+    borderCriticalInverseHover: red.RED20,
+    borderCriticalInversePressed: red.RED60,
+    borderErrorInverseDefault: red.RED40,
+    borderPrimaryFocused: blue.BLUE100,
+    borderWarningInverseDefault: yellow.YELLOW40,
+    borderSuccessInverseDefault: green.GREEN40,
+  },
+};

package/src/styles/themes/LightTheme.tsx

@@ -0,0 +1,160 @@
+import type { AppTheme } from "../../types";
+import configureFonts from "../fonts";
+import ink from "../../theme/ink";
+import white from "../../theme/white";
+import blue from "../../theme/blue";
+import red from "../../theme/red";
+import green from "../../theme/green";
+import yellow from "../../theme/yellow";
+import purple from "../../theme/purple";
+
+export const LightTheme: AppTheme = {
+  dark: false,
+  roundness: 8,
+  version: 3,
+  colors: {
+    elevation: {
+      level0: "transparent",
+      level1: "rgb(247, 243, 249)",
+      level2: "rgb(243, 237, 246)",
+      level3: "rgb(238, 232, 244)",
+      level4: "rgb(236, 230, 243)",
+      level5: "rgb(233, 227, 241)",
+    },
+    //new theme colors
+    backgroundPrimary: ink.INK5,
+    backgroundSecondary: white.WHITE100,
+    borderBrandDefault: blue.BLUE100,
+    borderCriticalDefault: red.RED100,
+    borderCriticalHover: red.RED80,
+    borderCriticalPressed: red.RED120,
+    borderErrorDefault: red.RED100,
+    borderInfoDefault: blue.BLUE100,
+    borderPrimaryDefault: ink.INK10,
+    borderPrimaryDisabled: ink.INK10,
+    borderPrimaryHovered: ink.INK20,
+    borderPrimaryInverseDefault: blue.BLUE100,
+    borderPrimaryPressed: ink.INK20,
+    borderSuccessDefault: green.GREEN100,
+    borderWarningDefault: yellow.YELLOW100,
+    iconBrandDefault: blue.BLUE100,
+    iconCriticalDefault: red.RED100,
+    iconErrorDefault: red.RED100,
+    iconInfoDefault: blue.BLUE100,
+    iconPrimaryDefault: ink.INK40,
+    iconPrimaryHover: ink.INK60,
+    iconPrimaryDisabled: ink.INK60,
+    iconPrimaryInverseDefault: white.WHITE100,
+    iconPrimaryInverseHover: white.WHITE80,
+    iconPrimaryInversePressed: white.WHITE80,
+    iconPrimaryPressed: ink.INK60,
+    iconSuccessDefault: green.GREEN100,
+    iconWarningDefault: yellow.YELLOW100,
+    surfaceBrandDefault: blue.BLUE100,
+    surfaceBrandDisabled: ink.INK10,
+    surfaceBrandHover: blue.BLUE80,
+    surfaceBrandInverseDefault: blue.BLUE10,
+    surfaceBrandInverseHover: blue.BLUE20,
+    surfaceBrandInversePressed: blue.BLUE40,
+    surfaceBrandPressed: blue.BLUE120,
+    surfaceCriticalDefault: red.RED100,
+    surfaceCriticalDisabled: ink.INK10,
+    surfaceCriticalHover: red.RED80,
+    surfaceCriticalInverseDefault: red.RED10,
+    surfaceCriticalInverseHover: red.RED20,
+    surfaceCriticalInversePressed: red.RED40,
+    surfaceCriticalPressed: red.RED120,
+    surfaceErrorDefault: red.RED100,
+    surfaceErrorDisabled: ink.INK10,
+    surfaceErrorHover: red.RED80,
+    surfaceErrorInverseDefault: red.RED10,
+    surfaceErrorInverseHover: red.RED20,
+    surfaceErrorInversePressed: red.RED40,
+    surfaceErrorPressed: red.RED_STATUS,
+    surfaceInfoDefault: blue.BLUE100,
+    surfaceInfoDisabled: ink.INK10,
+    surfaceInfoHover: blue.BLUE80,
+    surfaceInfoInverseDefault: blue.BLUE10,
+    surfaceInfoInverseHover: blue.BLUE20,
+    surfaceInfoInversePressed: blue.BLUE40,
+    surfaceInfoPressed: blue.BLUE120,
+    surfacePrimaryDefault: white.WHITE100,
+    surfacePrimaryDisabled: ink.INK5,
+    surfacePrimaryHover: ink.INK5,
+    surfacePrimaryInverseDefault: ink.INK80,
+    surfacePrimaryInverseHover: ink.INK60,
+    surfacePrimaryInversePressed: ink.INK40,
+    surfacePrimaryPressed: ink.INK10,
+    surfaceSecondaryDefault: ink.INK5,
+    surfaceSecondaryDisabled: ink.INK5,
+    surfaceSecondaryHover: ink.INK10,
+    surfaceSecondaryPressed: ink.INK20,
+    surfaceSuccessDefault: green.GREEN100,
+    surfaceSuccessDisabled: ink.INK10,
+    surfaceSuccessHover: green.GREEN80,
+    surfaceSuccessInverseDefault: green.GREEN10,
+    surfaceSuccessInverseHover: green.GREEN20,
+    surfaceSuccessInversePressed: green.GREEN40,
+    surfaceSuccessPressed: green.GREEN_STATUS,
+    surfaceWarningDefault: yellow.YELLOW100,
+    surfaceWarningDisabled: ink.INK10,
+    surfaceWarningHover: yellow.YELLOW80,
+    surfaceWarningInverseDefault: yellow.YELLOW10,
+    surfaceWarningInverseHover: yellow.YELLOW20,
+    surfaceWarningInversePressed: yellow.YELLOW40,
+    surfaceWarningPressed: yellow.YELLOW120,
+    textDefault: ink.INK100,
+    textDisabled: ink.INK20,
+    textPlaceholder: ink.INK40,
+    textSecondary: ink.INK60,
+    textBrandDefault: blue.BLUE100,
+    textBrandDisabled: ink.INK20,
+    textBrandHovered: blue.BLUE80,
+    textBrandPressed: blue.BLUE120,
+    textCriticalDefault: red.RED100,
+    textCriticalDisabled: ink.INK20,
+    textCriticalHovered: red.RED80,
+    textCriticalPressed: red.RED_STATUS,
+    textErrorDefault: red.RED100,
+    textErrorDisabled: ink.INK20,
+    textErrorHovered: red.RED80,
+    textErrorPressed: red.RED_STATUS,
+    textInfoDefault: blue.BLUE100,
+    textInfoDisabled: ink.INK20,
+    textInfoHovered: blue.BLUE80,
+    textInfoPressed: blue.BLUE120,
+    textLinkDefault: blue.BLUE100,
+    textLinkDisabled: ink.INK20,
+    textLinkHovered: blue.BLUE80,
+    textLinkPressed: blue.BLUE120,
+    textLinkVisitedDefault: purple.PURPLE100,
+    textLinkVisitedDisabled: purple.PURPLE_BG,
+    textLinkVisitedHovered: purple.PURPLE_BG,
+    textLinkVisitedPressed: purple.PURPLE_BG,
+    textOnFillDefault: white.WHITE100,
+    textOnFillDisabled: white.WHITE20,
+    textOnFillHovered: white.WHITE80,
+    textOnFillPressed: white.WHITE80,
+    textSuccessDefault: green.GREEN100,
+    textSuccessDisabled: ink.INK20,
+    textSuccessHovered: green.GREEN80,
+    textSuccessPressed: green.GREEN_STATUS,
+    textWarningDefault: yellow.YELLOW100,
+    textWarningDisabled: ink.INK20,
+    textWarningHovered: yellow.YELLOW80,
+    textWarningPressed: yellow.YELLOW_STATUS,
+    selectBackgroundDisabled: white.WHITE40,
+    selectIconDisabled: white.WHITE40,
+    borderCriticalInverseDefault: red.RED40,
+    borderCriticalInverseHover: red.RED20,
+    borderCriticalInversePressed: red.RED60,
+    borderErrorInverseDefault: red.RED40,
+    borderPrimaryFocused: blue.BLUE100,
+    borderWarningInverseDefault: yellow.YELLOW40,
+    borderSuccessInverseDefault: green.GREEN40,
+  },
+  fonts: configureFonts(),
+  animation: {
+    scale: 1.0,
+  },
+};

package/src/styles/themes/index.ts

@@ -0,0 +1,3 @@
+export { LightTheme } from './LightTheme';
+export { DarkTheme } from './DarkTheme';
+