@bigbinary/neetoui-rn 2.3.4 → 3.0.0

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,76 @@
+import { Text, type TextProps } from "react-native";
+import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
+
+type TypographyVariants = UnistylesVariants<typeof styles>;
+
+export type TypographyProps = TextProps &
+  TypographyVariants & {
+    color?: string;
+  };
+
+export const Typography = ({
+  variant,
+  size,
+  weight,
+  color,
+  style,
+  children,
+  ...rest
+}: TypographyProps) => {
+  styles.useVariants({ variant, size, weight });
+
+  return (
+    <Text {...rest} style={[styles.text, !!color && { color }, style]}>
+      {children}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.colors.text.primary,
+    fontFamily: theme.fonts.regular,
+    fontSize: theme.fontSizes.s,
+    variants: {
+      variant: {
+        body: {
+          color: theme.colors.text.muted,
+        },
+        header: {
+          fontFamily: theme.fonts.semibold,
+          fontSize: theme.fontSizes["3xl"],
+        },
+        modalHeader: {
+          fontFamily: theme.fonts.semibold,
+          fontSize: theme.fontSizes.xl,
+        },
+        subtext: {
+          fontSize: theme.fontSizes["2xs"],
+        },
+        default: {},
+      },
+      size: {
+        "4xs": { fontSize: theme.fontSizes["4xs"] },
+        "3xs": { fontSize: theme.fontSizes["3xs"] },
+        "2xs": { fontSize: theme.fontSizes["2xs"] },
+        xs: { fontSize: theme.fontSizes.xs },
+        s: { fontSize: theme.fontSizes.s },
+        m: { fontSize: theme.fontSizes.m },
+        l: { fontSize: theme.fontSizes.l },
+        xl: { fontSize: theme.fontSizes.xl },
+        "2xl": { fontSize: theme.fontSizes["2xl"] },
+        "3xl": { fontSize: theme.fontSizes["3xl"] },
+        "4xl": { fontSize: theme.fontSizes["4xl"] },
+        "5xl": { fontSize: theme.fontSizes["5xl"] },
+        default: {},
+      },
+      weight: {
+        regular: { fontFamily: theme.fonts.regular },
+        medium: { fontFamily: theme.fonts.medium },
+        semibold: { fontFamily: theme.fonts.semibold },
+        bold: { fontFamily: theme.fonts.bold },
+        default: {},
+      },
+    },
+  },
+}));

package/src/components/Typography/index.ts

@@ -0,0 +1 @@
+export { Typography, type TypographyProps } from "./Typography";

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useDebounce } from "./useDebounce";
+export { useNeetoTheme } from "./useNeetoTheme";
+export { useRefreshByUser } from "./useRefreshByUser";

package/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/useNeetoTheme.ts

@@ -0,0 +1,10 @@
+import { useUnistyles } from "react-native-unistyles";
+
+import { type NeetoTheme } from "../theme/tokens";
+
+/**
+ * Reactive, fully-typed access to the active theme for app code:
+ * `theme.colors.border.primary`, `theme.spacing.md`, … Re-renders on
+ * theme change (adaptive dark mode included).
+ */
+export const useNeetoTheme = (): NeetoTheme => useUnistyles().theme;

package/src/hooks/useRefreshByUser.ts

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+export function useRefreshByUser(refetch: () => Promise<unknown> | unknown) {
+  const [isRefetchingByUser, setIsRefetchingByUser] = useState(false);
+
+  async function refetchByUser() {
+    setIsRefetchingByUser(true);
+
+    try {
+      await refetch();
+    } finally {
+      setIsRefetchingByUser(false);
+    }
+  }
+
+  return { isRefetchingByUser, refetchByUser };
+}

package/src/index.ts

