chili-ui 0.0.1

package/leda/components/MaskedInput/index.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import {
+  getClassNames, useTheme, toStringOrEmpty, useProps, getIsEmptyAndRequired,
+} from '../../utils';
+import { Div } from '../Div';
+import type { MaskedInputProps } from './types';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { useValidation } from '../Validation';
+import {
+  createBlurHandler, createChangeHandler, createFocusHandler, createKeyDownHandler, createResetHandler,
+} from './handlers';
+import { useCustomElements } from './hooks';
+import { getValue, getValueToValidate } from './helpers';
+
+export const MaskedInput = React.forwardRef((props: MaskedInputProps, ref: React.Ref<HTMLElement>) => {
+  const {
+    className,
+    defaultValue,
+    inputRender,
+    invalidMessage,
+    invalidMessageRender,
+    isDisabled,
+    isRequired,
+    isValid: isValidProp,
+    mask,
+    name,
+    onBlur, // should not get into restProps
+    onChange, // should not get into restProps
+    onEnterPress,
+    onFocus,
+    placeholder,
+    placeholderChar,
+    prefixRender,
+    requiredMessage,
+    shouldValidateUnmounted,
+    suffixRender,
+    theme: themeProp,
+    validationMessageRender,
+    validator,
+    value: valueProp,
+    ...restProps
+  } = useProps(props);
+
+  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.maskedInput);
+
+  const [valueState, setValue] = React.useState<string>(toStringOrEmpty(defaultValue || ''));
+
+  const [isFocused, setFocused] = React.useState<boolean>(false);
+
+  const maskedInputRef = React.useRef<HTMLInputElement | null>(null);
+  const valuePropRef = React.useRef(valueProp);
+
+  const value = getValue(valueProp, valueState);
+
+  const valueToValidate = getValueToValidate({
+    value, maskedInputRef, placeholderChar,
+  });
+
+  const {
+    isValid, validateCurrent, InvalidMessage,
+  } = useValidation({
+    ...props, value: valueToValidate,
+  }, {
+    value: valueState,
+  }, {
+    reset: createResetHandler({
+      props, setValue, value: toStringOrEmpty(defaultValue || ''),
+    }),
+  });
+
+  const state = { value: valueState, isFocused, isValid };
+
+  // revalidate value when it is changed from the outside
+  React.useEffect(() => {
+    if (valueProp !== undefined
+      && isFocused === false
+      && maskedInputRef.current
+    ) {
+      // initial rendering (is pristine, do not validate)
+      if (valuePropRef.current === valueProp) {
+        return;
+      }
+
+      const currentValueToValidate = getValueToValidate({
+        value, maskedInputRef, placeholderChar,
+      });
+
+      validateCurrent(currentValueToValidate);
+    }
+  }, [isFocused, placeholderChar, validateCurrent, value, valueProp]);
+
+  const handleBlur = createBlurHandler(props, state, {
+    validateCurrent,
+    value,
+    setFocused,
+    maskedInputRef,
+    placeholderChar,
+  });
+
+  const handleChange = createChangeHandler(props, state, {
+    setValue,
+  });
+
+  const handleFocus = createFocusHandler(props, state, {
+    setFocused,
+    value,
+  });
+
+  const handleKeyDown = createKeyDownHandler(props);
+
+  const wrapperClassNames = getClassNames(
+    theme.wrapper,
+    className,
+  );
+
+  const inputWrapperClassNames = getClassNames(
+    theme.inputWrapper,
+    {
+      [theme.inputWrapperInvalid]: !isValid,
+      [theme.inputWrapperDisabled]: isDisabled,
+      [theme.inputWrapperFocused]: isFocused,
+      [theme.inputWrapperRequired]: getIsEmptyAndRequired(value, isRequired),
+    },
+  );
+
+  const {
+    Wrapper,
+    Input,
+  } = useCustomElements(props, state);
+
+  return (
+    <Wrapper
+      className={wrapperClassNames}
+      ref={ref}
+    >
+      <Div className={inputWrapperClassNames}>
+        <Input
+          {...restProps}
+          aria-invalid={!isValid}
+          aria-required={isRequired}
+          className={theme.input}
+          isDisabled={isDisabled}
+          mask={mask}
+          name={name}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          placeholderChar={placeholderChar}
+          value={value}
+          ref={maskedInputRef}
+        />
+      </Div>
+      {!isFocused && !isDisabled && <InvalidMessage />}
+    </Wrapper>
+  );
+}) as React.FC<MaskedInputProps>;
+
+MaskedInput.displayName = 'MaskedInput';

