@eccenca/gui-elements 6.1.0 → 22.0.0-rc.6

package/dist/legacy-replacements/Button/AffirmativeButton.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AffirmativeButtonReplacement = AffirmativeButtonReplacement;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("./Button");
+
+function AffirmativeButtonReplacement({
+  children,
+  ...otherProps
+}) {
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonReplacement, (0, _extends2.default)({}, otherProps, {
+    affirmative: true
+  }), children);
+}

package/dist/legacy-replacements/Button/Button.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonReplacement = ButtonReplacement;
+exports.iconMappings = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../../components/Button/Button"));
+
+const iconMappings = {
+  "edit": "item-edit",
+  "delete": "item-remove",
+  "expand_more": "toggler-showmore",
+  "expand_less": "toggler-showless",
+  "arrow_nextpage": "navigation-forth",
+  "arrow_back": "navigation-back"
+};
+exports.iconMappings = iconMappings;
+
+function ButtonReplacement({
+  children,
+  className,
+  fabSize,
+  iconName,
+  tooltip,
+  progress,
+  disabled = false,
+  affirmative = false,
+  dismissive = true,
+  disruptive = false,
+  raised = false,
+  colored = false,
+  ...otherProps
+}) {
+  if (process.env.NODE_ENV === 'development') {
+    const debugMsg = ["This button element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Button)."];
+
+    if (typeof otherProps.accent !== "undefined") {
+      debugMsg.push("Button 'accent' property is not supported on legacy replacement element.");
+      delete otherProps.accent;
+    }
+
+    if (typeof otherProps.badge !== "undefined") {
+      debugMsg.push("Button 'badge' property is not supported on legacy replacement element.");
+      delete otherProps.badge;
+    }
+
+    if (typeof otherProps.ripple !== "undefined") {
+      debugMsg.push("Button 'ripple' property is not supported on legacy replacement element.");
+      delete otherProps.ripple;
+    }
+
+    if (typeof progress !== "undefined") {
+      debugMsg.push("Button 'progress' property is not fully supported on legacy replacement element, it only shows a loading spinner in the button.");
+    }
+
+    debugMsg.forEach(element => console.debug(element));
+  }
+
+  if (typeof otherProps.accent !== "undefined") {
+    delete otherProps.accent;
+  }
+
+  if (typeof otherProps.badge !== "undefined") {
+    delete otherProps.badge;
+  }
+
+  if (typeof otherProps.ripple !== "undefined") {
+    delete otherProps.ripple;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, otherProps, {
+    className: className,
+    minimal: !!iconName && raised === false ? true : false,
+    icon: iconName ? iconName && iconMappings[iconName] ? iconMappings[iconName] : iconName : undefined,
+    tooltip: !!tooltip ? tooltip : false,
+    disabled: disabled,
+    affirmative: affirmative,
+    disruptive: disruptive,
+    hasStatePrimary: !!fabSize || colored || !dismissive,
+    large: !!fabSize && fabSize !== "mini",
+    loading: !!progress ? true : false
+  }), children);
+}

package/dist/legacy-replacements/Button/DismissiveButton.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DismissiveButtonReplacement = DismissiveButtonReplacement;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("./Button");
+
+function DismissiveButtonReplacement({
+  children,
+  ...otherProps
+}) {
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonReplacement, (0, _extends2.default)({}, otherProps, {
+    dismissive: true
+  }), children);
+}

package/dist/legacy-replacements/Button/DisruptiveButton.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisruptiveButtonReplacement = DisruptiveButtonReplacement;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("./Button");
+
+function DisruptiveButtonReplacement({
+  children,
+  ...otherProps
+}) {
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonReplacement, (0, _extends2.default)({}, otherProps, {
+    disruptive: true
+  }), children);
+}

