@customafk/lunas-ui 0.0.26 → 0.0.27

package/packages/components/forms/select-field.tsx

@@ -1,58 +0,0 @@
-'use client'
-import type { FieldPath, FieldValues } from 'react-hook-form'
-
-import { cn } from '@/lib/utils'
-
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-  name: FieldPath<TFieldValues>
-  label?: string
-  placeholder?: string
-  disabledValues?: string[]
-  options?: { value: string; label: string }[]
-  isShowLabel?: boolean
-  isShowErrorMsg?: boolean
-  modal?: boolean
-  description?: string
-  className?: string
-}
-export const SelectField = <TFieldValues extends FieldValues = FieldValues>({
-  name,
-  label = 'Select Field',
-  placeholder = 'Select an option',
-  disabledValues = [],
-  options = [],
-  isShowLabel = true,
-  isShowErrorMsg = false,
-  description = '',
-  className = '',
-}: Props<TFieldValues>) => {
-  return (
-    <FormField
-      name={name}
-      render={({ field }) => (
-        <FormItem className={cn('w-full', className)}>
-          {isShowLabel && <FormLabel>{label}</FormLabel>}
-          <Select defaultValue={field.value} onValueChange={field.onChange}>
-            <FormControl>
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder={placeholder} />
-              </SelectTrigger>
-            </FormControl>
-            <SelectContent>
-              {options.map((option) => (
-                <SelectItem key={option.value} disabled={disabledValues.includes(option.value)} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          {!!description && <FormDescription>{description}</FormDescription>}
-          {isShowErrorMsg && <FormMessage />}
-        </FormItem>
-      )}
-    />
-  )
-}

package/packages/components/forms/switch-field.tsx

@@ -1,40 +0,0 @@
-'use client'
-import type { FieldPath, FieldValues } from 'react-hook-form'
-
-import { cn } from '@/lib/utils'
-
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
-import { Switch } from '../ui/switch'
-
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-  name: FieldPath<TFieldValues>
-  label?: string
-  description?: string
-  isShowErrorMsg?: boolean
-}
-export const SwitchField = <TFieldValues extends FieldValues = FieldValues>({
-  name,
-  label = 'Switch Field',
-  description,
-  isShowErrorMsg = false,
-}: Props<TFieldValues>) => {
-  return (
-    <FormField
-      name={name}
-      render={({ field }) => (
-        <div className="spage-y-1">
-          <FormItem className={cn('border-border-weak flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs')}>
-            <div className="space-y-0.5">
-              <FormLabel className="cursor-pointer text-sm">{label}</FormLabel>
-              {description && <FormDescription className="text-xs">{description}</FormDescription>}
-            </div>
-            <FormControl>
-              <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl>
-          </FormItem>
-          {isShowErrorMsg && <FormMessage />}
-        </div>
-      )}
-    />
-  )
-}

package/packages/components/forms/text-field.tsx

@@ -1,73 +0,0 @@
-'use client'
-import React from 'react'
-import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'
-import { XIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-import { Flex } from '../layouts/flex'
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from '../ui/form'
-import { Input } from '../ui/input'
-
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-  name: FieldPath<TFieldValues>
-  label?: string
-  description?: string
-  placeholder?: string
-  isShowLabel?: boolean
-  isShowClearButton?: boolean
-  isShowErrorMsg?: boolean
-  isShowCount?: boolean
-  className?: string
-  onValueChange?: (value: string) => void
-}
-export const TextField = <TFieldValues extends FieldValues = FieldValues>({
-  name,
-  label = 'Text Field',
-  placeholder = 'Enter text here',
-  isShowLabel = true,
-  isShowClearButton = false,
-  isShowErrorMsg = false,
-  isShowCount = false,
-  description,
-  className = '',
-  onValueChange,
-}: Props<TFieldValues>) => {
-  const { resetField } = useFormField()
-  const valueWatch = useWatch({ name })
-
-  const handleClearInput = React.useCallback(() => {
-    resetField(name)
-  }, [resetField, name])
-
-  return (
-    <FormField
-      name={name}
-      render={({ field }) => (
-        <FormItem className={cn('w-full gap-0', isShowCount || (!!description && 'space-y-1'), className)}>
-          {isShowLabel && <FormLabel>{label}</FormLabel>}
-          <div className="relative">
-            <FormControl>
-              <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />
-            </FormControl>
-            {isShowClearButton && valueWatch && (
-              <button
-                type="button"
-                className="text-muted-foreground/80 hover:text-accent-foreground focus-visible:ring-border absolute inset-y-0 end-0 flex h-full w-8 cursor-pointer items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-2"
-                aria-label="Clear input"
-                onClick={handleClearInput}
-              >
-                <XIcon size={14} aria-hidden="true" />
-              </button>
-            )}
-          </div>
-          <Flex width="full" padding="none" justify="end">
-            {isShowErrorMsg && <FormMessage className="grow" />}
-            {isShowCount && <div className="text-muted-foreground text-end text-xs">{valueWatch?.length ?? 0} characters</div>}
-          </Flex>
-          {!!description && <FormDescription>{description}</FormDescription>}
-        </FormItem>
-      )}
-    />
-  )
-}

package/packages/components/forms/textarea-field.tsx

@@ -1,45 +0,0 @@
-'use client'
-import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'
-
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
-import { Textarea } from '../ui/textarea'
-
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-  name: FieldPath<TFieldValues>
-  label?: string
-  description?: string
-  placeholder?: string
-  isShowErrorMsg?: boolean
-  isShowCount?: boolean
-  rows?: number
-  onValueChange?: (value: string) => void
-}
-export const TextareaField = <TFieldValues extends FieldValues = FieldValues>({
-  name,
-  label = 'Textarea Field',
-  placeholder = 'Enter text here',
-  isShowErrorMsg = false,
-  isShowCount = false,
-  description,
-  rows = 3,
-  onValueChange,
-}: Props<TFieldValues>) => {
-  const valueWatch = useWatch({ name })
-
-  return (
-    <FormField
-      name={name}
-      render={({ field }) => (
-        <FormItem className="w-full">
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            <Textarea {...field} placeholder={placeholder} className="w-full" rows={rows} onValueChange={onValueChange} />
-          </FormControl>
-          {isShowCount && <div className="text-muted-foreground text-end text-xs">{valueWatch?.length ?? 0} characters</div>}
-          {!!description && <FormDescription>{description}</FormDescription>}
-          {isShowErrorMsg && <FormMessage />}
-        </FormItem>
-      )}
-    />
-  )
-}

package/packages/components/layouts/app-layout/index.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import { ShoppingCartIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-import { Sidebar, SidebarInset, SidebarProvider, SidebarTrigger } from './sidebar'
-
-export const AppLayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return <SidebarProvider>{children}</SidebarProvider>
-}
-
-export const AppLayoutHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return (
-    <header
-      className={cn(
-        'bg-card',
-        'h-(--header-height)',
-        'absolute inset-x-0 top-0 z-20',
-        'shadow-nav flex items-center gap-2',
-        'transition-[width,height] ease-linear',
-        'group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)',
-        'px-4',
-      )}
-    >
-      <SidebarTrigger />
-
-      <div className="ml-2.5 flex gap-x-2">
-        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-          <ShoppingCartIcon size={20} />
-        </div>
-        <div className="grid flex-1 text-left text-sm leading-tight">
-          <span className="truncate font-medium">Lunas Store</span>
-          <span className="truncate text-xs">Established 2023</span>
-        </div>
-      </div>
-
-      <div className="flex flex-1 items-center justify-end">{children}</div>
-    </header>
-  )
-}
-
-export const AppLayoutSidebar: React.FC<React.PropsWithChildren & React.ComponentProps<typeof Sidebar>> = ({ children, ...props }) => {
-  return (
-    <Sidebar variant="inset" collapsible="icon" {...props}>
-      {children}
-    </Sidebar>
-  )
-}
-
-export const AppLayoutMain: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return (
-    <SidebarInset>
-      <section className="relative size-full">
-        <div className="absolute inset-0">{children}</div>
-      </section>
-    </SidebarInset>
-  )
-}
-
-export const AppLayoutMainGroup: React.FC<React.PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
-  return (
-    <div data-slot="main-group" className={cn('flex size-full flex-col gap-4 overflow-y-auto p-4', className)}>
-      {children}
-    </div>
-  )
-}
-
-export const AppLayoutMainGroupContent: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return (
-    <div data-slot="main-group-content" className="bg-card shadow-card size-full rounded-md p-4">
-      {children}
-    </div>
-  )
-}