@studio-piot/native-ui 0.16.0 → 0.20.0

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { resolveTabIndex, tabIndicatorFrame } from "./tabsLayout";
+import { TABS_THEME_ROLES } from "./tabsThemeRoles";
+import type { TabsProps } from "./types";
+
+const SLIDE_MS = 300;
+const ICON_SIZE = 17;
+const INDICATOR_HEIGHT = 2;
+
+/**
+ * Underline tabs that switch between views of one screen, e.g. Planned /
+ * Completed. Equal-width labels on a hairline, with an underline that slides
+ * to the active tab. Controlled: `value` + `onChange`.
+ */
+export function Tabs<T extends string = string>({
+  value,
+  onChange,
+  tabs,
+  inset = 0,
+  borderColor: borderColorProp,
+  labelColor: labelColorProp,
+  activeLabelColor: activeLabelColorProp,
+  indicatorColor: indicatorColorProp,
+  style,
+}: TabsProps<T>) {
+  const borderColor = useResolvedFieldColor(borderColorProp, TABS_THEME_ROLES.borderColor);
+  const labelColor = useResolvedFieldColor(labelColorProp, TABS_THEME_ROLES.labelColor);
+  const activeLabelColor = useResolvedFieldColor(
+    activeLabelColorProp,
+    TABS_THEME_ROLES.activeLabelColor,
+  );
+  const indicatorColor = useResolvedFieldColor(
+    indicatorColorProp,
+    TABS_THEME_ROLES.indicatorColor,
+  );
+
+  const index = resolveTabIndex(value, tabs);
+  const width = useRef(0);
+  const laidOut = useRef(false);
+  const xSV = useSharedValue(0);
+  const widthSV = useSharedValue(0);
+  const opacitySV = useSharedValue(0);
+
+  const place = (animated: boolean) => {
+    const frame = tabIndicatorFrame(index, tabs.length, width.current, inset);
+    if (!frame) {
+      opacitySV.value = withTiming(0, { duration: 160 });
+      return;
+    }
+    widthSV.value = frame.width;
+    opacitySV.value = 1;
+    xSV.value = animated
+      ? withTiming(frame.x, { duration: SLIDE_MS, easing: Easing.out(Easing.cubic) })
+      : frame.x;
+  };
+
+  useEffect(() => {
+    // place() reads the latest index and width.
+    if (laidOut.current) place(true);
+  }, [index, tabs.length, inset]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: widthSV.value,
+    opacity: opacitySV.value,
+    transform: [{ translateX: xSV.value }],
+  }));
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <View
+      accessibilityRole="tablist"
+      onLayout={(event) => {
+        width.current = event.nativeEvent.layout.width;
+        place(laidOut.current);
+        laidOut.current = true;
+      }}
+      style={[styles.row, { borderBottomColor: borderColor, paddingHorizontal: inset }, style]}
+    >
+      {tabs.map((tab, i) => {
+        const active = i === index;
+        const color = active ? activeLabelColor : labelColor;
+        return (
+          <Pressable
+            key={tab.value}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active, disabled: tab.disabled }}
+            disabled={tab.disabled}
+            onPress={() => onChange(tab.value)}
+            style={({ pressed }) => [
+              styles.tab,
+              { opacity: tab.disabled ? 0.4 : pressed ? 0.6 : 1 },
+            ]}
+          >
+            {tab.icon ? (
+              <View
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+              >
+                {tab.icon({ color, size: ICON_SIZE })}
+              </View>
+            ) : null}
+            <Text numberOfLines={1} style={[styles.label, { color }]}>
+              {tab.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.indicator, { backgroundColor: indicatorColor }, indicatorStyle]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    flexDirection: "row",
+  },
+  tab: {
+    alignItems: "center",
+    flex: 1,
+    flexDirection: "row",
+    gap: 6,
+    justifyContent: "center",
+    paddingVertical: 12,
+  },
+  label: {
+    fontSize: 15,
+    fontWeight: "600",
+  },
+  indicator: {
+    bottom: 0,
+    height: INDICATOR_HEIGHT,
+    left: 0,
+    position: "absolute",
+  },
+});

package/src/components/Tabs/index.ts

@@ -0,0 +1,3 @@
+export { Tabs } from "./Tabs";
+export { TABS_THEME_ROLES, type TabsThemeColorProp } from "./tabsThemeRoles";
+export type { TabItem, TabsProps } from "./types";

package/src/components/Tabs/tabsLayout.test.ts

@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { resolveTabIndex, tabIndicatorFrame } from "./tabsLayout.ts";
+
+describe("tabIndicatorFrame", () => {
+  it("splits the width evenly and sits under the active tab", () => {
+    assert.deepEqual(tabIndicatorFrame(0, 2, 300), { x: 0, width: 150 });
+    assert.deepEqual(tabIndicatorFrame(1, 2, 300), { x: 150, width: 150 });
+    assert.deepEqual(tabIndicatorFrame(2, 3, 300), { x: 200, width: 100 });
+  });
+
+  it("keeps tabs inside the inset while the row spans the full width", () => {
+    // 360 wide with 16 either side: two tabs of 164.
+    assert.deepEqual(tabIndicatorFrame(0, 2, 360, 16), { x: 16, width: 164 });
+    assert.deepEqual(tabIndicatorFrame(1, 2, 360, 16), { x: 180, width: 164 });
+  });
+
+  it("is hidden with no tabs, no width or no active tab", () => {
+    assert.equal(tabIndicatorFrame(0, 0, 300), null);
+    assert.equal(tabIndicatorFrame(0, 2, 0), null);
+    assert.equal(tabIndicatorFrame(0, 2, 30, 16), null);
+    assert.equal(tabIndicatorFrame(-1, 2, 300), null);
+  });
+});
+
+describe("resolveTabIndex", () => {
+  const tabs = [{ value: "planned" }, { value: "completed" }];
+
+  it("finds the active tab", () => {
+    assert.equal(resolveTabIndex("completed", tabs), 1);
+  });
+
+  it("is -1 for an unknown value", () => {
+    assert.equal(resolveTabIndex("archived", tabs), -1);
+  });
+});

