@butternutbox/pawprint-native 0.3.2 → 0.4.1

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

@@ -0,0 +1,235 @@
+import React from "react"
+import {
+  View,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  PressableProps
+} from "react-native"
+import styled from "@emotion/native"
+import { Typography } from "../../atoms/Typography"
+import { Badge } from "./Badge"
+import { Grid } from "./Grid"
+
+type ProductListingCardOwnProps = {
+  image?: ImageSourcePropType
+  imageAlt?: string
+  badge?: React.ReactNode
+  category?: string
+  title?: string
+  size?: string
+  price?: string
+  wasPrice?: string
+  showBadge?: boolean
+  showCategory?: boolean
+  showTitle?: boolean
+  showSize?: boolean
+  showPrice?: boolean
+  onPress?: () => void
+}
+
+export type ProductListingCardProps = ProductListingCardOwnProps &
+  Omit<PressableProps, keyof ProductListingCardOwnProps>
+
+const parseTokenValue = (value: string | number): number => {
+  if (typeof value === "number") return value
+  return parseFloat(value)
+}
+
+const StyledRoot = styled(Pressable)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: parseTokenValue(spacing.md),
+    alignItems: "flex-start",
+    width: "100%"
+  }
+})
+
+const ImageContainer = styled(View)({
+  position: "relative",
+  width: "100%",
+  aspectRatio: 1,
+  overflow: "hidden"
+})
+
+const StyledImage = styled(Image)({
+  width: "100%",
+  height: "100%",
+  resizeMode: "cover"
+})
+
+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 {
+    position: "absolute",
+    top: parseTokenValue(spacing.md),
+    left: 0,
+    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.sm),
+    borderBottomRightRadius: parseTokenValue(borderRadius.sm)
+  }
+})
+
+const ContentContainer = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: parseTokenValue(spacing.md),
+    alignItems: "flex-start",
+    width: "100%"
+  }
+})
+
+const DetailsContainer = styled(View)({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  width: "100%"
+})
+
+const CategoryWrapper = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    marginBottom: parseTokenValue(spacing["3xs"])
+  }
+})
+
+const TitleContainer = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    display: "flex",
+    flexDirection: "row",
+    width: "100%",
+    marginBottom: parseTokenValue(spacing.xs)
+  }
+})
+
+const SizeWrapper = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    marginBottom: parseTokenValue(spacing.md)
+  }
+})
+
+const PricingContainer = styled(View)(({ theme }) => {
+  const spacing = theme.tokens.semantics.dimensions.spacing
+
+  return {
+    display: "flex",
+    flexDirection: "row",
+    gap: Math.round(parseFloat(spacing["2xs"] as string)),
+    alignItems: "center",
+    width: "100%"
+  }
+})
+
+const _ProductListingCard = React.forwardRef<View, ProductListingCardProps>(
+  (
+    {
+      image,
+      imageAlt,
+      badge,
+      category,
+      title,
+      size,
+      price,
+      wasPrice,
+      showBadge = true,
+      showCategory = true,
+      showTitle = true,
+      showSize = true,
+      showPrice = true,
+      onPress,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <StyledRoot ref={ref} onPress={onPress} {...rest}>
+        <ImageContainer>
+          {image && (
+            <View style={{ flex: 1, width: "100%", height: "100%" }}>
+              <StyledImage
+                source={image}
+                accessibilityLabel={imageAlt}
+                accessible
+              />
+            </View>
+          )}
+          {showBadge && badge && <BadgeContainer>{badge}</BadgeContainer>}
+        </ImageContainer>
+
+        <ContentContainer>
+          <DetailsContainer>
+            {showCategory && category && (
+              <CategoryWrapper>
+                <Typography variant="body" size="sm" color="secondary">
+                  {category}
+                </Typography>
+              </CategoryWrapper>
+            )}
+            {showTitle && (
+              <TitleContainer>
+                <Typography variant="heading" size="xs">
+                  {title}
+                </Typography>
+              </TitleContainer>
+            )}
+            {showSize && size && (
+              <SizeWrapper>
+                <Typography variant="body" size="md" color="secondary">
+                  {size}
+                </Typography>
+              </SizeWrapper>
+            )}
+          </DetailsContainer>
+
+          {showPrice && price && (
+            <PricingContainer>
+              <Typography variant="body" size="md" color="secondary">
+                {price}
+              </Typography>
+              {wasPrice && (
+                <Typography
+                  variant="body"
+                  size="md"
+                  color="secondary"
+                  textDecoration="line-through"
+                >
+                  {wasPrice}
+                </Typography>
+              )}
+            </PricingContainer>
+          )}
+        </ContentContainer>
+      </StyledRoot>
+    )
+  }
+)
+
+_ProductListingCard.displayName = "ProductListingCard"
+
+const ProductListingCardWithBadgeAndGrid = Object.assign(_ProductListingCard, {
+  Badge,
+  Grid
+}) as typeof _ProductListingCard & { Badge: typeof Badge; Grid: typeof Grid }
+
+export { ProductListingCardWithBadgeAndGrid as ProductListingCard }

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

