@butternutbox/pawprint-native 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/atoms/Switch/Switch.tsx

@@ -77,7 +77,9 @@ const StyledThumb = styled(Animated.View)<{
 const StyledContent = styled(View)<{
   contentGap: number
 }>(({ contentGap }) => ({
-  gap: contentGap
+  gap: contentGap,
+  flex: 1,
+  minWidth: 0
 }))
 
 /**

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

@@ -0,0 +1,98 @@
+import React, { useState } from "react"
+import { View } from "react-native"
+import { NativeSelectPicker } from "./NativeSelectPicker"
+
+export default {
+  title: "Molecules/NativeSelectPicker",
+  component: NativeSelectPicker,
+  argTypes: {
+    disabled: {
+      control: "boolean"
+    },
+    hideIcon: {
+      control: "boolean"
+    }
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <View style={{ padding: 20, flex: 1, justifyContent: "center" }}>
+        <Story />
+      </View>
+    )
+  ]
+}
+
+const BANK_OPTIONS = [
+  { label: "ABN Amro", value: "abn_amro" },
+  { label: "ASN Bank", value: "asn_bank" },
+  { label: "bunq B.V.", value: "bunq" },
+  { label: "ING Bank", value: "ing" },
+  { label: "Knab", value: "knab" },
+  { label: "Rabobank", value: "rabobank" }
+]
+
+export const Basic = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+    />
+  )
+}
+
+export const WithSelectedValue = () => {
+  const [value, setValue] = useState<string | number | null>("ing")
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+    />
+  )
+}
+
+export const Disabled = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+      disabled
+    />
+  )
+}
+
+export const HideIcon = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={BANK_OPTIONS}
+      placeholder={{ label: "Select a bank" }}
+      value={value}
+      onValueChange={setValue}
+      hideIcon
+    />
+  )
+}
+
+export const NumericValues = () => {
+  const [value, setValue] = useState<string | number | null>(null)
+  return (
+    <NativeSelectPicker
+      items={[
+        { label: "Option 1", value: 1 },
+        { label: "Option 2", value: 2 },
+        { label: "Option 3", value: 3 }
+      ]}
+      placeholder={{ label: "Select an option" }}
+      value={value}
+      onValueChange={setValue}
+    />
+  )
+}

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.styled.ts

@@ -0,0 +1,127 @@
+import styled from "@emotion/native"
+import { View, Text } from "react-native"
+import Animated from "react-native-reanimated"
+import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
+
+type AndroidOptionTextProps = {
+  isSelected: boolean
+}
+
+const themeTokens = DEFAULT_THEME_OPTIONS.tokens
+const { components, semantics } = themeTokens
+const inputTokens = components.inputs
+const { dimensions } = semantics
+
+const parseSize = (value: string): number => {
+  return parseInt(value.replace("px", ""), 10)
+}
+
+const Wrapper = styled(View)({
+  borderWidth: parseSize(inputTokens.borderWidth.field.selected),
+  borderColor: inputTokens.colour.field.border.selected,
+  borderRadius: parseSize(inputTokens.borderRadius.field.default),
+  backgroundColor: inputTokens.colour.field.background.default,
+  paddingHorizontal: parseSize(inputTokens.spacing.field.horizontalPadding),
+  paddingVertical: parseSize(inputTokens.spacing.field.verticalPadding),
+  height: parseSize(inputTokens.size.field.height),
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between"
+})
+
+const SelectIcon = styled(Animated.View)({
+  position: "absolute",
+  right: 0,
+  marginRight: 0
+})
+
+const InputText = styled(Text)({
+  color: inputTokens.colour.field.text.default,
+  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  flex: 1
+})
+
+const PlaceholderText = styled(Text)({
+  color: inputTokens.colour.field.text.placeholder,
+  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+  fontWeight: inputTokens.field.placeholder.default.fontWeight,
+  flex: 1
+})
+
+const ModalOverlay = styled(View)({
+  flex: 1,
+  backgroundColor: "rgba(0, 0, 0, 0.32)",
+  justifyContent: "flex-end"
+})
+
+const AndroidDialog = styled(View)({
+  backgroundColor: inputTokens.colour.field.background.default,
+  borderTopLeftRadius: parseSize(dimensions.borderRadius.lg),
+  borderTopRightRadius: parseSize(dimensions.borderRadius.lg),
+  maxHeight: "80%",
+  minHeight: "40%",
+  paddingTop: parseSize(dimensions.spacing.md),
+  paddingBottom: parseSize(dimensions.spacing.xl),
+  paddingHorizontal: parseSize(dimensions.spacing.md)
+})
+
+const DialogTitle = styled(Text)({
+  fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+  fontWeight: inputTokens.text.label.fontWeight,
+  color: inputTokens.colour.field.text.default,
+  marginBottom: parseSize(dimensions.spacing.md),
+  marginLeft: parseSize(dimensions.spacing.xs)
+})
+
+const AndroidOptionRow = styled(View)({
+  flexDirection: "row",
+  alignItems: "center",
+  paddingVertical: parseSize(dimensions.spacing.md),
+  paddingHorizontal: parseSize(dimensions.spacing.sm),
+  borderBottomWidth: parseSize(dimensions.borderWidth.sm),
+  borderBottomColor: themeTokens.primitives.colour.brand.brown[2]
+})
+
+const RadioOuter = styled(View)({
+  width: parseSize(dimensions.spacing.lg),
+  height: parseSize(dimensions.spacing.lg),
+  borderRadius: parseSize(dimensions.spacing.lg) / 2,
+  borderWidth: parseSize(dimensions.borderWidth.md),
+  borderColor: inputTokens.colour.field.border.selected,
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: parseSize(dimensions.spacing.sm)
+})
+
+const RadioInner = styled(View)({
+  width: parseSize(dimensions.spacing.md) / 2,
+  height: parseSize(dimensions.spacing.md) / 2,
+  borderRadius: parseSize(dimensions.spacing.md) / 4,
+  backgroundColor: inputTokens.colour.field.border.selected
+})
+
+const AndroidOptionText = styled(Text)<AndroidOptionTextProps>(
+  ({ isSelected }) => ({
+    fontSize: parseSize(inputTokens.field.placeholder.default.fontSize),
+    fontWeight: isSelected
+      ? inputTokens.text.label.fontWeight
+      : inputTokens.field.placeholder.default.fontWeight,
+    color: inputTokens.colour.field.text.default,
+    flex: 1
+  })
+)
+
+export {
+  Wrapper,
+  SelectIcon,
+  InputText,
+  PlaceholderText,
+  ModalOverlay,
+  AndroidDialog,
+  DialogTitle,
+  AndroidOptionRow,
+  RadioOuter,
+  RadioInner,
+  AndroidOptionText
+}

package/src/components/molecules/NativeSelectPicker/NativeSelectPicker.tsx

@@ -0,0 +1,250 @@
+import React, { useCallback, useMemo, useState } from "react"
+import {
+  Platform,
+  ActionSheetIOS,
+  Modal,
+  TouchableOpacity,
+  FlatList,
+  TouchableWithoutFeedback,
+  View,
+  ViewProps
+} from "react-native"
+import { useSharedValue, useAnimatedStyle } from "react-native-reanimated"
+import { KeyboardArrowDown } from "@butternutbox/pawprint-icons/core"
+import { DEFAULT_THEME_OPTIONS } from "@butternutbox/pawprint-tokens"
+
+import * as S from "./NativeSelectPicker.styled"
+
+const themeTokens = DEFAULT_THEME_OPTIONS.tokens
+const { components, semantics } = themeTokens
+const inputTokens = components.inputs
+const { dimensions } = semantics
+
+const parseSize = (value: string): number => {
+  return parseInt(value.replace("px", ""), 10)
+}
+
+export type NativeSelectPickerItem = {
+  label: string
+  value: string | number
+  key?: string | number
+}
+
+export type NativeSelectPickerProps = ViewProps & {
+  items: NativeSelectPickerItem[]
+  value?: string | number | null
+  placeholder?: {
+    label?: string
+    value?: string | number
+  }
+  onValueChange: (value: string | number) => void
+  disabled?: boolean
+  hideIcon?: boolean
+}
+
+type IconAnimation = {
+  iconAnimationStyles: {
+    transform: Array<{ rotate: string }>
+  }
+}
+
+const useIconAnimation = (): IconAnimation => {
+  const iconRotation = useSharedValue(0)
+
+  const iconAnimationStyles = useAnimatedStyle(() => {
+    "worklet"
+    return {
+      transform: [{ rotate: `${iconRotation.value}deg` }]
+    }
+  })
+
+  return {
+    iconAnimationStyles
+  }
+}
+
+/**
+ * NativeSelectPicker is a native UI dropdown component that uses:
+ * - ActionSheetIOS on iOS (native system picker)
+ * - Modal with FlatList on Android
+ *
+ * @example
+ * ```tsx
+ * <NativeSelectPicker
+ *   items={[
+ *     { label: "Option 1", value: "opt1" },
+ *     { label: "Option 2", value: "opt2" }
+ *   ]}
+ *   placeholder={{ label: "Select an option" }}
+ *   value={selectedValue}
+ *   onValueChange={setSelectedValue}
+ * />
+ * ```
+ */
+const NativeSelectPicker = React.forwardRef<View, NativeSelectPickerProps>(
+  (
+    {
+      items,
+      value,
+      placeholder,
+      onValueChange,
+      disabled = false,
+      hideIcon = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const { iconAnimationStyles } = useIconAnimation()
+
+    const hasPlaceholder =
+      placeholder &&
+      Object.keys(placeholder).length > 0 &&
+      placeholder.label !== undefined
+
+    const allItems = useMemo(() => {
+      if (hasPlaceholder) {
+        return [
+          {
+            label: placeholder.label!,
+            value: placeholder.value ?? "",
+            key: "__placeholder__"
+          },
+          ...items
+        ]
+      }
+      return items
+    }, [items, hasPlaceholder, placeholder])
+
+    const selectedItem = allItems.find((item) => item.value === value)
+    const displayLabel =
+      selectedItem?.label ?? (hasPlaceholder ? placeholder.label! : "")
+
+    const handleOpenIOS = useCallback(() => {
+      if (disabled) return
+
+      const options = [...allItems.map((item) => item.label), "Cancel"]
+      const cancelButtonIndex = options.length - 1
+
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options,
+          cancelButtonIndex
+        },
+        (buttonIndex) => {
+          if (buttonIndex !== cancelButtonIndex) {
+            onValueChange(allItems[buttonIndex].value)
+          }
+        }
+      )
+    }, [disabled, allItems, onValueChange])
+
+    const handleOpenAndroid = useCallback(() => {
+      if (!disabled) {
+        setIsOpen(true)
+      }
+    }, [disabled])
+
+    const handleClose = useCallback(() => {
+      setIsOpen(false)
+    }, [])
+
+    const handleSelect = useCallback(
+      (itemValue: string | number) => {
+        onValueChange(itemValue)
+        setIsOpen(false)
+      },
+      [onValueChange]
+    )
+
+    return (
+      <S.Wrapper ref={ref} {...rest}>
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={Platform.OS === "ios" ? handleOpenIOS : handleOpenAndroid}
+          disabled={disabled}
+          hitSlop={{
+            top: parseSize(dimensions.spacing.md),
+            right: parseSize(dimensions.spacing.md),
+            bottom: parseSize(dimensions.spacing.md),
+            left: parseSize(dimensions.spacing.md)
+          }}
+          accessibilityRole="button"
+          style={{ flexDirection: "row", alignItems: "center" }}
+        >
+          <S.InputText numberOfLines={1}>
+            {displayLabel || (
+              <S.PlaceholderText>
+                {placeholder?.label || "Select"}
+              </S.PlaceholderText>
+            )}
+          </S.InputText>
+          {!hideIcon && (
+            <S.SelectIcon style={[iconAnimationStyles]}>
+              <KeyboardArrowDown
+                width={parseSize(dimensions.spacing.xl)}
+                height={parseSize(dimensions.spacing.xl)}
+                color={inputTokens.colour.field.text.default}
+              />
+            </S.SelectIcon>
+          )}
+        </TouchableOpacity>
+
+        {Platform.OS === "android" && (
+          <Modal
+            visible={isOpen}
+            transparent
+            animationType="fade"
+            onRequestClose={handleClose}
+          >
+            <TouchableWithoutFeedback
+              accessibilityRole="button"
+              onPress={handleClose}
+            >
+              <S.ModalOverlay>
+                <TouchableWithoutFeedback>
+                  <S.AndroidDialog>
+                    <S.DialogTitle>{"Select an option"}</S.DialogTitle>
+                    <FlatList
+                      data={allItems}
+                      keyExtractor={(item, index) =>
+                        item.key?.toString() ?? `${item.value}-${index}`
+                      }
+                      renderItem={({ item }) => {
+                        const isSelected = item.value === value
+
+                        return (
+                          <TouchableOpacity
+                            onPress={() => handleSelect(item.value)}
+                            activeOpacity={0.7}
+                            accessibilityRole="button"
+                          >
+                            <S.AndroidOptionRow>
+                              <S.RadioOuter>
+                                {isSelected && <S.RadioInner />}
+                              </S.RadioOuter>
+                              <S.AndroidOptionText isSelected={isSelected}>
+                                {item.label}
+                              </S.AndroidOptionText>
+                            </S.AndroidOptionRow>
+                          </TouchableOpacity>
+                        )
+                      }}
+                      style={{
+                        maxHeight: parseSize(dimensions.spacing["8xl"])
+                      }}
+                    />
+                  </S.AndroidDialog>
+                </TouchableWithoutFeedback>
+              </S.ModalOverlay>
+            </TouchableWithoutFeedback>
+          </Modal>
+        )}
+      </S.Wrapper>
+    )
+  }
+)
+
+NativeSelectPicker.displayName = "NativeSelectPicker"
+
+export { NativeSelectPicker }

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

