armtek-uikit-react 1.0.2

package/README.md

@@ -0,0 +1 @@
+# Armtek UIKit

package/lib/Button/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "armtek-uikit-react/Button",
+  "private": true,
+  "main": "../cjs/Button.js",
+  "module": "../esm/Button.js",
+  "types": "../esm/Button.d.ts"
+}

package/lib/cjs/assets/fonts.scss

@@ -0,0 +1,20 @@
+
+
+.material_icon {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  &_solid {
+    font-weight: 700;
+  }
+}

package/lib/cjs/assets/global.css

@@ -0,0 +1,35 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:wght@400;500;700&display=swap');
+
+body{
+    font-family: 'Roboto';
+}
+::-webkit-scrollbar {
+    width: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #DFE2E6;
+    border-radius: 0px;
+}
+* {
+    box-sizing: border-box;
+}
+
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v133/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
+}
+
+/* fallback */
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v134/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
+}
+

package/lib/cjs/assets/index.d.ts

@@ -0,0 +1,16 @@
+import Alert from '../ui/Alert/Alert';
+import Avatar from '../ui/Avatar/Avatar';
+import AvatarGroup from '../ui/Avatar/AvatarGroup';
+import Badge from '../ui/Badge/Badge';
+import Button from '../ui/Button/Button';
+import ButtonIcon from '../ui/Button/ButtonIcon';
+import Card from '../ui/Card/Card';
+import Chip from '../ui/Chip/Chip';
+import ListItem from '../ui/List/ListItem';
+import Loader from '../ui/Loader/Loader';
+import Logo from '../ui/Logo/Logo';
+import Slider from '../ui/Slider/Slider';
+import Status from '../ui/Status/Status';
+import Stepper from '../ui/Stepper/Stepper';
+import Tooltip from '../ui/Tooltip/Tooltip';
+export { Alert, Avatar, AvatarGroup, Badge, Button, ButtonIcon, Card, Chip, ListItem, Loader, Logo, Slider, Status, Stepper, Tooltip, };

package/lib/cjs/assets/styles.scss

@@ -0,0 +1,132 @@
+//@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+//@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+@import "fonts.scss";
+
+$font-family: 'Roboto';
+
+
+$size-elarge: 56px;
+$size-large: 42px;
+$size-medium: 36px;
+$size-small: 30px;
+$size-step: 8px;
+
+$radius: 4px;
+
+$color-primary: #0D46FF;
+$color-primary-dark: #0B3CD9;
+$color-primary-light: #0B3CD9;
+$color-blue-800: #406DFF;
+$color-blue-A100: #D9E2FF;
+$color-blue-50: #F2F5FF;
+
+$color-info: #0D46FF;
+$color-info-dark: #0B3CD9;
+
+$color-secondary: #FF7F00;
+$color-secondary-dark: #D96C00;
+$color-secondary-light: #FFA140;
+$color-orange-800: #FF9426;
+$color-orange-400: #FFC68C;
+$color-orange-300: #FFD3A6;
+$color-orange-100: #FFE6CC;
+$color-orange-50: #FFF8F0;
+
+$color-neutral: #4D5359;
+$color-neutral-dark: #40454A;
+$color-neutral-light: #9AA4AE;
+$color-gray-900: #212529;
+$color-gray-800: #40454A;
+$color-gray-700: #4D5359;
+$color-gray-600: #6C757D;
+$color-gray-500: #9AA4AE;
+$color-gray-400: #B1BCC6;
+$color-gray-300: #D3DAE1;
+$color-gray-200: #DFE2E6;
+$color-gray-100: #E9ECEF;
+$color-gray-50: #F8F9FA;
+
+$color-greent-50: #F2FFFB;
+
+$color-success: #0BD998;
+$color-success-dark: #08996B;
+$color-error: #FF3342;
+$color-error-dark: #CC2935;
+$color-warning: #FFC61A;
+$color-warning-dark: #F7B519;
+
+$color-red-50: #FFF0F1;
+
+$box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
+
+@mixin transition($time: 0.5s, $target: all, $animation: ease) {
+  transition: $time $target $animation;
+}
+@mixin flex($justifyContent: flex-start, $alignItems: center) {
+  display: flex;
+  align-items: $alignItems;
+  justify-content: $justifyContent;
+}
+
+
+//@font-face {
+//  font-family: 'Material Symbols Outlined';
+//  font-style: normal;
+//  font-weight: 400;
+//  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v133/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
+//}
+
+//.material_icon {
+//  font-family: 'Material Symbols Outlined';
+//  font-weight: normal;
+//  font-style: normal;
+//  font-size: 24px;
+//  line-height: 1;
+//  letter-spacing: normal;
+//  text-transform: none;
+//  display: inline-block;
+//  white-space: nowrap;
+//  word-wrap: normal;
+//  direction: ltr;
+//  -webkit-font-feature-settings: 'liga';
+//  -webkit-font-smoothing: antialiased;
+//  &_filled{
+//    font-variation-settings:
+//      'FILL' 1
+//  }
+//}
+// .material-symbols-outlined {
+//   font-variation-settings:
+//           'FILL' 1,
+//           'wght' 400,
+//           'GRAD' 0,
+//           'opsz' 24
+// }
+
+
+.text_error{
+  color: $color-error-dark;
+}
+
+.text_success{
+  color: $color-success;
+}
+
+
+.adornmentContainer{
+  display: flex;
+}
+.adornmentContainer_end{
+  margin-left: auto;
+}
+.adornment_end{
+  & + * {
+    margin-left: $size-step;
+  }
+}
+.adornment_start{
+  & + * {
+    margin-left: $size-step;
+  }
+}

