chili-ui 0.0.1

package/leda/form/form.ts

@@ -0,0 +1,129 @@
+import { isString } from 'lodash';
+import * as helpers from './helpers';
+import type {
+  ExternalValidator, Field, FormFieldHelpers, FormFieldsHelpers,
+} from './types';
+import { removeField, validate, getField } from '../components/Validation';
+import { getFieldValidState, removeForm } from '../components/Validation/helpers';
+import type { FormGetField } from '../components/Validation/types';
+
+const validateFieldUsingExternalValidator = (field: Field, externalValidators: ExternalValidator[] | ExternalValidator): Field => {
+  const invalidMessages: string[] = [];
+
+  const externalValidatorsArray = Array.isArray(externalValidators) ? externalValidators : [externalValidators];
+
+  const singleFunctionValidators = externalValidatorsArray.map(helpers.externalToSingleFunctionValidator);
+
+  singleFunctionValidators.forEach((validator) => {
+    if (!validator.validate(field.value)) {
+      field.isValid = false;
+      if (validator.invalidMessage) {
+        invalidMessages.push(validator.invalidMessage);
+      }
+    } else {
+      field.isValid = true;
+    }
+  });
+
+  if (!field.isValid) {
+    field.invalidMessages = invalidMessages;
+  }
+
+  field.setIsValid(field.isValid);
+  field.setMessages(field.invalidMessages);
+
+  return field;
+};
+
+const getFormFieldHelpers = (formName: string, fieldName: string): FormFieldHelpers => ({
+  get: () => getFieldValidState(formName, fieldName),
+  remove: () => {
+    removeField(formName, fieldName, { shouldRemoveUnmounted: true });
+  },
+  reset: () => {
+    const field = getField(formName, fieldName);
+    try {
+      field?.reset();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+      return false;
+    }
+    return true;
+  },
+  validate: (externalValidators) => {
+    const field = helpers.getField(formName, fieldName);
+    if (field == null) {
+      return undefined;
+    }
+
+    if (externalValidators) {
+      return validateFieldUsingExternalValidator(field, externalValidators);
+    }
+
+    validate(formName, fieldName);
+
+    return helpers.getField(formName, fieldName);
+  },
+});
+
+const getFormFieldsHelpers = (formName: string, fieldNames?: string[]): FormFieldsHelpers => {
+  const getFields = () => helpers.getFields(formName, fieldNames);
+  return {
+    get: () => {
+      const fields = getFields();
+      return fields.map((field) => (getFieldValidState(formName, field.name) as FormGetField));
+    },
+    remove: () => {
+      if (fieldNames) {
+        fieldNames.forEach((fieldName) => {
+          removeField(formName, fieldName, { shouldRemoveUnmounted: true });
+        });
+        return;
+      }
+
+      removeForm(formName);
+    },
+    reset: () => {
+      const fields = getFields();
+      try {
+        fields.forEach((field) => {
+          field?.reset();
+        });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+        return false;
+      }
+      return true;
+    },
+    validate: () => {
+      // validation of the whole form with an external validator is not provided by design
+      if (fieldNames) {
+        fieldNames?.forEach((field) => {
+          validate(formName, field);
+        });
+      } else {
+        validate(formName);
+      }
+
+      const fields = getFields();
+      return fields;
+    },
+  };
+};
+
+const form: {
+  (name: string, field: string): FormFieldHelpers,
+  (name: string, fields?: string[]): FormFieldsHelpers,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+} = (formName: string, fieldNames?: string | string[]): any => {
+  if (isString(fieldNames)) {
+    return getFormFieldHelpers(formName, fieldNames);
+  }
+  return getFormFieldsHelpers(formName, fieldNames);
+};
+
+export {
+  form,
+};

package/leda/form/helpers.ts

