buildgrid-ui 1.1.0-dev.7 → 1.1.0-dev.9

package/dist/components/adaptive-input/index.d.ts

@@ -0,0 +1 @@
+export * from './adaptive-input';

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-dialog';

package/dist/components/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/button/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "xl" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/currency-input/currency-input.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AdaptiveInputProps } from '../adaptive-input';
+export interface CurrencyInputProps extends AdaptiveInputProps {
+    currencySymbol?: string;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    onValueChange: (value: number) => void;
+}
+declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
+export { CurrencyInput };

package/dist/components/currency-input/index.d.ts

@@ -0,0 +1 @@
+export * from './currency-input';

package/dist/components/index.d.ts

@@ -1,10 +1,12 @@
-export * from './adaptative-input';
+export * from './adaptive-input';
+export * from './alert-dialog';
 export * from './autocomplete';
 export * from './avatar';
 export * from './badge';
 export * from './button';
 export * from './card';
 export * from './checkbox';
+export * from './currency-input';
 export * from './dropdown-menu';
 export * from './input';
 export * from './password-input';

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
 export * from './utils/cn';
+export * from './utils/formatters';

package/dist/lib/utils/formatters.d.ts

@@ -0,0 +1,8 @@
+export declare const formatCurrency: (number: number, language?: string, currency?: string) => string;
+export declare const formatDateAndWeekday: (date: Date | string, language?: string) => string;
+export declare const formatDateAndWeekdayAndYear: (date: Date | string, language?: string) => string;
+export declare const formatDateAndMonth: (date: Date | string, language?: string) => string;
+export declare const formatLongDate: (date: Date | string, language?: string) => string;
+export declare const formatShortDate: (date: Date, language?: string) => string;
+export declare const getMonthYearFromISODate: (date: string) => string;
+export declare const formatWeekDayAndShortDate: (date: Date, language?: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "buildgrid-ui",
-	"version": "1.1.0-dev.7",
+	"version": "1.1.0-dev.9",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -23,6 +23,7 @@
 	"license": "ISC",
 	"description": "",
 	"dependencies": {
+		"@radix-ui/react-alert-dialog": "^1.1.4",
 		"@radix-ui/react-avatar": "^1.1.2",
 		"@radix-ui/react-checkbox": "^1.1.3",
 		"@radix-ui/react-dropdown-menu": "^2.1.4",

package/src/components/{adaptative-input/adaptative-input.stories.tsx → adaptive-input/adaptive-input.stories.tsx}

@@ -2,7 +2,7 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { AdaptiveInput } from './adaptative-input'
+import { AdaptiveInput } from './adaptive-input'
 import { HelpCircle, Phone, User } from 'lucide-react'
 
 const meta: Meta<typeof AdaptiveInput> = {

package/src/components/{adaptative-input/adaptative-input.tsx → adaptive-input/adaptive-input.tsx}

@@ -39,7 +39,7 @@ const AdaptiveInput = React.forwardRef<HTMLInputElement, AdaptiveInputProps>(
 		}
 
 		return (
-			<div className="relative w-fit">
+			<div className="relative w-full">
 				{leftIcon && (
 					<div className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground">
 						{leftIcon}

package/src/components/adaptive-input/index.ts

@@ -0,0 +1 @@
+export * from './adaptive-input'

package/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -0,0 +1,49 @@
+// organize-imports-ignore
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from './alert-dialog'
+import { Button } from '../button'
+
+const meta: Meta<typeof AlertDialog> = {
+	component: AlertDialog,
+}
+
+export default meta
+type Story = StoryObj<typeof AlertDialog>
+
+const Template = () => {
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button>Open dialog</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Alert title</AlertDialogTitle>
+					<AlertDialogDescription>This is the alert description</AlertDialogDescription>
+				</AlertDialogHeader>
+				<div className="bg-gray-200 p-4 h-20 text-sm">Content goes here</div>
+
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction>Submit</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	)
+}
+
+export const Default: Story = {
+	render: Template.bind({}),
+	args: {},
+}

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,130 @@
+import { cn } from '@/lib'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
+import { buttonVariants } from '../button'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
+		{...props}
+	/>
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+			className,
+		)}
+		{...props}
+	/>
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn('text-lg font-semibold', className)}
+		{...props}
+	/>
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Action
+		ref={ref}
+		className={cn(buttonVariants(), className)}
+		{...props}
+	/>
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+		{...props}
+	/>
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+}

package/src/components/alert-dialog/index.ts

@@ -0,0 +1 @@
+export * from './alert-dialog'

package/src/components/autocomplete/autocomplete.tsx

@@ -2,7 +2,7 @@ import { Search } from 'lucide-react'
 import { useState } from 'react'
 
 import { cn } from '@/lib'
-import { AdaptiveInput } from '../adaptative-input'
+import { AdaptiveInput } from '../adaptive-input'
 import { Popover, PopoverContent, PopoverTrigger } from '../popover'
 
 interface Option {

package/src/components/currency-input/currency-input.stories.tsx

@@ -0,0 +1,28 @@
+// organize-imports-ignore
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { CurrencyInput } from './currency-input'
+import { DollarSign } from 'lucide-react'
+
+const meta: Meta<typeof CurrencyInput> = {
+	title: 'Components/input/currency',
+	component: CurrencyInput,
+}
+
+export default meta
+type Story = StoryObj<typeof CurrencyInput>
+
+const Template = () => {
+	const [value, setValue] = React.useState(0)
+	return (
+		<div className="w-96">
+			<CurrencyInput value={value} onValueChange={(number) => setValue(number)} />
+		</div>
+	)
+}
+
+export const Default: Story = {
+	render: Template.bind({}),
+	args: {},
+}

package/src/components/currency-input/currency-input.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { AdaptiveInput, AdaptiveInputProps } from '../adaptive-input'
+
+export interface CurrencyInputProps extends AdaptiveInputProps {
+	currencySymbol?: string
+	decimalSeparator?: string
+	thousandSeparator?: string
+	onValueChange: (value: number) => void
+}
+
+const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
+	(props, ref) => {
+		const {
+			currencySymbol = '$',
+			decimalSeparator = '.',
+			thousandSeparator = ',',
+			onValueChange,
+			className,
+			value = 0,
+			...rest
+		} = props
+
+		const inputRef = useRef<HTMLInputElement>(null)
+
+		useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
+
+		const [inputValue, setInputValue] = useState<string>('') // String to show in input
+
+		// Function to format the numeric value into a currency format
+		const formatNumber = (numericValue: number): string => {
+			const parts = numericValue.toFixed(2).split('.') // Ensure two decimal places
+			const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator) // Add thousand separators
+			return `${currencySymbol} ${integerPart}${decimalSeparator}${parts[1]}`
+		}
+
+		// Handle input change
+		const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+			const rawValue = e.target.value
+			const numericValue = parseFloat(rawValue.replace(/\D/g, '')) / 100
+
+			// Update the input with formatted value
+			setInputValue(formatNumber(numericValue))
+
+			// Send the numeric value (without formatting) to the parent component
+			onValueChange(numericValue)
+
+			// Move the cursor to the end of the input value
+			if (inputRef.current) {
+				window.requestAnimationFrame(() => {
+					inputRef.current?.setSelectionRange(
+						inputRef.current.value.length,
+						inputRef.current.value.length,
+					)
+				})
+			}
+		}
+
+		// Prevent cursor from being set elsewhere except at the end
+		const handleFocus = () => {
+			if (inputRef.current) {
+				inputRef.current.setSelectionRange(
+					inputRef.current.value.length,
+					inputRef.current.value.length,
+				)
+			}
+		}
+
+		// Set the initial formatted value when the component mounts or the value prop changes
+		useEffect(() => {
+			setInputValue(formatNumber(+value))
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [value])
+
+		return (
+			<AdaptiveInput
+				type="text"
+				inputMode="numeric"
+				value={inputValue}
+				ref={inputRef}
+				onChange={handleInputChange}
+				onFocus={handleFocus}
+				onClick={handleFocus} // Ensures that even if the user clicks, the cursor is forced to the end
+				placeholder={`${currencySymbol} 0${decimalSeparator}00`}
+				className={className}
+				{...rest}
+			/>
+		)
+	},
+)
+
+CurrencyInput.displayName = 'CurrencyInput'
+
+export { CurrencyInput }