@@ -0,0 +1,68 @@
+// Must stay the first import — see unistyles-init.ts.
+import "./unistyles-init";
+
+export { Alert, type AlertButton, type AlertParams } from "./components/Alert";
+export { Avatar, getAvatarColor, type AvatarProps } from "./components/Avatar";
+export {
+  BottomSheet,
+  type BottomSheetProps,
+  type BottomSheetContentRowProps,
+} from "./components/BottomSheet";
+export {
+  BottomSheetMenu,
+  type BottomSheetMenuItem,
+  type BottomSheetMenuProps,
+} from "./components/BottomSheetMenu";
+export { Button, type ButtonProps } from "./components/Button";
+export {
+  ChatInput,
+  OPTION_TYPES,
+  convertMentionsToHTMLAndPlainText,
+  type ChatInputOption,
+  type ChatInputPayload,
+  type ChatInputProps,
+  type ChatInputRef,
+  type MentionSuggestion,
+} from "./components/ChatInput";
+export { CheckBox, type CheckBoxProps } from "./components/CheckBox";
+export { FlashList, type FlashListProps } from "./components/FlashList";
+export { Skeleton, type SkeletonProps } from "./components/Skeleton";
+export { Toast, defaultToasterConfig } from "./components/Toast";
+export { Container, type ContainerProps } from "./components/Container";
+export { Divider, type DividerProps } from "./components/Divider";
+export { EmptyView, type EmptyViewProps } from "./components/EmptyView";
+export {
+  BaseHeader,
+  Header,
+  ScreenHeader,
+  type BaseHeaderProps,
+  type HeaderProps,
+  type ScreenHeaderProps,
+} from "./components/Header";
+export { Input, type InputProps } from "./components/Input";
+export { Loader, type LoaderProps } from "./components/Loader";
+export {
+  NeetoUIProvider,
+  type NeetoUIProviderProps,
+} from "./components/NeetoUIProvider";
+export {
+  OnBoarding,
+  type OnBoardingProps,
+  type OnBoardingSlide,
+} from "./components/OnBoarding";
+export { ParentView, type ParentViewProps } from "./components/ParentView";
+export { RadioButton, type RadioButtonProps } from "./components/RadioButton";
+export { ScrollView, type ScrollViewProps } from "./components/ScrollView";
+export { SearchBar, type SearchBarProps } from "./components/SearchBar";
+export { TextWithUrl, type TextWithUrlProps } from "./components/TextWithUrl";
+export { Touchable, type TouchableProps } from "./components/Touchable";
+export { Typography, type TypographyProps } from "./components/Typography";
+export { useDebounce, useNeetoTheme, useRefreshByUser } from "./hooks";
+export {
+  breakpoints,
+  darkTheme,
+  lightTheme,
+  type NeetoTheme,
+} from "./theme/tokens";
+export { configureNeetoUI } from "./unistyles";
+export { getShadowStyles, isValidEmail, moderateScale } from "./utils";

package/src/theme/palette.generated.ts

