chop-logic-components 4.1.0 → 4.1.1

package/dist/main.d.ts

@@ -0,0 +1,8 @@
+export * from './components/atoms';
+export * from './components/contexts';
+export * from './components/hocs';
+export * from './components/molecules';
+export * from './components/organisms';
+export * from './enums';
+export * from './hooks';
+export * from './types';

package/dist/types/_common.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties } from 'react';
+export interface ChopLogicComponentProps {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    tabIndex?: number;
+    title?: string;
+}
+export interface ChopLogicInputProps extends ChopLogicComponentProps {
+    label: string;
+    name: string;
+    disabled?: boolean;
+    required?: boolean;
+    stateless?: boolean;
+    value?: string | number | readonly string[];
+}
+export type SelectValue = {
+    id: string;
+    label: string;
+} & {
+    [key in string]: unknown;
+};
+export type MultiSelectValue = SelectValue & {
+    selected: boolean;
+};
+export type NumericInputValidator = (input?: number) => boolean;
+export type TextInputValidator = (input: string) => boolean;
+export type ChopLogicRegExpWithFlags = {
+    regexp: string;
+    flags?: string;
+};
+export type Dimensions = {
+    width: number;
+    height: number;
+};

package/dist/types/accordion.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export type AccordionItemProps = PropsWithChildren & {
+    summary: string;
+};
+export interface AccordionProps extends ChopLogicComponentProps {
+    items: AccordionItemProps[];
+}

package/dist/types/alert.d.ts

@@ -0,0 +1,11 @@
+import { AlertMode, IconName } from '../enums';
+import { ChopLogicComponentProps } from './_common';
+export interface AlertProps extends ChopLogicComponentProps {
+    isOpened: boolean;
+    onClose: () => void;
+    message: string;
+    mode?: AlertMode;
+    icon?: IconName;
+    autoClose?: boolean;
+    autoCloseDelay?: number;
+}

package/dist/types/breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from '../enums';
+import { ChopLogicComponentProps } from './_common';
+export interface Breadcrumb {
+    label: string;
+    icon?: IconName;
+    link?: string;
+}
+export interface BreadcrumbsProps extends ChopLogicComponentProps {
+    items: Breadcrumb[];
+}

package/dist/types/button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonView, ElementSize, IconName } from '../enums';
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    view?: ButtonView;
+    icon?: IconName;
+    text?: string;
+    extended?: boolean;
+    tooltip?: string;
+    label?: string;
+    iconSize?: ElementSize;
+}

package/dist/types/checkbox.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEventHandler } from 'react';
+import { ChopLogicInputProps } from './_common';
+export interface CheckboxProps extends ChopLogicInputProps {
+    noLabel?: boolean;
+    iconPosition?: 'left' | 'right';
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    defaultChecked?: boolean;
+    checked?: boolean;
+}

package/dist/types/dialog.d.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../enums';
+import { PropsWithChildren } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface DialogProps extends ChopLogicComponentProps, PropsWithChildren {
+    isOpened: boolean;
+    onClose: () => void;
+    title: string;
+    icon?: IconName;
+}

package/dist/types/editable-text.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface EditableTextProps extends ChopLogicComponentProps {
+    value: string;
+    autoSelectTextOnEditMode?: boolean;
+    isEditMode?: boolean;
+    multiline?: boolean;
+    onChange?: (value: string) => void;
+    onClick?: (event: MouseEvent) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+}

package/dist/types/form.d.ts

@@ -0,0 +1,18 @@
+import { FormEventHandler, PropsWithChildren } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export type FormValues = {
+    [key: string]: unknown;
+};
+export type FormValidationState = [string, boolean][];
+export interface FormInputParams {
+    name: string;
+    value: unknown;
+    valid?: boolean;
+}
+export interface FormProps extends PropsWithChildren, ChopLogicComponentProps {
+    initialValues?: FormValues;
+    hasReset?: boolean;
+    onClickSubmit?: (data: FormValues) => void;
+    onReset?: FormEventHandler<HTMLFormElement>;
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+}

package/dist/types/grid.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface GridProps extends ChopLogicComponentProps {
+    columns: GridColumn[];
+    data: GridItem[];
+    caption?: string;
+    selectable?: boolean;
+    renderDataItem?: RenderDataItemCallback;
+    onSelect?: (ids: string[]) => void;
+}
+export type GridColumn = {
+    field: string;
+    title?: string;
+    component?: ReactElement;
+    highlighted?: boolean;
+    className?: string;
+};
+export type GridItem = {
+    id: string;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+export type RenderDataItemCallback = (item: GridItem, field: string) => ReactElement;
+export type GridRowValue = {
+    field: string;
+    value: string | ReactElement;
+};

package/dist/types/header.d.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../enums';
+import { HTMLAttributes, ReactNode } from 'react';
+type HeaderLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface HeaderProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    as?: HeaderLevel;
+    icon?: IconName;
+}
+export {};

