@inceptionbg/iui 2.0.23 → 2.0.25

package/src/components/Inputs/TimeInput/TimeInput.tsx

@@ -1,81 +1,81 @@
-import clsx from 'clsx';
-import { FC } from 'react';
-import { InputWrapper } from '../InputWrapper';
-
-export interface ITimeInputProps {
-  time: string;
-  setTime: (newTime: string) => void;
-  label?: string;
-  disabled?: boolean;
-  required?: boolean;
-  isClearable?: boolean;
-  className?: string;
-}
-
-export const TimeInput: FC<ITimeInputProps> = ({
-  time = '00:00',
-  setTime,
-  label,
-  disabled,
-  required,
-  isClearable = true,
-  className,
-}) => {
-  const [hours, minutes] = time.split(':').map(t => t.padStart(2, '0'));
-
-  const handleChange = (e: string, type: 'hh' | 'mm') => {
-    let value = isNaN(+e) || e === '-1' ? '00' : e.replace(/\D/g, '');
-    if (value.length > 2) {
-      value = value.substring(1);
-    }
-
-    if (type === 'hh') {
-      const newHours = Math.min(23, parseInt(value) || 0)
-        .toString()
-        .padStart(2, '0');
-      setTime(`${newHours}:${minutes}`);
-    } else {
-      const newMinutes = Math.min(59, parseInt(value) || 0)
-        .toString()
-        .padStart(2, '0');
-      setTime(`${hours}:${newMinutes}`);
-    }
-  };
-
-  return (
-    <InputWrapper
-      label={label}
-      required={required}
-      disabled={disabled}
-      onClearInput={isClearable && time && !disabled ? () => setTime('00:00') : undefined}
-      className={clsx(className, 'time-input-wrapper')}
-    >
-      <div className="time-input">
-        <input
-          type="number"
-          value={hours}
-          onChange={e => handleChange(e.target.value, 'hh')}
-          onClick={e => {
-            const input = e.target as HTMLInputElement;
-            input.select();
-          }}
-          disabled={disabled}
-          required={required}
-          style={{ textAlign: 'right' }}
-        />
-        <span className="fs-m">:</span>
-        <input
-          type="number"
-          value={minutes}
-          onChange={e => handleChange(e.target.value, 'mm')}
-          onClick={e => {
-            const input = e.target as HTMLInputElement;
-            input.select();
-          }}
-          disabled={disabled}
-          required={required}
-        />
-      </div>
-    </InputWrapper>
-  );
-};
+import type { FC } from 'react';
+import clsx from 'clsx';
+import { InputWrapper } from '../InputWrapper';
+
+export interface ITimeInputProps {
+  time: string;
+  setTime: (newTime: string) => void;
+  label?: string;
+  disabled?: boolean;
+  required?: boolean;
+  isClearable?: boolean;
+  className?: string;
+}
+
+export const TimeInput: FC<ITimeInputProps> = ({
+  time = '00:00',
+  setTime,
+  label,
+  disabled,
+  required,
+  isClearable = true,
+  className,
+}) => {
+  const [hours, minutes] = time.split(':').map(t => t.padStart(2, '0'));
+
+  const handleChange = (e: string, type: 'hh' | 'mm') => {
+    let value = isNaN(+e) || e === '-1' ? '00' : e.replace(/\D/g, '');
+    if (value.length > 2) {
+      value = value.substring(1);
+    }
+
+    if (type === 'hh') {
+      const newHours = Math.min(23, parseInt(value) || 0)
+        .toString()
+        .padStart(2, '0');
+      setTime(`${newHours}:${minutes}`);
+    } else {
+      const newMinutes = Math.min(59, parseInt(value) || 0)
+        .toString()
+        .padStart(2, '0');
+      setTime(`${hours}:${newMinutes}`);
+    }
+  };
+
+  return (
+    <InputWrapper
+      label={label}
+      required={required}
+      disabled={disabled}
+      onClearInput={isClearable && time && !disabled ? () => setTime('00:00') : undefined}
+      className={clsx(className, 'time-input-wrapper')}
+    >
+      <div className="time-input">
+        <input
+          type="number"
+          value={hours}
+          onChange={e => handleChange(e.target.value, 'hh')}
+          onClick={e => {
+            const input = e.target as HTMLInputElement;
+            input.select();
+          }}
+          disabled={disabled}
+          required={required}
+          style={{ textAlign: 'right' }}
+        />
+        <span className="fs-m">:</span>
+        <input
+          type="number"
+          value={minutes}
+          onChange={e => handleChange(e.target.value, 'mm')}
+          onClick={e => {
+            const input = e.target as HTMLInputElement;
+            input.select();
+          }}
+          disabled={disabled}
+          required={required}
+        />
+      </div>
+    </InputWrapper>
+  );
+};

package/src/components/List/List.tsx