@@ -0,0 +1,141 @@
+// GENERATED FILE — do not edit by hand.
+// Source: web neetoUI SCSS tokens (src/styles/abstracts/_variables.scss + _theme.scss).
+// Regenerate with: yarn generate:tokens
+
+export const webPalette = {
+  light: {
+    white: "#ffffff",
+    black: "#0c111d",
+    gray800: "#101828",
+    gray700: "#1d2939",
+    gray600: "#344054",
+    gray500: "#87929d",
+    gray400: "#c2c8cc",
+    gray300: "#d8dcde",
+    gray200: "#e9ebed",
+    gray100: "#f6f7f8",
+    gray50: "#fafafa",
+    primary800: "#006653",
+    primary600: "#007a64",
+    primary500: "#008068",
+    primary100: "#e1f3ee",
+    primary50: "#f0f9f7",
+    accent800: "#095aba",
+    accent600: "#0d66d0",
+    accent500: "#1473e6",
+    accent100: "#e6f4ff",
+    accent50: "#eff8ff",
+    success800: "#01795d",
+    success600: "#018d6d",
+    success500: "#02a27c",
+    success100: "#ebfffa",
+    error800: "#bb121a",
+    error600: "#c9252d",
+    error500: "#d7373f",
+    error100: "#feecf0",
+    info800: "#095aba",
+    info600: "#0d66d0",
+    info500: "#1473e6",
+    info100: "#e2f2ff",
+    warning800: "#bd640d",
+    warning600: "#cb6f10",
+    warning500: "#da7b11",
+    warning100: "#fbf2e1",
+    pastelSilver: "#e8e9ed",
+    pastelRed: "#ffe5e5",
+    pastelYellow: "#fef3c5",
+    pastelGreen: "#d3f9e8",
+    pastelBlue: "#ecf4ff",
+    pastelPurple: "#eeebff",
+    pastelPink: "#fde2f1",
+  },
+  dark: {
+    white: "#121212",
+    black: "#e0e0e0",
+    gray800: "#c8c8c8",
+    gray700: "#a2a2a2",
+    gray600: "#7c7c7c",
+    gray500: "#5c5c5c",
+    gray400: "#494949",
+    gray300: "#393939",
+    gray200: "#2c2c2c",
+    gray100: "#1e1e1e",
+    gray50: "#0a0a0a",
+    primary800: "#00e0b7",
+    primary600: "#06cf9c",
+    primary500: "#00a884",
+    primary100: "#003d31",
+    primary50: "#002921",
+    accent800: "#8ebdf5",
+    accent600: "#69a7f2",
+    accent500: "#4390ef",
+    accent100: "#111a2c",
+    accent50: "#0b111d",
+    success800: "#00e0b7",
+    success600: "#06cf9c",
+    success500: "#00a884",
+    success100: "#162312",
+    error800: "#f76d74",
+    error600: "#ec5b62",
+    error500: "#e34850",
+    error100: "#2c1618",
+    info800: "#8ebdf5",
+    info600: "#69a7f2",
+    info500: "#4390ef",
+    info100: "#111a2c",
+    warning800: "#f9a43f",
+    warning600: "#f29423",
+    warning500: "#e68619",
+    warning100: "#2b2111",
+    pastelSilver: "#40424a",
+    pastelRed: "#732d2d",
+    pastelYellow: "#826414",
+    pastelGreen: "#327d6e",
+    pastelBlue: "#2d5078",
+    pastelPurple: "#4b3c7d",
+    pastelPink: "#7d325a",
+  },
+};
+
+export const webRadii = {
+  none: 0,
+  sm: 3,
+  "": 5,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  full: 999,
+};
+
+export const webFontSizes = {
+  xxs: 10,
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 32,
+  "4xl": 48,
+};
+
+export const webFontWeights = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900,
+};
+
+export const webLineHeights = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+};

package/src/theme/palette.ts

@@ -0,0 +1,34 @@
+// Raw color ramps carried over from the v2 theme. Values are the parity source
+// until the web-Tailwind token-generation script lands (Phase A spike item).
+export const palette = {
+  white: "#ffffff",
+  base: "#008068",
+  danger: "#D7373F",
+  success: "#018d6d",
+  menubackground: "#F6F6FA",
+
+  grey: "#828282",
+  grey100: "#f8f9f9",
+  grey200: "#e9ebed",
+  grey300: "#d8dcde",
+  grey400: "#c2c8cc",
+  grey500: "#87929d",
+  grey600: "#68737d",
+  grey700: "#2f3941",
+  grey800: "#1f1f1f",
+
+  darkBlue100: "#0B4885",
+
+  lightBlue100: "#EAF3FC",
+  lightBlue400: "#4558F9",
+
+  purple100: "#F2F4FF",
+  purple200: "#ECF4FF",
+  purple500: "#4557F8",
+  purple700: "#342DF4",
+
+  green500: "#34C759",
+  green600: "#33C8A0",
+  green700: "#00BA88",
+  green800: "#00956D",
+};

package/src/theme/tokens.ts

