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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AdaptiveInputProps } from '../adaptative-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

@@ -5,6 +5,7 @@ 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.8",
 	"publishConfig": {
 		"access": "public"
 	},

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 '../adaptative-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

@@ -5,6 +5,7 @@ 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',
+	})
+}