@butternutbox/pawprint-native 0.0.1 → 0.1.0

package/src/components/molecules/PasswordField/PasswordFieldRequirements.tsx

@@ -0,0 +1,92 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+import { Icon } from "../../atoms/Icon"
+import { Cancel, CheckCircle } from "@butternutbox/pawprint-icons/core"
+
+export type PasswordRequirement = {
+  text: string
+  satisfied: boolean
+}
+
+type PasswordFieldRequirementsOwnProps = {
+  requirements: string[] | PasswordRequirement[]
+  children?: never
+}
+
+export type PasswordFieldRequirementsProps = PasswordFieldRequirementsOwnProps &
+  Omit<ViewProps, keyof PasswordFieldRequirementsOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRequirementsList = styled(View)<{ listGap: number }>(
+  ({ listGap }) => ({
+    gap: listGap
+  })
+)
+
+const StyledRequirementItem = styled(View)<{ itemGap: number }>(
+  ({ itemGap }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: itemGap
+  })
+)
+
+/**
+ * Requirements list component for PasswordField.
+ * Displays a list of password requirements with validation icons.
+ *
+ * @param requirements - Array of requirement strings or objects with text and satisfied status
+ */
+export const PasswordFieldRequirements = React.forwardRef<
+  View,
+  PasswordFieldRequirementsProps
+>(({ requirements, ...rest }, ref) => {
+  const theme = useTheme()
+  const { colour, description, spacing } = theme.tokens.components.inputs
+
+  if (!requirements || requirements.length === 0) {
+    return null
+  }
+
+  // Normalize requirements to objects
+  const normalizedRequirements: PasswordRequirement[] = requirements.map(
+    (req) => (typeof req === "string" ? { text: req, satisfied: false } : req)
+  )
+
+  return (
+    <StyledRequirementsList
+      ref={ref}
+      listGap={parseTokenValue(spacing.description.leftPadding)}
+      {...rest}
+    >
+      {normalizedRequirements.map((requirement, index) => {
+        const iconColour = requirement.satisfied ? "success" : "error"
+
+        return (
+          <StyledRequirementItem
+            key={index}
+            itemGap={parseTokenValue(spacing.description.leftPadding)}
+          >
+            <Icon
+              icon={requirement.satisfied ? CheckCircle : Cancel}
+              size="sm"
+              colour={iconColour}
+            />
+            <Typography
+              token={description.text.default}
+              color={colour.label.default}
+            >
+              {requirement.text}
+            </Typography>
+          </StyledRequirementItem>
+        )
+      })}
+    </StyledRequirementsList>
+  )
+})
+
+PasswordFieldRequirements.displayName = "PasswordField.Requirements"

package/src/components/molecules/PasswordField/hooks/index.ts

@@ -0,0 +1,2 @@
+export { usePasswordField } from "./usePasswordField"
+export type { PasswordValidationRule } from "./usePasswordField"

package/src/components/molecules/PasswordField/hooks/usePasswordField.ts

