intelicoreact 1.8.8 → 1.8.10

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

@@ -1 +1,334 @@
-function t(t,n,o){return n in t?Object.defineProperty(t,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[n]=o,t}function n(n){for(var o=1;o<arguments.length;o++){var i=null!=arguments[o]?arguments[o]:{},e=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),e.forEach(function(o){t(n,o,i[o])})}return n}function o(t,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(t,n){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);o.push.apply(o,i)}return o})(Object(n)).forEach(function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(n,o))}),t}import{FINTURF_TOOLTIP_OPTIONS as i,GRADIENTS_OBJECTS as e}from"./Chart.constants";import r from"./optionsSetters";export var reactChartJsOptionsLayouts={lineIconLayout:{options:{responsive:!0,maintainAspectRatio:!1,scales:{x:{display:!1},y:{display:!1}},elements:{point:{radius:0},line:{tension:.45,borderJoinStyle:"round",borderWidth:2,capBezierPoints:!0}}},redraw:!0,notLibraryOptions:{chartTypeKey:"Line",setCanvasDimensions:{width:"75px",height:"35px"}}},lineLayout:{options:{responsive:!0,elements:{point:{radius:4,pointStyle:"circle",backgroundColor:"#FFFFFF",color:"#FFFFFF"},line:{tension:.45,borderJoinStyle:"round",borderWidth:2,capBezierPoints:!0}}},redraw:!0,notLibraryOptions:{chartTypeKey:"Line"}},barLayout:{options:{responsive:!0,elements:{bar:{borderRadius:10}}},redraw:!0,notLibraryOptions:{chartTypeKey:"Bar"}},emptyLayout:{options:{responsive:!0,maintainAspectRatio:!1,scales:{x:{display:!1},y:{display:!1}},elements:{point:{radius:0},line:{borderWidth:0}}},notLibraryOptions:{chartTypeKey:"Line"}}};var a,s,l,u,p,y,d,c,b,L,f,O,m,h,g,v,C,J,F,w,P,S,D,j,x=["barLayout","lineLayout"].reduce(function(i,e){var r,a,s,l,u,p,y,d,c,b,L,f,O,m,h,g,v;return o(n({},i),t({},e,o(n({},reactChartJsOptionsLayouts[e]),{options:o(n({},reactChartJsOptionsLayouts[e].options),{scales:o(n({},null==(r=reactChartJsOptionsLayouts[e].options)?void 0:r.scales),{x:o(n({},null==(s=reactChartJsOptionsLayouts[e].options)||null==(a=s.scales)?void 0:a.x),{grid:o(n({},null==(p=reactChartJsOptionsLayouts[e].options)||null==(u=p.scales)||null==(l=u.x)?void 0:l.grid),{display:!1,offset:!0}),ticks:o(n({},null==(c=reactChartJsOptionsLayouts[e].options)||null==(d=c.scales)||null==(y=d.y)?void 0:y.ticks),{autoSkipPadding:10,align:"center",color:"#757F8C",lineHeight:18,font:{family:"Sarabun",style:"normal",weight:400,size:8}})}),y:o(n({},null==(L=reactChartJsOptionsLayouts[e].options)||null==(b=L.scales)?void 0:b.y),{min:0,bounds:"data",grid:o(n({},null==(m=reactChartJsOptionsLayouts[e].options)||null==(O=m.scales)||null==(f=O.y)?void 0:f.grid),{borderColor:"#E1E8F1",color:"#E1E8F1",borderDash:[5],drawTicks:!1,z:-1}),ticks:o(n({},null==(v=reactChartJsOptionsLayouts[e].options)||null==(g=v.scales)||null==(h=g.y)?void 0:h.ticks),{autoSkipPadding:10,align:"center",color:"#A0A4B0",lineHeight:18,padding:6,font:{family:"Sarabun",style:"normal",weight:400,size:10}})})})}),notLibraryOptions:o(n({},reactChartJsOptionsLayouts[e].notLibraryOptions),{setCanvasDimensions:{height:"194px"}})})))},{}),k=o(n({},x.barLayout),{options:o(n({},null==(a=x.barLayout)?void 0:a.options),{maintainAspectRatio:!1,elements:o(n({},null==(l=x.barLayout)||null==(s=l.options)?void 0:s.elements),{bar:o(n({},null==(y=x.barLayout)||null==(p=y.options)||null==(u=p.elements)?void 0:u.bar),{borderRadius:4})})}),notLibraryOptions:o(n({},null==(d=x.barLayout)?void 0:d.notLibraryOptions),{changeData:o(n({},null==(b=x.barLayout)||null==(c=b.notLibraryOptions)?void 0:c.changeData),{setMaxBarThickness:16})})}),A=o(n({},x.lineLayout),{options:o(n({},null==(L=x.lineLayout)?void 0:L.options),{maintainAspectRatio:!1,elements:o(n({},null==(f=x.lineLayout.options)?void 0:f.elements),{point:o(n({},null==(m=x.lineLayout.options)||null==(O=m.elements)?void 0:O.point),{radius:2,borderColor:"#32A784",borderWidth:4})})})});export var finturfReactChartJsOptions={finturfChartBar:r(k,{addGradientsSettings:e.finturf.bar,addTooltipOptions:i}),finturfLoadingModeBar:o(n({},k),{options:o(n({},k.options),{animations:o(n({},null==(h=k.options)?void 0:h.animations),{y:o(n({},null==(v=k.options)||null==(g=v.animations)?void 0:g.y),{duration:0})})}),notLibraryOptions:o(n({},k.notLibraryOptions),{changeData:o(n({},null==(C=k.notLibraryOptions)?void 0:C.changeData),{addNotLibraryAnimations:[{type:"runningColumns",duration:600,from:10,to:75,columnsDelayCoef:500}]})})}),finturfChartLine:r(A,{addGradientsSettings:e.finturf.line,addTooltipOptions:i}),finturfLoadingModeLine:o(n({},A),{options:o(n({},A.options),{elements:o(n({},null==(J=A.options)?void 0:J.elements),{point:o(n({},null==(w=A.options)||null==(F=w.elements)?void 0:F.point),{radius:4,borderWidth:1,borderColor:"#E1E8F1"})}),animations:o(n({},null==(P=A.options)?void 0:P.animations),{y:o(n({},null==(D=A.options)||null==(S=D.animations)?void 0:S.y),{duration:0})})}),notLibraryOptions:o(n({},A.notLibraryOptions),{changeData:o(n({},null==(j=A.notLibraryOptions)?void 0:j.changeData),{addNotLibraryAnimations:[{type:"runningColumns",duration:600,columnsDelayCoef:500,isFixExtremeColumns:!0}]})})}),finturfPositiveLineIcon:r(reactChartJsOptionsLayouts.lineIconLayout,{addGradientsSettings:e.finturf.positiveLineIcon}),finturfNegativeLineIcon:r(reactChartJsOptionsLayouts.lineIconLayout,{addGradientsSettings:e.finturf.negativeLineIcon})};export default o(n({},finturfReactChartJsOptions),{emptyLayout:reactChartJsOptionsLayouts.emptyLayout});
+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/CircleProgressBar/CircleProgressBar.jsx

