@cleen/ui 0.1.0

package/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,224 @@
+import { IconChevronDown } from '@/components/cleenIcon';
+import { InfoLabels } from '@/components/infoLabels';
+import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
+import { cn, useOutsideClick, usePositionClose } from '@cleen/ui-core';
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+export type DropdownProps = Omit<ComponentProps<'div'>, 'title'> & {
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  disabled?: boolean;
+  title?: ReactNode;
+  label?: ReactNode;
+  fullWidth?: boolean;
+  fullWidthDropdown?: boolean;
+  offset?: number;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  keepOpenOnClickContent?: boolean;
+  infoLabels?: InfoLabelsProps;
+  classNames?: {
+    container?: string;
+    label?: string;
+    title?: string;
+    trigger?: string;
+    dropdown?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    label?: CSSProperties;
+    title?: CSSProperties;
+    trigger?: CSSProperties;
+    dropdown?: CSSProperties;
+  };
+};
+
+/**
+ * The `Dropdown` component is a button that when clicked, displays a custom dropdown container beneath it.
+ * It can be used to trigger actions or display a menu with custom content.
+ */
+export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  function Dropdown(
+    {
+      type = 'button',
+      label,
+      title,
+      disabled = false,
+      leftIcon,
+      rightIcon,
+      fullWidth = true,
+      fullWidthDropdown,
+      offset = 4,
+      isOpen,
+      onOpenChange,
+      keepOpenOnClickContent = true,
+      infoLabels,
+      className,
+      classNames,
+      style,
+      styles,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const isCurrentOpen = isOpen !== undefined ? isOpen : internalIsOpen;
+
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    // Calculate optimal position for the dropdown
+    const { positionStyles, isMounted } = usePositionClose({
+      triggerRef,
+      targetRef: dropdownRef,
+      position: 'bottom-left',
+      isOpen: isCurrentOpen,
+      offset,
+    });
+
+    // Handle click outside to close dropdown
+    useOutsideClick({
+      refs: [dropdownRef, triggerRef],
+      handler: () => {
+        setInternalIsOpen(false);
+        onOpenChange?.(false);
+      },
+      enabled: isCurrentOpen,
+    });
+
+    // Handle escape key
+    useEffect(() => {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape' && isCurrentOpen) {
+          setInternalIsOpen(false);
+          onOpenChange?.(false);
+        }
+      };
+
+      document.addEventListener('keydown', handleEscape);
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }, [isCurrentOpen, onOpenChange]);
+
+    const handleTriggerClick = () => {
+      const newState = !isCurrentOpen;
+      if (isOpen === undefined) {
+        setInternalIsOpen(newState);
+      }
+      onOpenChange?.(newState);
+    };
+
+    const handleDropdownClick = () => {
+      if (!keepOpenOnClickContent) {
+        const newState = false;
+        if (isOpen === undefined) {
+          setInternalIsOpen(newState);
+        }
+        onOpenChange?.(newState);
+      }
+    };
+
+    return (
+      <div
+        className={cn('cleen', className)}
+        style={style}
+        ref={ref}
+        {...props}
+      >
+        {title && (
+          <label
+            className={cn(
+              'cleen-block cleen-mb-1.5 cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
+              classNames?.title
+            )}
+            style={styles?.title}
+          >
+            {title}
+          </label>
+        )}
+
+        <div
+          className={cn(
+            'cleen-inline-block cleen-relative',
+            fullWidth && 'cleen-w-full'
+          )}
+          ref={triggerRef}
+        >
+          <button
+            type={type}
+            className={cn(
+              'cleen-flex cleen-justify-between cleen-items-center cleen-gap-2 cleen-bg-background cleen-shadow-sm cleen-my-auto cleen-px-3.5 cleen-py-2.5 cleen-border cleen-border-gray/10 cleen-rounded-md cleen-w-full cleen-text-gray/80 cleen-text-base cleen-transition-colors cleen-duration-200 hover:cleen-bg-gray/5 hover:cleen-border-gray/20',
+              {
+                'cleen-w-full cleen-flex-1': fullWidth,
+                'cleen-opacity-50 cleen-cursor-not-allowed cleen-pointer-events-none':
+                  disabled,
+              },
+              fullWidth && 'cleen-w-full',
+              classNames?.trigger
+            )}
+            style={styles?.trigger}
+            disabled={disabled}
+            onClick={handleTriggerClick}
+          >
+            {leftIcon}
+            <div
+              className={cn('cleen-flex-1 cleen-text-left', classNames?.label)}
+              style={styles?.label}
+            >
+              {label}
+            </div>
+            {rightIcon || <IconChevronDown />}
+          </button>
+        </div>
+
+        {(infoLabels?.errorMessage ||
+          infoLabels?.infoMessage ||
+          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
+
+        {children &&
+          isCurrentOpen &&
+          createPortal(
+            <div className="cleen">
+              <div
+                ref={dropdownRef}
+                className={cn(
+                  'cleen-bg-background cleen-shadow-md cleen-p-2.5 cleen-border cleen-border-gray/10 cleen-rounded-lg',
+                  'cleen-fixed cleen-z-50',
+                  {
+                    'cleen-opacity-0': !isMounted,
+                  },
+                  classNames?.dropdown
+                )}
+                style={{
+                  top: `${positionStyles.top}px`,
+                  left: `${positionStyles.left}px`,
+                  minWidth:
+                    fullWidthDropdown && triggerRef.current?.offsetWidth
+                      ? `${triggerRef.current.offsetWidth}px`
+                      : undefined,
+                  ...styles?.dropdown,
+                }}
+                onClick={handleDropdownClick}
+              >
+                {children}
+              </div>
+            </div>,
+            document.body
+          )}
+      </div>
+    );
+  }
+);