@@ -0,0 +1,86 @@
+import {
+  isArray, isFunction, isRegExp, isString,
+} from 'lodash';
+import { PREDEFINED_VALIDATORS } from '../components/Validation/predefinedValidators';
+import type {
+  ExternalValidator, Field, Form, SingleFunctionValidator,
+} from './types';
+import type { SomeObject } from '../commonTypes';
+
+// todo: types for value
+// todo: check is working for all components
+export const checkIsFilled = (
+  value: string | number | string [] | number[] | SomeObject | SomeObject[] | null | null[] | undefined,
+): boolean => {
+  if (value == null) {
+    return false;
+  }
+
+  if (isArray(value) || isString(value)) {
+    return value.length !== 0;
+  }
+
+  return true;
+};
+
+export const getForm = (name: string): Form | undefined => {
+  // @ts-expect-error no validation field in window
+  const forms: Form[] = window[Symbol.for('leda/validation-forms')] || [];
+  return forms.find(({
+    name: formName,
+  }) => name === formName);
+};
+
+const getFormFields = (formName: string): Field[] => getForm(formName)?.fields ?? [];
+
+export const pickField = (fields: Field[], fieldName: string): Field | undefined => fields.find((formField: Field) => fieldName === formField.name);
+
+export const getField = (formName: string, fieldName: string): Field | undefined => {
+  const fields = getFormFields(formName);
+  return pickField(fields, fieldName);
+};
+
+export const getFields = (formName: string, fieldNames?: string[]): Field[] => {
+  const fields = getFormFields(formName);
+  if (fieldNames) {
+    return fieldNames.reduce<Field[]>((accumulator, fieldName: string) => {
+      const field = pickField(fields, fieldName);
+      if (field) {
+        accumulator.push(field);
+      }
+      return accumulator;
+    }, []);
+  }
+  return fields;
+};
+
+export const externalToSingleFunctionValidator = (externalValidator: ExternalValidator): SingleFunctionValidator => {
+  const {
+    validator,
+  } = externalValidator;
+  const singleFunctionValidator: SingleFunctionValidator = {
+    validate: () => true,
+  };
+  if (Array.isArray(validator)) {
+    singleFunctionValidator.validate = (value) => validator.every((element) => {
+      const validate = externalToSingleFunctionValidator({
+        validator: element,
+      });
+      return validate.validate(value);
+    });
+  } else if (isFunction(validator)) {
+    singleFunctionValidator.validate = validator;
+  } else if (isRegExp(validator)) {
+    singleFunctionValidator.validate = (value: string) => value.match(validator) != null;
+  } else if (isString(validator)) {
+    const predefinedValidator = PREDEFINED_VALIDATORS[validator];
+    singleFunctionValidator.validate = predefinedValidator.validator;
+    if (externalValidator.invalidMessage == null && predefinedValidator.invalidMessage) {
+      singleFunctionValidator.invalidMessage = predefinedValidator.invalidMessage;
+    }
+  }
+  if (singleFunctionValidator.invalidMessage == null && externalValidator.invalidMessage) {
+    singleFunctionValidator.invalidMessage = externalValidator.invalidMessage;
+  }
+  return singleFunctionValidator;
+};

package/leda/form/index.ts

@@ -0,0 +1,7 @@
+import {
+  form,
+} from './form';
+
+export {
+  form,
+};

package/leda/form/types.ts

@@ -0,0 +1,40 @@
+import type {
+  PredefinedValidator, FormGetField, Form, Field,
+} from '../components/Validation/types';
+
+export {
+  Form, Field,
+};
+
+export interface FunctionalValidator {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (value: any): boolean,
+}
+
+export type Validator = FunctionalValidator | PredefinedValidator | RegExp;
+
+export type InvalidMessage = string;
+
+export interface SingleFunctionValidator {
+  validate: FunctionalValidator,
+  invalidMessage?: InvalidMessage,
+}
+
+export interface ExternalValidator {
+  validator: Validator | Validator[],
+  invalidMessage?: string,
+}
+
+export interface FormFieldHelpers {
+  get: () => FormGetField | undefined,
+  remove: () => void,
+  reset: () => boolean,
+  validate: (warpedValidator?: ExternalValidator | ExternalValidator[]) => Field | undefined,
+}
+
+export interface FormFieldsHelpers {
+  get: () => FormGetField[],
+  remove: () => void,
+  reset: () => boolean,
+  validate: () => Field[],
+}

package/leda/index.ts

