@antscorp/antsomi-ui 2.0.101 → 2.0.103

package/es/components/atoms/MobileFrameV2/styled.js

@@ -5,48 +5,48 @@ import MobileFrameV2 from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-mobile
 import cameraImage from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-camera.png';
 // Constants
 import { MOBILE_VIEWPORT } from './constants';
-export const MobileWrapper = styled.div `
-  position: relative;
-  display: flex;
-  justify-content: center;
-  background: url(${MobileFrameV2}) no-repeat center center;
-  background-size: contain;
+export const MobileWrapper = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: url(${MobileFrameV2}) no-repeat center center;
+  background-size: contain;
 `;
-export const MobileInner = styled.div `
-  position: relative;
-  margin: 18px 21px;
-  border-radius: 50px;
-  overflow: hidden;
-
-  .mobile-inner-content {
-    position: absolute;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  @media screen and (max-height: 1000px) {
-    width: ${MOBILE_VIEWPORT.MD.width}px;
-    max-width: ${MOBILE_VIEWPORT.MD.width}px;
-    height: ${MOBILE_VIEWPORT.MD.height}px;
-  }
-
-  @media screen and (min-height: 1001px) {
-    width: ${MOBILE_VIEWPORT.LG.width}px;
-    max-width: ${MOBILE_VIEWPORT.LG.width}px;
-    height: ${MOBILE_VIEWPORT.LG.height}px;
-  }
+export const MobileInner = styled.div `
+  position: relative;
+  margin: 18px 21px;
+  border-radius: 50px;
+  overflow: hidden;
+
+  .mobile-inner-content {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media screen and (max-height: 1000px) {
+    width: ${MOBILE_VIEWPORT.MD.width}px;
+    max-width: ${MOBILE_VIEWPORT.MD.width}px;
+    height: ${MOBILE_VIEWPORT.MD.height}px;
+  }
+
+  @media screen and (min-height: 1001px) {
+    width: ${MOBILE_VIEWPORT.LG.width}px;
+    max-width: ${MOBILE_VIEWPORT.LG.width}px;
+    height: ${MOBILE_VIEWPORT.LG.height}px;
+  }
 `;
-export const MobileCamera = styled.div `
-  position: absolute;
-  pointer-events: none;
-  width: 112.11px;
-  height: 32.29px;
-  margin: auto;
-  top: 10px;
-  left: 50%;
-  z-index: 1;
-  transform: translateX(-50%);
-  background: url(${cameraImage}) no-repeat center center;
-  background-size: contain;
+export const MobileCamera = styled.div `
+  position: absolute;
+  pointer-events: none;
+  width: 112.11px;
+  height: 32.29px;
+  margin: auto;
+  top: 10px;
+  left: 50%;
+  z-index: 1;
+  transform: translateX(-50%);
+  background: url(${cameraImage}) no-repeat center center;
+  background-size: contain;
 `;

package/es/components/atoms/MobileFrameV3/styled.js

@@ -5,40 +5,40 @@ import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/previews/iphonev2
 // Constants
 import { DEFAULT_DIMENSIONS } from './constants';
 const { MEDIUM, LARGE } = DEFAULT_DIMENSIONS;
-export const MobileWrapper = styled.div `
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  background: url(${MobileFrame}) no-repeat center center;
-  background-size: contain;
+export const MobileWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background: url(${MobileFrame}) no-repeat center center;
+  background-size: contain;
 `;
-export const MobileInner = styled.div `
-  position: relative;
-  width: 100%;
-  max-width: ${props => (props.size === 'medium' ? MEDIUM.WIDTH : LARGE.WIDTH)}px;
-  height: ${props => (props.size === 'medium' ? MEDIUM.HEIGHT : LARGE.HEIGHT)}px;
-  overflow: hidden;
-
+export const MobileInner = styled.div `
+  position: relative;
+  width: 100%;
+  max-width: ${props => (props.size === 'medium' ? MEDIUM.WIDTH : LARGE.WIDTH)}px;
+  height: ${props => (props.size === 'medium' ? MEDIUM.HEIGHT : LARGE.HEIGHT)}px;
+  overflow: hidden;
+
   ${props => props.backgroundColor &&
-    css `
-      background-color: ${props.backgroundColor};
-    `}
+    css `
+      background-color: ${props.backgroundColor};
+    `}
 `;
-export const ScreenContainer = styled.main `
-  position: absolute;
+export const ScreenContainer = styled.main `
+  position: absolute;
 `;
