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

form-next-demo.tsx — ui Source File

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

File tsx ComponentRegistry ChartRegistry 12 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  5a2a9796_4841_6983_1ce8_67073c663d48["form-next-demo.tsx"]
  ef956916_247d_d591_7cc9_ba24c57b1db9["form-next-demo-action.ts"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> ef956916_247d_d591_7cc9_ba24c57b1db9
  b1636fbc_5c48_8cd2_fcc1_53a19f19af40["demoFormAction"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> b1636fbc_5c48_8cd2_fcc1_53a19f19af40
  40d9dad0_1a0e_66b8_2f97_7511168d16e4["form-next-demo-schema.ts"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> 40d9dad0_1a0e_66b8_2f97_7511168d16e4
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  6a1c353b_fabd_c799_feac_192bf27b8541["form"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> 6a1c353b_fabd_c799_feac_192bf27b8541
  e750d152_1191_1793_7244_99c7f9c595f4["sonner"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> e750d152_1191_1793_7244_99c7f9c595f4
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> 57e86e45_ac6e_7278_be08_9092724e8401
  c6d6139d_ea69_3d79_5004_68419bae2ac0["card"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> c6d6139d_ea69_3d79_5004_68419bae2ac0
  169af77a_46c3_8fec_4801_f34a0f1a3471["field"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> 169af77a_46c3_8fec_4801_f34a0f1a3471
  80cf663d_a411_487c_d69e_ac9d405cd2ec["input"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> 80cf663d_a411_487c_d69e_ac9d405cd2ec
  41df1c2c_a3b4_dc22_8bc9_310fe8b6ba9b["input-group"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> 41df1c2c_a3b4_dc22_8bc9_310fe8b6ba9b
  fbc10cc4_98a7_35a6_e46c_d9966aba9ad2["spinner"]
  5a2a9796_4841_6983_1ce8_67073c663d48 --> fbc10cc4_98a7_35a6_e46c_d9966aba9ad2
  style 5a2a9796_4841_6983_1ce8_67073c663d48 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,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/new-york-v4/ui/card"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/registry/new-york-v4/ui/field"
import { Input } from "@/registry/new-york-v4/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroupTextarea,
} from "@/registry/new-york-v4/ui/input-group"
import { Spinner } from "@/registry/new-york-v4/ui/spinner"

import { demoFormAction } from "./form-next-demo-action"
import { type FormState } from "./form-next-demo-schema"

export default function FormNextDemo() {
  const [formState, formAction, pending] = React.useActionState<
    FormState,
    FormData
  >(demoFormAction, {
    values: {
      title: "",
      description: "",
    },
    errors: null,
    success: false,
  })
  const [descriptionLength, setDescriptionLength] = React.useState(0)

  React.useEffect(() => {
    if (formState.success) {
      toast("Thank you for your feedback", {
        description: "We'll review your report and get back to you soon.",
      })
    }
  }, [formState.success])

  React.useEffect(() => {
    setDescriptionLength(formState.values.description.length)
  }, [formState.values.description])

// ... (69 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does form-next-demo.tsx do?
form-next-demo.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-demo.tsx?
form-next-demo.tsx defines 1 function(s): FormNextDemo.
What does form-next-demo.tsx depend on?
form-next-demo.tsx imports 12 module(s): button, card, demoFormAction, field, form, form-next-demo-action.ts, form-next-demo-schema.ts, input, and 4 more.
Where is form-next-demo.tsx in the architecture?
form-next-demo.tsx is located at apps/v4/registry/new-york-v4/examples/form-next-demo.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