Merge branch 'feature/components-typescript' of github.com:ONLYOFFICE/DocSpace-client into feature/components-typescript

packages/shared/components/cron/Cron.part.ts

@@ -6,7 +6,7 @@ import {
   findDate,
   stringToArrayPart,
   getUnits,
-} from "./Cron.util";
+} from "./Cron.utils";
 import type { Options, PeriodType } from "./Cron.types";
 
 const units = getUnits();

packages/shared/components/cron/Cron.props.ts

@@ -1,10 +0,0 @@
-interface CronProps {
-  /** Cron value */
-  value?: string;
-  /** Set the cron value, similar to onChange. */
-  setValue: (value: string) => void;
-  /** Triggered when the cron component detects an error with the value. */
-  onError?: (error?: Error) => void;
-}
-
-export default CronProps;

packages/shared/components/cron/Cron.stories.tsx

@@ -7,7 +7,7 @@ import i18nextStoryDecorator from "../../.storybook/decorators/i18nextStoryDecor
 import { Cron, getNextSynchronization } from ".";
 import { InputSize, InputType, TextInput } from "../text-input";
 import { Button, ButtonSize } from "../button";
-import CronProps from "./Cron.props";
+import type { CronProps } from "./Cron.types";
 
 type CronType = FC<{ locale: string } & CronProps>;
 

packages/shared/components/cron/Cron.styled.ts

@@ -15,3 +15,15 @@ export const Suffix = styled.span`
 `;
 
 Suffix.defaultProps = { theme: Base };
