chop-logic-components 1.0.5 → 1.0.7

package/dist/types/chop-logic-theme.d.ts

@@ -0,0 +1,31 @@
+export interface ChopLogicTheme {
+    primaryColor: string;
+    secondaryColor: string;
+    tertiaryColor: string;
+    backgroundColor: string;
+    accentColor: string;
+    transparentBackgroundColor: string;
+    primaryGradient: string;
+    accentGradient: string;
+    tintGradient: string;
+    coreFontFamily: string;
+    monospaceFontFamily: string;
+    baseFontSize: string;
+    smallFontSize: string;
+    headerFontSize: string;
+    smallGap: string;
+    mediumGap: string;
+    bigGap: string;
+    iconSize: string;
+    blockBorderRadius: string;
+    boxShadow: string;
+    textShadow: string;
+    insetShadow: string;
+    regularBorder: string;
+    accentBorder: string;
+    outlineBorder: string;
+    baseIndex: string;
+    tooltipIndex: string;
+    dropdownIndex: string;
+    modalIndex: string;
+}

package/dist/{utils/types.d.ts → types/components/_common.d.ts}

@@ -1,13 +1,16 @@
-export type CommonComponentProps = {
-    id?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    title?: string;
-};
+import { CSSProperties } from 'react';
+
 export type CommonInputProps = CommonComponentProps & {
     label: string;
     name: string;
     disabled?: boolean;
     required?: boolean;
 };
+export type CommonComponentProps = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    theme?: 'dark' | 'light';
+};

package/dist/{components/modals/alert/types.d.ts → types/components/alert.d.ts}

@@ -1,7 +1,6 @@
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
-import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
+import { ChopLogicAlertMode, ChopLogicIconName } from '../../enums';
+import { CommonComponentProps } from './_common';
 
