@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/src_old/Combobox/Combobox.tsx

@@ -0,0 +1,256 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { LoadingMask } from '../LoadingMask';
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover';
+import { Button } from '../Button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../Command';
+import { cn } from '@oneplatformdev/utils';
+import { useDebounceCallback } from '@oneplatformdev/hooks';
+import { ChevronsUpDown, X } from 'lucide-react';
+import {
+  ComboboxCallbackStateParams,
+  ComboboxOption,
+  ComboboxProps,
+} from './Combobox.types';
+import { ComboboxOptions } from './ComboboxOptions'; // TODO: refactor next component | nlt code
+
+// TODO: refactor next component | nlt code
+export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
+  (props, ref) => {
+    const {
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      searchLabel = 'Type to search...',
+      fetchOptions,
+      options: itemOptions,
+      emptyLabel = 'No options',
+      emptyAction,
+      commandInputAction,
+      listHeadAction,
+      onMount,
+    } = props;
+    const isMounted = useRef(false);
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [options, setOptions] = useState<ComboboxOption[]>([]);
+    const [selectedOption, setSelectedOption] = useState<ComboboxOption>();
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+      itemOptions?.length && setOptions(itemOptions);
+    }, [itemOptions]);
+
+    const handlePopoverOpen = async () => {
+      if (!open) {
+        getData();
+        setSearchTerm('');
+      }
+    };
+
+    const getData = useCallback(async (search?: string) => {
+      setLoading(true);
+      try {
+        const fetchedOptions = await fetchOptions(search);
+        setOptions(fetchedOptions);
+      } catch (error) {
+        console.error('Unexpected error while get option:', error);
+      } finally {
+        setLoading(false);
+      }
+    }, []);
+
+    const debouncedGetData = useDebounceCallback(getData, 1000, {
+      leading: false,
+      trailing: true,
+    });
+
+    const handleSearchChange = useCallback((value: string) => {
+      setLoading(true);
+      setSearchTerm(value);
+      debouncedGetData(value);
+    }, []);
+
+    const onChangeOption = useCallback((option: ComboboxOption) => {
+      onChange(option.value);
+      setSelectedOption(option);
+      setLoading(false);
+    }, []);
+
+    const handleClearSelection = useCallback(() => {
+      onChangeOption({ value: '', label: '' });
+      setSelectedOption(undefined);
+      setLoading(false);
+    }, []);
+
+    const isSearchedEmptyList = useMemo(() => {
+      return Boolean(searchTerm) && !options.length && !loading;
+    }, [loading, options.length, searchTerm])
+
+    const isEmptyList = useMemo(() => {
+      return !options.length && !loading;
+    }, [loading, options.length, searchTerm])
+
+    const comboboxCallbackStateParams =
+      useMemo((): ComboboxCallbackStateParams => {
+        return {
+          options,
+          setOptions,
+          selectedOption,
+          setSelectedOption,
+          search: searchTerm || '',
+          setSearch: setSearchTerm,
+          open,
+          setOpen,
+          loading,
+          setLoading,
+          isEmptyList,
+          isSearchedEmptyList,
+        };
+      }, [loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList]);
+
+    const runOnMount = useCallback(() => {
+      if (!onMount) {
+        isMounted.current = true;
+        return;
+      }
+      onMount(comboboxCallbackStateParams).finally(() => {
+        isMounted.current = true;
+      });
+    }, [comboboxCallbackStateParams, onMount]);
+
+    useLayoutEffect(() => {
+      runOnMount();
+      return () => {
+        isMounted.current = false;
+      };
+    }, []);
+
+    return (
+      <div className="w-full" ref={ref}>
+        <Popover
+          open={open}
+          onOpenChange={(newOpen) => {
+            setOpen(newOpen);
+            if (newOpen) handlePopoverOpen();
+          }}
+        >
+          <PopoverTrigger asChild className="border-input">
+            <Button
+              variant="outline"
+              role="combobox"
+              size="lg"
+              aria-expanded={open}
+              className={cn(
+                'w-full justify-between font-normal text-sm bg-transparent relative p-3',
+                'border border-border',
+                open && 'border-2 outline-hidden ring-1 ring-ring',
+                'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring'
+              )}
+              disabled={disabled}
+            >
+              <span className="truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap">
+                {value ? (
+                  options.find((option) => option.value === value)?.label ||
+                  selectedOption?.label
+                ) : (
+                  <span className="text-gray-400">{placeholder}</span>
+                )}
+              </span>
+              {value ? (
+                <div
+                  className={cn(
+                    'absolute top-0 right-1',
+                    'flex items-center justify-center',
+                    'w-9 aspect-square [&_svg]:size-5',
+                    'opacity-50 cursor-pointer hover:opacity-100'
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClearSelection();
+                  }}
+                >
+                  <X />
+                </div>
+              ) : (
+                <ChevronsUpDown className="opacity-50 w-4 h-4" />
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-(--radix-popper-anchor-width) max-w-none p-0"
+            align="start"
+          >
+            <Command shouldFilter={false}>
+              <CommandInput
+                placeholder={searchLabel}
+                value={searchTerm}
+                onValueChange={handleSearchChange}
+              />
+              {typeof commandInputAction === 'function'
+                ? commandInputAction(comboboxCallbackStateParams)
+                : commandInputAction}
+              <CommandList>
+                <CommandGroup
+                  className={cn(!options.length && 'p-0 shadow-none')}
+                >
+                  {loading && <LoadingMask fullWidth />}
+                  {!loading && Boolean(searchTerm) && (
+                    <>
+                      {emptyAction ? (
+                        <CommandEmpty className="flex flex-col gap-3 py-5 px-3 items-center">
+                          <span>{emptyLabel}</span>
+                          {typeof emptyAction === 'function'
+                            ? emptyAction(comboboxCallbackStateParams)
+                            : emptyAction}
+                        </CommandEmpty>
+                      ) : (
+                        <CommandEmpty>{emptyLabel}</CommandEmpty>
+                      )}
+                    </>
+                  )}
+                  {!loading && (
+                    <>
+                      {Boolean(options.length) && listHeadAction && (
+                        <CommandItem
+                          key='combobox-list-head-action'
+                          asChild
+                          className='w-full'
+                        >
+                          {typeof listHeadAction === 'function'
+                            ? listHeadAction(comboboxCallbackStateParams)
+                            : listHeadAction}
+                        </CommandItem>
+                      )}
+                      <ComboboxOptions
+                        value={value}
+                        options={options}
+                        onChangeOption={onChangeOption}
+                        setOpen={setOpen}
+                      />
+                    </>
+                  )}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  }
+);

package/src_old/Combobox/Combobox.types.ts

@@ -0,0 +1,55 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  items?: ComboboxOption[];
+}
+
+export interface ComboboxCallbackStateParams {
+  options: ComboboxOption[];
+  setOptions:  Dispatch<SetStateAction<ComboboxOption[]>>
+  selectedOption?: ComboboxOption;
+  setSelectedOption:  Dispatch<SetStateAction<ComboboxOption | undefined>>
+  search: string;
+  setSearch:  Dispatch<SetStateAction<string>>
+  open: boolean,
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  loading: boolean;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+  isEmptyList: boolean;
+  isSearchedEmptyList: boolean;
+}
+
+export interface IComboboxOptionsNodeProps {
+  value?: string;
+  option: ComboboxOption;
+  onChangeOption?: (option: ComboboxOption) => void;
+  deep?: number;
+  setOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export interface IComboboxOptionsProps
+  extends Omit<IComboboxOptionsNodeProps, 'option'> {
+  options?: ComboboxOption[];
+}
+
+export interface ComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchLabel?: string;
+  disabled?: boolean;
+  fetchOptions: (search?: string) => Promise<ComboboxOption[]>;
+  options?: ComboboxOption[];
+  /** Command Empty list label*/
+  emptyLabel?: string;
+  /** Command Empty list action */
+  emptyAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+  /** Command Input footer action */
+  commandInputAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+  /** Command List first element action */
+  listHeadAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+  /** Callback for load data on start component */
+  onMount?: (params: ComboboxCallbackStateParams) => Promise<void>;
+}

