diff --git a/public/svg/arrow-right-circle.svg b/public/svg/arrow-right-circle.svg new file mode 100644 index 00000000..d7733fe0 --- /dev/null +++ b/public/svg/arrow-right-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/svg/arrow-right-left-circle.svg b/public/svg/arrow-right-left-circle.svg new file mode 100644 index 00000000..298a46e3 --- /dev/null +++ b/public/svg/arrow-right-left-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/svg/check-check-circle-green.svg b/public/svg/check-check-circle-green.svg new file mode 100644 index 00000000..c6f036ca --- /dev/null +++ b/public/svg/check-check-circle-green.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/svg/clock-circle.svg b/public/svg/clock-circle.svg new file mode 100644 index 00000000..2901f1cc --- /dev/null +++ b/public/svg/clock-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/svg/dolar-sign.svg b/public/svg/dolar-sign.svg new file mode 100644 index 00000000..88edf53a --- /dev/null +++ b/public/svg/dolar-sign.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svg/x-circle.svg b/public/svg/x-circle.svg new file mode 100644 index 00000000..84466912 --- /dev/null +++ b/public/svg/x-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx index 7964dd8d..08cd5770 100644 --- a/src/app/(routes)/layout.tsx +++ b/src/app/(routes)/layout.tsx @@ -24,12 +24,14 @@ export default async function RootLayout({ -
+
-
+
-
{children}
+
+ {children} +
diff --git a/src/app/(routes)/transactions/create/operation-empty-accordion.tsx b/src/app/(routes)/transactions/create/operation-empty-accordion.tsx new file mode 100644 index 00000000..0d66dd1a --- /dev/null +++ b/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 ( +
+
+

{title}

+

{description}

+
+
+ ) +} diff --git a/src/app/(routes)/transactions/create/stepper.tsx b/src/app/(routes)/transactions/create/stepper.tsx new file mode 100644 index 00000000..f0708cba --- /dev/null +++ b/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 ( + + + 1 + + + + 2 + + + + 3 + + + + ) +} diff --git a/src/app/(routes)/transactions/primitives/paper-collapsible.tsx b/src/app/(routes)/transactions/primitives/paper-collapsible.tsx new file mode 100644 index 00000000..2267c74a --- /dev/null +++ b/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, + PaperCollapsibleProps +>(({ className, children, ...props }, ref) => ( + + {children} + +)) +PaperCollapsible.displayName = 'PaperCollapsible' + +export const PaperCollapsibleBanner = forwardRef< + HTMLDivElement, + HTMLAttributes +>(({ className, children, ...props }, ref) => ( +
+
{children}
+ +
+)) +PaperCollapsibleBanner.displayName = 'PaperCollapsibleBanner' + +export const PaperCollapsibleTrigger = forwardRef< + ElementRef, + CollapsibleTriggerProps +>(({ className, children, ...props }, ref) => ( + svg]:rotate-180', + className + )} + {...props} + > + + +)) +PaperCollapsibleTrigger.displayName = 'PaperCollapsibleTrigger' + +export const PaperCollapsibleContent = CollapsibleContent diff --git a/src/app/(routes)/transactions/primitives/stepper.tsx b/src/app/(routes)/transactions/primitives/stepper.tsx new file mode 100644 index 00000000..e8c60f38 --- /dev/null +++ b/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 +>(({ className, ...props }, ref) => ( +
+)) +Stepper.displayName = 'Stepper' + +export type StepperItemProps = HTMLAttributes & { + active?: boolean +} + +export const StepperItem = forwardRef( + ({ className, active, ...props }, ref) => ( +
+ ) +) +StepperItem.displayName = 'StepperItem' + +export const StepperItemNumber = forwardRef< + HTMLDivElement, + HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +StepperItemNumber.displayName = 'StepperItemNumber' + +export type StepperItemTextProps = HTMLAttributes & { + title: string + description?: string +} + +export const StepperItemText = forwardRef< + HTMLParagraphElement, + StepperItemTextProps +>(({ className, title, description, ...props }, ref) => ( +
+
+

{title}

+
+ {description && ( +

{description}

+ )} +
+)) +StepperItemText.displayName = 'StepperItemText' + +export type StepperControlProps = PropsWithChildren & { + active?: boolean +} + +export const StepperContent = ({ active, children }: StepperControlProps) => { + return active ? <>{children} : null +} diff --git a/src/app/app.tsx b/src/app/app.tsx index 8a70c6c1..0beee3ba 100644 --- a/src/app/app.tsx +++ b/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 ( -
- - - - -
{children}
- - - - - - -
+ + + + + {children} + + + + + + ) } diff --git a/src/app/globals.css b/src/app/globals.css index 7113fe48..765ba9a8 100644 --- a/src/app/globals.css +++ b/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; } } diff --git a/src/components/form/input-field/index.tsx b/src/components/form/input-field/index.tsx index 6d810e9c..9e5d021f 100644 --- a/src/components/form/input-field/index.tsx +++ b/src/components/form/input-field/index.tsx @@ -1,5 +1,6 @@ import { FormControl, + FormDescription, FormField, FormItem, FormLabel, @@ -7,6 +8,7 @@ import { 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 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 = ({ )} - + {textArea ? ( +