@cleen/ui 0.1.0 → 0.1.1

package/src/components/filterDrawer/types/props.ts

@@ -1,107 +0,0 @@
-import type { ButtonProps } from '@/components/button/Button';
-import type { DrawerProps } from '@/components/drawer/Drawer';
-import type { DropdownProps } from '@/components/dropdown/Dropdown';
-import type {
-  FilterDrawerFilterCategories,
-  FilterDrawerNewFilter,
-  FilterDrawerSavedFilter,
-} from '@/components/filterDrawer/types/filters';
-import type { InputProps } from '@/components/input/Input';
-import type { SwitchProps } from '@/components/switch/Switch';
-import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
-import type { ReactNode } from 'react';
-
-export interface FilterDrawerLabels {
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  save?: ReactNode;
-  apply?: ReactNode;
-  cancel?: ReactNode;
-  clear?: ReactNode;
-  saveStep?: {
-    title?: ReactNode;
-    subtitle?: ReactNode;
-    back?: ReactNode;
-    save?: ReactNode;
-    filterNameInput?: {
-      label?: ReactNode;
-      placeholder?: string;
-    };
-    exposureSwitch?: {
-      title?: ReactNode;
-      label?: ReactNode;
-      sublabel?: ReactNode;
-    };
-    validation?: {
-      tooShort?: ReactNode;
-      tooLong?: ReactNode;
-    };
-  };
-  savedFilters?: {
-    label?: ReactNode;
-    noFilters?: ReactNode;
-    filter?: {
-      delete?: ReactNode;
-      cancelDelete?: ReactNode;
-      pin?: string;
-      unpin?: string;
-    };
-    tabs?: {
-      all?: ReactNode;
-      mine?: ReactNode;
-      shared?: ReactNode;
-      featured?: ReactNode;
-      pinned?: ReactNode;
-    };
-  };
-}
-
-export type FilterDrawerStandaloneProps = {
-  selectedSavedFilter?: FilterDrawerSavedFilter;
-  savedFilters?: FilterDrawerSavedFilter[];
-  isFiltersFetching?: boolean;
-  labels?: FilterDrawerLabels;
-  withSavedFilters?: boolean;
-  activeFiltersCount?: number;
-  onClear?: () => void;
-  onSave?: (newFilter: FilterDrawerNewFilter) => Promise<void>;
-  onCancel?: () => void;
-  onApply?: () => void;
-  onClose?: () => void;
-  filterDateFormatter?: (date: string) => string;
-  onFilterCategoryChange?: (
-    categories: FilterDrawerFilterCategories
-  ) => Promise<void>;
-  onFilterDelete?: (filterID: number) => Promise<void>;
-  onFilterPin?: (filterID: number) => Promise<void>;
-  onFilterUnpin?: (filterID: number) => Promise<void>;
-  onFilterSelect?: (filter: FilterDrawerSavedFilter | undefined) => void;
-  classNames?: DrawerProps['classNames'] & {
-    dropdown?: ComponentClassnames<DropdownProps>;
-    clearBtn?: ComponentClassnames<ButtonProps>;
-    cancelBtn?: ComponentClassnames<ButtonProps>;
-    applyBtn?: ComponentClassnames<ButtonProps>;
-    saveBtn?: ComponentClassnames<ButtonProps>;
-    saveFilter?: {
-      filterName?: ComponentClassnames<InputProps>;
-      exposure?: ComponentClassnames<SwitchProps>;
-      backBtn?: ComponentClassnames<ButtonProps>;
-      saveBtn?: ComponentClassnames<ButtonProps>;
-    };
-  };
-  styles?: DrawerProps['styles'] & {
-    dropdown?: ComponentStyles<DropdownProps>;
-    clearBtn?: ComponentStyles<ButtonProps>;
-    cancelBtn?: ComponentStyles<ButtonProps>;
-    applyBtn?: ComponentStyles<ButtonProps>;
-    saveBtn?: ComponentStyles<ButtonProps>;
-    saveFilter?: {
-      filterName?: ComponentStyles<InputProps>;
-      exposure?: ComponentStyles<SwitchProps>;
-      backBtn?: ComponentStyles<ButtonProps>;
-      saveBtn?: ComponentStyles<ButtonProps>;
-    };
-  };
-};
-
-export type FilterDrawerProps = DrawerProps & FilterDrawerStandaloneProps;

package/src/components/filterDrawer/types/validation.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-
-export type SaveFilterStepValidation = Partial<{
-  filterName: ReactNode;
-  exposed: ReactNode;
-}>;

package/src/components/formGroup/FormGroup.tsx

