@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -0,0 +1,313 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { CopyField } from "./CopyField"
+import { Typography } from "../../atoms/Typography"
+import { useCopyField } from "./hooks/useCopyField"
+import type { InputState } from "../../atoms/Input/InputField"
+import { Icon } from "../../atoms/Icon"
+import { Lock } from "@butternutbox/pawprint-icons/core"
+
+export default {
+  title: "Molecules/CopyField",
+  component: CopyField,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Copy field component with a copy button that copies the input value to clipboard. 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"
+    },
+    copyButtonLabel: {
+      control: { type: "text" },
+      description: "Label for the copy button"
+    },
+    editable: {
+      control: { type: "boolean" },
+      description: "Controls whether the input is editable"
+    }
+  }
+}
+
+export const Default = () => {
+  const copyProps = useCopyField({
+    onCopy: (value) => console.log("Copied:", value) // eslint-disable-line no-console
+  })
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Using useCopyField Hook
+        </Typography>
+        <CopyField
+          {...copyProps}
+          label="API Key"
+          placeholder="Enter your API key..."
+          description="Your unique API key for authentication"
+          leadingIcon={<Icon icon={Lock} size="md" />}
+        />
+      </View>
+    </View>
+  )
+}
+
+export const States = () => {
+  const defaultProps = useCopyField()
+  const filledProps = useCopyField({ initialValue: "sk-1234567890abcdef" })
+  const errorProps = useCopyField({ initialValue: "invalid-key" })
+  const successProps = useCopyField({ initialValue: "sk-1234567890abcdef" })
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default State
+        </Typography>
+        <CopyField
+          {...defaultProps}
+          label="Default"
+          placeholder="Enter API key..."
+          description="Help text"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Disabled
+        </Typography>
+        <CopyField
+          label="Disabled"
+          placeholder="Enter API key..."
+          description="Help text"
+          editable={false}
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          With Value
+        </Typography>
+        <CopyField
+          {...filledProps}
+          label="With Value"
+          placeholder="Enter API key..."
+          description="Copy button enabled when field has text"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Success State
+        </Typography>
+        <CopyField
+          {...successProps}
+          label="Success State"
+          placeholder="Enter API key..."
+          state="success"
+          description="API key verified"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Error State
+        </Typography>
+        <CopyField
+          {...errorProps}
+          label="Error State"
+          placeholder="Enter API key..."
+          state="error"
+          error="Invalid API key format"
+          description="Help text"
+        />
+      </View>
+    </View>
+  )
+}
+
+export const ManualValidation = () => {
+  const [apiKey, setApiKey] = useState("")
+  const [apiKeyState, setApiKeyState] = useState<InputState>("default")
+
+  const handleChange = (newValue: string) => {
+    setApiKey(newValue)
+
+    if (!newValue) {
+      setApiKeyState("default")
+      return
+    }
+
+    const hasMinLength = newValue.length >= 10
+    const hasPrefix = newValue.startsWith("sk-")
+    const hasValidChars = /^sk-[a-z0-9]+$/.test(newValue)
+
+    const allRequirementsMet = hasMinLength && hasPrefix && hasValidChars
+
+    setApiKeyState(allRequirementsMet ? "success" : "error")
+  }
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Manual Validation with Success State
+        </Typography>
+        <CopyField
+          label="API Key"
+          placeholder="sk-xxxxxxxxxxxxxxxx"
+          value={apiKey}
+          onValueChange={handleChange}
+          onCopy={(value) => console.log("Copied:", value)} // eslint-disable-line no-console
+          state={apiKeyState}
+          description="Must start with 'sk-', at least 10 chars, lowercase letters and numbers only"
+          error="Invalid API key format"
+        />
+      </View>
+    </View>
+  )
+}
+
+export const CompoundComponentAPI = () => {
+  const [apiKey, setApiKey] = useState("")
+  const [apiKeyState, setApiKeyState] = useState<InputState>("default")
+
+  const handleChange = (newValue: string) => {
+    setApiKey(newValue)
+
+    if (!newValue) {
+      setApiKeyState("default")
+      return
+    }
+
+    const hasMinLength = newValue.length >= 10
+    const hasPrefix = newValue.startsWith("sk-")
+    const hasValidChars = /^sk-[a-z0-9]+$/.test(newValue)
+
+    const allRequirementsMet = hasMinLength && hasPrefix && hasValidChars
+
+    setApiKeyState(allRequirementsMet ? "success" : "error")
+  }
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Compound Component API
+        </Typography>
+        <CopyField.Root>
+          <CopyField.Label state={apiKeyState}>API Key</CopyField.Label>
+          <CopyField.Field
+            placeholder="sk-xxxxxxxxxxxxxxxx"
+            value={apiKey}
+            onValueChange={handleChange}
+            onCopy={(value) => console.log("Copied:", value)} // eslint-disable-line no-console
+            state={apiKeyState}
+          />
+          <CopyField.Description state={apiKeyState}>
+            Must start with 'sk-' and be at least 10 characters
+          </CopyField.Description>
+          {apiKeyState === "error" && apiKey.length > 0 && (
+            <CopyField.Error>Invalid API key format</CopyField.Error>
+          )}
+        </CopyField.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>
+      <CopyField
+        label="API Key"
+        optionalText="(optional)"
+        placeholder="Enter API key..."
+        description="Optional API key field"
+      />
+    </View>
+  </View>
+)
+
+export const Controlled = () => {
+  const copyProps = useCopyField({
+    onCopy: (value) => console.log("Copied to clipboard:", value) // eslint-disable-line no-console
+  })
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Controlled: {copyProps.value || "(empty)"}
+        </Typography>
+        <CopyField
+          {...copyProps}
+          label="API Key"
+          placeholder="Enter API key..."
+          description={`Current value: "${copyProps.value || "empty"}"`}
+        />
+      </View>
+    </View>
+  )
+}
+
+export const CustomButtonLabel = () => {
+  const copyProps = useCopyField({ initialValue: "sk-1234567890abcdef" })
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Custom Copy Button Label
+        </Typography>
+        <CopyField
+          {...copyProps}
+          label="API Key"
+          placeholder="Enter API key..."
+          copyButtonLabel="Copy Key"
+          description="Custom button label example"
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 320
+  },
+  column: {
+    flexDirection: "column",
+    gap: 24,
+    width: 320
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  }
+})