@@ -0,0 +1,5 @@
+export { NativeSelectPicker } from "./NativeSelectPicker"
+export type {
+  NativeSelectPickerProps,
+  NativeSelectPickerItem
+} from "./NativeSelectPicker"

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

@@ -53,6 +53,7 @@ export const AllInlineVariants = {
         type="error"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>
@@ -60,6 +61,7 @@ export const AllInlineVariants = {
         type="success"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>
@@ -67,6 +69,7 @@ export const AllInlineVariants = {
         type="warning"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>
@@ -74,6 +77,7 @@ export const AllInlineVariants = {
         type="info"
         title="Optional headline here"
         onClose={() => {}}
+        link={{ label: "Optional link" }}
       >
         Try to keep the copy length here to a maximum of 2 lines
       </Notification>

package/src/components/molecules/Notification/Notification.tsx

@@ -278,30 +278,36 @@ export const Notification = React.forwardRef<View, NotificationProps>(
           rootAlignCenter={isLarge}
           {...(rest as ViewProps)}
         >
-          {showIcon && (
-            <Icon
-              icon={IconComponent}
-              size="md"
-              colour={type}
-              aria-label={type}
-            />
-          )}
-          <View style={{ flexDirection: "column", gap: 8, flex: 1 }}>
-            <Typography
-              token={systemNotifications.notifications.typography.default}
-              color={systemNotifications.notification.colour.text.default}
-            >
-              {children}
-            </Typography>
-            {link && (
-              <Link
-                href={link.href}
-                onPress={link.onPress}
-                weight="semiBold"
+          <View style={{ flexDirection: "column", flex: 1 }}>
+            {showIcon && (
+              <Icon
+                icon={IconComponent}
                 size="md"
+                colour={type}
+                aria-label={type}
+              />
+            )}
+            <View style={{ flexDirection: "column", gap: 8, flex: 1 }}>
+              <Typography
+                token={systemNotifications.notifications.typography.default}
+                color={systemNotifications.notification.colour.text.default}
+              >
+                {children}
+              </Typography>
+            </View>
+            {link && (
+              <StyledLinkWrapper
+                linkPaddingLeft={parseTokenValue(sizeTokens.content.gap)}
               >
-                {link.label}
-              </Link>
+                <Link
+                  href={link.href}
+                  onPress={link.onPress}
+                  weight="semiBold"
+                  size="md"
+                >
+                  {link.label}
+                </Link>
+              </StyledLinkWrapper>
             )}
           </View>
         </StyledSystemRoot>
@@ -418,22 +424,23 @@ export const Notification = React.forwardRef<View, NotificationProps>(
               >
                 {children}
               </Typography>
+
+              {link && (
+                <StyledLinkWrapper
+                  linkPaddingLeft={parseTokenValue(content.copy.spacing.gap)}
+                >
+                  <Link
+                    href={link.href}
+                    onPress={link.onPress}
+                    weight="semiBold"
+                    size="md"
+                  >
+                    {link.label}
+                  </Link>
+                </StyledLinkWrapper>
+              )}
             </StyledInlineCopy>
           </StyledCopyRow>
-          {link && (
-            <StyledLinkWrapper
-              linkPaddingLeft={parseTokenValue(content.copy.spacing.gap)}
-            >
-              <Link
-                href={link.href}
-                onPress={link.onPress}
-                weight="semiBold"
-                size="md"
-              >
-                {link.label}
-              </Link>
-            </StyledLinkWrapper>
-          )}
         </StyledContents>
         {onClose && (
           <StyledCloseButton

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

@@ -1,5 +1,6 @@
 import React from "react"
 import { View, StyleSheet } from "react-native"
+import { Home } from "@butternutbox/pawprint-icons/core"
 import { TabNavigation } from "./TabNavigation"
 import type { TabNavigationProps } from "./TabNavigation"
 import { Typography } from "../../atoms/Typography"
@@ -149,6 +150,40 @@ export const States = {
   )
 }
 
+const DOG_PHOTO_URL = "https://placedog.net/200/200"
+
+export const WithIconsAndAvatars = {
+  name: "With Icons & Avatars",
+  render: () => (
+    <View style={styles.container}>
+      <TabNavigation defaultValue="home" layout="fixed">
+        <TabNavigation.List>
+          <TabNavigation.Tab value="home" icon={Home}>
+            Home
+          </TabNavigation.Tab>
+          <TabNavigation.Tab
+            value="dog"
+            avatar={{
+              src: DOG_PHOTO_URL,
+              alt: "Your dog",
+              size: "sm",
+              border: "sm"
+            }}
+          >
+            Your dog
+          </TabNavigation.Tab>
+        </TabNavigation.List>
+        <TabNavigation.Panel value="home">
+          <PanelBody>A leading icon sits before the label.</PanelBody>
+        </TabNavigation.Panel>
+        <TabNavigation.Panel value="dog">
+          <PanelBody>The Avatar atom can lead the label too.</PanelBody>
+        </TabNavigation.Panel>
+      </TabNavigation>
+    </View>
+  )
+}
+
 export const AnimatedContent = {
   name: "Animated Content (fade)",
   render: () => (