@ecohouse/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet } from "react-native";
+import { Input } from "./Input";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  args: {
+    label: "Label",
+    showLabel: true,
+    hint: "Hint",
+    showHint: true,
+    placeholder: "placeholder",
+    size: "lg",
+    showLeftIcon: true,
+    showRightIcon: true,
+    onChangeText: fn(),
+    onRightIconPress: fn(),
+  },
+  argTypes: {
+    state: {
+      control: "select",
+      options: ["default", "filled", "active", "error", "disabled"],
+    },
+    size: {
+      control: "select",
+      options: ["lg", "sm"],
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { state: "default" },
+};
+
+export const Filled: Story = {
+  args: { state: "filled", value: "Filled value" },
+};
+
+export const Active: Story = {
+  args: { state: "active" },
+};
+
+export const Error: Story = {
+  args: { state: "error", hint: "Hint" },
+};
+
+export const Disabled: Story = {
+  args: { state: "disabled", value: "Disabled value" },
+};
+
+export const WithoutIcons: Story = {
+  args: { showLeftIcon: false, showRightIcon: false },
+};
+
+export const WithoutLabelAndHint: Story = {
+  args: { showLabel: false, showHint: false },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Input
+        label="Label"
+        hint="Hint"
+        showLeftIcon
+        showRightIcon
+        placeholder="placeholder"
+        state="default"
+      />
+      <Input
+        label="Label"
+        hint="Hint"
+        showLeftIcon
+        showRightIcon
+        placeholder="placeholder"
+        state="filled"
+        value="Filled value"
+      />
+      <Input
+        label="Label"
+        hint="Hint"
+        showLeftIcon
+        showRightIcon
+        placeholder="placeholder"
+        state="active"
+      />
+      <Input
+        label="Label"
+        hint="Hint"
+        showLeftIcon
+        showRightIcon
+        placeholder="placeholder"
+        state="error"
+      />
+      <Input
+        label="Label"
+        hint="Hint"
+        showLeftIcon
+        showRightIcon
+        placeholder="placeholder"
+        state="disabled"
+        value="Disabled value"
+      />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 24,
+    alignItems: "flex-start",
+  },
+});

package/src/components/Input/Input.tsx

