@antscorp/antsomi-ui 1.3.5-beta.124 → 1.3.5-beta.126

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ReactIframeProps } from './types';
+export declare const ReactIframe: React.FC<ReactIframeProps>;

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

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Styled
+import React, { 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;
+  }
+`;
+export const ReactIframe = props => {
+    const { head, style } = props, restOfProps = __rest(props, ["head", "style"]);
+    const forceUpdate = useForceUpdate();
+    // Refs
+    const frameRef = useRef();
+    // Clone stylesheets from parent html to iframe for content of iframe to be styled correctly
+    const documentHead = document.querySelector('head');
+    // Force update for fix bug can't get style in first render
+    useEffect(() => {
+        setTimeout(() => {
+            forceUpdate();
+        }, 500);
+    }, [forceUpdate]);
+    return (React.createElement(Frame, Object.assign({}, restOfProps, { style: Object.assign({ border: 'none', width: '100%', height: '100%' }, style), ref: ref => {
+            frameRef.current = ref;
+        }, head: React.createElement(React.Fragment, null,
+            React.createElement("style", null, documentHead === null || documentHead === void 0 ? void 0 : documentHead.innerHTML),
+            React.createElement("style", null, bodyStyle),
+            head) })));
+};

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

@@ -0,0 +1,2 @@
+export * from './ReactIframe';
+export type { ReactIframeProps } from './types';

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

@@ -0,0 +1 @@
+export * from './ReactIframe';

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

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

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

@@ -0,0 +1,16 @@
+var _a;
+// Libraries
+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 ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3};
+  box-sizing: border-box;
+
+  body {
+    padding: 0;
+  }
+`;

