@ecohouse/ui 0.1.2 → 0.1.4

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { useRef, type ComponentRef, type ReactNode } from "react";
+import { forwardRef, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
 import {
   Platform,
   StyleSheet,
@@ -8,16 +8,21 @@ import {
   type GestureResponderEvent,
   type StyleProp,
   type TextStyle,
+  type TouchableOpacityProps,
   type ViewStyle,
 } from "react-native";
 import { ArrowRightIcon } from "../../icons";
 import { buttonTypography, colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
 import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
 
 export type ButtonVariant = "primary" | "secondary";
 export type ButtonSize = "lg" | "sm";
 
-export interface ButtonProps {
+export interface ButtonProps extends Omit<
+  TouchableOpacityProps,
+  "onPress" | "disabled" | "style" | "children"
+> {
   title?: string;
   children?: ReactNode;
   onPress: (event: GestureResponderEvent) => void;
@@ -81,99 +86,112 @@ const sizeConfig = {
   },
 } as const satisfies Record<ButtonSize, Record<string, unknown>>;
 
-export function Button({
-  title,
-  children,
-  onPress,
-  disabled = false,
-  variant = "primary",
-  size = "lg",
-  showIcon = false,
-  icon,
-  style,
-  textStyle,
-  className,
-  textClassName,
-}: ButtonProps) {
-  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
-  const textRef = useRef<ComponentRef<typeof Text>>(null);
-  const preset = variantConfig[variant];
-  const metrics = sizeConfig[size];
+export const Button = forwardRef<ComponentRef<typeof TouchableOpacity>, ButtonProps>(
+  function Button(
+    {
+      title,
+      children,
+      onPress,
+      disabled = false,
+      variant = "primary",
+      size = "lg",
+      showIcon = false,
+      icon,
+      style,
+      textStyle,
+      className,
+      textClassName,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
+    const textRef = useRef<ComponentRef<typeof Text>>(null);
+    const preset = variantConfig[variant];
+    const metrics = sizeConfig[size];
 
-  const label = typeof children !== "undefined" ? children : title;
-  const hasCustomChildren = typeof children !== "undefined";
-  const customIcon = icon != null && typeof icon !== "boolean" ? icon : undefined;
-  const hasIcon = showIcon || icon === true || customIcon != null;
-  const resolvedContainerClassName = className?.trim() || undefined;
+    const label = typeof children !== "undefined" ? children : title;
+    const hasCustomChildren = typeof children !== "undefined";
+    const customIcon = icon != null && typeof icon !== "boolean" ? icon : undefined;
+    const hasIcon = showIcon || icon === true || customIcon != null;
+    const resolvedContainerClassName = className?.trim() || undefined;
+    const resolvedAccessibilityLabel =
+      accessibilityLabel ?? (typeof label === "string" ? label : undefined);
 
-  useApplyWebClassName(containerRef, resolvedContainerClassName);
-  useApplyWebClassName(textRef, textClassName);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
 
-  const iconNode = customIcon ?? (
-    <ArrowRightIcon size={metrics.iconSize} color={preset.iconColor} />
-  );
+    useApplyWebClassName(containerRef, resolvedContainerClassName);
+    useApplyWebClassName(textRef, textClassName);
 
-  const containerStyle = [
-    styles.base,
-    {
-      minHeight: metrics.minHeight,
-      borderRadius: metrics.borderRadius,
-      backgroundColor: preset.backgroundColor,
-      paddingTop: metrics.paddingVertical,
-      paddingBottom: metrics.paddingVertical,
-      paddingLeft: metrics.paddingLeft,
-      paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
-      gap: hasIcon ? metrics.gap : 0,
-    },
-    disabled && styles.disabled,
-    style,
-  ];
+    const iconNode = customIcon ?? (
+      <ArrowRightIcon size={metrics.iconSize} color={preset.iconColor} />
+    );
 
-  const labelStyle = [
-    styles.label,
-    metrics.text,
-    { color: preset.textColor },
-    Platform.OS === "android" ? styles.labelAndroid : null,
-    !hasIcon && styles.labelCentered,
-    textStyle,
-  ];
+    const containerStyle = [
+      styles.base,
+      {
+        minHeight: metrics.minHeight,
+        borderRadius: metrics.borderRadius,
+        backgroundColor: preset.backgroundColor,
+        paddingTop: metrics.paddingVertical,
+        paddingBottom: metrics.paddingVertical,
+        paddingLeft: metrics.paddingLeft,
+        paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
+        gap: hasIcon ? metrics.gap : 0,
+      },
+      disabled && styles.disabled,
+      style,
+    ];
 
-  return (
-    <TouchableOpacity
-      ref={containerRef}
-      style={containerStyle}
-      onPress={onPress}
-      disabled={disabled}
-      activeOpacity={0.7}
-      accessibilityRole="button"
-      accessibilityState={{ disabled }}
-    >
-      {hasCustomChildren ? (
-        children
-      ) : (
-        <Text ref={textRef} style={labelStyle}>
-          {label}
-        </Text>
-      )}
+    const labelStyle = [
+      styles.label,
+      metrics.text,
+      { color: preset.textColor },
+      Platform.OS === "android" ? styles.labelAndroid : null,
+      !hasIcon && styles.labelCentered,
+      textStyle,
+    ];
 
-      {hasIcon ? (
-        <View
-          style={[
-            styles.iconContainer,
-            {
-              width: metrics.iconContainerSize,
-              height: metrics.iconContainerSize,
-              borderRadius: metrics.iconContainerSize / 2,
-              backgroundColor: preset.iconBadgeBackgroundColor,
-            },
-          ]}
-        >
-          {iconNode}
-        </View>
-      ) : null}
-    </TouchableOpacity>
-  );
-}
+    return (
+      <TouchableOpacity
+        {...rest}
+        ref={setContainerRef}
+        style={containerStyle}
+        onPress={onPress}
+        disabled={disabled}
+        activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={resolvedAccessibilityLabel}
+        accessibilityState={{ disabled }}
+      >
+        {hasCustomChildren ? (
+          children
+        ) : (
+          <Text ref={textRef} style={labelStyle}>
+            {label}
+          </Text>
+        )}
+
+        {hasIcon ? (
+          <View
+            style={[
+              styles.iconContainer,
+              {
+                width: metrics.iconContainerSize,
+                height: metrics.iconContainerSize,
+                borderRadius: metrics.iconContainerSize / 2,
+                backgroundColor: preset.iconBadgeBackgroundColor,
+              },
+            ]}
+          >
+            {iconNode}
+          </View>
+        ) : null}
+      </TouchableOpacity>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   base: {

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,112 @@
+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 { Checkbox } from "./Checkbox";
+import { colors } from "../../theme";
+
+const meta = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  args: {
+    defaultValue: false,
+    disabled: false,
+    variant: "default",
+    onValueChange: fn(),
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "light"],
+    },
+    onValueChange: { action: "valueChange" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: { defaultValue: true },
+};
+
+export const Light: Story = {
+  args: { variant: "light" },
+};
+
+export const LightChecked: Story = {
+  args: { variant: "light", defaultValue: true },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const DisabledChecked: Story = {
+  args: { disabled: true, defaultValue: true },
+};
+
+export const WithLabel: Story = {
+  args: { label: "Label", defaultValue: true },
+};
+
+function ControlledCheckbox() {
+  const [value, setValue] = useState(false);
+
+  return (
+    <View style={storyStyles.row}>
+      <Checkbox value={value} onValueChange={setValue} label="Controlled" />
+      <Text style={storyStyles.meta}>{value ? "Checked" : "Unchecked"}</Text>
+    </View>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledCheckbox />,
+};
+
+/** Matches the design matrix: checked on top, unchecked below; light then default. */
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.matrix}>
+      <View style={storyStyles.matrixRow}>
+        <Checkbox variant="light" defaultValue />
+        <Checkbox variant="light" defaultValue disabled />
+        <Checkbox variant="default" defaultValue />
+        <Checkbox variant="default" defaultValue disabled />
+      </View>
+      <View style={storyStyles.matrixRow}>
+        <Checkbox variant="light" />
+        <Checkbox variant="light" disabled />
+        <Checkbox variant="default" />
+        <Checkbox variant="default" disabled />
+      </View>
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  matrix: {
+    gap: 16,
+    alignItems: "flex-start",
+  },
+  matrixRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  meta: {
+    color: colors.grey100,
+    fontSize: 12,
+  },
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { CheckIcon } from "../../icons";
+import { colors, inputTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type CheckboxVariant = "default" | "light";
+
+export interface CheckboxProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  value?: boolean;
+  defaultValue?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  variant?: CheckboxVariant;
+  label?: string;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const BOX_SIZE = 20;
+const BOX_RADIUS = 6;
+const CHECK_SIZE = 12;
+const CHECK_STROKE = 2.5;
+
+const variantChrome: Record<CheckboxVariant, { backgroundColor: string; borderColor: string }> = {
+  default: {
+    backgroundColor: colors.dark,
+    borderColor: colors.grey700,
+  },
+  light: {
+    backgroundColor: colors.grey700,
+    borderColor: colors.grey500,
+  },
+};
+
+export const Checkbox = forwardRef<ComponentRef<typeof Pressable>, CheckboxProps>(function Checkbox(
+  {
+    value,
+    defaultValue = false,
+    onValueChange,
+    disabled = false,
+    variant = "default",
+    label,
+    children,
+    style,
+    labelStyle,
+    className,
+    hitSlop = 8,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof Pressable>>(null);
+  const isControlled = typeof value === "boolean";
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isActive = isControlled ? value : uncontrolledValue;
+
+  const chrome = variantChrome[variant];
+  const labelContent = children ?? label;
+  const resolvedAccessibilityLabel =
+    accessibilityLabel ?? (typeof labelContent === "string" ? labelContent : undefined);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+  useApplyWebClassName(containerRef, className);
+
+  const handlePress = () => {
+    if (disabled) return;
+    const next = !isActive;
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <Pressable
+      {...rest}
+      ref={setContainerRef}
+      onPress={handlePress}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      accessibilityRole="checkbox"
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityState={{ checked: isActive, disabled }}
+      style={[styles.root, disabled && styles.disabled, style]}
+    >
+      <View
+        style={[
+          styles.box,
+          {
+            backgroundColor: chrome.backgroundColor,
+            borderColor: chrome.borderColor,
+          },
+        ]}
+      >
+        {isActive ? (
+          <CheckIcon size={CHECK_SIZE} color={colors.primary} strokeWidth={CHECK_STROKE} />
+        ) : null}
+      </View>
+
+      {labelContent != null && labelContent !== false ? (
+        typeof labelContent === "string" || typeof labelContent === "number" ? (
+          <Text style={[styles.label, labelStyle]}>{labelContent}</Text>
+        ) : (
+          labelContent
+        )
+      ) : null}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 10,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    borderRadius: BOX_RADIUS,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  label: {
+    ...inputTypography.field,
+    color: colors.white,
+  },
+});

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps, CheckboxVariant } from "./Checkbox";

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

@@ -15,14 +15,14 @@ const meta = {
     size: "lg",
     showLeftIcon: true,
     showRightIcon: true,
+    disabled: false,
+    error: false,
     onChangeText: fn(),
     onRightIconPress: fn(),
   },
   argTypes: {
-    state: {
-      control: "select",
-      options: ["default", "filled", "active", "error", "disabled"],
-    },
+    disabled: { control: "boolean" },
+    error: { control: "boolean" },
     size: {
       control: "select",
       options: ["lg", "sm"],
@@ -33,24 +33,18 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: { state: "default" },
-};
+export const Default: Story = {};
 
 export const Filled: Story = {
-  args: { state: "filled", value: "Filled value" },
-};
-
-export const Active: Story = {
-  args: { state: "active" },
+  args: { value: "Filled value" },
 };
 
 export const Error: Story = {
-  args: { state: "error", hint: "Hint" },
+  args: { error: true, hint: "Hint" },
 };
 
 export const Disabled: Story = {
-  args: { state: "disabled", value: "Disabled value" },
+  args: { disabled: true, value: "Disabled value" },
 };
 
 export const WithoutIcons: Story = {
@@ -64,46 +58,23 @@ export const WithoutLabelAndHint: Story = {
 export const AllStates: Story = {
   render: () => (
     <View style={storyStyles.column}>
+      <Input label="Label" hint="Hint" showLeftIcon showRightIcon placeholder="placeholder" />
       <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" error />
       <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"
+        disabled
         value="Disabled value"
       />
     </View>