intelicoreact 1.8.2 → 1.8.4

package/dist/Atomic/UI/Chart/partial/optionsConstructor.jsx

@@ -0,0 +1,334 @@
+import {
+  FINTURF_TOOLTIP_OPTIONS,
+  GRADIENTS_OBJECTS,
+} from './Chart.constants';
+import addAdditionalOptions from './optionsSetters';
+
+// options constructors for ChartJS
+
+export const reactChartJsOptionsLayouts = {
+  lineIconLayout: {
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: false },
+        y: { display: false },
+      },
+      elements: {
+        point: { radius: 0 },
+        line: {
+          tension: 0.45,
+          borderJoinStyle: 'round',
+          borderWidth: 2,
+          capBezierPoints: true,
+        },
+      },
+    },
+    redraw: true,
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение ChartComponent
+      chartTypeKey: 'Line',
+      setCanvasDimensions: {
+        width: '75px',
+        height: '35px',
+      },
+    },
+  },
+  lineLayout: {
+    options: {
+      responsive: true,
+      elements: {
+        point: {
+          radius: 4,
+          pointStyle: 'circle',
+          backgroundColor: '#FFFFFF',
+          color: '#FFFFFF',
+        },
+        line: {
+          tension: 0.45,
+          borderJoinStyle: 'round',
+          borderWidth: 2,
+          capBezierPoints: true,
+        },
+      },
+    },
+    redraw: true,
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение ChartComponent
+      chartTypeKey: 'Line',
+    },
+  },
+  barLayout: {
+    options: {
+      responsive: true,
+      elements: {
+        bar: {
+          borderRadius: 10,
+        },
+      },
+    },
+    redraw: true,
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение ChartComponent
+      chartTypeKey: 'Bar',
+    },
+  },
+  emptyLayout: {
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        x: { display: false },
+        y: { display: false },
+      },
+      elements: {
+        point: { radius: 0 },
+        line: { borderWidth: 0 },
+      },
+    },
+    notLibraryOptions: {
+      // Этот ключ должен быть в любой итоговой конфигурации для нормальной работы компонента именно в такой вложенности
+      // На основании этого ключа будет приниматься решение какой компонет будет использован (<Line />, <Bar /> и т.д.)
+      // => Файл Chart.js => определение подкомпонента ChartComponent => строка const Component = ...
+      chartTypeKey: 'Line',
+    },
+  },
+};
+
+const finturfChartLayouts = (() => {
+  return ['barLayout', 'lineLayout'].reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: {
+        ...reactChartJsOptionsLayouts[key],
+
+        options: {
+          ...reactChartJsOptionsLayouts[key].options,
+          scales: {
+            ...reactChartJsOptionsLayouts[key].options?.scales,
+            x: {
+              ...reactChartJsOptionsLayouts[key].options?.scales?.x,
+              grid: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.x?.grid,
+                display: false,
+                offset: true,
+              },
+              ticks: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.y?.ticks,
+                autoSkipPadding: 10,
+                align: 'center',
+                color: '#757F8C',
+                lineHeight: 18,
+                font: {
+                  family: 'Sarabun',
+                  style: 'normal',
+                  weight: 400,
+                  size: 8,
+                },
+                // callback: (value, index, ticks) => {
+                //   console.log(value);
+                //   console.log(index);
+                //   console.log(ticks);
+                //   console.log('***********');
+                //   return value;
+                // },
+              },
+            },
+            y: {
+              ...reactChartJsOptionsLayouts[key].options?.scales?.y,
+              min: 0,
+              // grace: '5%',
+              bounds: 'data',
+              grid: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.y?.grid,
+                borderColor: '#E1E8F1',
+                color: '#E1E8F1',
+                borderDash: [5],
+                // borderDashOffset: 12,
+                drawTicks: false,
+                z: -1,
+              },
+              ticks: {
+                ...reactChartJsOptionsLayouts[key].options?.scales?.y?.ticks,
+                autoSkipPadding: 10,
+                align: 'center',
+                color: '#A0A4B0',
+                lineHeight: 18,
+                padding: 6,
+                font: {
+                  family: 'Sarabun',
+                  style: 'normal',
+                  weight: 400,
+                  size: 10,
+                },
+              },
+            },
+          },
+        },
+
+        notLibraryOptions: {
+          ...reactChartJsOptionsLayouts[key].notLibraryOptions,
+          setCanvasDimensions: {
+            height: '194px',
+          },
+        },
+      },
+    }),
+    {},
+  );
+})();
+
+const finturfChartBar = {
+  ...finturfChartLayouts.barLayout,
+  options: {
+    ...finturfChartLayouts.barLayout?.options,
+    maintainAspectRatio: false,
+    elements: {
+      ...finturfChartLayouts.barLayout?.options?.elements,
+      bar: {
+        ...finturfChartLayouts.barLayout?.options?.elements?.bar,
+        borderRadius: 4,
+      },
+    },
+  },
+  notLibraryOptions: {
+    ...finturfChartLayouts.barLayout?.notLibraryOptions,
+    changeData: {
+      ...finturfChartLayouts.barLayout?.notLibraryOptions?.changeData,
+      setMaxBarThickness: 16,
+    },
+  },
+};
+
+const finturfChartLine = {
+  ...finturfChartLayouts.lineLayout,
+  options: {
+    ...finturfChartLayouts.lineLayout?.options,
+    maintainAspectRatio: false,
+    elements: {
+      ...finturfChartLayouts.lineLayout.options?.elements,
+      point: {
+        ...finturfChartLayouts.lineLayout.options?.elements?.point,
+        radius: 2,
+        borderColor: '#32A784',
+        borderWidth: 4,
+      },
+    },
+  },
+};
+
+export const finturfReactChartJsOptions = {
+  finturfChartBar: addAdditionalOptions(finturfChartBar, {
+    addGradientsSettings: GRADIENTS_OBJECTS.finturf.bar,
+    addTooltipOptions: FINTURF_TOOLTIP_OPTIONS,
+  }),
+
+  finturfLoadingModeBar: {
+    ...finturfChartBar,
+
+    options: {
+      ...finturfChartBar.options,
+      animations: {
+        ...finturfChartBar.options?.animations,
+        y: {
+          ...finturfChartBar.options?.animations?.y,
+          duration: 0,
+        },
+      },
+    },
+
+    notLibraryOptions: {
+      ...finturfChartBar.notLibraryOptions,
+      changeData: {
+        ...finturfChartBar.notLibraryOptions?.changeData,
+        addNotLibraryAnimations: [
+          {
+            type: 'runningColumns',
+            // duration - ms
+            duration: 600,
+            // default easing - 'linear',
+            // easing: 'easeInOutExpo',
+            // ToDo - предусмотреть 'auto' и default для from и to
+            from: 10,
+            to: 75,
+            columnsDelayCoef: 500,
+          },
+        ],
+      },
+    },
+  },
+
+  finturfChartLine: addAdditionalOptions(finturfChartLine, {
+    addGradientsSettings: GRADIENTS_OBJECTS.finturf.line,
+    addTooltipOptions: FINTURF_TOOLTIP_OPTIONS,
+    // consoleCurrentData: true,
+  }),
+
+  finturfLoadingModeLine: {
+    ...finturfChartLine,
+
+    options: {
+      ...finturfChartLine.options,
+      elements: {
+        ...finturfChartLine.options?.elements,
+        point: {
+          ...finturfChartLine.options?.elements?.point,
+          radius: 4,
+          borderWidth: 1,
+          borderColor: '#E1E8F1',
+        },
+      },
+      animations: {
+        ...finturfChartLine.options?.animations,
+        y: {
+          ...finturfChartLine.options?.animations?.y,
+          duration: 0,
+        },
+      },
+    },
+
+    notLibraryOptions: {
+      ...finturfChartLine.notLibraryOptions,
+      changeData: {
+        ...finturfChartLine.notLibraryOptions?.changeData,
+        addNotLibraryAnimations: [
+          {
+            type: 'runningColumns',
+            // duration - ms
+            duration: 600,
+            // default easing - 'linear',
+            // easing: 'easeInOutExpo',
+            columnsDelayCoef: 500,
+            isFixExtremeColumns: true,
+          },
+        ],
+      },
+    },
+  },
+
+  finturfPositiveLineIcon: addAdditionalOptions(
+    reactChartJsOptionsLayouts.lineIconLayout,
+    {
+      addGradientsSettings: GRADIENTS_OBJECTS.finturf.positiveLineIcon,
+    },
+  ),
+
+  finturfNegativeLineIcon: addAdditionalOptions(
+    reactChartJsOptionsLayouts.lineIconLayout,
+    {
+      addGradientsSettings: GRADIENTS_OBJECTS.finturf.negativeLineIcon,
+    },
+  ),
+};
+
+export default {
+  ...finturfReactChartJsOptions,
+  emptyLayout: reactChartJsOptionsLayouts.emptyLayout,
+};

