@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/Drawer/DrawerHeader.tsx

@@ -0,0 +1,244 @@
+import React, { useMemo } from "react"
+import { Image, ImageSourcePropType, View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { DrawerClose } from "./DrawerClose"
+import {
+  DrawerHeaderContext,
+  type DrawerHeaderVariant
+} from "./DrawerHeaderContext"
+import { useDrawerDragContext } from "./DrawerDragContext"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+type DrawerHeaderOwnProps = {
+  variant?: DrawerHeaderVariant
+  imageSource?: ImageSourcePropType
+}
+
+export type DrawerHeaderProps = DrawerHeaderOwnProps &
+  Omit<ViewProps, keyof DrawerHeaderOwnProps>
+
+const StyledGrabberWrapper = styled(View)<{ grabberPaddingTop: number }>(
+  ({ grabberPaddingTop }) => ({
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    paddingTop: grabberPaddingTop
+  })
+)
+
+const StyledGrabberBar = styled(View)<{
+  barWidth: number
+  barHeight: number
+  barBorderRadius: number
+  barColor: string
+}>(({ barWidth, barHeight, barBorderRadius, barColor }) => ({
+  width: barWidth,
+  height: barHeight,
+  borderRadius: barBorderRadius,
+  backgroundColor: barColor
+}))
+
+const StyledHeader = styled(View)<{
+  headerPaddingHorizontal: number
+  headerPaddingBottom: number
+  headerGap: number
+  headerBorderBottomWidth?: number
+  headerBorderColor?: string
+  headerBgColor?: string
+}>(
+  ({
+    headerPaddingHorizontal,
+    headerPaddingBottom,
+    headerGap,
+    headerBorderBottomWidth,
+    headerBorderColor,
+    headerBgColor
+  }) => ({
+    flexDirection: "column",
+    flexShrink: 0,
+    width: "100%",
+    paddingHorizontal: headerPaddingHorizontal,
+    paddingBottom: headerPaddingBottom,
+    gap: headerGap,
+    ...(headerBorderBottomWidth
+      ? {
+          borderBottomWidth: headerBorderBottomWidth,
+          borderBottomColor: headerBorderColor
+        }
+      : {}),
+    ...(headerBgColor ? { backgroundColor: headerBgColor } : {})
+  })
+)
+
+const StyledImageContainer = styled(View)<{
+  imageHeight: number
+  imageBorderRadius: number
+}>(({ imageHeight, imageBorderRadius }) => ({
+  position: "relative",
+  width: "100%",
+  height: imageHeight,
+  borderRadius: imageBorderRadius,
+  overflow: "hidden",
+  flexShrink: 0
+}))
+
+const StyledImageCloseWrapper = styled(View)<{
+  closeTop: number
+  closeRight: number
+}>(({ closeTop, closeRight }) => ({
+  position: "absolute",
+  top: closeTop,
+  right: closeRight,
+  zIndex: 1
+}))
+
+const StyledTitleRow = styled(View)<{ rowGap: number }>(({ rowGap }) => ({
+  flexDirection: "row",
+  gap: rowGap,
+  alignItems: "flex-start",
+  width: "100%",
+  flexShrink: 0
+}))
+
+const StyledTitleContent = styled(View)<{ contentGap: number }>(
+  ({ contentGap }) => ({
+    flexDirection: "column",
+    gap: contentGap,
+    flex: 1,
+    minWidth: 0
+  })
+)
+
+function splitChildren(children: React.ReactNode) {
+  let closeChild: React.ReactNode = null
+  const otherChildren: React.ReactNode[] = []
+
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === DrawerClose) {
+      closeChild = child
+    } else {
+      otherChildren.push(child)
+    }
+  })
+
+  return { closeChild, otherChildren }
+}
+
+/**
+ * Header section of the drawer. Renders a grabber bar automatically and
+ * manages close button placement based on the variant.
+ *
+ * - `titleAndText` (default): title + description on the left, close button on the right.
+ * - `image`: image container with close button absolutely positioned top-right.
+ *   Pass `imageSource` prop for the image.
+ * - `fullBleed`: same layout as `titleAndText` but with a brand background colour.
+ *
+ * @param {"image" | "titleAndText" | "fullBleed"} [variant="titleAndText"] - Header style variant
+ * @param {ImageSourcePropType} [imageSource] - Image source for the `image` variant
+ */
+export const DrawerHeader = React.forwardRef<View, DrawerHeaderProps>(
+  ({ variant = "titleAndText", imageSource, children, ...props }, ref) => {
+    const theme = useTheme()
+    const { drawer, grabber } = theme.tokens.components
+    const { colour, dimensions } = theme.tokens.semantics
+    const dragContext = useDrawerDragContext()
+
+    const contextValue = useMemo(() => ({ variant }), [variant])
+    const { closeChild, otherChildren } = splitChildren(children)
+
+    const headerSpacing = drawer.spacing.drawerHeader[
+      variant === "image" ? "Image" : variant
+    ] as {
+      horizontalPadding: string
+      bottomPadding: string
+      gap: string
+      container?: { gap: string; content?: { gap: string } }
+    }
+
+    let content: React.ReactNode
+
+    if (variant === "image") {
+      content = (
+        <StyledImageContainer
+          imageHeight={parseTokenValue(drawer.size.imageHeader.image.maxHeight)}
+          imageBorderRadius={parseTokenValue(
+            drawer.drawerHeader.borderRadius.image.default
+          )}
+        >
+          {imageSource && (
+            <Image
+              source={imageSource}
+              style={{ width: "100%", height: "100%", resizeMode: "cover" }}
+            />
+          )}
+          {otherChildren}
+          {closeChild && (
+            <StyledImageCloseWrapper
+              closeTop={parseTokenValue(drawer.spacing.close.top.md)}
+              closeRight={parseTokenValue(drawer.spacing.close.right.md)}
+            >
+              {closeChild}
+            </StyledImageCloseWrapper>
+          )}
+        </StyledImageContainer>
+      )
+    } else {
+      const containerGap = headerSpacing.container?.gap ?? "0"
+      const contentGap = headerSpacing.container?.content?.gap ?? "0"
+      content = (
+        <StyledTitleRow rowGap={parseTokenValue(containerGap)}>
+          <StyledTitleContent contentGap={parseTokenValue(contentGap)}>
+            {otherChildren}
+          </StyledTitleContent>
+          {closeChild}
+        </StyledTitleRow>
+      )
+    }
+
+    return (
+      <DrawerHeaderContext.Provider value={contextValue}>
+        <StyledHeader
+          ref={ref}
+          headerPaddingHorizontal={parseTokenValue(
+            headerSpacing.horizontalPadding
+          )}
+          headerPaddingBottom={parseTokenValue(headerSpacing.bottomPadding)}
+          headerGap={parseTokenValue(headerSpacing.gap)}
+          headerBorderBottomWidth={
+            variant === "titleAndText"
+              ? parseTokenValue(dimensions.borderWidth.sm)
+              : undefined
+          }
+          headerBorderColor={
+            variant === "titleAndText" ? colour.border.default : undefined
+          }
+          headerBgColor={
+            variant === "fullBleed"
+              ? drawer.drawerHeader.colour.background.fullBleed
+              : undefined
+          }
+          {...props}
+        >
+          <StyledGrabberWrapper
+            grabberPaddingTop={parseTokenValue(
+              drawer.spacing.grabber.paddingTop
+            )}
+            {...(dragContext?.panHandlers ?? {})}
+          >
+            <StyledGrabberBar
+              barWidth={parseTokenValue(grabber.size.bar.width)}
+              barHeight={parseTokenValue(grabber.size.bar.height)}
+              barBorderRadius={parseTokenValue(dimensions.borderRadius.round)}
+              barColor={grabber.colour.background.default}
+            />
+          </StyledGrabberWrapper>
+          {content}
+        </StyledHeader>
+      </DrawerHeaderContext.Provider>
+    )
+  }
+)
+
+DrawerHeader.displayName = "Drawer.Header"

package/src/components/molecules/Drawer/DrawerHeaderContext.ts

@@ -0,0 +1,13 @@
+import React from "react"
+
+export type DrawerHeaderVariant = "titleAndText" | "image" | "fullBleed"
+
+export type DrawerHeaderContextValue = {
+  variant: DrawerHeaderVariant
+}
+
+export const DrawerHeaderContext =
+  React.createContext<DrawerHeaderContextValue | null>(null)
+
+export const useDrawerHeaderContext = () =>
+  React.useContext(DrawerHeaderContext)

package/src/components/molecules/Drawer/DrawerOverlay.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useRef } from "react"
+import { Animated, Pressable, StyleSheet } from "react-native"
+import { useTheme } from "@emotion/react"
+import { useDrawerContext } from "./DrawerContext"
+
+export type DrawerOverlayProps = {
+  accessible?: boolean
+}
+
+const FADE_DURATION = 220
+
+/**
+ * Full-screen backdrop behind the drawer panel.
+ * Fades in when the drawer opens and fades out when it closes.
+ * Tapping it dismisses the drawer.
+ */
+export const DrawerOverlay = React.forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  DrawerOverlayProps
+>(({ accessible = false }, _ref) => {
+  const theme = useTheme()
+  const { isOpen, closeDrawer } = useDrawerContext()
+  const opacity = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: isOpen ? 1 : 0,
+      duration: FADE_DURATION,
+      useNativeDriver: true
+    }).start()
+  }, [isOpen, opacity])
+
+  return (
+    <Pressable
+      style={StyleSheet.absoluteFillObject}
+      onPress={closeDrawer}
+      accessible={accessible}
+      accessibilityLabel="Close drawer"
+    >
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFillObject,
+          {
+            backgroundColor: theme.tokens.components.modal.overlay.colour,
+            opacity
+          }
+        ]}
+      />
+    </Pressable>
+  )
+})
+
+DrawerOverlay.displayName = "Drawer.Overlay"