package/leda/components/MaskedInput/mask.md

@@ -0,0 +1,26 @@
+# Masked input
+
+Applies to the `MaskedInput` component.
+Specifies the format of the value to be entered into the input.
+It is composed of a set of special characters and passed to the `mask` prop:
+
+## Character Description
+
+* `#` - Requires a digit (0-9).
+* `l` - Requires an Latin alphabet character (a-Z).
+* `L` - Requires an Latin alphabet character (a-Z), converts to an uppercase letter when entered.
+* `c` - Requires a Cyrillic alphabet character (а-Я).
+* `C` - Requires a Cyrillic alphabet character (а-Я), converts to an uppercase letter when entered.
+* `x` - Any character.
+* `w` - Requires a digit (0-9) or a Latin alphabet character (a-Z).
+* `z` - Requires a digit (0-9), a Latin alphabet character (a-Z), or a Cyrillic alphabet character (а-Я).
+
+## Examples
+
+mask="+49 (###) ###-###-###" // +49 (123) 456-78-90 (phone number)
+
+mask="#### #### #### ####" // 1234 5678 9012 3456 (bank card number)
+
+mask="LL#########LL" // CA123456789UA (track number of international mail)
+
+mask="CC-##" // АБ-22

package/leda/components/MaskedInput/theme.ts

@@ -0,0 +1,10 @@
+/* eslint-disable key-spacing */
+export const defaultMaskedInputTheme = {
+  inputWrapperInvalid:      'ld-danger',
+  inputWrapperDisabled:     'ld-disabled',
+  inputWrapperFocused:      'ld-focused',
+  inputWrapperRequired:     'ld-required',
+  inputWrapper:             'ld-input-element-wrapper',
+  input:                    'ld-input-element',
+  wrapper:                  'ld-input-wrapper',
+};

package/leda/components/MaskedInput/types.ts

@@ -0,0 +1,90 @@
+import type * as React from 'react';
+import type { ValidationProps } from '../Validation/types';
+import type { PartialGlobalDefaultTheme } from '../../utils/useTheme';
+import type { COMPONENTS_NAMESPACES } from '../../constants';
+import type { CustomRender, SetState } from '../../commonTypes';
+import type { DivProps } from '../Div';
+import type {
+  ChangeEvent as BaseChangeEvent, MaskedInputBaseProps, BlurEvent, EnterPressEvent, FocusEvent,
+} from '../../src/MaskedInputBase/types';
+
+export type {
+  BlurEvent, EnterPressEvent, FocusEvent,
+};
+
+export interface ResetEvent {
+  component: {
+    inputValue: string,
+    name?: string,
+    value: string,
+  },
+}
+
+export type ChangeEvent = BaseChangeEvent | ResetEvent;
+
+export interface MaskedInputProps extends ValidationProps {
+  /** Default value */
+  defaultValue?: string,
+  /** Input customizator. It replaces MaskedInputBase! */
+  inputRender?: CustomRender<MaskedInputProps, MaskedInputState, MaskedInputBaseProps>,
+  /** Disabled state */
+  isDisabled?: boolean,
+  /** Mask, see mask.md for details */
+  mask: string,
+  /** Change handler */
+  onChange?: (event: ChangeEvent) => void,
+  /** Blur handler */
+  onBlur?: (event: BlurEvent) => void,
+  /** Enter press handler */
+  onEnterPress?: (ev: EnterPressEvent) => void,
+  /** Focus handler */
+  onFocus?: (event: FocusEvent) => void,
+  /** Placeholder */
+  placeholder?: string,
+  /** _ by default */
+  placeholderChar?: string,
+  /** Ref */
+  ref?: React.Ref<HTMLElement>,
+  /** Theme */
+  theme?: PartialGlobalDefaultTheme[typeof COMPONENTS_NAMESPACES.maskedInput],
+  /** Value */
+  value?: string | null,
+  /** Wrapper customizator */
+  wrapperRender?: CustomRender<MaskedInputProps, MaskedInputState, DivProps>,
+  /** _css-class-names */
+  [x: string]: unknown,
+}
+
+export interface MaskedInputState {
+  value: string,
+  isFocused: boolean,
+  isValid: boolean,
+}
+
+export interface ChangeData {
+  setValue: SetState<string>,
+}
+
+export interface BlurData {
+  validateCurrent: (value?: string) => boolean,
+  setFocused: SetState<boolean>,
+  value: string,
+  maskedInputRef: React.RefObject<HTMLInputElement>,
+  placeholderChar?: string,
+}
+
+export interface FocusData {
+  setFocused: SetState<boolean>,
+  value: string,
+}
+
+export interface CustomElements {
+  Wrapper: React.FC<DivProps>,
+  Input: React.FC<MaskedInputBaseProps>,
+}
+
+export interface ValueToValidateData {
+  value: string,
+  maskedInputRef: React.RefObject<HTMLInputElement | null>,
+  placeholderChar?: string,
+}