@@ -0,0 +1,113 @@
+import { useState, useMemo } from "react"
+import type { PasswordFieldProps } from "../PasswordField"
+import type { PasswordRequirement } from "../PasswordFieldRequirements"
+import type { InputState } from "../../../atoms/Input/InputField"
+
+export type PasswordValidationRule = {
+  test: (value: string) => boolean
+  message: string
+}
+
+type UsePasswordFieldOptions = {
+  initialValue?: string
+  onValueChange?: (value: string) => void
+  validationRules?: PasswordValidationRule[]
+  autoShowRequirements?: boolean
+}
+
+type UsePasswordFieldReturn = Pick<
+  PasswordFieldProps,
+  "value" | "onValueChange" | "state" | "requirements" | "showRequirements"
+>
+
+/**
+ * Hook for managing PasswordField state with built-in validation.
+ * Handles value, validation state, and requirements automatically.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage without validation
+ * const passwordProps = usePasswordField()
+ * <PasswordField {...passwordProps} label="Password" />
+ *
+ * // With validation rules
+ * const passwordProps = usePasswordField({
+ *   validationRules: [
+ *     { test: (v) => v.length >= 8, message: "At least 8 characters" },
+ *     { test: (v) => /[A-Z]/.test(v), message: "One uppercase letter" },
+ *     { test: (v) => /[a-z]/.test(v), message: "One lowercase letter" },
+ *     { test: (v) => /\d/.test(v), message: "One number" }
+ *   ]
+ * })
+ * <PasswordField {...passwordProps} label="Create Password" />
+ * ```
+ *
+ * @param {string} [initialValue=""] - Initial password value
+ * @param {(value: string) => void} [onValueChange] - Optional callback called after value changes
+ * @param {PasswordValidationRule[]} [validationRules] - Array of validation rules
+ * @param {boolean} [autoShowRequirements] - Whether to auto-show requirements (default: true when rules provided)
+ */
+export function usePasswordField({
+  initialValue = "",
+  onValueChange: onValueChangeCallback,
+  validationRules = [],
+  autoShowRequirements
+}: UsePasswordFieldOptions = {}): UsePasswordFieldReturn {
+  const [value, setValue] = useState(initialValue)
+  const hasValidationRules = validationRules.length > 0
+  const shouldAutoShow =
+    autoShowRequirements !== undefined
+      ? autoShowRequirements
+      : hasValidationRules
+
+  const handleValueChange: PasswordFieldProps["onValueChange"] = (newValue) => {
+    setValue(newValue)
+    onValueChangeCallback?.(newValue)
+  }
+
+  // Calculate validation state and requirements
+  const { state, requirements, showRequirements } = useMemo(() => {
+    if (!hasValidationRules) {
+      return {
+        state: "default" as InputState,
+        requirements: undefined,
+        showRequirements: false
+      }
+    }
+
+    if (!value) {
+      return {
+        state: "default" as InputState,
+        requirements: validationRules.map((rule) => ({
+          text: rule.message,
+          satisfied: false
+        })),
+        showRequirements: false
+      }
+    }
+
+    const requirements: PasswordRequirement[] = validationRules.map((rule) => ({
+      text: rule.message,
+      satisfied: rule.test(value)
+    }))
+
+    const allSatisfied = requirements.every((req) => req.satisfied)
+    const state: InputState = allSatisfied ? "success" : "error"
+
+    return {
+      state,
+      requirements,
+      showRequirements: shouldAutoShow && value.length > 0
+    }
+  }, [value, validationRules, hasValidationRules, shouldAutoShow])
+
+  return {
+    value,
+    onValueChange: handleValueChange,
+    ...(hasValidationRules && {
+      state,
+      requirements,
+      showRequirements
+    })
+  }
+}

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

@@ -0,0 +1,10 @@
+export { PasswordField } from "./PasswordField"
+export type { PasswordFieldProps } from "./PasswordField"
+export { PasswordFieldInput } from "./PasswordFieldInput"
+export { PasswordFieldRequirements } from "./PasswordFieldRequirements"
+export type {
+  PasswordRequirement,
+  PasswordFieldRequirementsProps
+} from "./PasswordFieldRequirements"
+export { usePasswordField } from "./hooks"
+export type { PasswordValidationRule } from "./hooks"

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

