@desynova-digital/components 8.19.12 → 8.19.15

package/atoms/loader/ShimmerComponent/Shimmer.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const shimmerAnimation = keyframes`
+    0% {
+      transform: translateX(-100%);
+    }   
+    
+    100% {
+      transform: translateX(100%);
+    }
+`;
+
+const ShimmerContainer = styled.div`
+  position: relative;
+  background-color: linear-gradient(
+    85deg,
+    rgba(48, 63, 81, 0.5) 0%,
+    rgba(48, 63, 81, 0.24) 50.76%,
+    rgba(48, 63, 81, 0.11) 68.68%,
+    rgba(48, 63, 81, 0) 100%
+  );
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  border-radius: 38px;
+  overflow: hidden;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+    animation: ${shimmerAnimation} 1s infinite;
+  }
+`;
+
+const Shimmer = ({ height, width }) => {
+  return (
+    <div style={{ marginRight: '2px' }}>
+      <ShimmerContainer width={width} height={height} />{' '}
+    </div>
+  );
+};
+
+export default Shimmer;

package/components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.Loader = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.DateTime = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
 require("./_helpers/globals");
 
@@ -187,6 +187,38 @@ var _errorScreen = require("./molecules/errorScreen/errorScreen");
 
 var _errorScreen2 = _interopRequireDefault(_errorScreen);
 
+var _CollabErrorScreen = require("./atoms/loader/ShimmerComponent/CollabErrorScreen");
+
+var _CollabErrorScreen2 = _interopRequireDefault(_CollabErrorScreen);
+
+var _CollabShimmerCard = require("./atoms/loader/ShimmerComponent/CollabShimmerCard");
+
+var _CollabShimmerCard2 = _interopRequireDefault(_CollabShimmerCard);
+
+var _CollabShimmerCardTray = require("./atoms/loader/ShimmerComponent/CollabShimmerCardTray");
+
+var _CollabShimmerCardTray2 = _interopRequireDefault(_CollabShimmerCardTray);
+
+var _FiltersShimmer = require("./atoms/loader/ShimmerComponent/FiltersShimmer");
+
+var _FiltersShimmer2 = _interopRequireDefault(_FiltersShimmer);
+
+var _GraphDetailShimmer = require("./atoms/loader/ShimmerComponent/GraphDetailShimmer");
+
+var _GraphDetailShimmer2 = _interopRequireDefault(_GraphDetailShimmer);
+
+var _GraphsComponentShimmer = require("./atoms/loader/ShimmerComponent/GraphsComponentShimmer");
+
+var _GraphsComponentShimmer2 = _interopRequireDefault(_GraphsComponentShimmer);
+
+var _GraphTitleShimmer = require("./atoms/loader/ShimmerComponent/GraphTitleShimmer");
+
+var _GraphTitleShimmer2 = _interopRequireDefault(_GraphTitleShimmer);
+
+var _Shimmer = require("./atoms/loader/ShimmerComponent/Shimmer");
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* Molecules */
@@ -243,5 +275,13 @@ exports.Tabs = _tabs2.default;
 exports.Carousel = _carousel2.default;
 exports.ErrorScreen = _errorScreen2.default;
 exports.SideBar = _sidebar2.default;
+exports.CollabErrorScreen = _CollabErrorScreen2.default;
+exports.CollabShimmerCard = _CollabShimmerCard2.default;
+exports.CollabShimmerCardTray = _CollabShimmerCardTray2.default;
+exports.FiltersShimmer = _FiltersShimmer2.default;
+exports.GraphDetailsShimmer = _GraphDetailShimmer2.default;
+exports.GraphsComponentShimmer = _GraphsComponentShimmer2.default;
+exports.GraphTitleShimmer = _GraphTitleShimmer2.default;
+exports.Shimmer = _Shimmer2.default;
 
 /* atoms */

package/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
+exports.Shimmer = exports.GraphTitleShimmer = exports.GraphsComponentShimmer = exports.GraphDetailsShimmer = exports.FiltersShimmer = exports.CollabShimmerCardTray = exports.CollabShimmerCard = exports.CollabErrorScreen = exports.SideBar = exports.ErrorScreen = exports.Carousel = exports.Tabs = exports.VideoPlayer = exports.Select = exports.DatePicker = exports.Loader = exports.VideoCardList = exports.CardStack = exports.DropdownList = exports.Dropdown = exports.Toast = exports.Timer = exports.Popup = exports.CustomSelect = exports.DateTime = exports.Switch = exports.Radio = exports.Filter = exports.Table = exports.Pagination = exports.PageHeader = exports.CircleNested = exports.CircleDonut = exports.VerticalBarGraph = exports.PieChart = exports.CircleGraph = exports.BarGraph = exports.Break = exports.Image = exports.Checkbox = exports.Textarea = exports.InputText = exports.VideoCard = exports.GraphDetailCard = exports.GraphCard = exports.CardV2 = exports.Card = exports.Icon = exports.Tag = exports.Label = exports.Badge = exports.Button = exports.Avatar = undefined;
 
 var _components = require("./components");
 
