@mailstep/design-system 0.8.26 → 0.8.27-beta.1

package/ui/Elements/Button/styles.js

@@ -0,0 +1,227 @@
+import Icon from "../Icon/Icon.js";
+import "../Icon/index.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Button/styles.ts
+const StyledWrapper = styled$1.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const LoadingIconWrapper = styled$1.div`
+  & svg {
+    margin-right: ${({ $addMarginRight }) => $addMarginRight ? "8px" : "0"};
+  }
+`;
+const StyledIcon = styled$1(Icon)`
+  & svg {
+    margin-right: ${({ $addMarginRight }) => $addMarginRight ? "8px" : "0"};
+    margin-left: ${({ $addMarginLeft }) => $addMarginLeft ? "8px" : "0"};
+  }
+`;
+const StyledButton = styled$1.button`
+  width: ${({ fullWidth }) => fullWidth ? "100%" : "initial"};
+  font-weight: semiBold;
+  font-size: 14px;
+  font-family: ${th("fonts.primary")};
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  height: ${({ height }) => height || "38px"};
+  border: none;
+  transition-duration: 0.1s;
+  transition: all 300ms ease-out;
+  gap: 8px;
+  padding: ${({ iconPadding }) => iconPadding ? "9px" : "7px 18px"};
+  opacity: ${({ disabled }) => disabled ? .6 : 1};
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+
+  :focus {
+    outline: none;
+  }
+
+  &[data-variant='default'] {
+    &[data-appearance='primary'] {
+      background-color: red1;
+      color: white;
+
+      :not(:disabled) {
+        @media (hover: hover) {
+          :hover {
+            background-color: red80;
+          }
+        }
+      }
+    }
+
+    &[data-appearance='secondary'] {
+      background-color: neutral20;
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: lightGray7;
+        }
+      }
+    }
+
+    &[data-appearance='tertiary'] {
+      background-color: red20;
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red30;
+        }
+      }
+    }
+  }
+
+  &[data-variant='success'] {
+    background-color: successColor;
+    color: white;
+
+    @media (hover: hover) {
+      :hover {
+        background-color: green70;
+      }
+    }
+  }
+  &[data-variant='outline'] {
+    background-color: white;
+    border: slim;
+    &[data-appearance='primary'] {
+      color: typoPrimary;
+      border-color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: neutral20;
+        }
+      }
+    }
+    &[data-appearance='secondary'] {
+      color: red1;
+      border-color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red20;
+        }
+      }
+    }
+  }
+  &[data-variant='ghost'] {
+    background-color: white;
+    &[data-appearance='primary'] {
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: neutral20;
+        }
+      }
+    }
+    &[data-appearance='secondary'] {
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red20;
+        }
+      }
+    }
+  }
+
+  &[data-variant='link'] {
+    background-color: transparent;
+    height: ${({ height }) => height || "20px"};
+    &[data-appearance='primary'] {
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          color: neutral500;
+        }
+      }
+    }
+    &[data-appearance='secondary'] {
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          color: red70;
+        }
+      }
+    }
+  }
+
+  &[data-variant='icon'] {
+    width: 38px;
+    height: ${({ height }) => height || "38px"};
+    gap: 10px;
+
+    &[data-appearance='primary'] {
+      background-color: red1;
+      color: white;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red70;
+        }
+      }
+    }
+
+    &[data-appearance='secondary'] {
+      background-color: neutral20;
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: lightGray7;
+        }
+      }
+    }
+
+    &[data-appearance='tertiary'] {
+      background-color: red20;
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red30;
+        }
+      }
+    }
+
+    &[data-appearance='ghost'] {
+      background-color: transparent;
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          color: neutral500;
+        }
+      }
+    }
+  }
+
+  &[data-variant='floating'] {
+    &[data-appearance='primary'] {
+      width: 56px;
+      height: ${({ height }) => height || "56px"};
+      background-color: red1;
+      color: white;
+      border-radius: 50%;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red70;
+        }
+      }
+    }
+  }
+`;
+//#endregion
+export { LoadingIconWrapper, StyledButton, StyledIcon, StyledWrapper };

