✨ Create Transactions: First batch of functionality

src/app/(routes)/layout.tsx

@@ -24,12 +24,14 @@ export default async function RootLayout({
     <OrganizationProvider>
       <PermissionProvider>
         <SidebarProvider>
-          <div className="flex min-h-screen w-full bg-background text-foreground">
+          <div className="flex h-full min-h-screen w-full overflow-y-auto bg-background text-foreground">
             <Sidebar />
-            <div className="flex min-h-full w-full flex-col bg-shadcn-100">
+            <div className="flex min-h-full w-full flex-col overflow-y-auto bg-shadcn-100">
               <Header />
 
-              <div className="h-full w-full px-16 pb-16 pt-6">{children}</div>
+              <div className="h-full w-full overflow-y-auto px-16 pb-16 pt-6">
+                {children}
+              </div>
             </div>
           </div>
         </SidebarProvider>

src/app/(routes)/transactions/create/operation-empty-accordion.tsx

@@ -0,0 +1,18 @@
+export type OperationEmptyAccordionProps = {
+  title: string
+  description?: string
+}
+
+export const OperationEmptyAccordion = ({
+  title,
+  description
+}: OperationEmptyAccordionProps) => {
+  return (
+    <div className="mb-6 flex flex-row rounded-xl border border-dashed border-zinc-300 p-6">
+      <div className="flex flex-col gap-2">
+        <p className="text-sm font-medium">{title}</p>
+        <p className="text-sm font-medium text-shadcn-400">{description}</p>
+      </div>
+    </div>
+  )
+}

src/app/(routes)/transactions/create/stepper.tsx

@@ -0,0 +1,52 @@
+import { useIntl } from 'react-intl'
+import {
+  Stepper as PrimitiveStepper,
+  StepperItem,
+  StepperItemNumber,
+  StepperItemText
+} from '../primitives/stepper'
+
+export type StepperProps = {
+  step?: number
+}
+
+export const Stepper = ({ step = 0 }: StepperProps) => {
+  const intl = useIntl()
+
+  return (
+    <PrimitiveStepper>
+      <StepperItem active={step === 0}>
+        <StepperItemNumber>1</StepperItemNumber>
+        <StepperItemText
+          title={intl.formatMessage({
+            id: 'transactions.create.stepper.first',
+            defaultMessage: 'Transaction Data'
+          })}
+        />
+      </StepperItem>
+      <StepperItem active={step === 1}>
+        <StepperItemNumber>2</StepperItemNumber>
+        <StepperItemText
+          title={intl.formatMessage({
+            id: 'transactions.create.stepper.second',
+            defaultMessage: 'Operations and Metadata'
+          })}
+        />
+      </StepperItem>
+      <StepperItem active={step === 2}>
+        <StepperItemNumber>3</StepperItemNumber>
+        <StepperItemText
+          title={intl.formatMessage({
+            id: 'transactions.create.stepper.third',
+            defaultMessage: 'Review'
+          })}
+          description={intl.formatMessage({
+            id: 'transactions.create.stepper.third.description',
+            defaultMessage:
+              'Check the values ​​and parameters entered and confirm to create the transaction.'
+          })}
+        />
+      </StepperItem>
+    </PrimitiveStepper>
+  )
+}

src/app/(routes)/transactions/primitives/paper-collapsible.tsx

@@ -0,0 +1,55 @@
+import { ElementRef, forwardRef, HTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+import {
+  CollapsibleProps,
+  CollapsibleTriggerProps
+} from '@radix-ui/react-collapsible'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible'
+import { Paper } from '@/components/ui/paper'
+import { ChevronDown } from 'lucide-react'
+
+export type PaperCollapsibleProps = CollapsibleProps
+
+export const PaperCollapsible = forwardRef<
+  ElementRef<typeof Collapsible>,
+  PaperCollapsibleProps
+>(({ className, children, ...props }, ref) => (
+  <Collapsible ref={ref} className="group/paper-collapsible" {...props}>
+    <Paper className={cn('flex flex-col', className)}>{children}</Paper>
+  </Collapsible>
+))
+PaperCollapsible.displayName = 'PaperCollapsible'
+
+export const PaperCollapsibleBanner = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-row p-6', className)} {...props}>
+    <div className="flex flex-grow flex-col">{children}</div>
+    <PaperCollapsibleTrigger />
+  </div>
+))
+PaperCollapsibleBanner.displayName = 'PaperCollapsibleBanner'
+
+export const PaperCollapsibleTrigger = forwardRef<
+  ElementRef<typeof CollapsibleTrigger>,
+  CollapsibleTriggerProps
+>(({ className, children, ...props }, ref) => (
+  <CollapsibleTrigger
+    ref={ref}
+    className={cn(
+      'transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="shrink-0 transition-transform duration-200" />
+  </CollapsibleTrigger>
+))
+PaperCollapsibleTrigger.displayName = 'PaperCollapsibleTrigger'
+
+export const PaperCollapsibleContent = CollapsibleContent

src/app/(routes)/transactions/primitives/stepper.tsx

@@ -0,0 +1,76 @@
+import { cn } from '@/lib/utils'
+import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export const Stepper = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col gap-4', className)} {...props} />
+))
+Stepper.displayName = 'Stepper'
+
+export type StepperItemProps = HTMLAttributes<HTMLDivElement> & {
+  active?: boolean
+}
+
+export const StepperItem = forwardRef<HTMLDivElement, StepperItemProps>(
+  ({ className, active, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-active={active}
+      className={cn('group flex flex-row gap-3', className)}
+      {...props}
+    />
+  )
+)
+StepperItem.displayName = 'StepperItem'
+
+export const StepperItemNumber = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border border-shadcn-400 text-sm font-medium text-shadcn-400 group-data-[active=true]:border-none group-data-[active=true]:bg-white group-data-[active=true]:text-neutral-600 group-data-[active=true]:shadow-md',
+      className
+    )}
+    {...props}
+  />
+))
+StepperItemNumber.displayName = 'StepperItemNumber'
+
+export type StepperItemTextProps = HTMLAttributes<HTMLDivElement> & {
+  title: string
+  description?: string
+}
+
+export const StepperItemText = forwardRef<
+  HTMLParagraphElement,
+  StepperItemTextProps
+>(({ className, title, description, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex flex-col text-sm font-medium text-shadcn-400 group-data-[active=true]:text-neutral-600',
+      className
+    )}
+    {...props}
+  >
+    <div className="flex h-8 items-center">
+      <p>{title}</p>
+    </div>
+    {description && (
+      <p className="text-xs group-data-[active=false]:hidden">{description}</p>
+    )}
+  </div>
+))
+StepperItemText.displayName = 'StepperItemText'
+
+export type StepperControlProps = PropsWithChildren & {
+  active?: boolean
+}
+
+export const StepperContent = ({ active, children }: StepperControlProps) => {
+  return active ? <>{children}</> : null
+}