package/dist/types/image.d.ts

@@ -0,0 +1,21 @@
+export interface ImageSource {
+    src: string;
+    descriptor?: string;
+    media?: string;
+    type?: string;
+}
+export interface ImageProps {
+    src: string;
+    alt: string;
+    sources?: ImageSource[];
+    sizes?: string;
+    caption?: string;
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'sync' | 'async' | 'auto';
+    className?: string;
+    decorative?: boolean;
+    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,23 @@
+export type { ChopLogicComponentProps, ChopLogicInputProps, ChopLogicRegExpWithFlags, Dimensions, MultiSelectValue, NumericInputValidator, SelectValue, TextInputValidator, } from './_common';
+export type { AccordionItemProps, AccordionProps } from './accordion';
+export type { AlertProps } from './alert';
+export type { Breadcrumb, BreadcrumbsProps } from './breadcrumbs';
+export type { ButtonProps } from './button';
+export type { CheckboxProps } from './checkbox';
+export type { DialogProps } from './dialog';
+export type { EditableTextProps } from './editable-text';
+export type { FormInputParams, FormProps, FormValidationState, FormValues } from './form';
+export type { GridColumn, GridItem, GridProps, GridRowValue, RenderDataItemCallback } from './grid';
+export type { HeaderProps } from './header';
+export type { ImageProps, ImageSource } from './image';
+export type { LinkProps } from './link';
+export type { LoaderProps } from './loader';
+export type { MenuItem, MenuProps } from './menu';
+export type { MultiSelectProps } from './multi-select';
+export type { NumericInputProps } from './numeric';
+export type { SearchProps } from './search';
+export type { SelectProps } from './select';
+export type { SwitchProps } from './switch';
+export type { ChopLogicTabItem, TabsProps } from './tabs';
+export type { TextInputProps } from './text';
+export type { TooltipProps } from './tooltip';

package/dist/types/link.d.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../enums';
+import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+export interface LinkProps extends PropsWithChildren, AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    icon?: IconName;
+    iconPosition?: 'left' | 'right';
+    external?: boolean;
+    disabled?: boolean;
+}

package/dist/types/loader.d.ts

@@ -0,0 +1,6 @@
+import { LoaderView } from '../enums';
+import { HTMLAttributes } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface LoaderProps extends ChopLogicComponentProps, HTMLAttributes<HTMLSpanElement> {
+    view?: LoaderView;
+}

package/dist/types/menu.d.ts

@@ -0,0 +1,17 @@
+import { IconName, OrientationMode } from '../enums';
+import { ChopLogicComponentProps } from './_common';
+export interface MenuProps extends ChopLogicComponentProps {
+    items: MenuItem[];
+    mode?: OrientationMode;
+    openedOn?: 'hover' | 'click';
+}
+export interface MenuItem {
+    label: string;
+    id: string;
+    nestedItems?: MenuItem[];
+    icon?: IconName;
+    link?: string;
+    onClick?: () => void;
+    onHover?: () => void;
+    onFocus?: () => void;
+}

package/dist/types/multi-select.d.ts

@@ -0,0 +1,7 @@
+import { ChopLogicInputProps, SelectValue } from './_common';
+export interface MultiSelectProps extends ChopLogicInputProps {
+    options: SelectValue[];
+    onChange?: (values?: SelectValue[]) => void;
+    defaultValue?: string | number | readonly string[];
+    placeholder?: string;
+}

package/dist/types/numeric.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+import { ChopLogicInputProps, NumericInputValidator } from './_common';
+export interface NumericInputProps extends ChopLogicInputProps {
+    errorMessage?: string;
+    validator?: NumericInputValidator;
+    hasSpinButtons?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    readOnly?: boolean;
+    defaultValue?: number;
+    stateless?: boolean;
+    value?: number;
+    onIncrement?: () => void;
+    onDecrement?: () => void;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+}

package/dist/types/search.d.ts

@@ -0,0 +1,16 @@
+import { FocusEventHandler, HTMLInputAutoCompleteAttribute } from 'react';
+import { ChopLogicInputProps } from './_common';
+export interface SearchProps extends ChopLogicInputProps {
+    maxLength?: number;
+    minLength?: number;
+    placeholder?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    clearable?: boolean;
+    spellCheck?: boolean;
+    searchMode?: 'automatic' | 'manual';
+    onSearch?: (searchTerm: string) => void;
+    onClear?: () => void;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    debounceDelay?: number;
+}

package/dist/types/select.d.ts

@@ -0,0 +1,7 @@
+import { ChopLogicInputProps, SelectValue } from './_common';
+export interface SelectProps extends ChopLogicInputProps {
+    options: SelectValue[];
+    onChange?: (value?: SelectValue) => void;
+    placeholder?: string;
+    defaultValue?: string | number | readonly string[];
+}

