@scripso-homepad/ui 0.3.6 → 0.3.7

package/src/components/Input.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { EyeIcon } from "../icons/EyeIcon";
+import { KeyIcon } from "../icons/KeyIcon";
+import { Input } from "./Input";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  args: {
+    label: "Label",
+    placeholder: "placeholder",
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithIcons: Story = {
+  args: {
+    leftIcon: <KeyIcon />,
+    rightIcon: <EyeIcon />,
+    placeholder: "placeholder",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    leftIcon: <KeyIcon />,
+    rightIcon: <EyeIcon />,
+    value: "invalid",
+    error: "Invalid value",
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    leftIcon: <KeyIcon />,
+    rightIcon: <EyeIcon />,
+    hint: "Use at least 8 characters",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    leftIcon: <KeyIcon />,
+    rightIcon: <EyeIcon />,
+    value: "placeholder",
+    editable: false,
+  },
+};
+
+/** Figma state row — default, focus, error, disabled */
+export const FigmaStates: Story = {
+  render: () => (
+    <View style={styles.column}>
+      <Input
+        label="Label"
+        leftIcon={<KeyIcon />}
+        rightIcon={<EyeIcon />}
+        placeholder="placeholder"
+      />
+      <Input
+        label="Label"
+        leftIcon={<KeyIcon />}
+        rightIcon={<EyeIcon />}
+        placeholder="placeholder"
+        autoFocus
+      />
+      <Input
+        label="Label"
+        leftIcon={<KeyIcon />}
+        rightIcon={<EyeIcon />}
+        placeholder="placeholder"
+        error="Error message"
+      />
+      <Input
+        label="Label"
+        leftIcon={<KeyIcon />}
+        rightIcon={<EyeIcon />}
+        placeholder="placeholder"
+        editable={false}
+      />
+    </View>
+  ),
+};
+
+export const Controlled: Story = {
+  render: function ControlledInputStory() {
+    const [value, setValue] = useState("");
+    return (
+      <View style={styles.wrapper}>
+        <Input
+          label="Label"
+          leftIcon={<KeyIcon />}
+          rightIcon={<EyeIcon />}
+          placeholder="placeholder"
+          value={value}
+          onChangeText={setValue}
+        />
+      </View>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: 360,
+  },
+  column: {
+    width: 360,
+    gap: 16,
+  },
+});

package/src/components/Input.tsx

@@ -0,0 +1,177 @@
+import {
+  cloneElement,
+  isValidElement,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type TextInputFocusEventData,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import {
+  getInputFieldStyles,
+  inputFieldMetrics,
+  INPUT_ICON_SIZE,
+  resolveInputVisualState,
+} from "../theme/input";
+import { colors, spacing } from "../theme/tokens";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+import { Label } from "./Label";
+
+type InputIconProps = {
+  size?: number;
+  color?: string;
+};
+
+function renderInputIcon(icon: ReactNode, color: string) {
+  if (!icon) return null;
+
+  if (isValidElement<InputIconProps>(icon)) {
+    return cloneElement(icon, {
+      size: icon.props.size ?? INPUT_ICON_SIZE,
+      color: icon.props.color ?? color,
+    });
+  }
+
+  return icon;
+}
+
+export interface InputProps extends TextInputProps {
+  /** Optional field label rendered above the input. */
+  label?: string;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  /** Validation or helper error message. Shown instead of `hint` when set. */
+  error?: string;
+  /** Helper text shown below the input when there is no error. */
+  hint?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  errorClassName?: string;
+  hintClassName?: string;
+}
+
+export function Input({
+  label,
+  leftIcon,
+  rightIcon,
+  error,
+  hint,
+  containerStyle,
+  style,
+  className,
+  labelClassName,
+  inputClassName,
+  errorClassName,
+  hintClassName,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...props
+}: InputProps) {
+  const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  const helperRef = useRef<ComponentRef<typeof Text>>(null);
+  const [focused, setFocused] = useState(false);
+
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+
+  const isDisabled = editable === false;
+  const visualState = resolveInputVisualState({
+    focused,
+    error: Boolean(error),
+    disabled: isDisabled,
+  });
+  const fieldStyles = getInputFieldStyles(visualState);
+  const iconColor = fieldStyles.icon;
+
+  function handleFocus(event: NativeSyntheticEvent<TextInputFocusEventData>) {
+    setFocused(true);
+    onFocus?.(event);
+  }
+
+  function handleBlur(event: NativeSyntheticEvent<TextInputFocusEventData>) {
+    setFocused(false);
+    onBlur?.(event);
+  }
+
+  const helperMessage = error ?? hint;
+
+  return (
+    <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
+      {label ? (
+        <Label disabled={isDisabled} className={labelClassName}>
+          {label}
+        </Label>
+      ) : null}
+      <View style={fieldStyles.outline}>
+        <View style={[inputFieldMetrics.container, fieldStyles.container]}>
+          {leftIcon ? (
+            <View style={styles.iconSlot}>{renderInputIcon(leftIcon, iconColor)}</View>
+          ) : null}
+          <TextInput
+            ref={inputRef}
+            style={[
+              inputFieldMetrics.input,
+              fieldStyles.text,
+              style,
+            ]}
+            placeholderTextColor={fieldStyles.placeholder}
+            editable={editable}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            accessibilityState={{ disabled: isDisabled }}
+            {...props}
+          />
+          {rightIcon ? (
+            <View style={styles.iconSlot}>{renderInputIcon(rightIcon, iconColor)}</View>
+          ) : null}
+        </View>
+      </View>
+      {helperMessage ? (
+        <Text ref={helperRef} style={error ? styles.error : styles.hint}>
+          {helperMessage}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: spacing.sm,
+  },
+  iconSlot: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError,
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300,
+  },
+});

package/src/components/Label.tsx

@@ -0,0 +1,56 @@
+import { useRef, type ComponentRef, type ReactNode } from "react";
+import {
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type TextProps,
+  type TextStyle,
+} from "react-native";
+import { colors, labelTypography } from "../theme/tokens";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+
+export interface LabelProps extends TextProps {
+  children: ReactNode;
+  /** Render as a required field indicator. */
+  required?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<TextStyle>;
+  className?: string;
+}
+
+export function Label({
+  children,
+  required = false,
+  disabled = false,
+  style,
+  className,
+  ...props
+}: LabelProps) {
+  const ref = useRef<ComponentRef<typeof Text>>(null);
+  useApplyWebClassName(ref, className);
+
+  return (
+    <Text
+      ref={ref}
+      style={[styles.label, disabled && styles.labelDisabled, style]}
+      accessibilityRole="text"
+      {...props}
+    >
+      {children}
+      {required ? <Text style={styles.required}> *</Text> : null}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    ...labelTypography,
+    color: colors.slateBlue,
+  },
+  labelDisabled: {
+    color: colors.stormGray400,
+  },
+  required: {
+    color: colors.inputError,
+  },
+});

package/src/components/PhoneInput.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { PhoneInput } from "./PhoneInput";
+
+const meta = {
+  title: "Components/PhoneInput",
+  component: PhoneInput,
+  args: {
+    label: "Label",
+    placeholder: "placeholder",
+  },
+} satisfies Meta<typeof PhoneInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithError: Story = {
+  args: {
+    error: "Invalid phone number",
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    hint: "Include your area code",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: "placeholder",
+    editable: false,
+  },
+};
+
+export const FigmaStates: Story = {
+  render: () => (
+    <View style={styles.column}>
+      <PhoneInput label="Label" placeholder="placeholder" />
+      <PhoneInput label="Label" placeholder="placeholder" autoFocus />
+      <PhoneInput
+        label="Label"
+        placeholder="placeholder"
+        error="Error message"
+      />
+      <PhoneInput
+        label="Label"
+        placeholder="placeholder"
+        editable={false}
+      />
+    </View>
+  ),
+};
+
+export const Controlled: Story = {
+  render: function ControlledPhoneStory() {
+    const [countryCode, setCountryCode] = useState("AM");
+    const [phone, setPhone] = useState("");
+    return (
+      <View style={styles.wrapper}>
+        <PhoneInput
+          label="Label"
+          placeholder="placeholder"
+          countryCode={countryCode}
+          onCountryCodeChange={setCountryCode}
+          value={phone}
+          onChangeText={setPhone}
+        />
+      </View>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: 360,
+  },
+  column: {
+    width: 360,
+    gap: 16,
+  },
+});

package/src/components/PhoneInput.tsx

@@ -0,0 +1,172 @@
+import { useRef, useState, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type TextInputFocusEventData,
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { CountryCodeSelector } from "./CountryCodeSelector";
+import { Label } from "./Label";
+import {
+  getInputFieldStyles,
+  inputFieldMetrics,
+  INPUT_ICON_GAP,
+  resolveInputVisualState,
+} from "../theme/input";
+import { colors, spacing } from "../theme/tokens";
+import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+
+export interface PhoneInputProps extends Omit<TextInputProps, "style"> {
+  label?: string;
+  countryCode?: string;
+  onCountryCodeChange?: (countryCode: string) => void;
+  error?: string;
+  hint?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  errorClassName?: string;
+  hintClassName?: string;
+}
+
+export function PhoneInput({
+  label,
+  countryCode,
+  onCountryCodeChange,
+  error,
+  hint,
+  containerStyle,
+  style,
+  className,
+  labelClassName,
+  inputClassName,
+  errorClassName,
+  hintClassName,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...props
+}: PhoneInputProps) {
+  const wrapperRef = useRef<ComponentRef<typeof View>>(null);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  const helperRef = useRef<ComponentRef<typeof Text>>(null);
+  const [focused, setFocused] = useState(false);
+
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+
+  const isDisabled = editable === false;
+  const phoneVisualState = resolveInputVisualState({
+    focused,
+    error: Boolean(error),
+    disabled: isDisabled,
+  });
+  const phoneFieldStyles = getInputFieldStyles(phoneVisualState);
+
+  function handleFocus(event: NativeSyntheticEvent<TextInputFocusEventData>) {
+    setFocused(true);
+    onFocus?.(event);
+  }
+
+  function handleBlur(event: NativeSyntheticEvent<TextInputFocusEventData>) {
+    setFocused(false);
+    onBlur?.(event);
+  }
+
+  const helperMessage = error ?? hint;
+
+  return (
+    <View ref={wrapperRef} style={[styles.wrapper, containerStyle]}>
+      {label ? (
+        <Label disabled={isDisabled} className={labelClassName}>
+          {label}
+        </Label>
+      ) : null}
+      <View style={styles.row}>
+        <CountryCodeSelector
+          value={countryCode}
+          onValueChange={onCountryCodeChange}
+          disabled={isDisabled}
+          style={styles.countrySelector}
+        />
+        <View style={styles.phoneColumn}>
+          <View style={[phoneFieldStyles.outline, styles.phoneOutline]}>
+            <View
+              style={[
+                inputFieldMetrics.container,
+                phoneFieldStyles.container,
+                styles.phoneField,
+              ]}
+            >
+              <TextInput
+                ref={inputRef}
+                style={[
+                  inputFieldMetrics.input,
+                  phoneFieldStyles.text,
+                  style,
+                ]}
+                keyboardType="phone-pad"
+                placeholderTextColor={phoneFieldStyles.placeholder}
+                editable={editable}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                accessibilityState={{ disabled: isDisabled }}
+                {...props}
+              />
+            </View>
+          </View>
+          {helperMessage ? (
+            <Text ref={helperRef} style={error ? styles.error : styles.hint}>
+              {helperMessage}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: spacing.sm,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: INPUT_ICON_GAP,
+  },
+  countrySelector: {
+    flexShrink: 0,
+    alignSelf: "flex-start",
+  },
+  phoneColumn: {
+    flex: 1,
+    gap: spacing.sm,
+  },
+  phoneOutline: {
+    width: "100%",
+  },
+  phoneField: {
+    flex: 1,
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError,
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300,
+  },
+});

package/src/data/countries.ts

@@ -0,0 +1,98 @@
+export type Country = {
+  code: string;
+  name: string;
+  dialCode: string;
+};
+
+export const defaultCountry: Country = {
+  code: "AM",
+  name: "Armenia",
+  dialCode: "+374",
+};
+
+export const countries: Country[] = [
+  defaultCountry,
+  { code: "AF", name: "Afghanistan", dialCode: "+93" },
+  { code: "AL", name: "Albania", dialCode: "+355" },
+  { code: "DZ", name: "Algeria", dialCode: "+213" },
+  { code: "AR", name: "Argentina", dialCode: "+54" },
+  { code: "AU", name: "Australia", dialCode: "+61" },
+  { code: "AT", name: "Austria", dialCode: "+43" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994" },
+  { code: "BH", name: "Bahrain", dialCode: "+973" },
+  { code: "BY", name: "Belarus", dialCode: "+375" },
+  { code: "BE", name: "Belgium", dialCode: "+32" },
+  { code: "BR", name: "Brazil", dialCode: "+55" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359" },
+  { code: "CA", name: "Canada", dialCode: "+1" },
+  { code: "CL", name: "Chile", dialCode: "+56" },
+  { code: "CN", name: "China", dialCode: "+86" },
+  { code: "CO", name: "Colombia", dialCode: "+57" },
+  { code: "HR", name: "Croatia", dialCode: "+385" },
+  { code: "CY", name: "Cyprus", dialCode: "+357" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420" },
+  { code: "DK", name: "Denmark", dialCode: "+45" },
+  { code: "EG", name: "Egypt", dialCode: "+20" },
+  { code: "EE", name: "Estonia", dialCode: "+372" },
+  { code: "FI", name: "Finland", dialCode: "+358" },
+  { code: "FR", name: "France", dialCode: "+33" },
+  { code: "GE", name: "Georgia", dialCode: "+995" },
+  { code: "DE", name: "Germany", dialCode: "+49" },
+  { code: "GR", name: "Greece", dialCode: "+30" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852" },
+  { code: "HU", name: "Hungary", dialCode: "+36" },
+  { code: "IN", name: "India", dialCode: "+91" },
+  { code: "ID", name: "Indonesia", dialCode: "+62" },
+  { code: "IR", name: "Iran", dialCode: "+98" },
+  { code: "IQ", name: "Iraq", dialCode: "+964" },
+  { code: "IE", name: "Ireland", dialCode: "+353" },
+  { code: "IL", name: "Israel", dialCode: "+972" },
+  { code: "IT", name: "Italy", dialCode: "+39" },
+  { code: "JP", name: "Japan", dialCode: "+81" },
+  { code: "JO", name: "Jordan", dialCode: "+962" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7" },
+  { code: "KW", name: "Kuwait", dialCode: "+965" },
+  { code: "LV", name: "Latvia", dialCode: "+371" },
+  { code: "LB", name: "Lebanon", dialCode: "+961" },
+  { code: "LT", name: "Lithuania", dialCode: "+370" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352" },
+  { code: "MY", name: "Malaysia", dialCode: "+60" },
+  { code: "MX", name: "Mexico", dialCode: "+52" },
+  { code: "MD", name: "Moldova", dialCode: "+373" },
+  { code: "NL", name: "Netherlands", dialCode: "+31" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64" },
+  { code: "NG", name: "Nigeria", dialCode: "+234" },
+  { code: "NO", name: "Norway", dialCode: "+47" },
+  { code: "PK", name: "Pakistan", dialCode: "+92" },
+  { code: "PS", name: "Palestine", dialCode: "+970" },
+  { code: "PH", name: "Philippines", dialCode: "+63" },
+  { code: "PL", name: "Poland", dialCode: "+48" },
+  { code: "PT", name: "Portugal", dialCode: "+351" },
+  { code: "QA", name: "Qatar", dialCode: "+974" },
+  { code: "RO", name: "Romania", dialCode: "+40" },
+  { code: "RU", name: "Russia", dialCode: "+7" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966" },
+  { code: "RS", name: "Serbia", dialCode: "+381" },
+  { code: "SG", name: "Singapore", dialCode: "+65" },
+  { code: "SK", name: "Slovakia", dialCode: "+421" },
+  { code: "SI", name: "Slovenia", dialCode: "+386" },
+  { code: "ZA", name: "South Africa", dialCode: "+27" },
+  { code: "KR", name: "South Korea", dialCode: "+82" },
+  { code: "ES", name: "Spain", dialCode: "+34" },
+  { code: "SE", name: "Sweden", dialCode: "+46" },
+  { code: "CH", name: "Switzerland", dialCode: "+41" },
+  { code: "SY", name: "Syria", dialCode: "+963" },
+  { code: "TW", name: "Taiwan", dialCode: "+886" },
+  { code: "TH", name: "Thailand", dialCode: "+66" },
+  { code: "TR", name: "Turkey", dialCode: "+90" },
+  { code: "UA", name: "Ukraine", dialCode: "+380" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44" },
+  { code: "US", name: "United States", dialCode: "+1" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998" },
+  { code: "VN", name: "Vietnam", dialCode: "+84" },
+];
+
+export function findCountry(code: string): Country {
+  return countries.find((country) => country.code === code) ?? defaultCountry;
+}