package/dist/Atomic/UI/Chart/partial/utils.d.ts

@@ -0,0 +1,5 @@
+export function getChartTypeKey(model: any): any;
+export function correctModelKey(model: any): any;
+export function getOptions(model: any): any;
+export function getNotLibraryOptionsOptions(model: any): any;
+export function prepareData(model: any, data: any, chartInstance: any, addToDatasets: any): any;

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.d.ts

@@ -0,0 +1,14 @@
+export default CircleProgressBar;
+declare function CircleProgressBar({ amount, totalAmount, isReverseType, children, className, colors, isInnerLine, radius, strokeWidth, innerLineStrokeWidth, testId, }: {
+    amount: any;
+    totalAmount: any;
+    isReverseType: any;
+    children: any;
+    className: any;
+    colors: any;
+    isInnerLine: any;
+    radius?: number | undefined;
+    strokeWidth?: number | undefined;
+    innerLineStrokeWidth?: number | undefined;
+    testId?: string | undefined;
+}): JSX.Element;

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.js

@@ -1 +1 @@
-function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,i=Array(t);e<t;e++)i[e]=r[e];return i}import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useEffect as i,useState as s}from"react";import o from"classnames";import"./CircleProgressBar.scss";export default function(n){var a,l=n.amount,c=n.totalAmount,d=n.isReverseType,f=n.children,m=n.className,u=n.colors,p=n.isInnerLine,h=n.radius,g=void 0===h?59:h,y=n.strokeWidth,v=n.innerLineStrokeWidth,b=n.testId,x=Math.round(2*Math.PI*g),S=l<c?Math.round(l/c*100):100,k={start:"#6b81dd",finish:"#f06d8d",meter:"#ffcad6"},_=(a=s(d?String(0):x),function(r){if(Array.isArray(r))return r}(a)||function(r,t){var e,i,s=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=s){var o=[],n=!0,a=!1;try{for(s=s.call(r);!(n=(e=s.next()).done)&&(o.push(e.value),o.length!==t);n=!0);}catch(r){a=!0,i=r}finally{try{n||null==s.return||s.return()}finally{if(a)throw i}}return o}}(a,2)||function(t,e){if(t){if("string"==typeof t)return r(t,2);var i=Object.prototype.toString.call(t).slice(8,-1);if("Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i)return Array.from(i);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return r(t,e)}}(a,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),A=_[0],j=_[1];return i(function(){j(x-x*S/100)},[S]),e("div",{"data-testid":void 0===b?"circle-progress-bar":b,className:o("limit-progress-bar",{"limit-progress-bar--reverse":d},m),children:[e("svg",{className:"limit-progress-bar__progress",width:"124",height:"124",viewBox:"0 0 124 124",children:[t("defs",{children:d?e("linearGradient",{id:"limit-progress-bar-linear-gradient-reverse",x1:"0",y1:"1",x2:"0",y2:"0",children:[t("stop",{offset:"0",stopColor:u.finish||k.finish}),t("stop",{offset:"1",stopColor:u.start||k.start})]}):e("linearGradient",{id:"limit-progress-bar-linear-gradient",x1:"0",y1:"1",x2:"0",y2:"0",children:[t("stop",{offset:"0",stopColor:u.start||k.start}),t("stop",{offset:"1",stopColor:u.finish||k.finish})]})}),t("circle",{className:"limit-progress-bar__meter",cx:g,cy:g,r:g,stroke:p?u.meter||k.meter:"",strokeWidth:String(void 0===v?2:v)}),t("circle",{className:"limit-progress-bar__value",cx:g,cy:g,r:g,strokeWidth:String(void 0===y?2:y),stroke:"url(#limit-progress-bar-linear-gradient".concat(d?"-reverse":"",")"),style:{strokeDasharray:x,strokeDashoffset:A}})]}),t("div",{className:"limit-progress-bar__content",children:f})]})}
+function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=Array(t);r<t;r++)a[r]=e[r];return a}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib").__importDefault(require("classnames")),r=require("react");require("./CircleProgressBar.scss"),exports.default=function(a){var s,i=a.amount,n=a.totalAmount,o=a.isReverseType,l=a.children,c=a.className,u=a.colors,f=a.isInnerLine,m=a.radius,d=void 0===m?59:m,p=a.strokeWidth,h=a.innerLineStrokeWidth,y=a.testId,g=Math.round(2*Math.PI*d),v=i<n?Math.round(i/n*100):100,b={start:"#6b81dd",finish:"#f06d8d",meter:"#ffcad6"},E=(s=(0,r.useState)(o?String(0):g),function(e){if(Array.isArray(e))return e}(s)||function(e,t){var r,a,s=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=s){var i=[],n=!0,o=!1;try{for(s=s.call(e);!(n=(r=s.next()).done)&&(i.push(r.value),i.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==s.return||s.return()}finally{if(o)throw a}}return i}}(s,2)||function(t,r){if(t){if("string"==typeof t)return e(t,2);var a=Object.prototype.toString.call(t).slice(8,-1);if("Object"===a&&t.constructor&&(a=t.constructor.name),"Map"===a||"Set"===a)return Array.from(a);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return e(t,r)}}(s,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),R=E[0],_=E[1];return(0,r.useEffect)(function(){_(g-g*v/100)},[v]),React.createElement("div",{"data-testid":void 0===y?"circle-progress-bar":y,className:(0,t.default)("limit-progress-bar",{"limit-progress-bar--reverse":o},c)},React.createElement("svg",{className:"limit-progress-bar__progress",width:"124",height:"124",viewBox:"0 0 124 124"},React.createElement("defs",null,o?React.createElement("linearGradient",{id:"limit-progress-bar-linear-gradient-reverse",x1:"0",y1:"1",x2:"0",y2:"0"},React.createElement("stop",{offset:"0",stopColor:u.finish||b.finish}),React.createElement("stop",{offset:"1",stopColor:u.start||b.start})):React.createElement("linearGradient",{id:"limit-progress-bar-linear-gradient",x1:"0",y1:"1",x2:"0",y2:"0"},React.createElement("stop",{offset:"0",stopColor:u.start||b.start}),React.createElement("stop",{offset:"1",stopColor:u.finish||b.finish}))),React.createElement("circle",{className:"limit-progress-bar__meter",cx:d,cy:d,r:d,stroke:f?u.meter||b.meter:"",strokeWidth:String(void 0===h?2:h)}),React.createElement("circle",{className:"limit-progress-bar__value",cx:d,cy:d,r:d,strokeWidth:String(void 0===p?2:p),stroke:"url(#limit-progress-bar-linear-gradient".concat(o?"-reverse":"",")"),style:{strokeDasharray:g,strokeDashoffset:R}})),React.createElement("div",{className:"limit-progress-bar__content"},l))};

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleProgressBar.js","sourceRoot":"","sources":["../../../../src/Atomic/UI/CircleProgressBar/CircleProgressBar.jsx"],"names":[],"mappings":"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"}

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.jsx

@@ -0,0 +1,111 @@
+import cn from 'classnames';
+
+import { useEffect, useState } from 'react';
+
+import './CircleProgressBar.scss';
+
+function CircleProgressBar({
+  amount,
+  totalAmount,
+  isReverseType,
+  children,
+  className,
+  colors,
+  isInnerLine,
+  radius = 59,
+  strokeWidth = 2,
+  innerLineStrokeWidth = 2,
+  testId = 'circle-progress-bar',
+}) {
+  const circumference = Math.round(2 * Math.PI * radius);
+  const amountProgress
+    = amount < totalAmount ? Math.round((amount / totalAmount) * 100) : 100; // %
+  const defaultColors = {
+    start: '#6b81dd',
+    finish: '#f06d8d',
+    meter: '#ffcad6',
+  };
+
+  const [strokeDashoffset, setStrokeDashoffset] = useState(isReverseType ? String(0) : circumference);
+
+  useEffect(() => {
+    setStrokeDashoffset(circumference - (circumference * amountProgress) / 100);
+  }, [amountProgress]);
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn('limit-progress-bar', { 'limit-progress-bar--reverse': isReverseType }, className)}
+    >
+      <svg
+        className="limit-progress-bar__progress"
+        width="124"
+        height="124"
+        viewBox="0 0 124 124"
+      >
+        <defs>
+          {isReverseType
+            ? (
+                <linearGradient
+                  id="limit-progress-bar-linear-gradient-reverse"
+                  x1="0"
+                  y1="1"
+                  x2="0"
+                  y2="0"
+                >
+                  <stop
+                    offset="0"
+                    stopColor={colors.finish || defaultColors.finish}
+                  />
+                  <stop
+                    offset="1"
+                    stopColor={colors.start || defaultColors.start}
+                  />
+                </linearGradient>
+              )
+            : (
+                <linearGradient
+                  id="limit-progress-bar-linear-gradient"
+                  x1="0"
+                  y1="1"
+                  x2="0"
+                  y2="0"
+                >
+                  <stop
+                    offset="0"
+                    stopColor={colors.start || defaultColors.start}
+                  />
+                  <stop
+                    offset="1"
+                    stopColor={colors.finish || defaultColors.finish}
+                  />
+                </linearGradient>
+              )}
+        </defs>
+        <circle
+          className="limit-progress-bar__meter"
+          cx={radius}
+          cy={radius}
+          r={radius}
+          stroke={!isInnerLine ? '' : colors.meter || defaultColors.meter}
+          strokeWidth={String(innerLineStrokeWidth)}
+        />
+        <circle
+          className="limit-progress-bar__value"
+          cx={radius}
+          cy={radius}
+          r={radius}
+          strokeWidth={String(strokeWidth)}
+          stroke={`url(#limit-progress-bar-linear-gradient${isReverseType ? '-reverse' : ''})`}
+          style={{
+            strokeDasharray: circumference,
+            strokeDashoffset,
+          }}
+        />
+      </svg>
+      <div className="limit-progress-bar__content">{children}</div>
+    </div>
+  );
+}
+
+export default CircleProgressBar;

package/dist/Atomic/UI/DateTime/DateTime.d.ts

@@ -0,0 +1,11 @@
+export default DateTime;
+declare function DateTime({ className, value, valueFormat, dateFormat: inputDateFormat, timeFormat: inputTimeFormat, isNoDate, isNoTime, testId, }: {
+    className: any;
+    value: any;
+    valueFormat: any;
+    dateFormat: any;
+    timeFormat: any;
+    isNoDate: any;
+    isNoTime: any;
+    testId?: string | undefined;
+}): JSX.Element;

package/dist/Atomic/UI/DateTime/DateTime.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useMemo as a}from"react";import r from"classnames";import m from"moment-timezone";import"./DateTime.scss";var o="date-time";export default function(i){var s,c,n,d=i.className,l=i.value,u=i.valueFormat,f=i.dateFormat,p=i.timeFormat,v=i.isNoDate,N=i.isNoTime,_=i.testId,b=void 0===_?"date-time":_,j=f||"DD.MM.YYYY",x=p||"HH:mm:ss",D=a(function(){return(u?m(l,u):m(l)).format(j)},[l,u,j]),Y=a(function(){return(u?m(l,u):m(l)).format(x)},[l,u,x]);return e("div",{"data-testid":b,className:r(o,d),children:[!v&&t("span",{"data-testid":"".concat(b,"-date"),className:r("".concat(o,"__date")),children:D}),!N&&t("span",{"data-testid":"".concat(b,"-time"),className:r("".concat(o,"__time"),(s={},c="".concat(o,"_color--pause"),n=!v,c in s?Object.defineProperty(s,c,{value:n,enumerable:!0,configurable:!0,writable:!0}):s[c]=n,s)),children:Y})]})}
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=e.__importDefault(require("classnames")),a=e.__importDefault(require("moment-timezone")),r=require("react");require("./DateTime.scss");var i="date-time";exports.default=function(e){var s,u,c,m=e.className,o=e.value,l=e.valueFormat,n=e.dateFormat,d=e.timeFormat,f=e.isNoDate,_=e.isNoTime,p=e.testId,v=void 0===p?"date-time":p,b=n||"DD.MM.YYYY",D=d||"HH:mm:ss",N=(0,r.useMemo)(function(){return(l?(0,a.default)(o,l):(0,a.default)(o)).format(b)},[o,l,b]),q=(0,r.useMemo)(function(){return(l?(0,a.default)(o,l):(0,a.default)(o)).format(D)},[o,l,D]);return React.createElement("div",{"data-testid":v,className:(0,t.default)(i,m)},!f&&React.createElement("span",{"data-testid":"".concat(v,"-date"),className:(0,t.default)("".concat(i,"__date"))},N),!_&&React.createElement("span",{"data-testid":"".concat(v,"-time"),className:(0,t.default)("".concat(i,"__time"),(s={},u="".concat(i,"_color--pause"),c=!f,u in s?Object.defineProperty(s,u,{value:c,enumerable:!0,configurable:!0,writable:!0}):s[u]=c,s))},q))};