@@ -0,0 +1,233 @@
+/* eslint-disable import/no-cycle */
+import { formatDateTime, stringToDate } from './src/DateTimeInput/helpers';
+import {
+  bytesSizeToUnitsSize,
+  generateId,
+  getClassNames,
+  getIsSentenceIncludingWords,
+  getSizeInBytes,
+  scrollIntoView,
+  useElement,
+  useElementRef,
+  useInterval,
+  useProps,
+  useValue,
+} from './utils';
+
+import { A } from './components/A';
+import { Article } from './components/Article';
+import { AutoComplete } from './components/AutoComplete';
+import { Aside } from './components/Aside';
+import { B } from './components/B';
+import { Blockquote } from './components/Blockquote';
+import { Button } from './components/Button';
+import { ButtonGroup } from './components/ButtonGroup';
+import { Calendar } from './components/Calendar';
+import { CheckBox } from './components/CheckBox';
+import { Collapse } from './components/Collapse';
+import { DatePicker } from './components/DatePicker';
+import { DateRange } from './components/DateRange';
+import { DateTimePicker } from './components/DateTimePicker';
+import { DateTimeRange } from './components/DateTimeRange';
+import { Div } from './components/Div';
+import { Dl, Dd, Dt } from './components/Dl';
+import { DropDownSelect } from './components/DropDownSelect';
+import { Figcaption } from './components/Figcaption';
+import { Figure } from './components/Figure';
+import { Footer } from './components/Footer';
+import {
+  Header, H1, H2, H3, H4, H5, H6,
+} from './components/Headers';
+import { I } from './components/I';
+import { Icon } from './components/Icon';
+import { Img } from './components/Img';
+import { Input } from './components/Input';
+import { Label } from './components/Label';
+import { Li } from './components/Li';
+import { Loader } from './components/Loader';
+import { Main } from './components/Main';
+import { Mark } from './components/Mark';
+import { MaskedInput } from './components/MaskedInput';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from './components/Modal';
+import { MultiSelect } from './components/MultiSelect';
+import { Nav } from './components/Nav';
+import { Notifications } from './components/Notifications';
+import { NumericRange } from './components/NumericRange';
+import { NumericTextBox } from './components/NumericTextBox';
+import { Ol } from './components/Ol';
+import { P } from './components/Paragraph';
+import { Pagination } from './components/Pagination';
+import { Password } from './components/Password';
+import { ProgressBar } from './components/ProgressBar';
+import { RadioGroup, RadioButton } from './components/Radio';
+import { Rating } from './components/Rating';
+import { Section } from './components/Section';
+import { Small } from './components/Small';
+import { Span } from './components/Span';
+import { Svg } from './components/Svg';
+import { Switcher } from './components/Switcher';
+import { Tab, Tabs } from './components/Tabs';
+import {
+  Table, ColGroup, Col, THead, TBody, Th, Tr, Td, TFoot,
+} from './components/Table';
+import { Tags, Tag } from './components/Tags';
+import { Tour } from './components/Tour';
+import { Textarea } from './components/Textarea';
+import { TimePicker } from './components/TimePicker';
+import { TimeRange } from './components/TimeRange';
+import { Tooltip } from './components/Tooltip';
+import { Ul } from './components/Ul';
+import { Leda, LedaContext } from './components/LedaProvider';
+import { validate } from './validators';
+
+import * as Validation from './components/Validation';
+import * as AutoCompleteTypes from './components/AutoComplete/types';
+import * as ButtonTypes from './components/Button/types';
+import * as ButtonGroupTypes from './components/ButtonGroup/types';
+import * as CalendarTypes from './components/Calendar/types';
+import * as CheckBoxTypes from './components/CheckBox/types';
+import * as CollapseTypes from './components/Collapse/types';
+import * as DateTimeInputTypes from './src/DateTimeInput/types';
+import * as DateTimeInputRangeTypes from './src/DateTimeInputRange/types';
+import * as DropDownSelectTypes from './components/DropDownSelect/types';
+import * as DivTypes from './components/Div';
+import * as IconTypes from './components/Icon/types';
+import * as InputTypes from './components/Input/types';
+import * as MaskedInputTypes from './components/MaskedInput/types';
+import * as ModalTypes from './components/Modal/types';
+import * as MultiSelectTypes from './components/MultiSelect/types';
+import * as NotificationsTypes from './components/Notifications/types';
+import * as NumericRangeTypes from './components/NumericRange/types';
+import * as NumericTextBoxTypes from './components/NumericTextBox/types';
+import * as PaginationTypes from './components/Pagination/types';
+import * as PasswordTypes from './components/Password/types';
+import * as RadioTypes from './components/Radio/types';
+import * as SwitcherTypes from './components/Switcher/types';
+import * as TabsTypes from './components/Tabs/types';
+import * as TagsTypes from './components/Tags/types';
+import * as TableTypes from './components/Table/types';
+import * as TourTypes from './components/Tour/types';
+import * as TextareaTypes from './components/Textarea/types';
+import * as TooltipTypes from './components/Tooltip/types';
+import * as ValidationTypes from './components/Validation/types';
+import * as commonTypes from './commonTypes';
+
+import { form } from './form';
+
+const utils = {
+  bytesSizeToUnitsSize,
+  formatDateTime,
+  generateId,
+  getClassNames,
+  getIsSentenceIncludingWords,
+  getSizeInBytes,
+  scrollIntoView,
+  stringToDate,
+  useElement,
+  useElementRef,
+  useInterval,
+  useProps,
+  useValue,
+};
+
+export {
+  AutoCompleteTypes,
+  ButtonTypes,
+  ButtonGroupTypes,
+  CalendarTypes,
+  CheckBoxTypes,
+  CollapseTypes,
+  DateTimeInputRangeTypes,
+  DateTimeInputTypes,
+  DropDownSelectTypes,
+  DivTypes,
+  IconTypes,
+  InputTypes,
+  MaskedInputTypes,
+  ModalTypes,
+  MultiSelectTypes,
+  NotificationsTypes,
+  NumericRangeTypes,
+  NumericTextBoxTypes,
+  PaginationTypes,
+  PasswordTypes,
+  RadioTypes,
+  SwitcherTypes,
+  TabsTypes,
+  TableTypes,
+  TagsTypes,
+  TourTypes,
+  TextareaTypes,
+  TooltipTypes,
+  ValidationTypes,
+  commonTypes,
+
+  A,
+  Article,
+  AutoComplete,
+  Aside,
+  B,
+  Blockquote,
+  Button,
+  ButtonGroup,
+  Calendar,
+  CheckBox,
+  Collapse,
+  DatePicker,
+  DateRange,
+  DateTimePicker,
+  DateTimeRange,
+  Div,
+  Dl,
+  Dd,
+  Dt,
+  DropDownSelect,
+  Figcaption,
+  Figure,
+  Footer,
+  Header, H1, H2, H3, H4, H5, H6,
+  I,
+  Icon,
+  Img,
+  Input,
+  Label,
+  Li,
+  Loader,
+  Main,
+  Mark,
+  MaskedInput,
+  Modal, ModalHeader, ModalBody, ModalFooter,
+  MultiSelect,
+  Nav,
+  Notifications,
+  NumericRange,
+  NumericTextBox,
+  Ol,
+  P,
+  Pagination,
+  Password,
+  ProgressBar,
+  RadioGroup, RadioButton,
+  Rating,
+  Section,
+  Small,
+  Span,
+  Svg,
+  Switcher,
+  Tab, Tabs,
+  Table, ColGroup, Col, THead, TBody, Th, Tr, Td, TFoot,
+  Tags, Tag,
+  Tour,
+  Textarea,
+  TimePicker,
+  TimeRange,
+  Tooltip,
+  Ul,
+  Leda, LedaContext,
+  validate,
+  form,
+  utils,
+  Validation,
+};

