@dxc-technology/halstack-react 0.0.0-ff6151e → 0.0.0-ff78514

package/package.json

@@ -1,74 +1,87 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-ff6151e",
-  "description": "DXC Halstack React components library",
-  "repository": "dxc-technology/halstack-react",
-  "homepage": "http://developer.dxc.com/tools/react",
-  "license": "Apache-2.0",
-  "author": {
-    "name": "DXC Technology",
-    "email": "DigitalInsurance@dxc.com",
-    "url": "https://dxc.com"
+  "version": "0.0.0-ff78514",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dxc-technology/halstack-react.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "types": "./src/index.ts",
+    "default": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build-storybook": "storybook build",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "prepublishOnly": "node ../../scripts/copy-readme.js",
+    "storybook": "storybook dev -p 6006",
+    "storybook:accessibility": "test-storybook",
+    "storybook:accessibility:ci": "test-storybook --maxWorkers=2",
+    "test": "jest --env=jsdom --config=./jest.config.js",
+    "test:accessibility": "jest --env=jsdom --config=./jest.config.accessibility.js",
+    "test:watch": "jest --env=jsdom --config=./jest.config.js --watch"
   },
-  "main": "./dist/main.js",
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "styled-components": ">= 4.3.1"
+    "react": "^18.3.1",
+    "react-data-grid": "7.0.0-beta.44",
+    "react-dom": "^18.3.1",
+    "styled-components": "^5.0.1"
   },
   "dependencies": {
-    "@date-io/date-fns": "^1.3.9",
-    "@material-ui/core": "4.11.1",
-    "@material-ui/icons": "4.4.3",
-    "@material-ui/lab": "4.0.0-alpha.17",
-    "@material-ui/pickers": "3.2.2",
-    "@material-ui/styles": "4.0.2",
-    "@testing-library/user-event": "^12.6.3",
-    "color": "^3.1.3",
-    "date-fns": "^2.0.0-beta.4",
-    "moment": "2.24.0",
-    "prop-types": "^15.7.2",
-    "react-use-scrollspy": "^2.0.0"
-  },
-  "scripts": {
-    "test": "jest",
-    "test:watch": "npm test -- --watch --coverage",
-    "build": "babel src --out-dir dist --copy-files --verbose && node ../scripts/build/copy-readme.js",
-    "build:watch": "babel src --watch --out-dir dist --copy-files --verbose"
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "color": "^4.2.3",
+    "dayjs": "^1.11.11",
+    "slugify": "^1.6.6"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.2",
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.10.1",
-    "@babel/preset-env": "^7.6.2",
-    "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^11.2.5",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "^8.0.6",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jest": "^22.7.1",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
+    "@babel/plugin-transform-runtime": "^7.16.8",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@chromatic-com/storybook": "^1.5.0",
+    "@dxc-technology/eslint-config": "*",
+    "@dxc-technology/typescript-config": "*",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-viewport": "^8.2.9",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@storybook/test-runner": "^0.22.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^13.0.0",
+    "@types/eslint": "^8.56.5",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@types/styled-components": "^5.1.34",
+    "axe-playwright": "^2.1.0",
+    "chromatic": "^11.5.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.5.4",
-    "react": "file:../node_modules/react",
-    "react-dom": "file:../node_modules/react-dom",
-    "react-test-renderer": "^16.8.6",
-    "styled-components": "file:../node_modules/styled-components"
-  },
-  "jest": {
-    "moduleNameMapper": {
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy",
-      "\\.(svg)$": "<rootDir>/test/mocks/svgMock.js",
-      "\\.(png)$": "<rootDir>/test/mocks/pngMock.js"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!react-use-scrollspy).+\\.js$"
-    ]
+    "jest": "^29.7.0",
+    "jest-axe": "^10.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "playwright": "^1.44.1",
+    "storybook": "^8.1.10",
+    "storybook-addon-pseudo-states": "^3.1.1",
+    "tsup": "^8.1.0",
+    "typescript": "^5.6.3"
   }
 }