package/src/components/currency-input/index.ts

@@ -0,0 +1 @@
+export * from './currency-input'

package/src/components/index.ts

@@ -1,10 +1,12 @@
-export * from './adaptative-input'
+export * from './adaptive-input'
+export * from './alert-dialog'
 export * from './autocomplete'
 export * from './avatar'
 export * from './badge'
 export * from './button'
 export * from './card'
 export * from './checkbox'
+export * from './currency-input'
 export * from './dropdown-menu'
 export * from './input'
 export * from './password-input'

package/src/lib/index.ts

@@ -1 +1,2 @@
 export * from './utils/cn'
+export * from './utils/formatters'

package/src/lib/utils/formatters.ts

@@ -0,0 +1,55 @@
+export const formatCurrency = (
+	number: number,
+	language = 'pt-BR',
+	currency = 'BRL',
+): string => {
+	return new Intl.NumberFormat(language, {
+		style: 'currency',
+		currency,
+		minimumFractionDigits: 2,
+	}).format(number)
+}
+
+export const formatDateAndWeekday = (date: Date | string, language = 'pt-BR'): string =>
+	new Intl.DateTimeFormat(language, {
+		day: '2-digit',
+		month: 'long',
+		weekday: 'long',
+	}).format(new Date(date))
+
+export const formatDateAndWeekdayAndYear = (
+	date: Date | string,
+	language = 'pt-BR',
+): string =>
+	new Intl.DateTimeFormat(language, {
+		day: '2-digit',
+		month: 'long',
+		weekday: 'long',
+		year: 'numeric',
+	}).format(new Date(date))
+
+export const formatDateAndMonth = (date: Date | string, language = 'pt-BR'): string =>
+	new Intl.DateTimeFormat(language, {
+		day: '2-digit',
+		month: 'long',
+	}).format(new Date(date))
+
+export const formatLongDate = (date: Date | string, language = 'pt-BR'): string =>
+	new Intl.DateTimeFormat(language, { dateStyle: 'long' }).format(
+		typeof date === 'string' ? new Date(date) : date,
+	)
+
+export const formatShortDate = (date: Date, language = 'pt-BR'): string =>
+	new Intl.DateTimeFormat(language, { dateStyle: 'short' }).format(date)
+
+export const getMonthYearFromISODate = (date: string): string => {
+	return date.slice(0, 7)
+}
+
+export const formatWeekDayAndShortDate = (date: Date, language = 'pt-BR') => {
+	return date.toLocaleDateString(language, {
+		weekday: 'short',
+		day: '2-digit',
+		month: '2-digit',
+	})
+}

package/dist/components/adaptative-input/index.d.ts

@@ -1 +0,0 @@
-export * from './adaptative-input';

package/src/components/adaptative-input/index.ts

@@ -1 +0,0 @@
-export * from './adaptative-input'