@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -0,0 +1,426 @@
+import React from "react"
+import { View, Pressable, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import {
+  RemoveCircle,
+  CheckCircle,
+  Error as ErrorIcon,
+  Info,
+  Close
+} from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../../atoms/Icon"
+import { Typography } from "../../atoms/Typography"
+import { Link } from "../../atoms/Link"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type NotificationType = "error" | "success" | "warning" | "info"
+type NotificationSize = "sm" | "lg"
+
+type BaseProps = {
+  type?: NotificationType
+  showIcon?: boolean
+  children: React.ReactNode
+}
+
+type InlineVariantProps = BaseProps & {
+  variant?: "inline"
+  title?: string
+  onClose?: () => void
+  size?: never
+  link?: never
+}
+
+type ToastVariantProps = BaseProps & {
+  variant: "toast"
+  onClose?: () => void
+  link?: { label: string; href?: string; onPress?: () => void }
+  title?: never
+  size?: never
+}
+
+type SystemVariantProps = BaseProps & {
+  variant: "system"
+  size?: NotificationSize
+  title?: never
+  onClose?: never
+  link?: never
+}
+
+type NotificationOwnProps =
+  | InlineVariantProps
+  | ToastVariantProps
+  | SystemVariantProps
+
+export type NotificationProps = NotificationOwnProps &
+  Omit<ViewProps, keyof NotificationOwnProps>
+
+// ─── Icon Map ─────────────────────────────────────────────────────────────────
+
+const ICON_MAP: Record<
+  NotificationType,
+  React.ComponentType<{ width?: number; height?: number; color?: string }>
+> = {
+  error: RemoveCircle,
+  success: CheckCircle,
+  warning: ErrorIcon,
+  info: Info
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const StyledInlineRoot = styled(View)<{
+  rootPaddingH: number
+  rootPaddingV: number
+  rootGap: number
+  rootBorderRadius: number
+  rootBgColor: string
+}>(
+  ({ rootPaddingH, rootPaddingV, rootGap, rootBorderRadius, rootBgColor }) => ({
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: rootGap,
+    paddingHorizontal: rootPaddingH,
+    paddingVertical: rootPaddingV,
+    borderRadius: rootBorderRadius,
+    backgroundColor: rootBgColor
+  })
+)
+
+const StyledToastRoot = styled(View)<{
+  rootPaddingH: number
+  rootPaddingV: number
+  rootGap: number
+  rootBorderRadius: number
+  rootBgColor: string
+  rootBorderWidth: number
+  rootBorderColor: string
+  rootShadowColor: string
+}>(
+  ({
+    rootPaddingH,
+    rootPaddingV,
+    rootGap,
+    rootBorderRadius,
+    rootBgColor,
+    rootBorderWidth,
+    rootBorderColor,
+    rootShadowColor
+  }) => ({
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: rootGap,
+    paddingHorizontal: rootPaddingH,
+    paddingVertical: rootPaddingV,
+    borderRadius: rootBorderRadius,
+    backgroundColor: rootBgColor,
+    borderWidth: rootBorderWidth,
+    borderColor: rootBorderColor,
+    shadowColor: rootShadowColor,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 1,
+    shadowRadius: 16,
+    elevation: 4
+  })
+)
+
+const StyledSystemRoot = styled(View)<{
+  rootPaddingH: number
+  rootPaddingTop: number
+  rootPaddingBottom: number
+  rootGap: number
+  rootBgColor: string
+  rootAlignCenter: boolean
+}>(
+  ({
+    rootPaddingH,
+    rootPaddingTop,
+    rootPaddingBottom,
+    rootGap,
+    rootBgColor,
+    rootAlignCenter
+  }) => ({
+    flexDirection: "row",
+    alignItems: rootAlignCenter ? "center" : "flex-start",
+    justifyContent: rootAlignCenter ? "center" : undefined,
+    gap: rootGap,
+    paddingHorizontal: rootPaddingH,
+    paddingTop: rootPaddingTop,
+    paddingBottom: rootPaddingBottom,
+    backgroundColor: rootBgColor,
+    width: "100%"
+  })
+)
+
+const StyledContents = styled(View)<{
+  contentsGap: number
+}>(({ contentsGap }) => ({
+  flexDirection: "column",
+  alignItems: "flex-start",
+  flex: 1,
+  minWidth: 0,
+  gap: contentsGap
+}))
+
+const StyledCopyRow = styled(View)<{
+  copyGap: number
+}>(({ copyGap }) => ({
+  flexDirection: "row",
+  alignItems: "flex-start",
+  gap: copyGap,
+  width: "100%"
+}))
+
+const StyledInlineCopy = styled(View)<{
+  copyGap: number
+}>(({ copyGap }) => ({
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: copyGap,
+  flex: 1,
+  minWidth: 0
+}))
+
+const StyledLinkWrapper = styled(View)<{
+  linkPaddingLeft: number
+}>(({ linkPaddingLeft }) => ({
+  paddingLeft: linkPaddingLeft,
+  width: "100%"
+}))
+
+const StyledCloseButton = styled(Pressable)({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  padding: 0
+})
+
+// ─── Notification ─────────────────────────────────────────────────────────────
+
+/**
+ * Displays contextual feedback messages to users. Supports three layout
+ * variants — inline (within content flow), toast (floating overlay), and
+ * system (full-width banner) — each with four severity types.
+ *
+ * Note: Unlike the web version, toast link uses `onPress` callback instead
+ * of `href` for navigation. The `href` prop is also available and opens
+ * the URL via `Linking`.
+ *
+ * @param {"inline" | "toast" | "system"} [variant="inline"] - Layout variant.
+ * @param {"error" | "success" | "warning" | "info"} [type="error"] - Severity type controlling colours and icon.
+ * @param {boolean} [showIcon=true] - Whether to show the status icon.
+ * @param {string} [title] - Optional headline (inline variant only).
+ * @param {() => void} [onClose] - Close callback (inline and toast variants).
+ * @param {{ label: string; href?: string; onPress?: () => void }} [link] - Optional action link (toast variant only).
+ * @param {"sm" | "lg"} [size="sm"] - Size variant (system variant only).
+ * @param {React.ReactNode} children - The notification body text.
+ *
+ * @example
+ * ```tsx
+ * import { Notification } from "@butternutbox/pawprint-native"
+ *
+ * <Notification type="success" title="Order confirmed">
+ *   Your order has been placed successfully.
+ * </Notification>
+ * ```
+ */
+export const Notification = React.forwardRef<View, NotificationProps>(
+  (props, ref) => {
+    const {
+      variant = "inline",
+      type = "error",
+      showIcon = true,
+      children,
+      ...rest
+    } = props
+
+    const title = "title" in props ? props.title : undefined
+    const onClose = "onClose" in props ? props.onClose : undefined
+    const link = "link" in props ? props.link : undefined
+    const size: NotificationSize =
+      "size" in props && props.size ? props.size : "sm"
+
+    const theme = useTheme()
+    const { notifications, systemNotifications, toast } =
+      theme.tokens.components
+
+    const bgColours = systemNotifications.notification.colour.background
+    const bgMap: Record<NotificationType, string> = {
+      error: bgColours.error,
+      success: bgColours.success,
+      warning: bgColours.warning,
+      info: bgColours.info
+    }
+
+    const IconComponent = ICON_MAP[type]
+
+    if (variant === "system") {
+      const isLarge = size === "lg"
+      const sizeTokens = isLarge
+        ? systemNotifications.notification.spacing.large
+        : systemNotifications.notification.spacing.small
+
+      return (
+        <StyledSystemRoot
+          ref={ref}
+          accessible
+          accessibilityRole="summary"
+          rootPaddingH={parseTokenValue(sizeTokens.horizontalPadding)}
+          rootPaddingTop={parseTokenValue(sizeTokens.topPadding)}
+          rootPaddingBottom={parseTokenValue(sizeTokens.bottomPadding)}
+          rootGap={parseTokenValue(sizeTokens.content.gap)}
+          rootBgColor={bgMap[type]}
+          rootAlignCenter={isLarge}
+          {...(rest as ViewProps)}
+        >
+          {showIcon && (
+            <Icon
+              icon={IconComponent}
+              size="md"
+              colour={type}
+              aria-label={type}
+            />
+          )}
+          <Typography
+            token={systemNotifications.notifications.typography.default}
+            color={systemNotifications.notification.colour.text.default}
+          >
+            {children}
+          </Typography>
+        </StyledSystemRoot>
+      )
+    }
+
+    if (variant === "toast") {
+      return (
+        <StyledToastRoot
+          ref={ref}
+          accessible
+          accessibilityRole="alert"
+          rootPaddingH={parseTokenValue(toast.spacing.horizontalPadding)}
+          rootPaddingV={parseTokenValue(toast.spacing.verticalPadding)}
+          rootGap={parseTokenValue(toast.spacing.gap)}
+          rootBorderRadius={parseTokenValue(toast.borderRadius.default)}
+          rootBgColor={toast.colour.background.default}
+          rootBorderWidth={parseTokenValue(toast.borderWidth.default)}
+          rootBorderColor={toast.colour.border.default}
+          rootShadowColor={toast.shaddow.default.color}
+          {...(rest as ViewProps)}
+        >
+          <StyledContents
+            contentsGap={parseTokenValue(toast.content.spacing.gap)}
+          >
+            <StyledCopyRow copyGap={parseTokenValue(toast.copy.spacing.gap)}>
+              {showIcon && (
+                <Icon
+                  icon={IconComponent}
+                  size="md"
+                  colour={type}
+                  aria-label={type}
+                />
+              )}
+              <View style={{ flex: 1, minWidth: 0 }}>
+                <Typography
+                  token={toast.typography.body}
+                  color={toast.colour.text.body}
+                >
+                  {children}
+                </Typography>
+              </View>
+            </StyledCopyRow>
+            {link && (
+              <StyledLinkWrapper
+                linkPaddingLeft={parseTokenValue(
+                  toast.link.spacing.leftPadding
+                )}
+              >
+                <Link
+                  href={link.href}
+                  onPress={link.onPress}
+                  weight="semiBold"
+                  size="md"
+                >
+                  {link.label}
+                </Link>
+              </StyledLinkWrapper>
+            )}
+          </StyledContents>
+          {onClose && (
+            <StyledCloseButton
+              onPress={onClose}
+              accessibilityRole="button"
+              accessibilityLabel="Close notification"
+            >
+              <Icon icon={Close} size="xs" aria-label="Close" />
+            </StyledCloseButton>
+          )}
+        </StyledToastRoot>
+      )
+    }
+
+    // inline (default)
+    const { spacing, borderRadius, content, colour } =
+      notifications.notification
+
+    return (
+      <StyledInlineRoot
+        ref={ref}
+        accessible
+        accessibilityRole="alert"
+        rootPaddingH={parseTokenValue(spacing.horizontalPadding)}
+        rootPaddingV={parseTokenValue(spacing.verticalPadding)}
+        rootGap={parseTokenValue(spacing.gap)}
+        rootBorderRadius={parseTokenValue(borderRadius.default)}
+        rootBgColor={bgMap[type]}
+        {...(rest as ViewProps)}
+      >
+        <StyledContents contentsGap={parseTokenValue(content.spacing.gap)}>
+          <StyledCopyRow copyGap={parseTokenValue(content.spacing.gap)}>
+            {showIcon && (
+              <Icon
+                icon={IconComponent}
+                size="md"
+                colour={type}
+                aria-label={type}
+              />
+            )}
+            <StyledInlineCopy
+              copyGap={parseTokenValue(content.copy.spacing.gap)}
+            >
+              {title && (
+                <Typography
+                  token={notifications.typography.title}
+                  color={colour.text.title}
+                >
+                  {title}
+                </Typography>
+              )}
+              <Typography
+                token={notifications.typography.body}
+                color={colour.text.body}
+              >
+                {children}
+              </Typography>
+            </StyledInlineCopy>
+          </StyledCopyRow>
+        </StyledContents>
+        {onClose && (
+          <StyledCloseButton
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Close notification"
+          >
+            <Icon icon={Close} size="xs" aria-label="Close" />
+          </StyledCloseButton>
+        )}
+      </StyledInlineRoot>
+    )
+  }
+)
+
+Notification.displayName = "Notification"

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

@@ -0,0 +1,2 @@
+export { Notification } from "./Notification"
+export type { NotificationProps } from "./Notification"

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

@@ -0,0 +1,231 @@
+import React, { useState } from "react"
+import { View, ScrollView, StyleSheet } from "react-native"
+import { NumberField } from "./NumberField"
+import type { NumberFieldProps } from "./NumberField"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/NumberField",
+  component: NumberField,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "lg"],
+      description: "Size variant controlling typography and spacing"
+    },
+    label: {
+      control: { type: "text" },
+      description: "Primary label text above the field"
+    },
+    smallLabel: {
+      control: { type: "text" },
+      description: "Secondary label below the primary label"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Help text displayed below the field"
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message when state is error"
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "error", "success"],
+      description: "Visual state of the field"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the input and buttons are disabled"
+    },
+    incrementDisabled: {
+      control: { type: "boolean" },
+      description: "Whether the + button is independently disabled"
+    },
+    decrementDisabled: {
+      control: { type: "boolean" },
+      description: "Whether the - button is independently disabled"
+    },
+    showIncrementButton: {
+      control: { type: "boolean" },
+      description: "Whether to show the + button"
+    },
+    showDecrementButton: {
+      control: { type: "boolean" },
+      description: "Whether to show the - button"
+    }
+  }
+}
+
+export const Default = () => {
+  const [value, setValue] = useState(12)
+
+  return (
+    <View style={styles.section}>
+      <NumberField
+        label="Weight"
+        size="lg"
+        description="Help text"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
+export const Small = () => {
+  const [value, setValue] = useState(2)
+
+  return (
+    <View style={styles.section}>
+      <NumberField
+        label="Quantity"
+        size="sm"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
+export const Error = () => {
+  const [value, setValue] = useState(0)
+
+  return (
+    <View style={styles.section}>
+      <NumberField
+        label="Weight"
+        size="lg"
+        state="error"
+        error="Weight must be greater than 0"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
+export const Success = () => {
+  const [value, setValue] = useState(12)
+
+  return (
+    <View style={styles.section}>
+      <NumberField
+        label="Weight"
+        size="lg"
+        state="success"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
+export const Disabled = () => (
+  <View style={styles.section}>
+    <NumberField label="Weight" size="lg" disabled value="12" />
+  </View>
+)
+
+export const ButtonDisabled = () => (
+  <ScrollView contentContainerStyle={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Decrement disabled (at min)
+      </Typography>
+      <NumberField label="Weight" size="lg" decrementDisabled value="0" />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Increment disabled (at max)
+      </Typography>
+      <NumberField label="Weight" size="lg" incrementDisabled value="99" />
+    </View>
+  </ScrollView>
+)
+
+export const ButtonVisibility = () => (
+  <ScrollView contentContainerStyle={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Increment only
+      </Typography>
+      <NumberField
+        label="Amount"
+        size="lg"
+        showDecrementButton={false}
+        value="10"
+      />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        No buttons
+      </Typography>
+      <NumberField
+        label="Amount"
+        size="lg"
+        showIncrementButton={false}
+        showDecrementButton={false}
+        value="3"
+      />
+    </View>
+  </ScrollView>
+)
+
+export const Controlled = () => {
+  const [value, setValue] = useState(5)
+
+  return (
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Value: {value}
+      </Typography>
+      <NumberField
+        label="Quantity"
+        size="lg"
+        value={String(value)}
+        onChangeText={(t) => setValue(Number(t) || 0)}
+        onIncrement={() => setValue((v) => v + 1)}
+        onDecrement={() => setValue((v) => Math.max(0, v - 1))}
+      />
+    </View>
+  )
+}
+
+export const Playground = {
+  args: {
+    size: "lg",
+    label: "Weight",
+    smallLabel: "",
+    description: "Help text",
+    error: "",
+    state: "default",
+    disabled: false,
+    incrementDisabled: false,
+    decrementDisabled: false,
+    showIncrementButton: true,
+    showDecrementButton: true
+  },
+  render: (args: NumberFieldProps) => <NumberField {...args} defaultValue="0" />
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 12
+  }
+})