@zohodesk/components 1.0.0-temp-199.23 → 1.0.0-temp-199.25

package/_react-cli.config.js

@@ -0,0 +1,24 @@
+exports.config = {
+  "preprocess": {
+    "runner": "./preprocess/index.js"
+  },
+  "css": {
+    "plugins": {
+      "hasRTL": true,
+      "cssVariableReplacement": true
+    },
+    "patterns": {
+      "cssVariableReplacement": [
+        "**/src/**",
+        "**/lib/**",
+        "**/es/**",
+        "!**/node_modules/**"
+      ],
+      "hasRTL": [
+        "**/src/**",
+        "!**/node_modules/**"
+      ]
+    },
+    "cssVariableReplacementConfig": "./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json"
+  }
+}

package/cbt.config.js

@@ -0,0 +1,41 @@
+
+const path = require('path');
+
+exports.config = {
+  preProcess: {
+    enable: true,
+    runner: './preprocess/index.js'
+  },
+  css: {
+    plugins: {
+      rtl: {
+        enable: true,
+        patterns: [
+          '**/src/**/*.css',
+          '!**/node_modules/**',
+          '**/assets/**/*.css'
+        ]
+      },
+      cssVariableReplacement: {
+        enable: true,
+        configFile:
+          './node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json',
+        patterns: [
+          "**/src/**",
+          "!**/node_modules/**"
+        ]
+      }
+    },
+     customPlugins: [
+      {
+        plugin: (options) =>
+          require('postcss-discard-comments')({
+            remove: (c) => { return c.includes('rtl:') }
+          }), 
+        patterns: ['**/assets/**/*.css'],
+        enable: true
+      }
+    ]
+  }
+ 
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-199.23",
+  "version": "1.0.0-temp-199.25",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -17,29 +17,22 @@
     "LIBRARY"
   ],
   "scripts": {
-    "build:docs": "react-cli build:docs",
     "_lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "lint": "npx eslint ./src",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
     "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder  node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es",
-    "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
-    "build:variables": "react-cli clean ./assets && node ./preprocess/index",
-    "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
+    "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
     "common_package_build": "cd ../common && npm run build && cd ../components",
-    "start": "react-cli start",
-    "docs": "npm run css:review && react-cli docs",
-    "build:lib": "react-cli build:component:cmjs",
-    "build:es": "react-cli build:library:es",
+    "build:lib": "cbt build:lib src,assets lib,assets",
+    "build:es": "cbt build:es src,assets es,assets",
     "build": "npm run theme:validate && npm run build:lib && npm run build:es",
-    "build:local": " npm run build && npm run rtl && npm run cssVariableConvert",
-    "build:watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
-    "rtl:watch": "react-cli rtl ./src ./es -w",
-    "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
+    "build:local": "npm run build",
+    "build:watch": "npm run build:es --module:mode=dev -- -w",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -47,12 +40,11 @@
     "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib &&  react-cli clean ./package-lock.json &&  react-cli clean ./result.json ",
     "snap-update": "npm run test-clean && npm run test -- -u",
     "sstest": "npm run init && react-cli sstest",
-    "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy && react-cli build:component:umd && npm run externalDocHTMLChange",
+    "build:external": "npm run clean &&  npm run init  && npm run docsjs:build && npm run build:externalDocCopy  && npm run externalDocHTMLChange",
     "download": "npm run download_only && cd ../ && npm run download",
     "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install  --legacy-peer-deps",
     "expublish": "npm publish --tag experimental-version",
     "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
-    "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
     "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
     "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
     "variable:check": "node  ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
@@ -66,11 +58,12 @@
     "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib  --rewrite=assets=assets --skip-existing-layer",
     "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js  css_layer_config.json ./src/components_layer.module.css",
     "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js  css_layer_config.json ./src/ ./assets",
-    "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build && npm run rtl && npm run cssVariableConvert  ",
+    "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build",
     "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es  --rewrite=assets=assets",
     "css:audit": "npx css-audit  --common-css=common/common.module.css --dir src  --port 8085  --report "
   },
   "devDependencies": {
+    "postcss-discard-comments": "^7.0.5",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^7.0.2",
@@ -84,15 +77,16 @@
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.7",
     "@zohodesk/hooks": "2.0.6",
-    "@zohodesk/icons": "1.1.7",
+    "@zohodesk/icons": "1.2.1",
     "@zohodesk/layout": "3.1.0",
-    "@zohodesk/svg": "1.3.1",
+    "@zohodesk/svg": "1.3.2",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.2.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
     "@zohodesk/react-cli": "1.1.27",
+    "@zohodesk/client_build_tool": "0.0.20",
     "color": "4.2.3"
   },
   "dependencies": {
@@ -102,9 +96,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.7",
+    "@zohodesk/icons": "1.2.1",
     "@zohodesk/variables": "1.2.0",
-    "@zohodesk/svg": "1.3.1",
+    "@zohodesk/svg": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
@@ -115,4 +109,4 @@
     "@zohodesk/dotkit": "1.0.7",
     "color": "4.2.3"
   }
