@ecohouse/ui 0.1.23 → 0.1.25

package/package.json

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

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

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { StyleSheet, View } from "react-native";
-import { LayoutGridIcon } from "../../icons";
+import { LayoutGridIcon, ListViewIcon, MapViewIcon } from "../../icons";
 import { SegmentedToggle } from "./SegmentedToggle";
 
 const optionsWithIcons = [
@@ -14,6 +14,21 @@ const optionsWithoutIcons = [
   { value: "second", label: "Label" },
 ] as const;
 
+const multilingualOptions = [
+  { value: "daily", label: "Օրավարձ" },
+  { value: "overnight", label: "Գիշերակաց երկար տարբերակ" },
+] as const;
+
+const multilingualIconOptions = [
+  { value: "list", label: "Ցուցակի տարբերակ", icon: LayoutGridIcon },
+  { value: "map", label: "Քարտեզի շատ երկար տարբերակ", icon: LayoutGridIcon },
+] as const;
+
+const armenianViewOptions = [
+  { value: "list", label: "Ցանկ", icon: ListViewIcon },
+  { value: "map", label: "Քարտեզ", icon: MapViewIcon },
+] as const;
+
 const meta = {
   title: "Components/SegmentedToggle",
   component: SegmentedToggle,
@@ -39,6 +54,38 @@ export const ContentWidth: Story = {
   args: { fullWidth: false },
 };
 
+export const MultilingualContentWidth: Story = {
+  args: {
+    options: multilingualOptions,
+    defaultValue: "daily",
+    fullWidth: false,
+  },
+};
+
+export const MultilingualIconsContentWidth: Story = {
+  args: {
+    options: multilingualIconOptions,
+    defaultValue: "list",
+    fullWidth: false,
+  },
+};
+
+export const ArmenianViewMode: Story = {
+  args: {
+    options: armenianViewOptions,
+    defaultValue: "list",
+    fullWidth: false,
+  },
+};
+
+export const ArmenianViewModeMapSelected: Story = {
+  args: {
+    options: armenianViewOptions,
+    defaultValue: "map",
+    fullWidth: false,
+  },
+};
+
 export const In400PixelContainer: Story = {
   render: () => (
     <View style={storyStyles.container}>

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -37,7 +37,9 @@ export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "childre
 const ICON_SIZE = 20;
 const ANIMATION_DURATION = 200;
 const OPTION_HORIZONTAL_PADDING = 16;
+const OPTION_CONTENT_GAP = 12;
 const OPTION_MIN_WIDTH = 97;
+const OPTION_MEASUREMENT_TOLERANCE = 0.5;
 
 export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
   function SegmentedToggle(
@@ -67,12 +69,23 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     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 optionWidth = fullWidth ? availableOptionWidth : OPTION_MIN_WIDTH;
+    const resolveContentOptionWidth = (contentWidth: number) =>
+      contentWidth > 0
+        ? Math.max(
+            OPTION_MIN_WIDTH,
+            contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE,
+          )
+        : 0;
+    const optionWidths: [number, number] = fullWidth
+      ? [availableOptionWidth, availableOptionWidth]
+      : [resolveContentOptionWidth(contentWidths[0]), resolveContentOptionWidth(contentWidths[1])];
+    const selectedOptionWidth = optionWidths[selectedIndex];
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, optionWidth + 4],
+      outputRange: [0, optionWidths[0] + 4],
     });
 
     useApplyWebClassName(containerRef, resolvedClassName);
@@ -114,16 +127,40 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
         ]}
         accessibilityRole="radiogroup"
       >
-        {optionWidth > 0 ? (
+        {!fullWidth
+          ? options.map(({ value: optionValue, label, icon: Icon }, index) => (
+              <View
+                key={`${optionValue}-measurement`}
+                pointerEvents="none"
+                aria-hidden
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+                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.optionMeasurement}
+              >
+                {Icon ? <Icon size={ICON_SIZE} /> : null}
+                <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
+              </View>
+            ))
+          : null}
+        {selectedOptionWidth > 0 ? (
           <Animated.View
             pointerEvents="none"
             style={[
               styles.activeIndicator,
-              { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] },
+              { width: selectedOptionWidth, transform: [{ translateX: indicatorTranslateX }] },
             ]}
           />
         ) : null}
-        {options.map(({ value: optionValue, label, icon: Icon }) => {
+        {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;
@@ -141,12 +178,22 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                 styles.option,
                 fullWidth
                   ? styles.optionFullWidth
-                  : { width: OPTION_MIN_WIDTH, minWidth: OPTION_MIN_WIDTH },
+                  : [
+                      styles.optionContentWidth,
+                      optionWidths[index] > 0 && { width: optionWidths[index] },
+                    ],
               ]}
             >
               <View style={styles.optionContent}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
-                <Text numberOfLines={1} style={[styles.label, { color: labelColor }]}>
+                <Text
+                  numberOfLines={fullWidth ? 1 : undefined}
+                  style={[
+                    styles.label,
+                    !fullWidth && styles.contentWidthLabel,
+                    { color: labelColor },
+                  ]}
+                >
                   {label}
                 </Text>
               </View>
@@ -190,12 +237,22 @@ const styles = StyleSheet.create({
     maxWidth: "100%",
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    gap: OPTION_CONTENT_GAP,
+  },
+  optionMeasurement: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: OPTION_CONTENT_GAP,
+    opacity: 0,
   },
   optionFullWidth: {
     flex: 1,
     minWidth: 0,
   },
+  optionContentWidth: {
+    minWidth: OPTION_MIN_WIDTH,
+  },
   activeIndicator: {
     position: "absolute",
     top: 4,
@@ -208,4 +265,7 @@ const styles = StyleSheet.create({
     ...segmentedToggleTypography,
     flexShrink: 1,
   },
+  contentWidthLabel: {
+    flexShrink: 0,
+  },
 });