package/leda/components/Modal/Modal.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ModalWindow } from './ModalWindow';
+import type { ModalProps } from './types';
+
+export const Modal = React.forwardRef((props: ModalProps, ref?: React.Ref<HTMLElement>): React.ReactNode => {
+  if (props.isOpen) {
+    return (
+      props.isOpen && ReactDOM.createPortal(
+        <ModalWindow
+          isOpen={props.isOpen}
+          innerRef={ref as unknown as React.Ref<HTMLElement>}
+          {...(props as React.PropsWithoutRef<ModalProps>)}
+        >
+          {props.children}
+        </ModalWindow>,
+        document.querySelectorAll('body')[0],
+      )
+    );
+  }
+
+  return null;
+}) as React.FC<ModalProps>;
+
+Modal.displayName = 'Modal';

package/leda/components/Modal/ModalBody.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import { getClassNames, useElement, useProps } from '../../utils';
+import { Div } from '../Div';
+import { LedaContext } from '../LedaProvider';
+import { ModalContext } from './ModalContext';
+import type { ModalElementsProps } from './types';
+
+export const ModalBody: React.FC<ModalElementsProps> = (props: ModalElementsProps): React.ReactElement => {
+  const {
+    className, children, wrapperRender, ...restProps
+  } = useProps(props);
+
+  const modalContext = React.useContext(ModalContext);
+
+  const { renders: { modalBody: modalBodyRenders } } = React.useContext(LedaContext);
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Div,
+    wrapperRender || modalBodyRenders.wrapperRender,
+    props,
+  );
+
+  return (
+    <Wrapper
+      className={getClassNames(className, modalContext.bodyClassName)}
+      {...restProps}
+    >
+      {children}
+    </Wrapper>
+  );
+};
+
+ModalBody.displayName = 'ModalBody';

package/leda/components/Modal/ModalContext.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { globalDefaultTheme } from '../LedaProvider';
+import type { ModalContextType } from './types';
+
+export const ModalContext = React.createContext<ModalContextType>({
+  headerClassName: globalDefaultTheme.modal.header,
+  bodyClassName: globalDefaultTheme.modal.body,
+  footerClassName: globalDefaultTheme.modal.footer,
+});