package/dist/legacy-replacements/Checkbox/Checkbox.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxReplacement = CheckboxReplacement;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = _interopRequireDefault(require("../../components/Checkbox/Checkbox"));
+
+const extendedOnChangeBoolean = (onChangeFn, event) => {
+  if (typeof onChangeFn === "function") {
+    onChangeFn({
+      event,
+      name: event.target.name,
+      value: event.target.checked,
+      rawValue: event.target.value
+    });
+  }
+};
+
+function CheckboxReplacement({
+  children = null,
+  checked = false,
+  className = null,
+  disabled = false,
+  label = null,
+  onChange,
+  ...otherProps
+}) {
+  if (process.env.NODE_ENV === 'development') {
+    const debugMsg = ["This checkbox element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Checkbox)."];
+
+    if (typeof otherProps.ripple !== "undefined") {
+      debugMsg.push("Checkbox 'ripple' property is not supported on legacy replacement element.");
+      delete otherProps.ripple;
+    }
+
+    if (typeof otherProps.hideLabel !== "undefined") {
+      debugMsg.push("Checkbox 'hideLabel' property is not supported on legacy replacement element.");
+      delete otherProps.hideLabel;
+    }
+
+    debugMsg.forEach(element => console.debug(element));
+  }
+
+  if (typeof otherProps.ripple !== "undefined") {
+    delete otherProps.ripple;
+  }
+
+  if (typeof otherProps.hideLabel !== "undefined") {
+    delete otherProps.hideLabel;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Checkbox.default, (0, _extends2.default)({}, otherProps, {
+    className: className,
+    disabled: disabled,
+    checked: checked,
+    onChange: extendedOnChangeBoolean.bind(null, onChange)
+  }), label, children);
+}

package/dist/legacy-replacements/Radio/RadioButton.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioButtonReplacement = RadioButtonReplacement;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RadioButton = _interopRequireDefault(require("../../components/RadioButton/RadioButton"));
+
+function RadioButtonReplacement({
+  children,
+  label,
+  ...otherProps
+}) {
+  if (process.env.NODE_ENV === 'development') {
+    const debugMsg = ["This radio element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (RadioButton)."];
+
+    if (typeof otherProps.ripple !== "undefined") {
+      debugMsg.push("Radio 'ripple' property is not supported on legacy replacement element.");
+      delete otherProps.ripple;
+    }
+
+    if (typeof otherProps.hideLabel !== "undefined") {
+      debugMsg.push("Radio 'hideLabel' property is not supported on legacy replacement element.");
+      delete otherProps.hideLabel;
+    }
+
+    if (typeof label !== "undefined") {
+      debugMsg.push("Radio 'label' property is not supported exactly like at the legacy element.");
+    }
+
+    debugMsg.forEach(element => console.debug(element));
+  }
+
+  if (typeof otherProps.ripple !== "undefined") {
+    delete otherProps.ripple;
+  }
+
+  if (typeof otherProps.hideLabel !== "undefined") {
+    delete otherProps.hideLabel;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_RadioButton.default, otherProps, label, children);
+}

