braid-ui 1.0.99 → 1.0.101

package/src/components/form-sections/ACHTransferSection.tsx

@@ -1,64 +0,0 @@
-import { useState } from "react"
-import { EditableFormCard } from "@/components/ui/editable-form-card"
-import { ResponsiveGrid } from "@/components/ui/responsive-grid"
-import { ACHBasicInfoCard } from "./ACHBasicInfoCard"
-import { ACHBankCard } from "./ACHBankCard"
-import { BankAddressCard } from "./BankAddressCard"
-import { defaultACHTransfer } from "@/lib/mock-data/banking-data"
-import { type ACHTransfer } from "@/lib/schemas/banking-schemas"
-
-interface ACHTransferSectionProps {
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const ACHTransferSection = ({ isEditing, onToggleEdit, className, hideActions }: ACHTransferSectionProps) => {
-  const [achData, setAchData] = useState<ACHTransfer>(defaultACHTransfer)
-
-  const handleDataChange = (newData: ACHTransfer) => {
-    setAchData(newData)
-  }
-
-  const content = (
-    <div className="space-y-6">
-      <div className="flex items-center gap-2">
-        <span className="text-sm font-medium text-muted-foreground">Transfer Type:</span>
-        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary text-secondary-foreground">
-          ACH
-        </span>
-      </div>
-      
-      <ResponsiveGrid type="forms" gap="md" editMode={isEditing}>
-        <ACHBasicInfoCard 
-          data={achData}
-          onDataChange={handleDataChange}
-          isEditing={isEditing} 
-          hideActions={true} 
-        />
-        <ACHBankCard 
-          data={achData}
-          onDataChange={handleDataChange}
-          isEditing={isEditing} 
-          hideActions={true} 
-        />
-        <BankAddressCard isEditing={isEditing} hideActions={true} />
-      </ResponsiveGrid>
-    </div>
-  )
-
-  return (
-    <EditableFormCard
-      title="ACH Transfer Configuration"
-      description="Configure ACH transfer settings and bank details"
-      variant="subtle"
-      className={className}
-      isEditing={isEditing}
-      onToggleEdit={onToggleEdit}
-      hideActions={hideActions}
-      editContent={content}
-      viewContent={content}
-    />
-  )
-}

package/src/components/form-sections/AddressForm.tsx

@@ -1,94 +0,0 @@
-import { EnhancedInput } from "@/components/ui/enhanced-input"
-import { EnhancedSelect } from "@/components/ui/enhanced-select"
-import { COUNTRY_OPTIONS, ADDRESS_TYPE_OPTIONS } from "@/lib/constants"
-
-interface AddressFormProps {
-  title: string
-  description: string
-  fieldPrefix?: string
-  showAddressType?: boolean
-  addressTypeOptions?: Array<{ value: string; label: string }>
-  fieldOverrides?: {
-    state?: Partial<React.ComponentProps<typeof EnhancedInput>>
-    city?: Partial<React.ComponentProps<typeof EnhancedInput>>
-    streetAddress?: Partial<React.ComponentProps<typeof EnhancedInput>>
-    postalCode?: Partial<React.ComponentProps<typeof EnhancedInput>>
-    apartment?: Partial<React.ComponentProps<typeof EnhancedInput>>
-  }
-  showApartment?: boolean
-}
-
-export const AddressForm = ({ 
-  title, 
-  description, 
-  fieldPrefix = "",
-  showAddressType = true,
-  addressTypeOptions = ADDRESS_TYPE_OPTIONS.FI,
-  fieldOverrides = {},
-  showApartment = false
-}: AddressFormProps) => {
-  const addressTypeLabel = fieldPrefix ? `${fieldPrefix} Address Type` : "Address Type"
-  
-  return (
-    <div className="space-y-6">
-      <div className="border-b border-border pb-4">
-        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-        <p className="text-sm text-muted-foreground">{description}</p>
-      </div>
-      
-      <div className="space-y-6">
-        <div className="grid grid-cols-1 gap-6">
-          <EnhancedInput
-            label="State"
-            placeholder="Enter state"
-            hint="State or province"
-            {...fieldOverrides.state}
-          />
-          
-          <EnhancedInput
-            label="City"
-            placeholder="Enter city"
-            required
-            {...fieldOverrides.city}
-          />
-          
-          <EnhancedInput
-            label="Street Address"
-            placeholder="Enter street address"
-            hint={fieldPrefix ? `${fieldPrefix} street address` : "Primary street address"}
-            {...fieldOverrides.streetAddress}
-          />
-          
-          {showApartment && (
-            <EnhancedInput
-              label="Apt, Building etc"
-              placeholder="Additional address information"
-              hint="Additional address information"
-              {...fieldOverrides.apartment}
-            />
-          )}
-          
-          <EnhancedInput
-            label="Postal Code"
-            placeholder="12345"
-            {...fieldOverrides.postalCode}
-          />
-          
-          <EnhancedSelect
-            label="Country Code"
-            placeholder="Select country"
-            options={COUNTRY_OPTIONS}
-          />
-          
-          {showAddressType && (
-            <EnhancedSelect
-              label={addressTypeLabel}
-              placeholder="Select type"
-              options={addressTypeOptions}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/form-sections/BankAddressCard.tsx

@@ -1,95 +0,0 @@
-import { EditableFormCard } from "@/components/ui/editable-form-card"
-import { InfoField } from "@/components/ui/info-field"
-import { FormProvider } from "@/components/ui/form-provider"
-import { FormInput } from "@/components/ui/form-input"
-import { useFormWithEditState } from "@/hooks/useFormWithEditState"
-import { addressSchema, type Address } from "@/lib/schemas"
-import { defaultBankAddress } from "@/lib/mock-data/banking-data"
-
-interface BankAddressCardProps {
-  data?: Partial<Address>
-  onDataChange?: (data: Address) => void
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const BankAddressCard = ({ 
-  data, 
-  onDataChange, 
-  isEditing, 
-  onToggleEdit, 
-  className, 
-  hideActions 
-}: BankAddressCardProps) => {
-  const form = useFormWithEditState<Address>({
-    schema: addressSchema,
-    defaultValues: { ...defaultBankAddress, ...data },
-    initialEditing: isEditing,
-    onToggleEdit,
-    onSave: onDataChange,
-  })
-
-  const editContent = (
-    <FormProvider form={form}>
-      <div className="space-y-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FormInput
-            name="streetAddress"
-            label="Street Address"
-            placeholder="Enter street address"
-            required
-          />
-          
-          <FormInput
-            name="city"
-            label="City"
-            placeholder="Enter city"
-            required
-          />
-          
-          <FormInput
-            name="state"
-            label="State"
-            placeholder="Enter state"
-            required
-          />
-          
-          <FormInput
-            name="postalCode"
-            label="Postal Code"
-            placeholder="Enter postal code"
-            required
-          />
-        </div>
-      </div>
-    </FormProvider>
-  )
-
-  const formValues = form.watch()
-  const viewContent = (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <InfoField label="Street Address" value={formValues?.streetAddress} layout="horizontal" />
-      <InfoField label="City" value={formValues?.city} layout="horizontal" />
-      <InfoField label="State" value={formValues?.state} layout="horizontal" />
-      <InfoField label="Postal Code" value={formValues?.postalCode} layout="horizontal" />
-    </div>
-  )
-
-  return (
-    <EditableFormCard
-      title="Bank Address"
-      description="Physical address of the banking institution"
-      variant="subtle"
-      className={className}
-      isEditing={form.isEditing}
-      onToggleEdit={form.handleToggleEdit}
-      onSave={form.handleSave}
-      onCancel={form.handleCancel}
-      hideActions={hideActions}
-      editContent={editContent}
-      viewContent={viewContent}
-    />
-  )
-}

package/src/components/form-sections/BankingDetailsCard.tsx

@@ -1,46 +0,0 @@
-import { FormCard } from "@/components/ui/form-card"
-import { InfoField } from "@/components/ui/info-field"
-import { Button } from "@/components/ui/button"
-import { Edit } from "lucide-react"
-
-interface BankingDetailsCardProps {
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-}
-
-export const BankingDetailsCard = ({ isEditing, onToggleEdit, className }: BankingDetailsCardProps) => {
-  return (
-    <FormCard 
-      title="Banking Details"
-      className={className}
-      headerActions={
-        <div className="flex items-center gap-2">
-          {isEditing ? (
-            <>
-              <Button variant="outline" size="sm" onClick={onToggleEdit}>
-                Cancel
-              </Button>
-              <Button size="sm" onClick={onToggleEdit}>
-                Save
-              </Button>
-            </>
-          ) : (
-            <Button variant="ghost" size="icon" onClick={onToggleEdit} className="text-primary hover:text-primary/80 hover:bg-primary/10">
-              <Edit className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
-      }
-    >
-      <div className="space-y-3">
-        <div className="grid grid-cols-1 gap-2">
-          <InfoField label="Primary Bank" value="JPMorgan Chase" layout="horizontal" />
-          <InfoField label="Account Number" value="****-****-****-1234" layout="horizontal" />
-          <InfoField label="Routing Number" value="021000021" layout="horizontal" />
-          <InfoField label="Account Type" value="Business Checking" layout="horizontal" />
-        </div>
-      </div>
-    </FormCard>
-  )
-}

package/src/components/form-sections/BasicInfoCard.tsx

@@ -1,103 +0,0 @@
-import { EditableFormCard } from "@/components/ui/editable-form-card"
-import { InfoField } from "@/components/ui/info-field"
-import { EnhancedInput } from "@/components/ui/enhanced-input"
-import { EnhancedSelect } from "@/components/ui/enhanced-select"
-import { CounterpartyTypeBadge } from "@/components/ui/counterparty-type-badge"
-import { StatusBadge } from "@/components/ui/status-badge"
-import { useState } from "react"
-
-interface BasicInfoCardProps {
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const BasicInfoCard = ({ isEditing, onToggleEdit, className, hideActions }: BasicInfoCardProps) => {
-  const [name, setName] = useState("John wire hot")
-  const [status, setStatus] = useState("ACTIVE")
-
-  const editContent = (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <EnhancedInput
-          label="Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Enter counterparty name"
-        />
-        
-        <EnhancedSelect
-          label="Status"
-          value={status}
-          onValueChange={setStatus}
-          placeholder="Select status"
-          options={[
-            { value: "ACTIVE", label: "Active" },
-            { value: "INACTIVE", label: "Inactive" },
-            { value: "PENDING", label: "Pending" },
-            { value: "SUSPENDED", label: "Suspended" }
-          ]}
-        />
-      </div>
-      
-      <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border">
-        <InfoField label="ID" value="5000541" layout="horizontal" />
-        <InfoField label="Counterparty Type" value={<CounterpartyTypeBadge type="BUSINESS" />} layout="horizontal" />
-        <InfoField label="ID Number" value="•••••••" layout="horizontal" />
-        <InfoField label="ID Type" value="SSN" layout="horizontal" />
-        <InfoField label="Date of Birth" value="1985-8-20" layout="horizontal" />
-        <InfoField label="Created By" value="admin" layout="horizontal" />
-        <InfoField label="Created At" value="2025-07-14" layout="horizontal" />
-        <InfoField label="Updated By" value="admin" layout="horizontal" />
-        <InfoField label="Updated At" value="2025-07-14" layout="horizontal" />
-      </div>
-      
-      <div className="pt-3 border-t border-border">
-        <h4 className="text-sm font-medium text-foreground mb-2">OFAC Details</h4>
-        <div className="grid grid-cols-2 gap-4">
-          <InfoField label="Last OFAC date" value="2025-07-14" layout="horizontal" />
-          <InfoField label="Last OFAC status" value="Verified" layout="horizontal" />
-        </div>
-      </div>
-    </div>
-  )
-
-  const viewContent = (
-    <div className="space-y-4">
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="ID" value="5000541" layout="horizontal" />
-        <InfoField label="Name" value={name} layout="horizontal" />
-        <InfoField label="Counterparty Type" value={<CounterpartyTypeBadge type="BUSINESS" />} layout="horizontal" />
-        <InfoField label="Status" value={<StatusBadge status={status as "ACTIVE" | "INACTIVE" | "PENDING" | "SUSPENDED"} />} layout="horizontal" />
-        <InfoField label="ID Number" value="•••••••" layout="horizontal" />
-        <InfoField label="ID Type" value="SSN" layout="horizontal" />
-        <InfoField label="Date of Birth" value="1985-8-20" layout="horizontal" />
-        <InfoField label="Created By" value="admin" layout="horizontal" />
-        <InfoField label="Created At" value="2025-07-14" layout="horizontal" />
-        <InfoField label="Updated By" value="admin" layout="horizontal" />
-        <InfoField label="Updated At" value="2025-07-14" layout="horizontal" />
-      </div>
-      
-      <div className="pt-3 border-t border-border">
-        <h4 className="text-sm font-medium text-foreground mb-2">OFAC Details</h4>
-        <div className="grid grid-cols-2 gap-4">
-          <InfoField label="Last OFAC date" value="2025-07-14" layout="horizontal" />
-          <InfoField label="Last OFAC status" value="Verified" layout="horizontal" />
-        </div>
-      </div>
-    </div>
-  )
-
-  return (
-    <EditableFormCard
-      title="Basic Info"
-      className={className}
-      isEditing={isEditing}
-      onToggleEdit={onToggleEdit}
-      hideActions={hideActions}
-      editContent={editContent}
-      viewContent={viewContent}
-    />
-  )
-}

package/src/components/form-sections/BasicInfoSection.tsx

@@ -1,34 +0,0 @@
-import { EditableFormCard } from "@/components/ui/editable-form-card"
-import { ResponsiveGrid } from "@/components/ui/responsive-grid"
-import { CounterpartyProfileCard } from "./CounterpartyProfileCard"
-import { CounterpartyRecordsCard } from "./CounterpartyRecordsCard"
-
-interface BasicInfoSectionProps {
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const BasicInfoSection = ({ isEditing, onToggleEdit, className, hideActions }: BasicInfoSectionProps) => {
-  const content = (
-    <ResponsiveGrid type="forms" gap="md" editMode={isEditing}>
-      <CounterpartyProfileCard isEditing={isEditing} hideActions={true} />
-      <CounterpartyRecordsCard isEditing={isEditing} hideActions={true} />
-    </ResponsiveGrid>
-  )
-
-  return (
-    <EditableFormCard
-      title="Basic Information"
-      description="Core counterparty details and records"
-      variant="subtle"
-      className={className}
-      isEditing={isEditing}
-      onToggleEdit={onToggleEdit}
-      hideActions={hideActions}
-      editContent={content}
-      viewContent={content}
-    />
-  )
-}

package/src/components/form-sections/BeneficiaryAddress.tsx

@@ -1,19 +0,0 @@
-import { AddressForm } from "./AddressForm"
-
-export const BeneficiaryAddress = () => {
-  return (
-    <AddressForm
-      title="Beneficiary Address Details"
-      description="Address information for the beneficiary"
-      showAddressType={false}
-      showApartment={true}
-      fieldOverrides={{
-        apartment: { 
-          placeholder: "this is a very long address that will be truncated",
-          value: "this is a very long address that will be truncated"
-        },
-        postalCode: { error: "Invalid postal code format" }
-      }}
-    />
-  )
-}

package/src/components/form-sections/BeneficiaryCard.tsx

@@ -1,41 +0,0 @@
-import { EditableFormCard } from "@/components/ui/editable-form-card"
-import { DataGrid } from "@/components/ui/data-grid"
-import { BeneficiaryDomesticWire } from "@/components/form-sections/BeneficiaryDomesticWire"
-
-interface BeneficiaryCardProps {
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const BeneficiaryCard = ({ isEditing, onToggleEdit, className, hideActions }: BeneficiaryCardProps) => {
-  const viewData = [
-    {
-      title: "Account Information",
-      items: [
-        { label: "Account Number", value: "123456789012" }
-      ]
-    },
-    {
-      title: "Beneficiary Address", 
-      items: [
-        { value: "123 Main Street, Apartment 4B, New York, NY 10001, United States" }
-      ],
-      className: "pt-3 border-t border-border"
-    }
-  ]
-
-  return (
-    <EditableFormCard
-      title="Beneficiary"
-      variant="subtle"
-      className={className}
-      isEditing={isEditing}
-      onToggleEdit={onToggleEdit}
-      hideActions={hideActions}
-      editContent={<BeneficiaryDomesticWire />}
-      viewContent={<DataGrid data={viewData} columns={1} />}
-    />
-  )
-}

package/src/components/form-sections/BeneficiaryDomesticWire.tsx

@@ -1,23 +0,0 @@
-import { EnhancedInput } from "@/components/ui/enhanced-input"
-import { BeneficiaryAddress } from "./BeneficiaryAddress"
-
-export const BeneficiaryDomesticWire = () => {
-  return (
-    <div className="space-y-6">
-      <div className="border-b border-border pb-4">
-        <h3 className="text-lg font-semibold text-foreground">Beneficiary Information</h3>
-        <p className="text-sm text-muted-foreground">Account and address details for the beneficiary</p>
-      </div>
-      
-      <div className="space-y-6">
-        <EnhancedInput
-          label="Beneficiary Account Number"
-          placeholder="Enter beneficiary account number"
-          hint="Account number for the beneficiary"
-        />
-        
-        <BeneficiaryAddress />
-      </div>
-    </div>
-  )
-}

package/src/components/form-sections/BusinessProfileCard.tsx

@@ -1,131 +0,0 @@
-import { EditableFormCard } from "@/components/ui/editable-form-card"
-import { InfoField } from "@/components/ui/info-field"
-import { FormProvider } from "@/components/ui/form-provider"
-import { FormInput } from "@/components/ui/form-input"
-import { FormSelect } from "@/components/ui/form-select"
-import { useFormWithEditState } from "@/hooks/useFormWithEditState"
-import { businessProfileSchema, type BusinessProfile } from "@/lib/schemas"
-import { defaultBusinessProfile } from "@/lib/mock-data/business-data"
-
-interface BusinessProfileCardProps {
-  data?: Partial<BusinessProfile>
-  onDataChange?: (data: BusinessProfile) => void
-  isEditing?: boolean
-  onToggleEdit?: () => void
-  className?: string
-  hideActions?: boolean
-}
-
-export const BusinessProfileCard = ({ 
-  data, 
-  onDataChange, 
-  isEditing, 
-  onToggleEdit, 
-  className, 
-  hideActions 
-}: BusinessProfileCardProps) => {
-  const form = useFormWithEditState<BusinessProfile>({
-    schema: businessProfileSchema,
-    defaultValues: { ...defaultBusinessProfile, ...data },
-    initialEditing: isEditing,
-    onToggleEdit,
-    onSave: onDataChange,
-  })
-
-  const editContent = (
-    <FormProvider form={form}>
-      <div className="space-y-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FormInput
-            name="legalName"
-            label="Legal Name"
-            placeholder="Enter legal business name"
-            required
-          />
-          
-          <FormInput
-            name="dbaName"
-            label="DBA Name"
-            placeholder="Enter doing business as name"
-          />
-          
-          <FormSelect
-            name="businessType"
-            label="Business Type"
-            placeholder="Select business type"
-            options={[
-              { value: "corporation", label: "Corporation" },
-              { value: "llc", label: "LLC" },
-              { value: "partnership", label: "Partnership" },
-              { value: "sole_proprietorship", label: "Sole Proprietorship" }
-            ]}
-          />
-          
-          <FormInput
-            name="taxId"
-            label="Tax ID"
-            placeholder="Enter tax identification number"
-            required
-          />
-          
-          <FormInput
-            name="businessPhone"
-            label="Business Phone"
-            placeholder="Enter business phone number"
-            required
-          />
-          
-          <FormInput
-            name="businessEmail"
-            label="Business Email"
-            type="email"
-            placeholder="Enter business email"
-            required
-          />
-          
-          <FormInput
-            name="website"
-            label="Website"
-            placeholder="Enter website URL"
-          />
-        </div>
-      </div>
-    </FormProvider>
-  )
-
-  const formValues = form.watch()
-  const viewContent = (
-    <div className="space-y-4">
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="Legal Name" value={formValues?.legalName} layout="horizontal" />
-        <InfoField label="DBA Name" value={formValues?.dbaName} layout="horizontal" />
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="Business Type" value={formValues?.businessType} layout="horizontal" />
-        <InfoField label="Tax ID" value={formValues?.taxId} layout="horizontal" />
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="Business Phone" value={formValues?.businessPhone} layout="horizontal" />
-        <InfoField label="Business Email" value={formValues?.businessEmail} layout="horizontal" />
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <InfoField label="Website" value={formValues?.website} layout="horizontal" />
-      </div>
-    </div>
-  )
-
-  return (
-    <EditableFormCard
-      title="Business Profile"
-      variant="subtle"
-      className={className}
-      isEditing={form.isEditing}
-      onToggleEdit={form.handleToggleEdit}
-      onSave={form.handleSave}
-      onCancel={form.handleCancel}
-      hideActions={hideActions}
-      editContent={editContent}
-      viewContent={viewContent}
-    />
-  )
-}