@butternutbox/pawprint-native 1.6.3 → 2.0.0

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

@@ -1,478 +1,278 @@
 import React, { useState } from "react"
-import { View, StyleSheet } from "react-native"
-import { SelectField, useSelectField } from "."
-import { Typography } from "../../atoms/Typography"
+import { ScrollView, StyleSheet, View } from "react-native"
+import { Info, Lock, Search, Settings } from "@butternutbox/pawprint-icons/core"
+import { SelectField } from "."
+import type { SelectFieldOptionData } from "."
 import { Icon } from "../../atoms/Icon"
-import { Search, Settings, Lock, Info } from "@butternutbox/pawprint-icons/core"
-import type { Option } from "@rn-primitives/select"
-
-const StoryWrapper = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-)
+import { Typography } from "../../atoms/Typography"
 
 export default {
   title: "Molecules/SelectField",
-  component: SelectField,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Select field component for choosing a value from a dropdown list. Built on @rn-primitives/select with design system styling. Supports both simple props API and compound component API."
-      }
-    }
+  component: SelectField
+}
+
+const COUNTRIES: SelectFieldOptionData[] = [
+  { value: "uk", label: "United Kingdom" },
+  { value: "us", label: "United States" },
+  { value: "ca", label: "Canada" },
+  { value: "au", label: "Australia" },
+  { value: "de", label: "Germany" },
+  { value: "fr", label: "France" },
+  { value: "nl", label: "Netherlands" },
+  { value: "ie", label: "Ireland" }
+]
+
+const SEARCH_TYPES: SelectFieldOptionData[] = [
+  {
+    value: "products",
+    label: "Products",
+    leadingIcon: <Icon icon={Search} size="md" />
   },
-  argTypes: {
-    label: {
-      control: { type: "text" },
-      description: "Label text"
-    },
-    placeholder: {
-      control: { type: "text" },
-      description: "Placeholder text"
-    },
-    description: {
-      control: { type: "text" },
-      description: "Help text below select"
-    },
-    error: {
-      control: { type: "text" },
-      description: "Error message"
-    },
-    state: {
-      control: { type: "select" },
-      options: ["default", "error", "success"],
-      description: "Visual state of the select"
-    },
-    optionalText: {
-      control: { type: "text" },
-      description: "Optional text to display next to label"
-    },
-    disabled: {
-      control: { type: "boolean" },
-      description: "Disables the select"
-    }
+  {
+    value: "orders",
+    label: "Orders",
+    leadingIcon: <Icon icon={Settings} size="md" />
+  },
+  {
+    value: "admin",
+    label: "Admin Panel",
+    leadingIcon: <Icon icon={Lock} size="md" />,
+    disabled: true
+  },
+  {
+    value: "help",
+    label: "Help & Support",
+    leadingIcon: <Icon icon={Info} size="md" />
   }
-}
+]
+
+const StoryWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ScrollView contentContainerStyle={styles.wrapper}>{children}</ScrollView>
+)
+
+const Section = ({
+  title,
+  children
+}: {
+  title: string
+  children: React.ReactNode
+}) => (
+  <View style={styles.section}>
+    <Typography size="sm" weight="semiBold" color="tertiary">
+      {title}
+    </Typography>
+    {children}
+  </View>
+)
 
 export const Default = () => (
   <StoryWrapper>
-    <View style={styles.container}>
+    <Section title="Default">
+      <SelectField
+        label="Country"
+        placeholder="Select a country"
+        description="Start typing to filter the list"
+        options={COUNTRIES}
+      />
+    </Section>
+  </StoryWrapper>
+)
+
+export const WithOptionIcons = () => (
+  <StoryWrapper>
+    <Section title="Per-option leading icons, one disabled">
       <SelectField
         label="Search Type"
         placeholder="Select search type"
-        description="Choose how you want to search"
         leadingIcon={<Icon icon={Search} size="md" />}
-      >
-        <SelectField.Item
-          value="products"
-          leadingIcon={<Icon icon={Search} size="md" />}
-          hintText="Search all products"
-        >
-          Products
-        </SelectField.Item>
-        <SelectField.Item
-          value="orders"
-          leadingIcon={<Icon icon={Settings} size="md" />}
-          hintText="Search order history"
-        >
-          Orders
-        </SelectField.Item>
-        <SelectField.Item
-          value="admin"
-          leadingIcon={<Icon icon={Lock} size="md" />}
-          hintText="Admin access required"
-          disabled
-        >
-          Admin Panel
-        </SelectField.Item>
-        <SelectField.Item
-          value="help"
-          leadingIcon={<Icon icon={Info} size="md" />}
-        >
-          Help & Support
-        </SelectField.Item>
-      </SelectField>
-    </View>
+        options={SEARCH_TYPES}
+      />
+    </Section>
   </StoryWrapper>
 )
 
 export const States = () => (
   <StoryWrapper>
-    <View style={styles.column}>
-      <View style={styles.section}>
-        <Typography size="sm" weight="semiBold" color="tertiary">
-          Default State
-        </Typography>
-        <SelectField
-          label="Default State"
-          placeholder="Select an option"
-          description="Normal select state"
-        >
-          <SelectField.Item value="option1">Option 1</SelectField.Item>
-          <SelectField.Item value="option2">Option 2</SelectField.Item>
-          <SelectField.Item value="option3">Option 3</SelectField.Item>
-        </SelectField>
-      </View>
-
-      <View style={styles.section}>
-        <Typography size="sm" weight="semiBold" color="tertiary">
-          Error State
-        </Typography>
-        <SelectField
-          label="Error State"
-          placeholder="Select an option"
-          state="error"
-          error="This field is required"
-          description="Error state"
-        >
-          <SelectField.Item value="option1">Option 1</SelectField.Item>
-          <SelectField.Item value="option2">Option 2</SelectField.Item>
-        </SelectField>
-      </View>
-
-      <View style={styles.section}>
-        <Typography size="sm" weight="semiBold" color="tertiary">
-          Success State
-        </Typography>
-        <SelectField
-          label="Success State"
-          placeholder="Select an option"
-          state="success"
-          description="Success state"
-          defaultValue="option1"
-        >
-          <SelectField.Item value="option1">Option 1</SelectField.Item>
-          <SelectField.Item value="option2">Option 2</SelectField.Item>
-        </SelectField>
-      </View>
-
-      <View style={styles.section}>
-        <Typography size="sm" weight="semiBold" color="tertiary">
-          Disabled
-        </Typography>
-        <SelectField
-          label="Disabled"
-          placeholder="Select an option"
-          description="Disabled select field"
-          disabled
-        >
-          <SelectField.Item value="option1">Option 1</SelectField.Item>
-          <SelectField.Item value="option2">Option 2</SelectField.Item>
-        </SelectField>
-      </View>
-    </View>
+    <Section title="Default">
+      <SelectField
+        label="Country"
+        placeholder="Select a country"
+        description="Normal state"
+        options={COUNTRIES}
+      />
+    </Section>
+    <Section title="Error">
+      <SelectField
+        label="Country"
+        placeholder="Select a country"
+        error="Please choose a country"
+        options={COUNTRIES}
+      />
+    </Section>
+    <Section title="Error with a value (clear takes the trailing slot)">
+      <SelectField
+        label="Country"
+        defaultValue="uk"
+        error="This country is not served yet"
+        options={COUNTRIES}
+      />
+    </Section>
+    <Section title="Success">
+      <SelectField
+        label="Country"
+        state="success"
+        defaultValue="uk"
+        description="Looks good"
+        options={COUNTRIES}
+      />
+    </Section>
+    <Section title="Disabled">
+      <SelectField
+        label="Country"
+        placeholder="Select a country"
+        description="Disabled field"
+        disabled
+        options={COUNTRIES}
+      />
+    </Section>
   </StoryWrapper>
 )
 
 export const WithOptionalText = () => (
   <StoryWrapper>
-    <View style={styles.column}>
-      <View style={styles.section}>
-        <Typography size="sm" weight="semiBold" color="tertiary">
-          With Optional Text
-        </Typography>
-        <SelectField
-          label="Country"
-          optionalText="(optional)"
-          placeholder="Select a country"
-          description="Optional select field"
-        >
-          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
-          <SelectField.Item value="us">United States</SelectField.Item>
-          <SelectField.Item value="ca">Canada</SelectField.Item>
-        </SelectField>
-      </View>
-    </View>
+    <Section title="Optional label suffix">
+      <SelectField
+        label="Country"
+        optionalText="(optional)"
+        placeholder="Select a country"
+        options={COUNTRIES}
+      />
+    </Section>
   </StoryWrapper>
 )
 