-export const BrandPosition = styled.div `
-  position: absolute;
+export const BrandPosition = styled.div `
+  position: absolute;
 `;
-export const MobileBottomLine = styled.div `
-  width: 145px;
-  height: 5px;
-  background-color: #000000;
-  border-radius: 20px;
-  position: absolute;
-  margin: auto;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
+export const MobileBottomLine = styled.div `
+  width: 145px;
+  height: 5px;
+  background-color: #000000;
+  border-radius: 20px;
+  position: absolute;
+  margin: auto;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
 `;

package/es/components/atoms/NotificationStatus/NotificationStatus.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type TNotification = {
+    title: string;
+    message?: string;
+    type: 'success' | 'error';
+    timeout?: number;
+};
+declare const useNotificationStatus: () => {
+    contextHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    showNotification: ({ title, message, type, timeout, }: TNotification) => void;
+};
+export default useNotificationStatus;

package/es/components/atoms/NotificationStatus/NotificationStatus.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notification } from 'antd';
+import { MAP_BY_TYPE, STYLE_NOTIFICATION } from './constants';
+import { Content, Title } from './styled';
+import { Icon } from '../Icon';
+const useNotificationStatus = () => {
+    const [api, contextHolder] = notification.useNotification();
+    const showNotification = ({ title = '', message = '', type = 'success', timeout = 4, }) => {
+        const info = MAP_BY_TYPE[type];
+        return api[type]({
+            message: _jsx(Title, { color: info.color, children: title }),
+            description: _jsx(Content, { children: message }),
+            duration: timeout,
+            style: {
+                ...STYLE_NOTIFICATION,
+                borderLeft: `4px solid ${info.color}`,
+            },
+            placement: 'bottomLeft',
+            closeIcon: _jsx(Icon, { size: 14, color: "#595959", type: "icon-ants-remove-slim" }),
+        });
+    };
+    return {
+        contextHolder,
+        showNotification,
+    };
+};
+export default useNotificationStatus;

package/es/components/atoms/NotificationStatus/constants/index.d.ts

@@ -0,0 +1,15 @@
+export declare const MAP_BY_TYPE: {
+    readonly success: {
+        readonly color: "#12B800";
+    };
+    readonly error: {
+        readonly color: "#ef3340";
+    };
+};
+export declare const STYLE_NOTIFICATION: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    padding: string;
+    borderRadius: string;
+};

package/es/components/atoms/NotificationStatus/constants/index.js

@@ -0,0 +1,15 @@
+export const MAP_BY_TYPE = {
+    success: {
+        color: '#12B800',
+    },
+    error: {
+        color: '#ef3340',
+    },
+};
+export const STYLE_NOTIFICATION = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+    padding: '15px',
+    borderRadius: '10px',
+};

package/es/components/atoms/NotificationStatus/index.d.ts

@@ -0,0 +1 @@
+export { default as useNotificationStatus } from './NotificationStatus';

package/es/components/atoms/NotificationStatus/index.js

@@ -0,0 +1 @@
+export { default as useNotificationStatus } from './NotificationStatus';

package/es/components/atoms/NotificationStatus/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/NotificationStatus/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const Title = styled.div `
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${props => props.color || '#000'};
+`;
+export const WrapperIcon = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const Content = styled.div `
+  color: #7f7f7f;
+`;

