@ecohouse/ui 0.1.5 → 0.1.7

package/src/components/RatingInput/RatingInput.tsx

@@ -0,0 +1,168 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { StarFilledIcon, StarIcon } from "../../icons";
+import { colors, ratingTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+const STAR_COUNT = 5;
+const BASE_ITEM_SIZE = 16;
+const ICON_WIDTH_RATIO = 12.57 / BASE_ITEM_SIZE;
+const ICON_HEIGHT_RATIO = 11.98 / BASE_ITEM_SIZE;
+const STAR_GAP_RATIO = 2 / BASE_ITEM_SIZE;
+
+export interface RatingInputProps extends Omit<ViewProps, "style" | "children"> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  showValue?: boolean;
+  precision?: number;
+  /** Star item size. Glyph dimensions and default spacing scale with it. */
+  size?: number;
+  /** Overrides the proportional spacing between star items. */
+  starGap?: number;
+  readOnly?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  valueStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+  accessibilityLabel?: string;
+}
+
+function clamp(value: number) {
+  return Math.max(0, Math.min(value, STAR_COUNT));
+}
+
+export const RatingInput = forwardRef<ComponentRef<typeof View>, RatingInputProps>(
+  function RatingInput(
+    {
+      value,
+      defaultValue = 0,
+      onValueChange,
+      showValue = true,
+      precision = 1,
+      size = 20,
+      starGap,
+      readOnly = false,
+      disabled = false,
+      style,
+      valueStyle,
+      className,
+      hitSlop = 6,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => clamp(defaultValue));
+    const selectedValue = clamp(isControlled ? value : uncontrolledValue);
+    const selectedStarCount = Math.round(selectedValue);
+    const iconWidth = size * ICON_WIDTH_RATIO;
+    const iconHeight = size * ICON_HEIGHT_RATIO;
+    const resolvedStarGap = starGap ?? size * STAR_GAP_RATIO;
+    const resolvedAccessibilityLabel =
+      accessibilityLabel ?? (readOnly ? `${selectedValue} out of ${STAR_COUNT} stars` : "Rating");
+
+    useApplyWebClassName(containerRef, className);
+
+    const selectValue = (nextValue: number) => {
+      if (disabled || nextValue === selectedValue) return;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        {showValue ? (
+          <Text numberOfLines={1} style={[styles.value, valueStyle]}>
+            {selectedValue.toFixed(precision)}
+          </Text>
+        ) : null}
+
+        <View
+          accessibilityRole={readOnly ? "image" : "radiogroup"}
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessibilityState={{ disabled }}
+          style={[styles.stars, { gap: resolvedStarGap }]}
+        >
+          {Array.from({ length: STAR_COUNT }, (_, index) => {
+            const starValue = index + 1;
+            const isSelected = starValue <= selectedStarCount;
+            const icon = isSelected ? (
+              <StarFilledIcon size={iconWidth} height={iconHeight} />
+            ) : (
+              <StarIcon size={iconWidth} height={iconHeight} />
+            );
+            const itemStyle = [styles.starItem, { width: size, height: size }];
+
+            if (readOnly) {
+              return (
+                <View key={starValue} style={itemStyle}>
+                  {icon}
+                </View>
+              );
+            }
+
+            return (
+              <Pressable
+                key={starValue}
+                disabled={disabled}
+                hitSlop={hitSlop}
+                onPress={() => selectValue(starValue)}
+                accessibilityRole="radio"
+                accessibilityLabel={`${starValue} star${starValue === 1 ? "" : "s"}`}
+                accessibilityState={{ checked: isSelected, disabled }}
+                style={itemStyle}
+              >
+                {icon}
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    alignSelf: "flex-start",
+    gap: 16,
+  },
+  stars: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  starItem: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  value: {
+    ...ratingTypography,
+    color: colors.white,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});

package/src/components/RatingInput/index.ts

@@ -0,0 +1,2 @@
+export { RatingInput } from "./RatingInput";
+export type { RatingInputProps } from "./RatingInput";

package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { LayoutGridIcon } from "../../icons";
+import { SegmentedToggle } from "./SegmentedToggle";
+
+const optionsWithIcons = [
+  { value: "grid", label: "Label", icon: LayoutGridIcon },
+  { value: "list", label: "Label", icon: LayoutGridIcon },
+] as const;
+
+const optionsWithoutIcons = [
+  { value: "first", label: "Label" },
+  { value: "second", label: "Label" },
+] as const;
+
+const meta = {
+  title: "Components/SegmentedToggle",
+  component: SegmentedToggle,
+  args: {
+    options: optionsWithIcons,
+    defaultValue: "grid",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof SegmentedToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithIcons: Story = {};
+
+export const WithoutIcons: Story = {
+  args: { options: optionsWithoutIcons, defaultValue: "first" },
+};
+
+export const ContentWidth: Story = {
+  args: { fullWidth: false },
+};
+
+export const In400PixelContainer: Story = {
+  render: () => (
+    <View style={storyStyles.container}>
+      <SegmentedToggle options={optionsWithIcons} defaultValue="grid" />
+    </View>
+  ),
+};
+
+function ControlledSegmentedToggle() {
+  const [value, setValue] = useState("grid");
+  return <SegmentedToggle options={optionsWithIcons} value={value} onValueChange={setValue} />;
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledSegmentedToggle />,
+};
+
+const storyStyles = StyleSheet.create({
+  container: {
+    width: 400,
+  },
+});

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -0,0 +1,221 @@
+import { forwardRef, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent } from "../../icons";
+import { colors, segmentedToggleTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface SegmentedToggleOption {
+  value: string;
+  label: string;
+  icon?: IconComponent;
+}
+
+export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
+  options: readonly [SegmentedToggleOption, SegmentedToggleOption];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const ICON_SIZE = 20;
+const ANIMATION_DURATION = 200;
+
+export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
+  function SegmentedToggle(
+    {
+      options,
+      value,
+      defaultValue = options[0].value,
+      onValueChange,
+      fullWidth = true,
+      disabled = false,
+      style,
+      className,
+      hitSlop,
+      onLayout,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const selectedValue = isControlled ? value : uncontrolledValue;
+    const selectedIndex = Math.max(
+      0,
+      options.findIndex(({ value: optionValue }) => optionValue === selectedValue),
+    );
+    const resolvedClassName = className?.trim() || undefined;
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const progress = useRef(new Animated.Value(selectedIndex)).current;
+    const [contentWidths, setContentWidths] = useState<[number, number]>([0, 0]);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
+    const widestContentWidth = Math.max(...contentWidths);
+    const contentBasedOptionWidth = widestContentWidth > 0 ? widestContentWidth + 24 * 2 : 0;
+    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const indicatorTranslateX = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, optionWidth + 4],
+    });
+
+    useApplyWebClassName(containerRef, resolvedClassName);
+
+    useEffect(() => {
+      const animation = Animated.timing(progress, {
+        toValue: selectedIndex,
+        duration: ANIMATION_DURATION,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      });
+
+      animation.start();
+      return () => animation.stop();
+    }, [progress, selectedIndex]);
+
+    const selectOption = (nextValue: string) => {
+      if (disabled || nextValue === selectedValue) return;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        onLayout={(event) => {
+          const nextWidth = event.nativeEvent.layout.width;
+          setContainerWidth((currentWidth) =>
+            currentWidth === nextWidth ? currentWidth : nextWidth,
+          );
+          onLayout?.(event);
+        }}
+        style={[
+          styles.base,
+          fullWidth ? styles.fullWidth : styles.contentWidth,
+          disabled && styles.disabled,
+          style,
+        ]}
+        accessibilityRole="radiogroup"
+      >
+        {optionWidth > 0 ? (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.activeIndicator,
+              { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] },
+            ]}
+          />
+        ) : null}
+        {options.map(({ value: optionValue, label, icon: Icon }, index) => {
+          const selected = optionValue === selectedValue;
+          const iconColor = selected ? colors.primary : colors.whiteAlpha20;
+          const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
+
+          return (
+            <Pressable
+              key={optionValue}
+              onPress={() => selectOption(optionValue)}
+              disabled={disabled}
+              hitSlop={hitSlop}
+              accessibilityRole="radio"
+              accessibilityLabel={label}
+              accessibilityState={{ selected, disabled }}
+              style={[
+                styles.option,
+                fullWidth ? styles.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth },
+              ]}
+            >
+              <View
+                onLayout={(event) => {
+                  const nextWidth = event.nativeEvent.layout.width;
+                  setContentWidths((currentWidths) => {
+                    if (currentWidths[index] === nextWidth) return currentWidths;
+                    const nextWidths: [number, number] = [currentWidths[0], currentWidths[1]];
+                    nextWidths[index] = nextWidth;
+                    return nextWidths;
+                  });
+                }}
+                style={styles.optionContent}
+              >
+                {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
+                <Text numberOfLines={1} style={[styles.label, { color: labelColor }]}>
+                  {label}
+                </Text>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  base: {
+    height: 44,
+    flexDirection: "row",
+    padding: 4,
+    gap: 4,
+    borderRadius: 60,
+    backgroundColor: colors.grey700,
+    overflow: "hidden",
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch",
+  },
+  contentWidth: {
+    alignSelf: "flex-start",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  option: {
+    zIndex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    borderRadius: 60,
+  },
+  optionContent: {
+    maxWidth: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  optionFullWidth: {
+    flex: 1,
+    minWidth: 0,
+  },
+  activeIndicator: {
+    position: "absolute",
+    top: 4,
+    left: 4,
+    height: 36,
+    backgroundColor: colors.grey600,
+    borderRadius: 60,
+  },
+  label: {
+    ...segmentedToggleTypography,
+    flexShrink: 1,
+  },
+});

package/src/components/SegmentedToggle/index.ts

@@ -0,0 +1,2 @@
+export { SegmentedToggle } from "./SegmentedToggle";
+export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";

package/src/components/StatCard/StatCard.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { UsersAltIcon } from "../../icons";
+import { StatCard } from "./StatCard";
+
+const meta = {
+  title: "Components/StatCard",
+  component: StatCard,
+  args: {
+    label: "Label",
+    icon: UsersAltIcon,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof StatCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/StatCard/StatCard.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent } from "../../icons";
+import { colors, statCardTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  icon: IconComponent;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const ICON_SIZE = 28;
+
+export const StatCard = forwardRef<ComponentRef<typeof View>, StatCardProps>(function StatCard(
+  { label, icon: Icon, style, className, accessibilityLabel, ...rest },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const resolvedClassName = className?.trim() || undefined;
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+  useApplyWebClassName(containerRef, resolvedClassName);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[styles.base, style]}
+      accessibilityRole="text"
+      accessibilityLabel={accessibilityLabel ?? label}
+    >
+      <Icon size={ICON_SIZE} color={colors.white} />
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    width: 204.5,
+    minHeight: 114,
+    padding: 24,
+    gap: 16,
+    borderRadius: 20,
+    backgroundColor: colors.grey750,
+  },
+  label: {
+    ...statCardTypography,
+    color: colors.whiteAlpha86,
+  },
+});

package/src/components/StatCard/index.ts

@@ -0,0 +1,2 @@
+export { StatCard } from "./StatCard";
+export type { StatCardProps } from "./StatCard";

package/src/components/index.ts

@@ -1,6 +1,18 @@
 export { Avatar } from "./Avatar";
 export type { AvatarProps, AvatarMenuItem } from "./Avatar";
 
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeVariant } from "./Badge";
+
+export { Counter } from "./Counter";
+export type { CounterProps } from "./Counter";
+
+export { SegmentedToggle } from "./SegmentedToggle";
+export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";
+
+export { StatCard } from "./StatCard";
+export type { StatCardProps } from "./StatCard";
+
 export { Button } from "./Button";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
 
@@ -26,3 +38,9 @@ export type { TextareaProps } from "./Textarea";
 
 export { Toggle } from "./Toggle";
 export type { ToggleProps } from "./Toggle";
+
+export { RatingInput } from "./RatingInput";
+export type { RatingInputProps } from "./RatingInput";
+
+export { CommentCard } from "./CommentCard";
+export type { CommentCardProps } from "./CommentCard";

package/src/icons/Minus/MinusIcon.tsx

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

package/src/icons/Minus/MinusIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MINUS_PATH } from "./minusPath";
+
+export { MINUS_PATH } from "./minusPath";
+
+export function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d={MINUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/Minus/index.ts

@@ -0,0 +1 @@
+export { MinusIcon, MINUS_PATH } from "./MinusIcon";

package/src/icons/Minus/minusPath.ts

@@ -0,0 +1 @@
+export const MINUS_PATH = "M3.33337 8H12.6667";

package/src/icons/Plus/PlusIcon.tsx

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

package/src/icons/Plus/PlusIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { PLUS_PATH } from "./plusPath";
+
+export { PLUS_PATH } from "./plusPath";
+
+export function PlusIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d={PLUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/Plus/index.ts

@@ -0,0 +1 @@
+export { PlusIcon, PLUS_PATH } from "./PlusIcon";

package/src/icons/Plus/plusPath.ts

@@ -0,0 +1 @@
+export const PLUS_PATH = "M8.00004 3.33325V12.6666M3.33337 7.99992H12.6667";

package/src/icons/Sidebar/SidebarIcon.tsx

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