-}
+}

package/es/Accordion/Accordion.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Accordion_defaultProps } from "./props/defaultProps";
-import { Accordion_propTypes } from "./props/propTypes";
-export default class Accordion extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedItem: this.props.selectedItem
-    };
-    this.selectMenu = this.selectMenu.bind(this);
-  }
-
-  selectMenu(selectedItem) {
-    let {
-      onSelect,
-      disableInternalState
-    } = this.props;
-
-    if (onSelect) {
-      onSelect(selectedItem);
-    }
-
-    !disableInternalState && this.setState({
-      selectedItem
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
-      this.setState({
-        selectedItem: nextProps.selectedItem
-      });
-    }
-  }
-
-  render() {
-    let {
-      className,
-      height,
-      unMount,
-      disableInternalState,
-      selectedItem: propSelectedItem,
-      a11y,
-      dataId,
-      dataSelectorId
-    } = this.props;
-    let {
-      selectedItem
-    } = this.state;
-    let children = React.Children.map(this.props.children, child => {
-      if (child) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          selectedItem: disableInternalState ? propSelectedItem : selectedItem,
-          selectMenu: this.selectMenu,
-          unMount: unMount
-        });
-      }
-    });
-    let {
-      role,
-      ariaExpanded,
-      ariaHaspopup
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
-      style: {
-        height
-      },
-      role: role,
-      "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHaspopup,
-      "data-id": dataId,
-      "data-test-id": dataId,
-      "data-selector-id": dataSelectorId
-    }, children);
-  }
-
-}
-Accordion.propTypes = Accordion_propTypes;
-Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
-//   Accordion.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/Accordion/AccordionItem.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { AccordionItem_defaultProps } from "./props/defaultProps";
-import { AccordionItem_propTypes } from "./props/propTypes";
-import VelocityAnimation from "../VelocityAnimation/VelocityAnimation/VelocityAnimation";
-import VelocityAnimationGroup from "../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup";
-export default class AccordionItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.equalityCheck = this.equalityCheck.bind(this);
-  }
-
-  equalityCheck() {
-    let {
-      equalityCheck,
-      selectedItem,
-      id
-    } = this.props;
-    return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
-  }
-
-  render() {
-    let {
-      id,
-      selectMenu,
-      className,
-      children,
-      dataId,
-      dataSelectorId,
-      unMount,
-      unMountItem,
-      a11y,
-      innerClass
-    } = this.props;
-    unMountItem = unMountItem !== undefined ? unMountItem : unMount;
-    let {
-      role
-    } = a11y;
-    return /*#__PURE__*/React.createElement("div", {
-      className: className ? className : '',
-      "data-id": dataId,
-      "data-test-id": dataId,
-      role: role,
-      "data-selector-id": dataSelectorId
-    }, /*#__PURE__*/React.createElement("div", {
-      className: innerClass ? innerClass : '',
-      onClick: selectMenu.bind(this, id)
-    }, children[0]), unMountItem ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: "slideDown",
-      isActive: this.equalityCheck()
-    }, children[1]) : /*#__PURE__*/React.createElement(VelocityAnimation, {
-      name: "slideDown",
-      isActive: this.equalityCheck()
-    }, children[1]));
-  }
-
-}
-AccordionItem.propTypes = AccordionItem_propTypes;
-AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
-//   AccordionItem.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/Accordion/__tests__/Accordion.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Accordion from "../Accordion";
-describe('Accordion', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Accordion, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Accordion/__tests__/AccordionItem.spec.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import AccordionItem from "../AccordionItem";
-describe('AccordionItem', () => {
-  test('rendering the defult props', () => {
-    const mockOnClick = jest.fn();
-    const mockSelectMenu = jest.fn();
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AccordionItem, {
-      onRemove: mockOnClick,
-      selectMenu: mockSelectMenu
-    }, /*#__PURE__*/React.createElement("div", null, " Accordin list "), /*#__PURE__*/React.createElement("div", null, " Accordin list2 ")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Accordion rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class=""
-    data-id="Accordion"
-    data-selector-id="accordion"
-    data-test-id="Accordion"
-  />
-</DocumentFragment>
-`;

package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionItem rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class=""
-    data-id="AccordionItem"
-    data-selector-id="accordionItem"
-    data-test-id="AccordionItem"
-  >
-    <div
-      class=""
-    >
-      <div>
-         Accordin list 
-      </div>
-    </div>
-    <div>
-       Accordin list2 
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/Accordion/index.js

@@ -1,2 +0,0 @@
-export { default as Accordion } from "./Accordion";
-export { default as AccordionItem } from "./AccordionItem";

package/es/Accordion/props/defaultProps.js

@@ -1,12 +0,0 @@
-export const Accordion_defaultProps = {
-  unMount: true,
-  disableInternalState: false,
-  a11y: {},
-  dataId: 'Accordion',
-  dataSelectorId: 'accordion'
-};
-export const AccordionItem_defaultProps = {
-  a11y: {},
-  dataId: 'AccordionItem',
-  dataSelectorId: 'accordionItem'
-};

package/es/Accordion/props/propTypes.js

@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-export const Accordion_propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  disableInternalState: PropTypes.bool,
-  height: PropTypes.string,
-  onSelect: PropTypes.func,
-  selectedItem: PropTypes.string.isRequired,
-  unMount: PropTypes.bool,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaExpanded: PropTypes.bool,
-    ariaHaspopup: PropTypes.bool
-  })
-};
-export const AccordionItem_propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  equalityCheck: PropTypes.func,
-  id: PropTypes.string,
-  selectMenu: PropTypes.func,
-  selectedItem: PropTypes.string,
-  unMount: PropTypes.bool,
-  unMountItem: PropTypes.bool,
-  innerClass: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string
-  })
-};

package/es/Animation/Animation.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { CSSTransition } from 'react-transition-group';
-import { animationStyle } from "./utils";
-export default class Animation extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      name,
-      enterDuration,
-      exitDuration,
-      children,
-      isActive,
-      unmountOnExit,
-      onEntered = () => {},
-      onExit = () => {},
-      delayClassName = null
-    } = this.props;
-    let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
-      exit: `${delayClassName} ${animationStyle[name].exit}`
-    }) : animationStyle[name];
-    return /*#__PURE__*/React.createElement(CSSTransition, {
-      classNames: newClassNames && newClassNames,
-      in: isActive,
-      appear: true,
-      enter: true,
-      exit: true,
-      mountOnEnter: false,
-      unmountOnExit: unmountOnExit,
-      timeout: {
-        enter: enterDuration,
-        exit: exitDuration
-      },
-      onEntered: onEntered,
-      onExit: onExit
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
-  }
-
-}
-Animation.propTypes = propTypes;
-Animation.defaultProps = defaultProps; // if (__DOCS__) {
-//   Animation.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }

package/es/Animation/__tests__/Animation.spec.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Animation from "../Animation";
-describe('Animation', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Animation, {
-      isActive: true,
-      name: "zoomIn"
-    }, /*#__PURE__*/React.createElement("div", null, " Test Animation")));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Animation rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="zoomInEnter zoomInEnterActive"
-  >
-     Test Animation
-  </div>
-</DocumentFragment>
-`;

package/es/Animation/props/defaultProps.js

@@ -1,7 +0,0 @@
-export const defaultProps = {
-  enterDuration: 300,
-  exitDuration: 300,
-  isActive: false,
-  name: 'fadeIn',
-  unmountOnExit: true
-};

package/es/Animation/props/propTypes.js

@@ -1,12 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  children: PropTypes.node,
-  delayClassName: PropTypes.string,
-  enterDuration: PropTypes.number,
-  exitDuration: PropTypes.number,
-  isActive: PropTypes.bool,
-  name: PropTypes.oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
-  onEntered: PropTypes.func,
-  onExit: PropTypes.func,
-  unmountOnExit: PropTypes.bool
-};

package/es/Animation/utils.js

@@ -1,83 +0,0 @@
-import style from "../common/transition.module.css";
-export const animationStyle = {
-  zoomIn: {
-    enter: style.zoomInEnter,
-    enterActive: style.zoomInEnterActive,
-    enterDone: style.zoomInEnterActive,
-    exit: style.zoomInLeave,
-    exitActive: style.zoomInLeaveActive,
-    exitDone: style.zoomInLeaveActive,
-    appear: style.zoomInEnter,
-    appearActive: style.zoomInEnterActive
-  },
-  scaleIn: {
-    enter: style.scaleInEnter,
-    enterActive: style.scaleInEnterActive,
-    enterDone: style.scaleInEnterActive,
-    exit: style.scaleInLeave,
-    exitActive: style.scaleInLeaveActive,
-    exitDone: style.scaleInLeaveActive,
-    appear: style.scaleInEnter,
-    appearActive: style.scaleInEnterActive
-  },
-  fadeIn: {
-    enter: style.fadeInEnter,
-    enterActive: style.fadeInEnterActive,
-    enterDone: style.fadeInEnterActive,
-    exit: style.fadeInLeave,
-    exitActive: style.fadeInLeaveActive,
-    exitDone: style.fadeInLeaveActive,
-    appear: style.fadeInEnter,
-    appearActive: style.fadeInEnterActive
-  },
-  slideLeft: {
-    enter: style.slideLeftEnter,
-    enterActive: style.slideLeftEnterActive,
-    enterDone: style.slideLeftEnterActive,
-    exit: style.slideLeftLeave,
-    exitActive: style.slideLeftLeaveActive,
-    exitDone: style.slideLeftLeaveActive,
-    appear: style.slideLeftEnter,
-    appearActive: style.slideLeftEnterActive
-  },
-  slideDown: {
-    enter: style.slideDownEnter,
-    enterActive: style.slideDownEnterActive,
-    enterDone: style.slideDownEnterActive,
-    exit: style.slideDownLeave,
-    exitActive: style.slideDownLeaveActive,
-    exitDone: style.slideDownLeaveActive,
-    appear: style.slideDownEnter,
-    appearActive: style.slideDownEnterActive
-  },
-  skewIn: {
-    enter: style.skewInEnter,
-    enterActive: style.skewInEnterActive,
-    enterDone: style.skewInEnterActive,
-    exit: style.skewInLeave,
-    exitActive: style.skewInLeaveActive,
-    exitDone: style.skewInLeaveActive,
-    appear: style.skewInEnter,
-    appearActive: style.skewInEnterActive
-  },
-  none: {
-    enter: style.noneEnter,
-    enterActive: style.noneEnterActive,
-    enterDone: style.noneEnterActive,
-    exit: style.noneLeave,
-    exitActive: style.noneLeaveActive,
-    exitDone: style.noneLeaveActive,
-    appear: style.noneEnter,
-    appearActive: style.noneEnterActive
-  },
-  default: {
-    enter: style.defaultEnter,
-    enterActive: style.defaultEnterActive,
-    enterDone: style.defaultEnterActive,
-    exit: style.defaultLeave,
-    exitActive: style.defaultLeaveActive,
-    exitDone: style.defaultLeaveActive,
-    appear: style.defaultEnter,
-    appearActive: style.defaultEnterActive
-  }
-};