package/src/components/molecules/Drawer/DrawerTitle.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+
+export type DrawerTitleProps = {
+  children: React.ReactNode
+} & Omit<ViewProps, "children">
+
+/**
+ * Title text for the drawer header. Uses the heading typography token from
+ * the drawer component tokens.
+ */
+export const DrawerTitle = React.forwardRef<View, DrawerTitleProps>(
+  ({ children, ...props }, ref) => {
+    const theme = useTheme()
+    const { drawerHeader } = theme.tokens.components.drawer
+
+    return (
+      <View ref={ref} {...props}>
+        <Typography
+          token={drawerHeader.typography.title}
+          color={drawerHeader.colour.text.title}
+        >
+          {children}
+        </Typography>
+      </View>
+    )
+  }
+)
+
+DrawerTitle.displayName = "Drawer.Title"

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

@@ -0,0 +1,12 @@
+export { Drawer } from "./Drawer"
+export type { DrawerProps, DrawerTriggerProps } from "./Drawer"
+export type { DrawerContentProps } from "./DrawerContent"
+export type { DrawerOverlayProps } from "./DrawerOverlay"
+export type { DrawerGrabberProps } from "./DrawerGrabber"
+export type { DrawerHeaderProps } from "./DrawerHeader"
+export type { DrawerHeaderVariant } from "./DrawerHeaderContext"
+export type { DrawerTitleProps } from "./DrawerTitle"
+export type { DrawerDescriptionProps } from "./DrawerDescription"
+export type { DrawerCloseProps } from "./DrawerClose"
+export type { DrawerBodyProps } from "./DrawerBody"
+export type { DrawerFooterProps } from "./DrawerFooter"

package/src/components/molecules/FilterTab/FilterTab.stories.tsx