package/leda/components/Modal/ModalFooter.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+import { LedaContext } from '../LedaProvider';
+import { ModalContext } from './ModalContext';
+import { Div } from '../Div';
+import { getClassNames, useElement, useProps } from '../../utils';
+import type { ModalElementsProps } from './types';
+
+export const ModalFooter: React.FC<ModalElementsProps> = (props: ModalElementsProps): React.ReactElement => {
+  const {
+    className, children, wrapperRender, ...restProps
+  } = useProps(props);
+
+  const modalContext = React.useContext(ModalContext);
+
+  const { renders: { modalFooter: modalFooterRenders } } = React.useContext(LedaContext);
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Div,
+    wrapperRender || modalFooterRenders.wrapperRender,
+    props,
+  );
+
+  return (
+    <Wrapper
+      className={getClassNames(className, modalContext.footerClassName)}
+      {...restProps}
+    >
+      {children}
+    </Wrapper>
+  );
+};

package/leda/components/Modal/ModalHeader.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import { LedaContext } from '../LedaProvider';
+import { ModalContext } from './ModalContext';
+import { Div } from '../Div';
+import { getClassNames, useElement, useProps } from '../../utils';
+import type { ModalElementsProps } from './types';
+
+export const ModalHeader: React.FC<ModalElementsProps> = (props: ModalElementsProps): React.ReactElement => {
+  const {
+    className, children, wrapperRender, ...restProps
+  } = useProps(props);
+
+  const modalContext = React.useContext(ModalContext);
+
+  const { renders: { modalHeader: modalHeaderRenders } } = React.useContext(LedaContext);
+
+  const Wrapper = useElement(
+    'Wrapper',
+    Div,
+    wrapperRender || modalHeaderRenders.wrapperRender,
+    props,
+  );
+
+  return (
+    <Wrapper
+      className={getClassNames(className, modalContext.headerClassName)}
+      {...restProps}
+    >
+      {children}
+    </Wrapper>
+  );
+};
+
+ModalHeader.displayName = 'ModalHeader';

package/leda/components/Modal/ModalWindow.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  getClassNames, useTheme, useProps,
+} from '../../utils';
+import { createCloseButtonClickHandler, createEscapePressHandler, createOverlayClickHandler } from './handlers';
+import { useCustomElements } from './hooks';
+import type { ModalWindowProps } from './types';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+import { ModalContext } from './ModalContext';
+import { IconTypes } from '../..';
+
+export const ModalWindow = (props: ModalWindowProps): React.ReactElement => {
+  const {
+    children,
+    className,
+    innerRef,
+    onClose,
+    onCloseButtonClick,
+    onEscapePress,
+    onOverlayClick,
+    size,
+    theme: themeProp,
+    isOpen,
+    wrapperRender,
+    iconRender,
+    ...restProp
+  } = useProps(props);
+
+  const theme = useTheme(themeProp, COMPONENTS_NAMESPACES.modal);
+
+  const handleEscapePress = createEscapePressHandler(props);
+
+  const handleOverlayClick = createOverlayClickHandler(props);
+
+  const handleCloseButtonClick = createCloseButtonClickHandler(props);
+
+  React.useEffect((): () => void => {
+    document.addEventListener('keydown', handleEscapePress as unknown as EventListener);
+
+    const prevOverflow = document.body.style.overflow;
+
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = prevOverflow;
+
+      document.removeEventListener('keydown', handleEscapePress as unknown as EventListener);
+    };
+  }, [handleEscapePress]);
+
+  const wrapperClassname = getClassNames(
+    theme.wrapper,
+  );
+
+  const windowClassname = getClassNames(
+    theme.window,
+    className,
+  );
+
+  const {
+    Wrapper,
+    Icon,
+  } = useCustomElements(props);
+
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const modalContext = {
+    headerClassName: theme.header,
+    bodyClassName: theme.body,
+    footerClassName: theme.footer,
+  };
+
+  return (
+    <ModalContext.Provider value={modalContext}>
+      <Wrapper
+        ref={innerRef}
+        className={wrapperClassname}
+        onClick={handleOverlayClick}
+        {...restProp}
+      >
+        <div
+          className={windowClassname}
+        >
+          <Icon
+            icon={IconTypes.Icons.X}
+            onClick={handleCloseButtonClick}
+            className={theme.cross}
+          />
+          {children}
+        </div>
+      </Wrapper>
+    </ModalContext.Provider>
+  );
+};