package/leda/src/CalendarBase/CalendarBase.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { CALENDAR_CLICK_ACTION } from './constants';
+import { useCustomElements } from './hooks';
+import type { CalendarBaseProps } from './types';
+import {
+  getCalendarConditions, getCalendarFormat,
+} from './helpers';
+import { TodayButton } from './TodayButton';
+import { useAdaptivePosition } from '../../utils';
+
+export const CalendarBase = (props: CalendarBaseProps): React.ReactElement | null => {
+  const {
+    boundingContainerRef,
+    hasTodayButton,
+    isOpen = false,
+    isDisabled,
+    onClick,
+    onMouseDown,
+    theme,
+    value,
+    viewDate,
+    viewType,
+    min,
+    max,
+    dateCellRender,
+    weeksRowRender,
+  } = props;
+
+  // following flags are used to disable header buttons in case of min/max
+  const conditions = getCalendarConditions(props);
+
+  const format = getCalendarFormat(props.format);
+
+  const calendarRef = React.useRef<HTMLElement | null>(null);
+
+  const classMap = React.useMemo(() => ({
+    top: theme.wrapperTop,
+    right: theme.wrapperRight,
+  }), [theme.wrapperRight, theme.wrapperTop]);
+
+  // calendar position change on scroll/open
+  useAdaptivePosition({
+    boundingContainerRef,
+    elRef: calendarRef,
+    isOpen,
+    classNames: classMap,
+  });
+
+  const {
+    DateView,
+    MonthView,
+    YearView,
+    CalendarHeader,
+    CalendarWrapper,
+  } = useCustomElements(props);
+
+  if (!isOpen || isDisabled) return null;
+
+  return (
+    <CalendarWrapper
+      className={theme.wrapper}
+      onMouseDown={onMouseDown}
+      ref={calendarRef}
+    >
+      <CalendarHeader
+        conditions={conditions}
+        viewType={viewType}
+        viewDate={viewDate}
+        onClick={onClick}
+        theme={theme}
+      />
+      <DateView
+        onClick={onClick}
+        viewDate={viewDate}
+        dateCellRender={dateCellRender}
+        weeksRowRender={weeksRowRender}
+        min={min}
+        max={max}
+        value={value}
+        theme={theme}
+        viewType={viewType}
+      />
+      <MonthView
+        onClick={onClick}
+        theme={theme}
+        viewDate={viewDate}
+        viewType={viewType}
+        min={min}
+        max={max}
+      />
+      <YearView
+        format={format}
+        onClick={onClick}
+        theme={theme}
+        viewType={viewType}
+        viewDate={viewDate}
+        min={min}
+        max={max}
+      />
+      {hasTodayButton && (
+        <TodayButton
+          onClick={(ev) => onClick(CALENDAR_CLICK_ACTION.TODAY_BUTTON_CLICK, ev)}
+          theme={theme}
+        />
+      )}
+    </CalendarWrapper>
+  );
+};