@@ -51,4 +51,12 @@ exports.VideoPlayer = _components.VideoPlayer;
 exports.Tabs = _components.Tabs;
 exports.Carousel = _components.Carousel;
 exports.ErrorScreen = _components.ErrorScreen;
-exports.SideBar = _components.SideBar;
+exports.SideBar = _components.SideBar;
+exports.CollabErrorScreen = _components.CollabErrorScreen;
+exports.CollabShimmerCard = _components.CollabShimmerCard;
+exports.CollabShimmerCardTray = _components.CollabShimmerCardTray;
+exports.FiltersShimmer = _components.FiltersShimmer;
+exports.GraphDetailsShimmer = _components.GraphDetailsShimmer;
+exports.GraphsComponentShimmer = _components.GraphsComponentShimmer;
+exports.GraphTitleShimmer = _components.GraphTitleShimmer;
+exports.Shimmer = _components.Shimmer;

package/molecules/errorScreen/TableErrorScreen.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var TableErrorScreen = function TableErrorScreen() {
+  return _react2.default.createElement(
+    'div',
+    {
+      style: _defineProperty({
+        height: '279px',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }, 'alignItems', 'center') },
+    _react2.default.createElement(
+      'div',
+      {
+        style: {
+          width: '520px',
+          height: '130px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '10px'
+        } },
+      _react2.default.createElement(
+        'div',
+        {
+          style: {
+            height: '120px',
+            width: '120px',
+            background: '#303F51',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            flexDirection: 'column'
+          } },
+        _react2.default.createElement(
+          'div',
+          {
+            style: {
+              display: 'flex',
+              alignItems: 'flex-start',
+              justifyContent: 'center',
+              gap: '8px',
+              flexDirection: 'column'
+            } },
+          _react2.default.createElement('div', { style: { height: '10px', width: '60px', background: '#182738', borderRadius: '10px' } }),
+          _react2.default.createElement('div', { style: { height: '10px', width: '40px', background: '#182738', borderRadius: '10px' } }),
+          _react2.default.createElement('div', { style: { height: '10px', width: '50px', background: '#182738', borderRadius: '10px' } }),
+          _react2.default.createElement('div', { style: { height: '10px', width: '30px', background: '#182738', borderRadius: '10px' } }),
+          _react2.default.createElement('div', { style: { height: '10px', width: '50px', background: '#182738', borderRadius: '10px' } })
+        )
+      ),
+      _react2.default.createElement(
+        'div',
+        {
+          style: {
+            height: '120px',
+            width: '300px ',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            flexDirection: 'column'
+          } },
+        _react2.default.createElement(
+          'p',
+          {
+            style: {
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '24px',
+              fontWeight: '500',
+              lineHeight: '36px',
+              fontStyle: 'normal'
+            } },
+          'No Results Found'
+        ),
+        _react2.default.createElement(
+          'p',
+          {
+            style: {
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '14px',
+              fontStyle: 'normal',
+              fontWeight: '300',
+              lineHeight: '21px'
+            } },
+          'Try a different filter set'
+        )
+      )
+    )
+  );
+};
+
+exports.default = TableErrorScreen;

package/molecules/errorScreen/TableErrorScreen.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+const TableErrorScreen = () => {
+  return (
+    <div
+      style={{
+        height: '279px',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}>
+      <div
+        style={{
+          width: '520px',
+          height: '130px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '10px'
+        }}>
+        <div
+          style={{
+            height: '120px',
+            width: '120px',
+            background: '#303F51',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '50%',
+            flexDirection: 'column'
+          }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'flex-start',
+              justifyContent: 'center',
+              gap: '8px',
+              flexDirection: 'column'
+            }}>
+            <div style={{ height: '10px', width: '60px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '40px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '30px', background: '#182738', borderRadius: '10px' }}></div>
+            <div style={{ height: '10px', width: '50px', background: '#182738', borderRadius: '10px' }}></div>
+          </div>
+        </div>
+        <div
+          style={{
+            height: '120px',
+            width: '300px ',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            flexDirection: 'column'
+          }}>
+          <p
+            style={{
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '24px',
+              fontWeight: '500',
+              lineHeight: '36px',
+              fontStyle: 'normal'
+            }}>
+            No Results Found
+          </p>
+          <p
+            style={{
+              color: 'var(--color-text-color-pure-white, #FFF)',
+              fontSize: '14px',
+              fontStyle: 'normal',
+              fontWeight: '300',
+              lineHeight: '21px'
+            }}>
+            Try a different filter set
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableErrorScreen;