@ecohouse/ui 0.1.2 → 0.1.4

package/src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type ComponentRef, type ReactNode } from "react";
+import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
 import {
   Platform,
   StyleSheet,
@@ -14,9 +14,9 @@ import {
 import { ShowIcon } from "../../icons";
 import { UserIcon } from "../../icons";
 import { colors, inputTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 
-export type InputState = "default" | "filled" | "active" | "error" | "disabled";
 export type InputSize = "lg" | "sm";
 
 export interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
@@ -24,15 +24,18 @@ export interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
   showLabel?: boolean;
   hint?: string;
   showHint?: boolean;
-  state?: InputState;
   size?: InputSize;
-  disabled?: boolean;
+  /** External — validation / form error. */
   error?: boolean;
+  /** External — non-interactive. */
+  disabled?: boolean;
   leftIcon?: ReactNode;
   showLeftIcon?: boolean;
   rightIcon?: ReactNode;
   showRightIcon?: boolean;
   onRightIconPress?: () => void;
+  /** Accessible name for the right icon button, when `onRightIconPress` is set. */
+  rightIconAccessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   fieldStyle?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
@@ -40,6 +43,8 @@ export interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
   inputClassName?: string;
 }
 
+type VisualState = "default" | "filled" | "active" | "error" | "disabled";
+
 type FieldChrome = {
   borderColor: string;
   backgroundColor: string;
@@ -74,20 +79,18 @@ const sizeConfig = {
   },
 } as const satisfies Record<InputSize, Record<string, unknown>>;
 
-function resolveState({
-  state,
+/** default / filled / active come from value + focus; error / disabled from props. */
+function resolveVisualState({
   disabled,
   error,
   focused,
   hasValue,
 }: {
-  state?: InputState;
-  disabled?: boolean;
-  error?: boolean;
+  disabled: boolean;
+  error: boolean;
   focused: boolean;
   hasValue: boolean;
-}): InputState {
-  if (state) return state;
+}): VisualState {
   if (disabled) return "disabled";
   if (error) return "error";
   if (focused) return "active";
@@ -95,7 +98,7 @@ function resolveState({
   return "default";
 }
 
-function chromeFor(state: InputState): FieldChrome {
+function chromeFor(state: VisualState): FieldChrome {
   const base: FieldChrome = {
     borderColor: colors.grey700,
     backgroundColor: colors.grey700,
@@ -142,35 +145,40 @@ function chromeFor(state: InputState): FieldChrome {
   }
 }
 
-export function Input({
-  label = "Label",
-  showLabel = true,
-  hint = "Hint",
-  showHint = true,
-  placeholder = "placeholder",
-  state: stateProp,
-  size = "lg",
-  disabled = false,
-  error = false,
-  value,
-  defaultValue,
-  onChangeText,
-  onFocus,
-  onBlur,
-  leftIcon,
-  showLeftIcon = false,
-  rightIcon,
-  showRightIcon = false,
-  onRightIconPress,
-  style,
-  fieldStyle,
-  inputStyle,
-  className,
-  inputClassName,
-  ...textInputProps
-}: InputProps) {
+export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(function Input(
+  {
+    label = "Label",
+    showLabel = true,
+    hint = "Hint",
+    showHint = true,
+    placeholder = "placeholder",
+    size = "lg",
+    disabled = false,
+    error = false,
+    value,
+    defaultValue,
+    onChangeText,
+    onFocus,
+    onBlur,
+    leftIcon,
+    showLeftIcon = false,
+    rightIcon,
+    showRightIcon = false,
+    onRightIconPress,
+    rightIconAccessibilityLabel,
+    style,
+    fieldStyle,
+    inputStyle,
+    className,
+    inputClassName,
+    accessibilityLabel,
+    ...textInputProps
+  },
+  forwardedRef,
+) {
   const rootRef = useRef<ComponentRef<typeof View>>(null);
   const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
   const metrics = sizeConfig[size];
@@ -179,15 +187,9 @@ export function Input({
   const currentValue = isControlled ? value : uncontrolledValue;
   const hasValue = currentValue.length > 0;
 
-  const resolvedState = resolveState({
-    state: stateProp,
-    disabled,
-    error,
-    focused,
-    hasValue,
-  });
-  const chrome = chromeFor(resolvedState);
-  const isDisabled = resolvedState === "disabled" || disabled;
+  const visualState = resolveVisualState({ disabled, error, focused, hasValue });
+  const chrome = chromeFor(visualState);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? undefined : label);
 
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
@@ -203,7 +205,7 @@ export function Input({
   useApplyWebClassName(inputRef, inputClassName);
 
   return (
-    <View ref={rootRef} style={[styles.root, isDisabled && styles.disabled, style]}>
+    <View ref={rootRef} style={[styles.root, disabled && styles.disabled, style]}>
       {showLabel && label ? (
         <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
       ) : null}
@@ -232,11 +234,11 @@ export function Input({
         ) : null}
 
         <TextInput
-          ref={inputRef}
+          ref={setInputRef}
           {...textInputProps}
           value={isControlled ? value : undefined}
           defaultValue={isControlled ? undefined : defaultValue}
-          editable={!isDisabled}
+          editable={!disabled}
           placeholder={placeholder}
           placeholderTextColor={chrome.placeholderColor}
           onChangeText={(text) => {
@@ -259,16 +261,18 @@ export function Input({
             Platform.OS === "android" ? styles.inputAndroid : null,
             inputStyle,
           ]}
-          accessibilityState={{ disabled: isDisabled }}
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessibilityState={{ disabled }}
         />
 
         {hasRightIcon ? (
           onRightIconPress ? (
             <TouchableOpacity
               onPress={onRightIconPress}
-              disabled={isDisabled}
+              disabled={disabled}
               style={[styles.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }]}
               accessibilityRole="button"
+              accessibilityLabel={rightIconAccessibilityLabel}
               hitSlop={8}
             >
               {rightIconNode}
@@ -286,7 +290,7 @@ export function Input({
       ) : null}
     </View>
   );
-}
+});
 
 const styles = StyleSheet.create({
   root: {

package/src/components/Input/index.ts

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

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,196 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet, Text } from "react-native";
+import { Select, type SelectOption } from "./Select";
+import { colors } from "../../theme";
+
+const defaultOptions: SelectOption[] = [
+  { label: "Select Item", value: "1" },
+  { label: "Select Item", value: "2" },
+  { label: "Select Item", value: "3" },
+  { label: "Select Item", value: "4" },
+];
+
+const namedOptions: SelectOption[] = [
+  { label: "Yerevan", value: "yerevan" },
+  { label: "Gyumri", value: "gyumri" },
+  { label: "Vanadzor", value: "vanadzor" },
+  { label: "Dilijan", value: "dilijan" },
+];
+
+const meta = {
+  title: "Components/Select",
+  component: Select,
+  args: {
+    label: "Label",
+    showLabel: true,
+    placeholder: "placeholder",
+    options: defaultOptions,
+    showLeftIcon: true,
+    showSearch: true,
+    defaultOpen: false,
+    disabled: false,
+    multiple: false,
+    onValueChange: fn(),
+    onOpenChange: fn(),
+  },
+  argTypes: {
+    multiple: { control: "boolean" },
+    onValueChange: { action: "valueChange" },
+    onOpenChange: { action: "openChange" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Open: Story = {
+  args: { defaultOpen: true },
+};
+
+export const WithValue: Story = {
+  args: {
+    options: namedOptions,
+    defaultValue: "gyumri",
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+    options: namedOptions,
+    defaultValue: ["yerevan", "dilijan"],
+    defaultOpen: true,
+  },
+};
+
+export const WithoutSearch: Story = {
+  args: {
+    showSearch: false,
+    defaultOpen: true,
+    options: namedOptions,
+  },
+};
+
+export const WithoutLeftIcon: Story = {
+  args: { showLeftIcon: false },
+};
+
+export const Error: Story = {
+  args: {
+    error: true,
+    hint: "Hint",
+    showHint: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: "1" },
+};
+
+/** Verifies that a disabled Select stays non-interactive even when forced open. */
+export const DisabledOpen: Story = {
+  args: {
+    disabled: true,
+    defaultOpen: true,
+    options: namedOptions,
+    defaultValue: "yerevan",
+  },
+};
+
+function ControlledSelect() {
+  const [value, setValue] = useState<string | undefined>();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={storyStyles.column}>
+      <Select
+        label="Label"
+        placeholder="placeholder"
+        options={namedOptions}
+        value={value}
+        onValueChange={setValue}
+        open={open}
+        onOpenChange={setOpen}
+      />
+      <Text style={storyStyles.meta}>
+        value: {value ?? "—"} · open: {String(open)}
+      </Text>
+    </View>
+  );
+}
+
+function ControlledMultipleSelect() {
+  const [value, setValue] = useState<string[]>(["gyumri"]);
+  const [open, setOpen] = useState(true);
+
+  return (
+    <View style={storyStyles.column}>
+      <Select
+        multiple
+        label="Cities"
+        placeholder="Select cities"
+        options={namedOptions}
+        value={value}
+        onValueChange={setValue}
+        open={open}
+        onOpenChange={setOpen}
+      />
+      <Text style={storyStyles.meta}>{value.join(", ") || "—"}</Text>
+    </View>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledSelect />,
+};
+
+export const ControlledMultiple: Story = {
+  render: () => <ControlledMultipleSelect />,
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.row}>
+      <Select label="Single" placeholder="placeholder" options={namedOptions} />
+      <Select
+        label="Single open"
+        placeholder="placeholder"
+        options={namedOptions}
+        defaultOpen
+        defaultValue="yerevan"
+      />
+      <Select
+        multiple
+        label="Multiple"
+        placeholder="Select cities"
+        options={namedOptions}
+        defaultValue={["yerevan", "gyumri"]}
+        defaultOpen
+      />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 12,
+    alignItems: "flex-start",
+  },
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 24,
+    alignItems: "flex-start",
+  },
+  meta: {
+    color: colors.grey100,
+    fontSize: 12,
+  },
+});