-export type ChopLogicAlertMode = 'success' | 'error' | 'warning' | 'info' | 'help';
 export type ChopLogicAlertProps = CommonComponentProps & {
     isOpened: boolean;
     onClose: () => void;

package/dist/types/components/button.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { ChopLogicIconName } from '../../enums';
+import { CommonInputProps } from './_common';
+
+export type ChopLogicButtonView = '3D' | 'flat' | 'icon';
+export type ChopLogicButtonProps = Partial<CommonInputProps> & {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    view?: ChopLogicButtonView;
+    icon?: ChopLogicIconName;
+    text?: string;
+    extended?: boolean;
+    type?: 'button' | 'reset' | 'submit';
+};

package/dist/{components/inputs/checkbox/types.d.ts → types/components/checkbox.d.ts}

@@ -1,8 +1,9 @@
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+import { ChangeEventHandler } from 'react';
+import { CommonInputProps } from './_common';
 
 export type ChopLogicCheckboxProps = CommonInputProps & {
     noLabel?: boolean;
     iconPosition?: 'left' | 'right';
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
     defaultChecked?: boolean;
 };

package/dist/{components/modals/dialog/types.d.ts → types/components/dialog.d.ts}

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicDialogProps = CommonComponentProps & PropsWithChildren & {
     isOpened: boolean;
     onClose: () => void;
     title: string;
 };
-export type DialogLayoutProps = PropsWithChildren & React.HTMLAttributes<HTMLDivElement> & {
+export type DialogLayoutProps = PropsWithChildren & HTMLAttributes<HTMLDivElement> & {
     title: string;
     onClose: () => void;
     isOpened: boolean;

package/dist/{components/containers/form/types.d.ts → types/components/form.d.ts}

@@ -1,11 +1,10 @@
-import { PropsWithChildren } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { FormEventHandler, PropsWithChildren } from 'react';
+import { CommonComponentProps } from './_common.ts';
 
 export type ChopLogicFormData = {
     [key: string]: unknown;
 };
 export type ChopLogicFormValidationState = [string, boolean][];
-export type ChopLogicFormInput = HTMLInputElement | HTMLSelectElement;
 export type ChopLogicFormInputParams = {
     name: string;
     value: unknown;
@@ -21,6 +20,6 @@ export type ChopLogicFormProps = PropsWithChildren & CommonComponentProps & {
     initialValues?: ChopLogicFormData;
     hasReset?: boolean;
     onClickSubmit?: (data: ChopLogicFormData) => void;
-    onReset?: React.FormEventHandler<HTMLFormElement>;
-    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    onReset?: FormEventHandler<HTMLFormElement>;
+    onSubmit?: FormEventHandler<HTMLFormElement>;
 };

package/dist/{components/containers/grid/types.d.ts → types/components/grid.d.ts}

@@ -1,4 +1,5 @@
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { ReactElement } from 'react';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicGridProps = CommonComponentProps & {
     columns: ChopLogicGridColumn[];
@@ -11,7 +12,7 @@ export type ChopLogicGridProps = CommonComponentProps & {
 export type ChopLogicGridColumn = {
     field: string;
     title?: string;
-    component?: React.ReactElement;
+    component?: ReactElement;
     highlighted?: boolean;
     className?: string;
 };
@@ -20,4 +21,4 @@ export type ChopLogicGridItem = {
     disabled?: boolean;
     [key: string]: unknown;
 };
-export type RenderDataItemCallback = (item: ChopLogicGridItem, field: string) => JSX.Element;
+export type RenderDataItemCallback = (item: ChopLogicGridItem, field: string) => ReactElement;

package/dist/{components/inputs/multi-select/types.d.ts → types/components/multi-select.d.ts}

@@ -1,5 +1,5 @@
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
-import { SelectValue } from '../select/types';
+import { CommonInputProps } from './_common';
+import { SelectValue } from './select';
 
 export type MultiSelectValue = SelectValue & {
     selected: boolean;

package/dist/{components/inputs/numeric/types.d.ts → types/components/numeric.d.ts}

@@ -1,4 +1,5 @@
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+import { CommonInputProps } from './_common';
 
 export type NumericValidationFunction = (input?: number) => boolean;
 export type ChopLogicNumericInputProps = CommonInputProps & {
@@ -11,7 +12,7 @@ export type ChopLogicNumericInputProps = CommonInputProps & {
     readOnly?: boolean;
     defaultValue?: number;
     onSpinButtonClick?: (value?: number) => void;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
 };

package/dist/{components/inputs/select/types.d.ts → types/components/select.d.ts}

@@ -1,17 +1,17 @@
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+import { CommonInputProps } from './_common';
 
-export type ChopLogicSelectProps = CommonInputProps & {
-    options: SelectValue[];
-    onChange?: (value?: SelectValue) => void;
-    placeholder?: string;
-    defaultValue?: string | number | readonly string[];
-};
 export type SelectValue = {
     id: string;
     label: string;
 } & {
     [key in string]: unknown;
 };
+export type ChopLogicSelectProps = CommonInputProps & {
+    options: SelectValue[];
+    onChange?: (value?: SelectValue) => void;
+    placeholder?: string;
+    defaultValue?: string | number | readonly string[];
+};
 export type SelectOptionProps = {
     value: SelectValue;
     isSelected: boolean;

package/dist/{components/containers/tabs/types.d.ts → types/components/tabs.d.ts}

@@ -1,4 +1,5 @@
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { ReactElement } from 'react';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicTabsProps = CommonComponentProps & {
     tabs: ChopLogicTabItem[];
@@ -6,7 +7,7 @@ export type ChopLogicTabsProps = CommonComponentProps & {
     mode?: ChopLogicTabsMode;
 };
 export type ChopLogicTabItem = {
-    content: React.ReactElement;
+    content: ReactElement;
     title: string;
     id: string;
     disabled?: boolean;

package/dist/{components/inputs/text/types.d.ts → types/components/text.d.ts}

@@ -1,4 +1,5 @@
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+import { ChangeEventHandler, FocusEventHandler, HTMLInputAutoCompleteAttribute } from 'react';
+import { CommonInputProps } from './_common';
 
 export type RegExpWithFlags = {
     regexp: string;
@@ -6,19 +7,17 @@ export type RegExpWithFlags = {
 };
 export type TextValidationFunction = (input: string) => boolean;
 export type ChopLogicTextInputProps = CommonInputProps & {
-    name: string;
-    label: string;
     errorMessage?: string;
     clearable?: boolean;
     readOnly?: boolean;
-    onClear?: () => void;
     type?: 'text' | 'email' | 'password';
     validator?: RegExpWithFlags | TextValidationFunction;
     maxLength?: number;
     placeholder?: string;
     defaultValue?: string;
-    autoComplete?: React.HTMLInputAutoCompleteAttribute;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    onClear?: () => void;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
 };

package/dist/{components/modals/tooltip/types.d.ts → types/components/tooltip.d.ts}

@@ -1,8 +1,8 @@
-import { PropsWithChildren } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { PropsWithChildren, ReactElement } from 'react';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicTooltipProps = PropsWithChildren & CommonComponentProps & {
-    tooltipContent: string | React.ReactElement;
+    tooltipContent: string | ReactElement;
     containerTag?: TooltipContainerTag;
     visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
 };

package/dist/types/index.d.ts

@@ -0,0 +1,13 @@
+export type { ChopLogicTheme } from './chop-logic-theme.ts';
+export * from './components/alert.ts';
+export * from './components/button.ts';
+export * from './components/checkbox.ts';
+export * from './components/dialog.ts';
+export * from './components/form.ts';
+export * from './components/grid.ts';
+export * from './components/multi-select.ts';
+export * from './components/numeric.ts';
+export * from './components/select.ts';
+export * from './components/tabs.ts';
+export * from './components/text.ts';
+export * from './components/tooltip.ts';

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

@@ -0,0 +1 @@
+export {};

package/dist/utils/get-chop-logic-theme.d.ts

@@ -0,0 +1,3 @@
+import { ChopLogicTheme } from '../types';
+
+export declare function getChopLogicTheme(theme?: 'dark' | 'light', customThemeValues?: Partial<ChopLogicTheme>): ChopLogicTheme;

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

@@ -0,0 +1,8 @@
+import { KeyboardEvent } from 'react';
+import { SelectValue } from '../types';
+
+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 { getChopLogicTheme } from './get-chop-logic-theme';
+export { handleDropdownListKeyPress } from './handle-dropdown-list-key-press';
+export { moveFocusOnElementById } from './move-focus-on-element-by-id';

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/SavouryGin/chop-logic-components.git"
   },
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "React UI components library for Chop Logic project",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -19,14 +19,16 @@
     "check-types": "tsc --pretty --noEmit",
     "build": "tsc && vite build",
     "test": "vitest",
-    "test:ci": "vitest run",
-    "storybook": "storybook dev -p 6006",
+    "test:ci": "vitest run --passWithNoTests",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build  -- -o storybook-static --quiet",
     "prepare": "npm run build && husky install"
   },
   "lint-staged": {
-    "*.{ts,tsx}": [
-      "npm run lint"
+    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write",
+      "eslint --fix",
+      "npm run test:ci"
     ]
   },
   "keywords": [
@@ -45,14 +47,16 @@
     "@chromatic-com/storybook": "^3.1.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-mdx-gfm": "^8.4.6",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/manager-api": "^8.4.6",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-vite": "^8.4.6",
+    "@storybook/test": "^8.4.6",
+    "@storybook/theming": "^8.4.6",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.5.2",
@@ -66,13 +70,13 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.11.0",
     "husky": "^8.0.0",
     "husky-init": "^8.0.0",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.6",
     "styled-components": "^6.1.12",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",

package/dist/components/inputs/_common/label/Label.styled.d.ts

@@ -1,3 +0,0 @@
-export declare const StyledLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
-export declare const StyledLabelText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledRequiredSign: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

package/dist/components/inputs/button/types.d.ts

@@ -1,13 +0,0 @@
-import { MouseEventHandler } from 'react';
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
-import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
-
-export type ChopLogicButtonView = 'primary' | 'secondary' | 'danger' | 'icon';
-export type ChopLogicButtonProps = Partial<CommonInputProps> & {
-    onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
-    view?: ChopLogicButtonView;
-    icon?: ChopLogicIconName;
-    text?: string;
-    extended?: boolean;
-    type?: 'button' | 'reset' | 'submit';
-};

package/dist/components/inputs/multi-select/MultiSelect.styled.d.ts

@@ -1,10 +0,0 @@
-export declare const StyledMultiSelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $disabled: boolean;
-}>> & string;
-export declare const StyledMultiSelectCombobox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const StyledMultiSelectPlaceholder: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledMultiSelectLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledMultiSelectDropdown: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
-    $opened: boolean;
-}>> & string;
-export declare const StyledMultiSelectOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/constants/style-variables.d.ts

@@ -1,51 +0,0 @@
-export declare const COLORS: Readonly<{
-    primary: "hsl(0, 0%, 13%)";
-    background: "hsl(0, 0%, 100%)";
-    highlight: "hsl(65, 43%, 95%)";
-    shade: "hsl(206, 19%, 93%)";
-    secondary: "hsl(215, 69%, 49%)";
-    tertiary: "hsl(205, 48%, 56%)";
-    accent: "hsl(16, 100%, 45%)";
-    transparentBackground: "hsla(0, 0%, 0%, 0.3)";
-}>;
-export declare const FONTS: Readonly<{
-    core: "Arial, Helvetica, sans-serif";
-    monospace: "'Courier New', Courier, monospace";
-}>;
-export declare const UNITS: Readonly<{
-    smallGap: "0.25rem";
-    mediumGap: "0.6rem";
-    bigGap: "1rem";
-    minElementSize: "2.75rem";
-    smallIconSize: "1.6rem";
-    blockBorderRadius: "0.375rem";
-    fieldWrapperHeight: "2.125rem";
-}>;
-export declare const SHADOWS: Readonly<{
-    box: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px";
-    text: "2.4px 2.4px 3.2px rgba(0, 0, 0, 0.3)";
-    inset: "-5px 5px 20px 5px rgba(0, 0, 0, 0.1) inset";
-}>;
-export declare const BORDERS: Readonly<{
-    thin: "1px solid #5998c5";
-    thick: "1px solid #266dd3";
-    accent: "1px solid #e53d00";
-    outline: "2px dashed #e53d00";
-}>;
-export declare const Z_INDEXES: Readonly<{
-    dropdown: 1000;
-    modal: 2000;
-    tooltip: 3000;
-}>;
-export declare const GRADIENTS: Readonly<{
-    primary: "linear-gradient(0deg, #222222, #266dd3)";
-    accent: "linear-gradient(0deg, #222222, #e53d00)";
-    tint: "linear-gradient(0deg, #e9edf0, #f6f7eb)";
-}>;
-export declare const SCREEN_BREAKPOINTS: Readonly<{
-    phones: "only screen and (max-width: 600px)";
-    portraitTablets: "only screen and (min-width: 600px)";
-    landscapeTablets: "only screen and (min-width: 768px)";
-    laptops: "only screen and (min-width: 992px)";
-    desktops: "only screen and (min-width: 1200px)";
-}>;

package/dist/utils/get-initial-color-mode.d.ts

@@ -1 +0,0 @@
-export declare function getInitialColorMode(): string;