package/es/components/atoms/PreviewTabs/styled.js

@@ -3,76 +3,76 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Flex } from '../Flex';
 // Styled
 import styled from 'styled-components';
-export const StyledRichMenuTabs = styled.div `
-  display: flex;
-  align-items: center;
-  background: #f0f0f0;
-  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
-  height: 40px;
-  width: ${({ width }) => width || 467}px;
-
-  .tabs {
-    flex: 1;
-    width: 100%;
-    overflow: auto;
-
-    &__item {
-      flex-shrink: 0;
-      height: 40px;
-      width: 40px;
-      border-right: 1px solid #d4d4d4;
-      cursor: pointer;
-      transition: all 200ms;
-
-      &--active {
-        background-color: #fff;
-
-        .tabs__label {
-          background-color: var(--primary-color);
-          color: #fff;
-        }
-      }
-    }
-
-    &__label {
-      height: 24px;
-      width: 24px;
-      font-weight: 700;
-      font-size: 14px;
-      color: var(--primary-color);
-      border-radius: 100%;
-      border: 1px solid #b8cfe6;
-      background-color: #fff;
-      transition: all 200ms;
-    }
-  }
+export const StyledRichMenuTabs = styled.div `
+  display: flex;
+  align-items: center;
+  background: #f0f0f0;
+  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+  height: 40px;
+  width: ${({ width }) => width || 467}px;
+
+  .tabs {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+
+    &__item {
+      flex-shrink: 0;
+      height: 40px;
+      width: 40px;
+      border-right: 1px solid #d4d4d4;
+      cursor: pointer;
+      transition: all 200ms;
+
+      &--active {
+        background-color: #fff;
+
+        .tabs__label {
+          background-color: var(--primary-color);
+          color: #fff;
+        }
+      }
+    }
+
+    &__label {
+      height: 24px;
+      width: 24px;
+      font-weight: 700;
+      font-size: 14px;
+      color: var(--primary-color);
+      border-radius: 100%;
+      border: 1px solid #b8cfe6;
+      background-color: #fff;
+      transition: all 200ms;
+    }
+  }
 `;
-export const NavigationButton = styled(Flex) `
-  width: 40px;
-  height: 40px;
-  background-color: #fff;
-  cursor: pointer;
-
-  i {
-    font-size: 12px;
-    color: ${THEME?.token?.bw8};
-  }
-
-  &.navigation--previous {
-    border-right: 1px solid #d4d4d4;
-  }
-
-  &.navigation--next {
-    border-left: 1px solid #d4d4d4;
-  }
-
-  &.navigation--disabled {
-    cursor: not-allowed;
-
-    i {
-      color: #59595980;
-    }
-  }
+export const NavigationButton = styled(Flex) `
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  cursor: pointer;
+
+  i {
+    font-size: 12px;
+    color: ${THEME?.token?.bw8};
+  }
+
+  &.navigation--previous {
+    border-right: 1px solid #d4d4d4;
+  }
+
+  &.navigation--next {
+    border-left: 1px solid #d4d4d4;
+  }
+
+  &.navigation--disabled {
+    cursor: not-allowed;
+
+    i {
+      color: #59595980;
+    }
+  }
 `;
 NavigationButton.defaultProps = {
     align: 'center',

package/es/components/atoms/Radio/index.js

@@ -4,22 +4,22 @@ import styled from 'styled-components';
 import { Radio as AntdRadio } from 'antd';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const Radio = styled(AntdRadio) `
-  font-family: 'Roboto';
-  color: ${THEME.token?.colorTextBase};
-  font-size: ${THEME.token?.fontSize}px;
-
-  .antsomi-radio {
-    .antsomi-radio-inner {
-      border-width: 2px;
-      border-color: ${THEME.token?.colorPrimary};
-
-      &::after {
-        flex-shrink: 0;
-        background-color: ${THEME.token?.colorPrimary};
-      }
-    }
-  }
+export const Radio = styled(AntdRadio) `
+  font-family: 'Roboto';
+  color: ${THEME.token?.colorTextBase};
+  font-size: ${THEME.token?.fontSize}px;
+
+  .antsomi-radio {
+    .antsomi-radio-inner {
+      border-width: 2px;
+      border-color: ${THEME.token?.colorPrimary};
+
+      &::after {
+        flex-shrink: 0;
+        background-color: ${THEME.token?.colorPrimary};
+      }
+    }
+  }
 `;
 export const RadioButton = AntdRadio.Button;
 export const RadioGroupSub = AntdRadio.Group;

package/es/components/atoms/ReactIframe/ReactIframe.js

@@ -4,11 +4,11 @@ import { useEffect, useRef } from 'react';
 import Frame from 'react-frame-component';
 // Styled
 import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
-const bodyStyle = `
-  body {
-    padding: 0;
-    margin: 0;
-  }
+const bodyStyle = `
+  body {
+    padding: 0;
+    margin: 0;
+  }
 `;
 export const ReactIframe = props => {
     const { head, style, ...restOfProps } = props;

package/es/components/atoms/ReactIframe/styled.js

@@ -3,13 +3,13 @@ import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 /* Storybook */
-export const StyledIframeContent = styled.div `
-  width: 100%;
-  padding: 20px;
-  border: 1px solid ${THEME.token?.bw3};
-  box-sizing: border-box;
-
-  body {
-    padding: 0;
-  }
+export const StyledIframeContent = styled.div `
+  width: 100%;
+  padding: 20px;
+  border: 1px solid ${THEME.token?.bw3};
+  box-sizing: border-box;
+
+  body {
+    padding: 0;
+  }
 `;

package/es/components/atoms/RequiredLabel/styled.js

@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledRequired = styled.span `
-  color: ${THEME.token?.red6};
-  margin-right: 4px;
+export const StyledRequired = styled.span `
+  color: ${THEME.token?.red6};
+  margin-right: 4px;
 `;

package/es/components/atoms/ScrollBox/index.js

@@ -35,11 +35,11 @@ export const ScrollBox = props => {
             paddingRight: isScroll && isPadding ? 8 : 0,
         }, onScroll: handleScroll, children: children }));
 };