src/app/app.tsx

@@ -9,21 +9,19 @@ import ZodSchemaProvider from '@/lib/zod/zod-schema-provider'
 
 export default async function App({ children }: { children: React.ReactNode }) {
   return (
-    <div>
-      <QueryProvider>
-        <LocalizationProvider>
-          <ThemeProvider>
-            <ZodSchemaProvider>
-              <div>{children}</div>
-              <Toaster
-                position="top-right"
-                containerStyle={{ top: 60, right: 60 }}
-              />
-            </ZodSchemaProvider>
-          </ThemeProvider>
-        </LocalizationProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryProvider>
-    </div>
+    <QueryProvider>
+      <LocalizationProvider>
+        <ThemeProvider>
+          <ZodSchemaProvider>
+            {children}
+            <Toaster
+              position="top-right"
+              containerStyle={{ top: 60, right: 60 }}
+            />
+          </ZodSchemaProvider>
+        </ThemeProvider>
+      </LocalizationProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryProvider>
   )
 }

src/app/globals.css

@@ -74,7 +74,11 @@
     @apply border-border;
   }
 
+  html {
+    @apply h-full overflow-y-auto;
+  }
+
   body {
-    @apply bg-background text-foreground;
+    @apply h-full overflow-y-auto bg-background text-foreground;
   }
 }

src/components/form/input-field/index.tsx

@@ -1,12 +1,14 @@
 import {
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   FormTooltip
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { HTMLInputTypeAttribute, ReactNode } from 'react'
 import { Control } from 'react-hook-form'
 
@@ -17,9 +19,12 @@ export type InputFieldProps = {
   tooltip?: string
   labelExtra?: ReactNode
   placeholder?: string
+  description?: ReactNode
   control: Control<any>
   disabled?: boolean
   readOnly?: boolean
+  rows?: number
+  textArea?: boolean
   required?: boolean
 }
 
@@ -29,8 +34,11 @@ export const InputField = ({
   tooltip,
   labelExtra,
   placeholder,
+  description,
   required,
   readOnly,
+  rows,
+  textArea,
   ...others
 }: InputFieldProps) => {
   return (
@@ -48,14 +56,24 @@ export const InputField = ({
             </FormLabel>
           )}
           <FormControl>
-            <Input
-              type={type}
-              placeholder={placeholder}
-              readOnly={readOnly}
-              {...field}
-            />
+            {textArea ? (
+              <Textarea
+                placeholder={placeholder}
+                readOnly={readOnly}
+                rows={rows}
+                {...field}
+              />
+            ) : (
+              <Input
+                type={type}
+                placeholder={placeholder}
+                readOnly={readOnly}
+                {...field}
+              />
+            )}
           </FormControl>
           <FormMessage />
+          {description && <FormDescription>{description}</FormDescription>}
         </FormItem>
       )}
     />