@antscorp/antsomi-ui 1.5.6 → 1.5.8

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

@@ -37,6 +37,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

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

package/es/components/organism/Help/Help.js

@@ -991,11 +991,12 @@ const Help = props => {
                 width: 36,
                 height: 36,
                 borderRadius: '5px',
-            }, icon: React.createElement(QuestionCircleOutlined, { style: {
+            }, className: `${isOpenDropdown ? 'antsomi-btn-default-active' : ''}`, onClick: e => e.preventDefault() },
+            React.createElement(QuestionCircleOutlined, { style: {
                     color: '#666666',
                     fontSize: '24px',
                     transform: 'unset',
-                } }), className: `${isOpenDropdown ? 'antsomi-btn-default-active' : ''}`, onClick: e => e.preventDefault() }))),
+                } })))),
         isShowPopup &&
             createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                     display: 'flex',

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.5.6",
+  "version": "1.5.8",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -19,7 +19,6 @@
   "unpkg": "dist/index.js",
   "types": "es/index.d.ts",
   "scripts": {
-    "publish": "npm run clean && npm run build:es",
     "build:es": "npm run copy-files && npm run ts-compile",
     "clean": "rimraf dist lib es",
     "dev": "vite",
@@ -98,8 +97,10 @@
     "react-color": "2.19.3",
     "react-draggable": "^4.4.5",
     "react-konva": "^18.2.10",
+    "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",
@@ -144,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",