@customafk/lunas-ui 0.0.7 → 0.0.8

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

@@ -0,0 +1,56 @@
+import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'
+
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
+import { NumberInput } from '../ui/inputs/number-input'
+
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>
+  label?: string
+  description?: string
+  placeholder?: string
+  unitText?: string
+  isShowClearButton?: boolean
+  isShowErrorMsg?: boolean
+  isShowCount?: boolean
+  onValueChange?: (value?: number) => void
+}
+export const NumberField = <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label = 'Number Field',
+  placeholder = '0',
+  isShowErrorMsg = false,
+  isShowCount = false,
+  unitText = '',
+  description = '',
+  onValueChange,
+}: Props<TFieldValues>) => {
+  const valueWatch = useWatch({ name })
+
+  return (
+    <FormField
+      name={name}
+      render={({ field: { onChange, ...field } }) => (
+        <FormItem className="w-full gap-0">
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <NumberInput
+              {...field}
+              placeholder={placeholder}
+              className="w-full"
+              unitText={unitText}
+              onValueChange={(value) => {
+                onChange(value)
+                onValueChange?.(value)
+              }}
+            />
+          </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/forms/password-field.tsx

@@ -0,0 +1,38 @@
+"use client"
+import type { FieldPath, FieldValues } from 'react-hook-form'
+
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
+import { PasswordInput } from '../ui/inputs/password-input'
+
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>
+  label?: string
+  description?: string
+  placeholder?: string
+  isShowErrorMsg?: boolean
+  onValueChange?: (value: string) => void
+}
+export const PasswordField = <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label = 'Text Field',
+  placeholder = 'Enter text here',
+  isShowErrorMsg = false,
+  description,
+  onValueChange,
+}: Props<TFieldValues>) => {
+  return (
+    <FormField
+      name={name}
+      render={({ field }) => (
+        <FormItem className="w-full">
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />
+          </FormControl>
+          {!!description && <FormDescription>{description}</FormDescription>}
+          {isShowErrorMsg && <FormMessage />}
+        </FormItem>
+      )}
+    />
+  )
+}

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

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

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

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

@@ -0,0 +1,53 @@
+"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/flex.tsx

@@ -0,0 +1,110 @@
+"use client";
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const flexVariants = cva(["relative flex", "text-sm"], {
+  variants: {
+    vertical: {
+      true: "flex-col",
+      false: "flex-row",
+    },
+    width: {
+      full: "w-full",
+      auto: "w-auto",
+      fit: "w-fit",
+      screen: "w-screen",
+      min: "w-min",
+      max: "w-max",
+    },
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap",
+    },
+    margin: {
+      sm: "m-2",
+      md: "m-4",
+      lg: "m-6",
+      xl: "m-8",
+      none: "m-0",
+    },
+    padding: {
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8",
+      none: "p-0",
+    },
+    gap: {
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8",
+      none: "gap-0",
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly",
+      stretch: "justify-stretch",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline",
+      stretch: "items-stretch",
+    },
+  },
+  defaultVariants: {
+    vertical: false,
+    wrap: true,
+    width: "fit",
+    margin: "none",
+    padding: "sm",
+    gap: "xs",
+    justify: "start",
+    align: "center",
+  },
+});
+
+type Props = {
+  className?: string;
+} & VariantProps<typeof flexVariants>;
+export const Flex = ({
+  vertical,
+  wrap,
+  width,
+  margin,
+  padding,
+  gap,
+  justify,
+  align,
+  className,
+  children,
+}: React.PropsWithChildren<Props>) => {
+  return (
+    <div
+      className={cn(
+        flexVariants({
+          vertical,
+          width,
+          wrap,
+          margin,
+          padding,
+          gap,
+          justify,
+          align,
+          className,
+        }),
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/packages/components/layouts/main/content.tsx

@@ -0,0 +1,11 @@
+import { SidebarInset } from "@/components/ui/sidebar";
+
+export const MainLayoutContent = ({ children }: React.PropsWithChildren) => {
+  return (
+    <SidebarInset>
+      <section className="relative size-full">
+        <div className="absolute inset-0">{children}</div>
+      </section>
+    </SidebarInset>
+  );
+};

package/packages/components/layouts/main/header.tsx

@@ -0,0 +1,53 @@
+import {
+  BellIcon,
+  CircleQuestionMarkIcon,
+  ShoppingCartIcon,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+export const MainLayoutHeader = () => {
+  return (
+    <header
+      className={cn(
+        "bg-card",
+        "h-(--header-height)",
+        "absolute inset-x-0 top-0 z-20",
+        "flex items-center gap-2 border-b shadow-sm",
+        "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">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-muted-foreground rounded-full"
+        >
+          <CircleQuestionMarkIcon />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-muted-foreground rounded-full"
+        >
+          <BellIcon />
+        </Button>
+      </div>
+    </header>
+  );
+};

package/packages/components/layouts/main/index.tsx

@@ -0,0 +1,3 @@
+export * from './wrapper'
+export * from './content'
+export * from './header'

package/packages/components/layouts/main/wrapper.tsx

@@ -0,0 +1,5 @@
+import { SidebarProvider } from "@/components/ui/sidebar";
+
+export const MainLayoutWrapper = ({ children }: React.PropsWithChildren) => {
+  return <SidebarProvider className="w-svw">{children}</SidebarProvider>;
+};

package/packages/components/table/data-table-pagination.tsx

@@ -0,0 +1,99 @@
+import { type Table } from "@tanstack/react-table";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({
+  table,
+}: DataTablePaginationProps<TData>) {
+  "use no memo";
+  return (
+    <div className="mt-4 flex w-full flex-0 flex-wrap items-center justify-between gap-y-4 px-2">
+      <div className="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of{" "}
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className="flex flex-wrap items-center space-x-6 gap-y-4 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-25 items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2 *:size-9 *:p-0">
+          <Button
+            variant="outline"
+            className="lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            className="lg:flex"
+            onClick={() => {
+              table.setPageIndex(table.getPageCount() - 1);
+            }}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}