@bigbinary/neetoui-rn 2.3.4 → 3.0.0

package/src/components/Header/Header.tsx

@@ -0,0 +1,114 @@
+import {
+  createElement,
+  isValidElement,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+import { View } from "react-native";
+import { LeftArrow } from "@bigbinary/neeto-icons-rn";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Skeleton } from "../Skeleton";
+import { Touchable } from "../Touchable";
+import { Typography } from "../Typography";
+import { BaseHeader } from "./BaseHeader";
+
+export type HeaderProps = {
+  title: string;
+  subTitle?: string;
+  /** Back chevron renders only when this is passed. */
+  onBack?: () => void;
+  /** Leading slot after the back chevron (menu button, workspace logo…). */
+  LeftSlot?: ComponentType | ReactNode;
+  /** Trailing slot (actions, overflow menus…). */
+  RightSlot?: ComponentType | ReactNode;
+  /** Shows the progress line under the header (v2 LineLoader spot). */
+  isLoading?: boolean;
+};
+
+// memo() and forwardRef() components are objects, not functions — rendering
+// one as a child throws "Objects are not valid as a React child", so the
+// slot has to be instantiated whenever it is a component type of any kind.
+const isComponentType = (slot: unknown): slot is ComponentType =>
+  typeof slot === "function" ||
+  (typeof slot === "object" &&
+    slot !== null &&
+    "$$typeof" in slot &&
+    !isValidElement(slot));
+
+const renderSlot = (Slot: ComponentType | ReactNode): ReactNode => {
+  if (Slot === null || Slot === undefined) return null;
+
+  return isComponentType(Slot) ? createElement(Slot) : Slot;
+};
+
+/**
+ * Navigation header (promoted from neeto-commons-rn). The commons version
+ * read useNavigation() itself; v3 is navigation-agnostic — apps (or the
+ * commons compat wrapper) pass onBack and fill the slots. The mark-all
+ * menu, hamburger and workspace logo become slot content.
+ */
+export const Header = ({
+  title,
+  subTitle,
+  onBack,
+  LeftSlot,
+  RightSlot,
+  isLoading = false,
+}: HeaderProps) => {
+  const { theme } = useUnistyles();
+
+  return (
+    <View>
+      <BaseHeader style={styles.container}>
+        {onBack && (
+          <Touchable
+            accessibilityLabel="Go back"
+            accessibilityRole="button"
+            hitSlop={moderateScale(8)}
+            style={styles.backButton}
+            onPress={onBack}
+          >
+            <LeftArrow
+              color={theme.colors.text.primary}
+              size={moderateScale(28)}
+            />
+          </Touchable>
+        )}
+        {renderSlot(LeftSlot)}
+        <View style={styles.titleBlock}>
+          <Typography numberOfLines={1} size="xl" weight="semibold">
+            {title}
+          </Typography>
+          {!!subTitle && (
+            <Typography numberOfLines={1} size="2xs" style={styles.subTitle}>
+              {subTitle}
+            </Typography>
+          )}
+        </View>
+        {renderSlot(RightSlot)}
+      </BaseHeader>
+      {isLoading && (
+        <Skeleton animated height={moderateScale(2)} variant="line" />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: moderateScale(8),
+    minHeight: moderateScale(48),
+    paddingHorizontal: moderateScale(16),
+  },
+  backButton: {
+    marginLeft: moderateScale(-8),
+  },
+  titleBlock: {
+    flex: 1,
+  },
+  subTitle: {
+    color: theme.colors.text.muted,
+  },
+}));

package/src/components/Header/ScreenHeader.tsx

@@ -0,0 +1,34 @@
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Typography } from "../Typography";
+import { BaseHeader } from "./BaseHeader";
+
+export type ScreenHeaderProps = {
+  title: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Large screen title header (promoted from neeto-commons-rn). Platform
+ * heights kept: 48 Android / 42 iOS.
+ */
+export const ScreenHeader = ({ title, style }: ScreenHeaderProps) => (
+  <BaseHeader style={[styles.container, style]}>
+    <Typography style={styles.title} variant="header">
+      {title}
+    </Typography>
+  </BaseHeader>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    height: Platform.OS === "android" ? moderateScale(48) : moderateScale(42),
+  },
+  title: {
+    includeFontPadding: false,
+    textAlignVertical: "center",
+    ...(Platform.OS === "android" ? { lineHeight: moderateScale(28) } : {}),
+  },
+});

package/src/components/Header/index.ts