package/es/components/atoms/ReactIframe/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { FrameComponentProps } from 'react-frame-component';
+export interface ReactIframeProps extends FrameComponentProps {
+    head?: React.ReactNode | undefined;
+    mountTarget?: string | undefined;
+    initialContent?: string | undefined;
+    contentDidMount?: (() => void) | undefined;
+    contentDidUpdate?: (() => void) | undefined;
+    children: React.ReactNode;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -38,6 +38,7 @@ export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
+export * from './ReactIframe';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -38,3 +38,4 @@ export * from './PreviewTabs';
 export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
+export * from './ReactIframe';

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.js

@@ -23,6 +23,7 @@ import { Button, Flex } from '../../../../atoms';
 import { ThumbnailCard } from '../../../../molecules';
 // Constants
 import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+import classNames from 'classnames';
 /** Max width of list thumbnail's wrapper, it is used to show swiper if the width is greater than 990 */
 const WRAPPER_WIDTH = 990;
 const GAP_X = 10;
@@ -30,7 +31,7 @@ const ICON_SIZE = 24;
 export const ThumbnailSlider = memo(props => {
     const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
     //  States
-    const [isSlideBeginning, setSlideBeginning] = useState(false);
+    const [isSlideBeginning, setSlideBeginning] = useState(true);
     const [isSlideEnd, setSlideEnd] = useState(false);
     // Refs
     const navigationPrevRef = useRef(null);
@@ -72,8 +73,8 @@ export const ThumbnailSlider = memo(props => {
                 setSlideBeginning(isBeginning);
                 setSlideEnd(isEnd);
             } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
-        React.createElement(Button, { ref: navigationPrevRef, className: "custom-button-prev", disabled: isSlideBeginning },
+        React.createElement(Button, { ref: navigationPrevRef, className: classNames({ 'custom-button-prev': true, hidden: isSlideBeginning }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })),
-        React.createElement(Button, { ref: navigationNextRef, className: "custom-button-next", disabled: isSlideEnd },
+        React.createElement(Button, { ref: navigationNextRef, className: classNames({ 'custom-button-next': true, hidden: isSlideEnd }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -58,6 +58,10 @@ export const ThumbnailSliderWrapper = styled.div `
     transform: rotate(-90deg);
   }
 
+  .hidden {
+    display: none !important;
+  }
+
   i {
     font-size: 20px;
     color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};

package/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -79,9 +79,8 @@ export const CustomLabelStyled = styled.div `
     height: fit-content;
   }
 `;
-// TODO: tách class dùng chung
 export const CustomRootLabel = styled.div `
-  font-size: 11px;
+  font-size: 11px !important;
   font-weight: 400;
   color: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
   height: 100%;
@@ -91,7 +90,7 @@ export const CustomRootLabel = styled.div `
 `;
 export const TextWrapper = styled(Text) `
   max-width: 100%;
-  color: inherit;
+  color: inherit !important;
   height: fit-content;
-  font-size: inherit;
+  font-size: inherit !important;
 `;

package/es/utils/index.d.ts

@@ -2,3 +2,4 @@ export * from './color';
 export * from './common';
 export * from './handleError';
 export * from './templateListing';
+export * from './styles';

package/es/utils/index.js

@@ -2,3 +2,4 @@ export * from './color';
 export * from './common';
 export * from './handleError';
 export * from './templateListing';
+export * from './styles';

package/es/utils/styles.d.ts

@@ -0,0 +1,2 @@
+export declare function styleToCssString(rules: any): string;
+export default styleToCssString;

package/es/utils/styles.js

@@ -0,0 +1,175 @@
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+const isUnitlessNumber = {
+    boxFlex: true,
+    boxFlexGroup: true,
+    columnCount: true,
+    flex: true,
+    flexGrow: true,
+    flexPositive: true,
+    flexShrink: true,
+    flexNegative: true,
+    fontWeight: true,
+    lineClamp: true,
+    lineHeight: true,
+    opacity: true,
+    order: true,
+    orphans: true,
+    widows: true,
+    zIndex: true,
+    zoom: true,
+    // SVG-related properties
+    fillOpacity: true,
+    strokeDashoffset: true,
+    strokeOpacity: true,
+    strokeWidth: true,
+};
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+function prefixKey(prefix, key) {
+    return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+const prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+Object.keys(isUnitlessNumber).forEach(prop => {
+    prefixes.forEach(prefix => {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+    });
+});
+/**
+ * Most style properties can be unset by doing .style[prop] = '' but IE8
+ * doesn't like doing that with shorthand properties so for the properties that
+ * IE8 breaks on, which are listed here, we instead unset each of the
+ * individual properties. See http://bugs.jquery.com/ticket/12385.
+ * The 4-value 'clock' properties like margin, padding, border-width seem to
+ * behave without any problems. Curiously, list-style works too without any
+ * special prodding.
+ */
+const shorthandPropertyExpansions = {
+    background: {
+        backgroundImage: true,
+        backgroundPosition: true,
+        backgroundRepeat: true,
+        backgroundColor: true,
+    },
+    border: {
+        borderWidth: true,
+        borderStyle: true,
+        borderColor: true,
+    },
+    borderBottom: {
+        borderBottomWidth: true,
+        borderBottomStyle: true,
+        borderBottomColor: true,
+    },
+    borderLeft: {
+        borderLeftWidth: true,
+        borderLeftStyle: true,
+        borderLeftColor: true,
+    },
+    borderRight: {
+        borderRightWidth: true,
+        borderRightStyle: true,
+        borderRightColor: true,
+    },
+    borderTop: {
+        borderTopWidth: true,
+        borderTopStyle: true,
+        borderTopColor: true,
+    },
+    font: {
+        fontStyle: true,
+        fontconstiant: true,
+        fontWeight: true,
+        fontSize: true,
+        lineHeight: true,
+        fontFamily: true,
+    },
+};
+const CSSProperty = {
+    isUnitlessNumber,
+    shorthandPropertyExpansions,
+};
+/* eslint-disable no-underscore-dangle */
+const msPattern = /^ms-/;
+const _uppercasePattern = /([A-Z])/g;
+/**
+ * Hyphenates a camelcased string, for example:
+ *
+ *   > hyphenate('backgroundColor')
+ *   < "background-color"
+ *
+ * For CSS style names, use `hyphenateStyleName` instead which works properly
+ * with all vendor prefixes, including `ms`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenate(string) {
+    return string.replace(_uppercasePattern, '-$1').toLowerCase();
+}
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenateStyleName(string) {
+    return hyphenate(string).replace(msPattern, '-ms-');
+}
+const { isArray } = Array;
+const { keys } = Object;
+const counter = 1;
+// Follows syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/content,
+// including multiple space separated values.
+const unquotedContentValueRegex = /^(normal|none|(\b(url\([^)]*\)|chapter_counter|attr\([^)]*\)|(no-)?(open|close)-quote|inherit)((\b\s*)|$|\s+))+)$/;
+function buildRule(key, value) {
+    if (!isUnitlessNumber[key] && typeof value === 'number') {
+        value = `${value}px`;
+    }
+    else if (key === 'content' && !unquotedContentValueRegex.test(value)) {
+        value = `'${value.replace(/'/g, "\\'")}'`;
+    }
+    return `${hyphenateStyleName(key)}: ${value};  `;
+}
+export function styleToCssString(rules) {
+    let result = '';
+    if (!rules || keys(rules).length === 0) {
+        return result;
+    }
+    const styleKeys = keys(rules);
+    for (let j = 0, l = styleKeys.length; j < l; j++) {
+        const styleKey = styleKeys[j];
+        const value = rules[styleKey];
+        if (isArray(value)) {
+            for (let i = 0, len = value.length; i < len; i++) {
+                result += buildRule(styleKey, value[i]);
+            }
+        }
+        else {
+            result += buildRule(styleKey, value);
+        }
+    }
+    return result;
+}
+export default styleToCssString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.124",
+  "version": "1.3.5-beta.126",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -97,8 +97,10 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "2.19.3",
     "react-draggable": "^4.4.5",
+    "react-frame-component": "^5.2.6",
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
+    "react-syntax-highlighter": "^15.5.0",
     "rehype-highlight": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "swiper": "^11.0.7",
@@ -143,6 +145,7 @@
     "@types/react": "^18.0.33",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.0.11",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "@types/react-test-renderer": "^18.0.0",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.55.0",