buildgrid-ui 1.1.0-dev.9 → 1.2.0

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/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/adaptive-input/adaptive-input.stories.tsx

@@ -1,31 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { AdaptiveInput } from './adaptive-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/adaptive-input/adaptive-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-full">
-				{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/adaptive-input/index.ts

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

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

@@ -1,49 +0,0 @@
-// 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

@@ -1,130 +0,0 @@
-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

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

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 '../adaptive-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: {},
-}