@@ -0,0 +1,3 @@
+export { BaseHeader, type BaseHeaderProps } from "./BaseHeader";
+export { Header, type HeaderProps } from "./Header";
+export { ScreenHeader, type ScreenHeaderProps } from "./ScreenHeader";

package/src/components/Input/Input.tsx

@@ -0,0 +1,122 @@
+import { forwardRef, useState } from "react";
+import {
+  TextInput,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+import { Typography } from "../Typography";
+
+export type InputProps = Omit<TextInputProps, "editable"> & {
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+/** Forwards its ref to the underlying TextInput, so forms can focus it. */
+export const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      label,
+      error,
+      disabled = false,
+      containerStyle,
+      style,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    styles.useVariants({ focused: isFocused, error: !!error, disabled });
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        {!!label && (
+          <Typography size="xs" style={styles.label}>
+            {label}
+          </Typography>
+        )}
+        <TextInput
+          // Before the spread: the label is only a fallback, and setting it
+          // afterwards overwrote a caller's own accessibilityLabel with
+          // undefined whenever no label was passed.
+          accessibilityLabel={label}
+          {...rest}
+          editable={!disabled}
+          ref={ref}
+          style={[styles.input, style]}
+          onBlur={event => {
+            setIsFocused(false);
+            onBlur?.(event);
+          }}
+          onFocus={event => {
+            setIsFocused(true);
+            onFocus?.(event);
+          }}
+        />
+        {!!error && (
+          <Typography size="2xs" style={styles.error}>
+            {error}
+          </Typography>
+        )}
+      </View>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    gap: theme.spacing.xs,
+  },
+  label: {
+    color: theme.colors.text.secondary,
+    fontFamily: theme.fonts.medium,
+  },
+  input: {
+    borderColor: theme.colors.border.primary,
+    borderRadius: theme.radii.md,
+    borderWidth: 1,
+    color: theme.colors.text.primary,
+    fontFamily: theme.fonts.regular,
+    fontSize: theme.fontSizes.s,
+    paddingHorizontal: theme.spacing.md,
+    paddingVertical: theme.spacing.sm,
+    variants: {
+      focused: {
+        true: { borderColor: theme.colors.primary },
+        false: {},
+      },
+      error: {
+        true: { borderColor: theme.colors.danger },
+        false: {},
+      },
+      disabled: {
+        true: {
+          backgroundColor: theme.colors.background.secondary,
+          opacity: 0.5,
+        },
+        false: {},
+      },
+    },
+    // Error must win over focus when both are active.
+    compoundVariants: [
+      {
+        error: true,
+        focused: true,
+        styles: { borderColor: theme.colors.danger },
+      },
+    ],
+  },
+  error: {
+    color: theme.colors.danger,
+  },
+}));

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export { Input, type InputProps } from "./Input";

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,93 @@
+import { useEffect } from "react";
+import { View } from "react-native";
+import Animated, {
+  Easing,
+  interpolate,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import Svg, { Circle } from "react-native-svg";
+import { StyleSheet } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { palette } from "../../theme/palette";
+
+const LOADER_WIDTH = {
+  s: moderateScale(18),
+  m: moderateScale(24),
+  l: moderateScale(36),
+};
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+export type LoaderProps = {
+  // v2 default: the lightBlue400 accent, kept for parity.
+  color?: string;
+  size?: keyof typeof LOADER_WIDTH;
+};
+
+export const Loader = ({
+  color = palette.lightBlue400,
+  size = "s",
+}: LoaderProps) => {
+  const progress = useSharedValue(0);
+  const width = LOADER_WIDTH[size];
+  const strokeWidth = width * 0.15;
+  const radius = (width - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(2, { duration: 1500, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [progress]);
+
+  const animatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: -interpolate(
+      progress.value,
+      [0, 1, 2],
+      [0, circumference, circumference * 2]
+    ),
+  }));
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    width,
+    height: width,
+    alignItems: "center",
+    justifyContent: "center",
+    transform: [
+      { rotate: `${interpolate(progress.value, [0, 2], [0, 420])}deg` },
+    ],
+  }));
+
+  return (
+    <View style={styles.container} testID="neeto-loader">
+      <Animated.View style={animatedStyles}>
+        <Svg fill="none" height={width} width={width}>
+          <AnimatedCircle
+            animatedProps={animatedProps}
+            cx={width / 2}
+            cy={width / 2}
+            r={radius}
+            stroke={color}
+            strokeDasharray={circumference}
+            strokeLinecap="round"
+            strokeWidth={strokeWidth}
+          />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/components/Loader/index.ts

@@ -0,0 +1 @@
+export { Loader, type LoaderProps } from "./Loader";

package/src/components/NeetoUIProvider/NeetoUIProvider.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import { StyleSheet } from "react-native";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+import { configureNeetoUI } from "../../unistyles";
+import { Alert } from "../Alert";
+import { Toast } from "../Toast";
+
+export type NeetoUIProviderProps = {
+  children: ReactNode;
+};
+
+/**
+ * Single mount point for everything the library needs at app root.
+ *
+ * Unistyles registration runs before the first child render (idempotent) so
+ * lazily-resolved stylesheets see the themes. SafeAreaProvider feeds
+ * ParentView/BottomSheet insets, GestureHandlerRootView +
+ * BottomSheetModalProvider host BottomSheet portals, and the Toast host
+ * makes Toast.show work with no manual mounting — v2 required apps to
+ * render <Toast /> themselves; that footgun dies here.
+ */
+export const NeetoUIProvider = ({ children }: NeetoUIProviderProps) => {
+  // Idempotent fallback — the root entry already configures on import
+  // (src/unistyles-init.ts); this covers deep-import edge cases.
+  configureNeetoUI();
+
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <SafeAreaProvider>
+        <BottomSheetModalProvider>
+          {children}
+          <Alert />
+          <Toast />
+        </BottomSheetModalProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+};
+
+const styles = StyleSheet.create({ root: { flex: 1 } });

package/src/components/NeetoUIProvider/index.ts

@@ -0,0 +1 @@
+export { NeetoUIProvider, type NeetoUIProviderProps } from "./NeetoUIProvider";

package/src/components/OnBoarding/OnBoarding.tsx

@@ -0,0 +1,177 @@
+import { useRef, useState, type ComponentType, type ReactNode } from "react";
+import {
+  FlatList,
+  View,
+  useWindowDimensions,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet } from "react-native-unistyles";
+
+import { moderateScale } from "../../utils/scale";
+import { Button } from "../Button";
+import { Typography } from "../Typography";
+
+export type OnBoardingSlide = {
+  title: string;
+  description: string;
+  illustration?: ReactNode;
+};
+
+export type OnBoardingProps = {
+  /** Rendered top-center; receives `width` (v2 contract). */
+  appLogo: ComponentType<{ width: number }>;
+  slides: OnBoardingSlide[];
+  onComplete: () => void;
+  logoWidth?: number;
+};
+
+/**
+ * v2's OnBoarding sat on react-native-snap-carousel, which is unmaintained
+ * and dies in v3 — the pager is now an internal paging FlatList with the
+ * same dots. Public API is unchanged.
+ */
+export const OnBoarding = ({
+  appLogo: AppLogo,
+  slides,
+  onComplete,
+  logoWidth = moderateScale(150),
+}: OnBoardingProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef<FlatList<OnBoardingSlide>>(null);
+  const { width } = useWindowDimensions();
+  const { bottom } = useSafeAreaInsets();
+
+  const isLastSlide = activeIndex === slides.length - 1;
+
+  const handleNext = () => {
+    if (isLastSlide) {
+      onComplete();
+
+      return;
+    }
+    const next = activeIndex + 1;
+    setActiveIndex(next);
+    listRef.current?.scrollToIndex({ index: next, animated: true });
+  };
+
+  const handleMomentumEnd = (
+    event: NativeSyntheticEvent<NativeScrollEvent>
+  ) => {
+    const index = Math.round(event.nativeEvent.contentOffset.x / width);
+    setActiveIndex(Math.max(0, Math.min(index, slides.length - 1)));
+  };
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.logoContainer}>
+        <AppLogo width={logoWidth} />
+      </View>
+      <FlatList
+        horizontal
+        pagingEnabled
+        data={slides}
+        keyExtractor={(_item, index) => String(index)}
+        ref={listRef}
+        showsHorizontalScrollIndicator={false}
+        testID="onboarding-pager"
+        getItemLayout={(_data, index) => ({
+          length: width,
+          offset: width * index,
+          index,
+        })}
+        renderItem={({ item }) => (
+          <View style={[styles.slide, { width }]}>
+            <View style={styles.illustration}>{item.illustration}</View>
+            <View style={styles.slideText}>
+              <Typography size="4xl" style={styles.centered} weight="bold">
+                {item.title}
+              </Typography>
+              <Typography
+                size="l"
+                style={[styles.centered, styles.description]}
+              >
+                {item.description}
+              </Typography>
+            </View>
+          </View>
+        )}
+        onMomentumScrollEnd={handleMomentumEnd}
+      />
+      <View accessibilityLabel="Page indicator" style={styles.dots}>
+        {slides.map((_slide, index) => (
+          <View
+            key={index}
+            style={[styles.dot, index !== activeIndex && styles.inactiveDot]}
+          />
+        ))}
+      </View>
+      <View
+        style={[
+          styles.buttonContainer,
+          bottom === 0 && styles.buttonContainerInsetless,
+        ]}
+      >
+        <Button
+          label={isLastSlide ? "Get Started" : "Next"}
+          onPress={handleNext}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  root: {
+    backgroundColor: theme.colors.background.primary,
+    flex: 1,
+  },
+  logoContainer: {
+    alignItems: "center",
+  },
+  slide: {
+    flex: 1,
+    justifyContent: "space-between",
+  },
+  illustration: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+    marginHorizontal: moderateScale(24),
+    marginVertical: moderateScale(12),
+  },
+  slideText: {
+    alignItems: "center",
+    marginHorizontal: moderateScale(24),
+    marginVertical: moderateScale(12),
+  },
+  centered: {
+    textAlign: "center",
+  },
+  description: {
+    color: theme.colors.text.muted,
+  },
+  dots: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+    marginVertical: moderateScale(20),
+  },
+  dot: {
+    backgroundColor: theme.colors.text.primary,
+    borderRadius: moderateScale(5),
+    height: moderateScale(10),
+    marginHorizontal: moderateScale(4),
+    width: moderateScale(10),
+  },
+  inactiveDot: {
+    backgroundColor: theme.colors.palette.grey400,
+  },
+  buttonContainer: {
+    marginHorizontal: moderateScale(24),
+  },
+  buttonContainerInsetless: {
+    marginBottom: moderateScale(16),
+  },
+}));