-export const CustomValidation = () => {
-  const [value, setValue] = useState<Option | string | null>(null)
-
-  // Extract actual value for validation
-  const actualValue =
-    value && typeof value === "object" && "value" in value ? value.value : value
-
-  return (
-    <StoryWrapper>
-      <View style={styles.column}>
-        <View style={styles.section}>
-          <Typography size="sm" weight="semiBold" color="tertiary">
-            Custom Validation
-          </Typography>
-          <SelectField
-            label="Product Category"
-            placeholder="Select category"
-            value={value}
-            onValueChange={(newValue) => setValue(newValue)}
-            description="Select a valid category"
-            error={
-              actualValue === "invalid"
-                ? "This option is not allowed"
-                : undefined
-            }
-            state={actualValue === "invalid" ? "error" : "default"}
-          >
-            <SelectField.Item value="food">Food</SelectField.Item>
-            <SelectField.Item value="toys">Toys</SelectField.Item>
-            <SelectField.Item value="invalid">Invalid Option</SelectField.Item>
-          </SelectField>
-        </View>
-      </View>
-    </StoryWrapper>
-  )
-}
-
-export const CustomStateValidationWithSuccess = () => {
-  const selectProps = useSelectField({
-    validationRule: {
-      test: (value) => {
-        if (!value) return false
-        // Handle object with value property
-        const actualValue =
-          typeof value === "object" && value !== null && "value" in value
-            ? (value as { value: string }).value
-            : value
-        return actualValue !== "invalid"
-      },
-      message: "Please select a valid option"
-    }
-  })
-
-  return (
-    <StoryWrapper>
-      <View style={styles.column}>
-        <View style={styles.section}>
-          <Typography size="sm" weight="semiBold" color="tertiary">
-            Real-time Validation with Success State
-          </Typography>
-          <SelectField
-            {...selectProps}
-            label="Product Category"
-            placeholder="Select category"
-            description="Select a valid category (not 'Invalid Option')"
-          >
-            <SelectField.Item value="food">Food</SelectField.Item>
-            <SelectField.Item value="toys">Toys</SelectField.Item>
-            <SelectField.Item value="accessories">Accessories</SelectField.Item>
-            <SelectField.Item value="invalid">Invalid Option</SelectField.Item>
-          </SelectField>
-        </View>
-      </View>
-    </StoryWrapper>
-  )
-}
-
 export const Controlled = () => {
-  const selectProps = useSelectField()
-
-  // Extract the actual value for display (handle object with value property)
-  const displayValue = (() => {
-    const val = selectProps.value
-    if (!val) return "(none)"
-    if (typeof val === "object" && val !== null && "value" in val) {
-      return (val as { value: string }).value
-    }
-    return String(val)
-  })()
+  const [country, setCountry] = useState<string | null>("ca")
 
   return (
     <StoryWrapper>
-      <View style={styles.column}>
-        <View style={styles.section}>
-          <Typography size="sm" weight="semiBold" color="tertiary">
-            Controlled: {displayValue}
-          </Typography>
-          <SelectField
-            {...selectProps}
-            label="Country"
-            placeholder="Select a country"
-            description={`Current value: "${displayValue}"`}
-          >
-            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
-            <SelectField.Item value="us">United States</SelectField.Item>
-            <SelectField.Item value="ca">Canada</SelectField.Item>
-            <SelectField.Item value="au">Australia</SelectField.Item>
-          </SelectField>
-        </View>
-      </View>
+      <Section title="Controlled">
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          value={country}
+          onValueChange={setCountry}
+          options={COUNTRIES}
+        />
+        <Typography size="sm" color="tertiary">
+          {`value: ${country ?? "null"}`}
+        </Typography>
+      </Section>
     </StoryWrapper>
   )
 }
 
