ui Architecture Docs
Home / File/ form-next-complex.tsx — ui Source File

form-next-complex.tsx — ui Source File

Architecture documentation for form-next-complex.tsx, a tsx file in the ui codebase. 14 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 14 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  2e87948d_2c15_1526_651d_5e33c02cce6e["form-next-complex.tsx"]
  a48cc779_ad07_39b5_2ccd_6c96646a048d["form-next-complex-action.ts"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> a48cc779_ad07_39b5_2ccd_6c96646a048d
  77b2e313_f884_3f93_b3dc_a0fadc6cd68f["complexFormAction"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> 77b2e313_f884_3f93_b3dc_a0fadc6cd68f
  ae4ed9c2_4beb_f5aa_bc82_ed3428a78bb6["form-next-complex-schema.ts"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> ae4ed9c2_4beb_f5aa_bc82_ed3428a78bb6
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  6a1c353b_fabd_c799_feac_192bf27b8541["form"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> 6a1c353b_fabd_c799_feac_192bf27b8541
  e750d152_1191_1793_7244_99c7f9c595f4["sonner"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> e750d152_1191_1793_7244_99c7f9c595f4
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> 57e86e45_ac6e_7278_be08_9092724e8401
  c6d6139d_ea69_3d79_5004_68419bae2ac0["card"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> c6d6139d_ea69_3d79_5004_68419bae2ac0
  4f6bcac7_12b3_b724_9762_64ace071aa20["checkbox"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> 4f6bcac7_12b3_b724_9762_64ace071aa20
  169af77a_46c3_8fec_4801_f34a0f1a3471["field"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> 169af77a_46c3_8fec_4801_f34a0f1a3471
  a3246e53_c55c_1cf0_424d_b2142e1739ab["radio-group"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> a3246e53_c55c_1cf0_424d_b2142e1739ab
  c2fa7225_1ddd_1cbc_8810_ee5e42af14d6["select"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> c2fa7225_1ddd_1cbc_8810_ee5e42af14d6
  fbc10cc4_98a7_35a6_e46c_d9966aba9ad2["spinner"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> fbc10cc4_98a7_35a6_e46c_d9966aba9ad2
  38ebb3c2_9638_6c9d_8ced_a16ec1ff06c9["switch"]
  2e87948d_2c15_1526_651d_5e33c02cce6e --> 38ebb3c2_9638_6c9d_8ced_a16ec1ff06c9
  style 2e87948d_2c15_1526_651d_5e33c02cce6e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import Form from "next/form"
import { toast } from "sonner"

import { Button } from "@/registry/new-york-v4/ui/button"
import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@/registry/new-york-v4/ui/field"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/registry/new-york-v4/ui/radio-group"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/new-york-v4/ui/select"
import { Spinner } from "@/registry/new-york-v4/ui/spinner"
import { Switch } from "@/registry/new-york-v4/ui/switch"

import { complexFormAction } from "./form-next-complex-action"
import { addons, type FormState } from "./form-next-complex-schema"

export default function FormNextComplex() {
  const [formState, formAction, pending] = React.useActionState<
    FormState,
    FormData
  >(complexFormAction, {
    values: {
      plan: "basic",
      billingPeriod: "monthly",
      addons: [],
      emailNotifications: false,
    },
    errors: null,
    success: false,
  })

  React.useEffect(() => {
    if (formState.success) {
      toast.success("Preferences saved", {
        description: "Your subscription plan has been updated.",
      })
    }
  }, [formState.success])
// ... (135 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does form-next-complex.tsx do?
form-next-complex.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in form-next-complex.tsx?
form-next-complex.tsx defines 1 function(s): FormNextComplex.
What does form-next-complex.tsx depend on?
form-next-complex.tsx imports 14 module(s): button, card, checkbox, complexFormAction, field, form, form-next-complex-action.ts, form-next-complex-schema.ts, and 6 more.
Where is form-next-complex.tsx in the architecture?
form-next-complex.tsx is located at apps/v4/registry/new-york-v4/examples/form-next-complex.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/new-york-v4/examples).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free