armtek-uikit-react 1.0.49 → 1.0.52

package/assets/Avatar.scss

@@ -12,6 +12,9 @@
 .avatar__photo{
   background: none;
 }
+.avatar__icon{
+  background: $color-gray-400;
+}
 .avatar__inner{
   overflow: hidden;
   border-radius: 50%;
@@ -66,7 +69,7 @@
   font-size: 24px;
 }
 .avatar__icon{
-  font-size: 50px;
+  font-size: 38px;
 }
 .avatar__img{
   display: block;

package/assets/BackDrop.scss

@@ -0,0 +1,17 @@
+@import "variables";
+
+.BackDropBase {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.BackDropBase__inner{
+  max-width: 500px;
+  width: 100%;
+}

package/assets/Button.scss

@@ -20,10 +20,16 @@
   }
 }
 .button__iconWrapper{
-  font-size: 0;
-  & > span{
-    font-size: initial;
-  }
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  //font-size: 0;
+  //& > span{
+  //  font-size: initial;
+  //}
 }
 .button_radius_none{
   border-radius: 0;

package/assets/ButtonIcon.scss

@@ -11,14 +11,17 @@
   &.button_icon_large{
     width: $size-large;
     font-size: 24px;
+    & .material_icon {font-size: 24px}
   }
   &.button_icon_medium{
     width: $size-medium;
     font-size: 20px;
+    & .material_icon {font-size: 20px}
   }
   &.button_icon_small{
     width: $size-small;
     padding: calc($size-step / 2);
     font-size: 16px;
+    & .material_icon {font-size: 16px}
   }
 }

package/assets/FormControls.scss

@@ -0,0 +1,16 @@
+@import "variables";
+
+.FormControls{
+  border-top: 1px solid $color-gray-200;
+  padding-top: calc($size-step * 4);
+  display: flex;
+  margin:0 -$size-step;
+}
+.FormControls__button{
+  flex: 0 0 50%;
+  max-width: 50%;
+  padding:0 $size-step;
+}
+.FormControls__btn{
+  width: 100%;
+}

package/assets/Modal.scss

@@ -0,0 +1,33 @@
+@import "variables";
+
+.Modal{
+  border-radius: $radius;
+  width: 100%;
+  background-color: #fff;
+}
+.Modal__header{
+  background: $color-gray-200;
+  min-height: 78px;
+  display: flex;
+  align-items: center;
+  padding: $size-step calc($size-step * 4);
+  border-top-left-radius:$radius;
+  border-top-right-radius:$radius;
+  position: relative;
+}
+.Modal__title{
+  font-size: 20px;
+  color: $color-gray-900;
+}
+.Modal__body{
+  padding: calc($size-step * 4)
+}
+.Modal__footer{
+  padding: 0 calc($size-step * 4) calc($size-step * 4) calc($size-step * 4)
+}
+.Modal__close{
+  position: absolute;
+  right: calc($size-step * 4);
+  top: 50%;
+  transform: translateY(-50%);
+}

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.49","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.52","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"@tinymce/tinymce-react":"^4.3.2","build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Avatar/Avatar.js

@@ -41,7 +41,8 @@ const Avatar = props => {
     children: /*#__PURE__*/_jsxs("div", {
       ...divProps,
       className: clsx('Arm-avatar', className, {
-        [css.avatar__photo]: !!photo
+        [css.avatar__photo]: !!photo,
+        [css.avatar__icon]: !!displayIcon
       }, css.avatar, css['avatar_' + size]),
       children: [/*#__PURE__*/_jsx("div", {
         className: css.avatar__inner,

package/ui/BackDrop/BackDrop.d.ts

@@ -0,0 +1,3 @@
+import { BackDropProps } from '../../ui/BackDrop/BackDropBase';
+declare const BackDrop: (props: BackDropProps) => import("react/jsx-runtime").JSX.Element;
+export default BackDrop;

package/ui/BackDrop/BackDrop.js

@@ -0,0 +1,21 @@
+import { isValidElement } from 'react';
+import { createPortal } from 'react-dom';
+import { BackDropBase } from "./BackDropBase";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const BackDrop = props => {
+  const {
+    children,
+    width
+  } = props;
+  const childrenProp = /*#__PURE__*/isValidElement(children) ? children : /*#__PURE__*/_jsx("span", {
+    children: children
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(BackDropBase, {
+      width: width,
+      children: childrenProp
+    }), document.body)
+  });
+};
+export default BackDrop;

package/ui/BackDrop/BackDrop.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/BackDrop";

package/ui/BackDrop/BackDropBase.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type BackDropProps = {
+    children: ReactNode;
+    width: number;
+};
+export declare const BackDropBase: (props: BackDropProps) => import("react/jsx-runtime").JSX.Element;

package/ui/BackDrop/BackDropBase.js

@@ -0,0 +1,22 @@
+import css from "./BackDrop.module.scss";
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const BackDropBase = props => {
+  const {
+    children,
+    width
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: clsx('Arm-BackDropBase', css.BackDropBase),
+      children: /*#__PURE__*/_jsx("div", {
+        className: css.BackDropBase__inner,
+        style: {
+          maxWidth: width + 'px'
+        },
+        children: children
+      })
+    })
+  });
+};

package/ui/BackDrop/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './BackDrop';
+export { type BackDropProps } from './BackDropBase';
+export * from './BackDrop';

package/ui/BackDrop/index.js

@@ -0,0 +1,2 @@
+export { default } from "./BackDrop";
+export * from "./BackDrop";

package/ui/Form/FormControls/FormControls.d.ts

@@ -0,0 +1,14 @@
+import { ButtonProps } from '../../../ui/Button';
+import { ComponentPropsWithoutRef, MouseEvent } from 'react';
+export type FormControlsProps = {
+    onSubmit: (e: MouseEvent<HTMLButtonElement>) => void;
+    onCancel?: (e: MouseEvent<HTMLButtonElement>) => void;
+    submitProps?: Omit<ButtonProps, 'children'> & {
+        text: string;
+    };
+    cancelProps?: Omit<ButtonProps, 'children'> & {
+        text: string;
+    };
+} & ComponentPropsWithoutRef<'div'>;
+declare const FormControls: (props: FormControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default FormControls;

package/ui/Form/FormControls/FormControls.js

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import css from "./FormControls.module.scss";
+import Button from "../../Button";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const FormControls = props => {
+  const {
+    onSubmit,
+    onCancel,
+    submitProps,
+    cancelProps,
+    className,
+    ...divProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx('Arm-FormControls', css.FormControls),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: clsx('Arm-FormControls__button', css.FormControls__button),
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: 'contained',
+          color: 'primary',
+          onClick: onSubmit,
+          ...submitProps,
+          className: clsx('Arm-FormControls__btn', css.FormControls__btn),
+          children: submitProps == null ? void 0 : submitProps.text
+        })
+      }), onCancel && /*#__PURE__*/_jsx("div", {
+        className: clsx('Arm-FormControls__button', css.FormControls__button),
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: 'outlined',
+          color: 'primary',
+          onClick: onCancel,
+          ...cancelProps,
+          className: clsx('Arm-FormControls__btn', css.FormControls__btn),
+          children: cancelProps == null ? void 0 : cancelProps.text
+        })
+      })]
+    })
+  });
+};
+export default FormControls;