-export const Searchable = () => (
+export const NoResults = () => (
   <StoryWrapper>
-    <View style={styles.column}>
-      <View style={styles.section}>
-        <Typography size="sm" weight="semiBold" color="tertiary">
-          Searchable Select
-        </Typography>
-        <SelectField
-          label="Country"
-          placeholder="Select a country"
-          description="Type to filter countries"
-          searchable
-          searchPlaceholder="Search countries..."
-        >
-          <SelectField.Item value="au">Australia</SelectField.Item>
-          <SelectField.Item value="br">Brazil</SelectField.Item>
-          <SelectField.Item value="ca">Canada</SelectField.Item>
-          <SelectField.Item value="dk">Denmark</SelectField.Item>
-          <SelectField.Item value="eg">Egypt</SelectField.Item>
-          <SelectField.Item value="fr">France</SelectField.Item>
-          <SelectField.Item value="de">Germany</SelectField.Item>
-          <SelectField.Item value="in">India</SelectField.Item>
-          <SelectField.Item value="jp">Japan</SelectField.Item>
-          <SelectField.Item value="mx">Mexico</SelectField.Item>
-          <SelectField.Item value="nl">Netherlands</SelectField.Item>
-          <SelectField.Item value="nz">New Zealand</SelectField.Item>
-          <SelectField.Item value="no">Norway</SelectField.Item>
-          <SelectField.Item value="pl">Poland</SelectField.Item>
-          <SelectField.Item value="pt">Portugal</SelectField.Item>
-          <SelectField.Item value="es">Spain</SelectField.Item>
-          <SelectField.Item value="se">Sweden</SelectField.Item>
-          <SelectField.Item value="ch">Switzerland</SelectField.Item>
-          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
-          <SelectField.Item value="us">United States</SelectField.Item>
-        </SelectField>
-      </View>
-    </View>
+    <Section title="Type something unmatched to see the no-results row">
+      <SelectField
+        label="Country"
+        placeholder="Select a country"
+        noResultsText="No countries found"
+        options={COUNTRIES}
+      />
+    </Section>
   </StoryWrapper>
 )
 
-export const SearchableControlled = () => {
-  const [value, setValue] = useState<Option | string | null>(null)
-
-  const displayValue = (() => {
-    if (!value) return "(none)"
-    if (typeof value === "object" && "value" in value) return value.value
-    return String(value)
-  })()
-
-  return (
-    <StoryWrapper>
-      <View style={styles.column}>
-        <View style={styles.section}>
-          <Typography size="sm" weight="semiBold" color="tertiary">
-            Controlled value: {displayValue}
-          </Typography>
-          <SelectField
-            label="Country"
-            placeholder="Select a country"
-            description="Select a country — the clear button resets the controlled value"
-            searchable
-            searchPlaceholder="Search countries..."
-            value={value}
-            onValueChange={(newValue) => setValue(newValue)}
-          >
-            <SelectField.Item value="au">Australia</SelectField.Item>
-            <SelectField.Item value="ca">Canada</SelectField.Item>
-            <SelectField.Item value="fr">France</SelectField.Item>
-            <SelectField.Item value="de">Germany</SelectField.Item>
-            <SelectField.Item value="jp">Japan</SelectField.Item>
-            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
-            <SelectField.Item value="us">United States</SelectField.Item>
-          </SelectField>
-        </View>
-      </View>
-    </StoryWrapper>
-  )
-}
+export const LongLabels = () => (
+  <StoryWrapper>
+    <Section title="Long labels truncate to one line">
+      <SelectField
+        label="Region"
+        placeholder="Select a region"
+        options={[
+          {
+            value: "long",
+            label:
+              "A deliberately long option label that will not fit on one line"
+          },
+          { value: "short", label: "Short" }
+        ]}
+      />
+    </Section>
+  </StoryWrapper>
+)
 
-export const SearchableDefaultPlaceholder = () => (
+export const NearScreenBottom = () => (
   <StoryWrapper>
-    <View style={styles.column}>
-      <View style={styles.section}>
-        <Typography size="sm" weight="semiBold" color="tertiary">
-          Default Search Placeholder
-        </Typography>
-        <SelectField label="Pet breed" placeholder="Select a breed" searchable>
-          <SelectField.Item value="labrador">
-            Labrador Retriever
-          </SelectField.Item>
-          <SelectField.Item value="german-shepherd">
-            German Shepherd
-          </SelectField.Item>
-          <SelectField.Item value="golden-retriever">
-            Golden Retriever
-          </SelectField.Item>
-          <SelectField.Item value="bulldog">Bulldog</SelectField.Item>
-          <SelectField.Item value="poodle">Poodle</SelectField.Item>
-          <SelectField.Item value="beagle">Beagle</SelectField.Item>
-          <SelectField.Item value="rottweiler">Rottweiler</SelectField.Item>
-          <SelectField.Item value="yorkshire-terrier">
-            Yorkshire Terrier
-          </SelectField.Item>
-        </SelectField>
-      </View>
-    </View>
+    <View style={styles.spacer} />
+    <Section title="Flips above when there is no room below">
+      <SelectField
+        label="Country"
+        placeholder="Select a country"
+        options={COUNTRIES}
+      />
+    </Section>
   </StoryWrapper>
 )
 
-const ALL_BREEDS = [
-  { value: "labrador", label: "Labrador Retriever" },
-  { value: "german-shepherd", label: "German Shepherd" },
-  { value: "golden-retriever", label: "Golden Retriever" },
-  { value: "bulldog", label: "Bulldog" },
-  { value: "poodle", label: "Poodle" },
-  { value: "beagle", label: "Beagle" },
-  { value: "rottweiler", label: "Rottweiler" },
-  { value: "dachshund", label: "Dachshund" },
-  { value: "yorkshire-terrier", label: "Yorkshire Terrier" },
-  { value: "boxer", label: "Boxer" }
-]
+const ALL_BREEDS: SelectFieldOptionData[] = [
+  "Border Collie",
+  "Boston Terrier",
+  "Cocker Spaniel",
+  "Flat-Coated Retriever",
+  "French Bulldog",
+  "German Shepherd",
+  "Golden Retriever",
+  "Jack Russell Terrier",
+  "Labradoodle",
+  "Labrador Retriever",
+  "Springer Spaniel",
+  "Yorkshire Terrier"
+].map((label) => ({ value: label.toLowerCase().replace(/\s+/g, "-"), label }))
 
-export const SearchableAsyncQuery = () => {
-  const searchBreeds = (query: string) =>
-    new Promise<typeof ALL_BREEDS>((resolve, reject) => {
-      setTimeout(() => {
-        // Type "fail" to see the error state.
-        if (query.toLowerCase().includes("fail")) {
-          reject(new Error("Simulated request failure"))
-          return
-        }
-        resolve(
-          ALL_BREEDS.filter((breed) =>
-            breed.label.toLowerCase().includes(query.toLowerCase())
-          )
+const searchBreeds = (query: string) =>
+  new Promise<SelectFieldOptionData[]>((resolve, reject) => {
+    setTimeout(() => {
+      if (query.toLowerCase().includes("fail")) {
+        reject(new Error("Simulated request failure"))
+        return
+      }
+      resolve(
+        ALL_BREEDS.filter((breed) =>
+          breed.label.toLowerCase().includes(query.toLowerCase())
         )
-      }, 600)
-    })
+      )
+    }, 600)
+  })
 
-  return (
-    <StoryWrapper>
-      <View style={styles.column}>
-        <View style={styles.section}>
-          <Typography size="sm" weight="semiBold" color="tertiary">
-            Async Query (spinner, no-results, error)
-          </Typography>
-          <SelectField
-            label="Breed"
-            placeholder="Select a breed"
-            description="Type to search — 'fail' triggers the error state"
-            searchable
-            searchPlaceholder="Search breeds..."
-            noResultsText="No breeds found"
-            errorText="Couldn't load breeds"
-            onSearchQuery={searchBreeds}
-          />
-        </View>
-      </View>
-    </StoryWrapper>
-  )
-}
+export const AsyncSearch = () => (
+  <StoryWrapper>
+    <SelectField
+      label="Breed"
+      placeholder="Select a breed"
+      description="Type to search — 'fail' triggers the error state"
+      noResultsText="No breeds found"
+      errorText="Couldn't load breeds"
+      onSearchQuery={searchBreeds}
+      options={[]}
+    />
+  </StoryWrapper>
+)
 
 const styles = StyleSheet.create({
-  container: {
-    width: 320
-  },
-  column: {
+  wrapper: {
     flexDirection: "column",
     gap: 24,
-    width: 320
+    padding: 16,
+    width: 360
   },
   section: {
     flexDirection: "column",
     gap: 8
+  },
+  spacer: {
+    height: 520
   }
 })