@bigbinary/neetoui-rn 2.3.4 → 3.0.0

package/package.json

@@ -1,66 +1,140 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "2.3.4",
-  "main": "./index.js",
+  "version": "3.0.0",
+  "description": "neeto UI component library for React Native — v3 (Unistyles, TypeScript, New Architecture)",
   "author": "BigBinary",
   "license": "MIT",
-  "description": "The neetoUI-RN library drives the experience in all neeto product's React Native applications built at BigBinary.",
+  "repository": "https://github.com/neetozone/neeto-ui-rn",
+  "main": "./src/index.ts",
+  "react-native": "./src/index.ts",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "assets",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/.*"
+  ],
+  "sideEffects": [
+    "./src/unistyles-init.ts",
+    "./.storybook/unistyles-setup.ts"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "format": "prettier --write .",
+    "generate:tokens": "node scripts/generate-tokens.mjs && prettier --write src/theme/palette.generated.ts",
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepack": "bob build"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{js,json,md}": [
+      "prettier --write"
+    ]
+  },
   "peerDependencies": {
-    "@shopify/flash-list": ">=2.3.1",
-    "react-native-device-info": "^10.3.0",
-    "react-native-reanimated": ">=3.6.0",
-    "react-native-safe-area-context": ">=3.3.2",
-    "react-native-svg": "*",
-    "react-native-webview": ">=11.14.4"
+    "@gorhom/bottom-sheet": "^5.0.0",
+    "@shopify/flash-list": ">=2.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.78.0",
+    "react-native-edge-to-edge": "*",
+    "react-native-gesture-handler": ">=2.16.1",
+    "react-native-nitro-modules": "*",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=15.0.0",
+    "react-native-toast-message": "^2.0.0",
+    "react-native-unistyles": ">=3.2.0"
   },
-  "dependencies": {
-    "@bigbinary/neeto-icons-rn": "^1.0.7",
-    "@styled-system/prop-types": "^5.1.5",
-    "dayjs": "^1.11.4",
-    "node-html-parser": "^6.1.5",
-    "react-content-loader": "^6.2.0",
-    "react-native-calendars": ">=1.1313.0",
-    "react-native-controlled-mentions": "^2.2.5",
-    "react-native-modal": "^13.0.0",
-    "react-native-pell-rich-editor": "^1.9.0",
-    "react-native-popover-view": "^6.1.0",
-    "react-native-size-matters": "^0.4.0",
-    "react-native-snap-carousel": "4.0.0-beta.6",
-    "react-native-toast-message": "^2.1.5",
-    "styled-components": "^5.3.3",
-    "styled-system": "^5.1.5"
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@gorhom/bottom-sheet": "^5",
+    "@react-native/babel-preset": "0.80.3",
+    "@react-native/normalize-colors": "0.80.3",
+    "@shopify/flash-list": "^2.3.2",
+    "@storybook/react-native-web-vite": "^10.5.5",
+    "@testing-library/react-native": "^14.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-native": "^4.1.0",
+    "eslint-plugin-unused-imports": "^3.2.0",
+    "husky": "^8.0.1",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.0",
+    "prettier": "^3.3.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.80.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-edge-to-edge": "^1.8.1",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-nitro-modules": "0.35.7",
+    "react-native-reanimated": "^3.19.0",
+    "react-native-safe-area-context": "^5.8.0",
+    "react-native-svg": "^15.15.5",
+    "react-native-toast-message": "^2",
+    "react-native-unistyles": "3.2.5",
+    "react-native-web": "^0.21.2",
+    "storybook": "^10.5.5",
+    "test-renderer": "^1.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^6"
   },
   "jest": {
     "preset": "react-native",
-    "moduleDirectories": [
-      "node_modules"
+    "setupFiles": [
+      "./jest.setup.js"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!react-native)/"
+      "node_modules/(?!(@react-native|@bigbinary|@gorhom|@shopify|react-native|react-native-[^/]+)/)"
     ],
-    "testEnvironment": "jsdom"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:bigbinary/neeto-ui-rn.git"
-  },
-  "keywords": [
-    "components",
-    "ui",
-    "styles",
-    "layouts",
-    "react-native"
-  ],
-  "config": {
-    "react-native-storybook-loader": {
-      "searchDir": [
-        "storybook/stories"
-      ],
-      "pattern": "**/*.stories.js",
-      "outputFile": "./storybook/storyLoader.js"
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/lib/"
+    ],
+    "moduleNameMapper": {
+      "^@bigbinary/neeto-icons-rn$": "<rootDir>/node_modules/@bigbinary/neeto-icons-rn/dist/icons/index.js"
     }
   },
-  "resolutions": {
-    "styled-components": "^5"
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@bigbinary/neeto-icons-rn": "^1.20.74",
+    "react-native-controlled-mentions": "^3.1.0"
   }
