ikoncomponents 1.4.8 → 1.4.9

package/templates/default/ikonShade/command.tsx

@@ -0,0 +1,184 @@
+"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/ikonShade/date-input.tsx

@@ -0,0 +1,259 @@
+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/ikonShade/date-range-picker.tsx

@@ -0,0 +1,103 @@
+/* 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/ikonShade/dialog.tsx

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