package/src/components/dropdown/index.ts

@@ -0,0 +1 @@
+export { Dropdown, type DropdownProps } from './Dropdown';

package/src/components/filterDrawer/FilterDrawer.tsx

@@ -0,0 +1,147 @@
+import { Button } from '@/components/button';
+import { IconTrash } from '@/components/cleenIcon';
+import { Drawer } from '@/components/drawer';
+import { FilterDrawerFooter } from '@/components/filterDrawer/blocks/FilterDrawerFooter';
+import { SavedFiltersDropdown } from '@/components/filterDrawer/blocks/SavedFiltersDropdown';
+import { SaveFilterStep } from '@/components/filterDrawer/blocks/SaveFilterStep';
+import { DEFAULT_FILTER_DRAWER_LABELS } from '@/components/filterDrawer/constants/labels';
+import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
+import { FilterDrawerProvider } from '@/components/filterDrawer/context/provider';
+import { applyDefaults, cn } from '@cleen/ui-core';
+import { forwardRef, useContext } from 'react';
+import type { FilterDrawerProps } from './types/props';
+
+/**
+ * A right-anchored slide-over panel (drawer) specialized for filter interfaces.
+ *
+ * Features:
+ * - Standard drawer functionality (open/close, overlay, customizable sections)
+ * - Pre-configured footer with Save, Cancel and Apply actions
+ * - Clear filters button in header
+ * - Customizable labels for all buttons
+ * - Accepts all standard Drawer props plus filter-specific callbacks
+ */
+export const FilterDrawer = forwardRef<HTMLDivElement, FilterDrawerProps>(
+  function FilterDrawer(
+    {
+      selectedSavedFilter,
+      savedFilters,
+      isFiltersFetching,
+      children,
+      classNames,
+      styles,
+      labels,
+      withSavedFilters = true,
+      onClear,
+      onSave,
+      onCancel,
+      onApply,
+      onClose,
+      filterDateFormatter,
+      onFilterCategoryChange,
+      onFilterDelete,
+      onFilterPin,
+      onFilterSelect,
+      onFilterUnpin,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <FilterDrawerProvider
+        value={{
+          selectedSavedFilter,
+          savedFilters,
+          isFiltersFetching,
+          classNames,
+          styles,
+          labels: applyDefaults(DEFAULT_FILTER_DRAWER_LABELS, labels),
+          withSavedFilters,
+          onClear,
+          onSave,
+          onCancel,
+          onApply,
+          onClose,
+          filterDateFormatter,
+          onFilterCategoryChange,
+          onFilterDelete,
+          onFilterPin,
+          onFilterSelect,
+          onFilterUnpin,
+        }}
+      >
+        <FilterDrawerInternal {...props} ref={ref}>
+          {children}
+        </FilterDrawerInternal>
+      </FilterDrawerProvider>
+    );
+  }
+);
+
+const FilterDrawerInternal = forwardRef<HTMLDivElement, FilterDrawerProps>(
+  function FilterDrawerInternal({ children, ...props }, ref) {
+    const {
+      handleCloseSaveFilter,
+      isSaveFiltersStep,
+      selectedSavedFilter,
+      savedFilters,
+      isFiltersFetching,
+      classNames,
+      styles,
+      labels,
+      withSavedFilters = true,
+      onClear,
+      onFilterCategoryChange,
+      onFilterSelect,
+    } = useContext(FilterDrawerContext);
+
+    return (
+      <Drawer
+        footer={<FilterDrawerFooter />}
+        headerCloseBtn={
+          <Button
+            onClick={() => {
+              onClear?.();
+              onFilterSelect?.(undefined);
+            }}
+            leftIcon={<IconTrash />}
+            variant="secondary"
+            {...classNames?.clearBtn}
+            {...styles?.clearBtn}
+          >
+            {labels?.clear}
+          </Button>
+        }
+        classNames={{
+          ...classNames,
+          content: cn('cleen-space-y-4', classNames?.content),
+          footer: cn('cleen-justify-between', classNames?.footer),
+        }}
+        onClose={handleCloseSaveFilter}
+        ref={ref}
+        {...props}
+        title={isSaveFiltersStep ? labels?.saveStep?.title : props.title}
+        subtitle={
+          isSaveFiltersStep ? labels?.saveStep?.subtitle : props.subtitle
+        }
+      >
+        {isSaveFiltersStep ? (
+          <SaveFilterStep />
+        ) : (
+          <>
+            {withSavedFilters && (
+              <SavedFiltersDropdown
+                filters={savedFilters}
+                selectedSavedFilter={selectedSavedFilter}
+                onFilterCategoryChange={onFilterCategoryChange}
+                isFiltersFetching={isFiltersFetching}
+              />
+            )}
+
+            {children}
+          </>
+        )}
+      </Drawer>
+    );
+  }
+);