package/src_old/Combobox/ComboboxOptionItem.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { CommandItem, IComboboxOptionsNodeProps } from '@oneplatformdev/ui';
+import { Check } from 'lucide-react';
+import { cn } from '@oneplatformdev/utils';
+
+const DEEP_OFFSET = 8;
+
+export const ComboboxOptionItem = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<IComboboxOptionsNodeProps>
+>((props, ref) => {
+  const { children, setOpen, option, onChangeOption, value = '', deep = 0 } = props;
+  return (
+    <CommandItem
+      ref={ref}
+      key={option.value}
+      value={option.value}
+      onSelect={() => {
+        if (value === option.value) {
+          onChangeOption?.({ value: '', label: '' });
+        } else {
+          onChangeOption?.(option);
+        }
+        setOpen(false);
+      }}
+      style={{
+        paddingLeft: (deep + 1) * DEEP_OFFSET,
+      }}
+    >
+      {children}
+      <span
+        className={cn(
+          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2'
+        )}
+      >
+        {option.label}
+      </span>
+      <Check
+        className={cn(
+          'ml-auto',
+          value === option.value ? 'opacity-100' : 'opacity-0'
+        )}
+      />
+    </CommandItem>
+  );
+});

package/src_old/Combobox/ComboboxOptions.tsx