+
+export const SelectWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  & > span {
+    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
+  }
+`;
+
+SelectWrapper.defaultProps = { theme: Base };

packages/shared/components/cron/Cron.tsx

@@ -7,16 +7,21 @@ import React, {
   useCallback,
 } from "react";
 
-import { MonthDays, Months, Period, WeekDays, Hours, Minutes } from "./Field";
+import {
+  MonthDays,
+  Months,
+  Period,
+  WeekDays,
+  Hours,
+  Minutes,
+} from "./sub-components";
 
 import { getCronStringFromValues, stringToArray } from "./Cron.part";
 import { defaultCronString, defaultPeriod } from "./Cron.constants";
-import { getPeriodFromCronParts, getUnits } from "./Cron.util";
-
+import { getPeriodFromCronParts, getUnits } from "./Cron.utils";
 import { CronWrapper, Suffix } from "./Cron.styled";
 
-import type CronProps from "./Cron.props";
-import type { PeriodType } from "./Cron.types";
+import type { PeriodType, CronProps } from "./Cron.types";
 
 function Cron({ value = defaultCronString, setValue, onError }: CronProps) {
   const { t } = useTranslation("Common");

packages/shared/components/cron/Cron.types.ts

@@ -1,3 +1,5 @@
+import type { Dispatch, SetStateAction } from "react";
+
 export type PeriodType = "Year" | "Month" | "Week" | "Day" | "Hour" | "Minute";
 export type Unit = {
   name: "minute" | "hour" | "day" | "month" | "weekday";
@@ -26,3 +28,62 @@ export interface FieldProps {
   t: TFunction;
   unit: Unit;
 }
+
+export interface CronProps {
+  /** Cron value */
+  value?: string;
+  /** Set the cron value, similar to onChange. */
+  setValue: (value: string) => void;
+  /** Triggered when the cron component detects an error with the value. */
+  onError?: (error?: Error) => void;
+}
+
+export interface HoursProps extends FieldProps {
+  hours: number[];
+  setHours: Dispatch<SetStateAction<number[]>>;
+}
+
+export interface MinutesProps extends FieldProps {
+  minutes: number[];
+  setMinutes: Dispatch<SetStateAction<number[]>>;
+  period: PeriodType;
+}
+
+export interface MonthDaysProps extends FieldProps {
+  monthDays: number[];
+  weekDays: number[];
+  setMonthDays: Dispatch<SetStateAction<number[]>>;
+}
+
+export interface MonthsProps extends FieldProps {
+  months: number[];
+  setMonths: Dispatch<SetStateAction<number[]>>;
+}
+
+export interface WeekDaysProps extends FieldProps {
+  isWeek: boolean;
+  period: PeriodType;
+  weekDays: number[];
+  monthDays: number[];
+  setWeekDays: Dispatch<SetStateAction<number[]>>;
+}
+
+export interface SelectProps {
+  unit: Unit;
+  value: number[];
+  placeholder: string;
+  setValue: Dispatch<SetStateAction<number[]>>;
+  prefix: string;
+  dropDownMaxHeight?: number;
+}
+
+export interface PeriodProps {
+  t: TFunction;
+  period?: PeriodType;
+  setPeriod: Dispatch<SetStateAction<PeriodType>>;
+}
+
+export type PeriodOptionType = {
+  key: PeriodType;
+  label: string;
+};

packages/shared/components/cron/Cron.utils.ts

@@ -1,5 +1,11 @@
 import { DateTime } from "luxon";
-import { Options, PeriodType, TFunction, Unit } from "./Cron.types";
+import {
+  Options,
+  PeriodOptionType,
+  PeriodType,
+  TFunction,
+  Unit,
+} from "./Cron.types";
 
 export const parseNumber = (value: unknown) => {
   if (typeof value === "string") {
@@ -505,3 +511,43 @@ export const getUnits = (t?: TFunction) => {
 
   return units;
 };
+
+export const getLabel = (period: PeriodType, t: TFunction) => {
+  switch (period) {
+    case "Year":
+      return t("EveryYear");
+    case "Month":
+      return t("EveryMonth");
+    case "Week":
+      return t("EveryWeek");
+    case "Day":
+      return t("EveryDay");
+    case "Hour":
+      return t("EveryHour");
+    default:
+      return "";
+  }
+};
+
+export const getOptions = (t: TFunction): PeriodOptionType[] => [
+  {
+    key: "Year",
+    label: getLabel("Year", t),
+  },
+  {
+    key: "Month",
+    label: getLabel("Month", t),
+  },
+  {
+    key: "Week",
+    label: getLabel("Week", t),
+  },
+  {
+    key: "Day",
+    label: getLabel("Day", t),
+  },
+  {
+    key: "Hour",
+    label: getLabel("Hour", t),
+  },
+];

packages/shared/components/cron/Field/Hours/Hours.props.ts

@@ -1,9 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { FieldProps } from "../../Cron.types";
-
-interface HoursProps extends FieldProps {
-  hours: number[];
-  setHours: Dispatch<SetStateAction<number[]>>;
-}
-
-export default HoursProps;

packages/shared/components/cron/Field/Minutes/Minutes.props.ts

@@ -1,10 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { PeriodType, FieldProps } from "../../Cron.types";
-
-interface MinutesProps extends FieldProps {
-  minutes: number[];
-  setMinutes: Dispatch<SetStateAction<number[]>>;
-  period: PeriodType;
-}
-
-export default MinutesProps;

packages/shared/components/cron/Field/Minutes/Minutes.tsx

@@ -1,22 +0,0 @@
-import React, { memo } from "react";
-import { Select } from "../../Select";
-
-import type MinutesProps from "./Minutes.props";
-
-function Minutes({ minutes, setMinutes, period, t, unit }: MinutesProps) {
-  const isHour = period === "Hour";
-  const prefix = isHour ? t("At") : ":";
-
-  return (
-    <Select
-      value={minutes}
-      setValue={setMinutes}
-      placeholder={t("EveryMinute")}
-      unit={unit}
-      prefix={prefix}
-      dropDownMaxHeight={300}
-    />
-  );
-}
-
-export default memo(Minutes);

packages/shared/components/cron/Field/MonthDay/MonthDays.props.ts

@@ -1,10 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { FieldProps } from "../../Cron.types";
-
-interface MonthDaysProps extends FieldProps {
-  monthDays: number[];
-  weekDays: number[];
-  setMonthDays: Dispatch<SetStateAction<number[]>>;
-}
-
-export default MonthDaysProps;

packages/shared/components/cron/Field/MonthDay/MonthDays.tsx

@@ -1,30 +0,0 @@
-import React, { useMemo, memo } from "react";
-import { Select } from "../../Select";
-
-import type MonthDaysProps from "./MonthDays.props";
-
-function MonthDays({
-  weekDays,
-  monthDays,
-  unit,
-  setMonthDays,
-  t,
-}: MonthDaysProps) {
-  const placeholder = useMemo(() => {
-    const isEmpty = weekDays.length === 0;
-
-    return isEmpty ? t("EveryDayOfTheMonth") : t("DayOfTheMonth");
-  }, [weekDays.length, t]);
-
-  return (
-    <Select
-      value={monthDays}
-      setValue={setMonthDays}
-      placeholder={placeholder}
-      unit={unit}
-      prefix={t("On")}
-      dropDownMaxHeight={300}
-    />
-  );
-}
-export default memo(MonthDays);

packages/shared/components/cron/Field/Months/Months.props.ts

@@ -1,9 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { FieldProps } from "../../Cron.types";
-
-interface MonthsProps extends FieldProps {
-  months: number[];
-  setMonths: Dispatch<SetStateAction<number[]>>;
-}
-
-export default MonthsProps;

packages/shared/components/cron/Field/Period/Period.helper.ts

@@ -1,42 +0,0 @@
-import type { PeriodOptionType } from "./Period.props";
-import type { PeriodType, TFunction } from "../../Cron.types";
-
-export const getLabel = (period: PeriodType, t: TFunction) => {
-  switch (period) {
-    case "Year":
-      return t("EveryYear");
-    case "Month":
-      return t("EveryMonth");
-    case "Week":
-      return t("EveryWeek");
-    case "Day":
-      return t("EveryDay");
-    case "Hour":
-      return t("EveryHour");
-    default:
-      return "";
-  }
-};
-
-export const getOptions = (t: TFunction): PeriodOptionType[] => [
-  {
-    key: "Year",
-    label: getLabel("Year", t),
-  },
-  {
-    key: "Month",
-    label: getLabel("Month", t),
-  },
-  {
-    key: "Week",
-    label: getLabel("Week", t),
-  },
-  {
-    key: "Day",
-    label: getLabel("Day", t),
-  },
-  {
-    key: "Hour",
-    label: getLabel("Hour", t),
-  },
-];

packages/shared/components/cron/Field/Period/Period.props.ts

@@ -1,15 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { PeriodType, TFunction } from "../../Cron.types";
-
-interface PeriodProps {
-  t: TFunction;
-  period?: PeriodType;
-  setPeriod: Dispatch<SetStateAction<PeriodType>>;
-}
-
-export type PeriodOptionType = {
-  key: PeriodType;
-  label: string;
-};
-
-export default PeriodProps;

packages/shared/components/cron/Field/WeekDays/WeekDays.props.ts

@@ -1,12 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { PeriodType, FieldProps } from "../../Cron.types";
-
-interface WeekDaysProps extends FieldProps {
-  isWeek: boolean;
-  period: PeriodType;
-  weekDays: number[];
-  monthDays: number[];
-  setWeekDays: Dispatch<SetStateAction<number[]>>;
-}
-
-export default WeekDaysProps;

packages/shared/components/cron/Field/WeekDays/WeekDays.tsx

@@ -1,36 +0,0 @@
-import React, { useMemo, memo } from "react";
-
-import { Select } from "../../Select";
-
-import type WeekDaysProps from "./WeekDays.props";
-
-function WeekDays({
-  setWeekDays,
-  unit,
-  isWeek,
-  weekDays,
-  monthDays,
-  period,
-  t,
-}: WeekDaysProps) {
-  const prefix = period === "Week" ? t("On") : t("And");
-
-  const placeholder = useMemo(() => {
-    const isEmpty = monthDays.length === 0;
-
-    return isEmpty || isWeek ? t("EveryDayOfTheWeek") : t("DayOfTheWeek");
-  }, [monthDays.length, isWeek, t]);
-
-  return (
-    <Select
-      value={weekDays}
-      setValue={setWeekDays}
-      placeholder={placeholder}
-      unit={unit}
-      prefix={prefix}
-      dropDownMaxHeight={300}
-    />
-  );
-}
-
-export default memo(WeekDays);

packages/shared/components/cron/Field/index.ts

@@ -1,6 +0,0 @@
-export { default as Period } from "./Period/Period";
-export { default as Months } from "./Months/Months";
-export { default as MonthDays } from "./MonthDay/MonthDays";
-export { default as WeekDays } from "./WeekDays/WeekDays";
-export { default as Hours } from "./Hours/Hours";
-export { default as Minutes } from "./Minutes/Minutes";

packages/shared/components/cron/Select/Select.props.ts

@@ -1,14 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-
-import { Unit } from "../Cron.types";
-
-interface SelectProps {
-  unit: Unit;
-  value: number[];
-  placeholder: string;
-  setValue: Dispatch<SetStateAction<number[]>>;
-  prefix: string;
-  dropDownMaxHeight?: number;
-}
-
-export default SelectProps;

packages/shared/components/cron/Select/Select.styled.ts

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-import { Base } from "../../../themes";
-
-export const SelectWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  & > span {
-    font-size: ${(props) => props.theme.getCorrectFontSize("13px")};
-  }
-`;
-
-SelectWrapper.defaultProps = { theme: Base };