package/ui/Form/FormControls/FormControls.module.scss

@@ -0,0 +1 @@
+@import "./../../../assets/FormControls";

package/ui/Form/FormControls/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FormControls';
+export * from './FormControls';

package/ui/Form/FormControls/index.js

@@ -0,0 +1,2 @@
+export { default } from "./FormControls";
+export * from "./FormControls";

package/ui/Modal/BaseModal.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, MouseEvent } from 'react';
+import { FormControlsProps } from '../../ui/Form/FormControls';
+export type BaseModalProps = ComponentPropsWithoutRef<'div'> & FormControlsProps & {
+    onClose: (e: MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const BaseModal: (props: BaseModalProps) => import("react/jsx-runtime").JSX.Element;

package/ui/Modal/BaseModal.js

@@ -0,0 +1,57 @@
+import css from "./Modal.module.scss";
+import clsx from 'clsx';
+import FormControls from "../Form/FormControls";
+import ButtonIcon from "../ButtonIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const BaseModal = props => {
+  const {
+    className,
+    title,
+    children,
+    onSubmit,
+    onClose,
+    onCancel,
+    submitProps,
+    cancelProps,
+    ...divProps
+  } = props;
+  const showControls = !!onSubmit || !!onCancel;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      ...divProps,
+      className: clsx(className, 'Arm-Modal', css.Modal),
+      children: [title && /*#__PURE__*/_jsx("div", {
+        className: clsx('Arm-Modal__header', css.Modal__header),
+        children: /*#__PURE__*/_jsxs("div", {
+          className: clsx('Arm-Modal__title', css.Modal__title),
+          children: [title, onClose && /*#__PURE__*/_jsx(ButtonIcon, {
+            variant: 'transparent',
+            onClick: onClose,
+            className: clsx('Arm-Modal__close', css.Modal__close),
+            color: 'neutral',
+            size: 'medium',
+            children: /*#__PURE__*/_jsx("span", {
+              className: 'material_icon',
+              children: "close"
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: clsx('Arm-Modal__body', css.Modal__body),
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      }), showControls && /*#__PURE__*/_jsx("div", {
+        className: clsx('Arm-Modal__footer', css.Modal__footer),
+        children: /*#__PURE__*/_jsx(FormControls, {
+          onSubmit: onSubmit,
+          onCancel: onCancel,
+          submitProps: submitProps,
+          cancelProps: cancelProps
+        })
+      })]
+    })
+  });
+};

package/ui/Modal/Modal.d.ts

@@ -0,0 +1,7 @@
+import { BaseModalProps } from './BaseModal';
+type ModalProps = BaseModalProps & {
+    open?: boolean;
+    width?: number;
+};
+declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Modal;

package/ui/Modal/Modal.js

@@ -0,0 +1,22 @@
+import { BaseModal } from "./BaseModal";
+import BackDrop from "../BackDrop";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Modal = props => {
+  const {
+    open,
+    width = 500,
+    ...modalProps
+  } = props;
+  if (!open) return null;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(BackDrop, {
+      width: width,
+      children: /*#__PURE__*/_jsx(BaseModal, {
+        ...modalProps,
+        className: 'moasda'
+      })
+    })
+  });
+};
+export default Modal;

package/ui/Modal/Modal.module.scss

@@ -0,0 +1 @@
+@import "../../assets/Modal";

package/ui/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+export * from './Modal';

package/ui/Modal/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Modal";
+export * from "./Modal";