@cube-dev/ui-kit 0.9.4 → 0.9.7

package/es/utils/transitions.js

@@ -0,0 +1,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+const DIRECTION_MAP = {
+    initial: 'top center',
+    top: 'bottom center',
+    right: 'center left',
+    left: 'center right',
+    bottom: 'top center',
+};
+const TRANSLATE_MAP = {
+    initial: 'translate(0px, calc(-1 * var(--overlay-offset)))',
+    top: 'translate(0px, calc(1 * var(--overlay-offset)))',
+    right: 'translate(calc(-1 * var(--overlay-offset)), 0px)',
+    left: 'translate(calc(1 * var(--overlay-offset)), 0px)',
+    bottom: 'translate(0px, calc(-1 * var(--overlay-offset)))',
+};
+export const getOverlayTransitionCSS = ({ suffix = '', placement = 'initial', minScale = 0.8, minOffset = '8px', } = {}) => `
+  &${suffix} {
+    transform: var(--overlay-position);
+    transform-origin: ${DIRECTION_MAP[placement]};
+    --overlay-offset: ${minOffset};
+    --overlay-hidden-x-scale: ${placement === 'top' || placement === 'bottom' || placement === 'initial'
+    ? '1'
+    : minScale};
+    --overlay-hidden-y-scale: ${placement === 'left' || placement === 'right' ? '1' : minScale};
+    --overlay-translate-visible: translate(0px, 0px);
+    --overlay-translate-hidden: ${TRANSLATE_MAP[placement]};
+    --overlay-transition: 180ms;
+    --overlay-hidden-scale: scale(var(--overlay-hidden-x-scale), var(--overlay-hidden-y-scale));
+    --overlay-normal-scale: scale(1, 1);
+  }
+
+  &.cube-overlay-transition-enter${suffix} {
+    opacity: 0;
+    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
+  }
+
+  &.cube-overlay-transition-enter-active${suffix} {
+    opacity: 1;
+    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
+    transition: transform var(--overlay-transition) cubic-bezier(0, .66, 0, .66), opacity var(--overlay-transition) cubic-bezier(0, .66, 0, .66);
+    pointer-events: none;
+  }
+
+  &.cube-overlay-transition-exit${suffix} {
+    opacity: 1;
+    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
+  }
+
+  &.cube-overlay-transition-exit-active${suffix} {
+    opacity: 0;
+    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
+    pointer-events: none;
+    transition: transform var(--overlay-transition) cubic-bezier(.66, 0, .66, 0), opacity var(--overlay-transition) cubic-bezier(.66, 0, .66, 0);
+  }
+`;
+
+        

package/es/utils/tree.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export function toFlatTree(tree, includingFolders) {
+    return tree.reduce((result, node) => {
+        if (!node.isLeaf) {
+            result = [
+                ...result,
+                ...(includingFolders ? [node] : []),
+                ...toFlatTree(node.children || [], includingFolders),
+            ];
+        }
+        else {
+            result.push(node);
+        }
+        return result;
+    }, []);
+}
+
+        

package/es/utils/warnings.js

@@ -0,0 +1,48 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+const SUGGESTED_PROP_MAP = {
+    disabled: 'isDisabled',
+    loading: 'isLoading',
+    selected: 'isSelected',
+};
+const PREFIX = 'CubeUIKit';
+export function propDeprecationWarning(name, props, propList) {
+    propList.forEach((prop) => {
+        if (prop in props) {
+            const suggestion = SUGGESTED_PROP_MAP[prop];
+            warn(`"${prop}" property of "${name}" component is deprecated.${suggestion ? ` Use "${suggestion}" property instead.` : ''}`);
+        }
+    });
+}
+export function accessibilityWarning(...args) {
+    console.warn(`${PREFIX} accessibility issue:`, ...args);
+}
+export function warn(...args) {
+    console.warn(`${PREFIX}:`, ...args);
+}
+export function deprecationWarning(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+condition, { property, name, betterAlternative, reason, }) {
+    if (condition)
+        return;
+    if (process.env.NODE_ENV === 'production') {
+        return warn(`DEPRECATION ${name} "${property}" -> ${typeof betterAlternative === 'function'
+            ? betterAlternative()
+            : betterAlternative}`);
+    }
+    // we can make deprecations even better if we add the md syntax in the console.
+    // anyway, everything down below will be stripped in the production build
+    console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);
+    warn(`"${property}" is deprecated, consider better alternative: ${typeof betterAlternative === 'function'
+        ? betterAlternative()
+        : betterAlternative}`);
+    reason && warn(`Reason: ${typeof reason === 'function' ? reason() : reason}`);
+    console.groupEnd();
+}
+
+        

package/package.json

@@ -1,53 +1,12 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.9.4",
+  "version": "0.9.7",
   "description": "UIKit for Cube Projects",
