buildgrid-ui 1.1.0-dev.8 → 1.1.0

package/CHANGELOG.md

@@ -1,53 +0,0 @@
-# [1.1.0-alpha.6](https://github.com/adrianomaringolo/buildgrid-ui/compare/v1.1.0-alpha.5...v1.1.0-alpha.6) (2025-01-03)
-
-
-### Features
-
-* **avatar:** add Avatar component with fallback and image support ([893a16e](https://github.com/adrianomaringolo/buildgrid-ui/commit/893a16e8c45a35f56f91d1a11e1615cb4fa35347))
-* **dropdown-menu:** add DropdownMenu component with stories and functionality ([5006e9d](https://github.com/adrianomaringolo/buildgrid-ui/commit/5006e9dd4c41354cda4f664f2169b6fd77a75e87))
-
-# [1.1.0-alpha.5](https://github.com/adrianomaringolo/buildgrid-ui/compare/v1.1.0-alpha.4...v1.1.0-alpha.5) (2025-01-03)
-
-
-### Features
-
-* **adaptive-input:** add AdaptiveInput component with masking functionality and stories ([d2d9794](https://github.com/adrianomaringolo/buildgrid-ui/commit/d2d97944b150163d69342ddb68e6e188283f0348))
-* **autocomplete:** add Autocomplete component with stories and functionality ([c35b4ae](https://github.com/adrianomaringolo/buildgrid-ui/commit/c35b4ae634654b1451ab0f3936f1d757ff70e122))
-* **input:** add Input component with stories ([8078ee7](https://github.com/adrianomaringolo/buildgrid-ui/commit/8078ee7c0e9b986007d89096d08065300c36b7c9))
-* **popover:** add Popover component with stories ([32373a1](https://github.com/adrianomaringolo/buildgrid-ui/commit/32373a13c235e0899b9c332f42b48f13c704f82c))
-
-# [1.1.0-alpha.4](https://github.com/adrianomaringolo/buildgrid-ui/compare/v1.1.0-alpha.3...v1.1.0-alpha.4) (2025-01-02)
-
-
-### Features
-
-* add Checkbox component and related stories ([7e2d66b](https://github.com/adrianomaringolo/buildgrid-ui/commit/7e2d66b7a19f8ddb5a6a5e5f827f1df552977113))
-
-# [1.1.0-alpha.3](https://github.com/adrianomaringolo/buildgrid-ui/compare/v1.1.0-alpha.2...v1.1.0-alpha.3) (2025-01-02)
-
-
-### Features
-
-* add new components ([acc2538](https://github.com/adrianomaringolo/buildgrid-ui/commit/acc253867cbadec11b61c3d9dcf1b5151ac3096b))
-
-# [1.1.0-alpha.2](https://github.com/adrianomaringolo/buildgrid-ui/compare/v1.1.0-alpha.1...v1.1.0-alpha.2) (2025-01-02)
-
-
-### Features
-
-* add Badge component and related stories ([4106287](https://github.com/adrianomaringolo/buildgrid-ui/commit/41062872c2807cfa14494c9cab1f2b8fe506d246))
-
-# [1.1.0-alpha.1](https://github.com/adrianomaringolo/buildgrid-ui/compare/v1.0.0...v1.1.0-alpha.1) (2025-01-02)
-
-
-### Features
-
-* adding shadcn configuration ([5841434](https://github.com/adrianomaringolo/buildgrid-ui/commit/584143402fad7aa19e477693d2a4727f5625e430))
-* enhance Button component stories with props and update export ([69292b3](https://github.com/adrianomaringolo/buildgrid-ui/commit/69292b3d467dd5ed8eacf521e9c5f89e465af323))
-
-# 1.0.0 (2025-01-02)
-
-
-### Features
-
-* add Button component with Storybook integration and initial configuration ([bbc4e9a](https://github.com/adrianomaringolo/buildgrid-ui/commit/bbc4e9a54e3ea295622c8598d51576f3cddd1b3d))

package/commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ["@commitlint/config-conventional"],
-};

package/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/styles/tailwind.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

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

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

package/dist/lib/index.d.ts

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

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
-});
-export default [...compat.extends("next/core-web-vitals", "next/typescript", "prettier")];

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

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

@@ -1,31 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { AdaptiveInput } from './adaptative-input'
-import { HelpCircle, Phone, User } from 'lucide-react'
-
-const meta: Meta<typeof AdaptiveInput> = {
-	title: 'Components/input/adaptiveInput',
-	component: AdaptiveInput,
-}
-
-export default meta
-type Story = StoryObj<typeof AdaptiveInput>
-
-const Template = () => {
-	return (
-		<div className="w-64">
-			<AdaptiveInput
-				leftIcon={<Phone className="w-4 h-4" />}
-				rightIcon={<HelpCircle className="w-4 h-4" />}
-				mask="+00 0000-0000"
-			/>
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

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

@@ -1,66 +0,0 @@
-import { cn } from '@/lib'
-import * as React from 'react'
-import { Input, InputProps } from '../input'
-
-export interface AdaptiveInputProps extends InputProps {
-	leftIcon?: React.ReactNode
-	rightIcon?: React.ReactNode
-	mask?: string // New prop for the mask
-}
-
-const applyMask = (value: string, mask: string): string => {
-	const cleanValue = value.replace(/\D/g, '')
-	let maskedValue = ''
-	let maskIndex = 0
-	let valueIndex = 0
-
-	while (maskIndex < mask.length && valueIndex < cleanValue.length) {
-		if (mask[maskIndex] === '0') {
-			maskedValue += cleanValue[valueIndex]
-			valueIndex++
-		} else {
-			maskedValue += mask[maskIndex]
-		}
-		maskIndex++
-	}
-
-	return maskedValue
-}
-
-const AdaptiveInput = React.forwardRef<HTMLInputElement, AdaptiveInputProps>(
-	({ className, leftIcon, rightIcon, mask, onChange, ...props }, ref) => {
-		const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-			const input = e.target
-			if (mask) {
-				const maskedValue = applyMask(input.value, mask)
-				input.value = maskedValue
-			}
-			onChange?.(e) // Call the original onChange if provided
-		}
-
-		return (
-			<div className="relative w-fit">
-				{leftIcon && (
-					<div className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground">
-						{leftIcon}
-					</div>
-				)}
-				<Input
-					className={cn(leftIcon && 'pl-8', rightIcon && 'pr-8', className)}
-					ref={ref}
-					onInput={handleInputChange} // Attach the input handler
-					{...props}
-				/>
-				{rightIcon && (
-					<div className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground">
-						{rightIcon}
-					</div>
-				)}
-			</div>
-		)
-	},
-)
-
-AdaptiveInput.displayName = 'AdaptiveInput'
-
-export { AdaptiveInput }

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

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

package/src/components/autocomplete/autocomplete.stories.tsx

@@ -1,84 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Autocomplete } from './autocomplete'
-
-const meta: Meta<typeof Autocomplete> = {
-	title: 'Components/input/autocomplete',
-	component: Autocomplete,
-}
-
-export default meta
-type Story = StoryObj<typeof Autocomplete>
-
-// list of 50 names of countries
-const options = [
-	'United States',
-	'Canada',
-	'Argentina',
-	'Brazil',
-	'Chile',
-	'Colombia',
-	'Ecuador',
-	'Peru',
-	'Uruguay',
-	'Venezuela',
-	'Australia',
-	'China',
-	'India',
-	'Indonesia',
-	'Japan',
-	'Korea',
-	'Malaysia',
-	'Philippines',
-	'Singapore',
-	'Thailand',
-	'Vietnam',
-	'Austria',
-	'Belgium',
-	'Croatia',
-	'Denmark',
-	'Finland',
-	'France',
-	'Germany',
-	'Greece',
-	'Hungary',
-	'Ireland',
-	'Italy',
-	'Netherlands',
-	'Norway',
-	'Poland',
-	'Portugal',
-	'Romania',
-	'Russia',
-	'Spain',
-	'Sweden',
-	'Switzerland',
-	'Turkey',
-	'Ukraine',
-	'United Kingdom',
-	'Egypt',
-	'Nigeria',
-	'South Africa',
-	'Kenya',
-]
-
-const Template = () => {
-	const [value, setValue] = React.useState('')
-	return (
-		<div className="w-80">
-			<Autocomplete
-				value={value}
-				onChange={(value) => setValue(value)}
-				options={options.map((option) => ({ value: option, label: option }))}
-			/>
-			<p className="mt-4">Selected value: {value}</p>
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/autocomplete/autocomplete.tsx

@@ -1,136 +0,0 @@
-import { Search } from 'lucide-react'
-import { useState } from 'react'
-
-import { cn } from '@/lib'
-import { AdaptiveInput } from '../adaptative-input'
-import { Popover, PopoverContent, PopoverTrigger } from '../popover'
-
-interface Option {
-	value: string
-	label: string
-}
-
-interface AutoCompleteProps {
-	value?: string
-	onChange?: (value: string) => void
-	options: Option[]
-	className?: string
-	placeholder?: string
-	emptyMessage?: string
-}
-
-export function Autocomplete(props: AutoCompleteProps) {
-	const {
-		value = '',
-		onChange,
-		options: staticOptions,
-		className,
-		placeholder = 'Search...',
-		emptyMessage = 'Nothing found',
-	} = props
-
-	const [query, setQuery] = useState(value)
-	const [suggestions, setSuggestions] = useState<Option[]>(staticOptions)
-	const [selectedIndex, setSelectedIndex] = useState(-1)
-	const [isFocused, setIsFocused] = useState(false)
-
-	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const newValue = e.target.value
-		setQuery(newValue)
-		onChange?.(newValue)
-		setSelectedIndex(-1)
-		setIsFocused(true)
-
-		if (newValue.trim() === '') {
-			setSuggestions(staticOptions)
-		} else {
-			setSuggestions(
-				staticOptions.filter((option) =>
-					option.label.toLowerCase().includes(newValue.toLowerCase()),
-				),
-			)
-		}
-	}
-
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-		if (e.key === 'ArrowDown') {
-			e.preventDefault()
-			setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : prev))
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault()
-			setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1))
-		} else if (e.key === 'Enter' && selectedIndex >= 0) {
-			const selectedOption = suggestions[selectedIndex]
-			setQuery(selectedOption.label)
-			onChange?.(selectedOption.value)
-			setSuggestions([])
-			setSelectedIndex(-1)
-			setIsFocused(false)
-		} else if (e.key === 'Escape') {
-			setSuggestions([])
-			setSelectedIndex(-1)
-		}
-	}
-
-	const handleSuggestionClick = (option: Option) => {
-		setIsFocused(false)
-		setQuery(option.label)
-		onChange?.(option.value)
-		setSuggestions(staticOptions)
-		setSelectedIndex(-1)
-	}
-
-	const handleFocus = () => {
-		setIsFocused(true)
-	}
-
-	const handleBlur = () => {
-		setIsFocused(false)
-	}
-
-	return (
-		<Popover open={isFocused}>
-			<PopoverTrigger asChild>
-				<div className="relative w-full">
-					<AdaptiveInput
-						type="text"
-						placeholder={placeholder}
-						value={query}
-						onChange={handleInputChange}
-						onKeyDown={handleKeyDown}
-						onClick={handleFocus}
-						onFocus={handleFocus}
-						onBlur={handleBlur}
-						className={cn('pr-10', className)}
-						aria-label="Search field"
-						aria-autocomplete="list"
-						aria-controls="suggestions-list"
-						aria-expanded={suggestions.length > 0}
-						leftIcon={<Search className="w-4 h-4" />}
-					/>
-				</div>
-			</PopoverTrigger>
-			<PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)] max-h-96 overflow-y-auto">
-				{suggestions.length > 0 ? (
-					<ul id="suggestions-list" role="listbox">
-						{suggestions.map((option, index) => (
-							<li
-								key={option.value}
-								className={`px-4 py-2 cursor-pointer hover:bg-muted ${
-									index === selectedIndex ? 'bg-muted' : ''
-								}`}
-								onClick={() => handleSuggestionClick(option)}
-								role="option"
-								aria-selected={index === selectedIndex}
-							>
-								{option.label}
-							</li>
-						))}
-					</ul>
-				) : (
-					<span className="px-4 py-2 block">{emptyMessage}</span>
-				)}
-			</PopoverContent>
-		</Popover>
-	)
-}

package/src/components/autocomplete/index.ts

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

package/src/components/avatar/avatar.stories.tsx

@@ -1,29 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Avatar, AvatarFallback, AvatarImage } from './avatar'
-
-const meta: Meta<typeof Avatar> = {
-	component: Avatar,
-}
-
-export default meta
-type Story = StoryObj<typeof Avatar>
-
-const Template = () => {
-	return (
-		<Avatar className="w-24 h-24">
-			<AvatarImage
-				src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png?20150327203541"
-				alt="User avatar"
-			/>
-			<AvatarFallback>NS</AvatarFallback>
-		</Avatar>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/avatar/avatar.tsx

@@ -1,48 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils/cn'
-
-const Avatar = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Root
-		ref={ref}
-		className={cn(
-			'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-			className,
-		)}
-		{...props}
-	/>
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn('aspect-square h-full w-full', className)}
-		{...props}
-	/>
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Fallback
-		ref={ref}
-		className={cn(
-			'flex h-full w-full items-center justify-center rounded-full bg-muted',
-			className,
-		)}
-		{...props}
-	/>
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarFallback, AvatarImage }

package/src/components/avatar/index.ts

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

package/src/components/badge/badge.stories.tsx

@@ -1,30 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Badge, BadgeProps, badgeVariants } from './badge'
-
-const meta: Meta<typeof Badge> = {
-	component: Badge,
-}
-
-export default meta
-type Story = StoryObj<typeof Badge>
-
-const Template = (args: BadgeProps) => {
-	const variants = ['default', 'secondary', 'destructive', 'outline']
-	return (
-		<div className="flex gap-2">
-			{Object.values(variants).map((variant) => (
-				<Badge {...args} variant={variant as BadgeProps['variant']}>
-					{variant}
-				</Badge>
-			))}
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/badge/badge.tsx

@@ -1,34 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@/lib'
-
-const badgeVariants = cva(
-	'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-	{
-		variants: {
-			variant: {
-				default:
-					'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-				secondary:
-					'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				destructive:
-					'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-				outline: 'text-foreground',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-		},
-	},
-)
-
-export interface BadgeProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-	return <div className={cn(badgeVariants({ variant }), className)} {...props} />
-}
-
-export { Badge, badgeVariants }

package/src/components/badge/index.ts

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

package/src/components/button/button.stories.tsx

@@ -1,62 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Button, ButtonProps } from './button'
-
-const meta: Meta<typeof Button> = {
-	component: Button,
-}
-
-export default meta
-type Story = StoryObj<typeof Button>
-
-const variants: Array<ButtonProps['variant']> = [
-	'default',
-	'secondary',
-	'destructive',
-	'outline',
-	'ghost',
-	'link',
-]
-
-const Template = (args: ButtonProps) => {
-	return (
-		<div className="flex gap-2 flex-wrap">
-			{Object.values(variants).map((variant) => (
-				<Button
-					{...args}
-					variant={variant as ButtonProps['variant']}
-					className="capitalize"
-				>
-					{variant}
-				</Button>
-			))}
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}
-
-const TemplateIsLoading = () => {
-	return (
-		<div className="flex gap-2 flex-wrap">
-			{Object.values(variants).map((variant) => (
-				<Button
-					isLoading
-					variant={variant as ButtonProps['variant']}
-					className="capitalize"
-				>
-					{variant}
-				</Button>
-			))}
-		</div>
-	)
-}
-
-export const Loading: Story = {
-	render: TemplateIsLoading.bind({}),
-	args: {},
-}