@@ -0,0 +1,210 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { FilterTab } from "./FilterTab"
+import type { FilterTabProps } from "./FilterTab"
+import { FilterAlt } from "@butternutbox/pawprint-icons/core"
+
+export default {
+  title: "Molecules/FilterTab",
+  component: FilterTab,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "lg"],
+      description: "Size of all tab items"
+    },
+    multiple: {
+      control: "boolean",
+      description:
+        "Allow multiple items to be selected. When false, only one item can be selected at a time."
+    }
+  }
+}
+
+// --- Playground ---
+
+export const Playground = {
+  args: {
+    size: "sm",
+    multiple: true
+  },
+  render: (args: FilterTabProps) => {
+    const [value, setValue] = React.useState(["all"])
+    return (
+      <View style={styles.container}>
+        <FilterTab {...args} value={value} onValueChange={setValue}>
+          <FilterTab.Item value="all" label="All" />
+          <FilterTab.Item value="wellness" label="Wellness" />
+          <FilterTab.Item value="treats" label="Treats & Chews" />
+          <FilterTab.Item value="accessories" label="Accessories" />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+// --- Small ---
+
+export const Small = {
+  name: "Small",
+  render: () => {
+    const [value, setValue] = React.useState(["all"])
+    return (
+      <View style={styles.container}>
+        <FilterTab size="sm" value={value} onValueChange={setValue}>
+          <FilterTab.Item value="all" label="All" />
+          <FilterTab.Item value="wellness" label="Wellness" />
+          <FilterTab.Item value="treats" label="Treats & Chews" />
+          <FilterTab.Item value="accessories" label="Accessories" />
+          <FilterTab.Item value="bundles" label="Bundles" />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+// --- Large ---
+
+export const Large = {
+  name: "Large",
+  render: () => {
+    const [value, setValue] = React.useState(["all"])
+    return (
+      <View style={styles.container}>
+        <FilterTab size="lg" value={value} onValueChange={setValue}>
+          <FilterTab.Item value="all" label="All" />
+          <FilterTab.Item value="wellness" label="Wellness" />
+          <FilterTab.Item value="treats" label="Treats & Chews" />
+          <FilterTab.Item value="accessories" label="Accessories" />
+          <FilterTab.Item value="bundles" label="Bundles" />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+// --- With Icons ---
+
+export const WithIcons = {
+  name: "With Icons",
+  render: () => {
+    const [value, setValue] = React.useState(["all"])
+    return (
+      <View style={styles.container}>
+        <FilterTab size="sm" value={value} onValueChange={setValue}>
+          <FilterTab.Item
+            value="all"
+            label="All"
+            leadingIcon={FilterAlt}
+            trailingIcon={FilterAlt}
+          />
+          <FilterTab.Item
+            value="wellness"
+            label="Wellness"
+            leadingIcon={FilterAlt}
+          />
+          <FilterTab.Item value="treats" label="Treats" />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+// --- Icon Only ---
+
+export const IconOnly = {
+  name: "Icon Only",
+  render: () => {
+    const [value, setValue] = React.useState<string[]>([])
+    return (
+      <View style={styles.container}>
+        <FilterTab size="sm" value={value} onValueChange={setValue}>
+          <FilterTab.Item
+            value="filter1"
+            icon={FilterAlt}
+            accessibilityLabel="Filter 1"
+          />
+          <FilterTab.Item
+            value="filter2"
+            icon={FilterAlt}
+            accessibilityLabel="Filter 2"
+          />
+          <FilterTab.Item
+            value="filter3"
+            icon={FilterAlt}
+            accessibilityLabel="Filter 3"
+          />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+// --- Disabled ---
+
+export const Disabled = {
+  name: "Inactive / Disabled",
+  render: () => {
+    const [value, setValue] = React.useState(["all"])
+    return (
+      <View style={styles.container}>
+        <FilterTab size="sm" value={value} onValueChange={setValue}>
+          <FilterTab.Item value="all" label="All" />
+          <FilterTab.Item value="wellness" label="Wellness" disabled />
+          <FilterTab.Item value="treats" label="Treats" disabled />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+// --- Single Select ---
+
+export const SingleSelect = {
+  name: "Single Select",
+  render: () => {
+    const [value, setValue] = React.useState(["all"])
+    return (
+      <View style={styles.container}>
+        <FilterTab
+          size="sm"
+          multiple={false}
+          value={value}
+          onValueChange={setValue}
+        >
+          <FilterTab.Item value="all" label="All" />
+          <FilterTab.Item value="wellness" label="Wellness" />
+          <FilterTab.Item value="treats" label="Treats & Chews" />
+          <FilterTab.Item value="accessories" label="Accessories" />
+          <FilterTab.Item value="bundles" label="Bundles" />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+// --- Multiple Select ---
+
+export const MultipleSelect = {
+  name: "Multiple Select",
+  render: () => {
+    const [value, setValue] = React.useState(["all", "wellness"])
+    return (
+      <View style={styles.container}>
+        <FilterTab size="sm" multiple value={value} onValueChange={setValue}>
+          <FilterTab.Item value="all" label="All" />
+          <FilterTab.Item value="wellness" label="Wellness" />
+          <FilterTab.Item value="treats" label="Treats & Chews" />
+          <FilterTab.Item value="accessories" label="Accessories" />
+          <FilterTab.Item value="bundles" label="Bundles" />
+        </FilterTab>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16
+  }
+})