@@ -0,0 +1,327 @@
+import { useRef, useState, type ComponentRef, type ReactNode } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+  type TextInputProps,
+} from "react-native";
+import { ShowIcon } from "../../icons";
+import { UserIcon } from "../../icons";
+import { colors, inputTypography } from "../../theme";
+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"> {
+  label?: string;
+  showLabel?: boolean;
+  hint?: string;
+  showHint?: boolean;
+  state?: InputState;
+  size?: InputSize;
+  disabled?: boolean;
+  error?: boolean;
+  leftIcon?: ReactNode;
+  showLeftIcon?: boolean;
+  rightIcon?: ReactNode;
+  showRightIcon?: boolean;
+  onRightIconPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  fieldStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  className?: string;
+  inputClassName?: string;
+}
+
+type FieldChrome = {
+  borderColor: string;
+  backgroundColor: string;
+  textColor: string;
+  placeholderColor: string;
+  leftIconColor: string;
+  rightIconColor: string;
+  labelColor: string;
+  hintColor: string;
+};
+
+const DEFAULT_WIDTH = 308;
+
+const sizeConfig = {
+  lg: {
+    height: 44,
+    borderRadius: 60,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 10,
+    iconSize: 20,
+    text: inputTypography.field,
+  },
+  sm: {
+    height: 32,
+    borderRadius: 60,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    gap: 8,
+    iconSize: 16,
+    text: inputTypography.hint,
+  },
+} as const satisfies Record<InputSize, Record<string, unknown>>;
+
+function resolveState({
+  state,
+  disabled,
+  error,
+  focused,
+  hasValue,
+}: {
+  state?: InputState;
+  disabled?: boolean;
+  error?: boolean;
+  focused: boolean;
+  hasValue: boolean;
+}): InputState {
+  if (state) return state;
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "active";
+  if (hasValue) return "filled";
+  return "default";
+}
+
+function chromeFor(state: InputState): FieldChrome {
+  const base: FieldChrome = {
+    borderColor: colors.grey700,
+    backgroundColor: colors.grey700,
+    textColor: colors.white,
+    placeholderColor: colors.grey100,
+    leftIconColor: colors.grey100,
+    rightIconColor: colors.grey100,
+    labelColor: colors.white,
+    hintColor: colors.grey100,
+  };
+
+  switch (state) {
+    case "active":
+      return {
+        ...base,
+        borderColor: colors.primaryMuted,
+        leftIconColor: colors.primary,
+      };
+    case "error":
+      return {
+        ...base,
+        borderColor: colors.redMuted,
+        textColor: colors.red,
+        placeholderColor: colors.red,
+        labelColor: colors.red,
+        hintColor: colors.red,
+        leftIconColor: colors.red,
+      };
+    case "filled":
+      return base;
+    case "disabled":
+      return {
+        ...base,
+        borderColor: colors.grey700,
+        backgroundColor: colors.grey700,
+        textColor: colors.grey0,
+        leftIconColor: colors.grey0,
+        rightIconColor: colors.grey0,
+        labelColor: colors.white,
+        hintColor: colors.grey100,
+      };
+    default:
+      return base;
+  }
+}
+
+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) {
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  const [focused, setFocused] = useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const metrics = sizeConfig[size];
+
+  const isControlled = typeof value === "string";
+  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 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} />
+  );
+
+  useApplyWebClassName(rootRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+
+  return (
+    <View ref={rootRef} style={[styles.root, isDisabled && styles.disabled, style]}>
+      {showLabel && label ? (
+        <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+      ) : null}
+
+      <View
+        style={[
+          styles.field,
+          {
+            height: metrics.height,
+            borderRadius: metrics.borderRadius,
+            paddingTop: metrics.paddingVertical,
+            paddingBottom: metrics.paddingVertical,
+            paddingLeft: metrics.paddingHorizontal,
+            paddingRight: metrics.paddingHorizontal,
+            gap: metrics.gap,
+            borderColor: chrome.borderColor,
+            backgroundColor: chrome.backgroundColor,
+          },
+          fieldStyle,
+        ]}
+      >
+        {hasLeftIcon ? (
+          <View style={[styles.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }]}>
+            {leftIconNode}
+          </View>
+        ) : null}
+
+        <TextInput
+          ref={inputRef}
+          {...textInputProps}
+          value={isControlled ? value : undefined}
+          defaultValue={isControlled ? undefined : defaultValue}
+          editable={!isDisabled}
+          placeholder={placeholder}
+          placeholderTextColor={chrome.placeholderColor}
+          onChangeText={(text) => {
+            if (!isControlled) setUncontrolledValue(text);
+            onChangeText?.(text);
+          }}
+          onFocus={(event) => {
+            setFocused(true);
+            onFocus?.(event);
+          }}
+          onBlur={(event) => {
+            setFocused(false);
+            onBlur?.(event);
+          }}
+          style={[
+            styles.input,
+            metrics.text,
+            { color: chrome.textColor },
+            Platform.OS === "web" ? styles.inputWeb : null,
+            Platform.OS === "android" ? styles.inputAndroid : null,
+            inputStyle,
+          ]}
+          accessibilityState={{ disabled: isDisabled }}
+        />
+
+        {hasRightIcon ? (
+          onRightIconPress ? (
+            <TouchableOpacity
+              onPress={onRightIconPress}
+              disabled={isDisabled}
+              style={[styles.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }]}
+              accessibilityRole="button"
+              hitSlop={8}
+            >
+              {rightIconNode}
+            </TouchableOpacity>
+          ) : (
+            <View style={[styles.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }]}>
+              {rightIconNode}
+            </View>
+          )
+        ) : null}
+      </View>
+
+      {showHint && hint ? (
+        <Text style={[styles.hint, { color: chrome.hintColor }]}>{hint}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH,
+    gap: 8,
+    alignSelf: "flex-start",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  label: {
+    ...inputTypography.label,
+  },
+  field: {
+    borderWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    margin: 0,
+  },
+  inputWeb: {
+    outlineStyle: "none",
+  } as TextStyle,
+  inputAndroid: {
+    includeFontPadding: false,
+  },
+  iconSlot: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  hint: {
+    ...inputTypography.hint,
+  },
+});

package/src/components/Input/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
+
+export { Input } from "./Input";
+export type { InputProps, InputSize, InputState } from "./Input";

package/src/icons/{ArrowUpRightIcon.tsx → ArrowRight/ArrowRightIcon.tsx}

@@ -1,24 +1,25 @@
 import Svg, { Path } from "react-native-svg";
-import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+import { ARROW_RIGHT_PATH } from "./arrowRightPath";
+import { colors } from "../../theme";
 
-export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+export { ARROW_RIGHT_PATH } from "./arrowRightPath";
 