@@ -0,0 +1,90 @@
+import {
+  IComboboxOptionsNodeProps,
+  IComboboxOptionsProps,
+} from './Combobox.types';
+import { Button } from '../Button';
+import { forwardRef, useState } from 'react';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../Collapsible';
+import { ComboboxOptionItem } from './ComboboxOptionItem';
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '@oneplatformdev/utils';
+
+export const ComboboxOptionsNode = forwardRef<
+  HTMLDivElement,
+  IComboboxOptionsNodeProps
+>((props, ref) => {
+  const { option, deep = 0 } = props;
+
+  const [open, onOpenChange] = useState(true);
+
+  if (!option?.items?.length) {
+    return <ComboboxOptionItem {...props} ref={ref} />;
+  }
+  return (
+    <Collapsible
+      ref={ref}
+      open={open}
+      onOpenChange={onOpenChange}
+      data-opened={open}
+      className={cn('group/collapsible')}
+    >
+      <ComboboxOptionItem {...props}>
+        <CollapsibleTrigger asChild>
+          <Button
+            onClick={(e) => {
+              e?.preventDefault();
+              e?.stopPropagation();
+              onOpenChange((prev) => !prev);
+            }}
+            type="button"
+            variant="ghost"
+            size="sm"
+            className={cn('aspect-square size-6', 'transition-transform')}
+          >
+            <ChevronDownIcon
+              className={cn(
+                'size-5!',
+                'transition-transform',
+                open && 'rotate-180'
+              )}
+            />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </ComboboxOptionItem>
+
+      <CollapsibleContent>
+        <div className="flex flex-col gap-0">
+          {option?.items.map((opt) => {
+            return (
+              <ComboboxOptionsNode
+                key={opt.value}
+                {...props}
+                deep={deep + 1}
+                option={opt}
+              />
+            );
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+});
+
+export const ComboboxOptions = forwardRef<
+  HTMLDivElement,
+  IComboboxOptionsProps
+>((props, ref) => {
+  const { options = [], ...rest } = props;
+  return (
+    <div ref={ref} className="flex flex-col gap-0">
+      {options.map((option) => (
+        <ComboboxOptionsNode key={option.value} {...rest} option={option} />
+      ))}
+    </div>
+  );
+});

package/src_old/Combobox/index.tsx

@@ -0,0 +1,2 @@
+export * from './Combobox'
+export type * from './Combobox.types'

package/src_old/Command/Command.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@oneplatformdev/utils';
+import { Dialog, DialogContent } from '../Dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex gap-2 select-none items-center rounded-sm",
+      'min-h-8 px-2 py-1',
+      '[&>span]:py-1',
+      'text-sm text-[#666A78] font-medium leading-[1.12]',
+      'data-[selected=true]:bg-accent',
+      'data-[selected=true]:text-[#191F35] hover:text-[#191F35]',
+      'outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'cursor-pointer',
+      className
+    )}
+    {...props}
+  />
+))
+
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

package/src_old/Command/index.ts

@@ -0,0 +1 @@
+export * from './Command';