@dxc-technology/halstack-react 0.0.0-3a8852f → 0.0.0-3b779a7

package/package.json

@@ -1,68 +1,87 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-3a8852f",
-  "description": "DXC Halstack React components library",
-  "author": {
-    "name": "DXC Technology",
-    "email": "DigitalInsurance@dxc.com",
-    "url": "https://dxc.com"
+  "version": "0.0.0-3b779a7",
+  "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.1.1",
-    "@material-ui/icons": "4.4.3",
-    "@material-ui/lab": "4.0.0-alpha.16",
-    "@material-ui/pickers": "3.2.2",
-    "@material-ui/styles": "4.0.2",
-    "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": "^10.0.2",
-    "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",
+    "@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-test-renderer": "^16.8.6",
-    "react": "file:../node_modules/react",
-    "react-dom": "file:../node_modules/react-dom",
-    "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/README.md

@@ -1,66 +0,0 @@
-# Halstack React CDK
-
-Halstack React CDK is a npm library of reusable React components, made with the purpose of helping React developers with the task of implementing User Interfaces following the DXC Design Guidelines.
-
-- It increases visual and behavioral consistency across the applications using the library.
-
-- It cuts down development efforts, taking the responsability of following the Design Guidelines away from the developer, and allowing him to focus on providing business value.
-
-## Usage
-
-Halstack React CDK is a set of reusable components distributed as a npm library. See the [documentation site](https://developer.dxc.com/tools/react/) for details on how to use it.
-
-## Contributing
-
-Before opening new issues or pull requests, please refer to [CONTRIBUTING.MD](https://github.com/dxc-technology/halstack-react/blob/master/CONTRIBUTING.md).
-
-## Development Setup
-
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. 
-
-
-The project is divided in two main folders. One is for the actual library, and the other one is a React application using the library.
-
-### Library
-
-Contained in the `lib` folder.
-
-```bash
-cd lib
-```
-
-Install the library dependencies.
-
-```bash
-npm install
-```
-
-Run the build process into `dist` folder, detecting and automatically building changes in src.
-
-```bash
-npm run build:watch #'npm run build' if there is no need to watch for changes
-```
-
-### Example Application
-
-Contained in the `app` folder.
-
-```bash
-cd app # from the root folder
-```
-
-Install the application dependencies. The Halstack React CDK dependency is linked to the local `lib` folder. This one must have been previously built.
-
-```bash
-npm install
-```
-
-Start the application.
-
-```bash
-npm start # runs create-react-app dev server
-```
-
-Now, anytime you make a change to the library or the app, `create-react-app` will live-reload your local dev server so you can iterate on your component in real-time.
-
-## Running the tests

package/dist/ThemeContext.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var ThemeContext = _react["default"].createContext();
-
-var _default = ThemeContext;
-exports["default"] = _default;

package/dist/accordion/Accordion.js

@@ -1,264 +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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-require("../common/OpenSans.css");
-
-var _variables = require("../common/variables.js");
-
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
-
-var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 20px;\n  max-width: 20px;\n  margin-left: ", ";\n  margin-right: ", ";\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 14px/19px Open Sans;\n  letter-spacing: 0.24px;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: ", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  flex-grow: 1;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 280px;\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  font-family: \"Open Sans\", sans-serif;\n  cursor: ", ";\n  .MuiPaper-root {\n    left: 85px;\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0px 6px 10px #00000024;\n    border: ", ";\n    display: block;\n    position: static;\n    width: 100%;\n    border-radius: 4px;\n\n    &.Mui-expanded {\n      border-radius: 4px;\n      color: ", ";\n      .MuiSvgIcon-root {\n        color: ", ";\n      }\n    }\n\n    .MuiButtonBase-root {\n      border-radius: 4px;\n      height: 72px;\n      :hover {\n        background-color: ", ";\n        color: ", ";\n\n        .MuiSvgIcon-root {\n          color: ", ";\n        }\n      }\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: 30px;\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      border-bottom: ", ";\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    background-color: ", ";\n    opacity: ", ";\n  }\n\n  .MuiCollapse-container {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: 0px 6px 10px ", "24;\n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n  }\n\n  .MuiSvgIcon-root {\n    color: ", ";\n  }\n\n  .MuiExpansionPanelSummary-root {\n    padding: 0 30px;\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$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "default" : _ref$mode,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
-      _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,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme,
-      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 colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
-
-  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
-  }, _react["default"].createElement(DXCAccordion, {
-    padding: padding,
-    margin: margin,
-    brightness: theme,
-    mode: mode,
-    disabled: disabled
-  }, _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, {
-    iconPosition: iconPosition
-  }, _react["default"].createElement(AccordionLabel, {
-    iconPosition: iconPosition
-  }, label), iconSrc && _react["default"].createElement(AccordionIcon, {
-    iconPosition: iconPosition,
-    src: iconSrc
-  })), _react["default"].createElement(AccordionAssistiveText, {
-    brightness: theme,
-    mode: mode
-  }, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionText, null, children)))));
-};
-
-DxcAccordion.propTypes = {
-  mode: _propTypes["default"].oneOf(["default", "alternative"]),
-  label: _propTypes["default"].string,
-  iconSrc: _propTypes["default"].string,
-  iconPosition: _propTypes["default"].oneOf(["before", "after"]),
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  theme: _propTypes["default"].oneOf(["light", "dark"]),
-  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 props.disabled && "not-allowed" || "pointer";
-}, function (props) {
-  return props.mode === "alternative" && props.theme.black || props.theme.white;
-}, function (props) {
-  return props.mode === "default" && props.theme.darkGrey || props.theme.white;
-}, function (props) {
-  return props.brightness === "dark" && props.mode === "alternative" ? "2px solid ".concat(props.theme.white) : "";
-}, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
-}, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
-}, function (props) {
-  return props.mode === "default" && props.theme.lightGrey || props.theme.lightBlack;
-}, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
-}, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
-}, function (props) {
-  return props.mode === "default" && "1px solid ".concat(props.theme.lightGrey) || "1px solid ".concat(props.theme.white);
-}, function (props) {
-  return props.mode === "default" && props.theme.white || props.theme.black;
-}, function (props) {
-  return props.mode === "default" && 1 || 0.8;
-}, function (props) {
-  return props.mode === "default" && props.theme.white || props.theme.black;
-}, function (props) {
-  return props.mode === "default" && props.theme.black || props.theme.white;
-}, function (props) {
-  return props.theme.white;
-}, function (props) {
-  return props.mode === "default" && props.theme.darkGrey || props.theme.white;
-}, 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(), function (props) {
-  return props.iconPosition === "after" && "row" || "row-reverse";
-});
-
-var AccordionLabel = _styledComponents["default"].div(_templateObject3(), function (props) {
-  return props.iconPosition === "after" && "0" || "1";
-});
-
-var AccordionText = _styledComponents["default"].div(_templateObject4());
-
-var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5());
-
-var AccordionIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
-  return props.iconPosition === "after" && "10px" || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && "10px" || "0px";
-});
-
-var _default = DxcAccordion;
-exports["default"] = _default;