@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -0,0 +1,310 @@
+import React from "react"
+import { View, Pressable, ViewProps, PressableProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Icon, type PawprintIcon } from "../../atoms/Icon"
+import { Typography } from "../../atoms/Typography"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type FilterTabSize = "sm" | "lg"
+
+type FilterTabRootOwnProps = {
+  size?: FilterTabSize
+  multiple?: boolean
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  children: React.ReactNode
+}
+
+export type FilterTabProps = FilterTabRootOwnProps &
+  Omit<ViewProps, keyof FilterTabRootOwnProps>
+
+type FilterTabItemOwnProps = {
+  value: string
+  label?: string
+  icon?: PawprintIcon
+  leadingIcon?: PawprintIcon
+  trailingIcon?: PawprintIcon
+  disabled?: boolean
+}
+
+export type FilterTabItemProps = FilterTabItemOwnProps &
+  Omit<PressableProps, keyof FilterTabItemOwnProps | "children">
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+type FilterTabContextValue = {
+  size: FilterTabSize
+  selectedValues: string[]
+  toggle: (value: string) => void
+}
+
+const FilterTabContext = React.createContext<FilterTabContextValue>({
+  size: "sm",
+  selectedValues: [],
+  toggle: () => {}
+})
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const StyledRoot = styled(View)<{ rootGap: number }>(({ rootGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: rootGap,
+  flexWrap: "nowrap"
+}))
+
+const StyledItem = styled(Pressable)<{
+  itemHeight: number
+  itemMinWidth: number
+  itemPaddingH: number
+  itemPaddingV: number
+  itemBorderRadius: number
+  itemBgColor: string
+  itemOpacity: number
+  isIconOnly: boolean
+}>(
+  ({
+    itemHeight,
+    itemMinWidth,
+    itemPaddingH,
+    itemPaddingV,
+    itemBorderRadius,
+    itemBgColor,
+    itemOpacity,
+    isIconOnly
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: itemHeight,
+    ...(isIconOnly
+      ? { width: itemHeight, maxWidth: itemHeight }
+      : { minWidth: itemMinWidth }),
+    paddingHorizontal: itemPaddingH,
+    paddingVertical: itemPaddingV,
+    borderRadius: itemBorderRadius,
+    backgroundColor: itemBgColor,
+    opacity: itemOpacity,
+    flexShrink: 0
+  })
+)
+
+// ─── FilterTab.Item ───────────────────────────────────────────────────────────
+
+/**
+ * An individual filter tab button. Must be used inside a `FilterTab` container.
+ *
+ * @param {string} value - Unique identifier for this tab item.
+ * @param {string} [label] - Text label. Omit for icon-only mode.
+ * @param {PawprintIcon} [icon] - Icon for icon-only mode (requires accessibilityLabel).
+ * @param {PawprintIcon} [leadingIcon] - Optional icon before the label.
+ * @param {PawprintIcon} [trailingIcon] - Optional icon after the label.
+ * @param {boolean} [disabled=false] - Disables the tab (inactive state).
+ *
+ * @example
+ * ```tsx
+ * import { FilterTab } from "@butternutbox/pawprint-native"
+ *
+ * <FilterTab.Item value="wellness" label="Wellness" />
+ * ```
+ */
+const FilterTabItem = React.forwardRef<View, FilterTabItemProps>(
+  (
+    {
+      value,
+      label,
+      icon: IconOnlyIcon,
+      leadingIcon,
+      trailingIcon,
+      disabled = false,
+      accessibilityLabel,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { size, selectedValues, toggle } = React.useContext(FilterTabContext)
+    const isSelected = selectedValues.includes(value)
+    const isIconOnly = !!IconOnlyIcon && !label
+    const isActive = isSelected && !disabled
+
+    const { tabItem } = theme.tokens.components.filterTabs
+    const { dimensions } = theme.tokens.semantics
+    const height = parseTokenValue(
+      size === "lg" ? tabItem.size.large.height : tabItem.size.small.height
+    )
+    const minWidth = parseTokenValue(tabItem.size.small.minWidth)
+    const iconColour = isActive
+      ? tabItem.colour.icon.selected
+      : tabItem.colour.icon.unselected
+
+    return (
+      <StyledItem
+        ref={ref}
+        accessible
+        accessibilityRole="button"
+        accessibilityState={{ selected: isSelected, disabled }}
+        accessibilityLabel={isIconOnly ? accessibilityLabel : label}
+        disabled={disabled}
+        onPress={() => {
+          if (!disabled) toggle(value)
+        }}
+        itemHeight={height}
+        itemMinWidth={minWidth}
+        itemPaddingH={parseTokenValue(tabItem.spacing.horizontalPadding)}
+        itemPaddingV={parseTokenValue(tabItem.spacing.verticalPadding)}
+        itemBorderRadius={parseTokenValue(tabItem.borderRadius.default)}
+        itemBgColor={
+          isActive
+            ? tabItem.colour.background.selected
+            : tabItem.colour.background.default
+        }
+        itemOpacity={
+          disabled ? parseFloat(tabItem.opacity.disabled.default) : 1
+        }
+        isIconOnly={isIconOnly}
+        style={{ gap: parseTokenValue(dimensions.spacing["2xs"]) }}
+        {...rest}
+      >
+        {isIconOnly && IconOnlyIcon && (
+          <Icon
+            icon={IconOnlyIcon}
+            size="md"
+            customColour={iconColour}
+            aria-label={accessibilityLabel}
+          />
+        )}
+        {!isIconOnly && leadingIcon && (
+          <Icon
+            icon={leadingIcon}
+            size="md"
+            customColour={iconColour}
+            aria-label={label}
+          />
+        )}
+        {!isIconOnly && label && (
+          <Typography
+            token={
+              isActive
+                ? tabItem.typography.label.default
+                : tabItem.typography.label.inactive
+            }
+            color={
+              disabled
+                ? tabItem.colour.text.inactive
+                : isActive
+                  ? tabItem.colour.text.selected
+                  : tabItem.colour.text.default
+            }
+          >
+            {label}
+          </Typography>
+        )}
+        {!isIconOnly && trailingIcon && (
+          <Icon
+            icon={trailingIcon}
+            size="md"
+            customColour={iconColour}
+            aria-label={label}
+          />
+        )}
+      </StyledItem>
+    )
+  }
+)
+
+FilterTabItem.displayName = "FilterTab.Item"
+
+// ─── FilterTab (Root) ─────────────────────────────────────────────────────────
+
+/**
+ * A horizontal group of pill-shaped filter buttons. One or more tabs can be
+ * selected at a time to filter content. Supports controlled and uncontrolled
+ * selection.
+ *
+ * @param {"sm" | "lg"} [size="sm"] - Size of all tab items.
+ * @param {boolean} [multiple=true] - Allow multiple items to be selected. When false, only one item can be selected at a time.
+ * @param {string[]} [value] - Controlled selected tab values.
+ * @param {string[]} [defaultValue=[]] - Uncontrolled default selected values.
+ * @param {(value: string[]) => void} [onValueChange] - Fires when selection changes.
+ * @param {React.ReactNode} children - One or more `FilterTab.Item` elements.
+ *
+ * @example
+ * ```tsx
+ * import { FilterTab } from "@butternutbox/pawprint-native"
+ *
+ * <FilterTab size="sm" defaultValue={["all"]}>
+ *   <FilterTab.Item value="all" label="All" />
+ *   <FilterTab.Item value="wellness" label="Wellness" />
+ * </FilterTab>
+ * ```
+ */
+const FilterTabRoot = React.forwardRef<View, FilterTabProps>(
+  (
+    {
+      size = "sm",
+      multiple = true,
+      value: controlledValue,
+      defaultValue = [],
+      onValueChange,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { filterTabs } = theme.tokens.components
+
+    const isControlled = controlledValue !== undefined
+    const [internalValue, setInternalValue] =
+      React.useState<string[]>(defaultValue)
+    const selectedValues = isControlled ? controlledValue : internalValue
+
+    const toggle = React.useCallback(
+      (itemValue: string) => {
+        let next: string[]
+        if (multiple) {
+          next = selectedValues.includes(itemValue)
+            ? selectedValues.filter((v) => v !== itemValue)
+            : [...selectedValues, itemValue]
+        } else {
+          next = selectedValues.includes(itemValue) ? [] : [itemValue]
+        }
+
+        if (!isControlled) setInternalValue(next)
+        onValueChange?.(next)
+      },
+      [selectedValues, isControlled, onValueChange, multiple]
+    )
+
+    const contextValue = React.useMemo(
+      () => ({ size, selectedValues, toggle }),
+      [size, selectedValues, toggle]
+    )
+
+    return (
+      <FilterTabContext.Provider value={contextValue}>
+        <StyledRoot
+          ref={ref}
+          rootGap={parseTokenValue(filterTabs.filterTab.spacing.gap)}
+          {...rest}
+        >
+          {children}
+        </StyledRoot>
+      </FilterTabContext.Provider>
+    )
+  }
+)
+
+FilterTabRoot.displayName = "FilterTab"
+
+export const FilterTab = Object.assign(FilterTabRoot, {
+  Item: FilterTabItem
+})

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

@@ -0,0 +1,2 @@
+export { FilterTab } from "./FilterTab"
+export type { FilterTabProps, FilterTabItemProps } from "./FilterTab"

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

@@ -0,0 +1,169 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import {
+  MessageCard,
+  type MessageCardInsightProps,
+  type MessageCardBannerProps
+} from "./MessageCard"
+import { CheckCircle } from "@butternutbox/pawprint-icons/core"
+import { AlsatianChefsHat } from "@butternutbox/pawprint-illustrations/breeds"
+
+export default {
+  title: "Molecules/MessageCard"
+}
+
+export const InsightPlayground = (args: MessageCardInsightProps) => (
+  <View style={styles.column}>
+    <MessageCard.Insight {...args} icon={CheckCircle}>
+      {args.children}
+    </MessageCard.Insight>
+  </View>
+)
+InsightPlayground.args = {
+  variant: "standalone",
+  title: "Healthy from top to tail",
+  children: "Studies show fresh food improves dogs' poos, skin, coat, and gut."
+}
+InsightPlayground.argTypes = {
+  variant: {
+    control: { type: "select" },
+    options: ["standalone", "supporting"],
+    description:
+      "`supporting` renders a flat top edge when attached to a related element above."
+  },
+  title: {
+    control: { type: "text" },
+    description: "Optional headline (only rendered for `standalone`)."
+  },
+  children: { control: { type: "text" }, description: "Body copy." }
+}
+
+export const BannerPlayground = (args: MessageCardBannerProps) => (
+  <View style={styles.column}>
+    <MessageCard.Banner
+      {...args}
+      media={{ type: "illustration", illustration: AlsatianChefsHat }}
+    >
+      {args.children}
+    </MessageCard.Banner>
+  </View>
+)
+BannerPlayground.args = {
+  colourScheme: "primary",
+  title: "Short headline",
+  children: "Lorem ipsum dolor sit amet consectetur sit varius.",
+  linkLabel: "Find out more",
+  linkHref: "https://butternutbox.com"
+}
+BannerPlayground.argTypes = {
+  colourScheme: {
+    control: { type: "select" },
+    options: ["primary", "secondary"],
+    description:
+      "Background colour scheme. `primary` is saturated yellow; `secondary` is a lighter cream."
+  },
+  title: { control: { type: "text" }, description: "Optional headline." },
+  children: { control: { type: "text" }, description: "Body copy." },
+  linkLabel: { control: { type: "text" }, description: "CTA label." },
+  linkHref: { control: { type: "text" }, description: "CTA target URL." }
+}
+
+export const Insight = () => (
+  <View style={styles.column}>
+    <MessageCard.Insight icon={CheckCircle} title="Healthy from top to tail">
+      Studies show fresh food improves dogs' poos, skin, coat, and gut.
+    </MessageCard.Insight>
+  </View>
+)
+
+export const InsightSupporting = () => (
+  <View style={styles.column}>
+    <MessageCard.Insight variant="supporting" icon={CheckCircle}>
+      Studies show fresh food improves dogs' poos, skin, coat, and gut.
+    </MessageCard.Insight>
+  </View>
+)
+
+export const BannerAlt = () => (
+  <View style={styles.column}>
+    <MessageCard.Banner
+      media={{ type: "illustration", illustration: AlsatianChefsHat }}
+      title="Short headline"
+      linkLabel="Find out more"
+      linkHref="https://butternutbox.com"
+    >
+      Lorem ipsum dolor sit amet consectetur sit varius.
+    </MessageCard.Banner>
+  </View>
+)
+
+export const BannerSecondary = () => (
+  <View style={styles.column}>
+    <MessageCard.Banner
+      colourScheme="secondary"
+      media={{ type: "illustration", illustration: AlsatianChefsHat }}
+      title="Short headline"
+      linkLabel="Find out more"
+      linkHref="https://butternutbox.com"
+    >
+      Lorem ipsum dolor sit amet consectetur sit varius.
+    </MessageCard.Banner>
+  </View>
+)
+
+export const BannerImage = () => (
+  <View style={styles.column}>
+    <MessageCard.Banner
+      media={{
+        type: "image",
+        source: {
+          uri: "https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=600"
+        },
+        alt: "Fresh dog food ingredients"
+      }}
+      title="Short headline"
+      linkLabel="Find out more"
+      linkHref="https://butternutbox.com"
+    >
+      Lorem ipsum dolor sit amet consectetur sit varius.
+    </MessageCard.Banner>
+  </View>
+)
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    <MessageCard.Insight icon={CheckCircle} title="Healthy from top to tail">
+      Studies show fresh food improves dogs' poos, skin, coat, and gut.
+    </MessageCard.Insight>
+    <MessageCard.Banner
+      media={{ type: "illustration", illustration: AlsatianChefsHat }}
+      title="Short headline"
+      linkLabel="Find out more"
+      linkHref="https://butternutbox.com"
+    >
+      Lorem ipsum dolor sit amet consectetur sit varius.
+    </MessageCard.Banner>
+    <MessageCard.Banner
+      media={{
+        type: "image",
+        source: {
+          uri: "https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=600"
+        },
+        alt: "Fresh dog food ingredients"
+      }}
+      title="Short headline"
+      linkLabel="Find out more"
+      linkHref="https://butternutbox.com"
+    >
+      Lorem ipsum dolor sit amet consectetur sit varius.
+    </MessageCard.Banner>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 16,
+    width: 358
+  }
+})