@@ -0,0 +1,205 @@
+import { moderateScale } from "../utils/scale";
+import { palette } from "./palette";
+import { webPalette } from "./palette.generated";
+
+const fonts = {
+  regular: "SFProText-Regular",
+  medium: "SFProText-Medium",
+  semibold: "SFProText-Semibold",
+  bold: "SFProText-Bold",
+};
+
+// Size scale absorbs v2's react-native-size-matters usage: values are
+// moderateScale'd once at startup, exactly as the v2 theme did.
+const fontSizes = {
+  "4xs": moderateScale(10),
+  "3xs": moderateScale(11),
+  "2xs": moderateScale(12),
+  xs: moderateScale(13),
+  s: moderateScale(14),
+  m: moderateScale(15),
+  l: moderateScale(16),
+  xl: moderateScale(17),
+  "2xl": moderateScale(18),
+  "3xl": moderateScale(20),
+  "4xl": moderateScale(22),
+  "5xl": moderateScale(30),
+};
+
+const spacing = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  "2xl": 32,
+  "3xl": 48,
+};
+
+const radii = {
+  none: 0,
+  sm: 2,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  full: 9999,
+};
+
+// Token elevations absorb v2's getShadowStyles util.
+const elevation = {
+  none: {},
+  low: {
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.18,
+    shadowRadius: 1,
+    elevation: 2,
+  },
+  medium: {
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 4,
+  },
+  high: {
+    shadowColor: "#000000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 6,
+    elevation: 8,
+  },
+};
+
+export const breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+};
+
+// Dark counterpart of the raw v2 ramp. The web library flips EVERY
+// variable in .neeto-ui-theme--dark — including the gray ramp, whose
+// meaning inverts (gray800 becomes light text on dark surfaces). A dark
+// theme that keeps the light ramp glares: light-grey borders and
+// unreadable muted text on #121212 (the original v3 dark-mode bug).
+const darkPalette: typeof palette = {
+  white: webPalette.dark.white,
+  base: webPalette.dark.primary500,
+  danger: webPalette.dark.error500,
+  success: webPalette.dark.success500,
+  menubackground: webPalette.dark.gray100,
+
+  grey: webPalette.dark.gray600,
+  grey100: webPalette.dark.gray100,
+  grey200: webPalette.dark.gray200,
+  grey300: webPalette.dark.gray300,
+  grey400: webPalette.dark.gray400,
+  grey500: webPalette.dark.gray500,
+  grey600: webPalette.dark.gray600,
+  grey700: webPalette.dark.gray700,
+  grey800: webPalette.dark.gray800,
+
+  darkBlue100: webPalette.dark.accent800,
+
+  lightBlue100: webPalette.dark.accent100,
+  lightBlue400: webPalette.dark.accent500,
+
+  // v2's purple is an accent role; the web dark theme's accent ramp is
+  // its closest semantic counterpart.
+  purple100: webPalette.dark.accent50,
+  purple200: webPalette.dark.accent100,
+  purple500: webPalette.dark.accent500,
+  purple700: webPalette.dark.accent600,
+
+  green500: webPalette.dark.success600,
+  green600: webPalette.dark.success600,
+  green700: webPalette.dark.success500,
+  green800: webPalette.dark.primary600,
+};
+
+export const lightTheme = {
+  colors: {
+    white: "#ffffff",
+    primary: palette.base,
+    danger: palette.danger,
+    success: palette.success,
+    text: {
+      primary: "#2F3941",
+      secondary: "#49545C",
+      muted: palette.grey500,
+      inverse: palette.white,
+    },
+    background: {
+      primary: palette.white,
+      secondary: palette.menubackground,
+      oldLace: "#FDF6E5",
+    },
+    border: {
+      primary: "#E9EBED",
+      secondary: "#C2C8CC",
+    },
+    toast: {
+      success: "#00BA88",
+      error: "#F56A58",
+      info: "#276EF1",
+      warning: "#F3CD82",
+    },
+    palette,
+    // The complete web neetoUI ramp (44 tokens, generated — see
+    // scripts/generate-tokens.mjs). Theme-aware: reading
+    // theme.colors.web.gray600 yields the dark value in dark mode, which
+    // importing webPalette directly would not. This is the source of truth
+    // for new code; `palette` above is the frozen v2 subset.
+    web: webPalette.light,
+  },
+  fonts,
+  fontSizes,
+  spacing,
+  radii,
+  elevation,
+};
+
+export type NeetoTheme = typeof lightTheme;
+
+// Dark palette generated from the web neetoUI dark theme
+// (scripts/generate-tokens.mjs). oldLace has no web equivalent — kept as a
+// hand-tuned dark approximation.
+export const darkTheme: NeetoTheme = {
+  ...lightTheme,
+  colors: {
+    ...lightTheme.colors,
+    white: "#ffffff",
+    primary: webPalette.dark.primary500,
+    danger: webPalette.dark.error500,
+    success: webPalette.dark.success500,
+    text: {
+      primary: webPalette.dark.gray800,
+      secondary: webPalette.dark.gray700,
+      // gray600, not gray500: the dark gray500 (#5c5c5c) is unreadable
+      // on #121212 — web uses the 600+ range for muted copy.
+      muted: webPalette.dark.gray600,
+      inverse: webPalette.dark.white,
+    },
+    background: {
+      primary: webPalette.dark.white,
+      secondary: webPalette.dark.gray100,
+      oldLace: "#2F2A1D",
+    },
+    border: {
+      primary: webPalette.dark.gray300,
+      secondary: webPalette.dark.gray400,
+    },
+    toast: {
+      success: webPalette.dark.success500,
+      error: webPalette.dark.error500,
+      info: webPalette.dark.info500,
+      warning: webPalette.dark.warning500,
+    },
+    palette: darkPalette,
+    web: webPalette.dark,
+  },
+};

