@butternutbox/pawprint-native 0.3.2 → 0.4.1

package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.tsx

@@ -0,0 +1,292 @@
+import React from "react"
+import { View, ViewProps, Image } from "react-native"
+import styled from "@emotion/native"
+import { Typography } from "../../atoms/Typography"
+import { NumberField } from "../../molecules/NumberField"
+import { Notification } from "../Notification"
+import { parseTokenValue } from "../../../utils"
+
+export type ProductDisplayCardDevice = "desktop" | "mobile"
+
+export type ProductDisplayCardProps = ViewProps & {
+  device?: ProductDisplayCardDevice
+  title: string
+  subtext?: string | React.ReactNode
+  showSubtext?: boolean
+  quantity?: number
+  onQuantityChange?: (quantity: number) => void
+  showQuantityPicker?: boolean
+  disableQuantityButtons?: boolean
+  hideQuantityButtons?: boolean
+  showIncrementButton?: boolean
+  showDecrementButton?: boolean
+  incrementDisabled?: boolean
+  decrementDisabled?: boolean
+  image?: string | React.ReactNode
+  imageBackgroundColor?: string
+  showImageQuantityBadge?: boolean
+  banner?: React.ReactNode
+  showBanner?: boolean
+  bannerType?: "error" | "success" | "warning" | "info"
+  showBannerIcon?: boolean
+}
+
+const StyledCardContainer = styled(View)<{
+  cardDevice: ProductDisplayCardDevice
+}>(({ theme }) => {
+  const { spacing, borderRadius } = theme.tokens.semantics.dimensions
+  const { colour } = theme.tokens.semantics
+  const spacingMd = parseTokenValue(spacing.md)
+  const spacingXl = parseTokenValue(spacing.xl)
+  return {
+    flexDirection: "row",
+    width: "100%",
+    height: "100%",
+    maxHeight: spacingXl * 6 + spacingMd,
+    backgroundColor: colour.background.surface.default,
+    borderWidth: 1,
+    borderColor: colour.border.default,
+    borderRadius: parseTokenValue(borderRadius.md),
+    overflow: "hidden",
+    shadowColor: "#522a10",
+    shadowOffset: { width: 0, height: spacingMd / 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: spacingXl - 4,
+    elevation: 5,
+    zIndex: 1
+  }
+})
+
+const StyledImage = styled(View)<{ imageBackgroundColor?: string }>(
+  ({ theme, imageBackgroundColor }) => ({
+    flexShrink: 0,
+    backgroundColor:
+      imageBackgroundColor ||
+      theme.tokens.semantics.colour.background.container.secondary,
+    overflow: "hidden",
+    aspectRatio: "1 / 1",
+    height: "100%",
+    position: "relative"
+  })
+)
+
+const StyledQuantityBadge = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+  const borderRadius = theme.tokens.semantics.dimensions.borderRadius
+  const { colour } = theme.tokens.semantics
+
+  return {
+    position: "absolute",
+    top: parseTokenValue(spacing["2xs"]),
+    right: parseTokenValue(spacing["2xs"]),
+    backgroundColor: colour.background.container.brand,
+    borderRadius: parseTokenValue(borderRadius.xs),
+    paddingHorizontal: parseTokenValue(spacing.sm),
+    height: parseTokenValue(spacing["2xl"]),
+    minWidth: parseTokenValue(spacing["2xl"]),
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2
+  }
+})
+
+const StyledContentArea = styled(View)<{
+  contentDevice: ProductDisplayCardDevice
+}>(({ theme }) => {
+  const { spacing } = theme.tokens.semantics.dimensions
+  return {
+    flex: 1,
+    paddingHorizontal: parseTokenValue(spacing.md),
+    paddingVertical: parseTokenValue(spacing.md),
+    gap: parseTokenValue(spacing.xs),
+    justifyContent: "space-between"
+  }
+})
+
+const StyledTextContainer = styled(View)(() => ({
+  gap: 2
+}))
+
+const StyledBannerWrapper = styled(View)(() => ({
+  width: "100%",
+  marginTop: -48,
+  paddingTop: 24,
+  paddingBottom: 16
+}))
+
+const StyledRootWrapper = styled(View)(() => {
+  return {
+    flexDirection: "column",
+    width: "100%",
+    height: "100%"
+  }
+})
+
+const StyledNotification = styled(Notification as any)(({ theme }) => {
+  const { spacing } = theme.tokens.semantics.dimensions
+  return {
+    top: parseTokenValue(spacing.md),
+    paddingHorizontal: parseTokenValue(spacing.xl),
+    paddingVertical: parseTokenValue(spacing.md)
+  }
+})
+
+/**
+ * Product Display Card component for showing product information with optional quantity picker.
+ *
+ * @example
+ * ```tsx
+ * import { ProductDisplayCard } from "@butternutbox/pawprint-native"
+ *
+ * <ProductDisplayCard
+ *   device="mobile"
+ *   title="Premium Recipe"
+ *   subtext="+£0.00/pouch"
+ *   quantity={1}
+ *   showQuantityPicker
+ * />
+ * ```
+ *
+ * @param device - *(optional)* Device variant: "desktop" or "mobile" (default)
+ * @param title - Product title
+ * @param subtext - *(optional)* Subtitle text or JSX element (e.g. price)
+ * @param showSubtext - *(optional)* Show/hide subtext
+ * @param quantity - *(optional)* Current quantity value
+ * @param onQuantityChange - *(optional)* Callback when quantity changes
+ * @param showQuantityPicker - *(optional)* Show/hide quantity picker
+ * @param image - *(optional)* Image URL string or React element/JSX content
+ * @param imageBackgroundColor - *(optional)* Background color for image container (default: theme background.container.secondary)
+ * @param showImageQuantityBadge - *(optional)* Show/hide quantity badge overlay on image
+ * @param banner - *(optional)* Banner content to show below card
+ * @param showBanner - *(optional)* Show/hide banner
+ * @param bannerType - *(optional)* Banner notification type: "error", "success", "warning", or "info" (default)
+ * @param showBannerIcon - *(optional)* Show/hide banner notification icon
+ */
+export const ProductDisplayCard = React.forwardRef<
+  View,
+  ProductDisplayCardProps
+>(
+  (
+    {
+      device = "mobile",
+      title,
+      subtext,
+      showSubtext = true,
+      quantity = 1,
+      onQuantityChange,
+      showQuantityPicker = false,
+      disableQuantityButtons = false,
+      hideQuantityButtons = false,
+      showIncrementButton,
+      showDecrementButton,
+      incrementDisabled = false,
+      decrementDisabled = false,
+      image,
+      imageBackgroundColor,
+      showImageQuantityBadge = false,
+      banner,
+      showBanner = false,
+      bannerType = "info",
+      showBannerIcon = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const handleQuantityChange = (newQuantity: number) => {
+      if (newQuantity >= 1) {
+        onQuantityChange?.(newQuantity)
+      }
+    }
+
+    const cardContent = (
+      <StyledCardContainer ref={ref} cardDevice={device} {...rest}>
+        {image && (
+          <StyledImage imageBackgroundColor={imageBackgroundColor}>
+            {typeof image === "string" ? (
+              <Image
+                source={{ uri: image }}
+                style={{ width: "100%", height: "100%" }}
+              />
+            ) : (
+              image
+            )}
+            {showImageQuantityBadge && quantity && (
+              <StyledQuantityBadge>
+                <Typography variant="body" size="sm" weight="bold">
+                  {quantity}
+                </Typography>
+              </StyledQuantityBadge>
+            )}
+          </StyledImage>
+        )}
+
+        <StyledContentArea contentDevice={device}>
+          <StyledTextContainer>
+            <Typography variant="heading" size="xs" color="primary">
+              {title}
+            </Typography>
+
+            {showSubtext && subtext && (
+              <Typography variant="body" size="sm" color="secondary">
+                {subtext}
+              </Typography>
+            )}
+          </StyledTextContainer>
+
+          {showQuantityPicker && (
+            <View style={{ marginLeft: "auto" }}>
+              <NumberField
+                size="sm"
+                value={String(quantity)}
+                onChangeText={(text) => {
+                  const value = parseInt(text, 10)
+                  if (!isNaN(value)) {
+                    handleQuantityChange(value)
+                  }
+                }}
+                onIncrement={() => handleQuantityChange(quantity + 1)}
+                onDecrement={() => handleQuantityChange(quantity - 1)}
+                min={1}
+                accessible
+                accessibilityLabel={`Quantity: ${quantity}`}
+                showIncrementButton={
+                  showIncrementButton !== undefined
+                    ? showIncrementButton
+                    : !hideQuantityButtons
+                }
+                showDecrementButton={
+                  showDecrementButton !== undefined
+                    ? showDecrementButton
+                    : !hideQuantityButtons
+                }
+                incrementDisabled={incrementDisabled || disableQuantityButtons}
+                decrementDisabled={decrementDisabled || disableQuantityButtons}
+              />
+            </View>
+          )}
+        </StyledContentArea>
+      </StyledCardContainer>
+    )
+
+    if (showBanner && banner) {
+      return (
+        <StyledRootWrapper>
+          {cardContent}
+          <StyledBannerWrapper>
+            <StyledNotification
+              variant="inline"
+              type={bannerType}
+              showIcon={showBannerIcon}
+            >
+              {banner}
+            </StyledNotification>
+          </StyledBannerWrapper>
+        </StyledRootWrapper>
+      )
+    }
+
+    return cardContent
+  }
+)
+
+ProductDisplayCard.displayName = "ProductDisplayCard"

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

@@ -0,0 +1,5 @@
+export { ProductDisplayCard } from "./ProductDisplayCard"
+export type {
+  ProductDisplayCardProps,
+  ProductDisplayCardDevice
+} from "./ProductDisplayCard"

package/src/components/molecules/ProductListingCard/Badge.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { Typography } from "../../atoms/Typography"
+
+const parseTokenValue = (value: string | number): number => {
+  if (typeof value === "number") return value
+  return parseFloat(value)
+}
+
+type BadgeOwnProps = {
+  icon?: React.ReactNode
+  text: React.ReactNode
+}
+
+export type BadgeProps = BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps>
+
+const BadgeContainer = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+  const { sizing, borderRadius } = theme.tokens.semantics.dimensions
+  const { colour } = theme.tokens.semantics
+
+  return {
+    display: "flex",
+    flexDirection: "row",
+    gap: parseTokenValue(spacing["2xs"]),
+    alignItems: "center",
+    justifyContent: "center",
+    height: parseTokenValue(sizing["2xl"]),
+    paddingRight: parseTokenValue(spacing.sm),
+    backgroundColor: colour.background.container.alt,
+    borderTopRightRadius: parseTokenValue(borderRadius.xs),
+    borderBottomRightRadius: parseTokenValue(borderRadius.xs)
+  }
+})
+
+const BadgeIcon = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+  const sizing = theme.tokens.semantics.dimensions.sizing
+
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: parseTokenValue(sizing.md),
+    height: parseTokenValue(sizing.md),
+    marginLeft: parseTokenValue(spacing.xs),
+    flexShrink: 0
+  }
+})
+
+export const Badge = React.forwardRef<View, BadgeProps>(
+  ({ icon, text, ...rest }, ref) => {
+    return (
+      <BadgeContainer ref={ref} {...rest}>
+        {icon && <BadgeIcon>{icon}</BadgeIcon>}
+        <Typography variant="body" size="sm" weight="bold">
+          {text}
+        </Typography>
+      </BadgeContainer>
+    )
+  }
+)
+
+Badge.displayName = "ProductListingCard.Badge"

