@redneckz/wildless-cms-uni-blocks 0.14.594 → 0.14.596

package/src/EventBus/EventBus.ts

@@ -1,36 +1,72 @@
-export class EventBus<EM extends Record<string, any>> {
-  private subscribers: Partial<Record<keyof EM, Array<(ev: EM[keyof EM]) => void>>> = {};
+export type Subscriber<Event> = (ev: Event) => void;
+
+type Cleanup = () => void;
+
+export interface EventBusObservable<EM extends Record<string, any>> {
+  subscribe<K extends keyof EM>(type: K, listener: Subscriber<EM[K]>): Cleanup;
+}
+
+export interface EventBusEmitter<EM extends Record<string, any>> {
+  fire<K extends keyof EM>(type: K, event: EM[K]): void;
+  subject<K extends keyof EM>(type: K, event: EM[K]): Cleanup;
+}
+
+export class EventBus<EM extends Record<string, any>>
+  implements EventBusObservable<EM>, EventBusEmitter<EM>
+{
+  private subscribersMap: Partial<Record<keyof EM, Subscriber<EM[keyof EM]>[]>> = {};
   private subjectsStateMap: Partial<EM> = {};
 
-  subscribe<K extends keyof EM>(type: K, listener: (event: EM[K]) => void) {
-    this.subscribers[type] = (this.subscribers[type] || []).concat(
-      listener as (ev: EM[keyof EM]) => void,
-    );
+  readonly emitter: EventBusEmitter<EM> = this;
+  readonly observable: EventBusObservable<EM> = this;
 
-    const latestEvent = this.subjectsStateMap[type];
-    if (latestEvent) {
-      listener(latestEvent as EM[K]);
-    }
+  subscribe<K extends keyof EM>(type: K, listener: Subscriber<EM[K]>): Cleanup {
+    this.subscribersMap[type] ||= [];
+    this.subscribersMap[type]?.push(listener as Subscriber<EM[keyof EM]>);
+
+    this.fireSubscribers([listener], this.subjectsStateMap[type]);
 
     return () => {
       this.unsubscribe(type, listener);
     };
   }
 
-  private unsubscribe<K extends keyof EM>(type: K, listener: (event: EM[K]) => void) {
-    this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
+  private unsubscribe<K extends keyof EM>(type: K, listener: Subscriber<EM[K]>) {
+    const index = this.subscribersMap[type]?.indexOf(listener as Subscriber<EM[keyof EM]>);
+    if (index && index !== -1) {
+      this.subscribersMap[type]?.splice(index, 1);
+    }
   }
 
   fire<K extends keyof EM>(type: K, event: EM[K]) {
     const isSubjectDeclared = type in this.subjectsStateMap;
     if (isSubjectDeclared) {
+      this.subject(type, event);
+    } else {
+      this.fireSubscribers(this.subscribersMap[type], event);
+    }
+  }
+
+  subject<K extends keyof EM>(type: K, event: EM[K]): Cleanup {
+    if (this.subjectsStateMap[type] !== event) {
       this.subjectsStateMap[type] = event;
+      this.fireSubscribers(this.subscribersMap[type], event);
     }
 
-    this.subscribers[type]?.forEach((s) => s(event));
+    return () => {
+      delete this.subjectsStateMap[type];
+    };
   }
 
-  subject<K extends keyof EM>(type: K, event: EM[K]) {
-    this.subjectsStateMap[type] = event;
+  private fireSubscribers<K extends keyof EM>(
+    subscribers: Subscriber<EM[K]>[] | undefined,
+    event: EM[K] | undefined,
+  ) {
+    if (!subscribers || !event) {
+      return;
+    }
+    for (const _ of subscribers) {
+      _(event);
+    }
   }
 }

package/src/EventBus/defaultEventBus.ts

@@ -1,22 +1,10 @@
-import { type CarouselTariffsCardAction } from '../components/CarouselTariffsCard/CarouselTariffsCardAction';
-import { type Tab } from '../components/TabsLayout/TabsLayoutContent';
 import { type Region } from '../hooks/useRegions';
 import { type DialogAction } from '../ui-kit/DialogManager/DialogAction';
 import { type PopupAction } from '../ui-kit/PopupManager/PopupAction';
 import { EventBus } from './EventBus';
 
-interface TabActivationEvent {
-  type?: Tab['type'];
-  groupName?: string;
-  label?: string;
-}
-
-interface GlobalEventMap {
+export const defaultEventBus = new EventBus<{
   location: Region;
   dialog: DialogAction;
   popup: PopupAction;
-  tab: TabActivationEvent;
-  fold: CarouselTariffsCardAction;
-}
-
-export const defaultEventBus = new EventBus<GlobalEventMap>();
+}>();

package/src/EventBus/useSubject.ts

@@ -0,0 +1,19 @@
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import type { EventBusEmitter } from './EventBus';
+
+export function useSubject<EM extends Record<string, any>, K extends keyof EM>(
+  eventBus: EventBusEmitter<EM>,
+  type: K,
+  initialState: EM[K] | (() => EM[K] | Promise<EM[K]>),
+): (_: EM[K]) => void {
+  useEffect(() => {
+    const state = initialState instanceof Function ? initialState() : initialState;
+    if (state instanceof Promise) {
+      state.then((_) => eventBus.subject(type, _), console.warn);
+    } else {
+      eventBus.subject(type, state);
+    }
+  }, [eventBus, type]);
+
+  return useCallback((_: EM[K]) => eventBus.fire(type, _), [eventBus, type]);
+}

package/src/EventBus/useSubjectState.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { type EventBusObservable } from './EventBus';
+
+export const useSubjectState = <EM extends Record<string, any>, K extends keyof EM>(
+  eventBus: EventBusObservable<EM>,
+  type: K,
+  initialState: EM[K],
+): EM[K] => {
+  const [state, setState] = useState(initialState);
+  useEffect(() => eventBus.subscribe(type, setState), [eventBus, type]);
+
+  return state;
+};

package/src/components/CarouselTariffsCard/CardCellsSection.tsx

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { AspectsProps } from '../../model/AspectsProps';
+import { FoldableWrapper } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { getAspectsAttributes } from '../../utils/dataAttributes';
+import type { TariffsCardCellProps } from './CarouselTariffsCardContent';
+import { renderCardInfo } from './renderCardInfo';
+
+export interface CardCellsSectionProps extends AspectsProps {
+  cardCells?: TariffsCardCellProps[];
+  visibleCellsCount?: number;
+  isUnfolded?: boolean;
+  onToggle?: () => void;
+}
+
+export const CardCellsSection = JSX<CardCellsSectionProps>((props) => {
+  const { cardCells = [], visibleCellsCount = 1, isUnfolded } = props;
+
+  const [visibleCells, hiddenCells] =
+    visibleCellsCount > 0 && cardCells.length >= visibleCellsCount
+      ? [cardCells.slice(0, visibleCellsCount), cardCells.slice(visibleCellsCount)]
+      : [cardCells, []];
+
+  return hiddenCells.length ? (
+    <FoldableWrapper>
+      <div>
+        {visibleCells.map(renderCardInfo)}
+        <FoldableSection isUnfolded={isUnfolded}>{hiddenCells.map(renderCardInfo)}</FoldableSection>
+      </div>
+      <FoldButton {...props} />
+    </FoldableWrapper>
+  ) : (
+    <div>{visibleCells.map(renderCardInfo)}</div>
+  );
+});
+
+const FoldButton = JSX<CardCellsSectionProps>(({ isUnfolded, data, onToggle }) => (
+  <button
+    type="button"
+    className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    {...(isUnfolded ? getAspectsAttributes(data) : {})}
+    onClick={onToggle}
+  >
+    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+    <Icon
+      className="text-primary-text"
+      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+      width="16"
+      height="16"
+    />
+  </button>
+));

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,28 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
-import { type AspectsDef } from '../../model/AspectsProps';
-import { type Slot } from '../../model/ContentPageDef';
-import { type VNode } from '../../model/VNode';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useSubjectState } from '../../EventBus/useSubjectState';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
+import { CardCellsSection } from './CardCellsSection';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import { renderCardInfo } from './renderCardInfo';
+import { carouselTariffsCardEventBus } from './carouselTariffsCardEventBus';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   ({
-    className = '',
+    className,
     title,
     align = 'text-center',
     icon,
@@ -33,22 +27,20 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     data,
     ...rest
   }) => {
-    const cellsNode = cardCells.map(renderCardInfo);
-
-    const [visibleCells, hiddenCells] =
-      visibleCellsCount > 0
-        ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
-        : [cellsNode, []];
-    const [isVisible, setIsVisible] = useState(false);
+    const { isUnfolded, parent: firedParent } = useSubjectState(
+      carouselTariffsCardEventBus.observable,
+      'fold',
+      {},
+    );
+    const isVisible = isUnfolded && firedParent === options?.parent;
 
-    useEffect(
+    const toggle = useCallback(
       () =>
-        defaultEventBus.subscribe('fold', (event) => {
-          if (options?.parent !== undefined && event.parent === options?.parent) {
-            setIsVisible(event.isUnfolded);
-          }
+        carouselTariffsCardEventBus.emitter.fire('fold', {
+          isUnfolded: !isVisible,
+          parent: options?.parent,
         }),
-      [options?.parent],
+      [isVisible, options?.parent],
     );
 
     return (
@@ -62,49 +54,14 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
         {button?.text ? <LinkButton className="w-full mt-m mb-lg" {...button} /> : null}
-        {hiddenCells.length ? (
-          <Foldable
-            renderFoldableSection={() => (
-              <div>
-                {visibleCells}
-                <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
-              </div>
-            )}
-            renderFoldButton={
-              cardCells.length >= visibleCellsCount
-                ? renderFoldButton(options?.parent, data, isVisible)
-                : null
-            }
-          />
-        ) : (
-          <div>{visibleCells}</div>
-        )}
+        <CardCellsSection
+          cardCells={cardCells}
+          visibleCellsCount={visibleCellsCount}
+          isUnfolded={isVisible}
+          data={data}
+          onToggle={toggle}
+        />
       </BlockWrapper>
     );
   },
 );
-
-const renderFoldButton =
-  (parent?: Slot, data?: AspectsDef[], isUnfolded = false) =>
-  (): VNode =>
-    (
-      <button
-        className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
-        onClick={() => {
-          if (parent !== undefined) {
-            defaultEventBus.fire('fold', { type: 'fold', isUnfolded: !isUnfolded, parent });
-          }
-        }}
-        type="button"
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...(isUnfolded ? getAspectsAttributes(data) : {})}
-      >
-        <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
-        <Icon
-          className="text-primary-text"
-          name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-          width="16"
-          height="16"
-        />
-      </button>
-    );

package/src/components/CarouselTariffsCard/carouselTariffsCardEventBus.ts

@@ -0,0 +1,11 @@
+import { EventBus } from '../../EventBus/EventBus';
+import { type Slot } from '../../model/ContentPageDef';
+
+export type CarouselTariffsCardFoldAction = {
+  isUnfolded?: boolean;
+  parent?: Slot;
+};
+
+export const carouselTariffsCardEventBus = new EventBus<{
+  fold: CarouselTariffsCardFoldAction;
+}>();

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLocation } from '../../hooks/useLocation';
+import { useLocationState } from '../../hooks/useLocation';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -19,7 +19,7 @@ export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlock
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', title = 'Курсы обмена валют', button, ...rest }) => {
-    const [currentLocation] = useLocation();
+    const currentLocation = useLocationState();
     const exchangeRates = useFetchExchangeRateData(currentLocation);
 
     const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -4,7 +4,7 @@ import { type SearchHeaderProps } from '../../data/CommonData';
 import { type HeaderData } from '../../data/HeaderData';
 import { type NavigationData } from '../../data/NavigationData';
 import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspectsWithInclude';
-import { useLocation } from '../../hooks/useLocation';
+import { useLocationState } from '../../hooks/useLocation';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
 import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
@@ -22,7 +22,7 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
   ({ className, version, ...rest }) => {
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
-    const [currentLocation] = useLocation(rest?.branches?.default);
+    const currentLocation = useLocationState(rest?.branches?.default);
 
     const searchDialog = useSearchDialog(rest);
     const locationDialog = useLocationDialog(rest);

package/src/components/OfficesAtmsMap/AtmsMap.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLocation } from '../../hooks/useLocation';
+import { useLocationState } from '../../hooks/useLocation';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
 import { type Atm } from './OfficesAtmsMapProps';
@@ -30,8 +30,7 @@ export interface AtmsMapProps {
 }
 
 export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {
-  const [currentLocation] = useLocation();
-
+  const currentLocation = useLocationState();
   const regionCode = currentLocation?.code ?? '000';
 
   const { data: officesData, isLoad } = useAtms(regionCode);

package/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLocation } from '../../hooks/useLocation';
+import { useLocationState } from '../../hooks/useLocation';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
 import { getOfficePoint, renderOfficeCard } from './renderOfficeCard';
 import { getRemoteWorkplacePoint, renderRemoteWorkplaceCard } from './renderRemoteWorkplaceCard';
@@ -10,7 +10,7 @@ export interface OfficesMapProps {
 }
 
 export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
-  const [currentLocation] = useLocation();
+  const currentLocation = useLocationState();
   const regionCode = currentLocation?.code ?? '000';
   const { data, isLoad } = useOffices(regionCode);
 

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -4,7 +4,7 @@ import { type HeaderData } from '../../data/HeaderData';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
 import { env } from '../../Env';
-import { useLocation } from '../../hooks/useLocation';
+import { useLocationState } from '../../hooks/useLocation';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
 import { getBasePath } from '../../utils/getBasePath';
@@ -22,7 +22,7 @@ export interface BurgerMenuDialogProps {
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
   ({ menuRef, menuItem, locationDialogProps, closeAll }) => {
     const locationDialog = useLocationDialog(locationDialogProps || {});
-    const [{ name: location }] = useLocation();
+    const { name: location } = useLocationState();
     const menuDimensions = menuRef?.current?.getBoundingClientRect();
     const basePath = getBasePath(env.SITE_URL);
 

package/src/hooks/useLocation.ts

@@ -1,54 +1,40 @@
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
-import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../EventBus/defaultEventBus';
-import { useLatestEvent } from '../EventBus/useLatestEvent';
-import { fetchJSONUnsafe, type FetchJSONUnsafeType } from '../utils/fetchJSON';
+import { useSubject } from '../EventBus/useSubject';
+import { useSubjectState } from '../EventBus/useSubjectState';
+import { fetchJSON } from '../utils/fetchJSON';
 import { type Region } from './useRegions';
 
 const REGION_URL = '/api/v1/region';
 const LOCATION_STORAGE_KEY = 'location';
 
-export function useLocation(defaultLocation = 'Москва'): [Region, (_: Region) => void] {
-  const [currentLocation, fireCurrentLocation] = useLatestEvent(
-    defaultEventBus,
-    'location',
-    restoreLocation() ?? { name: defaultLocation },
-  );
-
-  const selectCurrentLocation = useCallback((_: Region) => {
-    storeLocation(_);
-    fireCurrentLocation(_);
-  }, []);
-
-  const { data } = useAsyncData(
-    hasStoredLocation() ? null : REGION_URL,
-    fetchJSONUnsafe as FetchJSONUnsafeType<Region>,
-  );
-  useEffect(() => {
-    if (data && !hasStoredLocation()) {
-      fireCurrentLocation(data);
+export function useLocation(defaultLocation = 'Москва'): (_: Region) => void {
+  useEffect(() => defaultEventBus.subscribe('location', storeLocation), []);
+
+  return useSubject(defaultEventBus.emitter, 'location', restoreLocation(defaultLocation));
+}
+
+export function useLocationState(defaultLocation = 'Москва'): Region {
+  return useSubjectState(defaultEventBus.observable, 'location', { name: defaultLocation });
+}
+
+function restoreLocation(defaultLocation: string) {
+  return async (): Promise<Region> => {
+    if (!globalThis.localStorage?.hasItem(LOCATION_STORAGE_KEY)) {
+      storeLocation(await fetchJSON<Region>(REGION_URL));
+    }
+
+    const storedLocation = globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY);
+    try {
+      return storedLocation && JSON.parse(storedLocation);
+    } catch (ex) {
+      // Do nothing
     }
-  }, [data]);
 
-  return [currentLocation ?? { name: defaultLocation }, selectCurrentLocation];
+    return { name: defaultLocation };
+  };
 }
 
-const hasStoredLocation = () => Boolean(globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY));
-
-const restoreLocation = (): Region | null => {
-  try {
-    const data = globalThis.localStorage?.getItem(LOCATION_STORAGE_KEY);
-
-    return data && JSON.parse(data);
-  } catch (ex) {
-    return null;
-  }
-};
-
-const storeLocation = (_: Region) => {
-  try {
-    globalThis.localStorage?.setItem(LOCATION_STORAGE_KEY, JSON.stringify(_));
-  } catch (ex) {
-    // Do nothing
-  }
-};
+function storeLocation(_: Region | null | undefined) {
+  _ && globalThis.localStorage?.setItem(LOCATION_STORAGE_KEY, JSON.stringify(_));
+}

package/src/hooks/useReducer.ts

@@ -0,0 +1,21 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export type NotUndefined = object | null;
+export type Reducer<S, A extends NotUndefined> = (state: S, action: A) => S;
+export type Dispatch<A extends NotUndefined> = (action: A) => void;
+
+export function useReducer<S, A extends NotUndefined>(
+  reducer: Reducer<S, A>,
+  initialArg: S,
+): [state: S, dispatch: Dispatch<A>] {
+  const [state, setState] = useState(initialArg);
+
+  const dispatch = useCallback(
+    (action: A) => {
+      setState((_) => reducer(_, action));
+    },
+    [reducer],
+  );
+
+  return [state, dispatch];
+}

package/src/hooks/useRegions.ts

@@ -11,8 +11,11 @@ export interface Region {
   localities?: string[];
 }
 
+const EMPTY_REGIONS: Region[] = [];
+
+// TODO Почему url можно менять? Разве смысл не в инкапсуляции api url. Тоже под рефакторинг попадает
 export function useRegions(url: string = REGIONS_URL): Region[] {
   const { data } = useAsyncData(url, fetchJSONUnsafe as FetchJSONUnsafeType<Region[]>);
 
-  return Array.isArray(data) ? data : [];
+  return Array.isArray(data) ? data : EMPTY_REGIONS;
 }

package/src/model/DefaultControlType.ts

@@ -0,0 +1,7 @@
+export interface DefaultControlType {
+  className?: string;
+  label?: string;
+  error?: string;
+  errors?: string[];
+  placeholder?: string;
+}

package/src/ui-kit/Calculator/renderBinaryRadioButtonGroup.tsx

@@ -44,7 +44,7 @@ export const renderBinaryRadioButtonGroup = ({
     <RadioButtonGroup
       orientation={orientation}
       items={items}
-      checkedItem={items[value ? 0 : 1].id}
+      value={items[value ? 0 : 1].id}
       onChange={(_) => onChange && onChange(_ === items[0].id)}
       {...rest}
     />

package/src/ui-kit/DatePicker/DatePickerControl.tsx

@@ -1,25 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type DefaultControlType } from '../../model/DefaultControlType';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
 import { style } from '../../utils/style';
+import { type ControlProps } from '../ControlProps';
 import { renderErrorText } from '../Input/renderErrorText';
 import { DatePicker } from './DatePicker';
 
-export interface DatePickerControlProps {
-  className?: string;
-  label: string;
-  value?: Date;
-  error?: string;
-  errors?: string[];
-  onChange?: (value: Date) => void;
-}
+export interface DatePickerControlProps extends DefaultControlType, ControlProps<Date> {}
 
 export const DatePickerControl = JSX<DatePickerControlProps>(
-  ({ className, label, error, ...rest }) => (
+  ({ className, label, error, errors, ...rest }) => (
     <div className={style('shrink-0 w-full', className)}>
-      <DatePicker
-        label={label && rest?.errors ? `${label}*` : label}
-        valid={Boolean(!error)}
-        {...rest}
-      />
+      <DatePicker label={getRequiredLabel({ label, errors })} valid={Boolean(!error)} {...rest} />
       {renderErrorText(error)}
     </div>
   ),

package/src/ui-kit/DialogManager/useDialogManager.ts

@@ -8,7 +8,7 @@ export interface DialogOptions {
 
 export const useDialogManager = () => ({
   open: (dialog: VNode, options: DialogOptions = {}) =>
-    defaultEventBus.fire('dialog', { type: 'open', dialog, ...options }),
-  close: () => defaultEventBus.fire('dialog', { type: 'close' }),
-  closeAll: () => defaultEventBus.fire('dialog', { type: 'close', all: true }),
+    defaultEventBus.emitter.fire('dialog', { type: 'open', dialog, ...options }),
+  close: () => defaultEventBus.emitter.fire('dialog', { type: 'close' }),
+  closeAll: () => defaultEventBus.emitter.fire('dialog', { type: 'close', all: true }),
 });

package/src/ui-kit/DialogManager/useDialogsList.ts

@@ -27,7 +27,7 @@ export const useDialogsList = ({
 
   useEffect(
     () =>
-      defaultEventBus.subscribe('dialog', (action) => {
+      defaultEventBus.observable.subscribe('dialog', (action) => {
         switch (action.type) {
           case 'open':
             push(action);