package/ui/Elements/Button/types.d.ts

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import type { ReactNode } from 'react';
 export type VariantValue = 'default' | 'success' | 'outline' | 'ghost' | 'link' | 'icon' | 'floating';
 export type AppearanceValue = 'primary' | 'secondary' | 'tertiary' | 'ghost';
 export type Props = React.HTMLProps<HTMLButtonElement> & {

package/ui/Elements/Button/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Elements/Card/Card.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
 import { CardProps } from './types';
-
 declare const Card: FC<CardProps>;
 export default Card;

package/ui/Elements/Card/Card.js

@@ -0,0 +1,15 @@
+import { StyledCard } from "./styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Card/Card.tsx
+const Card = ({ children, display = "block", bg, onClick, maxWidth }) => {
+	return /* @__PURE__ */ jsx(StyledCard, {
+		onClick,
+		bg,
+		display,
+		maxWidth,
+		hasOnClick: !!onClick,
+		children
+	});
+};
+//#endregion
+export { Card as default };

package/ui/Elements/Card/index.d.ts

@@ -1,3 +1,2 @@
-import { default as Card } from './Card';
-
+import Card from './Card';
 export default Card;

package/ui/Elements/Card/index.js

@@ -0,0 +1,5 @@
+import Card from "./Card.js";
+//#region packages/ui/Elements/Card/index.ts
+var Card_default = Card;
+//#endregion
+export { Card_default as default };

package/ui/Elements/Card/stories/Card.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').CardProps>;
+    component: import("react").FC<import("../types").CardProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Card/styles.d.ts

@@ -1,6 +1,5 @@
 import { Display } from './types';
-
-export declare const StyledCard: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StyledCard: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     display: Display;
     bg?: string;
     hasOnClick: boolean;

package/ui/Elements/Card/styles.js

@@ -0,0 +1,22 @@
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Card/styles.ts
+const StyledCard = styled$1.div`
+  display: ${({ display }) => display};
+  padding: 20px;
+  border: 1px solid;
+  background-color: ${({ bg }) => bg ? th.color(bg) : "white"};
+  border-color: ${th.color("lightGray6")};
+  border-radius: 12px;
+  width: 100%;
+
+  ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth};`}
+
+  ${({ hasOnClick }) => hasOnClick && css`
+      cursor: pointer;
+      &:hover {
+        border-color: ${th.color("gray1")};
+      }
+    `}
+`;
+//#endregion
+export { StyledCard };

package/ui/Elements/Card/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Elements/CheckedCircle/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type CheckedCircleProps = {
     checked?: boolean;
     color?: string;

package/ui/Elements/CheckedCircle/index.js

@@ -0,0 +1,15 @@
+import Icon_default from "../Icon/index.js";
+import { CheckedCircleContainer } from "./styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/CheckedCircle/index.tsx
+const CheckedCircle = ({ checked = true, color = "red1" }) => {
+	return /* @__PURE__ */ jsx(CheckedCircleContainer, {
+		color,
+		children: checked && /* @__PURE__ */ jsx(Icon_default, {
+			icon: "check",
+			size: "12px"
+		})
+	});
+};
+//#endregion
+export { CheckedCircle };

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<{
+    component: import("react").FC<{
         checked?: boolean;
         color?: string;
     }>;

package/ui/Elements/CheckedCircle/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const CheckedCircleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     color: string;
 }, never>;

package/ui/Elements/CheckedCircle/styles.js

@@ -0,0 +1,15 @@
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/CheckedCircle/styles.ts
+const CheckedCircleContainer = styled$1.div`
+  border-radius: 50%;
+  border: 8px solid ${({ color }) => th.color(color)};
+  color: ${({ color }) => th.color(color)};
+  height: 36px;
+  width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+`;
+//#endregion
+export { CheckedCircleContainer };

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -1,7 +1,11 @@
-import { default as React } from 'react';
-import { SpaceAround } from '../SpaceAround';
-import { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
-
+import React from 'react';
+import type { SpaceAround } from '../SpaceAround';
+import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
+import 'moment/dist/locale/cs';
+import 'moment/dist/locale/el';
+import 'moment/dist/locale/it';
+import 'moment/dist/locale/ru';
+import 'moment/dist/locale/sk';
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;

package/ui/Elements/DatePicker/DatePicker.js

@@ -0,0 +1,89 @@
+import { LanguageContext } from "../../ThemeProvider/ThemeProvider.js";
+import SpaceAround_default from "../SpaceAround/index.js";
+import Input_default from "../../Forms/Input/index.js";
+import Datetime from "./Datetime/DateTime.js";
+import { DatePickerBase } from "./styles.js";
+import React, { useCallback, useContext } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import moment from "moment";
+import "moment/dist/locale/cs.js";
+import "moment/dist/locale/el.js";
+import "moment/dist/locale/it.js";
+import "moment/dist/locale/ru.js";
+import "moment/dist/locale/sk.js";
+//#region packages/ui/Elements/DatePicker/DatePicker.tsx
+const defaultDateFormat = "DD.MM.YYYY";
+const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat = defaultDateFormat, timeFormat = false, open, secondValue = null, input, icon = true, showInputLabel = false, showCalendarLabel = true, spaceAround = false, className, onClear, onInputChange, ...passProps }) => {
+	const format = `${dateFormat}${timeFormat ? ` ${timeFormat}` : ``}`;
+	const isValid = !!value && moment(value, format, true).isValid();
+	const stringValue = isValid ? moment(value, format).format(format) : value;
+	const locale = useContext(LanguageContext);
+	const handleRenderInput = useCallback((_, openCalendar) => {
+		return /* @__PURE__ */ jsx(Input_default, {
+			type: "text",
+			icon: icon ? "calendar" : void 0,
+			name,
+			error,
+			disabled,
+			isInvalid: !!error,
+			onChange: onInputChange,
+			label: showInputLabel ? label : void 0,
+			value: stringValue,
+			onFocus: openCalendar,
+			iconOnClick: openCalendar,
+			onClear,
+			autoComplete: "off"
+		});
+	}, [
+		name,
+		stringValue,
+		error,
+		label,
+		showInputLabel,
+		isValid,
+		disabled
+	]);
+	const handleRenderView = useCallback((_, renderCalendar) => {
+		if (label && !showInputLabel) return /* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			flexDirection: "column",
+			children: renderCalendar()
+		});
+		return renderCalendar();
+	}, [label, showInputLabel]);
+	const handleChange = useCallback((value) => {
+		const parsed = typeof value === "string" ? value : value?.toDate?.();
+		onChange?.(parsed);
+	}, [onChange]);
+	const handleIsValid = useCallback((current, selected) => {
+		const parsed = [current?.toDate?.(), selected?.toDate?.()];
+		return isValidDate ? isValidDate(...parsed) : true;
+	}, [isValidDate]);
+	return /* @__PURE__ */ jsx(SpaceAround_default, {
+		spaceAround,
+		children: /* @__PURE__ */ jsx(DatePickerBase, {
+			className,
+			children: /* @__PURE__ */ jsx(Datetime, {
+				value,
+				dateFormat,
+				timeFormat,
+				secondValue,
+				open,
+				input,
+				label: showCalendarLabel ? label : void 0,
+				onChange: handleChange,
+				isValidDate: handleIsValid,
+				renderView: handleRenderView,
+				renderInput: handleRenderInput,
+				initialViewDate,
+				locale,
+				disabled,
+				...passProps
+			})
+		})
+	});
+};
+var DatePicker_default = React.memo(DatePicker);
+//#endregion
+export { DatePicker_default as default };

package/ui/Elements/DatePicker/Datetime/DateTime.d.ts

@@ -1,7 +1,6 @@
-import { default as React } from 'react';
-import { default as moment } from 'moment';
-import { DatetimepickerProps } from './types';
-
+import React from 'react';
+import moment from 'moment';
+import type { DatetimepickerProps } from './types';
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
         onOpen: () => void;