package/lib/cjs/index.d.ts

@@ -0,0 +1,29 @@
+export { default as Button } from './ui/Button/Button';
+export { default as ButtonIcon } from './ui/Button/ButtonIcon';
+export type { ButtonProps } from './ui/Button/Button';
+export { default as Alert } from './ui/Alert/Alert';
+export type { AlertProps } from './ui/Alert/Alert';
+export { default as Avatar } from './ui/Avatar/Avatar';
+export type { AvatarProps } from './ui/Avatar/Avatar';
+export { default as AvatarGroup } from './ui/Avatar/AvatarGroup';
+export type { AvatarGroupProps } from './ui/Avatar/AvatarGroup';
+export { default as Badge } from './ui/Badge/Badge';
+export type { BadgeProps } from './ui/Badge/Badge';
+export { default as Card } from './ui/Card/Card';
+export type { CardProps } from './ui/Card/Card';
+export { default as Chip } from './ui/Chip/Chip';
+export type { ChipProps } from './ui/Chip/Chip';
+export { default as ListItem } from './ui/List/ListItem';
+export type { ListItemProps } from './ui/List/ListItem';
+export { default as Loader } from './ui/Loader/Loader';
+export type { LoaderProps } from './ui/Loader/Loader';
+export { default as Logo } from './ui/Logo/Logo';
+export type { LogoProps } from './ui/Logo/Logo';
+export { default as Slider } from './ui/Slider/Slider';
+export type { SliderProps } from './ui/Slider/Slider';
+export { default as Status } from './ui/Status/Status';
+export type { StatusProps } from './ui/Status/Status';
+export { default as Stepper } from './ui/Stepper/Stepper';
+export type { StepperProps } from './ui/Stepper/Stepper';
+export { default as Tooltip } from './ui/Tooltip/Tooltip';
+export type { TooltipProps } from './ui/Tooltip/Tooltip';

package/lib/cjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Tooltip = exports.Stepper = exports.Status = exports.Slider = exports.Logo = exports.Loader = exports.ListItem = exports.Chip = exports.Card = exports.ButtonIcon = exports.Button = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.Alert = void 0;
+var _Button = _interopRequireDefault(require("./ui/Button/Button"));
+exports.Button = _Button.default;

package/lib/cjs/shared/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useClickOutside: (callback: () => void) => MutableRefObject<any>;
+export default useClickOutside;

package/lib/cjs/shared/hooks/useClickOutside.js

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+const useClickOutside = callback => {
+  const ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) callback();
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+  return ref;
+};
+var _default = useClickOutside;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/shared/services/DateService.d.ts

@@ -0,0 +1,12 @@
+declare class DateClass {
+    date: Date;
+    constructor(date: Date);
+    format(form: string): string;
+    static isValid(dateStr: string, format?: string): boolean;
+    static parseDate(dateStr: string, format?: string): Date | null;
+    static toDate(dateStr: string): Date | null;
+    static getDisplayValue(value: number): string;
+    private getStrMonth;
+}
+export declare const DateService: (date: Date) => DateClass;
+export default DateClass;

package/lib/cjs/shared/services/DateService.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.DateService = void 0;
+class DateClass {
+  constructor(date) {
+    this.date = date;
+  }
+  format(form) {
+    let strDate = form;
+    if (strDate.includes('DD')) strDate = strDate.replace('dd', DateClass.getDisplayValue(this.date.getDate()));
+    if (strDate.includes('MM')) strDate = strDate.replace('MM', this.getStrMonth());
+    if (strDate.includes('YYYY')) strDate = strDate.replace('yyyy', String(this.date.getFullYear()));
+    if (strDate.includes('HH')) strDate = strDate.replace('HH', DateClass.getDisplayValue(this.date.getHours()));
+    if (strDate.includes('mm')) strDate = strDate.replace('mm', DateClass.getDisplayValue(this.date.getMinutes()));
+    return strDate;
+  }
+  static isValid(dateStr, format) {
+    return !!this.parseDate(dateStr, format);
+  }
+  static parseDate(dateStr, format) {
+    let match = dateStr.match(/(\d{2})[.-/](\d{2})[.-/](\d{4})/);
+    if (match && match[1] && match[2] && match[3]) {
+      if (new Date(`${match[3]}-${match[2]}-${match[1]}`).getTime() === new Date(`${match[3]}-${match[2]}-${match[1]}`).getTime()) {
+        let result = new Date(`${match[3]}-${match[2]}-${match[1]}`);
+        result.setHours(1, 0, 0, 0);
+        return result;
+      }
+    }
+    return null;
+  }
+  static toDate(dateStr) {
+    return this.parseDate(dateStr);
+  }
+  static getDisplayValue(value) {
+    return value < 10 ? '0' + String(value) : String(value);
+  }
+  getStrMonth() {
+    let m = this.date.getMonth() + 1;
+    return DateClass.getDisplayValue(m);
+  }
+}
+const DateService = date => {
+  return new DateClass(date);
+};
+exports.DateService = DateService;
+var _default = DateClass;
+exports.default = _default;