package/src/components/OnBoarding/index.ts

@@ -0,0 +1,5 @@
+export {
+  OnBoarding,
+  type OnBoardingProps,
+  type OnBoardingSlide,
+} from "./OnBoarding";

package/src/components/ParentView/ParentView.tsx

@@ -0,0 +1,98 @@
+import {
+  Keyboard,
+  StatusBar,
+  TextInput,
+  type StatusBarStyle,
+  type ViewProps,
+} from "react-native";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import { Container } from "../Container";
+
+export type ParentViewProps = ViewProps & {
+  barStyle?: StatusBarStyle;
+  /** Screen background. Defaults to the active theme's primary background. */
+  backgroundColor?: string;
+  topInset?: boolean;
+  rightInset?: boolean;
+  leftInset?: boolean;
+  bottomInset?: boolean;
+  shouldDismissKeyboardOnTap?: boolean;
+};
+
+export const ParentView = ({
+  barStyle = "light-content",
+  children,
+  backgroundColor,
+  topInset = true,
+  rightInset = true,
+  leftInset = true,
+  bottomInset = true,
+  shouldDismissKeyboardOnTap = true,
+  style,
+  ...rest
+}: ParentViewProps) => {
+  const { theme } = useUnistyles();
+  const insets = useSafeAreaInsets();
+
+  const edges = [
+    ...(topInset ? (["top"] as const) : []),
+    ...(rightInset ? (["right"] as const) : []),
+    ...(leftInset ? (["left"] as const) : []),
+  ];
+
+  // v2 mapping: light-content status bar sits on the brand color, everything
+  // else on the plain background. background.primary rather than the literal
+  // `white` token, which stays #ffffff in both themes and would paint a white
+  // strip above a dark screen.
+  const statusBarColor =
+    barStyle === "light-content"
+      ? theme.colors.primary
+      : theme.colors.background.primary;
+
+  const contentBackground = backgroundColor ?? theme.colors.background.primary;
+
+  return (
+    <SafeAreaView
+      edges={edges}
+      style={[styles.fill, { backgroundColor: statusBarColor }]}
+    >
+      <StatusBar backgroundColor={statusBarColor} barStyle={barStyle} />
+      <Container
+        {...(shouldDismissKeyboardOnTap
+          ? {
+              onTouchStart: event => {
+                // TextInput.State is the only architecture-agnostic way to
+                // know a tap landed outside the focused input — Fabric event
+                // targets don't carry the Paper fiber internals. (Carried
+                // over from v2's New Architecture fix.)
+                const focusedInput = TextInput.State.currentlyFocusedInput();
+                if (focusedInput && event.target !== focusedInput) {
+                  Keyboard.dismiss();
+                }
+              },
+            }
+          : {})}
+        {...rest}
+        style={[
+          styles.fill,
+          { backgroundColor: contentBackground },
+          bottomInset && { paddingBottom: insets.bottom },
+          style,
+        ]}
+      >
+        {children}
+      </Container>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});