@@ -1,20 +1,21 @@
-import type { FC } from 'react';
-import { IListItem, ListItem } from './ListItem';
-
-interface Props {
-  items?: IListItem[];
-  noItemsMessage?: string;
-}
-
-export const List: FC<Props> = ({ items, noItemsMessage }) => {
-  if (!items || items.length === 0)
-    return noItemsMessage ? <p className="fs-16 new-line">{noItemsMessage}</p> : null;
-
-  return (
-    <div className="iui-list">
-      {items.map(item => (
-        <ListItem key={item.id ?? item.label} {...item} />
-      ))}
-    </div>
-  );
-};
+import type { FC } from 'react';
+import type { IListItem } from './ListItem';
+import { ListItem } from './ListItem';
+
+interface Props {
+  items?: IListItem[];
+  noItemsMessage?: string;
+}
+
+export const List: FC<Props> = ({ items, noItemsMessage }) => {
+  if (!items || items.length === 0)
+    return noItemsMessage ? <p className="fs-16 new-line">{noItemsMessage}</p> : null;
+
+  return (
+    <div className="iui-list">
+      {items.map(item => (
+        <ListItem key={item.id ?? item.label} {...item} />
+      ))}
+    </div>
+  );
+};

package/src/components/List/ListItem.tsx

@@ -1,69 +1,70 @@
-import clsx from 'clsx';
-import { useMemo, type FC } from 'react';
-import { IconButton } from '../Button/IconButton';
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IButtonColor } from '../Button/Button';
-
-export interface IListItemAction {
-  icon: IconDefinition;
-  onClick: () => void;
-  disabled?: boolean;
-  color?: IButtonColor;
-  hidden?: boolean;
-}
-
-export interface IListItem {
-  id?: string;
-  label: string;
-  desc?: string;
-  actions?: IListItemAction[];
-  onClick?: () => void;
-  active?: boolean;
-  disabled?: boolean;
-}
-
-export const ListItem: FC<IListItem> = ({
-  label,
-  desc,
-  actions,
-  onClick,
-  active,
-  disabled,
-}) => {
-  const filteredActions = useMemo(
-    () => actions?.filter(action => !action.hidden),
-    [actions]
-  );
-
-  return (
-    <div
-      className={clsx('iui-list-item', { active, disabled, clickable: !!onClick })}
-      onClick={e => {
-        e.stopPropagation();
-        onClick?.();
-      }}
-    >
-      <div>
-        <p className="bold">{label}</p>
-        {desc && <div className="iui-list-item-desc">{desc}</div>}
-      </div>
-      {filteredActions && filteredActions.length > 0 && (
-        <div className="iui-list-item-actions">
-          {filteredActions.map((action, index) => (
-            <IconButton
-              key={index}
-              icon={action.icon}
-              onClick={e => {
-                e.stopPropagation();
-                action.onClick();
-              }}
-              size="s"
-              color={action.color}
-              disabled={action.disabled}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { FC } from 'react';
+import type { IButtonColor } from '../Button/Button';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { IconButton } from '../Button/IconButton';
+
+export interface IListItemAction {
+  icon: IconDefinition;
+  onClick: () => void;
+  disabled?: boolean;
+  color?: IButtonColor;
+  hidden?: boolean;
+}
+
+export interface IListItem {
+  id?: string;
+  label: string;
+  desc?: string;
+  actions?: IListItemAction[];
+  onClick?: () => void;
+  active?: boolean;
+  disabled?: boolean;
+}
+
+export const ListItem: FC<IListItem> = ({
+  label,
+  desc,
+  actions,
+  onClick,
+  active,
+  disabled,
+}) => {
+  const filteredActions = useMemo(
+    () => actions?.filter(action => !action.hidden),
+    [actions]
+  );
+
+  return (
+    <div
+      className={clsx('iui-list-item', { active, disabled, clickable: !!onClick })}
+      onClick={e => {
+        e.stopPropagation();
+        onClick?.();
+      }}
+    >
+      <div>
+        <p className="bold">{label}</p>
+        {desc && <div className="iui-list-item-desc">{desc}</div>}
+      </div>
+      {filteredActions && filteredActions.length > 0 && (
+        <div className="iui-list-item-actions">
+          {filteredActions.map((action, index) => (
+            <IconButton
+              key={index}
+              icon={action.icon}
+              onClick={e => {
+                e.stopPropagation();
+                action.onClick();
+              }}
+              size="s"
+              color={action.color}
+              disabled={action.disabled}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Loader/Loader.tsx

@@ -1,53 +1,59 @@
-import { Children, FC, ReactElement, ReactNode, cloneElement } from 'react';
-import clsx from 'clsx';
-
-interface Props {
-  isLoading: boolean;
-  isFullPage?: boolean;
-  classNameLoader?: string;
-  children?: ReactElement<{ className: string; children: ReactElement | ReactNode }>;
-}
-
-export const Loader: FC<Props> = ({ isLoading, isFullPage, classNameLoader, children }) =>
-  children ? (
-    Children.map(children, child =>
-      cloneElement(child, {
-        className: clsx(child.props.className, { relative: isLoading }),
-        children: (
-          <>
-            {child.props.children}
-            {isLoading && (
-              <div className={clsx('loader', classNameLoader)}>
-                <span className="spinner" />
-              </div>
-            )}
-          </>
-        ),
-      })
-    )
-  ) : isLoading ? (
-    <div className={`${isFullPage ? 'full-page-loader' : 'empty-loader'} relative`}>
-      <div className={clsx('loader', classNameLoader)}>
-        <span className="spinner" />
-      </div>
-    </div>
-  ) : (
-    <></>
-  );
-
-export const FullScreenLoader: FC<{ isLoading: boolean }> = ({ isLoading }) =>
-  isLoading ? (
-    <div className="full-screen-loader">
-      <div className="loader">
-        <span className="spinner" />
-      </div>
-    </div>
-  ) : null;
-
-export const LazyLoader: FC = () => (
-  <div className="lazy-loader">
-    <div className="loader">
-      <span className="spinner" />
-    </div>
-  </div>
-);
+import type { FC, ReactElement, ReactNode } from 'react';
+import { Children, cloneElement } from 'react';
+import clsx from 'clsx';
+
+interface Props {
+  isLoading: boolean;
+  isFullPage?: boolean;
+  classNameLoader?: string;
+  children?: ReactElement<{ className: string; children: ReactElement | ReactNode }>;
+}
+
+export const Loader: FC<Props> = ({
+  isLoading,
+  isFullPage,
+  classNameLoader,
+  children,
+}) =>
+  children ? (
+    Children.map(children, child =>
+      cloneElement(child, {
+        className: clsx(child.props.className, { relative: isLoading }),
+        children: (
+          <>
+            {child.props.children}
+            {isLoading && (
+              <div className={clsx('loader', classNameLoader)}>
+                <span className="spinner" />
+              </div>
+            )}
+          </>
+        ),
+      })
+    )
+  ) : isLoading ? (
+    <div className={`${isFullPage ? 'full-page-loader' : 'empty-loader'} relative`}>
+      <div className={clsx('loader', classNameLoader)}>
+        <span className="spinner" />
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+
+export const FullScreenLoader: FC<{ isLoading: boolean }> = ({ isLoading }) =>
+  isLoading ? (
+    <div className="full-screen-loader">
+      <div className="loader">
+        <span className="spinner" />
+      </div>
+    </div>
+  ) : null;
+
+export const LazyLoader: FC = () => (
+  <div className="lazy-loader">
+    <div className="loader">
+      <span className="spinner" />
+    </div>
+  </div>
+);

package/src/components/Loader/ProgressBar.tsx

@@ -1,41 +1,41 @@
-import clsx from 'clsx';
-import type { CSSProperties, FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-interface Props {
-  progress?: number;
-  label?: string;
-}
-
-export const ProgressBar: FC<Props> = ({ progress, label }) => {
-  const { t } = useTranslation();
-
-  if (progress === undefined) return null;
-
-  const now = Math.round(Math.min(Math.max(progress, 0), 100)); // Ensure percentage is between 0 and 100
-
-  return (
-    <div className="progress-bar-container">
-      <div className="progress-label">{label ?? t('LoadingProgress')}</div>
-      <div
-        className="progress-bar-bg"
-        role="progressbar"
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={now}
-        style={
-          {
-            '--progress-clip': `${now}%`,
-            '--progress-text': `'${now}%'`,
-          } as CSSProperties & { [key: string]: string }
-        }
-      >
-        <div
-          className={clsx('progress-bar-fill', { loading: now < 100 })}
-          style={{ width: `${now}%` }}
-        />
-        <span className="progress-bar-text">{now}%</span>
-      </div>
-    </div>
-  );
-};
+import type { CSSProperties, FC } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  progress?: number;
+  label?: string;
+}
+
+export const ProgressBar: FC<Props> = ({ progress, label }) => {
+  const { t } = useTranslation();
+
+  if (progress === undefined) return null;
+
+  const now = Math.round(Math.min(Math.max(progress, 0), 100)); // Ensure percentage is between 0 and 100
+
+  return (
+    <div className="progress-bar-container">
+      <div className="progress-label">{label ?? t('LoadingProgress')}</div>
+      <div
+        className="progress-bar-bg"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={now}
+        style={
+          {
+            '--progress-clip': `${now}%`,
+            '--progress-text': `'${now}%'`,
+          } as CSSProperties & { [key: string]: string }
+        }
+      >
+        <div
+          className={clsx('progress-bar-fill', { loading: now < 100 })}
+          style={{ width: `${now}%` }}
+        />
+        <span className="progress-bar-text">{now}%</span>
+      </div>
+    </div>
+  );
+};