package/dist/Atomic/UI/DateTime/DateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/Atomic/UI/DateTime/DateTime.jsx"],"names":[],"mappings":";;;AAAA,oEAA4B;AAE5B,8EAAqC;AACrC,iCAAgC;AAEhC,2BAAyB;AAEzB,MAAM,EAAE,GAAG,WAAW,CAAC;AAEvB,MAAM,mBAAmB,GAAG,YAAY,CAAC;AACzC,MAAM,mBAAmB,GAAG,UAAU,CAAC;AAEvC,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,eAAe,EAC3B,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,WAAW,GACrB;IACC,MAAM,UAAU,GAAG,eAAe,IAAI,mBAAmB,CAAC;IAC1D,MAAM,UAAU,GAAG,eAAe,IAAI,mBAAmB,CAAC;IAE1D,MAAM,IAAI,GAAG,IAAA,eAAO,EAClB,GAAG,EAAE,CACH,CAAC,WAAW,CAAC,CAAC,CAAC,IAAA,yBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAA,yBAAM,EAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAC/D,UAAU,CACX,EACH,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,CACjC,CAAC;IACF,MAAM,IAAI,GAAG,IAAA,eAAO,EAClB,GAAG,EAAE,CACH,CAAC,WAAW,CAAC,CAAC,CAAC,IAAA,yBAAM,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAA,yBAAM,EAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAC/D,UAAU,CACX,EACH,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,CACjC,CAAC;IAEF,OAAO,CACL,4CAAkB,MAAM,EAAE,SAAS,EAAE,IAAA,oBAAE,EAAC,EAAE,EAAE,SAAS,CAAC;QACnD,CAAC,QAAQ,IAAI,CACZ,6CAAmB,GAAG,MAAM,OAAO,EAAE,SAAS,EAAE,IAAA,oBAAE,EAAC,GAAG,EAAE,QAAQ,CAAC,IAC9D,IAAI,CACA,CACR;QACA,CAAC,QAAQ,IAAI,CACZ,6CAAmB,GAAG,MAAM,OAAO,EAAE,SAAS,EAAE,IAAA,oBAAE,EAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,GAAG,EAAE,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,IACrG,IAAI,CACA,CACR,CACG,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,QAAQ,CAAC"}

