@ayasofyazilim/ui 0.0.0

package/src/custom/country-selector.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { ScrollArea } from "@repo/ayasofyazilim-ui/components/scroll-area";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Globe } from "lucide-react";
+
+export const lang = {
+  searchText: "Find",
+  searchEmptyValue: "No country found.",
+  defaultValue: {
+    label: "Test",
+    value: "tr",
+  },
+  countries: [
+    {
+      cultureName: "en",
+      uiCultureName: "en",
+      displayName: "English",
+      flagIcon: "en",
+      isEnabled: true,
+      isDefaultLanguage: true,
+      concurrencyStamp: "1a736aee0303420f9394ce3a98523e34",
+      creationTime: "2024-03-21T08:43:33.6867177",
+      creatorId: null,
+      id: "75fe277d-5138-285d-8088-3a1171b61635",
+      extraProperties: {},
+    },
+    {
+      cultureName: "tr",
+      uiCultureName: "tr",
+      displayName: "Türkçe",
+      flagIcon: "tr",
+      isEnabled: true,
+      isDefaultLanguage: false,
+      concurrencyStamp: "095c8922c1b148bd9e161beca3c635ac",
+      creationTime: "2024-03-21T08:43:33.6892353",
+      creatorId: null,
+      id: "a8483e30-e0e6-e4e8-f2ff-3a1171b61638",
+      extraProperties: {},
+    },
+  ],
+};
+export type CountryItem = {
+  concurrencyStamp?: string;
+  creationTime?: string;
+  creatorId?: string | null;
+  cultureName?: string | null;
+  direction?: "rtl" | "ltr" | null;
+  displayName?: string | null;
+  extraProperties?: object | null;
+  flagIcon?: string | null;
+  id?: string | null;
+  isDefaultLanguage?: boolean;
+  isEnabled?: boolean;
+  twoLetterISOLanguageName?: string | null;
+  uiCultureName?: string | null;
+};
+
+type CountrySelectorProps = {
+  countries?: Array<CountryItem>;
+  defaultValue?: string;
+  menuAlign?: "start" | "center" | "end";
+  onValueChange?: (value: string) => void;
+  searchEmptyValue?: string;
+  searchText?: string;
+  showLabel?: boolean;
+  showFlag?: boolean;
+  tooltipText?: string;
+  className?: string;
+};
+
+export function CountrySelector({
+  searchText,
+  searchEmptyValue,
+  defaultValue,
+  menuAlign = "end",
+  showLabel = true,
+  showFlag = false,
+  countries = [],
+  onValueChange,
+  className,
+}: CountrySelectorProps) {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState<string>(defaultValue || "");
+
+  function onSelect(currentValue: string) {
+    setValue(currentValue);
+    setOpen(false);
+    if (onValueChange) onValueChange(currentValue);
+  }
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          role="combobox"
+          variant="ghost"
+          aria-expanded={open}
+          className={cn(className)}
+        >
+          <Globe />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-40 p-0" align={menuAlign}>
+        <Command
+          filter={(commandValue, search) => {
+            if (
+              commandValue.includes(search) ||
+              countries
+                .find(
+                  (i) =>
+                    i.cultureName?.toLocaleLowerCase() ===
+                    commandValue.toLocaleLowerCase()
+                )
+                ?.displayName?.toLocaleLowerCase()
+                ?.includes(search.toLocaleLowerCase())
+            )
+              return 1;
+            return 0;
+          }}
+        >
+          <ScrollArea className="h-full overflow-auto">
+            <CommandList className="h-full overflow-visible">
+              <CommandInput placeholder={searchText} className="h-9 text-xs" />
+              <CommandEmpty>{searchEmptyValue}</CommandEmpty>
+              <CommandGroup>
+                {countries.map((country) => (
+                  <CommandItem
+                    key={country.cultureName}
+                    value={`${country.cultureName}` || ""}
+                    onSelect={(currentValue: string) => onSelect(currentValue)}
+                  >
+                    <SelectedCountry
+                      {...country}
+                      showFlag={showFlag}
+                      showLabel={showLabel}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </ScrollArea>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+type SelectedCountryProps = Partial<CountryItem> & {
+  showLabel?: boolean;
+  showFlag?: boolean;
+};
+const SelectedCountry = ({
+  displayName,
+  flagIcon = "",
+  direction,
+  showLabel = true,
+  showFlag,
+}: SelectedCountryProps) => (
+  <div
+    className={`${direction === "rtl" && "flex-row-reverse"} rtl:flex-row-reverse flex w-full justify-between gap-2 overflow-hidden items-center`}
+  >
+    {showLabel && (
+      <span className="text-xs text-foreground">{displayName}</span>
+    )}
+    <div className="h-auto">
+      {showFlag && (
+        <img
+          src={`https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/1x1/${flagIcon}.svg`}
+          alt={displayName || ""}
+          className="w-6 h-6 object-cover rounded-full"
+        />
+      )}
+      {!showFlag && (
+        <Badge className="text-xs py-0 px-1">
+          {flagIcon?.toUpperCase() || "N/A"}
+        </Badge>
+      )}
+    </div>
+    {/* <div className="w-6 h-6"> */}
+    {/* {showFlag  ?<img */}
+    {/* className="w-6 h-6 object-cover rounded-full" */}
+    {/* src={`https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/1x1/${flagIcon}.svg`} */}
+    {/* alt={displayName || ''} */}
+    {/* />: <} */}
+    {/* </div> */}
+  </div>
+);

package/src/custom/date-picker/calendar-rac.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { ComponentProps } from "react";
+import {
+  Button as ButtonRac,
+  CalendarCell as CalendarCellRac,
+  CalendarGridBody as CalendarGridBodyRac,
+  CalendarGridHeader as CalendarGridHeaderRac,
+  CalendarGrid as CalendarGridRac,
+  CalendarHeaderCell as CalendarHeaderCellRac,
+  Calendar as CalendarRac,
+  Heading as HeadingRac,
+  RangeCalendar as RangeCalendarRac,
+  composeRenderProps,
+} from "react-aria-components";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+interface BaseCalendarProps {
+  className?: string;
+}
+
+type CalendarProps = ComponentProps<typeof CalendarRac> & BaseCalendarProps;
+type RangeCalendarProps = ComponentProps<typeof RangeCalendarRac> &
+  BaseCalendarProps;
+
+const CalendarHeader = () => (
+  <header className="pb-1 grid">
+    <div className="flex w-full items-center gap-1 ">
+      <ButtonRac
+        slot="previous"
+        className="flex size-9 items-center justify-center rounded-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:bg-accent hover:text-foreground focus:outline-none data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+      >
+        <ChevronLeftIcon strokeWidth={2} />
+      </ButtonRac>
+      <HeadingRac className="grow text-center text-sm font-medium" />
+      <ButtonRac
+        slot="next"
+        className="flex size-9 items-center justify-center rounded-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:bg-accent hover:text-foreground focus:outline-none  data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+      >
+        <ChevronRightIcon strokeWidth={2} />
+      </ButtonRac>
+    </div>
+  </header>
+);
+
+const CalendarGridComponent = ({ isRange = false }: { isRange?: boolean }) => {
+  const now = today(getLocalTimeZone());
+
+  return (
+    <CalendarGridRac>
+      <CalendarGridHeaderRac>
+        {(day) => (
+          <CalendarHeaderCellRac className="size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80">
+            {day}
+          </CalendarHeaderCellRac>
+        )}
+      </CalendarGridHeaderRac>
+      <CalendarGridBodyRac className="[&_td]:px-0">
+        {(date) => (
+          <CalendarCellRac
+            date={date}
+            className={cn(
+              "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg border border-transparent p-0 text-sm font-normal text-foreground outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow] focus:outline-none data-disabled:pointer-events-none data-unavailable:pointer-events-none data-focus-visible:z-10 data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-unavailable:line-through data-disabled:opacity-30 data-unavailable:opacity-30 data-focus-visible:outline-2 data-focus-visible:outline-ring/70",
+              // Range-specific styles
+              isRange &&
+                "data-selected:rounded-none data-selection-end:rounded-e-lg data-selection-start:rounded-s-lg data-invalid:bg-red-100 data-selected:bg-accent data-selected:text-foreground data-invalid:data-selection-end:[&:not([data-hover])]:bg-destructive data-invalid:data-selection-start:[&:not([data-hover])]:bg-destructive data-selection-end:[&:not([data-hover])]:bg-primary data-selection-start:[&:not([data-hover])]:bg-primary data-invalid:data-selection-end:[&:not([data-hover])]:text-destructive-foreground data-invalid:data-selection-start:[&:not([data-hover])]:text-destructive-foreground data-selection-end:[&:not([data-hover])]:text-primary-foreground data-selection-start:[&:not([data-hover])]:text-primary-foreground",
+              // Today indicator styles
+              date.compare(now) === 0 &&
+                cn(
+                  "after:pointer-events-none after:absolute after:bottom-1 after:start-1/2 after:z-10 after:size-[3px] after:-translate-x-1/2 after:rounded-full after:bg-primary",
+                  isRange
+                    ? "data-selection-end:[&:not([data-hover])]:after:bg-background data-selection-start:[&:not([data-hover])]:after:bg-background"
+                    : "data-selected:after:bg-background"
+                )
+            )}
+          />
+        )}
+      </CalendarGridBodyRac>
+    </CalendarGridRac>
+  );
+};
+
+const Calendar = ({ className, ...props }: CalendarProps) => (
+  <CalendarRac
+    {...props}
+    className={composeRenderProps(className, (className) =>
+      cn("w-fit", className)
+    )}
+  >
+    <CalendarHeader />
+    <CalendarGridComponent />
+  </CalendarRac>
+);
+
+const RangeCalendar = ({ className, ...props }: RangeCalendarProps) => (
+  <RangeCalendarRac
+    {...props}
+    className={composeRenderProps(className, (className) =>
+      cn("w-fit", className)
+    )}
+  >
+    <CalendarHeader />
+    <CalendarGridComponent isRange />
+  </RangeCalendarRac>
+);
+
+export { Calendar, RangeCalendar };

package/src/custom/date-picker/datefield-rac.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import {
+  DateFieldProps,
+  DateField as DateFieldRac,
+  DateInputProps as DateInputPropsRac,
+  DateInput as DateInputRac,
+  DateSegmentProps,
+  DateSegment as DateSegmentRac,
+  DateValue as DateValueRac,
+  TimeFieldProps,
+  TimeField as TimeFieldRac,
+  TimeValue as TimeValueRac,
+  composeRenderProps,
+} from "react-aria-components";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+const DateField = <T extends DateValueRac>({
+  className,
+  children,
+  ...props
+}: DateFieldProps<T>) => (
+  <DateFieldRac
+    className={composeRenderProps(className, (className) =>
+      cn("space-y-2", className)
+    )}
+    {...props}
+  >
+    {children}
+  </DateFieldRac>
+);
+
+const TimeField = <T extends TimeValueRac>({
+  className,
+  children,
+  ...props
+}: TimeFieldProps<T>) => (
+  <TimeFieldRac
+    className={composeRenderProps(className, (className) =>
+      cn("space-y-2", className)
+    )}
+    {...props}
+  >
+    {children}
+  </TimeFieldRac>
+);
+
+const DateSegment = ({ className, ...props }: DateSegmentProps) => (
+  <DateSegmentRac
+    className={composeRenderProps(className, (className) =>
+      cn(
+        "inline rounded p-0.5 text-foreground caret-transparent outline-0 data-disabled:cursor-not-allowed data-focused:bg-accent data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-focused:data-placeholder:text-foreground data-focused:text-foreground data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-focused:text-destructive-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-placeholder:text-muted-foreground/70 data-[type=literal]:text-muted-foreground/70 data-disabled:opacity-50",
+        className
+      )
+    )}
+    {...props}
+  />
+);
+
+const dateInputStyle =
+  "relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-[focus-within]:outline-none data-[focus-within]:ring-[3px] data-[focus-within]:ring-ring/20";
+
+interface DateInputProps extends DateInputPropsRac {
+  className?: string;
+  unstyled?: boolean;
+}
+
+const DateInput = ({
+  className,
+  unstyled = false,
+  ...props
+}: Omit<DateInputProps, "children">) => (
+  <DateInputRac
+    className={composeRenderProps(className, (className) =>
+      cn(!unstyled && dateInputStyle, className)
+    )}
+    {...props}
+  >
+    {(segment) => <DateSegment segment={segment} />}
+  </DateInputRac>
+);
+
+export { DateField, DateInput, DateSegment, TimeField, dateInputStyle };
+export type { DateInputProps };

package/src/custom/date-picker/index.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { CalendarIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  Button,
+  DatePicker as DefaultDatePicker,
+  DateRangePicker as DefaultDateRangePicker,
+  // Dialog,
+  Group,
+  Label,
+  // Popover,
+} from "react-aria-components";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { Calendar, RangeCalendar } from "./calendar-rac";
+import { DateInput, TimeField } from "./datefield-rac";
+import { DateRange } from "./types";
+import { createDate, createTime } from "./utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+
+// const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; DO NOT DELETE
+const offset = new Date().getTimezoneOffset() * 60 * 1000;
+
+export function DatePicker({
+  id,
+  label,
+  classNames,
+  onChange,
+  defaultValue,
+  disabled = false,
+  useTime = false,
+  showIcon = true,
+}: {
+  id: string;
+  label?: string;
+  disabled?: boolean;
+  classNames?: {
+    dateInput?: string;
+  };
+  showIcon?: boolean;
+  useTime?: boolean;
+  defaultValue?: Date;
+  onChange?: (date: Date) => void;
+}) {
+  const [dateValue, setDateValue] = useState(
+    createDate({ date: defaultValue, offset })
+  );
+  const [timeValue, setTimeValue] = useState(
+    createTime({ date: defaultValue, offset })
+  );
+  useEffect(() => {
+    if (!dateValue) return;
+    if (onChange) {
+      if (useTime && timeValue) {
+        onChange(
+          new Date(
+            dateValue.year,
+            dateValue.month - 1,
+            dateValue.day,
+            timeValue.hour,
+            timeValue.minute,
+            timeValue.second
+          )
+        );
+      } else {
+        const timeZone = localStorage.getItem("tenantTimeZone") || "UTC";
+
+        onChange(dateValue.toDate(timeZone));
+      }
+    }
+  }, [dateValue, timeValue, onChange, useTime]);
+
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <DefaultDatePicker
+      aria-label="x"
+      className="space-y-2"
+      isDisabled={disabled}
+      value={dateValue}
+      onChange={(date) => {
+        if (date) {
+          setDateValue(date);
+        }
+      }}
+    >
+      {label && (
+        <Label className="text-sm font-medium text-foreground">{label}</Label>
+      )}
+
+      <div className="flex">
+        <Group
+          className={cn(
+            "w-full flex border rounded-md h-9 pl-3 py-2 items-center gap-2 peer",
+            showIcon ? "pr-9" : "pr-3",
+            classNames?.dateInput
+          )}
+        >
+          <DateInput
+            unstyled
+            className="peer-focus:ring"
+            data-testid={`${id}_calendar_input_1`}
+          />
+          {useTime && (
+            <>
+              <Separator orientation="vertical" />
+              <TimeField
+                aria-label="Time"
+                value={timeValue}
+                className="h-max *:m-0"
+                onChange={(time) => {
+                  if (time) {
+                    setTimeValue(time);
+                  }
+                }}
+              >
+                <DateInput
+                  unstyled
+                  className="peer-focus:ring"
+                  data-testid={`${id}_calendar_input_2`}
+                />
+              </TimeField>
+            </>
+          )}
+        </Group>
+        <Popover
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          // placement="bottom end"
+        >
+          <PopoverTrigger asChild>
+            {showIcon && (
+              <Button
+                data-testid={`${id}_calendar_icon`}
+                className="z-10 -me-px -ms-9 flex w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:text-foreground focus-visible:outline-none data-focus-visible:outline-2 data-focus-visible:outline-ring/70 border-none"
+              >
+                <CalendarIcon size={16} strokeWidth={2} />
+              </Button>
+            )}
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="z-50 min-w-fit max-w-fit rounded-lg border border-border bg-background text-popover-foreground shadow-lg shadow-black/5 outline-none data-entering:animate-in data-exiting:animate-out data-entering:fade-in-0 data-exiting:fade-out-0 data-entering:zoom-in-95 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2"
+          >
+            {/* <Dialog className="max-h-[inherit] overflow-auto p-2"> */}
+            <Calendar onChange={() => setIsOpen(false)} />
+            {/* </Dialog> */}
+          </PopoverContent>
+        </Popover>
+      </div>
+    </DefaultDatePicker>
+  );
+}
+
+export function DateRangePicker({
+  id,
+  label,
+  classNames,
+  onChange,
+  defaultValues,
+  disabled = false,
+  showIcon = true,
+}: {
+  id: string;
+  label?: string;
+  disabled?: boolean;
+  classNames?: {
+    dateInput?: string;
+  };
+  showIcon?: boolean;
+  defaultValues?: DateRange;
+  onChange?: (date: DateRange) => void;
+}) {
+  const [dateValue, setDateValue] = useState({
+    start: createDate({ date: defaultValues?.start, offset }),
+    end: createDate({ date: defaultValues?.end, offset }),
+  });
+  useEffect(() => {
+    if (!dateValue) return;
+    if (onChange) {
+      const { start } = dateValue;
+      const { end } = dateValue;
+      onChange({
+        start:
+          (start &&
+            start.year &&
+            start.month &&
+            start.day &&
+            new Date(start.year, start.month - 1, start.day)) ||
+          undefined,
+        end:
+          (end &&
+            end.year &&
+            end.month &&
+            end.day &&
+            new Date(end.year, end.month - 1, end.day)) ||
+          undefined,
+      });
+    }
+  }, [dateValue]);
+  return (
+    <DefaultDateRangePicker
+      aria-label="x"
+      startName="start"
+      endName="end"
+      className="space-y-2"
+      isDisabled={disabled}
+      value={
+        dateValue.start &&
+        dateValue.end && {
+          start: dateValue.start,
+          end: dateValue.end,
+        }
+      }
+      onChange={(date) => {
+        if (date) {
+          setDateValue(date);
+        }
+      }}
+    >
+      {label && (
+        <Label className="text-sm font-medium text-foreground">{label}</Label>
+      )}
+      <div className="flex">
+        <Group
+          className={cn(
+            "w-full min-w-fit flex border rounded-md h-9 pl-3 py-2 items-center gap-2 peer",
+            showIcon ? "pr-9" : "pr-3",
+            classNames?.dateInput
+          )}
+        >
+          <DateInput
+            unstyled
+            className="peer-focus:ring"
+            slot="start"
+            data-testid={`${id}_calendar_input_2`}
+          />
+          <Separator orientation="vertical" />
+          <DateInput
+            unstyled
+            className="peer-focus:ring"
+            slot="end"
+            data-testid={`${id}_calendar_input_2`}
+          />
+        </Group>
+        <Popover>
+          <PopoverTrigger asChild>
+            {showIcon && (
+              <Button
+                data-testid={`${id}_calendar_icon`}
+                className="z-10 -me-px -ms-9 flex w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:text-foreground focus-visible:outline-none data-focus-visible:outline-2 data-focus-visible:outline-ring/70 border-none"
+              >
+                <CalendarIcon size={16} strokeWidth={2} />
+              </Button>
+            )}
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="z-50 rounded-lg border border-border bg-background text-popover-foreground shadow-lg shadow-black/5 outline-none data-entering:animate-in data-exiting:animate-out data-entering:fade-in-0 data-exiting:fade-out-0 data-entering:zoom-in-95 data-exiting:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2"
+          >
+            {/* <Dialog className="max-h-[inherit] overflow-auto p-2"> */}
+            <RangeCalendar />
+            {/* </Dialog> */}
+          </PopoverContent>
+        </Popover>
+      </div>
+    </DefaultDateRangePicker>
+  );
+}

package/src/custom/date-picker/types/index.ts

@@ -0,0 +1,4 @@
+export type DateRange = {
+  start: Date | undefined;
+  end: Date | undefined;
+};