-  "module": "dist/es/index.js",
-  "main": "dist/cjs/index.js",
-  "types": "dist/types/index.d.ts",
-  "sideEffects": [
-    "./**/styles/predefined.{js,ts}"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/es/index.js",
-      "require": "./dist/cjs/index.js"
-    }
-  },
-  "files": [
-    "dist/**/*.js",
-    "dist/**/*.map",
-    "dist/**/*.d.ts"
-  ],
-  "scripts": {
-    "start": "yarn storybook",
-    "build": "npm-run-all clear -p build:* && node ./scripts/copy-files.js && node scripts/add-banner.js",
-    "build:esm": "tsc -p tsconfig.es.json",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "watch": "yarn build:esm --watch",
-    "test": "jest",
-    "test-cover": "jest --coverage",
-    "test-watch": "jest --watch",
-    "format": "prettier --write \"src/**/*.{js,jsx}\"",
-    "lint": "eslint --cache src && prettier --check \"src/**/*.{js,jsx}\"",
-    "fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" && eslint --fix --cache src --ext .js,.ts,.jsx,.tsx",
-    "compile": "babel src -d dist --copy-files",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "chromatic": "npx chromatic",
-    "presize": "node -e 'require(\"./scripts/size-limit\").createMeasurer()'",
-    "size": "size-limit",
-    "postsize": "node -e 'require(\"./scripts/size-limit\").deleteMeasurer()'",
-    "prepare": "husky install",
-    "clear": "rimraf ./dist"
-  },
-  "publishConfig": {
-    "directory": "dist"
-  },
   "keywords": [
     "uikit"
   ],
   "author": "Cube Dev Team",
+  "sideEffects": false,
   "peerDependencies": {
     "react": ">= 17.0.0",
     "react-dom": ">= 17.0.0",
@@ -106,90 +65,14 @@
     "valid-url": "^1.0.9",
     "clipboard-copy": "^4.0.1"
   },
-  "devDependencies": {
-    "@actions/core": "^1.2.6",
-    "@actions/exec": "^1.0.3",
-    "@actions/github": "^2.1.1",
-    "@commitlint/cli": "16.1.0",
-    "@commitlint/config-conventional": "16.0.0",
-    "@happy-dom/jest-environment": "^2.50.0",
-    "@size-limit/esbuild": "^7.0.8",
-    "@size-limit/preset-big-lib": "^7.0.5",
-    "@size-limit/webpack-why": "^7.0.5",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/react": "^6.4.9",
-    "@swc/core": "1.2.148",
-    "@swc/jest": "0.2.20",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-test-renderer": "17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.8.1",
-    "@typescript-eslint/parser": "^5.8.1",
-    "@web/test-runner": "^0.13.23",
-    "babel-eslint": "^10.1.0",
-    "bytes": "^3.1.0",
-    "chromatic": "^6.3.3",
-    "cross-env": "^7.0.3",
-    "dedent": "^0.7.0",
-    "eslint": "^8.5.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.5",
-    "happy-dom": "^2.50.0",
-    "husky": ">=6",
-    "jest": "27.5.0",
-    "jest-styled-components": "^7.0.8",
-    "jsdom": "19.0.0",
-    "lint-staged": ">=10",
-    "markdown-table": "^2.0.0",
-    "netlify-cli": "^8.6.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "prettier-eslint": "^13.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-router": "^6.2.1",
-    "react-test-renderer": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "size-limit": "^7.0.5",
-    "storybook-addon-styled-component-theme": "^2.0.0",
-    "styled-components": "5.3.0",
-    "typescript": "^4.5.4"
-  },
-  "resolutions": {
-    "es5-ext": "0.10.53"
-  },
-  "size-limit": [
-    {
-      "name": "All",
-      "path": "./dist/__measure.js",
-      "running": false,
-      "webpack": false,
-      "limit": "160 kB"
-    },
-    {
-      "name": "Tree shaking (just a Button)",
-      "path": "./dist/es/index.js",
-      "import": "{ Button }",
-      "running": false,
-      "webpack": false,
-      "limit": "40 kB"
+  "module": "./es/index.js",
+  "types": "./types/index.d.ts",
+  "main": "./cjs/index.js",
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./cjs/index.js"
     }
-  ],
-  "browserslist": [
-    "iOS 10",
-    "last 10 Chrome versions",
-    "last 5 Firefox versions",
-    "last 3 Safari versions"
-  ],
-  "license": "MIT"
-}
+  },
+  "private": false
+}

package/types/components/actions/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ButtonGroup } from './ButtonGroup/ButtonGroup';
+declare const Button: import("react").ForwardRefExoticComponent<import("./Button").CubeButtonProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>> & {
+    Group: typeof ButtonGroup;
+} & {
+    Group: import("react").ForwardRefExoticComponent<import("../..").CubeSpaceProps & import("react").RefAttributes<unknown>>;
+};
+export * from './Button';
+export * from './Action';
+export { Button, ButtonGroup };