revert: "Revert "Revert "feat : Migrate all repository to React v17.0…

… """
Autodesk · Jan 12, 2022 · bf78986 · bf78986
1 parent da47eaa
commit bf78986
Show file tree

Hide file tree

Showing 184 changed files with 9,745 additions and 12,149 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,9 +42,6 @@ jspm_packages
 # Gemini Report
 gemini-report/
 
-# Cypress Regression Testing
-# packages/storybook/cypress
-
 # Files created by CircleCI
 nohup.out
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -6,7 +6,7 @@
 
 - [Filing Issues](#filing-issues)
   - [Suggestions](#suggestions)
-  - [Bug Reports](#bug-reports)
+  - [Bugs](#bugs)
 - [Contributing Code](#contributing-code)
 - [Contributing Features](#contributing-features)
   - [Fork the project](#fork-the-project)

diff --git a/cypress.json b/cypress.json
diff --git a/package.json b/package.json
@@ -29,23 +29,16 @@
     "lerna": "^2.11.0",
     "mkdirp": "^0.5.1",
     "node-fetch": "^2.2.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-test-renderer": "^16.0.0-alpha.12",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-test-renderer": "^15.6.1",
     "registry-url": "^4.0.0"
   },
   "workspaces": {
-    "packages": [
-      "packages/*"
-    ],
-    "nohoist": [
-      "acceptance"
-    ]
+    "packages": ["packages/*"],
+    "nohoist": ["acceptance"]
   },
   "jest": {
     "preset": "@hig/jest-preset"
-  },
-  "dependencies": {
-    "enzyme-adapter-react-16": "^1.15.6"
   }
 }
diff --git a/packages/accordion/package.json b/packages/accordion/package.json
@@ -20,12 +20,13 @@
     "@hig/behaviors": "^1.1.1",
     "@hig/icons": "^3.4.3",
     "@hig/utils": "^0.4.0",
+    "@hig/icons": "^3.4.0",
     "prop-types": "^15.7.1"
   },
   "peerDependencies": {
     "@hig/theme-context": "^3.0.2",
     "@hig/theme-data": "^2.22.0",
-    "react": "^17.0.0"
+    "react": "^15.4.1 || ^16.3.2"
   },
   "devDependencies": {
     "@hig/babel-preset": "^0.1.1",

diff --git a/packages/accordion/src/Accordion.js b/packages/accordion/src/Accordion.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { cx, css } from "emotion";
 import { ThemeContext } from "@hig/theme-context";
@@ -14,144 +14,150 @@ import stylesheet from "./stylesheet";
 import HeaderPresenter from "./presenters/HeaderPresenter";
 import ContentPresenter from "./presenters/ContentPresenter";
 
-const Accordion = props => {
-  const [collapsed, setCollapsed] = useState(props.defaultCollapsed);
+export default class Accordion extends Component {
+  static propTypes = {
+    /** Content of the accordion */
+    children: PropTypes.node,
+    /** Controlled value, specifies whether the accordion is collapsed or not
+     * When provided, it overrides the accordion's collapsed state
+     */
+    collapsed: PropTypes.bool,
+    /** Specifies whether the accordion is default collapsed or not */
+    defaultCollapsed: PropTypes.bool,
+    /** Specifies whether the accordion is disabled or not */
+    disabled: PropTypes.bool,
+    /** Indicator icon */
+    indicator: PropTypes.oneOf(AVAILABLE_INDICATORS),
+    /** Indicator's position */
+    indicatorPosition: PropTypes.oneOf(AVAILABLE_INDICATOR_POSITIONS),
+    /** Text label for the accordion header */
+    label: PropTypes.node.isRequired,
+    /** Function called when clicks the accordion's header */
+    onClick: PropTypes.func,
+    /** Function to modify the component's styles */
+    stylesheet: PropTypes.func
+  };
 
-  const isCollapsedControlled = () => props.collapsed !== undefined;
+  static defaultProps = {
+    indicator: indicators.CARET,
+    indicatorPosition: indicatorPositions.LEFT,
+    defaultCollapsed: true,
+    disabled: false,
+    onClick: () => {}
+  };
 
-  const isCollapsed = () =>
-    isCollapsedControlled() ? props.collapsed : collapsed;
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapsed: this.props.defaultCollapsed
+    };
+  }
 
-  const onClick = () => {
-    if (!isCollapsedControlled()) {
-      setCollapsed(!collapsed);
+  onClick = () => {
+    if (!this.isCollapsedControlled()) {
+      const { collapsed } = this.state;
+      this.setState({ collapsed: !collapsed });
     }
-    props.onClick(isCollapsed());
+    this.props.onClick(this.isCollapsed());
   };
 
-  const {
-    children,
-    label,
-    indicator,
-    indicatorPosition,
-    disabled,
-    stylesheet: customStylesheet,
-    ...otherProps
-  } = props;
-
-  const {
-    className,
-    onBlur,
-    onFocus,
-    onMouseDown,
-    onMouseEnter,
-    onMouseLeave,
-    onMouseUp,
-    onHover
-  } = otherProps;
+  isCollapsedControlled = () => this.props.collapsed !== undefined;
 
-  return (
-    <ThemeContext.Consumer>
-      {({ resolvedRoles, metadata }) => {
-        const styles = stylesheet(
-          {
-            indicator,
-            indicatorPosition,
-            collapsed: isCollapsed(),
-            stylesheet: customStylesheet
-          },
-          resolvedRoles,
-          metadata
-        );
+  isCollapsed = () =>
+    this.isCollapsedControlled() ? this.props.collapsed : this.state.collapsed;
 
-        return (
-          <div className={cx(css(styles.wrapper), className)}>
-            <ControlBehavior
-              onBlur={onBlur}
-              onFocus={onFocus}
-              onMouseDown={onMouseDown}
-              onMouseEnter={onMouseEnter}
-              onMouseLeave={onMouseLeave}
-              onMouseUp={onMouseUp}
-            >
-              {({
-                hasFocus,
-                hasHover,
-                isPressed,
-                onBlur: handleBlur,
-                onFocus: handleFocus,
-                onMouseDown: handleMouseDown,
-                onMouseEnter: handleMouseEnter,
-                onMouseLeave: handleMouseLeave,
-                onMouseUp: handleMouseUp
-              }) => (
-                <HeaderPresenter
-                  {...otherProps}
-                  hasFocus={hasFocus}
-                  hasHover={hasHover}
-                  isPressed={isPressed}
-                  onBlur={handleBlur}
-                  onClick={onClick}
-                  onFocus={handleFocus}
-                  onHover={onHover}
-                  onMouseDown={handleMouseDown}
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                  onMouseUp={handleMouseUp}
-                  stylesheet={customStylesheet}
-                  label={label}
-                  indicator={indicator}
-                  indicatorPosition={indicatorPosition}
-                  collapsed={isCollapsed()}
-                  disabled={disabled}
-                />
-              )}
-            </ControlBehavior>
-            <ContentPresenter
-              collapsed={isCollapsed()}
-              stylesheet={customStylesheet}
-              className={className}
-            >
-              {children}
-            </ContentPresenter>
-          </div>
-        );
-      }}
-    </ThemeContext.Consumer>
-  );
-};
+  render() {
+    const {
+      children,
+      label,
+      indicator,
+      indicatorPosition,
+      disabled,
+      stylesheet: customStylesheet,
+      ...otherProps
+    } = this.props;
 
-Accordion.displayName = "Accordion";
+    const {
+      className,
+      onBlur,
+      onFocus,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseUp,
+      onHover
+    } = otherProps;
 
-Accordion.propTypes = {
-  /** Content of the accordion */
-  children: PropTypes.node,
-  /** Controlled value, specifies whether the accordion is collapsed or not
-   * When provided, it overrides the accordion's collapsed state
-   */
-  collapsed: PropTypes.bool,
-  /** Specifies whether the accordion is default collapsed or not */
-  defaultCollapsed: PropTypes.bool,
-  /** Specifies whether the accordion is disabled or not */
-  disabled: PropTypes.bool,
-  /** Indicator icon */
-  indicator: PropTypes.oneOf(AVAILABLE_INDICATORS),
-  /** Indicator's position */
-  indicatorPosition: PropTypes.oneOf(AVAILABLE_INDICATOR_POSITIONS),
-  /** Text label for the accordion header */
-  label: PropTypes.node.isRequired,
-  /** Function called when clicks the accordion's header */
-  onClick: PropTypes.func,
-  /** Function to modify the component's styles */
-  stylesheet: PropTypes.func
-};
+    const collapsed = this.isCollapsed();
 
-Accordion.defaultProps = {
-  indicator: indicators.CARET,
-  indicatorPosition: indicatorPositions.LEFT,
-  defaultCollapsed: true,
-  disabled: false,
-  onClick: () => {}
-};
+    return (
+      <ThemeContext.Consumer>
+        {({ resolvedRoles, metadata }) => {
+          const styles = stylesheet(
+            {
+              indicator,
+              indicatorPosition,
+              collapsed,
+              stylesheet: customStylesheet
+            },
+            resolvedRoles,
+            metadata
+          );
 
-export default Accordion;
+          return (
+            <div className={cx(css(styles.wrapper), className)}>
+              <ControlBehavior
+                onBlur={onBlur}
+                onFocus={onFocus}
+                onMouseDown={onMouseDown}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+                onMouseUp={onMouseUp}
+              >
+                {({
+                  hasFocus,
+                  hasHover,
+                  isPressed,
+                  onBlur: handleBlur,
+                  onFocus: handleFocus,
+                  onMouseDown: handleMouseDown,
+                  onMouseEnter: handleMouseEnter,
+                  onMouseLeave: handleMouseLeave,
+                  onMouseUp: handleMouseUp
+                }) => (
+                  <HeaderPresenter
+                    {...otherProps}
+                    hasFocus={hasFocus}
+                    hasHover={hasHover}
+                    isPressed={isPressed}
+                    onBlur={handleBlur}
+                    onClick={this.onClick}
+                    onFocus={handleFocus}
+                    onHover={onHover}
+                    onMouseDown={handleMouseDown}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    onMouseUp={handleMouseUp}
+                    stylesheet={customStylesheet}
+                    label={label}
+                    indicator={indicator}
+                    indicatorPosition={indicatorPosition}
+                    collapsed={collapsed}
+                    disabled={disabled}
+                  />
+                )}
+              </ControlBehavior>
+              <ContentPresenter
+                collapsed={collapsed}
+                stylesheet={customStylesheet}
+                className={className}
+              >
+                {children}
+              </ContentPresenter>
+            </div>
+          );
+        }}
+      </ThemeContext.Consumer>
+    );
+  }
+}