@@ -0,0 +1,2 @@
+export { ProductListingCard } from "./ProductListingCard"
+export type { ProductListingCardProps } from "./ProductListingCard"

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

@@ -0,0 +1,183 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { TabNavigation } from "./TabNavigation"
+import type { TabNavigationProps } from "./TabNavigation"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/TabNavigation",
+  component: TabNavigation,
+  argTypes: {
+    layout: {
+      control: { type: "select" },
+      options: ["fixed", "intrinsic"],
+      description:
+        "fixed: tabs share the width equally. intrinsic: tabs size to content and scroll horizontally on overflow."
+    },
+    animation: {
+      control: { type: "select" },
+      options: ["fade", "fadeUp", "fadeDown", "scale", "slideIn", "slideOut"],
+      description: "Animation preset applied to each panel's content"
+    },
+    defaultValue: {
+      control: { type: "text" },
+      description: "Uncontrolled initial selected tab value"
+    }
+  }
+}
+
+const PanelBody = ({ children }: { children: React.ReactNode }) => (
+  <View style={styles.panel}>
+    <Typography variant="body" size="md">
+      {children}
+    </Typography>
+  </View>
+)
+
+export const Playground = {
+  args: {
+    layout: "fixed",
+    animation: "slideIn",
+    defaultValue: "give"
+  },
+  render: (args: TabNavigationProps) => (
+    <View style={styles.container}>
+      <TabNavigation {...args}>
+        <TabNavigation.List>
+          <TabNavigation.Tab value="give">Give & get</TabNavigation.Tab>
+          <TabNavigation.Tab value="pack">My pack</TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="give">
+          <PanelBody>Refer a friend and you both get a treat.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="pack">
+          <PanelBody>Everything in your pack lives here.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
+export const FixedWidth = {
+  name: "Fixed Width",
+  render: () => (
+    <View style={styles.container}>
+      <TabNavigation defaultValue="give" layout="fixed">
+        <TabNavigation.List>
+          <TabNavigation.Tab value="give">Give & get</TabNavigation.Tab>
+          <TabNavigation.Tab value="pack">My pack</TabNavigation.Tab>
+          <TabNavigation.Tab value="orders">Orders</TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="give">
+          <PanelBody>Give & get content.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="pack">
+          <PanelBody>My pack content.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="orders">
+          <PanelBody>Orders content.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
+export const IntrinsicWidth = {
+  name: "Intrinsic Width (scrollable)",
+  render: () => (
+    <View style={styles.container}>
+      <TabNavigation defaultValue="home" layout="intrinsic">
+        <TabNavigation.List>
+          <TabNavigation.Tab value="home">Home</TabNavigation.Tab>
+          <TabNavigation.Tab value="dog">Your dog</TabNavigation.Tab>
+          <TabNavigation.Tab value="extras">Extras</TabNavigation.Tab>
+          <TabNavigation.Tab value="free">Free food</TabNavigation.Tab>
+          <TabNavigation.Tab value="account">Account</TabNavigation.Tab>
+          <TabNavigation.Tab value="help">Help</TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="home">
+          <PanelBody>
+            The list scrolls horizontally when tabs overflow.
+          </PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="dog">
+          <PanelBody>Your dog content.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="extras">
+          <PanelBody>Extras content.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="free">
+          <PanelBody>Free food content.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="account">
+          <PanelBody>Account content.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="help">
+          <PanelBody>Help content.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
+export const States = {
+  name: "States",
+  render: () => (
+    <View style={styles.container}>
+      <TabNavigation defaultValue="selected" layout="fixed">
+        <TabNavigation.List>
+          <TabNavigation.Tab value="selected">Selected</TabNavigation.Tab>
+          <TabNavigation.Tab value="unselected">Unselected</TabNavigation.Tab>
+          <TabNavigation.Tab value="disabled" disabled>
+            Inactive
+          </TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="selected">
+          <PanelBody>
+            Selected has a brand underline + bold label. Unselected uses a
+            neutral underline. Inactive (disabled) is muted and non-interactive.
+          </PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="unselected">
+          <PanelBody>Unselected panel.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="disabled">
+          <PanelBody>Disabled panel.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
+export const AnimatedContent = {
+  name: "Animated Content (fade)",
+  render: () => (
+    <View style={styles.container}>
+      <TabNavigation defaultValue="one" layout="fixed" animation="fade">
+        <TabNavigation.List>
+          <TabNavigation.Tab value="one">First</TabNavigation.Tab>
+          <TabNavigation.Tab value="two">Second</TabNavigation.Tab>
+          <TabNavigation.Tab value="three">Third</TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="one">
+          <PanelBody>Switch tabs to see the content fade in.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="two">
+          <PanelBody>Second panel content.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="three">
+          <PanelBody>Third panel content.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16
+  },
+  panel: {
+    paddingTop: 16
+  }
+})