package/dist/Atomic/UI/DateTime/DateTime.jsx

@@ -0,0 +1,57 @@
+import cn from 'classnames';
+
+import moment from 'moment-timezone';
+import { useMemo } from 'react';
+
+import './DateTime.scss';
+
+const RC = 'date-time';
+
+const DEFAULT_DATE_FORMAT = 'DD.MM.YYYY';
+const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
+
+function DateTime({
+  className,
+  value,
+  valueFormat,
+  dateFormat: inputDateFormat,
+  timeFormat: inputTimeFormat,
+  isNoDate,
+  isNoTime,
+  testId = 'date-time',
+}) {
+  const dateFormat = inputDateFormat || DEFAULT_DATE_FORMAT;
+  const timeFormat = inputTimeFormat || DEFAULT_TIME_FORMAT;
+
+  const date = useMemo(
+    () =>
+      (valueFormat ? moment(value, valueFormat) : moment(value)).format(
+        dateFormat,
+      ),
+    [value, valueFormat, dateFormat],
+  );
+  const time = useMemo(
+    () =>
+      (valueFormat ? moment(value, valueFormat) : moment(value)).format(
+        timeFormat,
+      ),
+    [value, valueFormat, timeFormat],
+  );
+
+  return (
+    <div data-testid={testId} className={cn(RC, className)}>
+      {!isNoDate && (
+        <span data-testid={`${testId}-date`} className={cn(`${RC}__date`)}>
+          {date}
+        </span>
+      )}
+      {!isNoTime && (
+        <span data-testid={`${testId}-time`} className={cn(`${RC}__time`, { [`${RC}_color--pause`]: !isNoDate })}>
+          {time}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default DateTime;

package/dist/Atomic/UI/DebugContainer/DebugContainer.d.ts

@@ -0,0 +1,5 @@
+export default DebugContainer;
+declare function DebugContainer({ data, children }: {
+    data: any;
+    children: any;
+}): JSX.Element;

package/dist/Atomic/UI/DebugContainer/DebugContainer.js

@@ -1 +1 @@
-function r(r,n){(null==n||n>r.length)&&(n=r.length);for(var t=0,e=Array(n);t<n;t++)e[t]=r[t];return e}import{jsx as n,jsxs as t}from"react/jsx-runtime";import{useState as e}from"react";import{ChevronDown as o,ChevronUp as a}from"react-feather";import"./DebugContainer.scss";export default function(i){var l,c,u,d,s=i.data,f=i.children,m=(l=e(!0),function(r){if(Array.isArray(r))return r}(l)||function(r,n){var t,e,o=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=o){var a=[],i=!0,l=!1;try{for(o=o.call(r);!(i=(t=o.next()).done)&&(a.push(t.value),a.length!==n);i=!0);}catch(r){l=!0,e=r}finally{try{i||null==o.return||o.return()}finally{if(l)throw e}}return a}}(l,2)||function(n,t){if(n){if("string"==typeof n)return r(n,2);var e=Object.prototype.toString.call(n).slice(8,-1);if("Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return r(n,t)}}(l,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),y=m[0],b=m[1];return t("div",{className:"debug-container",children:[y&&t("div",{className:"debug-container__body",children:[n("h5",{children:"Debug:"}),s&&!!(null==(d=Object)||null==(u=d.keys(s))?void 0:u.length)&&n("div",{className:"debug-container__body-row",children:t("pre",{children:["{\n",null==(c=Object.keys(s))?void 0:c.map(function(r){return"  ".concat(r,": ").concat(null==s?void 0:s[r],",\n")}),"}"]})}),f&&n("div",{className:"debug-container__body-row",children:f})]}),n("div",{className:"debug-container__toggler",onClick:function(){return b(function(r){return!r})},children:y?n(a,{}):n(o,{})})]})}
+function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=require("react-feather");require("./DebugContainer.scss"),exports.default=function(n){var a,l,c,o=n.data,u=n.children,i=(a=(0,t.useState)(!0),function(e){if(Array.isArray(e))return e}(a)||function(e,t){var r,n,a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l=[],c=!0,o=!1;try{for(a=a.call(e);!(c=(r=a.next()).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){o=!0,n=e}finally{try{c||null==a.return||a.return()}finally{if(o)throw n}}return l}}(a,2)||function(t,r){if(t){if("string"==typeof t)return e(t,2);var n=Object.prototype.toString.call(t).slice(8,-1);if("Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}}(a,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),s=i[0],d=i[1];return React.createElement("div",{className:"debug-container"},s&&React.createElement("div",{className:"debug-container__body"},React.createElement("h5",null,"Debug:"),o&&!!(null==(c=null==Object?void 0:Object.keys(o))?void 0:c.length)&&React.createElement("div",{className:"debug-container__body-row"},React.createElement("pre",null,"{\n",null==(l=Object.keys(o))?void 0:l.map(function(e){return"  ".concat(e,": ").concat(null==o?void 0:o[e],",\n")}),"}")),u&&React.createElement("div",{className:"debug-container__body-row"},u)),React.createElement("div",{className:"debug-container__toggler",onClick:function(){return d(function(e){return!e})}},s?React.createElement(r.ChevronUp,null):React.createElement(r.ChevronDown,null)))};

package/dist/Atomic/UI/DebugContainer/DebugContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugContainer.js","sourceRoot":"","sources":["../../../../src/Atomic/UI/DebugContainer/DebugContainer.jsx"],"names":[],"mappings":";;AAAA,iCAAiC;AAEjC,iDAAuD;AAEvD,iCAA+B;AAE/B,SAAS,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE;;IACxC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,GAAG,EAAE;;QACtB,OAAO,CACL;YACG,KAAK,EACL,MAAA,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;eAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC9B,OAAO,KAAK,GAAG,KAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,GAAG,CAAC,KAAK,CAAC;YACvC,CAAC,CAAC;YACD,GAAG,CACA,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC7B,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,uBAAuB;YACpC,yCAAe;YACd,IAAI,IAAI,OAAO,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,IAAI,CAAC,0CAAE,MAAM,CAAC,IAAI,CAC9C,6BAAK,SAAS,EAAC,2BAA2B,IAAE,UAAU,EAAE,CAAO,CAChE;YACA,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAO,CAC5D,CACG,CACP;QACD,6BACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAEnC,SAAS,CAAC,CAAC,CAAC,oBAAC,yBAAS,OAAG,CAAC,CAAC,CAAC,oBAAC,2BAAW,OAAG,CACxC,CACF,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/dist/Atomic/UI/DebugContainer/DebugContainer.jsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import { ChevronDown, ChevronUp } from 'react-feather';
+
+import './DebugContainer.scss';
+
+function DebugContainer({ data, children }) {
+  const [isVisible, setIsVisible] = useState(true);
+  const renderData = () => {
+    return (
+      <pre>
+        {'{\n'}
+        {Object.keys(data)?.map((key) => {
+          return `  ${key}: ${data?.[key]},\n`;
+        })}
+        {'}'}
+      </pre>
+    );
+  };
+
+  return (
+    <div className="debug-container">
+      {isVisible && (
+        <div className="debug-container__body">
+          <h5>Debug:</h5>
+          {data && Boolean(Object?.keys(data)?.length) && (
+            <div className="debug-container__body-row">{renderData()}</div>
+          )}
+          {children && (
+            <div className="debug-container__body-row">{children}</div>
+          )}
+        </div>
+      )}
+      <div
+        className="debug-container__toggler"
+        onClick={() => setIsVisible(v => !v)}
+      >
+        {isVisible ? <ChevronUp /> : <ChevronDown />}
+      </div>
+    </div>
+  );
+}
+
+export default DebugContainer;

package/dist/Atomic/UI/DebugContainer/useDebugContainer.d.ts

@@ -0,0 +1,6 @@
+export default useDebugContainer;
+declare function useDebugContainer(): {
+    debugData: {};
+    setDebugData: import("react").Dispatch<import("react").SetStateAction<{}>>;
+    renderDebugContainer: JSX.Element;
+};