package/src/components/Tabs/tabsLayout.ts

@@ -0,0 +1,23 @@
+/**
+ * Where the active tab's indicator sits: an equal share of the width inside
+ * `inset` on each side (the row and its hairline still span the full width).
+ * Pure so it can be unit-tested.
+ */
+export function tabIndicatorFrame(
+  index: number,
+  count: number,
+  width: number,
+  inset = 0,
+): { x: number; width: number } | null {
+  const inner = width - inset * 2;
+  if (count <= 0 || inner <= 0 || index < 0) return null;
+  const tabWidth = inner / count;
+  return { x: inset + index * tabWidth, width: tabWidth };
+}
+
+export function resolveTabIndex<T extends string>(
+  value: T,
+  tabs: readonly { value: T }[],
+): number {
+  return tabs.findIndex((tab) => tab.value === value);
+}

package/src/components/Tabs/tabsThemeRoles.test.ts

@@ -0,0 +1,14 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { TABS_THEME_ROLES } from "./tabsThemeRoles.ts";
+
+describe("TABS_THEME_ROLES", () => {
+  it("maps colour props to tabs-prefixed roles", () => {
+    assert.deepEqual(TABS_THEME_ROLES, {
+      borderColor: "tabsBorder",
+      labelColor: "tabsLabel",
+      activeLabelColor: "tabsActiveLabel",
+      indicatorColor: "tabsIndicator",
+    });
+  });
+});

package/src/components/Tabs/tabsThemeRoles.ts

@@ -0,0 +1,8 @@
+export const TABS_THEME_ROLES = {
+  borderColor: "tabsBorder",
+  labelColor: "tabsLabel",
+  activeLabelColor: "tabsActiveLabel",
+  indicatorColor: "tabsIndicator",
+} as const;
+
+export type TabsThemeColorProp = keyof typeof TABS_THEME_ROLES;

package/src/components/Tabs/types.ts

@@ -0,0 +1,31 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonIcon } from "../Button";
+
+export type TabItem<T extends string = string> = {
+  value: T;
+  label: string;
+  /** Left of the label, in the label's colour: `({ color, size }) => ReactNode`. */
+  icon?: ButtonIcon;
+  disabled?: boolean;
+};
+
+export type TabsProps<T extends string = string> = {
+  value: T;
+  onChange: (value: T) => void;
+  tabs: readonly TabItem<T>[];
+  /**
+   * Space on each side between the row's edges and the tabs. The hairline
+   * still spans the full width, so a full-bleed row can line its tabs up
+   * with the page content. Default 0.
+   */
+  inset?: number;
+  /** Line under all tabs. Defaults to theme role `tabsBorder`. */
+  borderColor?: string;
+  /** Inactive label. Defaults to theme role `tabsLabel`. */
+  labelColor?: string;
+  /** Active label. Defaults to theme role `tabsActiveLabel`. */
+  activeLabelColor?: string;
+  /** Sliding underline. Defaults to theme role `tabsIndicator`. */
+  indicatorColor?: string;
+  style?: StyleProp<ViewStyle>;
+};

package/src/components/index.ts

@@ -120,6 +120,13 @@ export {
   type TabAccessoryThemeColorProp,
   type TabAccessoryVariant,
 } from "./TabAccessoryButton";
+export {
+  Tabs,
+  TABS_THEME_ROLES,
+  type TabItem,
+  type TabsProps,
+  type TabsThemeColorProp,
+} from "./Tabs";
 export {
   Page,
   PageBleed,

package/src/date-time.ts

@@ -0,0 +1,5 @@
+/**
+ * `@studio-piot/native-ui/date-time`: the date and time field. A separate
+ * entry so `@expo/ui`, which it needs, stays optional for apps without it.
+ */
+export * from "./components/DateTime";

package/src/index.ts

@@ -1,4 +1,4 @@
-export const version = "0.16.0";
+export const version = "0.20.0";
 
 export * from "./theme";
 export { SHEET_TOP_RADIUS, screenPaddingHorizontal } from "./layout";
@@ -124,6 +124,13 @@ export {
   type TabAccessoryThemeColorProp,
   type TabAccessoryVariant,
 } from "./components/TabAccessoryButton";
+export {
+  Tabs,
+  TABS_THEME_ROLES,
+  type TabItem,
+  type TabsProps,
+  type TabsThemeColorProp,
+} from "./components/Tabs";
 export {
   Page,
   PageBleed,

package/src/layout/SheetContainer.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { Platform } from "react-native";
+import { FullWindowOverlay } from "react-native-screens";
+
+/** Renders a bottom sheet above React Navigation native modals (iOS). */
+export function SheetContainer({ children }: { children?: ReactNode }) {
+  if (Platform.OS === "ios") {
+    return <FullWindowOverlay>{children}</FullWindowOverlay>;
+  }
+  return <>{children}</>;
+}