packages/shared/components/cron/Select/index.ts

@@ -1 +0,0 @@
-export { default as Select } from "./Select";

packages/shared/components/cron/sub-components/Hours.tsx

@@ -1,9 +1,9 @@
 import React, { memo } from "react";
-import { Select } from "../../Select";
+import { Select } from "./Select";
 
-import type HoursProps from "./Hours.props";
+import type { HoursProps } from "../Cron.types";
 
-function Hours({ hours, setHours, unit, t }: HoursProps) {
+export const Hours = memo(({ hours, setHours, unit, t }: HoursProps) => {
   return (
     <Select
       value={hours}
@@ -14,6 +14,6 @@ function Hours({ hours, setHours, unit, t }: HoursProps) {
       dropDownMaxHeight={300}
     />
   );
-}
+});
 
-export default memo(Hours);
+Hours.displayName = "Hours";

packages/shared/components/cron/sub-components/Minutes.tsx

@@ -0,0 +1,24 @@
+import React, { memo } from "react";
+import { Select } from "./Select";
+
+import type { MinutesProps } from "../Cron.types";
+
+export const Minutes = memo(
+  ({ minutes, setMinutes, period, t, unit }: MinutesProps) => {
+    const isHour = period === "Hour";
+    const prefix = isHour ? t("At") : ":";
+
+    return (
+      <Select
+        value={minutes}
+        setValue={setMinutes}
+        placeholder={t("EveryMinute")}
+        unit={unit}
+        prefix={prefix}
+        dropDownMaxHeight={300}
+      />
+    );
+  },
+);
+
+Minutes.displayName = "Minutes";

packages/shared/components/cron/sub-components/MonthDays.tsx

@@ -0,0 +1,26 @@
+import React, { useMemo, memo } from "react";
+import { Select } from "./Select";
+
+import type { MonthDaysProps } from "../Cron.types";
+
+export const MonthDays = memo(
+  ({ weekDays, monthDays, unit, setMonthDays, t }: MonthDaysProps) => {
+    const placeholder = useMemo(() => {
+      const isEmpty = weekDays.length === 0;
+
+      return isEmpty ? t("EveryDayOfTheMonth") : t("DayOfTheMonth");
+    }, [weekDays.length, t]);
+
+    return (
+      <Select
+        value={monthDays}
+        setValue={setMonthDays}
+        placeholder={placeholder}
+        unit={unit}
+        prefix={t("On")}
+        dropDownMaxHeight={300}
+      />
+    );
+  },
+);
+MonthDays.displayName = "MonthDays";

packages/shared/components/cron/sub-components/Months.tsx

@@ -1,10 +1,10 @@
 import React, { memo } from "react";
 
-import { Select } from "../../Select";
+import { Select } from "./Select";
 
-import type MonthsProps from "./Months.props";
+import type { MonthsProps } from "../Cron.types";
 
-function Months({ months, unit, setMonths, t }: MonthsProps) {
+export const Months = memo(({ months, unit, setMonths, t }: MonthsProps) => {
   return (
     <Select
       value={months}
@@ -15,6 +15,6 @@ function Months({ months, unit, setMonths, t }: MonthsProps) {
       dropDownMaxHeight={300}
     />
   );
-}
+});
 
-export default memo(Months);
+Months.displayName = "Months";

packages/shared/components/cron/sub-components/Period.tsx

@@ -1,12 +1,11 @@
 import React, { useMemo, memo } from "react";
 
-import { ComboBox, ComboBoxSize, TOption } from "../../../combobox";
-import { getLabel, getOptions } from "./Period.helper";
+import { ComboBox, ComboBoxSize, TOption } from "../../combobox";
 
-import PeriodProps from "./Period.props";
-import { PeriodType } from "../../Cron.types";
+import { getLabel, getOptions } from "../Cron.utils";
+import type { PeriodProps, PeriodType } from "../Cron.types";
 
-function Period({ period = "Hour", setPeriod, t }: PeriodProps) {
+export const Period = memo(({ period = "Hour", setPeriod, t }: PeriodProps) => {
   const onSelect = (arg: TOption) => {
     setPeriod(arg.key as PeriodType);
   };
@@ -29,6 +28,6 @@ function Period({ period = "Hour", setPeriod, t }: PeriodProps) {
       selectedOption={selectedOption}
     />
   );
-}
+});
 
-export default memo(Period);
+Period.displayName = "Period";

packages/shared/components/cron/sub-components/Select.tsx

@@ -4,19 +4,19 @@ import moment from "moment";
 
 import { ComboBox, ComboBoxSize, TOption } from "../../combobox";
 
-import { fixFormatValue } from "../Cron.util";
+import { fixFormatValue } from "../Cron.utils";
+import { SelectWrapper } from "../Cron.styled";
 
-import { SelectWrapper } from "./Select.styled";
-import SelectProps from "./Select.props";
+import type { SelectProps } from "../Cron.types";
 
-function Select({
+export const Select = ({
   unit,
   value,
   placeholder,
   setValue,
   prefix,
   dropDownMaxHeight,
-}: SelectProps) {
+}: SelectProps) => {
   const { i18n } = useTranslation();
 
   const options = useMemo(() => {
@@ -93,6 +93,4 @@ function Select({
       />
     </SelectWrapper>
   );
-}
-
-export default Select;
+};

packages/shared/components/cron/sub-components/WeekDays.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo, memo } from "react";
+
+import { Select } from "./Select";
+
+import type { WeekDaysProps } from "../Cron.types";
+
+export const WeekDays = memo(
+  ({
+    setWeekDays,
+    unit,
+    isWeek,
+    weekDays,
+    monthDays,
+    period,
+    t,
+  }: WeekDaysProps) => {
+    const prefix = period === "Week" ? t("On") : t("And");
+
+    const placeholder = useMemo(() => {
+      const isEmpty = monthDays.length === 0;
+
+      return isEmpty || isWeek ? t("EveryDayOfTheWeek") : t("DayOfTheWeek");
+    }, [monthDays.length, isWeek, t]);
+
+    return (
+      <Select
+        value={weekDays}
+        setValue={setWeekDays}
+        placeholder={placeholder}
+        unit={unit}
+        prefix={prefix}
+        dropDownMaxHeight={300}
+      />
+    );
+  },
+);
+
+WeekDays.displayName = "WeekDays";

packages/shared/components/cron/sub-components/index.ts

@@ -0,0 +1,8 @@
+export { Hours } from "./Hours";
+export { Minutes } from "./Minutes";
+export { MonthDays } from "./MonthDays";
+export { Months } from "./Months";
+export { WeekDays } from "./WeekDays";
+
+export { Period } from "./Period";
+export { Select } from "./Select";