package/babel.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  presets: ["@babel/react", "@babel/env"],
-  plugins: ["@babel/plugin-proposal-class-properties"]
-}

package/dist/ThemeContext.js

@@ -1,54 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ThemeProvider = exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _color = _interopRequireDefault(require("color"));
-
-var _variables = require("./common/variables.js");
-
-var ThemeContext = _react["default"].createContext();
-
-var addLightness = function addLightness(hexColor, increaseLightness) {
-  var color = (0, _color["default"])(hexColor);
-  var hslColor = color.hsl();
-  var lightnessColor = hslColor.color[2];
-  return hslColor.lightness(lightnessColor + increaseLightness).hex();
-};
-
-var parseTheme = function parseTheme(theme) {
-  if (theme) {
-    if (theme.tabs) {
-      _variables.componentTokens.tabs.selectedFontColor = theme.tabs.selectedFontColor;
-      _variables.componentTokens.tabs.hoverBackgroundColor = addLightness(_variables.componentTokens.tabs.selectedFontColor, 58);
-      _variables.componentTokens.tabs.pressedBackgroundColor = addLightness(_variables.componentTokens.tabs.selectedFontColor, 53);
-    }
-
-    return _variables.componentTokens;
-  }
-
-  return _variables.componentTokens;
-};
-
-var ThemeProvider = function ThemeProvider(_ref) {
-  var theme = _ref.theme,
-      children = _ref.children;
-  var parsedTheme = (0, _react.useMemo)(function () {
-    return parseTheme(theme);
-  }, [theme]);
-  return _react["default"].createElement(ThemeContext.Provider, {
-    value: parsedTheme
-  }, children);
-};
-
-exports.ThemeProvider = ThemeProvider;
-var _default = ThemeContext;
-exports["default"] = _default;

package/dist/accordion/Accordion.js