package/dist/legacy-replacements/TextField/TextField.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextFieldReplacement = TextFieldReplacement;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FieldItem = _interopRequireDefault(require("../../components/Form/FieldItem"));
+
+var _TextField = _interopRequireDefault(require("../../components/TextField/TextField"));
+
+var _TextArea = _interopRequireDefault(require("../../components/TextField/TextArea"));
+
+var _IconButton = _interopRequireDefault(require("../../components/Icon/IconButton"));
+
+const extendedOnChange = (onChangeFn, event) => {
+  if (typeof onChangeFn === "function") {
+    onChangeFn({
+      event,
+      name: event.target.name,
+      value: event.target.value,
+      rawValue: event.target.value
+    });
+  }
+};
+
+function TextFieldReplacement({
+  className,
+  disabled = false,
+  error,
+  inputClassName,
+  label,
+  multiline = false,
+  onChange,
+  onClearValue,
+  // reducedSize = false,
+  required = false,
+  stretch = true,
+  value,
+  ...otherProps
+}) {
+  if (process.env.NODE_ENV === 'development') {
+    const debugMsg = ["This textfield element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard elements (FieldItem, TextField, TextArea)."];
+
+    if (typeof otherProps.reducedSize !== "undefined") {
+      debugMsg.push("TextField 'reducedSize' property is currently not supported on legacy replacement element.");
+      delete otherProps.reducedSize;
+    }
+
+    debugMsg.forEach(element => console.debug(element));
+  }
+
+  if (typeof otherProps.reducedSize !== "undefined") {
+    delete otherProps.reducedSize;
+  }
+
+  const InputElement = !!multiline ? _TextArea.default : _TextField.default;
+  const fieldProperties = {
+    className: className,
+    messageText: error,
+    labelAttributes: !!label ? {
+      text: label
+    } : {}
+  };
+  const inputProperties = {
+    className: inputClassName,
+    fullWidth: stretch,
+    value: value,
+    required: required,
+    onChange: extendedOnChange.bind(null, onChange)
+  };
+
+  if (!!multiline) {
+    delete inputProperties.fullWidth;
+  }
+
+  if (multiline === false && !!onClearValue && !!value) {
+    inputProperties['rightElement'] = /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      "data-test-id": otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`,
+      name: "operation-clear",
+      onClick: onClearValue
+    });
+  }
+
+  const sharedProperties = {
+    hasStateDanger: !!error ? true : false,
+    disabled: disabled
+  };
+  return !!error || !!label ? /*#__PURE__*/_react.default.createElement(_FieldItem.default, (0, _extends2.default)({}, sharedProperties, fieldProperties), /*#__PURE__*/_react.default.createElement(InputElement, (0, _extends2.default)({}, otherProps, sharedProperties, inputProperties))) : /*#__PURE__*/_react.default.createElement(InputElement, (0, _extends2.default)({}, otherProps, inputProperties));
+}

package/package.json

@@ -1,81 +1,161 @@
 {
   "name": "@eccenca/gui-elements",
-  "version": "6.1.0",
-  "description": "Collection of low-level GUI elements like Buttons, Icons or Alerts. Also includes core styles for those elements.",
-  "main": "es5/component.js",
-  "es5": "es5/component.js",
-  "es6": "index.js",
-  "scripts": {
-    "test": "export TEST_REPORT_PATH='./test/reports/' && jest --no-cache --detectOpenHandles",
-    "lint": "eslint --ignore-path .gitignore '**/*.{js,jsx}' --fix",
-    "cover": "gulp cover",
-    "start": "gulp",
-    "build": "gulp full-build",
-    "init": "ecc-link-dotfiles",
-    "prepare": "ecc-link-dotfiles && gulp full-build",
-    "docs": "gulp docs",
-    "precommit": "lint-staged && npm run docs"
+  "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
+  "version": "22.0.0-rc.6",
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/eccenca/gui-elements",
+  "keywords": [
+    "GUI",
+    "React",
+    "Blueprint JS",
+    "Carbon Components",
+    "Typescript"
+  ],
+  "maintainers": [
+    {
+      "name": " eccenca GmbH",
+      "email": "info@eccenca.com",
+      "web": "https://eccence.com/"
+    }
+  ],
+  "repositories": [
+    {
+      "type": "git",
+      "url": "git://github.com/eccenca/gui-elements.git"
+    }
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   },
-  "bugs": {
-    "url": "https://github.com/eccenca/ecc-gui-elements/issues"
+  "main": "./src/index.ts",
+  "style": "./src/index.scss",
+  "module": "./dist/index.js",
+  "files": [
+    "blueprint",
+    "dist",
+    "src",
+    "index.scss",
+    "index.ts"
+  ],
+  "scripts": {
+    "compile": "tsc --build tsconfig.json",
+    "build": "tsc --build tsbuild.json && NODE_ENV=production babel ./src --out-dir ./dist --extensions '.ts,.tsx' --ignore '**/*.test.ts,**/*.test.tsx,**/*.stories.ts,**/*.stories.tsx'",
+    "compile-scss": "node-sass src/index.scss --importer=node_modules/node-sass-tilde-importer",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "test": "jest",
+    "test:ci": "jest --ci --reporters='default'",
+    "test:coverage": "jest --collectCoverage",
+    "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
   },
-  "author": "eccenca GmbH <opensource@eccenca.com> (http://eccenca.com)",
-  "license": "MIT",
   "dependencies": {
-    "@eccenca/material-design-lite": "^2.0.0",
-    "classnames": "^2.2.5",
-    "lodash": "^4.16.4",
-    "moment": "^2.20.1",
-    "prop-types": "^15.7.2",
-    "react-datetime": "^2.11.0",
-    "react-highlight-words": "^0.10.0",
-    "react-mdl": "^2.1.0",
-    "react-select": "1.0.1",
-    "sassyjson": "^1.1.8",
-    "scroll-into-view": "^1.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/eccenca/ecc-gui-elements.git"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "@blueprintjs/core": "3.49.1",
+    "@blueprintjs/select": "^3.18.1",
+    "@carbon/icons": "10.44.0",
+    "@carbon/icons-react": "10.44.0",
+    "@mavrin/remark-typograf": "^2.2.0",
+    "carbon-components": "10.44.0",
+    "carbon-components-react": "7.44.1",
+    "carbon-icons": "^7.0.7",
+    "codemirror": "^5.52.2",
+    "color": "3.2.1",
+    "micromark": "^3.0.10",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-flow-renderer": "^9.6.1",
+    "react-markdown": "^7.0.1",
+    "rehype-raw": "^6.1.0",
+    "remark-definition-list": "^1.1.0",
+    "remark-gfm": "^3.0.0",
+    "remark-parse": "^10.0.0",
+    "reset-css": "^5.0.1",
+    "unified": "^10.1.1"
   },
   "devDependencies": {
-    "@eccenca/dotfiles": "^2.6.3",
-    "@eccenca/gulp-tasks": "^3.16.10",
-    "babel-jest": "^23.6.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "ecc-messagebus": "^3.6.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-15": "^1.4.0",
-    "enzyme-to-json": "^3.3.5",
-    "fs-extra": "^5.0.0",
-    "gulp-download-stream": "^0.0.13",
-    "gulp-rename": "^1.2.2",
-    "gulp-sequence": "^1.0.0",
-    "jest": "^23.6.0",
-    "jest-environment-enzyme": "^7.0.1",
-    "jest-enzyme": "^7.0.1",
-    "jest-html-reporter": "^2.4.4",
-    "jest-junit-reporter": "^1.1.0",
-    "jest-raw-loader": "^1.0.1",
-    "js-yaml": "^3.8.4",
-    "markdown-loader-jest": "^0.1.1",
-    "nock": "^10.0.6",
-    "node-sass": "^4.5.3",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-router-dom": "^4.3.1",
-    "react-test-renderer": "^15",
-    "sinon": "^7.2.3"
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-flow": "^7.16.5",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-jest": "^6.4.13",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.4.9",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/carbon-components-react": "^7.49.0",
+    "@types/carbon__icons-react": "^10.31.2",
+    "@types/color": "^3.0.2",
+    "@types/jest": "^24.9.1",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "babel-jest": "^27.5.1",
+    "chromatic": "^6.5.1",
+    "css-loader": "3.4.2",
+    "eslint": "^7.32.0",
+    "eslint-config-react-app": "^6.0.0",
+    "jest": "^26.6.3",
+    "jest-environment-jsdom-fourteen": "1.0.1",
+    "jest-pnp-resolver": "^1.2.1",
+    "node-sass": "4.12.0",
+    "node-sass-tilde-importer": "^1.0.2",
+    "react-app-polyfill": "^1.0.6",
+    "react-lorem-ipsum": "^1.4.9",
+    "regenerator-runtime": "^0.13.9",
+    "sass-loader": "8.0.2",
+    "style-loader": "0.23.1",
+    "typescript": "4.4.4",
+    "webpack": "^4.46.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   },
-  "lint-staged": {
-    "*.{js,jsx}": "eslint"
+  "jest": {
+    "roots": [
+      "<rootDir>/src/"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "resolver": "jest-pnp-resolver",
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/test/setupTests.js"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\](?!react-markdown|vfile|unist-util-stringify-position|).+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ]
   }
 }