-}
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Pressable, View } from "react-native";
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+  type BottomSheetBackdropProps,
+} from "@gorhom/bottom-sheet";
+import { StyleSheet } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Button, type ButtonProps } from "../Button";
+import { Typography } from "../Typography";
+
+export type AlertButton = {
+  label: string;
+  variant?: ButtonProps["variant"];
+  onPress?: () => void;
+};
+
+export type AlertParams = {
+  title: string;
+  description?: string;
+  /** When true (default), backdrop tap / swipe-down dismiss the sheet. */
+  isCancelable?: boolean;
+  /**
+   * First button is the full-width primary action; the rest render as
+   * muted rows below it (neeto-invoice-rn ConfirmSheet layout).
+   * Defaults to a single OK.
+   */
+  buttons?: AlertButton[];
+  /** Called once the sheet has closed, whichever path closed it. */
+  onDismiss?: () => void;
+};
+
+type AlertHost = { show: (params: AlertParams) => void };
+
+let hostRef: AlertHost | null = null;
+
+const DEFAULT_BUTTON: AlertButton = { label: "OK", variant: "solid" };
+
+/**
+ * Imperative confirm sheet (locked decision 2026-07-28: no centered
+ * Modal dialogs in v3 — the fleet's confirm UX is the bottom sheet that
+ * commons/invoice ship, so Alert.show presents one). The v2 Alert.show
+ * signature is unchanged. NeetoUIProvider mounts the host automatically;
+ * the bare export remains for incremental adoption.
+ */
+export const Alert = () => {
+  const sheetRef = useRef<BottomSheetModal>(null);
+  const hasPresentedRef = useRef(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [params, setParams] = useState<AlertParams>({ title: "" });
+
+  const {
+    title,
+    description,
+    isCancelable = true,
+    buttons = [],
+    onDismiss,
+  } = params;
+
+  // gorhom reports the dismissal after the close animation, by which point
+  // the render that triggered it has already cleared isVisible — reading
+  // the callback from a ref keeps it reachable from that later tick.
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+
+  const show = useCallback((nextParams: AlertParams) => {
+    setParams(nextParams);
+    setIsVisible(true);
+  }, []);
+
+  useEffect(() => {
+    hostRef = { show };
+
+    return () => {
+      hostRef = null;
+    };
+  }, [show]);
+
+  useEffect(() => {
+    if (isVisible) {
+      hasPresentedRef.current = true;
+      sheetRef.current?.present();
+    } else if (hasPresentedRef.current) {
+      sheetRef.current?.dismiss();
+    }
+  }, [isVisible]);
+
+  const hide = () => setIsVisible(false);
+
+  // Fires for every close path — button press, backdrop tap, swipe down and
+  // Android back — so onDismiss is a reliable "the sheet is gone" signal.
+  const handleDismiss = () => {
+    hasPresentedRef.current = false;
+    setIsVisible(false);
+    onDismissRef.current?.();
+  };
+
+  const renderBackdrop = useCallback(
+    (backdropProps: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...backdropProps}
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        pressBehavior={isCancelable ? "close" : "none"}
+      />
+    ),
+    [isCancelable]
+  );
+
+  const [primary = DEFAULT_BUTTON, ...secondary] = buttons;
+
+  const handleButtonPress = (button: AlertButton) => {
+    button.onPress?.();
+    hide();
+  };
+
+  return (
+    <BottomSheetModal
+      backdropComponent={renderBackdrop}
+      backgroundStyle={styles.sheetBackground}
+      enablePanDownToClose={isCancelable}
+      handleIndicatorStyle={styles.handleIndicator}
+      ref={sheetRef}
+      onDismiss={handleDismiss}
+    >
+      <BottomSheetView style={styles.content}>
+        <View style={styles.titleContainer}>
+          <Typography size="l" style={styles.title} weight="semibold">
+            {title}
+          </Typography>
+        </View>
+        {!!description && (
+          <Typography size="s" style={styles.description}>
+            {description}
+          </Typography>
+        )}
+        <View style={styles.buttonContainer}>
+          <Button
+            label={primary.label}
+            style={styles.primaryButton}
+            variant={primary.variant ?? "solid"}
+            onPress={() => handleButtonPress(primary)}
+          />
+          {secondary.map(button => (
+            <Pressable
+              accessibilityRole="button"
+              key={button.label}
+              style={styles.secondaryButton}
+              onPress={() => handleButtonPress(button)}
+            >
+              <Typography size="m" weight="semibold">
+                {button.label}
+              </Typography>
+            </Pressable>
+          ))}
+        </View>
+      </BottomSheetView>
+    </BottomSheetModal>
+  );
+};
+
+// v2 static, unchanged signature.
+Alert.show = (params: AlertParams) => {
+  if (!hostRef) {
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.error(
+        "Alert.show: no host mounted. Wrap the app in <NeetoUIProvider> (or render <Alert /> at root)."
+      );
+    }
+
+    return;
+  }
+  hostRef.show(params);
+};
+
+const styles = StyleSheet.create(theme => ({
+  sheetBackground: {
+    backgroundColor: theme.colors.background.primary,
+    borderTopLeftRadius: moderateScale(20),
+    borderTopRightRadius: moderateScale(20),
+  },
+  handleIndicator: {
+    backgroundColor: theme.colors.palette.grey200,
+    width: moderateScale(40),
+  },
+  content: {
+    paddingBottom: moderateScale(24),
+  },
+  titleContainer: {
+    borderBottomColor: theme.colors.palette.grey200,
+    borderBottomWidth: moderateScale(1.5),
+    paddingBottom: moderateScale(12),
+    paddingHorizontal: moderateScale(16),
+  },
+  title: {
+    textAlign: "center",
+  },
+  description: {
+    color: theme.colors.text.muted,
+    paddingHorizontal: moderateScale(16),
+    paddingTop: moderateScale(16),
+  },
+  buttonContainer: {
+    gap: moderateScale(8),
+    paddingHorizontal: moderateScale(16),
+    paddingTop: moderateScale(16),
+  },
+  primaryButton: {
+    minHeight: moderateScale(44),
+  },
+  secondaryButton: {
+    alignItems: "center",
+    backgroundColor: theme.colors.palette.grey100,
+    borderRadius: theme.radii.lg,
+    justifyContent: "center",
+    paddingVertical: moderateScale(14),
+  },
+}));

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert, type AlertButton, type AlertParams } from "./Alert";

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { Image, View, type ViewProps } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Typography } from "../Typography";
+
+// Promoted from neeto-cal-rn's getAvatarColor helper (identical hash + pairs);
+// neeto-planner-rn's AssigneesCard used the same idea. Deterministic per name.
+const AVATAR_PALETTE = [
+  { bgColor: "#D1FAE5", fontColor: "#065F46" },
+  { bgColor: "#CCFBF1", fontColor: "#134E4A" },
+  { bgColor: "#FED7AA", fontColor: "#9A3412" },
+  { bgColor: "#DBEAFE", fontColor: "#1E40AF" },
+  { bgColor: "#E9D5FF", fontColor: "#6B21A8" },
+  { bgColor: "#FECDD3", fontColor: "#9F1239" },
+  { bgColor: "#FEF08A", fontColor: "#854D0E" },
+  { bgColor: "#A7F3D0", fontColor: "#064E3B" },
+  { bgColor: "#C7D2FE", fontColor: "#3730A3" },
+  { bgColor: "#FBCFE8", fontColor: "#9D174D" },
+];
+
+export const getAvatarColor = (name?: string) => {
+  if (!name) return AVATAR_PALETTE[0]!;
+
+  const hash = name
+    .split("")
+    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+
+  return AVATAR_PALETTE[hash % AVATAR_PALETTE.length]!;
+};
+
+const SIZES = {
+  "extra-small": [moderateScale(24), moderateScale(8)],
+  small: [moderateScale(36), moderateScale(12)],
+  medium: [moderateScale(48), moderateScale(14)],
+} as const;
+
+export type AvatarProps = ViewProps & {
+  name?: string;
+  variant?: keyof typeof SIZES;
+  /** Explicit color override. Default: the name-hash palette. */
+  bgColor?: string;
+  fontColor?: string;
+  imageUrl?: string;
+};
+
+export const Avatar = ({
+  name,
+  variant = "medium",
+  bgColor,
+  fontColor,
+  imageUrl,
+  style,
+  ...rest
+}: AvatarProps) => {
+  const [loadedImageUrl, setLoadedImageUrl] = useState<string | undefined>();
+
+  // Tracked as a URL rather than a boolean: FlashList recycles a mounted
+  // Avatar into a row with a different (or absent) imageUrl, and a sticky
+  // `true` would hide the acronym while no image is there to replace it.
+  const isImageLoaded = !!imageUrl && loadedImageUrl === imageUrl;
+
+  // v2 defaulted unknown variants to medium (switch default) — apps pass
+  // arbitrary strings through JS, so keep that safety despite the types.
+  const [avatarSize, fontSize] = SIZES[variant] ?? SIZES.medium;
+  const hashColors = getAvatarColor(name);
+  const backgroundColor = bgColor ?? hashColors.bgColor;
+  const textColor = fontColor ?? hashColors.fontColor;
+
+  const acronym = (name ?? "")
+    .split(/\s/)
+    .reduce((response, word) => response + word.slice(0, 1), "")
+    .slice(0, 2)
+    .toUpperCase();
+
+  const shape = {
+    backgroundColor,
+    borderRadius: avatarSize / 2,
+    height: avatarSize,
+    width: avatarSize,
+  };
+
+  return (
+    <View {...rest} style={[styles.container, shape, style]}>
+      {!isImageLoaded && (
+        <Typography color={textColor} style={{ fontSize }}>
+          {acronym}
+        </Typography>
+      )}
+      {!!imageUrl && (
+        <Image
+          accessibilityLabel={name}
+          source={{ uri: imageUrl }}
+          style={[
+            styles.image,
+            {
+              borderRadius: avatarSize / 2,
+              height: avatarSize,
+              width: avatarSize,
+            },
+            !isImageLoaded && styles.imageHidden,
+          ]}
+          onLoad={() => setLoadedImageUrl(imageUrl)}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  image: {
+    position: "absolute",
+  },
+  imageHidden: {
+    opacity: 0,
+  },
+});

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar, getAvatarColor, type AvatarProps } from "./Avatar";