-interface ArrowUpRightIconProps {
+interface ArrowRightIconProps {
   size?: number;
   color?: string;
   strokeWidth?: number;
 }
 
 /** Native — react-native-svg (peer dependency). */
-export function ArrowUpRightIcon({
+export function ArrowRightIcon({
   size = 20,
-  color = "#082640",
+  color = colors.primary,
   strokeWidth = 2,
-}: ArrowUpRightIconProps) {
+}: ArrowRightIconProps) {
   return (
     <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
       <Path
-        d={ARROW_UP_RIGHT_PATH}
+        d={ARROW_RIGHT_PATH}
         stroke={color}
         strokeWidth={strokeWidth}
         strokeLinecap="round"

package/src/icons/{ArrowUpRightIcon.web.tsx → ArrowRight/ArrowRightIcon.web.tsx}

@@ -1,17 +1,18 @@
-import { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+import { ARROW_RIGHT_PATH } from "./arrowRightPath";
+import { colors } from "../../theme";
 
-interface ArrowUpRightIconProps {
+interface ArrowRightIconProps {
   size?: number;
   color?: string;
   strokeWidth?: number;
 }
 
 /** Web / Storybook — plain SVG (no react-native-svg). */
-export function ArrowUpRightIcon({
+export function ArrowRightIcon({
   size = 20,
-  color = "#082640",
+  color = colors.primary,
   strokeWidth = 2,
-}: ArrowUpRightIconProps) {
+}: ArrowRightIconProps) {
   return (
     <svg
       width={size}
@@ -22,7 +23,7 @@ export function ArrowUpRightIcon({
       aria-hidden
     >
       <path
-        d={ARROW_UP_RIGHT_PATH}
+        d={ARROW_RIGHT_PATH}
         stroke={color}
         strokeWidth={strokeWidth}
         strokeLinecap="round"
@@ -32,4 +33,4 @@ export function ArrowUpRightIcon({
   );
 }
 
-export { ARROW_UP_RIGHT_PATH } from "./arrowUpRightPath";
+export { ARROW_RIGHT_PATH } from "./arrowRightPath";

package/src/icons/ArrowRight/arrowRightPath.ts

@@ -0,0 +1,2 @@
+/** Arrow_Right_MD path — 20×20 viewBox. */
+export const ARROW_RIGHT_PATH = "M4.16667 10H15.8333M15.8333 10L10 4.16667M15.8333 10L10 15.8333";

package/src/icons/ArrowRight/index.ts

@@ -0,0 +1 @@
+export { ArrowRightIcon, ARROW_RIGHT_PATH } from "./ArrowRightIcon";

package/src/icons/Bag/BagIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { BAG_PATH } from "./bagPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { BAG_PATH } from "./bagPath";
+
+export function BagIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={BAG_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Bag/BagIcon.web.tsx

@@ -0,0 +1,26 @@
+import { BAG_PATH } from "./bagPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function BagIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={BAG_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { BAG_PATH } from "./bagPath";

package/src/icons/Bag/bagPath.ts

@@ -0,0 +1,2 @@
+export const BAG_PATH =
+  "M9.23047 9H7.2002C6.08009 9 5.51962 9 5.0918 9.21799C4.71547 9.40973 4.40973 9.71547 4.21799 10.0918C4 10.5196 4 11.0801 4 12.2002V17.8002C4 18.9203 4 19.4801 4.21799 19.9079C4.40973 20.2842 4.71547 20.5905 5.0918 20.7822C5.5192 21 6.07902 21 7.19694 21H16.8031C17.921 21 18.48 21 18.9074 20.7822C19.2837 20.5905 19.5905 20.2842 19.7822 19.9079C20 19.4805 20 18.9215 20 17.8036V12.1969C20 11.079 20 10.5192 19.7822 10.0918C19.5905 9.71547 19.2837 9.40973 18.9074 9.21799C18.4796 9 17.9203 9 16.8002 9H14.7689M9.23047 9H14.7689M9.23047 9C9.10302 9 9 8.89668 9 8.76923V6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6V8.76923C15 8.89668 14.8964 9 14.7689 9";

package/src/icons/Bag/index.ts

@@ -0,0 +1 @@
+export { BagIcon, BAG_PATH } from "./BagIcon";

package/src/icons/Bell/BellIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { BELL_PATH } from "./bellPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { BELL_PATH } from "./bellPath";
+
+export function BellIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={BELL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Bell/BellIcon.web.tsx

@@ -0,0 +1,26 @@
+import { BELL_PATH } from "./bellPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function BellIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={BELL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { BELL_PATH } from "./bellPath";

package/src/icons/Bell/bellPath.ts

@@ -0,0 +1,2 @@
+export const BELL_PATH =
+  "M7.5 17.5H12.5M10 2.5C7.23858 2.5 5 4.73858 5 7.5C5 8.51208 5.3007 9.45393 5.81764 10.2411C6.61256 11.4515 7.00967 12.0564 7.06127 12.1467C7.52024 12.9508 7.43573 12.6672 7.49349 13.5913C7.49998 13.6952 7.5 13.8524 7.5 14.1667C7.5 14.6269 7.8731 15 8.33333 15L11.6667 15C12.1269 15 12.5 14.6269 12.5 14.1667C12.5 13.8524 12.5 13.6952 12.5065 13.5913C12.5643 12.6672 12.4793 12.9509 12.9382 12.1467C12.9898 12.0564 13.3876 11.4515 14.1825 10.2411C14.6995 9.45393 15.0002 8.51208 15.0002 7.5C15.0002 4.73858 12.7614 2.5 10 2.5Z";

package/src/icons/Bell/index.ts

@@ -0,0 +1 @@
+export { BellIcon, BELL_PATH } from "./BellIcon";

package/src/icons/Building/BuildingIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { BUILDING_PATH } from "./buildingPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { BUILDING_PATH } from "./buildingPath";
+
+export function BuildingIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={BUILDING_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Building/BuildingIcon.web.tsx

@@ -0,0 +1,26 @@
+import { BUILDING_PATH } from "./buildingPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function BuildingIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={BUILDING_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { BUILDING_PATH } from "./buildingPath";