package/src/components/molecules/ProductListingCard/Grid.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { View, ViewProps, useWindowDimensions } from "react-native"
+import styled from "@emotion/native"
+import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
+
+type ProductListingCardGridOwnProps = {
+  children: React.ReactNode
+  xs?: number
+  md?: number
+  lg?: number
+}
+
+export type ProductListingCardGridProps = ProductListingCardGridOwnProps &
+  Omit<ViewProps, keyof ProductListingCardGridOwnProps>
+
+const StyledGrid = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    display: "grid",
+    "grid-column-gap": spacing.sm,
+    "grid-row-gap": spacing.xl
+  } as any
+})
+
+export const Grid = React.forwardRef<View, ProductListingCardGridProps>(
+  ({ children, xs = 1, md = 2, lg = 3, ...rest }, ref) => {
+    const { width } = useWindowDimensions()
+
+    const breakpoints =
+      DEFAULT_THEME_OPTIONS.tokens.semantics.dimensions.breakpoints.spacing
+    const SM_BREAKPOINT = parseFloat(String(breakpoints.sm))
+    const MD_BREAKPOINT = parseFloat(String(breakpoints.md))
+
+    const getItemsPerRow = () => {
+      if (width >= MD_BREAKPOINT) return lg
+      if (width >= SM_BREAKPOINT) return md
+      return xs
+    }
+
+    const itemsPerRow = getItemsPerRow()
+
+    return (
+      <StyledGrid
+        ref={ref}
+        style={
+          {
+            gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`
+          } as any
+        }
+        {...rest}
+      >
+        {children}
+      </StyledGrid>
+    )
+  }
+)
+
+Grid.displayName = "ProductListingCard.Grid"

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

@@ -0,0 +1,209 @@
+import React from "react"
+import { View } from "react-native"
+import { ProductListingCard } from "./ProductListingCard"
+import { Badge } from "./Badge"
+import { ThumbsUpFilledPrimary } from "@butternutbox/pawprint-icons/marketing"
+
+const defaultBadge = (
+  <Badge icon={<ThumbsUpFilledPrimary />} text="New & improved" />
+)
+
+const placeholderImage = {
+  uri: "https://placehold.co/232x232"
+}
+
+export default {
+  title: "Molecules/ProductListingCard",
+  component: ProductListingCard,
+  argTypes: {
+    image: {
+      description: "Product image source"
+    },
+    imageAlt: {
+      control: "text",
+      description: "Alt text for the product image"
+    },
+    badge: {
+      description: "Badge content to display in the top-left corner"
+    },
+    category: {
+      description: "Product category Typography element(s)"
+    },
+    title: {
+      description: "Product name/title Typography element(s)"
+    },
+    size: {
+      description: "Product size or variant Typography element(s)"
+    },
+    price: {
+      description: "Price content Typography element(s)"
+    },
+    showBadge: {
+      control: "boolean",
+      description: "Toggle badge visibility"
+    },
+    showCategory: {
+      control: "boolean",
+      description: "Toggle category visibility"
+    },
+    showTitle: {
+      control: "boolean",
+      description: "Toggle product title visibility"
+    },
+    showSize: {
+      control: "boolean",
+      description: "Toggle product size visibility"
+    },
+    showPrice: {
+      control: "boolean",
+      description: "Toggle price visibility"
+    }
+  }
+}
+
+export const Default = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={placeholderImage}
+        imageAlt="Fish Oil Product"
+        badge={defaultBadge}
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}
+
+export const WithoutBadge = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={placeholderImage}
+        imageAlt="Fish Oil Product"
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        showBadge={false}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}
+
+export const MinimalInfo = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={{ uri: "https://placeholder.co/232x232" }}
+        imageAlt="Product"
+        title="Product Name"
+        price="£9.99"
+        showBadge={false}
+        showCategory={false}
+        showSize={false}
+      />
+    </View>
+  )
+}
+
+export const FullyCustomized = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={{ uri: "https://placehold.co/232x232" }}
+        imageAlt="Premium Item"
+        badge={<Badge icon="⭐" text="Premium" />}
+        category="Premium Collection"
+        title="Deluxe Supplement Pack"
+        size="500ml x 3 bottles"
+        price="From £24.99"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}
+
+export const Grid = {
+  render: () => (
+    <View style={{ width: "100%", padding: 16 }}>
+      <ProductListingCard.Grid xs={1} md={2} lg={3}>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <ProductListingCard
+            key={i}
+            image={placeholderImage}
+            imageAlt="Fish Oil Product"
+            badge={defaultBadge}
+            category="Daily supplements"
+            title="Fish Oil"
+            size="200ml"
+            price="From £7.49"
+            showBadge={true}
+            showCategory={true}
+            showTitle={true}
+            showSize={true}
+            showPrice={true}
+          />
+        ))}
+      </ProductListingCard.Grid>
+    </View>
+  )
+}
+
+export const Playground = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={placeholderImage}
+        imageAlt="Fish Oil Product"
+        badge={defaultBadge}
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}
+
+export const WithWasPrice = {
+  render: () => (
+    <View style={{ width: 232, alignSelf: "flex-start" }}>
+      <ProductListingCard
+        image={placeholderImage}
+        imageAlt="Fish Oil Product"
+        badge={defaultBadge}
+        category="Daily supplements"
+        title="Fish Oil"
+        size="200ml"
+        price="From £7.49"
+        wasPrice="£12.50"
+        showBadge={true}
+        showCategory={true}
+        showTitle={true}
+        showSize={true}
+        showPrice={true}
+      />
+    </View>
+  )
+}