@ecohouse/ui 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/Input/Input.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { View, StyleSheet } from "react-native";
+import { MailIcon } from "../../icons";
 import { Input } from "./Input";
 
 const meta = {
@@ -8,9 +9,7 @@ const meta = {
   component: Input,
   args: {
     label: "Label",
-    showLabel: true,
     hint: "Hint",
-    showHint: true,
     placeholder: "placeholder",
     size: "lg",
     showLeftIcon: true,
@@ -51,8 +50,12 @@ export const WithoutIcons: Story = {
   args: { showLeftIcon: false, showRightIcon: false },
 };
 
+export const CustomIcon: Story = {
+  args: { leftIcon: MailIcon },
+};
+
 export const WithoutLabelAndHint: Story = {
-  args: { showLabel: false, showHint: false },
+  render: () => <Input placeholder="placeholder" showLeftIcon showRightIcon />,
 };
 
 export const AllStates: Story = {

package/src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
 import {
   Platform,
   StyleSheet,
@@ -11,13 +11,14 @@ import {
   type ViewStyle,
   type TextInputProps,
 } from "react-native";
-import { ShowIcon } from "../../icons";
-import { UserIcon } from "../../icons";
+import { ShowIcon, UserIcon } from "../../icons";
 import { colors, inputTypography } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
+import { renderStatefulIcon, type StatefulIcon } from "../../utils/renderStatefulIcon";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 
 export type InputSize = "lg" | "sm";
+export type InputIcon = StatefulIcon;
 
 export interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
   label?: string;
@@ -29,9 +30,9 @@ export interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
   error?: boolean;
   /** External — non-interactive. */
   disabled?: boolean;
-  leftIcon?: ReactNode;
+  leftIcon?: InputIcon;
   showLeftIcon?: boolean;
-  rightIcon?: ReactNode;
+  rightIcon?: InputIcon;
   showRightIcon?: boolean;
   onRightIconPress?: () => void;
   /** Accessible name for the right icon button, when `onRightIconPress` is set. */
@@ -147,11 +148,11 @@ function chromeFor(state: VisualState): FieldChrome {
 
 export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(function Input(
   {
-    label = "Label",
+    label,
     showLabel = true,
-    hint = "Hint",
+    hint,
     showHint = true,
-    placeholder = "placeholder",
+    placeholder,
     size = "lg",
     disabled = false,
     error = false,
@@ -194,12 +195,14 @@ export const Input = forwardRef<ComponentRef<typeof TextInput>, InputProps>(func
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
 
-  const leftIconNode = leftIcon ?? (
-    <UserIcon size={metrics.iconSize} color={chrome.leftIconColor} />
-  );
-  const rightIconNode = rightIcon ?? (
-    <ShowIcon size={metrics.iconSize} color={chrome.rightIconColor} />
-  );
+  const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
+    size: metrics.iconSize,
+    color: chrome.leftIconColor,
+  });
+  const rightIconNode = renderStatefulIcon(rightIcon, ShowIcon, {
+    size: metrics.iconSize,
+    color: chrome.rightIconColor,
+  });
 
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);

package/src/components/Input/index.ts

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

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

@@ -2,6 +2,7 @@ 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 { MailIcon } from "../../icons";
 import { Select, type SelectOption } from "./Select";
 import { colors } from "../../theme";
 
@@ -24,7 +25,6 @@ const meta = {
   component: Select,
   args: {
     label: "Label",
-    showLabel: true,
     placeholder: "placeholder",
     options: defaultOptions,
     showLeftIcon: true,
@@ -82,11 +82,18 @@ export const WithoutLeftIcon: Story = {
   args: { showLeftIcon: false },
 };
 
+export const CustomIcon: Story = {
+  args: { leftIcon: MailIcon },
+};
+
+export const WithoutLabelAndHint: Story = {
+  render: () => <Select options={namedOptions} placeholder="Select a city" />,
+};
+
 export const Error: Story = {
   args: {
     error: true,
     hint: "Hint",
-    showHint: true,
   },
 };
 

package/src/components/Select/Select.tsx

@@ -6,7 +6,6 @@ import {
   useRef,
   useState,
   type ComponentRef,
-  type ReactNode,
 } from "react";
 import {
   Platform,
@@ -26,6 +25,7 @@ import { Checkbox } from "../Checkbox";
 import { ChevronDownIcon, SearchIcon, UserIcon } from "../../icons";
 import { colors, selectTypography } from "../../theme";
 import { mergeRefs } from "../../utils/mergeRefs";
+import { renderStatefulIcon, type StatefulIcon } from "../../utils/renderStatefulIcon";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 
 export type SelectOption = {
@@ -33,6 +33,8 @@ export type SelectOption = {
   value: string;
 };
 
+export type SelectIcon = StatefulIcon;
+
 type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   label?: string;
   showLabel?: boolean;
@@ -45,7 +47,7 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   onOpenChange?: (open: boolean) => void;
   disabled?: boolean;
   error?: boolean;
-  leftIcon?: ReactNode;
+  leftIcon?: SelectIcon;
   showLeftIcon?: boolean;
   showSearch?: boolean;
   searchPlaceholder?: string;
@@ -244,11 +246,11 @@ function MultiValueChips({ options, disabled, onRemove }: MultiValueChipsProps)
 export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
   function Select(props, forwardedRef) {
     const {
-      label = "Label",
+      label,
       showLabel = true,
       hint,
-      showHint = false,
-      placeholder = "placeholder",
+      showHint = true,
+      placeholder,
       options,
       open: openProp,
       defaultOpen = false,
@@ -504,12 +506,10 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       setOpen,
     ]);
 
-    const leftIconNode = leftIcon ?? (
-      <UserIcon
-        size={ICON_SIZE}
-        color={error ? colors.red : isOpen ? colors.primary : colors.grey100}
-      />
-    );
+    const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
+      size: ICON_SIZE,
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100,
+    });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
 
     const triggerBorderColor = error

package/src/components/Select/index.ts

@@ -1,2 +1,8 @@
 export { Select } from "./Select";
-export type { SelectProps, SelectOption, SelectSingleProps, SelectMultipleProps } from "./Select";
+export type {
+  SelectIcon,
+  SelectProps,
+  SelectOption,
+  SelectSingleProps,
+  SelectMultipleProps,
+} from "./Select";

package/src/components/index.ts

@@ -31,10 +31,16 @@ export type {
 } from "./DatePicker";
 
 export { Input } from "./Input";
-export type { InputProps, InputSize } from "./Input";
+export type { InputIcon, InputProps, InputSize } from "./Input";
 
 export { Select } from "./Select";
-export type { SelectOption, SelectProps, SelectSingleProps, SelectMultipleProps } from "./Select";
+export type {
+  SelectIcon,
+  SelectOption,
+  SelectProps,
+  SelectSingleProps,
+  SelectMultipleProps,
+} from "./Select";
 
 export { Textarea } from "./Textarea";
 export type { TextareaProps } from "./Textarea";

package/src/index.ts

@@ -36,8 +36,10 @@ export type {
   DatePickerSingleProps,
   DatePickerRangeProps,
   DateRange,
+  InputIcon,
   InputProps,
   InputSize,
+  SelectIcon,
   SelectOption,
   SelectProps,
   SelectSingleProps,

package/src/theme/colors.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, it } from "vitest";
 import { colors } from "./colors";
-import { buttonTypography } from "./typography";
+import {
+  buttonTypography,
+  inputTypography,
+  selectTypography,
+  textareaTypography,
+} from "./typography";
 
 describe("design tokens", () => {
   it("exposes primary and button typography used by Button", () => {
@@ -16,4 +21,17 @@ describe("design tokens", () => {
     expect(buttonTypography.lg.fontSize).toBe(14);
     expect(buttonTypography.lg.fontWeight).toBe("600");
   });
+
+  it("keeps Input, Select, and Textarea field text aligned", () => {
+    const fieldTypography = {
+      fontSize: 12,
+      fontWeight: "400",
+      letterSpacing: 0.36,
+      lineHeight: 12,
+    };
+
+    expect(inputTypography.field).toMatchObject(fieldTypography);
+    expect(selectTypography.field).toMatchObject(fieldTypography);
+    expect(textareaTypography.field).toMatchObject(fieldTypography);
+  });
 });

package/src/theme/typography.ts

@@ -117,10 +117,10 @@ export const inputTypography = {
   },
   field: {
     fontFamily: fonts.sans,
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 19,
-    letterSpacing: 0,
+    lineHeight: 12,
+    letterSpacing: 0.36,
   },
   hint: {
     fontFamily: fonts.sans,
@@ -131,7 +131,7 @@ export const inputTypography = {
   },
 } as const;
 
-/** Select label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
+/** Select label / field / hint typography — Medium/Regular 12, letter-spacing 3%. */
 export const selectTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -142,10 +142,10 @@ export const selectTypography = {
   },
   field: {
     fontFamily: fonts.sans,
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 19,
-    letterSpacing: 0,
+    lineHeight: 12,
+    letterSpacing: 0.36,
   },
   hint: {
     fontFamily: fonts.sans,
@@ -221,7 +221,7 @@ export const datePickerTypography = {
   },
 } as const;
 
-/** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
+/** Textarea label / field / hint typography — Medium/Regular 12, letter-spacing 3%. */
 export const textareaTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -232,10 +232,10 @@ export const textareaTypography = {
   },
   field: {
     fontFamily: fonts.sans,
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 19,
-    letterSpacing: 0,
+    lineHeight: 12,
+    letterSpacing: 0.36,
   },
   hint: {
     fontFamily: fonts.sans,

package/src/utils/renderStatefulIcon.tsx

@@ -0,0 +1,25 @@
+import { cloneElement, isValidElement, type ReactNode } from "react";
+import type { IconComponent, IconProps } from "../icons";
+
+export type StatefulIcon = ReactNode | IconComponent;
+
+export function renderStatefulIcon(
+  icon: StatefulIcon | undefined,
+  FallbackIcon: IconComponent,
+  props: Pick<IconProps, "color" | "size">,
+) {
+  if (icon == null) {
+    return <FallbackIcon {...props} />;
+  }
+
+  if (typeof icon === "function") {
+    const Icon = icon as IconComponent;
+    return <Icon {...props} />;
+  }
+
+  if (isValidElement<IconProps>(icon)) {
+    return cloneElement(icon, props);
+  }
+
+  return icon;
+}