package/dist/types/switch.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+export interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: string;
+    hasIndicator?: boolean;
+    label: string;
+    name: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/types/tabs.d.ts

@@ -0,0 +1,23 @@
+import { OrientationMode } from '../enums';
+import { ReactElement } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface TabsProps extends ChopLogicComponentProps {
+    tabs: ChopLogicTabItem[];
+    defaultTabId?: string;
+    mode?: OrientationMode;
+    stretched?: boolean;
+    editable?: boolean;
+    extendable?: boolean;
+    extendedTabLabel?: string;
+    extendedTabContent?: ReactElement;
+    onTabTitleChange?: (tabId: string, newTitle: string) => void;
+    onTabAdd?: () => void;
+    onTabSelect?: (id: string) => void;
+    onTabDelete?: (id: string) => void;
+}
+export interface ChopLogicTabItem {
+    content: ReactElement;
+    title: string;
+    id: string;
+    disabled?: boolean;
+}

package/dist/types/text.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEventHandler, FocusEventHandler, HTMLInputAutoCompleteAttribute } from 'react';
+import { ChopLogicInputProps, ChopLogicRegExpWithFlags, TextInputValidator } from './_common';
+export interface TextInputProps extends ChopLogicInputProps {
+    errorMessage?: string;
+    clearable?: boolean;
+    readOnly?: boolean;
+    type?: 'text' | 'email' | 'password';
+    validator?: ChopLogicRegExpWithFlags | TextInputValidator;
+    maxLength?: number;
+    placeholder?: string;
+    defaultValue?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    onClear?: () => void;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+}

package/dist/types/tooltip.d.ts

@@ -0,0 +1,11 @@
+import { SemanticColor, TooltipContainer } from '../enums';
+import { PropsWithChildren, ReactElement } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface TooltipProps extends PropsWithChildren, ChopLogicComponentProps {
+    tooltipContent: string | ReactElement;
+    containerTag?: TooltipContainer;
+    visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
+    autoClose?: boolean;
+    autoCloseDelay?: number;
+    color?: SemanticColor;
+}

package/dist/utils/get-class-name.d.ts

@@ -0,0 +1,5 @@
+type ClassNameInput = string | {
+    [key in string]: boolean;
+} | undefined | null;
+export declare function getClassName(input: ClassNameInput[]): string;
+export {};

package/dist/utils/handle-dropdown-list-key-press.d.ts

@@ -0,0 +1,7 @@
+import { SelectValue } from '../types';
+import { KeyboardEvent } from 'react';
+export declare function handleDropdownListKeyPress({ e, options, onClose, }: {
+    e: KeyboardEvent<HTMLUListElement>;
+    options: SelectValue[];
+    onClose: () => void;
+}): void;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { getClassName } from './get-class-name';
+export { handleDropdownListKeyPress } from './handle-dropdown-list-key-press';
+export { moveFocusOnElementById } from './move-focus-on-element-by-id';

package/dist/utils/move-focus-on-element-by-id.d.ts

@@ -0,0 +1 @@
+export declare function moveFocusOnElementById(id: string): void;

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/ChopLogic/chop-logic-components.git"
   },
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Reusable React components and hooks for the Chop Logic project",
   "type": "module",
   "module": "dist/index.es.js",
@@ -85,6 +85,7 @@
     "typecheck": "tsc --pretty --noEmit",
     "test": "vitest",
     "test:ci": "vitest run --passWithNoTests",
+    "test:integration": "npm run build:storybook && start-server-and-test 'http-server storybook-static -p 6006 -s' http://127.0.0.1:6006 test-storybook",
     "test:mutation": "stryker run",
     "coverage": "vitest run --coverage",
     "release:version": "node scripts/release-version.js"
@@ -116,12 +117,13 @@
   },
   "homepage": "https://choplogic.github.io/chop-logic-components",
   "devDependencies": {
-    "@biomejs/biome": "^2.4.12",
-    "@commitlint/cli": "^20.5.0",
-    "@commitlint/config-conventional": "^20.5.0",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
+    "@biomejs/biome": "^2.4.13",
+    "@commitlint/cli": "^20.5.3",
+    "@commitlint/config-conventional": "^20.5.3",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@storybook/test-runner": "^0.24.3",
     "@stryker-mutator/core": "^9.6.1",
     "@stryker-mutator/vitest-runner": "^9.6.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -129,18 +131,20 @@
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.5",
+    "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "husky-init": "^8.0.0",
-    "jsdom": "^29.0.2",
+    "jsdom": "^29.1.1",
     "prettier": "^3.8.3",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.3.5",
+    "start-server-and-test": "^3.0.2",
+    "storybook": "^10.3.6",
     "typescript": "^6.0.3",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^4.5.4",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.0",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.1.4"
+    "vitest": "^4.1.5"
   },
   "overrides": {
     "storybook": "$storybook"