chop-logic-components 1.0.3 → 1.0.5

package/README.md

@@ -4,48 +4,93 @@ Welcome to **Chop Logic Components**, a comprehensive React components library p
 
 ## About the Library
 
-Chop Logic is designed to speed up development by providing reusable, accessible, and highly customizable components. Whether you're building complex forms, creating dynamic layouts, or managing component logic with hooks, Chop Logic has the tools to make it easier.
+Chop Logic is designed to speed up development by providing reusable, accessible, and highly customizable components. Whether you're building complex forms, creating dynamic layouts, or managing component logic with hooks, Chop Logic Components has the tools to make it easier.
 
-### Why Choose Chop Logic?
+## Links
 
-Here's what makes Chop Logic an excellent addition to your React project:
+- [Storybook Playground](https://savourygin.github.io/chop-logic-components)
+- [Npm](https://www.npmjs.com/package/chop-logic-components)
 
-- **Styled Components:** All components are styled using a consistent, modern design language and can easily adapt to your project's look and feel. Each component offers a flexible API, making them simple to extend and customize.
+## Getting Started
 
-- **Custom Hooks:** Simplify your component logic by using the custom hooks provided. From managing form input to handling asynchronous data fetching, Chop Logic's hooks cover common scenarios that developers face daily.
+To get started with Chop Logic, install it via npm or yarn:
 
-- **Built for Reusability:** Every component and hook is designed with reusability in mind, reducing repetitive code and enabling faster development cycles.
+```bash
+npm install chop-logic-components
+# or
+yarn add chop-logic-components
+```
 
-- **Ease of Use:** Chop Logic follows best practices in API design, ensuring that components and hooks are easy to learn and work seamlessly with each other.
+## Scripts
 
-- **Storybook Integration:** This library includes comprehensive Storybook documentation for each component and hook, allowing you to explore usage examples, try props in real-time, and see how each feature behaves in isolation.
+### `format`
 
-## Key Features
+Runs [Prettier](https://prettier.io/) to automatically format TypeScript files (`.ts` and `.tsx`) in the project. This script will write changes directly to the files.
 
-### Components
+```bash
+npm run format
+```
 
-Chop Logic includes a wide range of styled components that are ready to use in your projects:
+### `lint`
 
-- **Inputs:** Beautifully styled input controllers with customization options.
-- **Containers:** Easily customizable container elements like text grids, forms, and tabs.
-- **Modals:** Flexible modal windows and accessible tooltips, perfect for enhancing user interactions.
-- **More Components Coming Soon!**
+Runs ESLint to analyze the TypeScript code for potential errors and enforce coding standards. It automatically fixes issues where possible and uses the .gitignore file to ignore certain paths.
+
+```bash
+npm run lint
+```
 
-### Hooks
+### `check-types`
 
-In addition to UI components, Chop Logic offers a collection of custom hooks to help you manage complex logic:
+Runs the TypeScript compiler (tsc) to perform type checking without generating output files. This script helps ensure that the code adheres to TypeScript's type safety.
 
-- **useModalFocusTrap:** A hook that traps focus within an open modal, ensuring accessibility compliance.
-- **useKeyPress:** Easily manage keyboard interactions and trigger actions based on keypress events.
-- **useContainerDimensions:** Get the dimensions of any HTML element to dynamically adjust your UI.
-- **More Hooks Coming Soon!**
+```bash
+npm run check-types
+```
 
-## Getting Started
+### `build`
 
-To get started with Chop Logic, install it via npm or yarn:
+Compiles the TypeScript code into JavaScript using the TypeScript compiler (tsc) and then builds the project using Vite.
 
 ```bash
-npm install chop-logic-components
-# or
-yarn add chop-logic-components
+npm run build
+```
+
+### `test`
+
+Runs unit tests using Vitest, a fast testing framework designed for Vite projects.
+
+```bash
+npm run test
+```
+
+### `test:ci`
+
+Runs the tests in continuous integration (CI) mode with Vitest, providing a streamlined output suitable for automated environments.
+
+```bash
+npm run test:ci
+```
+
+### `storybook`
+
+Starts a local instance of Storybook for developing UI components. The Storybook interface will be available at http://localhost:6006.
+
+```bash
+npm run storybook
+```
+
+### `build-storybook`
+
+Builds the static version of the Storybook for deployment, outputting the files to the storybook-static directory. The --quiet flag suppresses the build logs.
+
+```bash
+npm run build-storybook
+```
+
+### `prepare`
+
+Runs the build script and then installs Husky hooks for managing Git hooks in the project.
+
+```bash
+npm run prepare
 ```

package/dist/components/containers/form/Form.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledForm: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {
     $columns: number;
 }>> & string;

package/dist/components/containers/form/types.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
 
 export type ChopLogicFormData = {
     [key: string]: unknown;
@@ -15,9 +16,11 @@ export type ChopLogicFormContextProps = {
     initialValues?: ChopLogicFormData;
     resetSignal?: number;
 };
-export type ChopLogicFormProps = PropsWithChildren & React.HTMLAttributes<HTMLFormElement> & {
+export type ChopLogicFormProps = PropsWithChildren & CommonComponentProps & {
     columns?: number;
     initialValues?: ChopLogicFormData;
     hasReset?: boolean;
     onClickSubmit?: (data: ChopLogicFormData) => void;
+    onReset?: React.FormEventHandler<HTMLFormElement>;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
 };

package/dist/components/containers/grid/Grid.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledGrid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
 export declare const StyledGridHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;
 export declare const StyledGridBody: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;

package/dist/components/containers/grid/types.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
-export type ChopLogicGridProps = {
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+
+export type ChopLogicGridProps = CommonComponentProps & {
     columns: ChopLogicGridColumn[];
     data: ChopLogicGridItem[];
     caption?: string;
-    id?: string;
     selectable?: boolean;
-    tabIndex?: number;
-    className?: string;
-    style?: React.CSSProperties;
     renderDataItem?: RenderDataItemCallback;
     onSelect?: (ids: string[]) => void;
 };

package/dist/components/containers/tabs/types.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-export type ChopLogicTabsProps = React.HTMLAttributes<HTMLDivElement> & {
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+
+export type ChopLogicTabsProps = CommonComponentProps & {
     tabs: ChopLogicTabItem[];
     defaultTabId?: string;
     mode?: ChopLogicTabsMode;

package/dist/components/inputs/_common/error-message/ErrorMessage.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledErrorMessage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $visible: boolean;
 }>> & string;

package/dist/components/inputs/_common/input-inner-button/InputInnerButton.styled.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const StyledInputInnerButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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,12 +1,13 @@
 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 = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ChopLogicButtonProps = Partial<CommonInputProps> & {
     onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
     view?: ChopLogicButtonView;
-    label?: string;
     icon?: ChopLogicIconName;
     text?: string;
     extended?: boolean;
+    type?: 'button' | 'reset' | 'submit';
 };

package/dist/components/inputs/checkbox/Checkbox.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledCheckboxWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;
 }>> & string;

package/dist/components/inputs/checkbox/controller.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useChopLogicCheckboxController({ name, defaultChecked, onChange, }: {
     name: string;
     defaultChecked?: boolean;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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;

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

@@ -1,13 +1,13 @@
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
 import { SelectValue } from '../select/types';
 
 export type MultiSelectValue = SelectValue & {
     selected: boolean;
 };
-export type ChopLogicMultiSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-    name: string;
-    label: string;
+export type ChopLogicMultiSelectProps = CommonInputProps & {
     options: SelectValue[];
     onChange?: (values?: SelectValue[]) => void;
+    defaultValue?: string | number | readonly string[];
     placeholder?: string;
 };
 export type MultiSelectDropdownProps = {

package/dist/components/inputs/numeric/NumericInput.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledNumericInputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledNumericInputWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;

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

@@ -1,11 +1,17 @@
-/// <reference types="react" />
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+
 export type NumericValidationFunction = (input?: number) => boolean;
-export type ChopLogicNumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    name: string;
-    label: string;
+export type ChopLogicNumericInputProps = CommonInputProps & {
     errorMessage?: string;
     validator?: NumericValidationFunction;
-    onClear?: () => void;
     hasSpinButtons?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    readOnly?: boolean;
+    defaultValue?: number;
     onSpinButtonClick?: (value?: number) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
 };

package/dist/components/inputs/select/Select.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledSelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;
 }>> & string;

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-export type ChopLogicSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-    name: string;
-    label: string;
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+
+export type ChopLogicSelectProps = CommonInputProps & {
     options: SelectValue[];
     onChange?: (value?: SelectValue) => void;
     placeholder?: string;
+    defaultValue?: string | number | readonly string[];
 };
 export type SelectValue = {
     id: string;

package/dist/components/inputs/text/TextInput.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledTextInputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledTextInputWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;

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

@@ -1,15 +1,24 @@
-/// <reference types="react" />
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+
 export type RegExpWithFlags = {
     regexp: string;
     flags?: string;
 };
 export type TextValidationFunction = (input: string) => boolean;
-export type ChopLogicTextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+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>;
 };

package/dist/components/modals/alert/Alert.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledAlertHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledAlertWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isClosing: boolean;

package/dist/components/modals/alert/types.d.ts

@@ -1,11 +1,11 @@
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
 import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
 
 export type ChopLogicAlertMode = 'success' | 'error' | 'warning' | 'info' | 'help';
-export type ChopLogicAlertProps = React.HTMLAttributes<HTMLDivElement> & {
+export type ChopLogicAlertProps = CommonComponentProps & {
     isOpened: boolean;
     onClose: () => void;
     message: string;
-    title?: string;
     mode?: ChopLogicAlertMode;
     icon?: ChopLogicIconName;
 };

package/dist/components/modals/dialog/Dialog.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledDialogLayout: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledDialogBackground: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isClosing: boolean;

package/dist/components/modals/dialog/types.d.ts

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

package/dist/components/modals/tooltip/Tooltip.styled.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const StyledTooltip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/modals/tooltip/controller.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useChopLogicTooltipController: ({ id }: {
     id?: string;
 }) => {

package/dist/components/modals/tooltip/types.d.ts

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

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

@@ -27,8 +27,8 @@ export declare const SHADOWS: Readonly<{
     inset: "-5px 5px 20px 5px rgba(0, 0, 0, 0.1) inset";
 }>;
 export declare const BORDERS: Readonly<{
-    light: "1px solid #5998c5";
-    heavy: "1px solid #266dd3";
+    thin: "1px solid #5998c5";
+    thick: "1px solid #266dd3";
     accent: "1px solid #e53d00";
     outline: "2px dashed #e53d00";
 }>;

package/dist/hooks/use-modal-focus-trap/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type ModalFocusTrapParams = {
     modalRef: React.RefObject<HTMLDivElement>;
     isOpened: boolean;

package/dist/hooks/use-tooltip-position/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type useTooltipPositionParams = {
     wrapperRef: React.RefObject<HTMLSpanElement | HTMLDivElement>;
     tooltipRef: React.RefObject<HTMLSpanElement | HTMLDivElement>;