@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -0,0 +1,362 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { PasswordField } from "./PasswordField"
+import { Typography } from "../../atoms/Typography"
+import type { PasswordRequirement } from "./PasswordFieldRequirements"
+import { usePasswordField } from "./hooks/usePasswordField"
+import type { InputState } from "../../atoms/Input/InputField"
+
+export default {
+  title: "Molecules/PasswordField",
+  component: PasswordField,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Password field component with visibility toggle and optional requirements list. Supports both simple props API and compound component API."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label text"
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Help text below input"
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message"
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "error", "success"],
+      description: "Visual state of the input"
+    },
+    optionalText: {
+      control: { type: "text" },
+      description: "Optional text to display next to label"
+    },
+    showRequirements: {
+      control: { type: "boolean" },
+      description: "Show password requirements list"
+    },
+    editable: {
+      control: { type: "boolean" },
+      description: "Controls whether the input is editable"
+    }
+  }
+}
+
+export const Default = () => {
+  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" }
+    ]
+  })
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Using usePasswordField Hook
+        </Typography>
+        <PasswordField
+          {...passwordProps}
+          label="Create Password"
+          placeholder="Enter password"
+          description="The hook handles state, requirements, and validation automatically"
+        />
+      </View>
+    </View>
+  )
+}
+
+export const States = () => {
+  const defaultProps = usePasswordField()
+  const typingProps = usePasswordField({ initialValue: "password123" })
+  const validatedProps = usePasswordField({ initialValue: "SecurePass123!" })
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default
+        </Typography>
+        <PasswordField
+          {...defaultProps}
+          label="Default"
+          placeholder="Enter your password"
+          description="Help text"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Disabled
+        </Typography>
+        <PasswordField
+          label="Disabled"
+          placeholder="Enter your password"
+          description="Help text"
+          editable={false}
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          With Value
+        </Typography>
+        <PasswordField
+          {...typingProps}
+          label="With Value"
+          placeholder="Enter your password"
+          description="Help text"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Success State
+        </Typography>
+        <PasswordField
+          {...validatedProps}
+          label="Success State"
+          placeholder="Enter your password"
+          state="success"
+          description="Password meets all requirements"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Error State
+        </Typography>
+        <PasswordField
+          {...typingProps}
+          label="Error State"
+          placeholder="Enter your password"
+          state="error"
+          error="Password is too weak"
+          description="Help text"
+        />
+      </View>
+    </View>
+  )
+}
+
+export const MultipleErrors = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Multiple Errors
+      </Typography>
+      <PasswordField
+        label="Create Password"
+        placeholder="Enter password"
+        value="weak"
+        state="error"
+        error={[
+          "Must be at least 8 characters",
+          "Must contain an uppercase letter",
+          "Must contain a number"
+        ]}
+      />
+    </View>
+  </View>
+)
+
+export const ManualValidation = () => {
+  const [password, setPassword] = useState("")
+  const [passwordState, setPasswordState] = useState<InputState>("default")
+
+  const handleChange = (newValue: string) => {
+    setPassword(newValue)
+
+    if (!newValue) {
+      setPasswordState("default")
+      return
+    }
+
+    const hasMinLength = newValue.length >= 8
+    const hasUppercase = /[A-Z]/.test(newValue)
+    const hasLowercase = /[a-z]/.test(newValue)
+    const hasNumber = /\d/.test(newValue)
+
+    const allRequirementsMet =
+      hasMinLength && hasUppercase && hasLowercase && hasNumber
+
+    setPasswordState(allRequirementsMet ? "success" : "error")
+  }
+
+  const hasMinLength = password.length >= 8
+  const hasUppercase = /[A-Z]/.test(password)
+  const hasLowercase = /[a-z]/.test(password)
+  const hasNumber = /\d/.test(password)
+
+  const requirements: PasswordRequirement[] = [
+    { text: "At least 8 characters", satisfied: hasMinLength },
+    { text: "One uppercase letter", satisfied: hasUppercase },
+    { text: "One lowercase letter", satisfied: hasLowercase },
+    { text: "One number", satisfied: hasNumber }
+  ]
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Manual Validation
+        </Typography>
+        <PasswordField
+          label="Create Password"
+          placeholder="Enter password"
+          value={password}
+          onValueChange={handleChange}
+          state={passwordState}
+          description="Manual validation approach without using the hook"
+          requirements={requirements}
+          showRequirements={password.length > 0}
+        />
+      </View>
+    </View>
+  )
+}
+
+export const CompoundComponentAPI = () => {
+  const [password, setPassword] = useState("")
+  const [passwordState, setPasswordState] = useState<InputState>("default")
+
+  const handleChange = (newValue: string) => {
+    setPassword(newValue)
+
+    if (!newValue) {
+      setPasswordState("default")
+      return
+    }
+
+    const hasMinLength = newValue.length >= 8
+    const hasUppercase = /[A-Z]/.test(newValue)
+    const hasLowercase = /[a-z]/.test(newValue)
+    const hasNumber = /\d/.test(newValue)
+
+    const allRequirementsMet =
+      hasMinLength && hasUppercase && hasLowercase && hasNumber
+
+    setPasswordState(allRequirementsMet ? "success" : "error")
+  }
+
+  const hasMinLength = password.length >= 8
+  const hasUppercase = /[A-Z]/.test(password)
+  const hasLowercase = /[a-z]/.test(password)
+  const hasNumber = /\d/.test(password)
+
+  const requirements: PasswordRequirement[] = [
+    { text: "At least 8 characters", satisfied: hasMinLength },
+    { text: "One uppercase letter", satisfied: hasUppercase },
+    { text: "One lowercase letter", satisfied: hasLowercase },
+    { text: "One number", satisfied: hasNumber }
+  ]
+
+  const allRequirementsMet =
+    hasMinLength && hasUppercase && hasLowercase && hasNumber
+  const showRequirements = password.length > 0 && !allRequirementsMet
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Compound Component API
+        </Typography>
+        <PasswordField.Root>
+          <PasswordField.Label state={passwordState}>
+            Password
+          </PasswordField.Label>
+          <PasswordField.Field
+            placeholder="Enter password"
+            value={password}
+            onValueChange={handleChange}
+            state={passwordState}
+          />
+          <PasswordField.Description state={passwordState}>
+            Must be at least 8 characters
+          </PasswordField.Description>
+          {showRequirements && (
+            <PasswordField.Requirements requirements={requirements} />
+          )}
+          {passwordState === "error" && password.length > 0 && (
+            <PasswordField.Error>
+              Password does not meet requirements
+            </PasswordField.Error>
+          )}
+        </PasswordField.Root>
+      </View>
+    </View>
+  )
+}
+
+export const WithOptionalText = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        With Optional Text
+      </Typography>
+      <PasswordField
+        label="Password"
+        optionalText="(optional)"
+        placeholder="Enter password"
+        description="Optional password field"
+      />
+    </View>
+  </View>
+)
+
+export const PasswordConfirmation = () => {
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const hasError = confirmPassword.length > 0 && password !== confirmPassword
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Password Confirmation
+        </Typography>
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          value={password}
+          onValueChange={setPassword}
+          state="default"
+        />
+        <PasswordField
+          label="Confirm Password"
+          placeholder="Re-enter password"
+          value={confirmPassword}
+          onValueChange={setConfirmPassword}
+          state={hasError ? "error" : "default"}
+          error={hasError ? "Passwords do not match" : undefined}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 320
+  },
+  column: {
+    flexDirection: "column",
+    gap: 24,
+    width: 320
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  }
+})