@ecohouse/ui 0.1.29 → 0.1.30

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,305 @@
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent } from "../../icons";
+import { SidebarIcon } from "../../icons";
+import { BrandLogo, MenuItem } from "../../primitives";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { AvatarSimple } from "../AvatarSimple";
+
+export interface SidebarItem {
+  /** Stable identity for React keys. */
+  key: string;
+  label: string;
+  /** Icon component — colored by the sidebar based on active state. */
+  icon: IconComponent;
+  /** Marks the current route / selection. */
+  active?: boolean;
+  onPress?: () => void;
+}
+
+export interface SidebarUser {
+  name: string;
+  email: string;
+  imageUrl?: string | null;
+}
+
+export interface SidebarProps extends Omit<ViewProps, "style" | "children"> {
+  items: readonly SidebarItem[];
+  user: SidebarUser;
+  onLogOut?: () => void;
+  /** Accessible name for the brand mark. Defaults to `"Cortel Booking"`. */
+  logoAccessibilityLabel?: string;
+  /** Accessible name for the nav landmark. Defaults to `"Account navigation"`. */
+  navigationAccessibilityLabel?: string;
+  /** Accessible label when the sidebar is expanded. Defaults to `"Collapse sidebar"`. */
+  collapseAccessibilityLabel?: string;
+  /** Accessible label when the sidebar is collapsed. Defaults to `"Expand sidebar"`. */
+  expandAccessibilityLabel?: string;
+  /** Accessible label for the logout control. Defaults to `"Log out"`. */
+  logOutAccessibilityLabel?: string;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const SIDEBAR_WIDTH = 300;
+const SIDEBAR_COLLAPSED_WIDTH = 72;
+const HEADER_HEIGHT = 64;
+const LOGO_WIDTH = 31;
+const LOGO_HEIGHT = 44;
+const TOGGLE_SIZE = 20;
+const MENU_ICON_SIZE = 16;
+const PROFILE_SECTION_HEIGHT = 80;
+const SIDEBAR_TRANSITION_MS = 300;
+
+export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(function Sidebar(
+  {
+    items,
+    user,
+    onLogOut,
+    logoAccessibilityLabel = "Cortel Booking",
+    navigationAccessibilityLabel = "Account navigation",
+    collapseAccessibilityLabel = "Collapse sidebar",
+    expandAccessibilityLabel = "Expand sidebar",
+    logOutAccessibilityLabel = "Log out",
+    collapsed: collapsedProp,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    style,
+    className,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+  const collapsed = collapsedProp ?? uncontrolledCollapsed;
+  const widthAnim = useRef(
+    new Animated.Value(collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH),
+  ).current;
+  const labelOpacity = useRef(new Animated.Value(collapsed ? 0 : 1)).current;
+
+  useApplyWebClassName(containerRef, className);
+
+  useEffect(() => {
+    const nextWidth = collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH;
+    const nextOpacity = collapsed ? 0 : 1;
+    const timing = {
+      duration: SIDEBAR_TRANSITION_MS,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false,
+    };
+
+    const widthAnimation = Animated.timing(widthAnim, { ...timing, toValue: nextWidth });
+    const opacityAnimation = Animated.timing(labelOpacity, { ...timing, toValue: nextOpacity });
+
+    Animated.parallel([widthAnimation, opacityAnimation]).start();
+    return () => {
+      widthAnimation.stop();
+      opacityAnimation.stop();
+    };
+  }, [collapsed, labelOpacity, widthAnim]);
+
+  const setCollapsed = (next: boolean) => {
+    onCollapsedChange?.(next);
+    if (collapsedProp === undefined) {
+      setUncontrolledCollapsed(next);
+    }
+  };
+
+  return (
+    <Animated.View
+      {...rest}
+      ref={setContainerRef}
+      style={[styles.root, { width: widthAnim }, style]}
+      accessibilityRole="menu"
+    >
+      <View style={[styles.header, collapsed ? styles.headerCollapsed : styles.headerExpanded]}>
+        <Animated.View
+          pointerEvents={collapsed ? "none" : "auto"}
+          style={[
+            styles.logoSlot,
+            {
+              opacity: labelOpacity,
+              maxWidth: collapsed ? 0 : LOGO_WIDTH,
+            },
+          ]}
+          accessibilityElementsHidden={collapsed}
+          importantForAccessibility={collapsed ? "no-hide-descendants" : "auto"}
+        >
+          <BrandLogo
+            accessibilityLabel={logoAccessibilityLabel}
+            height={LOGO_HEIGHT}
+            variant="brand"
+            width={LOGO_WIDTH}
+          />
+        </Animated.View>
+
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
+          accessibilityState={{ expanded: !collapsed }}
+          hitSlop={8}
+          onPress={() => setCollapsed(!collapsed)}
+          style={styles.toggleButton}
+        >
+          <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
+        </Pressable>
+      </View>
+
+      <View
+        accessibilityLabel={navigationAccessibilityLabel}
+        accessibilityRole="menu"
+        style={styles.nav}
+      >
+        {items.map((item) => {
+          const isActive = Boolean(item.active);
+          const iconColor = isActive ? colors.primary : colors.grey300;
+          const Icon = item.icon;
+          const iconNode: ReactNode = (
+            <Icon color={iconColor} size={MENU_ICON_SIZE} strokeWidth={1.5} />
+          );
+
+          return (
+            <MenuItem
+              key={item.key}
+              icon={iconNode}
+              label={item.label}
+              accessibilityLabel={item.label}
+              backgroundColor={isActive ? colors.grey700 : "transparent"}
+              hoverColor={colors.grey700}
+              onPress={item.onPress}
+              labelStyle={[
+                styles.menuLabel,
+                { color: isActive ? colors.white : colors.grey200 },
+                collapsed ? styles.menuLabelCollapsed : styles.menuLabelExpanded,
+              ]}
+              style={[styles.menuItem, collapsed ? styles.menuItemCollapsed : null]}
+            />
+          );
+        })}
+      </View>
+
+      <View style={[styles.footer, collapsed ? styles.footerCollapsed : styles.footerExpanded]}>
+        <AvatarSimple
+          name={user.name}
+          email={user.email}
+          imageUrl={user.imageUrl}
+          onLogOut={onLogOut}
+          logOutAccessibilityLabel={logOutAccessibilityLabel}
+          compact={collapsed}
+        />
+      </View>
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    height: "100%",
+    flexShrink: 0,
+    backgroundColor: colors.dark,
+    borderRightWidth: 1,
+    borderRightColor: colors.grey700,
+    overflow: "hidden",
+  },
+  header: {
+    zIndex: 1,
+    height: HEADER_HEIGHT,
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey700,
+    backgroundColor: colors.dark,
+  },
+  headerExpanded: {
+    justifyContent: "space-between",
+    paddingHorizontal: 24,
+  },
+  headerCollapsed: {
+    justifyContent: "center",
+    paddingHorizontal: 0,
+  },
+  logoSlot: {
+    minWidth: 0,
+    height: LOGO_HEIGHT,
+    flexShrink: 0,
+    overflow: "hidden",
+  },
+  toggleButton: {
+    width: TOGGLE_SIZE,
+    height: TOGGLE_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  nav: {
+    flex: 1,
+    width: "100%",
+    padding: 16,
+    gap: 10,
+  },
+  menuItem: {
+    gap: 8,
+  },
+  menuItemCollapsed: {
+    gap: 0,
+  },
+  menuLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  menuLabelExpanded: {
+    flexGrow: 1,
+    flexShrink: 1,
+    opacity: 1,
+  },
+  menuLabelCollapsed: {
+    flexGrow: 0,
+    flexShrink: 0,
+    width: 0,
+    maxWidth: 0,
+    opacity: 0,
+    overflow: "hidden",
+  },
+  footer: {
+    height: PROFILE_SECTION_HEIGHT,
+    width: "100%",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+  },
+  footerExpanded: {
+    paddingHorizontal: 16,
+  },
+  footerCollapsed: {
+    paddingHorizontal: 0,
+  },
+});

package/src/components/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from "./Sidebar";
+export type { SidebarProps, SidebarItem, SidebarUser } from "./Sidebar";

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export { Avatar } from "./Avatar";
 export type { AvatarProps, AvatarMenuItem } from "./Avatar";
 
+export { AvatarSimple } from "./AvatarSimple";
+export type { AvatarSimpleProps } from "./AvatarSimple";
+
 export { Badge } from "./Badge";
 export type { BadgeProps, BadgeVariant } from "./Badge";
 
@@ -10,6 +13,9 @@ export type { CounterProps } from "./Counter";
 export { SegmentedToggle } from "./SegmentedToggle";
 export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";
 
+export { Sidebar } from "./Sidebar";
+export type { SidebarProps, SidebarItem, SidebarUser } from "./Sidebar";
+
 export { LanguageSwitcher, defaultLanguageOptions } from "./LanguageSwitcher";
 export type { LanguageOption, LanguageSwitcherProps } from "./LanguageSwitcher";
 

package/src/icons/LogOut/logOutPath.ts

@@ -1,3 +1,3 @@
 /** LogOut icon path — 16×16 viewBox. */
 export const LOG_OUT_PATH =
-  "M10.6667 4.66667L14 8L10.6667 11.3333M14 8H6M8 11.3333C8 11.5304 8 11.6289 7.99268 11.7143C7.91655 12.6013 7.26324 13.3312 6.39002 13.5049C6.30602 13.5216 6.20801 13.5324 6.01223 13.5542L5.3313 13.6299C4.30832 13.7435 3.7968 13.8004 3.39044 13.6703C2.84862 13.4969 2.40628 13.101 2.17412 12.5817C2 12.1921 2 11.6775 2 10.6482V5.3518C2 4.32251 2 3.80787 2.17412 3.41835C2.40628 2.89899 2.84862 2.50307 3.39044 2.32969C3.79681 2.19965 4.3083 2.25648 5.33129 2.37015L6.01223 2.44581C6.20808 2.46757 6.306 2.47845 6.39002 2.49515C7.26324 2.66877 7.91655 3.39869 7.99268 4.28574C8 4.37109 8 4.46962 8 4.66667";
+  "M10.6667 4.66667L14 8L10.6667 11.3333M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6";

package/src/index.ts

@@ -1,8 +1,10 @@
 export {
   Avatar,
+  AvatarSimple,
   Badge,
   Counter,
   SegmentedToggle,
+  Sidebar,
   LanguageSwitcher,
   defaultLanguageOptions,
   StatCard,
@@ -21,11 +23,15 @@ export {
 export type {
   AvatarProps,
   AvatarMenuItem,
+  AvatarSimpleProps,
   BadgeProps,
   BadgeVariant,
   CounterProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
+  SidebarProps,
+  SidebarItem,
+  SidebarUser,
   LanguageOption,
   LanguageSwitcherProps,
   StatCardProps,