TANCN Documentation

TANCN is a form and table builder designed for TanStack users. Key capabilities include:

• Drag & Drop Builder: Visual interface for rapid form and table construction.
• Type-Safe Code Generation: Produces fully typed React components and automatic validation schemas.
• ShadCN UI Integration: Generates accessible components using ShadCN UI, Radix UI, and Tailwind CSS.
• Advanced Form Structures: Supports multi-step forms and dynamic field arrays.
• Data-Grid & Filtering: Capability to build complex tables with advanced filtering for large datasets.
• Configuration Management: Save, share, and export configurations and generated code.

TANCN provides a visual interface to build complex, type-safe forms and tables. Follow these steps to generate code for your project:

1. Navigate to the Form Builder: Access the builder section within the application.
2. Build UI: Use the drag-and-drop interface to add and arrange form fields.
3. Configure Logic: Set up validation rules and specific field properties.
4. Live Preview: Use the real-time preview feature to test form behavior and styling as you build.
5. Export: Once satisfied, export the generated code to integrate it into your React/TypeScript project.

To set up the TANCN development environment, clone the repository, install dependencies using bun, and start the web development server.

Prerequisites

• Bun installed on your system.

Setup Steps

1. Clone the repository:

   git clone <repository-url>
   cd tancn

2. Install dependencies:

   bun install

3. Start the development server:

   bun run dev:web

Once started, the application is accessible at http://localhost:3001.

You can add visual fade masks to the edges of a ScrollArea to indicate more content is available. This is controlled via the maskHeight prop. When the content is scrolled to an edge, the mask for that edge will fade out.

• Set maskHeight={0} to disable masks entirely.
• The mask uses the background color of your theme to create the fade effect.

// Adds a 50px fade mask to the top and bottom edges
<ScrollArea maskHeight={50}>
  {/* content */}
</ScrollArea>

If your theme names do not match the exact values you want to appear in your HTML attributes (e.g., you want a theme named ocean to apply the class theme-ocean), use the value prop in ThemeProvider.

The value prop is an object where the key is the theme name and the value is the attribute value.

<ThemeProvider
  themes={['light', 'dark', 'ocean']}
  attribute="class"
  value={{
    light: 'theme-light',
    dark: 'theme-dark',
    ocean: 'theme-ocean'
  }}
>
  <App />
</ThemeProvider>

The type prop on ScrollArea determines when the scrollbar is visible on pointer-based devices:

• "hover": The scrollbar is hidden by default and becomes visible when hovering over the area.
• "scroll": The scrollbar is hidden by default and becomes visible while the user is actively scrolling.
• "always": The scrollbar is always visible.
• "auto": (Implicitly handled by the underlying primitive) standard behavior.

// Scrollbar only shows when hovering
<ScrollArea type="hover">
  {/* content */}
</ScrollArea>

// Scrollbar only shows during active scrolling
<ScrollArea type="scroll">
  {/* content */}
</ScrollArea>

The ScrollBar component can be used to manually place or customize the scrollbar. It is designed to work within a ScrollArea context. Note that on touch devices, ScrollBar will return null and render nothing.

Props

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

function Example() {
  return (
    <ScrollArea className="h-[200px]">
      <div className="p-4">Content</div>
      <ScrollBar orientation="vertical" />
    </ScrollArea>
  );
}

The FormElementsDropdown component is used to append new form elements to a specific field index or step within a multi-step form. It provides a dropdown menu containing a list of available form elements (excluding static ones by default).

Props

• fieldIndex (optional): The index of the field where the nested element should be appended.
• stepIndex (optional): The index of the form step.
• type (optional): Determines the insertion logic. Use 'MS' for multi-step or 'FA' for form arrays.
• arrayId (optional): Required if type is 'FA' to specify which form array is being updated.
• j (optional): Used when isFormArrayField is true to specify a sub-index.
• isFormArrayField (optional): Boolean flag to indicate if the element is being added to a form array field.

<FormElementsDropdown 
  fieldIndex={0} 
  stepIndex={1} 
  type="MS" 
/>