@scripso-homepad/ui 0.3.6 → 0.3.7

package/src/components/Button.tsx

@@ -1,48 +1,111 @@
-import { useRef, type ComponentRef } from "react";
+import { useRef, type ComponentRef, type ReactNode } from "react";
 import {
   StyleSheet,
   Text,
   TouchableOpacity,
+  View,
   type GestureResponderEvent,
   type StyleProp,
   type TextStyle,
   type ViewStyle,
 } from "react-native";
+import { ArrowUpRightIcon } from "../icons/ArrowUpRightIcon";
+import { colors, buttonTypography } from "../theme/tokens";
 import { useApplyWebClassName } from "../utils/useApplyWebClassName";
 
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
-export type ButtonSize = "small" | "medium" | "large";
+export type ButtonVariant = "white" | "primary" | "green" | "gray";
+export type ButtonSize = "lg" | "sm";
 
 export interface ButtonProps {
-  title: string;
+  title?: string;
+  children?: ReactNode;
   onPress: (event: GestureResponderEvent) => void;
   disabled?: boolean;
-  /** Visual style preset. */
   variant?: ButtonVariant;
-  /** Size preset. */
   size?: ButtonSize;
-  /** Additional container styles (works on web and native). */
+  showIcon?: boolean;
+  /** Custom icon inside the badge. Defaults to `ArrowUpRightIcon` when `showIcon` is true. */
+  icon?: ReactNode;
   style?: StyleProp<ViewStyle>;
-  /** Additional label styles (works on web and native). */
   textStyle?: StyleProp<TextStyle>;
-  /**
-   * CSS class names for the container (web: applied to the same DOM node as default styles).
-   * On native: ignored unless using NativeWind with cssInterop.
-   */
   className?: string;
-  /**
-   * CSS class names for the label (web).
-   * On native: ignored unless using NativeWind with cssInterop.
-   */
   textClassName?: string;
 }
 
