intelicoreact 1.5.33 → 1.5.34

package/dist/Atomic/FormElements/ActionAlert/ActionAlert.interface.ts

@@ -0,0 +1,24 @@
+import type { IUniProps } from '@/types/base.interface';
+
+import type React from 'react';
+
+interface ButtonProps {
+  key: string;
+  buttonColor: string;
+  buttonLabel: string;
+  onClick: () => void;
+}
+
+export type TAlertVariant = 'default' | 'success' | 'error' | 'warning';
+
+export interface IActionAlertProps extends IUniProps {
+  message?: string;
+  className?: string;
+  buttonsClassName?: string;
+  date?: string;
+  noButtons?: boolean;
+  children?: React.ReactNode;
+  variant?: TAlertVariant;
+  testId?: string;
+  buttons?: ButtonProps[];
+}

package/dist/Atomic/FormElements/ActionAlert/ActionAlert.scss

@@ -1,36 +1,46 @@
-@import "../../../scss/vars";
-
 .action-alert {
+  --action-alert-height: 20px;
+  --action-alert-padding: 10px 8px;
+  --action-alert-font-size: 13px;
+  --action-alert-font-weight: 400;
+  --action-alert-color: #1e1e2d;
+  --action-alert-border-radius: 4px;
+  --action-alert-bg-color: #ebeff2;
+  --action-alert-time-color: #9aa0b9;
+  --action-alert-pending-bg-color: #ffedc8;
+  --action-alert-reject-bg-color: #fce2e8;
+  --action-alert-confirm-bg-color: #e4f3e8;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
 
-  height: 20px;
-  padding: 10px 8px;
+  height: var(--action-alert-height);
+  padding: var(--action-alert-padding);
 
-  font-size: 13px;
-  font-weight: 400;
+  font-size: var(--action-alert-font-size);
+  font-weight: var(--action-alert-font-weight);
 
-  color: #1e1e2d;
-  border-radius: 4px;
-  background-color: #ebeff2;
+  color: var(--action-alert-color);
+  border-radius: var(--action-alert-border-radius);
+  background-color: var(--action-alert-bg-color);
 
   &__time {
     margin-right: 8px;
 
-    color: #9aa0b9;
+    color: var(--action-alert-time-color);
   }
 
   &--pending {
-    background-color: #ffedc8;
+    background-color: var(--action-alert-pending-bg-color);
   }
 
   &--reject {
-    background-color: #fce2e8;
+    background-color: var(--action-alert-reject-bg-color);
   }
 
   &--confirm {
-    background-color: #e4f3e8;
+    background-color: var(--action-alert-confirm-bg-color);
   }
 
   &__message-box,

package/dist/Atomic/FormElements/ActionAlert/ActionAlert.stories.tsx

@@ -0,0 +1,68 @@
+import type { IActionAlertProps } from '@/Atomic/FormElements/ActionAlert/ActionAlert.interface';
+
+import type { StoryFn } from '@storybook/react';
+
+import ActionAlert from './ActionAlert';
+import '../../../../../scss/main.scss';
+
+type Story = StoryFn<IActionAlertProps>;
+
+export default {
+  title: 'Form Elements/ActionAlert',
+  component: ActionAlert,
+  argTypes: {
+    variant: {
+      description: 'string: ["reject", "pending", "confirm", "default"]. optional',
+      control: {
+        type: 'select',
+        options: ['reject', 'pending', 'confirm', 'default'],
+      },
+    },
+    message: {
+      description: 'string. optional',
+    },
+    date: {
+      description: 'string. optional',
+    },
+    noButtons: {
+      description: 'boolean. optional',
+    },
+    className: {
+      description: 'string. optional',
+    },
+    testId: {
+      description: 'string. optional',
+    },
+    buttons: {
+      description: 'array. optional',
+    },
+  },
+};
+
+const Template: Story = (args: IActionAlertProps) => <ActionAlert {...args} />;
+
+export const TemplateActionAlert = Template.bind({});
+
+TemplateActionAlert.args = {
+  className: 'test-class',
+  date: '08.15.22 15:55',
+  message: 'Consumer Completion Status:',
+  noButtons: false,
+  variant: 'warning',
+  testId: 'test-id',
+  buttonsClassName: 'j6',
+  buttons: [
+    {
+      key: 'reviewBtn',
+      buttonColor: '',
+      buttonLabel: 'Review',
+      onClick: () => console.log('Review'),
+    },
+    {
+      key: 'sendFundsBtn',
+      buttonColor: '#F59A2F',
+      buttonLabel: 'Send Funds',
+      onClick: () => console.log('Send Funds'),
+    },
+  ],
+};

package/dist/Atomic/FormElements/ActionAlert/ActionAlert.test.tsx

@@ -0,0 +1,112 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+
+import ActionAlert from './ActionAlert';
+
+const mockButtons = [
+  {
+    key: 'button1',
+    buttonColor: '#007BFF',
+    buttonLabel: 'Confirm',
+    onClick: jest.fn(),
+  },
+  {
+    key: 'button2',
+    buttonColor: '#FF0000',
+    buttonLabel: 'Cancel',
+    onClick: jest.fn(),
+  },
+];
+
+describe('actionAlert component', () => {
+  it('renders with default props', () => {
+    render(<ActionAlert message="Test Alert" />);
+    const alert = screen.getByTestId('alert');
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass('action-alert action-alert--default');
+    expect(screen.getByText('Test Alert')).toBeInTheDocument();
+  });
+
+  it('renders with a custom variant', () => {
+    render(<ActionAlert message="Warning!" variant="warning" />);
+    const alert = screen.getByTestId('alert');
+    expect(alert).toHaveClass('action-alert--warning');
+  });
+
+  it('renders with date', () => {
+    render(<ActionAlert message="With Date" date="2024-12-30" />);
+    const dateElement = screen.getByText('2024-12-30');
+    expect(dateElement).toBeInTheDocument();
+    expect(dateElement).toHaveClass('action-alert__time');
+  });
+
+  it('renders with buttons', () => {
+    render(<ActionAlert buttons={mockButtons} />);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(mockButtons.length);
+    mockButtons.forEach((btn) => {
+      expect(screen.getByText(btn.buttonLabel)).toBeInTheDocument();
+    });
+  });
+
+  it('calls button onClick handlers', () => {
+    render(<ActionAlert buttons={mockButtons} />);
+    const buttons = screen.getAllByRole('button');
+    fireEvent.click(buttons[0]);
+    fireEvent.click(buttons[1]);
+    expect(mockButtons[0].onClick).toHaveBeenCalledTimes(1);
+    expect(mockButtons[1].onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render buttons when noButtons is true', () => {
+    render(<ActionAlert noButtons buttons={mockButtons} />);
+    const buttons = screen.queryAllByRole('button');
+    expect(buttons).toHaveLength(0);
+  });
+
+  it('renders children when message is not provided', () => {
+    render(
+      <ActionAlert>
+        <span>Custom Content</span>
+      </ActionAlert>,
+    );
+    const customContent = screen.getByText('Custom Content');
+    expect(customContent).toBeInTheDocument();
+  });
+
+  it('applies additional className to the root element', () => {
+    render(<ActionAlert className="custom-class" />);
+    const alert = screen.getByTestId('alert');
+    expect(alert).toHaveClass('custom-class');
+  });
+
+  it('applies buttonsClassName to the buttons container', () => {
+    render(<ActionAlert buttons={mockButtons} buttonsClassName="buttons-custom-class" />);
+    const buttonsContainer = screen.getByTestId('alert').querySelector('.buttons-custom-class');
+    expect(buttonsContainer).toBeInTheDocument();
+  });
+
+  it('renders correctly with no props', () => {
+    render(<ActionAlert />);
+    const alert = screen.getByTestId('alert');
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass('action-alert--default');
+  });
+
+  it('handles missing buttons gracefully', () => {
+    render(<ActionAlert noButtons />);
+    const buttons = screen.queryAllByRole('button');
+    expect(buttons).toHaveLength(0);
+  });
+
+  it('handles long messages with children and ellipsis', () => {
+    render(
+      <ActionAlert>
+        <span className="text-ellipsis">This is a very long custom content that should be truncated.</span>
+      </ActionAlert>,
+    );
+    const text = screen.getByText('This is a very long custom content that should be truncated.');
+    expect(text).toHaveClass('text-ellipsis');
+  });
+});

package/dist/Atomic/FormElements/ActionAlert/ActionAlert.tsx

@@ -0,0 +1,50 @@
+import type { IActionAlertProps } from './ActionAlert.interface';
+import Button from '@/Atomic/UI/Button/Button';
+
+import cn from 'classnames';
+
+import React from 'react';
+
+import './ActionAlert.scss';
+
+const ActionAlert: React.FC<IActionAlertProps> = ({
+  message,
+  className,
+  buttonsClassName,
+  date,
+  noButtons,
+  children,
+  variant = 'default',
+  testId = 'alert',
+  buttons,
+}) => {
+  return (
+    <div role="alert" data-testid={testId} className={cn(`action-alert action-alert--${variant}`, className)}>
+      <div className="action-alert__message-box">
+        {date && <div className="action-alert__time">{date}</div>}
+        <div className="action-alert__message">{message || children}</div>
+      </div>
+
+      <div className={buttonsClassName}>
+        {typeof buttons !== 'undefined'
+          && buttons?.length > 0
+          && !noButtons
+          && buttons.map(item => (
+            <Button
+              style={{
+                backgroundColor: item.buttonColor,
+                borderColor: item.buttonColor,
+              }}
+              className="ml5"
+              label={item.buttonLabel}
+              {...item}
+              onClick={item.onClick}
+              key={item.key}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default ActionAlert;

package/dist/Atomic/FormElements/ActionAlert/index.ts

@@ -0,0 +1,5 @@
+import type { IActionAlertProps, TAlertVariant } from './ActionAlert.interface';
+import ActionAlert from './ActionAlert';
+
+export type { IActionAlertProps, TAlertVariant };
+export default ActionAlert;

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.interface.ts

@@ -0,0 +1,15 @@
+import type { IUniProps } from '@/types/base.interface';
+
+import type React from 'react';
+
+export interface IAdvancedStatusProps
+  extends IUniProps,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  onChange: (value: boolean) => void;
+  inactiveText: string;
+  activeText: string;
+  value?: boolean | null | undefined;
+  disabled?: boolean;
+  isPrimary?: boolean;
+  primaryStatusText?: string;
+}

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.scss

@@ -1,6 +1,16 @@
-@import "../../../scss/vars";
+@use '../../../scss/vars' as *;
 
 .advanced-status {
+  --advanced-status-min-height: 28px;
+  --advanced-status-min-width: 58px;
+  --advanced-status-padding: 0 14px;
+  --advanced-status-font-size: 13px;
+  --advanced-status-font-weight: 400;
+  --advanced-status-line-height: 20px;
+  --advanced-status-color-primary: #{$color--primary};
+  --advanced-status-color-off: #1e1e2d;
+  --advanced-status-border-color: #{$color--primary};
+
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
@@ -10,7 +20,7 @@
 
   &__switcher {
     height: fit-content;
-    min-height: 28px;
+    min-height: var(--advanced-status-min-height);
 
     border: none;
 
@@ -23,29 +33,29 @@
       justify-content: center;
       align-items: center;
 
-      min-width: 58px;
+      min-width: var(--advanced-status-min-width);
       height: 100%;
-      padding: 0 14px;
+      padding: var(--advanced-status-padding);
 
-      font-size: 13px;
-      font-weight: 400;
+      font-size: var(--advanced-status-font-size);
+      font-weight: var(--advanced-status-font-weight);
       font-style: normal;
-      line-height: 20px;
+      line-height: var(--advanced-status-line-height);
       cursor: pointer;
       text-align: center;
       white-space: nowrap;
       text-transform: capitalize;
 
-      color: $color--primary;
+      color: var(--advanced-status-color-primary);
       background-color: transparent;
 
       &_off {
-        color: #1e1e2d;
+        color: var(--advanced-status-color-off);
       }
     }
 
     .text-switcher__slider {
-      border: 1px solid $color--primary;
+      border: 1px solid var(--advanced-status-border-color);
       background-color: transparent;
     }
   }

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.stories.tsx

@@ -0,0 +1,60 @@
+import type { StoryFn } from '@storybook/react';
+
+import type { IAdvancedStatusProps } from './AdvancedStatus.interface';
+import { useEffect, useState } from 'react';
+
+import AdvancedStatus from './AdvancedStatus';
+import '../../../../../scss/main.scss';
+
+type Story = StoryFn<IAdvancedStatusProps>;
+export default {
+  title: 'Form Elements/AdvancedStatus',
+  component: AdvancedStatus,
+  argTypes: {
+    value: {
+      description: 'boolean. optional',
+    },
+    className: {
+      description: 'string. optional',
+    },
+    testId: {
+      description: 'string. optional',
+    },
+  },
+};
+
+function Template(args: IAdvancedStatusProps) {
+  const [value, setValue] = useState<IAdvancedStatusProps['value']>(null);
+
+  const buttonStyles = {
+    border: '1px solid black',
+    padding: '10px',
+    marginTop: '10px',
+  };
+
+  useEffect(() => {
+    if (value === null) setTimeout(() => setValue(args.value), 1500);
+  }, [value]);
+
+  return (
+    <>
+      <AdvancedStatus {...args} value={value} onChange={setValue} />
+      <button style={buttonStyles} disabled={value === null} onClick={() => setValue(null)}>
+        Reload
+      </button>
+    </>
+  );
+}
+
+export const TemplateAdvancedStatus: Story = Template.bind({});
+
+TemplateAdvancedStatus.args = {
+  value: false,
+  className: 'test-class',
+  testId: 'test-id',
+  activeText: 'Approved',
+  inactiveText: 'Review',
+  disabled: false,
+  isPrimary: true,
+  primaryStatusText: 'Primary',
+};

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.test.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+
+import AdvancedStatus from './AdvancedStatus';
+
+// Мокаем компонент Status, если он не нужен для тестов
+jest.mock('../../UI/Status/Status', () => ({ children }: { children: React.ReactNode }) => (
+  <div>{children}</div>
+));
+
+describe('advancedStatus Component', () => {
+  it('renders without crashing', () => {
+    render(<AdvancedStatus onChange={() => {}} inactiveText="Inactive" activeText="Active" value={true} />);
+    expect(screen.getByTestId('advanced-status')).toBeInTheDocument();
+  });
+
+  it('renders with correct text based on value', () => {
+    render(<AdvancedStatus onChange={() => {}} inactiveText="Inactive" activeText="Active" value={true} />);
+    // Проверяем, что отображается "Active"
+    expect(screen.getByText('Active')).toBeInTheDocument();
+
+    render(<AdvancedStatus onChange={() => {}} inactiveText="Inactive" activeText="Active" value={false} />);
+    // Проверяем, что отображается "Inactive"
+    const inactiveElements = screen.getAllByText('Inactive');
+    expect(inactiveElements.length).toBeGreaterThan(0); // Проверяем, что хотя бы один элемент присутствует
+    inactiveElements.forEach((element) => {
+      expect(element).toBeInTheDocument();
+    });
+  });
+
+  it('should call onChange when clicked', () => {
+    const onChangeMock = jest.fn();
+    render(
+      <AdvancedStatus onChange={onChangeMock} inactiveText="Inactive" activeText="Active" value={false} />,
+    );
+
+    fireEvent.click(screen.getByText('Inactive'));
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies correct class names based on props', () => {
+    const { container } = render(
+      <AdvancedStatus
+        onChange={() => {}}
+        inactiveText="Inactive"
+        activeText="Active"
+        value={true}
+        disabled={true}
+        className="custom-class"
+      />,
+    );
+    expect(container.firstChild).toHaveClass('advanced-status_disabled');
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('does not render Status component when isPrimary is false', () => {
+    render(
+      <AdvancedStatus
+        onChange={() => {}}
+        inactiveText="Inactive"
+        activeText="Active"
+        value={true}
+        isPrimary={false}
+      />,
+    );
+    expect(screen.queryByText('warning')).not.toBeInTheDocument();
+  });
+
+  it('renders Status component when isPrimary is true', () => {
+    render(
+      <AdvancedStatus
+        onChange={() => {}}
+        inactiveText="Inactive"
+        activeText="Active"
+        value={true}
+        isPrimary={true}
+        primaryStatusText="Primary Status"
+      />,
+    );
+    expect(screen.getByText('Primary Status')).toBeInTheDocument();
+  });
+
+  it('applies undefined styles if value is undefined or null', () => {
+    const { container } = render(
+      <AdvancedStatus onChange={() => {}} inactiveText="Inactive" activeText="Active" value={null} />,
+    );
+    expect(container.firstChild).toHaveClass('advanced-status_undefined');
+  });
+});

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.tsx

@@ -0,0 +1,56 @@
+import type { IAdvancedStatusProps } from './AdvancedStatus.interface';
+import TextSwitcher from '@/Atomic/FormElements/TextSwitcher/TextSwitcher';
+
+import Status from '@/Atomic/UI/Status/Status';
+import cn from 'classnames';
+
+import React from 'react';
+
+import './AdvancedStatus.scss';
+
+const RC = 'advanced-status';
+
+const AdvancedStatus: React.FC<IAdvancedStatusProps> = ({
+  onChange,
+  inactiveText,
+  activeText,
+  value,
+  disabled = false,
+  isPrimary = false,
+  primaryStatusText,
+  className,
+  testId = RC,
+  ...props
+}) => {
+  const isUndefined = value === undefined || value === null;
+
+  return (
+    <div
+      {...props}
+      data-testid={testId}
+      className={cn(
+        RC,
+        {
+          'advanced-status_undefined': isUndefined,
+          'advanced-status_disabled': disabled,
+        },
+        className,
+      )}
+    >
+      <TextSwitcher
+        onChange={onChange}
+        isActive={value || false}
+        inactiveText={inactiveText}
+        activeText={activeText}
+        className="advanced-status__switcher"
+      />
+      {isPrimary && (
+        <Status className="advanced-status__status" status="warning">
+          {primaryStatusText}
+        </Status>
+      )}
+    </div>
+  );
+};
+
+export default AdvancedStatus;

package/dist/Atomic/FormElements/AdvancedStatus/index.ts

@@ -0,0 +1,4 @@
+import AdvancedStatus from './AdvancedStatus';
+
+export default AdvancedStatus;
+export type { IAdvancedStatusProps } from './AdvancedStatus.interface';

package/dist/Atomic/FormElements/Calendar/Calendar.props.ts

@@ -0,0 +1,33 @@
+import type { Moment } from 'moment';
+
+import type { IUniProps } from '../../../types/base.interface';
+
+interface CalendarParams {
+  minDate?: string | Date;
+  maxDate?: string | Date;
+  momentMinDate?: Moment;
+  momentMaxDate?: Moment;
+  isDontLimitFuture?: boolean;
+}
+
+export interface CalendarProps extends IUniProps {
+  date: string;
+  setDate: (date: string) => void;
+  setIsOpened: (isOpened: boolean) => void;
+  allowPrev?: boolean;
+  allowNext?: boolean;
+  params: CalendarParams;
+  isListTop?: boolean;
+}
+
+interface DayType {
+  date: Date;
+}
+
+interface WeekDays {
+  [key: number]: DayType;
+}
+
+export interface Days {
+  [key: number]: WeekDays;
+}

package/dist/Atomic/FormElements/Calendar/Calendar.scss

@@ -461,6 +461,7 @@
     box-sizing: border-box;
 
     &__title {
+      display: flex;
       &-month {
         margin-right: 5px;
       }

package/dist/src/Atomic/FormElements/ActionAlert/ActionAlert.interface.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});