@butternutbox/pawprint-native 0.3.2 → 0.4.1

package/src/components/molecules/TabNavigation/TabNavigation.tsx

@@ -0,0 +1,354 @@
+import React from "react"
+import {
+  View,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  ViewProps
+} from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import * as TabsPrimitive from "@rn-primitives/tabs"
+import { Typography, type TypographyProps } from "../../atoms/Typography"
+import { Animated, type AnimatedVariant } from "../Animated"
+
+type TabNavigationLayout = "fixed" | "intrinsic"
+
+// Typography's token-mode `color` is typed against the semantic text-colour
+// set. The selected/unselected label colour (#a43260) is part of it, but the
+// inactive label (Figma uses brown-5) is not — hence the cast below.
+type TabLabelColour = Extract<TypographyProps, { token: object }>["color"]
+
+type TabNavigationContextValue = {
+  layout: TabNavigationLayout
+  animation: AnimatedVariant
+}
+
+const TabNavigationContext = React.createContext<
+  TabNavigationContextValue | undefined
+>(undefined)
+
+const useTabNavigationContext = (): TabNavigationContextValue => {
+  const context = React.useContext(TabNavigationContext)
+
+  if (!context) {
+    throw new Error(
+      "TabNavigation.List, TabNavigation.Tab and TabNavigation.Panel must be used within a TabNavigation component."
+    )
+  }
+
+  return context
+}
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+type TabNavigationOwnProps = {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  layout?: TabNavigationLayout
+  animation?: AnimatedVariant
+  children?: React.ReactNode
+}
+
+export type TabNavigationProps = TabNavigationOwnProps &
+  Omit<ViewProps, keyof TabNavigationOwnProps>
+
+type TabNavigationListOwnProps = {
+  children?: React.ReactNode
+}
+
+export type TabNavigationListProps = TabNavigationListOwnProps &
+  Omit<ViewProps, keyof TabNavigationListOwnProps>
+
+type TabNavigationTabOwnProps = {
+  value: string
+  disabled?: boolean
+  children: React.ReactNode
+}
+
+export type TabNavigationTabProps = TabNavigationTabOwnProps &
+  Omit<ViewProps, keyof TabNavigationTabOwnProps>
+
+type TabNavigationPanelOwnProps = {
+  value: string
+  children?: React.ReactNode
+}
+
+export type TabNavigationPanelProps = TabNavigationPanelOwnProps &
+  Omit<ViewProps, keyof TabNavigationPanelOwnProps>
+
+const StyledFixedList = styled(View)({
+  flexDirection: "row",
+  alignItems: "stretch",
+  width: "100%"
+})
+
+const StyledTab = styled(Pressable)<{
+  tabHeight: number
+  tabMinWidth: number
+  tabPaddingTop: number
+  tabPaddingBottom: number
+  tabPaddingHorizontal: number
+  tabGap: number
+  tabBorderWidth: number
+  tabBorderColor: string
+  tabFlex?: number
+}>(
+  ({
+    tabHeight,
+    tabMinWidth,
+    tabPaddingTop,
+    tabPaddingBottom,
+    tabPaddingHorizontal,
+    tabGap,
+    tabBorderWidth,
+    tabBorderColor,
+    tabFlex
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: tabGap,
+    height: tabHeight,
+    minWidth: tabMinWidth,
+    paddingTop: tabPaddingTop,
+    paddingBottom: tabPaddingBottom,
+    paddingHorizontal: tabPaddingHorizontal,
+    borderBottomWidth: tabBorderWidth,
+    borderBottomColor: tabBorderColor,
+    ...(tabFlex !== undefined ? { flex: tabFlex } : { flexShrink: 0 })
+  })
+)
+
+/**
+ * Wraps the tab buttons. In `fixed` layout the tabs share the available width
+ * equally; in `intrinsic` layout the tabs size to their content and the list
+ * scrolls horizontally when they overflow.
+ *
+ * Must be used within a `TabNavigation` component.
+ */
+const TabNavigationList = React.forwardRef<View, TabNavigationListProps>(
+  ({ children, ...rest }, ref) => {
+    const { layout } = useTabNavigationContext()
+
+    if (layout === "intrinsic") {
+      return (
+        <TabsPrimitive.List asChild>
+          <View ref={ref} {...rest}>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.scrollContent}
+            >
+              {children}
+            </ScrollView>
+          </View>
+        </TabsPrimitive.List>
+      )
+    }
+
+    return (
+      <TabsPrimitive.List asChild>
+        <StyledFixedList ref={ref} {...rest}>
+          {children}
+        </StyledFixedList>
+      </TabsPrimitive.List>
+    )
+  }
+)
+
+TabNavigationList.displayName = "TabNavigation.List"
+
+/**
+ * An individual tab button within a `TabNavigation`. Selected tabs render with
+ * a brand bottom border and bold label; unselected tabs use a neutral border
+ * and semibold label. Disabled tabs are muted and non-interactive.
+ *
+ * Wraps `@rn-primitives/tabs` `Trigger` for accessibility (role, selected and
+ * disabled state). Unlike the web version there are no hover or focus-visible
+ * states (not applicable on mobile).
+ *
+ * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
+ * @param {boolean} [disabled=false] - Whether this tab is disabled.
+ * @param {React.ReactNode} children - Tab label (and optional leading content).
+ */
+const TabNavigationTab = React.forwardRef<View, TabNavigationTabProps>(
+  ({ value, disabled = false, children, ...rest }, ref) => {
+    const { layout } = useTabNavigationContext()
+    const { value: selectedValue } = TabsPrimitive.useRootContext()
+    const theme = useTheme()
+    const { tabItem, tabitem } = theme.tokens.components.tabNavigation
+    const { spacing, colour, borderWidth, typography } = tabItem
+
+    const selected = selectedValue === value
+    const token = selected ? typography.selected : typography.default
+    const borderColour = selected
+      ? colour.border.default
+      : colour.border.disabled
+    // TODO: Add token — no component/semantic colour exists for the inactive
+    // tab label, so this falls back to the brown-5 primitive (the Figma value).
+    const textColour: TabLabelColour = disabled
+      ? (theme.tokens.primitives.colour.brand.brown[
+          "5"
+        ] as unknown as TabLabelColour)
+      : colour.text.default
+
+    return (
+      <TabsPrimitive.Trigger value={value} disabled={disabled} asChild>
+        <StyledTab
+          ref={ref}
+          tabHeight={parseTokenValue(tabitem.size.height)}
+          tabMinWidth={parseTokenValue(tabitem.size.minWidth)}
+          tabPaddingTop={parseTokenValue(spacing.topPadding)}
+          tabPaddingBottom={parseTokenValue(spacing.bottomPadding)}
+          tabPaddingHorizontal={parseTokenValue(spacing.horizontalPadding)}
+          tabGap={parseTokenValue(spacing.gap)}
+          tabBorderWidth={parseTokenValue(borderWidth.default)}
+          tabBorderColor={borderColour}
+          tabFlex={layout === "fixed" ? 1 : undefined}
+          {...rest}
+        >
+          <Typography token={token} color={textColour}>
+            {children}
+          </Typography>
+        </StyledTab>
+      </TabsPrimitive.Trigger>
+    )
+  }
+)
+
+TabNavigationTab.displayName = "TabNavigation.Tab"
+
+/**
+ * Content area shown when the tab with the matching `value` is selected. Wraps
+ * `@rn-primitives/tabs` `Content` (which unmounts the inactive panels) and
+ * animates the content with the `Animated` atom (variant set by the parent
+ * `TabNavigation`'s `animation` prop). The enter animation replays each time
+ * the tab becomes active.
+ *
+ * @param {string} value - Matches the `value` of a `TabNavigation.Tab`.
+ * @param {React.ReactNode} [children] - Panel content.
+ */
+const TabNavigationPanel = React.forwardRef<View, TabNavigationPanelProps>(
+  ({ value, children, ...rest }, ref) => {
+    const { animation } = useTabNavigationContext()
+
+    return (
+      <TabsPrimitive.Content value={value} asChild>
+        <Animated ref={ref} variant={animation} exit={false} {...rest}>
+          {children}
+        </Animated>
+      </TabsPrimitive.Content>
+    )
+  }
+)
+
+TabNavigationPanel.displayName = "TabNavigation.Panel"
+
+/**
+ * Top-level navigation that organises content into mutually exclusive views.
+ * Selecting a tab replaces the content area below it. Wraps
+ * `@rn-primitives/tabs` for accessibility.
+ *
+ * Compose with the compound parts:
+ * - `TabNavigation.List` — wraps the tab buttons.
+ * - `TabNavigation.Tab` — an individual tab button.
+ * - `TabNavigation.Panel` — content shown for the matching tab, animated via
+ *   the `Animated` atom.
+ *
+ * Note: API parity with the web `TabNavigation`. The native version uses a
+ * horizontal `ScrollView` for the intrinsic layout and has no hover or
+ * focus-visible states (not applicable on mobile).
+ *
+ * @param {string} [value] - Controlled selected tab value.
+ * @param {string} [defaultValue] - Uncontrolled initial selected tab value. Provide this (or `value`) so a tab is selected on mount.
+ * @param {(value: string) => void} [onValueChange] - Called when the selected tab changes.
+ * @param {"fixed" | "intrinsic"} [layout="fixed"] - `fixed`: tabs share the width equally. `intrinsic`: tabs size to content and the list scrolls horizontally when they overflow.
+ * @param {AnimatedVariant} [animation="slideIn"] - Animation preset applied to each panel's content.
+ *
+ * @example
+ * ```tsx
+ * import { TabNavigation } from "@butternutbox/pawprint-native"
+ *
+ * <TabNavigation defaultValue="give">
+ *   <TabNavigation.List>
+ *     <TabNavigation.Tab value="give">Give & get</TabNavigation.Tab>
+ *     <TabNavigation.Tab value="pack">My pack</TabNavigation.Tab>
+ *   </TabNavigation.List>
+ *   <TabNavigation.Panel value="give">Give content</TabNavigation.Panel>
+ *   <TabNavigation.Panel value="pack">Pack content</TabNavigation.Panel>
+ * </TabNavigation>
+ * ```
+ */
+const TabNavigationRoot = React.forwardRef<View, TabNavigationProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      layout = "fixed",
+      animation = "slideIn",
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const isControlled = typeof value === "string"
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(
+      () => defaultValue ?? ""
+    )
+    const currentValue = isControlled ? value : uncontrolledValue
+
+    const handleValueChange = React.useCallback(
+      (newValue: string) => {
+        if (!isControlled) {
+          setUncontrolledValue(newValue)
+        }
+        onValueChange?.(newValue)
+      },
+      [isControlled, onValueChange]
+    )
+
+    const contextValue = React.useMemo<TabNavigationContextValue>(
+      () => ({ layout, animation }),
+      [layout, animation]
+    )
+
+    return (
+      <TabNavigationContext.Provider value={contextValue}>
+        <TabsPrimitive.Root
+          ref={ref}
+          value={currentValue}
+          onValueChange={handleValueChange}
+          {...rest}
+        >
+          {children}
+        </TabsPrimitive.Root>
+      </TabNavigationContext.Provider>
+    )
+  }
+)
+
+TabNavigationRoot.displayName = "TabNavigation"
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "stretch"
+  }
+})
+
+type TabNavigationComponent = React.ForwardRefExoticComponent<
+  TabNavigationProps & React.RefAttributes<View>
+> & {
+  List: typeof TabNavigationList
+  Tab: typeof TabNavigationTab
+  Panel: typeof TabNavigationPanel
+}
+
+export const TabNavigation = Object.assign(TabNavigationRoot, {
+  List: TabNavigationList,
+  Tab: TabNavigationTab,
+  Panel: TabNavigationPanel
+}) as TabNavigationComponent

package/src/components/molecules/TabNavigation/index.ts

@@ -0,0 +1,7 @@
+export { TabNavigation } from "./TabNavigation"
+export type {
+  TabNavigationProps,
+  TabNavigationListProps,
+  TabNavigationTabProps,
+  TabNavigationPanelProps
+} from "./TabNavigation"

package/src/components/molecules/index.ts

@@ -19,3 +19,7 @@ export * from "./Tooltip"
 export * from "./MessageCard"
 export * from "./DatePicker"
 export * from "./PictureSelector"
+export * from "./Countdown"
+export * from "./ProductListingCard"
+export * from "./ProductDisplayCard"
+export * from "./TabNavigation"

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { parseTokenValue } from "./token"

package/src/utils/token.ts

@@ -0,0 +1 @@
+export const parseTokenValue = (value: string): number => parseFloat(value)