ikoncomponents 1.5.8 → 1.5.10

package/templates/default/ikonS/command.tsx

@@ -1,184 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "../utils/cn"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog"
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-card text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-[var(--input)] data-[selected=true]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

package/templates/default/ikonS/date-input.tsx

@@ -1,259 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-interface DateInputProps {
-  value?: Date
-  onChange: (date: Date) => void
-}
-
-interface DateParts {
-  day: number
-  month: number
-  year: number
-}
-
-const DateInput: React.FC<DateInputProps> = ({ value, onChange }) => {
-  const [date, setDate] = React.useState<DateParts>(() => {
-    const d = value ? new Date(value) : new Date()
-    return {
-      day: d.getDate(),
-      month: d.getMonth() + 1, // JavaScript months are 0-indexed
-      year: d.getFullYear()
-    }
-  })
-
-  const monthRef = useRef<HTMLInputElement | null>(null)
-  const dayRef = useRef<HTMLInputElement | null>(null)
-  const yearRef = useRef<HTMLInputElement | null>(null)
-
-  useEffect(() => {
-    const d = value ? new Date(value) : new Date()
-    setDate({
-      day: d.getDate(),
-      month: d.getMonth() + 1,
-      year: d.getFullYear()
-    })
-  }, [value])
-
-  const validateDate = (field: keyof DateParts, value: number): boolean => {
-    if (
-      (field === 'day' && (value < 1 || value > 31)) ||
-      (field === 'month' && (value < 1 || value > 12)) ||
-      (field === 'year' && (value < 1000 || value > 9999))
-    ) {
-      return false
-    }
-
-    // Validate the day of the month
-    const newDate = { ...date, [field]: value }
-    const d = new Date(newDate.year, newDate.month - 1, newDate.day)
-    return d.getFullYear() === newDate.year &&
-           d.getMonth() + 1 === newDate.month &&
-           d.getDate() === newDate.day
-  }
-
-  const handleInputChange =
-    (field: keyof DateParts) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value ? Number(e.target.value) : ''
-      const isValid = typeof newValue === 'number' && validateDate(field, newValue)
-
-      // If the new value is valid, update the date
-      const newDate = { ...date, [field]: newValue }
-      setDate(newDate)
-
-      // only call onChange when the entry is valid
-      if (isValid) {
-        onChange(new Date(newDate.year, newDate.month - 1, newDate.day))
-      }
-    }
-
-  const initialDate = useRef<DateParts>(date)
-
-  const handleBlur = (field: keyof DateParts) => (
-    e: React.FocusEvent<HTMLInputElement>
-  ): void => {
-    if (!e.target.value) {
-      setDate(initialDate.current)
-      return
-    }
-
-    const newValue = Number(e.target.value)
-    const isValid = validateDate(field, newValue)
-
-    if (!isValid) {
-      setDate(initialDate.current)
-    } else {
-      // If the new value is valid, update the initial value
-      initialDate.current = { ...date, [field]: newValue }
-    }
-  }
-
-  const handleKeyDown =
-    (field: keyof DateParts) => (e: React.KeyboardEvent<HTMLInputElement>) => {
-      // Allow command (or control) combinations
-      if (e.metaKey || e.ctrlKey) {
-        return
-      }
-
-      // Prevent non-numeric characters, excluding allowed keys
-      if (
-        !/^[0-9]$/.test(e.key) &&
-        ![
-          'ArrowUp',
-          'ArrowDown',
-          'ArrowLeft',
-          'ArrowRight',
-          'Delete',
-          'Tab',
-          'Backspace',
-          'Enter'
-        ].includes(e.key)
-      ) {
-        e.preventDefault()
-        return
-      }
-
-      if (e.key === 'ArrowUp') {
-        e.preventDefault()
-        let newDate = { ...date }
-
-        if (field === 'day') {
-          if (date[field] === new Date(date.year, date.month, 0).getDate()) {
-            newDate = { ...newDate, day: 1, month: (date.month % 12) + 1 }
-            if (newDate.month === 1) newDate.year += 1
-          } else {
-            newDate.day += 1
-          }
-        }
-
-        if (field === 'month') {
-          if (date[field] === 12) {
-            newDate = { ...newDate, month: 1, year: date.year + 1 }
-          } else {
-            newDate.month += 1
-          }
-        }
-
-        if (field === 'year') {
-          newDate.year += 1
-        }
-
-        setDate(newDate)
-        onChange(new Date(newDate.year, newDate.month - 1, newDate.day))
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault()
-        let newDate = { ...date }
-
-        if (field === 'day') {
-          if (date[field] === 1) {
-            newDate.month -= 1
-            if (newDate.month === 0) {
-              newDate.month = 12
-              newDate.year -= 1
-            }
-            newDate.day = new Date(newDate.year, newDate.month, 0).getDate()
-          } else {
-            newDate.day -= 1
-          }
-        }
-
-        if (field === 'month') {
-          if (date[field] === 1) {
-            newDate = { ...newDate, month: 12, year: date.year - 1 }
-          } else {
-            newDate.month -= 1
-          }
-        }
-
-        if (field === 'year') {
-          newDate.year -= 1
-        }
-
-        setDate(newDate)
-        onChange(new Date(newDate.year, newDate.month - 1, newDate.day))
-      }
-
-      if (e.key === 'ArrowRight') {
-        if (
-          e.currentTarget.selectionStart === e.currentTarget.value.length ||
-          (e.currentTarget.selectionStart === 0 &&
-            e.currentTarget.selectionEnd === e.currentTarget.value.length)
-        ) {
-          e.preventDefault()
-          if (field === 'month') dayRef.current?.focus()
-          if (field === 'day') yearRef.current?.focus()
-        }
-      } else if (e.key === 'ArrowLeft') {
-        if (
-          e.currentTarget.selectionStart === 0 ||
-          (e.currentTarget.selectionStart === 0 &&
-            e.currentTarget.selectionEnd === e.currentTarget.value.length)
-        ) {
-          e.preventDefault()
-          if (field === 'day') monthRef.current?.focus()
-          if (field === 'year') dayRef.current?.focus()
-        }
-      }
-    }
-
-  return (
-    <div className="flex border rounded-lg items-center text-sm px-1">
-      <input
-        type="text"
-        ref={monthRef}
-        max={12}
-        maxLength={2}
-        value={date.month.toString()}
-        onChange={handleInputChange('month')}
-        onKeyDown={handleKeyDown('month')}
-        onFocus={(e) => {
-          if (window.innerWidth > 1024) {
-            e.target.select()
-          }
-        }}
-        onBlur={handleBlur('month')}
-        className="p-0 outline-none w-6 border-none text-center"
-        placeholder="M"
-      />
-      <span className="opacity-20 -mx-px">/</span>
-      <input
-        type="text"
-        ref={dayRef}
-        max={31}
-        maxLength={2}
-        value={date.day.toString()}
-        onChange={handleInputChange('day')}
-        onKeyDown={handleKeyDown('day')}
-        onFocus={(e) => {
-          if (window.innerWidth > 1024) {
-            e.target.select()
-          }
-        }}
-        onBlur={handleBlur('day')}
-        className="p-0 outline-none w-7 border-none text-center"
-        placeholder="D"
-      />
-      <span className="opacity-20 -mx-px">/</span>
-      <input
-        type="text"
-        ref={yearRef}
-        max={9999}
-        maxLength={4}
-        value={date.year.toString()}
-        onChange={handleInputChange('year')}
-        onKeyDown={handleKeyDown('year')}
-        onFocus={(e) => {
-          if (window.innerWidth > 1024) {
-            e.target.select()
-          }
-        }}
-        onBlur={handleBlur('year')}
-        className="p-0 outline-none w-12 border-none text-center"
-        placeholder="YYYY"
-      />
-    </div>
-  )
-}
-
-DateInput.displayName = 'DateInput'
-
-export { DateInput }

