@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/src_old/Combobox/Combobox.tsx

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

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

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

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

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

package/src_old/Command/Command.tsx

@@ -1,161 +0,0 @@
-'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

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