@@ -1 +1,111 @@
-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 i from"classnames";import{useEffect as s,useState as o}from"react";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=o(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 s(function(){j(x-x*S/100)},[S]),e("div",{"data-testid":void 0===b?"circle-progress-bar":b,className:i("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})]})}
+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.jsx

@@ -1 +1,57 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import a from"classnames";import r from"moment-timezone";import{useMemo as m}from"react";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=m(function(){return(u?r(l,u):r(l)).format(j)},[l,u,j]),Y=m(function(){return(u?r(l,u):r(l)).format(x)},[l,u,x]);return e("div",{"data-testid":b,className:a(o,d),children:[!v&&t("span",{"data-testid":"".concat(b,"-date"),className:a("".concat(o,"__date")),children:D}),!N&&t("span",{"data-testid":"".concat(b,"-time"),className:a("".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})]})}
+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.jsx

@@ -1 +1,44 @@
-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,{})})]})}
+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.jsx

@@ -1 +1,15 @@
-function r(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=Array(t);e<t;e++)n[e]=r[e];return n}import{jsx as t}from"react/jsx-runtime";import{useState as e}from"react";import n from"./DebugContainer";export default function(){var o,a=(o=e({}),function(r){if(Array.isArray(r))return r}(o)||function(r,t){var e,n,o=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=o){var a=[],u=!0,i=!1;try{for(o=o.call(r);!(u=(e=o.next()).done)&&(a.push(e.value),a.length!==t);u=!0);}catch(r){i=!0,n=r}finally{try{u||null==o.return||o.return()}finally{if(i)throw n}}return a}}(o,2)||function(t,e){if(t){if("string"==typeof t)return r(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 r(t,e)}}(o,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.")}()),u=a[0];return{debugData:u,setDebugData:a[1],renderDebugContainer:t(n,{data:u})}}
+import { useState } from 'react';
+
+import DebugContainer from './DebugContainer';
+
+function useDebugContainer() {
+  const [data, setData] = useState({});
+
+  return {
+    debugData: data,
+    setDebugData: setData,
+    renderDebugContainer: <DebugContainer data={data} />,
+  };
+}
+
+export default useDebugContainer;