@@ -1,273 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
-
-var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
-
-var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
-
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-require("../common/OpenSans.css");
-
-var _utils = require("../common/utils.js");
-
-var _variables = require("../common/variables.js");
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: 0px;\n  margin-right: 10px;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\n  margin-left: 0px;\n  margin-right: 12px;\n  overflow: hidden;\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: 1px;\n  font-size: 14px;\n  font: italic normal 300 16px/22px Open Sans;\n  letter-spacing: 0.49px;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex-grow: 1;\n  margin-right: 15px;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 280px;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  width: ", ";\n\n  font-family: \"Open Sans\", sans-serif;\n  cursor: ", ";\n  .MuiPaper-root {\n    left: 85px;\n    background-color: ", " !important;\n    color: ", ";\n    box-shadow: 0px 6px 10px #00000024;\n    display: block;\n    position: static;\n    width: 100%;\n    border-radius: 4px;\n\n    &.Mui-expanded {\n      border-radius: 4px;\n      color: \"#000000\";\n    }\n\n    .MuiButtonBase-root.MuiExpansionPanelSummary-root {\n      :hover {\n        background-color: ", ";\n      }\n    }\n\n    .MuiButtonBase-root {\n      border-color: ", ";\n      border-radius: 4px;\n      height: 48px;\n\n      &.Mui-expanded {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        .MuiSvgIcon-root {\n          opacity: 1;\n        }\n      }\n\n      &.MuiIconButton-root {\n        height: auto;\n      }\n\n      .MuiExpansionPanelSummary-content {\n        padding-right: 24px;\n        &.Mui-expanded {\n          div:nth-child(2) {\n            opacity: 1;\n          }\n        }\n        :hover {\n          div {\n            opacity: 1;\n          }\n        }\n      }\n    }\n\n    .MuiExpansionPanelSummary-root.Mui-expanded {\n      min-height: 48px;\n      border: 1px solid ", ";\n    }\n\n    .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n\n  .MuiCollapse-hidden {\n    display: none;\n  }\n\n  .MuiPaper-root.Mui-disabled {\n    color: ", ";\n  }\n\n  .MuiCollapse-container {\n    color: #000000;\n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n    width: 100%;\n  }\n\n  .MuiSvgIcon-root {\n    color: ", ";\n  }\n\n  .MuiExpansionPanelSummary-root {\n    padding: 0 16px 0 16px;\n  }\n\n  .MuiExpansionPanelSummary-root.Mui-disabled {\n    opacity: 1;\n  }\n\n  .MuiExpansionPanelDetails-root {\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcAccordion = function DxcAccordion(_ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
-      icon = _ref.icon,
-      _ref$assistiveText = _ref.assistiveText,
-      assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
-      isExpanded = _ref.isExpanded,
-      children = _ref.children,
-      margin = _ref.margin,
-      padding = _ref.padding;
-
-  var _React$useState = _react["default"].useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      innerIsExpanded = _React$useState2[0],
-      setInnerIsExpanded = _React$useState2[1];
-
-  var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
-  var colorsTheme = (0, _react.useMemo)(function () {
-    return (0, _utils.getCustomTheme)(_variables.componentTokens, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
-  }, [customTheme]);
-
-  var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isResponsive = _useState2[0],
-      setIsResponsive = _useState2[1];
-
-  var handleResize = function handleResize(width) {
-    if (width) {
-      if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
-    }
-  };
-
-  var handleEventListener = function handleEventListener() {
-    handleResize(window.innerWidth);
-  };
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(window.innerWidth);
-    return function () {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
-
-  var handlerAccordion = function handlerAccordion() {
-    if (isExpanded == null) {
-      setInnerIsExpanded(!innerIsExpanded);
-    }
-
-    if (typeof onChange === "function") {
-      onChange(isExpanded == null ? !innerIsExpanded : !isExpanded);
-    }
-  };
-
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.accordion
-  }, _react["default"].createElement(DXCAccordion, {
-    padding: padding,
-    margin: margin,
-    disabled: disabled,
-    icon: icon || iconSrc,
-    isResponsive: isResponsive
-  }, _react["default"].createElement(_ExpansionPanel["default"], {
-    disabled: disabled,
-    onChange: handlerAccordion,
-    expanded: isExpanded != null ? isExpanded : innerIsExpanded
-  }, _react["default"].createElement(_ExpansionPanelSummary["default"], {
-    expandIcon: _react["default"].createElement(_ExpandMore["default"], null)
-  }, _react["default"].createElement(AccordionInfo, null, _react["default"].createElement(AccordionLabel, null, label), icon ? _react["default"].createElement(IconContainer, null, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(AccordionIcon, {
-    src: iconSrc
-  })), _react["default"].createElement(AccordionAssistiveText, null, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionText, null, children)))));
-};
-
-var calculateWidth = function calculateWidth(margin) {
-  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-};
-
-DxcAccordion.propTypes = {
-  label: _propTypes["default"].string,
-  iconSrc: _propTypes["default"].string,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  isExpanded: _propTypes["default"].bool,
-  children: _propTypes["default"].element,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
-
-var DXCAccordion = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return calculateWidth(props.margin);
-}, function (props) {
-  return props.disabled && "not-allowed" || "pointer";
-}, function (props) {
-  return props.theme.backgroundColor;
-}, function (props) {
-  return props.theme.fontColor;
-}, function (props) {
-  return "".concat(props.theme.arrowColor).concat(props.theme.hoverBackgroundColor);
-}, function (props) {
-  return props.theme.arrowColor;
-}, function (props) {
-  return props.theme.focusOutline;
-}, function (props) {
-  return "".concat(props.theme.fontColor).concat(props.theme.disabledFontColor);
-}, function (props) {
-  return props.theme.arrowColor;
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
-}, function (props) {
-  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
-});
-
-var AccordionInfo = _styledComponents["default"].div(_templateObject2());
-
-var AccordionLabel = _styledComponents["default"].div(_templateObject3());
-
-var AccordionText = _styledComponents["default"].div(_templateObject4());
-
-var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5());
-
-var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
-  return props.theme.arrowColor;
-});
-
-var AccordionIcon = _styledComponents["default"].img(_templateObject7());
-
-var _default = DxcAccordion;
-exports["default"] = _default;