package/src/types/neeto-icons-rn.d.ts

@@ -0,0 +1,33 @@
+// @bigbinary/neeto-icons-rn ships no TypeScript types (and an exports map
+// whose "." entry is an extensionless directory only the metro resolver
+// accepts). Minimal ambient typing until the icons package ships its own.
+declare module "@bigbinary/neeto-icons-rn" {
+  import { type ComponentType } from "react";
+
+  export type NeetoIconProps = {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+  };
+
+  export const Attachment: ComponentType<NeetoIconProps>;
+  export const BookOpen: ComponentType<NeetoIconProps>;
+  export const CannedResponses: ComponentType<NeetoIconProps>;
+  export const ChatBubble: ComponentType<NeetoIconProps>;
+  export const Check: ComponentType<NeetoIconProps>;
+  export const Delete: ComponentType<NeetoIconProps>;
+  export const Down: ComponentType<NeetoIconProps>;
+  export const Edit: ComponentType<NeetoIconProps>;
+  export const Expand: ComponentType<NeetoIconProps>;
+  export const Forward: ComponentType<NeetoIconProps>;
+  export const LeftArrow: ComponentType<NeetoIconProps>;
+  export const Minimize: ComponentType<NeetoIconProps>;
+  export const Notes: ComponentType<NeetoIconProps>;
+  export const Radio: ComponentType<NeetoIconProps>;
+  export const SendPlane: ComponentType<NeetoIconProps>;
+  export const RadioInactive: ComponentType<NeetoIconProps>;
+  export const Checkbox: ComponentType<NeetoIconProps>;
+  export const CheckboxInactive: ComponentType<NeetoIconProps>;
+  export const Search: ComponentType<NeetoIconProps>;
+  export const Close: ComponentType<NeetoIconProps>;
+}

package/src/unistyles-init.ts

@@ -0,0 +1,16 @@
+// Imported for its side effect as src/index.ts's FIRST import.
+//
+// Unistyles hard-requires StyleSheet.configure to run before any
+// StyleSheet.create, and every component module calls create at module
+// scope. Configuring inside NeetoUIProvider's render loses that race the
+// moment a bundler evaluates the library module before the provider
+// renders — release-mode inline requires on native and ESM import
+// hoisting on web both do exactly that. Evaluating the root entry
+// therefore registers the themes itself; the provider's explicit call
+// stays as an idempotent fallback for deep-import edge cases.
+//
+// This file (and only this file) is declared in package.json
+// "sideEffects" so bundlers never tree-shake the bare import away.
+import { configureNeetoUI } from "./unistyles";
+
+configureNeetoUI();

package/src/unistyles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native-unistyles";
+
+import { breakpoints, darkTheme, lightTheme } from "./theme/tokens";
+
+type AppThemes = {
+  light: typeof lightTheme;
+  dark: typeof darkTheme;
+};
+
+type AppBreakpoints = typeof breakpoints;
+
+declare module "react-native-unistyles" {
+  export interface UnistylesThemes extends AppThemes {}
+  export interface UnistylesBreakpoints extends AppBreakpoints {}
+}
+
+let isConfigured = false;
+
+/**
+ * One-time Unistyles registration, idempotent. Runs automatically when the
+ * library root is imported (src/unistyles-init.ts) because Unistyles
+ * requires configure() before any module-scope StyleSheet.create;
+ * NeetoUIProvider and tests may call it again safely.
+ */
+export const configureNeetoUI = () => {
+  if (isConfigured) return;
+  isConfigured = true;
+
+  StyleSheet.configure({
+    themes: { light: lightTheme, dark: darkTheme },
+    breakpoints,
+    settings: { adaptiveThemes: true },
+  });
+};