@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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, important = false) {
+    if (!isUnitlessNumber[key] && typeof value === 'number') {
+        value = `${value}px`;
+    }
+    else if (key === 'content' && !unquotedContentValueRegex.test(value)) {
+        value = `'${value.replace(/'/g, "\\'")}'`;
+    }
+    return `${hyphenateStyleName(key)}: ${value} ${important ? '!important' : ''};  `;
+}
+export function styleToCssString(rules, important = false) {
+    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], important);
+            }
+        }
+        else {
+            result += buildRule(styleKey, value, important);
+        }
+    }
+    return result;
+}
+export default styleToCssString;

package/es/utils/templateListing.d.ts

@@ -0,0 +1,3 @@
+import { ObjectTemplate, TObjectTemplate } from '../models/ObjectTemplate';
+export declare const getCategoriesFromObjectTemplate: (objectTemplate: ObjectTemplate | TObjectTemplate) => {};
+export declare const checkShowSkeletonBaseUrl: (url?: string) => boolean;

package/es/utils/templateListing.js

@@ -0,0 +1,32 @@
+// Constants
+import { TEMPLATE_CATEGORY_KEYS } from '../constants';
+export const getCategoriesFromObjectTemplate = (objectTemplate) => {
+    const categories = {};
+    const cloneObjectTemplate = (objectTemplate.model
+        ? objectTemplate.model
+        : objectTemplate) || {};
+    Object.values(TEMPLATE_CATEGORY_KEYS).forEach(key => {
+        var _a;
+        if (cloneObjectTemplate[key] && ((_a = cloneObjectTemplate[key]) === null || _a === void 0 ? void 0 : _a.length)) {
+            categories[key] = cloneObjectTemplate[key];
+        }
+    });
+    return categories;
+};
+export const checkShowSkeletonBaseUrl = (url = '') => {
+    if (url.includes('type')) {
+        switch (true) {
+            case url.includes('type=media'):
+                return true;
+            case url.includes('type=email'):
+                return false;
+            case url.includes('type=tactic'):
+            default:
+                return false;
+        }
+    }
+    else {
+        return (`${url || ''}`.includes('base64-img') &&
+            ['jn_thumb_', 'v_thumb_'].every(prefix => !`${url || ''}`.includes(prefix)));
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.31",
+  "version": "1.3.5-beta.310",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -28,8 +28,8 @@
     "eslint": "eslint --ext js,ts,tsx",
     "lint": "yarn run eslint src",
     "lint:fix": "yarn run eslint src --fix",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "serve-storybook": "serve storybook-static",
     "version": "auto-changelog -p && git add CHANGELOG.md",
     "test": "jest",
@@ -39,7 +39,8 @@
     "test:watch": "jest --watch",
     "test:coverage": "yarn test:clean && yarn jest --coverage",
     "ts-compile": "tsc -p tsconfig.esm.json",
-    "copy-files": "copyfiles -u 1 src/**/*.json src/**/*.svg src/**/*.scss src/**/*.png es"
+    "copy-files": "copyfiles -u 1 src/**/*.json src/**/*.svg src/**/*.scss src/**/*.png es",
+    "chromatic": "npx chromatic --project-token=chpt_23c659b2091917c"
   },
   "husky": {
     "hooks": {
@@ -59,27 +60,36 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.6",
+    "@antscorp/icons": "^0.27.24",
     "@antscorp/image-editor": "1.0.2",
+    "@antscorp/processing-notification": "^1.0.3",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.1.1",
     "@fortawesome/free-regular-svg-icons": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@storybook/test": "8.0.5",
     "@swiper/core": "^0.0.21",
     "@tanstack/react-query": "4.20.4",
     "@tanstack/react-query-devtools": "4.20.4",
     "@tinymce/tinymce-react": "^3.7.0",
     "@types/currency-formatter": "1.5.1",
+    "@types/react-custom-scrollbars": "^4.0.13",
+    "@types/react-frame-component": "^4.1.6",
+    "@types/react-router-dom": "^5.3.3",
     "ace-builds": "1.4.14",
     "animate.css": "^4.1.1",
     "antd": "5.12.6",
     "axios": "^1.4.0",
     "babel-plugin-file-loader": "^2.0.0",
     "currency-formatter": "1.5.9",
-    "dayjs": "^1.11.10",
     "d3-interpolate": "^3.0.1",
+    "dayjs": "^1.11.10",
+    "fabric": "^5.3.0",
     "font-awesome": "4.7.0",
     "highlight.js": "^11.8.0",
     "html-entities": "^2.0.2",
@@ -88,6 +98,7 @@
     "i18next": "21.6.16",
     "i18next-browser-languagedetector": "6.1.2",
     "immer": "3.0.0",
+    "konva": "^9.3.6",
     "lodash": "^4.17.21",
     "moment": "2.29.2",
     "pako": "2.0.4",
@@ -95,19 +106,29 @@
     "react-ace": "9.5.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "2.19.3",
+    "react-cookie": "^7.1.4",
+    "react-custom-scrollbars": "^4.2.1",
     "react-draggable": "^4.4.5",
+    "react-frame-component": "^5.2.6",
+    "react-konva": "^18.2.10",
     "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",
+    "socket.io-client": "^4.7.5",
     "swiper": "^11.0.7",
     "ts-dedent": "^2.2.0",
-    "tui-image-editor": "^3.15.3"
+    "tui-image-editor": "^3.15.3",
+    "uniqid": "^5.4.0",
+    "use-context-selector": "^1.4.4",
+    "use-immer": "^0.9.0",
+    "zustand": "^4.5.2",
+    "use-image": "^1.1.1"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/eslint-config-antsomi": "1.0.4",
-    "@antscorp/icons": "0.27.4",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -122,17 +143,20 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "1.3.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/blocks": "8.0.5",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "8.0.5",
+    "@storybook/theming": "^8.0.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
@@ -141,6 +165,8 @@
     "@types/react": "^18.0.33",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.0.11",
+    "@types/react-resizable": "^3.0.7",
+    "@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",
@@ -152,6 +178,7 @@
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-styled-components": "^2.1.4",
+    "chromatic": "^11.3.0",
     "clsx": "^1.2.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
@@ -167,7 +194,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.8.0",
     "file-loader": "^6.2.0",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
@@ -181,8 +208,10 @@
     "react-dom": "18.2.0",
     "react-fast-compare": "^3.2.1",
     "react-i18next": "11.16.7",
+    "react-router-dom": "5.1.0",
     "sass": "^1.60.0",
     "sass-loader": "^13.2.2",
+    "storybook": "8.0.5",
     "style-loader": "^3.3.2",
     "styled-components": "^5.3.9",
     "terser-webpack-plugin": "^5.3.7",
@@ -191,7 +220,7 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "type-fest": "^4.10.2",
-    "typescript": "^4.9.4",
+    "typescript": "^5.4.3",
     "vite": "^4.2.1",
     "vite-plugin-mkcert": "^1.15.0",
     "webpack": "^5.78.0",
@@ -199,8 +228,8 @@
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "@antscorp/icons": ">=0.27.5",
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "react-router-dom": ">= 5.1.0"
   }
 }

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

@@ -1 +0,0 @@
-export { ConfigProvider } from './ConfigProvider';

package/es/components/common/index.js

@@ -1 +0,0 @@
-export { ConfigProvider } from './ConfigProvider';