-const Wrapper = styled.div `
-  height: 100%;
-  width: 100%;
-  background-color: ${THEME.token?.bw0};
-  overflow: auto;
+const Wrapper = styled.div `
+  height: 100%;
+  width: 100%;
+  background-color: ${THEME.token?.bw0};
+  overflow: auto;
 `;
 ScrollBox.defaultProps = {
     isPadding: false,

package/es/components/atoms/Scrollbars/styled.js

@@ -3,27 +3,27 @@ import styled from 'styled-components';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ScrollbarsWrapper = styled.div ``;
-export const ThumbBar = styled.div `
-  background: ${globalToken?.gray5};
-  border-radius: 4px;
+export const ThumbBar = styled.div `
+  background: ${globalToken?.gray5};
+  border-radius: 4px;
 `;
-export const VerticalTrack = styled.div `
-  position: absolute;
-  width: 4px !important;
-  transition: opacity 200ms ease 0s;
-  opacity: 0;
-  right: 0px;
-  bottom: 2px;
-  top: 2px;
-  border-radius: 4px;
+export const VerticalTrack = styled.div `
+  position: absolute;
+  width: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 0px;
+  bottom: 2px;
+  top: 2px;
+  border-radius: 4px;
 `;
-export const HorizontalTrack = styled.div `
-  position: absolute;
-  height: 4px !important;
-  transition: opacity 200ms ease 0s;
-  opacity: 0;
-  right: 2px;
-  bottom: 0px;
-  left: 2px;
-  border-radius: 4px;
+export const HorizontalTrack = styled.div `
+  position: absolute;
+  height: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 0px;
+  left: 2px;
+  border-radius: 4px;
 `;