package/lib/cjs/shared/types/theme.d.ts

@@ -0,0 +1,10 @@
+export type ShapeType = 'square' | 'circle';
+export type SizeType = 'small' | 'medium' | 'large' | 'extraLarge';
+export type VariantType = 'contained' | 'outlined' | 'transparent';
+export type ColorStatusType = 'success' | 'error' | 'warning' | 'info';
+export type ColorThemeType = 'black' | 'white';
+export type ColorType = 'primary' | 'secondary' | 'neutral';
+export type OptionType = {
+    text: string;
+    value?: string;
+};

package/lib/cjs/shared/types/theme.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/lib/cjs/shared/utils/helpers.d.ts

@@ -0,0 +1,5 @@
+import { ColorStatusType, ColorType, SizeType, VariantType } from '../types/theme';
+export declare const getVariants: (except?: string[]) => Record<VariantType, string>;
+export declare const getColors: () => Record<ColorType, string>;
+export declare const getStatusColors: () => Record<ColorStatusType, string>;
+export declare const getSizes: (except?: string[]) => Record<SizeType, string>;

package/lib/cjs/shared/utils/helpers.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getVariants = exports.getStatusColors = exports.getSizes = exports.getColors = void 0;
+const getVariants = except => {
+  let variants = {
+    contained: 'Заливка',
+    outlined: 'С границами',
+    transparent: 'Прозрачный'
+  };
+  if (except) variants = filter(variants, except);
+  return variants;
+};
+exports.getVariants = getVariants;
+const getColors = () => {
+  return {
+    primary: 'Основной',
+    secondary: 'Второстепенный',
+    neutral: 'Нейтральный'
+  };
+};
+exports.getColors = getColors;
+const getStatusColors = () => {
+  return {
+    info: 'Инфо',
+    error: 'Ошибка',
+    success: 'Успех',
+    warning: 'Уведомление'
+  };
+};
+exports.getStatusColors = getStatusColors;
+const getSizes = except => {
+  let sizes = {
+    small: 'Маленький',
+    medium: 'Средний',
+    large: 'Большой',
+    extraLarge: 'Огромный'
+  };
+  if (except) sizes = filter(sizes, except);
+  return sizes;
+};
+exports.getSizes = getSizes;
+const filter = (obj, arr) => {
+  return Object.entries(obj).filter(item => !arr.includes(item[0])).reduce((prev, current) => {
+    prev[current[0]] = current[1];
+    return prev;
+  }, {});
+};

package/lib/cjs/ui/Button/Button.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ColorThemeType, ColorType, SizeType, VariantType } from '../../shared/types/theme';
+type OwnProps<T extends ElementType = ElementType> = {
+    children: ReactNode;
+    size?: SizeType;
+    color?: ColorType | Exclude<ColorThemeType, 'white'>;
+    variant?: VariantType;
+    startAdornment?: string | ReactNode;
+    endAdornment?: string | ReactNode;
+    group?: 'inline' | 'column';
+    as?: T;
+};
+export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;
+declare const Button: <T extends ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/lib/cjs/ui/Button/Button.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+_interopRequireDefault(require("./style.css"))
+const Button = props => {
+  let {
+    size = 'extraLarge',
+    color = 'primary',
+    variant = 'contained',
+    endAdornment,
+    startAdornment,
+    children,
+    className,
+    group,
+    as,
+    ...restProps
+  } = props;
+  let Component = as || 'button';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
+      ...restProps,
+      className: (0, _clsx.default)('button', 'button_' + size, 'button_' + variant, 'button_' + color, className, {
+        ['button_grouped_' + group]: group
+      }),
+      children: [startAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.default)('button__adornment', 'button__adornment_start'),
+        children: startAdornment
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      }), endAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.default)('button__adornment', 'button__adornment_end'),
+        children: endAdornment
+      })]
+    })
+  });
+};
+var _default = Button;
+exports.default = _default;
+module.exports = exports.default;