package/src/components/filterDrawer/blocks/FilterDrawerFooter.tsx

@@ -0,0 +1,119 @@
+import { Button } from '@/components/button';
+import { DEFAULT_NEW_FILTER } from '@/components/filterDrawer/constants/filter';
+import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
+import { cn } from '@cleen/ui-core';
+import { useContext, useState } from 'react';
+
+const TITLE_THRESHOLD = {
+  min: 3,
+  max: 50,
+};
+
+export const FilterDrawerFooter = () => {
+  const {
+    isSaveFiltersStep,
+    saveStepValues,
+    setSaveStepValues,
+    setIsSaveFiltersStep,
+    handleCloseSaveFilter,
+    setError,
+    onSave,
+    classNames,
+    styles,
+    labels,
+    withSavedFilters = true,
+    onCancel,
+    onApply,
+  } = useContext(FilterDrawerContext);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleSave = async () => {
+    try {
+      if (saveStepValues.filterName.length < TITLE_THRESHOLD.min) {
+        setError?.('filterName', labels?.saveStep?.validation?.tooShort);
+        return;
+      }
+
+      if (saveStepValues.filterName.length > TITLE_THRESHOLD.max) {
+        setError?.('filterName', labels?.saveStep?.validation?.tooLong);
+        return;
+      }
+
+      setIsSaving(true);
+      await onSave?.(saveStepValues);
+      setIsSaveFiltersStep(false);
+    } catch (e) {
+      console.error('Error saving filters:', e);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return isSaveFiltersStep ? (
+    <div className="cleen-flex cleen-flex-1 cleen-justify-end cleen-gap-3">
+      <Button
+        onClick={() => setIsSaveFiltersStep(false)}
+        variant="secondary"
+        {...classNames?.saveFilter?.backBtn}
+        {...styles?.saveFilter?.backBtn}
+      >
+        {labels?.saveStep?.back}
+      </Button>
+
+      <Button
+        onClick={handleSave}
+        isLoading={isSaving}
+        loaderColor="rgb(var(--cleen-white))"
+        {...classNames?.saveFilter?.saveBtn}
+        {...styles?.saveFilter?.saveBtn}
+      >
+        {labels?.saveStep?.save}
+      </Button>
+    </div>
+  ) : (
+    <>
+      {withSavedFilters && (
+        <Button
+          onClick={() => {
+            setSaveStepValues(DEFAULT_NEW_FILTER);
+            setIsSaveFiltersStep(true);
+          }}
+          variant="borderless-blue"
+          {...classNames?.saveBtn}
+          {...styles?.saveBtn}
+        >
+          {labels?.save}
+        </Button>
+      )}
+
+      <div
+        className={cn('cleen-flex cleen-items-center cleen-gap-3', {
+          'cleen-flex-1 cleen-justify-end': !withSavedFilters,
+        })}
+      >
+        <Button
+          onClick={() => {
+            onCancel?.();
+            handleCloseSaveFilter();
+          }}
+          variant="secondary"
+          {...classNames?.cancelBtn}
+          {...styles?.cancelBtn}
+        >
+          {labels?.cancel}
+        </Button>
+
+        <Button
+          onClick={() => {
+            onApply?.();
+            handleCloseSaveFilter();
+          }}
+          {...classNames?.applyBtn}
+          {...styles?.applyBtn}
+        >
+          {labels?.apply}
+        </Button>
+      </div>
+    </>
+  );
+};

package/src/components/filterDrawer/blocks/SaveFilterStep.tsx

@@ -0,0 +1,56 @@
+import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
+import { Input } from '@/components/input';
+import { Switch } from '@/components/switch';
+import { useContext } from 'react';
+
+export const SaveFilterStep = () => {
+  const {
+    classNames,
+    styles,
+    labels,
+    saveStepValues,
+    setSaveStepValues,
+    errors,
+    clearError,
+  } = useContext(FilterDrawerContext);
+
+  return (
+    <>
+      <Input
+        value={saveStepValues.filterName}
+        onChange={e => {
+          setSaveStepValues(prev => ({
+            ...prev,
+            filterName: e.target.value,
+          }));
+
+          if (errors?.filterName) {
+            clearError?.('filterName');
+          }
+        }}
+        label={labels?.saveStep?.filterNameInput?.label}
+        placeholder={labels?.saveStep?.filterNameInput?.placeholder}
+        infoLabels={{
+          errorMessage: errors?.filterName,
+        }}
+        {...classNames?.saveFilter?.filterName}
+        {...styles?.saveFilter?.filterName}
+      />
+
+      <Switch
+        checked={saveStepValues.exposed}
+        onChange={checked =>
+          setSaveStepValues(prev => ({
+            ...prev,
+            exposed: checked,
+          }))
+        }
+        title={labels?.saveStep?.exposureSwitch?.title}
+        label={labels?.saveStep?.exposureSwitch?.label}
+        sublabel={labels?.saveStep?.exposureSwitch?.sublabel}
+        {...classNames?.saveFilter?.exposure}
+        {...styles?.saveFilter?.exposure}
+      />
+    </>
+  );
+};