package/templates/default/ikonS/date-range-picker.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable max-lines */
-'use client'
-
-import React, { type FC, useState, useEffect, useRef, JSX } from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from './popover'
-import { Calendar } from './calendar'
-import { ChevronRightIcon, ChevronLeftIcon } from '@radix-ui/react-icons' // Use these icons for the arrows in the header
-import { Button } from './button'
-
-export interface DateRangePickerProps {
-  /** Click handler for applying the updates from DateRangePicker. */
-  onUpdate?: (values: { range: DateRange }) => void
-  /** Initial value for start date */
-  initialDateFrom?: Date | string
-  /** Initial value for end date */
-  initialDateTo?: Date | string
-  /** Alignment of popover */
-  align?: 'start' | 'center' | 'end'
-  /** Option for locale */
-  locale?: string
-}
-
-const getDateAdjustedForTimezone = (dateInput: Date | string): Date => {
-  if (typeof dateInput === 'string') {
-    const parts = dateInput.split('-').map((part) => parseInt(part, 10))
-    const date = new Date(parts[0], parts[1] - 1, parts[2])
-    return date
-  } else {
-    return dateInput
-  }
-}
-
-interface DateRange {
-  from: Date | undefined
-  to: Date | undefined
-}
-
-/** The DateRangePicker component allows a user to select a range of dates */
-export const DateRangePicker: FC<DateRangePickerProps> & {
-  filePath: string
-} = ({
-  initialDateFrom = new Date(new Date().setHours(0, 0, 0, 0)),
-  initialDateTo,
-  onUpdate,
-  align = 'center',
-  locale = 'en-US'
-}): JSX.Element => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    const [range, setRange] = useState<DateRange>({
-      from: initialDateFrom
-        ? getDateAdjustedForTimezone(initialDateFrom)
-        : undefined,
-      to: initialDateTo
-        ? getDateAdjustedForTimezone(initialDateTo)
-        : initialDateFrom
-          ? getDateAdjustedForTimezone(initialDateFrom)
-          : undefined
-    })
-
-    useEffect(() => {
-      // This effect will be triggered when a date is selected.
-      // We update the state of the component using the new range.
-      if (onUpdate) {
-        onUpdate({ range })
-      }
-    }, [range, onUpdate])
-
-    return (
-      <Popover modal={true} open={isOpen} onOpenChange={setIsOpen}>
-        <PopoverTrigger asChild>
-          <Button size={'lg'} variant="secondary" className="w-auto px-3 py-2">
-            <div className="flex-grow text-left font-normal">
-
-
-              <span>Select a date range</span>
-
-            </div>
-            <div className="pl-1 opacity-60 -mr-2 scale-125">
-              {isOpen ? <ChevronLeftIcon width={24} /> : <ChevronRightIcon width={24} />}
-            </div>
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent align={align} className="w-auto p-0">
-          <Calendar
-            mode="range"
-            onSelect={(value: { from?: Date, to?: Date } | undefined) => {
-              setRange({ from: value?.from, to: value?.to })
-            }}
-            selected={range}
-            numberOfMonths={2}
-            defaultMonth={
-              new Date(new Date().setMonth(new Date().getMonth() - 1))
-            }
-          />
-        </PopoverContent>
-      </Popover>
-    )
-  }
-
-DateRangePicker.displayName = 'DateRangePicker'
-DateRangePicker.filePath =
-  'libs/shared/ui-kit/src/lib/date-range-picker/date-range-picker.tsx'

package/templates/default/ikonS/dialog.tsx

@@ -1,143 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-
-import { cn } from "../utils/cn"
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-card 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}