@@ -1,165 +0,0 @@
-import { IconQuestionCircle } from '@/components/cleenIcon';
-import { Tooltip, type TooltipProps } from '@/components/tooltip/Tooltip';
-import {
-  cn,
-  type ComponentClassnames,
-  type ComponentStyles,
-} from '@cleen/ui-core';
-import type {
-  CSSProperties,
-  ComponentProps,
-  ForwardedRef,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
-
-export interface FormGroupProps extends ComponentProps<'div'> {
-  title: string;
-  subtitle?: string;
-  required?: boolean;
-  requiredMark?: ReactNode;
-  tooltipDescription?: string;
-  children?: ReactNode;
-  classNames?: {
-    container?: string;
-    titleColumn?: string;
-    controlsRow?: string;
-    requiredMark?: string;
-    tooltip?: ComponentClassnames<TooltipProps>;
-    questionIcon?: string;
-    title?: string;
-    subtitle?: string;
-  };
-  styles?: {
-    container?: CSSProperties;
-    titleColumn?: CSSProperties;
-    controlsRow?: CSSProperties;
-    requiredMark?: CSSProperties;
-    tooltip?: ComponentStyles<TooltipProps>;
-    questionIcon?: CSSProperties;
-    title?: CSSProperties;
-    subtitle?: CSSProperties;
-  };
-}
-
-/**
- * The `FormGroup` component is a layout row that pairs a labelled title column with a controls column.
- *
- * - The `title` is required. Add a `subtitle` for secondary context beneath it.
- * - Set `required` to show a required mark beside the title (defaults to `"*"`, customisable via `requiredMark`).
- * - Pass a `tooltipDescription` to show an info tooltip icon next to the title.
- * - `children` are rendered in the right-hand controls column (inputs, selects, etc.).
- * - Accepts `classNames` and `styles` to customize: `container`, `titleColumn`, `controlsRow`,
- *   `title`, `subtitle`, `requiredMark`, `tooltip`, `questionIcon`.
- */
-export const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(
-  (
-    {
-      title,
-      subtitle,
-      required,
-      requiredMark = '*',
-      tooltipDescription,
-      children,
-      className,
-      classNames,
-      style,
-      styles,
-      ...props
-    },
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cn('cleen', className)}
-        style={{ ...style, width: '100%' }}
-        {...props}
-      >
-        <div
-          className={cn(
-            'cleen-flex cleen-w-full cleen-items-start cleen-justify-start cleen-gap-8',
-            classNames?.container
-          )}
-          style={styles?.container}
-        >
-          <div
-            className={cn(
-              'cleen-flex cleen-flex-col cleen-w-[300px]',
-              classNames?.titleColumn
-            )}
-            style={styles?.titleColumn}
-          >
-            <div
-              className={cn(
-                'cleen-flex cleen-items-center cleen-gap-1 cleen-font-semibold cleen-text-sm cleen-text-gray/90',
-                classNames?.title
-              )}
-              style={styles?.title}
-            >
-              <span className="cleen-overflow-hidden cleen-whitespace-nowrap cleen-text-ellipsis">
-                {title}
-              </span>
-              {required && (
-                <span
-                  className={cn('cleen-text-error', classNames?.requiredMark)}
-                  style={styles?.requiredMark}
-                >
-                  {requiredMark}
-                </span>
-              )}
-              {tooltipDescription && (
-                <Tooltip
-                  hasArrow
-                  placement="top"
-                  label={tooltipDescription}
-                  color="rgba(var(--cleen-gray), 0.8)"
-                  {...classNames?.tooltip}
-                  style={styles?.tooltip?.style}
-                  styles={{
-                    ...styles?.tooltip?.styles,
-                    labelContainer: {
-                      width: 'max-content',
-                      maxWidth: '250px',
-                      ...styles?.tooltip?.styles?.labelContainer,
-                    },
-                  }}
-                >
-                  <IconQuestionCircle
-                    className={cn(
-                      'cleen-size-3 cleen-text-gray/40',
-                      classNames?.questionIcon
-                    )}
-                    style={styles?.questionIcon}
-                  />
-                </Tooltip>
-              )}
-            </div>
-            {subtitle && (
-              <div
-                className={cn(
-                  'cleen-overflow-hidden cleen-whitespace-nowrap cleen-text-ellipsis cleen-w-full cleen-font-normal cleen-text-gray/70 cleen-text-sm',
-                  classNames?.subtitle
-                )}
-                style={styles?.subtitle}
-              >
-                {subtitle}
-              </div>
-            )}
-          </div>
-          <div
-            className={cn(
-              'cleen-flex cleen-flex-1 cleen-flex-wrap cleen-gap-8',
-              classNames?.controlsRow
-            )}
-            style={styles?.controlsRow}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-FormGroup.displayName = 'FormGroup';

package/src/components/formGroup/index.ts

@@ -1 +0,0 @@
-export { FormGroup, type FormGroupProps } from './FormGroup';