buildgrid-ui 1.1.0-dev.9 → 1.1.0

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: {},
-}

package/src/components/button/button.tsx

@@ -1,82 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-import { cn } from '../../lib/utils/cn'
-
-const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-	{
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-				destructive:
-					'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-				outline:
-					'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-				secondary:
-					'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'text-primary underline-offset-4 hover:underline',
-			},
-			size: {
-				default: 'h-9 px-4 py-2',
-				sm: 'h-8 rounded-md px-3 text-xs',
-				lg: 'h-10 rounded-md px-8',
-				xl: 'h-12 rounded-md px-10 text-xl',
-				icon: 'h-9 w-9',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default',
-		},
-	},
-)
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	isLoading?: boolean
-	asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, isLoading = false, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : 'button'
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-				disabled={isLoading || props.disabled}
-			>
-				{isLoading && (
-					<svg
-						className="animate-spin -ml-1 h-5 w-5"
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-					>
-						<circle
-							className="opacity-25"
-							cx="12"
-							cy="12"
-							r="10"
-							stroke="currentColor"
-							strokeWidth="4"
-						/>
-						<path
-							className="opacity-75"
-							fill="currentColor"
-							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-						/>
-					</svg>
-				)}
-				{props.children}
-			</Comp>
-		)
-	},
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }

package/src/components/button/index.ts

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

package/src/components/card/card.stories.tsx

@@ -1,41 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from './Card'
-import { Button } from '../button/button'
-
-const meta: Meta<typeof Card> = {
-	component: Card,
-}
-
-export default meta
-type Story = StoryObj<typeof Button>
-
-const Template = () => {
-	return (
-		<Card className="w-96">
-			<CardHeader>
-				<CardTitle>Title</CardTitle>
-				<CardDescription>Description</CardDescription>
-			</CardHeader>
-			<CardContent className="px-0 pt-2">
-				<div className="bg-gray-200 w-full h-40 p-6">Content goes here</div>
-			</CardContent>
-			<CardFooter>
-				<Button variant="outline">Close</Button>
-			</CardFooter>
-		</Card>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/card/card.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils/cn'
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
-			{...props}
-		/>
-	),
-)
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('flex flex-col space-y-1.5 p-6', className)}
-			{...props}
-		/>
-	),
-)
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('font-semibold leading-none tracking-tight pb-4', className)}
-			{...props}
-		/>
-	),
-)
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-))
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn('p-6 py-0', className)} {...props} />
-))
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn('flex items-center p-6 pt-6', className)} {...props} />
-	),
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.stories.tsx

@@ -1,36 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Checkbox } from './checkbox'
-
-const meta: Meta<typeof Checkbox> = {
-	component: Checkbox,
-}
-
-export default meta
-type Story = StoryObj<typeof Checkbox>
-
-const Template = () => {
-	return (
-		<div className="items-top flex space-x-2">
-			<Checkbox id="terms1" />
-			<div className="grid gap-1.5 leading-none">
-				<label
-					htmlFor="terms1"
-					className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-				>
-					Accept terms and conditions
-				</label>
-				<p className="text-sm text-muted-foreground">
-					You agree to our Terms of Service and Privacy Policy.
-				</p>
-			</div>
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/checkbox/checkbox.tsx

@@ -1,28 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils/cn'
-
-const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-	<CheckboxPrimitive.Root
-		ref={ref}
-		className={cn(
-			'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-			className,
-		)}
-		{...props}
-	>
-		<CheckboxPrimitive.Indicator
-			className={cn('flex items-center justify-center text-current')}
-		>
-			<Check className="h-4 w-4" />
-		</CheckboxPrimitive.Indicator>
-	</CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }

package/src/components/checkbox/index.ts

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

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

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

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

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

package/src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -1,90 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuPortal,
-	DropdownMenuSeparator,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
-} from './dropdown-menu'
-import { Button } from '../button/button'
-import {
-	Key,
-	Mail,
-	MessageSquare,
-	Pencil,
-	PlusCircle,
-	Settings2,
-	Trash,
-	UserPlus,
-} from 'lucide-react'
-
-const meta: Meta<typeof DropdownMenu> = {
-	component: DropdownMenu,
-}
-
-export default meta
-type Story = StoryObj<typeof DropdownMenu>
-
-const Template = () => {
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button variant="outline" size="icon">
-					<Settings2 className="w-6 h-6" />
-					<span className="sr-only">Open settings</span>
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end">
-				<DropdownMenuLabel>Jhon Doe</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem>
-					<Pencil /> Edit
-				</DropdownMenuItem>
-				<DropdownMenuItem>
-					<Trash /> Delete
-				</DropdownMenuItem>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem>
-					<Key /> Send password reset
-				</DropdownMenuItem>
-				<DropdownMenuSeparator />
-				<DropdownMenuSub>
-					<DropdownMenuSubTrigger>
-						<UserPlus />
-						<span>Invite users</span>
-					</DropdownMenuSubTrigger>
-					<DropdownMenuPortal>
-						<DropdownMenuSubContent>
-							<DropdownMenuItem>
-								<Mail />
-								<span>Email</span>
-							</DropdownMenuItem>
-							<DropdownMenuItem>
-								<MessageSquare />
-								<span>Message</span>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-							<DropdownMenuItem>
-								<PlusCircle />
-								<span>More...</span>
-							</DropdownMenuItem>
-						</DropdownMenuSubContent>
-					</DropdownMenuPortal>
-				</DropdownMenuSub>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}