@@ -0,0 +1,243 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { PictureSelector, type PictureSelectorProps } from "./PictureSelector"
+import {
+  LargeStickPrimaryFilled,
+  EatingPrimaryFilled,
+  ExcitedPrimaryFilled,
+  DogWithBallPrimaryFilled
+} from "@butternutbox/pawprint-illustrations/poses"
+import {
+  CheckCircle,
+  StarRate,
+  Female,
+  Male
+} from "@butternutbox/pawprint-icons/core"
+
+export default {
+  title: "Molecules/PictureSelector"
+}
+
+const BODY_CONDITION = [
+  {
+    value: "under",
+    illustration: LargeStickPrimaryFilled,
+    ariaLabel: "Underweight",
+    insightTitle: "Underweight",
+    insightDescription:
+      "Ribs and hip bones are visible with little fat covering."
+  },
+  {
+    value: "just",
+    illustration: EatingPrimaryFilled,
+    ariaLabel: "Just right",
+    insightTitle: "Just right",
+    insightDescription:
+      "A visible waistline, some fat cover, and you can feel their ribs easily."
+  },
+  {
+    value: "over",
+    illustration: ExcitedPrimaryFilled,
+    ariaLabel: "Overweight",
+    insightTitle: "Overweight",
+    insightDescription:
+      "No visible waistline and ribs are hard to feel under fat."
+  }
+]
+
+export const Playground = (args: PictureSelectorProps) => (
+  <View style={styles.column}>
+    <PictureSelector {...args} />
+  </View>
+)
+Playground.args = {
+  label: "Body condition",
+  items: BODY_CONDITION,
+  defaultValue: "just",
+  itemAspectRatio: 1
+}
+Playground.argTypes = {
+  label: { control: { type: "text" }, description: "Optional headline." },
+  defaultValue: {
+    control: { type: "select" },
+    options: ["under", "just", "over"],
+    description: "Uncontrolled initial selected value."
+  },
+  itemWidth: {
+    control: { type: "number" },
+    description: "Fixed card width (px). Defaults to 100% (fluid)."
+  },
+  itemAspectRatio: {
+    control: { type: "number" },
+    description: "Card aspect ratio (width / height). Defaults to 1."
+  },
+  itemMinWidth: {
+    control: { type: "number" },
+    description: "Floor on each card's width (px)."
+  },
+  itemMinHeight: {
+    control: { type: "number" },
+    description: "Floor on each card's height (px)."
+  }
+}
+
+export const ThreeButtons = () => (
+  <View style={styles.column}>
+    <PictureSelector
+      label="Body condition"
+      items={BODY_CONDITION}
+      defaultValue="just"
+    />
+  </View>
+)
+
+export const FourButtons = () => (
+  <View style={styles.column}>
+    <PictureSelector
+      label="Activity level"
+      defaultValue="moderate"
+      items={[
+        {
+          value: "couch",
+          illustration: LargeStickPrimaryFilled,
+          ariaLabel: "Couch potato",
+          insightTitle: "Couch potato",
+          insightDescription: "Short walks and lots of naps."
+        },
+        {
+          value: "moderate",
+          illustration: EatingPrimaryFilled,
+          ariaLabel: "Moderate",
+          insightTitle: "Moderate",
+          insightDescription: "A daily walk and the occasional game of fetch."
+        },
+        {
+          value: "active",
+          illustration: DogWithBallPrimaryFilled,
+          ariaLabel: "Active",
+          insightTitle: "Active",
+          insightDescription: "Multiple walks a day and regular running."
+        },
+        {
+          value: "athlete",
+          illustration: ExcitedPrimaryFilled,
+          ariaLabel: "Athlete",
+          insightTitle: "Athlete",
+          insightDescription: "Long, fast runs, agility, or working most days."
+        }
+      ]}
+    />
+  </View>
+)
+
+export const WithoutLabel = () => (
+  <View style={styles.column}>
+    <PictureSelector items={BODY_CONDITION} defaultValue="just" />
+  </View>
+)
+
+export const WithoutInsight = () => (
+  <View style={styles.column}>
+    <PictureSelector
+      label="Body condition"
+      defaultValue="just"
+      items={BODY_CONDITION.map(
+        ({ insightTitle, insightDescription, ...rest }) => {
+          void insightTitle
+          void insightDescription
+          return rest
+        }
+      )}
+    />
+  </View>
+)
+
+export const WithIcons = () => (
+  <View style={styles.column}>
+    <PictureSelector
+      label="Sex"
+      defaultValue="female"
+      items={[
+        {
+          value: "female",
+          icon: Female,
+          ariaLabel: "Female"
+        },
+        {
+          value: "male",
+          icon: Male,
+          ariaLabel: "Male"
+        },
+        {
+          value: "either",
+          icon: StarRate,
+          ariaLabel: "Either",
+          insightTitle: "Either",
+          insightDescription: "We'll help you decide later."
+        },
+        {
+          value: "verified",
+          icon: CheckCircle,
+          ariaLabel: "Verified"
+        }
+      ]}
+    />
+  </View>
+)
+
+export const WithDisabledItem = () => (
+  <View style={styles.column}>
+    <PictureSelector
+      label="Body condition"
+      defaultValue="just"
+      items={[
+        BODY_CONDITION[0],
+        BODY_CONDITION[1],
+        { ...BODY_CONDITION[2], disabled: true }
+      ]}
+    />
+  </View>
+)
+
+export const Controlled = () => {
+  const [selected, setSelected] = React.useState("just")
+  return (
+    <View style={styles.column}>
+      <PictureSelector
+        label={`Body condition (selected: ${selected})`}
+        items={BODY_CONDITION}
+        value={selected}
+        onValueChange={setSelected}
+      />
+    </View>
+  )
+}
+
+export const FixedItemWidth = () => (
+  <View style={styles.column}>
+    <PictureSelector
+      label="Fixed 96px cards"
+      items={BODY_CONDITION}
+      defaultValue="just"
+      itemWidth={96}
+    />
+  </View>
+)
+
+export const PortraitAspectRatio = () => (
+  <View style={styles.column}>
+    <PictureSelector
+      label="Portrait cards (aspect ratio 0.75)"
+      items={BODY_CONDITION}
+      defaultValue="just"
+      itemAspectRatio={0.75}
+    />
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    width: 358
+  }
+})