+type VariantStyleSet = {
+  backgroundColor: string;
+  textColor: string;
+  iconBadgeBackgroundColor: string;
+  iconColor: string;
+};
+
+const variantConfig: Record<ButtonVariant, VariantStyleSet> = {
+  white: {
+    backgroundColor: colors.white,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy,
+  },
+  primary: {
+    backgroundColor: colors.navy,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.navy,
+  },
+  green: {
+    backgroundColor: colors.green,
+    textColor: colors.stormGray0,
+    iconBadgeBackgroundColor: colors.white,
+    iconColor: colors.green,
+  },
+  gray: {
+    backgroundColor: colors.stormGray50,
+    textColor: colors.slateBlue,
+    iconBadgeBackgroundColor: colors.stormGray150,
+    iconColor: colors.navy,
+  },
+};
+
+const sizeConfig = {
+  lg: {
+    borderRadius: 16,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingHorizontalCentered: 24,
+    minHeight: 52,
+    text: buttonTypography.lg,
+    iconContainerSize: 36,
+    iconContainerRadius: 12,
+    iconContainerPadding: 8,
+    iconSize: 20,
+  },
+  sm: {
+    borderRadius: 12,
+    paddingTop: 8,
+    paddingRight: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingHorizontalCentered: 16,
+    minHeight: 48,
+    text: buttonTypography.sm,
+    iconContainerSize: 32,
+    iconContainerRadius: 8,
+    iconContainerPadding: 8,
+    iconSize: 16,
+  },
+} as const;
+
 export function Button({
   title,
+  children,
   onPress,
   disabled = false,
   variant = "primary",
-  size = "medium",
+  size = "lg",
+  showIcon = false,
+  icon,
   style,
   textStyle,
   className,
@@ -50,23 +113,40 @@ export function Button({
 }: ButtonProps) {
   const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
   const textRef = useRef<ComponentRef<typeof Text>>(null);
+  const preset = variantConfig[variant];
+  const metrics = sizeConfig[size];
 
   useApplyWebClassName(containerRef, className);
   useApplyWebClassName(textRef, textClassName);
 
+  const label = typeof children !== "undefined" ? children : title;
+  const hasCustomChildren = typeof children !== "undefined";
+  const hasIcon = showIcon || icon != null;
+  const iconNode =
+    icon ?? <ArrowUpRightIcon size={metrics.iconSize} color={preset.iconColor} />;
+
   const containerStyle = [
     styles.base,
-    variantStyles[variant],
-    sizeStyles[size],
-    disabled && disabledVariantStyles[variant],
+    {
+      borderRadius: metrics.borderRadius,
+      backgroundColor: preset.backgroundColor,
+      minHeight: metrics.minHeight,
+      paddingTop: metrics.paddingTop,
+      paddingBottom: metrics.paddingBottom,
+      paddingLeft: hasIcon ? metrics.paddingLeft : metrics.paddingHorizontalCentered,
+      paddingRight: hasIcon ? metrics.paddingRight : metrics.paddingHorizontalCentered,
+    },
+    hasIcon ? styles.withIcon : styles.centered,
+    disabled && styles.disabled,
     style,
   ];
 
   const labelStyle = [
-    textBaseStyles.base,
-    textVariantStyles[variant],
-    textSizeStyles[size],
-    disabled && textDisabledStyles[variant],
+    styles.label,
+    metrics.text,
+    { color: preset.textColor },
+    !hasIcon && styles.labelCentered,
+    hasIcon && styles.labelWithIcon,
     textStyle,
   ];
 
@@ -80,119 +160,61 @@ export function Button({
       accessibilityRole="button"
       accessibilityState={{ disabled }}
     >
-      <Text ref={textRef} style={labelStyle}>
-        {title}
-      </Text>
+      {hasCustomChildren ? (
+        children
+      ) : (
+        <Text ref={textRef} style={labelStyle}>
+          {label}
+        </Text>
+      )}
+
+      {hasIcon ? (
+        <View
+          style={[
+            styles.iconContainer,
+            {
+              width: metrics.iconContainerSize,
+              height: metrics.iconContainerSize,
+              borderRadius: metrics.iconContainerRadius,
+              padding: metrics.iconContainerPadding,
+              backgroundColor: preset.iconBadgeBackgroundColor,
+            },
+          ]}
+        >
+          {iconNode}
+        </View>
+      ) : null}
     </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
   base: {
+    flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 8,
     borderWidth: 0,
   },
-});
-
-const variantStyles = StyleSheet.create({
-  primary: {
-    backgroundColor: "#2563eb",
-  },
-  secondary: {
-    backgroundColor: "#4b5563",
-  },
-  outline: {
-    backgroundColor: "transparent",
-    borderWidth: 1,
-    borderColor: "#2563eb",
-  },
-  ghost: {
-    backgroundColor: "transparent",
-  },
-});
-
-const sizeStyles = StyleSheet.create({
-  small: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    minWidth: 96,
-  },
-  medium: {
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    minWidth: 120,
-  },
-  large: {
-    paddingVertical: 16,
-    paddingHorizontal: 32,
-    minWidth: 160,
-  },
-});
-
-const disabledVariantStyles = StyleSheet.create({
-  primary: {
-    backgroundColor: "#93c5fd",
-    opacity: 0.7,
-  },
-  secondary: {
-    backgroundColor: "#9ca3af",
-    opacity: 0.7,
-  },
-  outline: {
-    borderColor: "#93c5fd",
-    opacity: 0.7,
-  },
-  ghost: {
-    opacity: 0.5,
-  },
-});
-
-const textBaseStyles = StyleSheet.create({
-  base: {
-    fontWeight: "600",
-  },
-});
-
-const textVariantStyles = StyleSheet.create({
-  primary: {
-    color: "#ffffff",
-  },
-  secondary: {
-    color: "#ffffff",
-  },
-  outline: {
-    color: "#2563eb",
+  centered: {
+    justifyContent: "center",
   },
-  ghost: {
-    color: "#2563eb",
+  withIcon: {
+    justifyContent: "space-between",
   },
-});
-
-const textSizeStyles = StyleSheet.create({
-  small: {
-    fontSize: 14,
+  disabled: {
+    opacity: 0.6,
   },
-  medium: {
-    fontSize: 16,
+  label: {},
+  labelCentered: {
+    textAlign: "center",
   },
-  large: {
-    fontSize: 18,
+  labelWithIcon: {
+    flex: 1,
+    flexShrink: 1,
+    marginRight: 8,
   },
-});
-
-const textDisabledStyles = StyleSheet.create({
-  primary: {
-    color: "#e5e7eb",
-  },
-  secondary: {
-    color: "#f3f4f6",
-  },
-  outline: {
-    color: "#93c5fd",
-  },
-  ghost: {
-    color: "#93c5fd",
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
   },
 });

package/src/components/CountryCodeSelector.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { CountryCodeSelector } from "./CountryCodeSelector";
+
+const meta = {
+  title: "Components/CountryCodeSelector",
+  component: CountryCodeSelector,
+} satisfies Meta<typeof CountryCodeSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <View style={styles.wrapper}>
+      <CountryCodeSelector />
+    </View>
+  ),
+};
+
+export const Controlled: Story = {
+  render: function ControlledCountryStory() {
+    const [code, setCode] = useState("AM");
+    return (
+      <View style={styles.wrapper}>
+        <CountryCodeSelector value={code} onValueChange={setCode} />
+      </View>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={styles.wrapper}>
+      <CountryCodeSelector value="AM" disabled />
+    </View>
+  ),
+};
+
+/** Opens upward when near the bottom of the viewport. */
+export const OpenNearBottom: Story = {
+  render: () => (
+    <View style={styles.bottomWrapper}>
+      <CountryCodeSelector />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: "flex-start",
+  },
+  bottomWrapper: {
+    flex: 1,
+    minHeight: 500,
+    justifyContent: "flex-end",
+    alignItems: "flex-start",
+    paddingBottom: 16,
+  },
+});

package/src/components/CountryCodeSelector.tsx

@@ -0,0 +1,273 @@
+import { useRef, useState, useLayoutEffect, type ComponentRef } from "react";
+import {
+  Dimensions,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import {
+  countries,
+  defaultCountry,
+  findCountry,
+  type Country,
+} from "../data/countries";
+import { ChevronDownIcon } from "../icons/ChevronDownIcon";
+import { colors, fontSize, fontWeight, radii, spacing, fonts } from "../theme/tokens";
+import { countryCodeToFlagEmoji } from "../utils/countryFlag";
+import {
+  COUNTRY_DROPDOWN_SCROLL_CLASS,
+  ensureCountryDropdownScrollStyles,
+} from "../utils/countryDropdownScrollStyles";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+
+const DROPDOWN_GAP = 10;
+const DROPDOWN_HEIGHT = 186;
+const DROPDOWN_PADDING = 8;
+const OPTION_GAP = 10;
+const OPTION_HEIGHT = 35;
+const TRIGGER_HEIGHT = 52;
+const CHEVRON_SIZE = 16;
+
+export interface CountryCodeSelectorProps {
+  value?: string;
+  onValueChange?: (countryCode: string) => void;
+  /** Country list (defaults to built-in list). */
+  options?: Country[];
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+type AnchorLayout = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+function resolveDropdownTop(anchor: AnchorLayout): number {
+  const windowHeight = Dimensions.get("window").height;
+  const topBelow = anchor.y + anchor.height + DROPDOWN_GAP;
+  const topAbove = anchor.y - DROPDOWN_GAP - DROPDOWN_HEIGHT;
+  const fitsBelow = topBelow + DROPDOWN_HEIGHT <= windowHeight;
+
+  if (fitsBelow) return topBelow;
+  if (topAbove >= 0) return topAbove;
+
+  return Math.max(0, Math.min(topBelow, windowHeight - DROPDOWN_HEIGHT));
+}
+
+export function CountryCodeSelector({
+  value = defaultCountry.code,
+  onValueChange,
+  options = countries,
+  disabled = false,
+  style,
+  className,
+}: CountryCodeSelectorProps) {
+  const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+  const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+  const scrollRef = useRef<ComponentRef<typeof ScrollView>>(null);
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<AnchorLayout | null>(null);
+
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(
+    scrollRef,
+    COUNTRY_DROPDOWN_SCROLL_CLASS,
+    open && Boolean(anchor),
+  );
+
+  useLayoutEffect(() => {
+    ensureCountryDropdownScrollStyles();
+  }, []);
+
+  const selected = findCountry(value);
+  const textColor = disabled ? colors.stormGray200 : colors.slateBlue;
+
+  function closeDropdown() {
+    setOpen(false);
+    setAnchor(null);
+  }
+
+  function handleOpen() {
+    if (disabled) return;
+
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height });
+      setOpen(true);
+    });
+  }
+
+  function handleSelect(code: string) {
+    onValueChange?.(code);
+    closeDropdown();
+  }
+
+  const dropdownTop = anchor ? resolveDropdownTop(anchor) : 0;
+
+  const optionList = options.map((item, index) => {
+    const isSelected = item.code === selected.code;
+    const isLast = index === options.length - 1;
+    return (
+      <Pressable
+        key={item.code}
+        accessibilityRole="button"
+        onPress={() => handleSelect(item.code)}
+        style={[
+          styles.option,
+          isSelected && styles.optionSelected,
+          !isLast && styles.optionSpacing,
+        ]}
+      >
+        <Text style={styles.flag}>{countryCodeToFlagEmoji(item.code)}</Text>
+        <Text style={styles.optionDialCode}>{item.dialCode}</Text>
+      </Pressable>
+    );
+  });
+
+  const dropdownList = (
+    <ScrollView
+      ref={scrollRef}
+      style={styles.dropdownScroll}
+      contentContainerStyle={styles.dropdownContent}
+      keyboardShouldPersistTaps="handled"
+      showsVerticalScrollIndicator
+      bounces={false}
+      nestedScrollEnabled
+    >
+      {optionList}
+    </ScrollView>
+  );
+
+  return (
+    <View ref={wrapperRef} style={[styles.root, style]}>
+      <Pressable
+        ref={triggerRef}
+        accessibilityRole="button"
+        disabled={disabled}
+        onPress={handleOpen}
+        style={[
+          styles.trigger,
+          disabled ? styles.triggerDisabled : styles.triggerEnabled,
+          Platform.OS === "web" ? styles.triggerWeb : null,
+        ]}
+      >
+        <Text style={styles.flag}>{countryCodeToFlagEmoji(selected.code)}</Text>
+        <Text style={[styles.dialCode, { color: textColor }]}>{selected.dialCode}</Text>
+        <ChevronDownIcon size={CHEVRON_SIZE} color={colors.stormGray100} />
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={closeDropdown}
+      >
+        <Pressable style={styles.overlay} onPress={closeDropdown}>
+          {anchor ? (
+            <View
+              style={[
+                styles.dropdown,
+                {
+                  top: dropdownTop,
+                  left: anchor.x,
+                  width: anchor.width,
+                },
+              ]}
+            >
+              {dropdownList}
+            </View>
+          ) : null}
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: "flex-start",
+    flexShrink: 0,
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    flexGrow: 0,
+    flexShrink: 0,
+    height: TRIGGER_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    padding: spacing.lg,
+    gap: spacing.sm,
+  },
+  triggerEnabled: {
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+  },
+  triggerDisabled: {
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.stormGray50,
+  },
+  triggerWeb: {
+    width: "max-content" as ViewStyle["width"],
+  },
+  flag: {
+    fontSize: 18,
+    lineHeight: 22,
+  },
+  dialCode: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: "transparent",
+  },
+  dropdown: {
+    position: "absolute",
+    height: DROPDOWN_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: DROPDOWN_PADDING,
+    overflow: "hidden",
+  },
+  dropdownScroll: {
+    flex: 1,
+  },
+  dropdownContent: {
+    flexGrow: 1,
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: OPTION_HEIGHT,
+    borderRadius: radii.sm,
+    padding: spacing.sm,
+    gap: spacing.sm,
+  },
+  optionSpacing: {
+    marginBottom: OPTION_GAP,
+  },
+  optionSelected: {
+    backgroundColor: colors.countrySelectorSelectedBg,
+  },
+  optionDialCode: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.md,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.slateBlue,
+  },
+});