@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { View, PressableProps } from "react-native"
+import { View, Pressable, PressableProps } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as CheckboxPrimitive from "@rn-primitives/checkbox"
@@ -27,7 +27,7 @@ export type CheckboxProps = CheckboxOwnProps &
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-const StyledRoot = styled(CheckboxPrimitive.Root)<{
+const StyledRootPressable = styled(Pressable)<{
   rootFlexAlign: string
   rootGap: number
   rootOpacity: number
@@ -169,109 +169,115 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
     const controlSize = parseTokenValue(checkbox.size.control.default)
 
     return (
-      <StyledRoot
-        ref={ref}
+      <CheckboxPrimitive.Root
         checked={isChecked}
         onCheckedChange={handleCheckedChange}
         disabled={disabled}
-        rootFlexAlign={isTile ? "center" : "flex-start"}
-        rootGap={parseTokenValue(
-          isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
-        )}
-        rootOpacity={
-          disabled ? parseFloat(theme.tokens.primitives.opacity["40"]) : 1
-        }
-        rootPaddingVertical={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.spacing.verticalPadding)
-            : undefined
-        }
-        rootPaddingHorizontal={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.spacing.horizontalPadding)
-            : undefined
-        }
-        rootMaxWidth={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
-            : undefined
-        }
-        rootBgColor={
-          isTile
-            ? isChecked
-              ? checkbox.checkboxTile.colour.background.selected
-              : checkbox.checkboxTile.colour.background.default
-            : undefined
-        }
-        rootBorderWidth={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.borderWidth.default)
-            : undefined
-        }
-        rootBorderColor={
-          isTile
-            ? isChecked
-              ? checkbox.checkboxTile.colour.border.selected
-              : checkbox.checkboxTile.colour.border.default
-            : undefined
-        }
-        rootBorderRadius={
-          isTile
-            ? parseTokenValue(checkbox.checkboxTile.borderRadius.default)
-            : undefined
-        }
-        style={typeof style === "function" ? undefined : style}
-        {...rest}
+        asChild
       >
-        <StyledControl
-          controlSize={controlSize}
-          controlBorderWidth={parseTokenValue(checkbox.control.border.default)}
-          controlBorderColor={
-            isChecked
-              ? checkbox.colour.background.selected
-              : checkbox.colour.border.default
+        <StyledRootPressable
+          ref={ref}
+          rootFlexAlign={isTile ? "center" : "flex-start"}
+          rootGap={parseTokenValue(
+            isTile ? checkbox.checkboxTile.spacing.gap : checkbox.spacing.gap
+          )}
+          rootOpacity={
+            disabled ? parseFloat(theme.tokens.primitives.opacity["40"]) : 1
+          }
+          rootPaddingVertical={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.spacing.verticalPadding)
+              : undefined
+          }
+          rootPaddingHorizontal={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.spacing.horizontalPadding)
+              : undefined
+          }
+          rootMaxWidth={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.size.maxWidth)
+              : undefined
+          }
+          rootBgColor={
+            isTile
+              ? isChecked
+                ? checkbox.checkboxTile.colour.background.selected
+                : checkbox.checkboxTile.colour.background.default
+              : undefined
           }
-          controlBorderRadius={parseTokenValue(dimensions.borderRadius.xs)}
-          controlBgColor={
-            isChecked ? checkbox.colour.background.selected : "transparent"
+          rootBorderWidth={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.borderWidth.default)
+              : undefined
           }
+          rootBorderColor={
+            isTile
+              ? isChecked
+                ? checkbox.checkboxTile.colour.border.selected
+                : checkbox.checkboxTile.colour.border.default
+              : undefined
+          }
+          rootBorderRadius={
+            isTile
+              ? parseTokenValue(checkbox.checkboxTile.borderRadius.default)
+              : undefined
+          }
+          style={typeof style === "function" ? undefined : style}
+          {...rest}
         >
-          <CheckboxPrimitive.Indicator>
-            <Icon icon={Check} size="xs" colour="alt" />
-          </CheckboxPrimitive.Indicator>
-        </StyledControl>
+          <StyledControl
+            controlSize={controlSize}
+            controlBorderWidth={parseTokenValue(
+              checkbox.control.border.default
+            )}
+            controlBorderColor={
+              isChecked
+                ? checkbox.colour.background.selected
+                : checkbox.colour.border.default
+            }
+            controlBorderRadius={parseTokenValue(dimensions.borderRadius.xs)}
+            controlBgColor={
+              isChecked ? checkbox.colour.background.selected : "transparent"
+            }
+          >
+            <CheckboxPrimitive.Indicator>
+              <Icon icon={Check} size="xs" colour="alt" />
+            </CheckboxPrimitive.Indicator>
+          </StyledControl>
 
-        <StyledContent
-          contentGap={parseTokenValue(checkbox.spacing.content.gap)}
-        >
-          {label && (
-            <Typography
-              token={checkbox.typography.label}
-              color={checkbox.colour.text.title}
-            >
-              {label}
-            </Typography>
-          )}
-          {subText && (
-            <Typography
-              token={checkbox.typography.subText}
-              color={checkbox.colour.text.subtext}
+          <StyledContent
+            contentGap={parseTokenValue(checkbox.spacing.content.gap)}
+          >
+            {label && (
+              <Typography
+                token={checkbox.typography.label}
+                color={checkbox.colour.text.title}
+              >
+                {label}
+              </Typography>
+            )}
+            {subText && (
+              <Typography
+                token={checkbox.typography.subText}
+                color={checkbox.colour.text.subtext}
+              >
+                {subText}
+              </Typography>
+            )}
+          </StyledContent>
+
+          {isTile && illustration && (
+            <StyledIllustration
+              illustrationSize={parseTokenValue(
+                checkbox.checkboxTile.size.illustration.default
+              )}
             >
-              {subText}
-            </Typography>
+              {illustration}
+            </StyledIllustration>
           )}
-        </StyledContent>
-
-        {isTile && illustration && (
-          <StyledIllustration
-            illustrationSize={parseTokenValue(
-              checkbox.checkboxTile.size.illustration.default
-            )}
-          >
-            {illustration}
-          </StyledIllustration>
-        )}
-      </StyledRoot>
+        </StyledRootPressable>
+      </CheckboxPrimitive.Root>
     )
   }
 )

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
+  }
+})