package/leda/src/CalendarBase/CalendarHeader.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Div } from '../../components/Div';
+import { Span } from '../../components/Span';
+import { getClassNames } from '../../utils';
+import { BUTTON_TYPE, CALENDAR_CLICK_ACTION } from './constants';
+import { getButtonActionType, getCalendarTitle } from './helpers';
+import type { CalendarHeaderProps } from './types';
+import { useMessages } from '../../utils/useMessages';
+import { Icon } from '../../components/Icon';
+import { IconTypes } from '../..';
+import { COMPONENTS_NAMESPACES } from '../../constants';
+
+export const CalendarHeader = (props: CalendarHeaderProps): React.ReactElement => {
+  const {
+    theme, conditions, viewType, viewDate, onClick, ...restProps
+  } = props;
+
+  const messages = useMessages({
+    fieldName: COMPONENTS_NAMESPACES.calendar,
+  });
+
+  return (
+    <Div className={theme.header} {...restProps}>
+      <Span
+        className={getClassNames(theme.prevButton, { [theme.buttonDisabled]: conditions.isPrevButtonDisabled })}
+        onClick={(ev) => onClick(getButtonActionType(viewType, BUTTON_TYPE.PREV), ev)}
+      >
+        <Icon
+          icon={IconTypes.Icons.ChevronLeft}
+          className={theme.prevIcon}
+        />
+      </Span>
+      <Span
+        className={getClassNames(theme.title, { [theme.titleDisabled]: conditions.isTitleDisabled })}
+        onClick={(ev) => onClick(CALENDAR_CLICK_ACTION.TITLE_CLICK, ev)}
+      >
+        {getCalendarTitle(viewDate, viewType, messages)}
+      </Span>
+      <Span
+        className={getClassNames(theme.nextButton, { [theme.buttonDisabled]: conditions.isNextButtonDisabled })}
+        onClick={(ev) => onClick(getButtonActionType(viewType, BUTTON_TYPE.NEXT), ev)}
+      >
+        <Icon
+          icon={IconTypes.Icons.ChevronRight}
+          className={theme.nextIcon}
+        />
+      </Span>
+    </Div>
+  );
+};