flipper-ui 0.26.1 → 0.26.6

package/core/Badge.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge';
 import type { DefaultProps } from './types';
-interface BadgeProps extends DefaultProps, MuiBadgeProps {
+export interface BadgeProps extends DefaultProps, MuiBadgeProps {
     max?: number;
     counter: number | string;
     position?: {

package/core/Box.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import type { DefaultProps } from './types';
-interface BoxProps extends DefaultProps {
+export interface BoxProps extends DefaultProps {
     minHeight?: number;
 }
 declare const Box: FC<BoxProps>;

package/core/Chapter.js

@@ -17,7 +17,7 @@ var _excluded = ["padding", "margin", "style", "childrenStyle", "children", "var
 var _templateObject, _templateObject2;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    --color: ", ";\n    flex: 1;\n    min-height: .75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: var(--color);\n"])), function (props) {
+var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    --color: ", ";\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: var(--color);\n"])), function (props) {
   return props.primary ? _colors.primary.normal : _colors.background.normal;
 });
 var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n\n    & hr:first-child {\n        margin-right: 10px;\n    }\n\n    & hr:last-child {\n        margin-left: 10px;\n    }\n"])));

package/core/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, ReactNode } from 'react';
 import { DefaultProps } from './types';
-interface CheckboxProps extends DefaultProps {
+export interface CheckboxProps extends DefaultProps {
     name: string;
     label?: ReactNode;
     color?: 'primary' | 'secondary' | 'default';

package/core/Chip.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { DefaultProps } from './types';
 import { ChipProps } from '@material-ui/core/Chip';
-interface IChipProps extends DefaultProps {
+export interface IChipProps extends DefaultProps {
     square?: boolean;
 }
 declare const Chip: FC<ChipProps & IChipProps>;

package/core/ChipField.js

@@ -22,6 +22,7 @@ var ChipField = function ChipField(props) {
     });
   }, [props.values]);
   return /*#__PURE__*/_react["default"].createElement(StyledChipInput, (0, _extends2["default"])({}, props, {
+    id: "chip-field-root",
     alwaysShowPlaceholder: true,
     value: values
   }));

package/core/DataTable/DataTablePaginationActions.js

@@ -11,8 +11,6 @@ var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"))
 var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));
 var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
 var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
-/* eslint-disable @typescript-eslint/interface-name-prefix */
-
 var PAGINATION_WRAPPER_STYLE = {
   display: 'flex',
   marginLeft: '12px'

package/core/DataTable/types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, FunctionComponent } from 'react';
-declare type RecordUnknown = Record<string, unknown>;
+export declare type RecordUnknown = Record<string, unknown>;
 export declare type StackView = RecordUnknown;
 export declare type Identifier = string | number;
 export interface Data extends RecordUnknown {

package/core/DataTable/types.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RowMode = void 0;
-/* eslint-disable @typescript-eslint/interface-name-prefix */
 var RowMode;
 exports.RowMode = RowMode;
 (function (RowMode) {

package/core/DataTable/usePaginated.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { Data } from './types';
 export interface IDataProps {
     id: string;
     product: string;
@@ -5,14 +7,15 @@ export interface IDataProps {
     quantity: number;
     date: Date;
 }
-export declare const generateRandomDate: (size: number) => IDataProps[];
+export declare const generateRandomDate: (size: number) => Data[];
 export declare const usePaginated: () => {
-    data: IDataProps[];
-    setData: (data: any) => void;
+    data: Data[];
+    setData: import("react").Dispatch<import("react").SetStateAction<Data[]>>;
     totalElements: number;
     actualPage: number;
     size: number;
     handleChangePage: (newPage: number) => void;
     handleChangePerPage: (value: number) => void;
     loading: boolean;
+    mockData: Data[];
 };

package/core/DataTable/usePaginated.js

@@ -10,14 +10,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _faker = _interopRequireDefault(require("faker"));
 var _splitEvery = _interopRequireDefault(require("ramda/es/splitEvery"));
 var _react = require("react");
-var _uuid = require("uuid");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var generateRandomDate = function generateRandomDate(size) {
   var content = [];
   for (var i = 0; i < size; i++) {
     content.push({
-      id: (0, _uuid.v4)(),
+      id: i,
       product: _faker["default"].vehicle.model(),
       price: _faker["default"].datatype["float"]({
         min: 0,
@@ -127,7 +126,8 @@ var usePaginated = function usePaginated() {
     size: state.size,
     handleChangePage: handleChangePage,
     handleChangePerPage: handleChangePerPage,
-    loading: loading
+    loading: loading,
+    mockData: mockData
   };
 };
 exports.usePaginated = usePaginated;

package/core/DateTime.js

@@ -54,7 +54,7 @@ var DateTime = function DateTime(_ref) {
       padding: padding
     }, style),
     inputProps: _objectSpread({
-      autocomplete: 'off'
+      autoComplete: 'off'
     }, otherProps.inputProps),
     InputAdornmentProps: _objectSpread({
       style: {

package/core/EditableTable.js

@@ -51,7 +51,7 @@ var CustomRemove = (0, _styledComponents["default"])(_materialTable.MTableEditRo
     }
   }
 });
-var CustomRows = (0, _styledComponents["default"])(_materialTable.MTableBodyRow)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    transition: opacity 200ms ease;\n    button {\n        display: none;\n    };\n    &:hover {\n        background: -moz-linear-gradient(left,", " 0%, ", " 100%);\n        background: -webkit-linear-gradient(left,", " 0%,", " 100%);\n        background: linear-gradient(to right,", " 0%,", " 100%);\n    };\n    &:hover button {\n        display: inline-block !important;\n    };\n    td {\n        min-width: 64px;\n    };\n"])), _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY);
+var CustomRows = (0, _styledComponents["default"])(_materialTable.MTableBodyRow)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    transition: opacity 200ms ease;\n    button {\n        display: none;\n    }\n    &:hover {\n        background: -moz-linear-gradient(left, ", " 0%, ", " 100%);\n        background: -webkit-linear-gradient(left, ", " 0%, ", " 100%);\n        background: linear-gradient(to right, ", " 0%, ", " 100%);\n    }\n    &:hover button {\n        display: inline-block !important;\n    }\n    td {\n        min-width: 64px;\n    }\n"])), _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY, _colors.DARK, _colors.GREY);
 var RightPagination = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        display: block;\n        float: right;\n    }\n"])));
 var Wrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        justify-content: flex-end;\n    }\n"])));
 var EditableTable = function EditableTable(props) {

package/core/ExpansionPanel.d.ts

@@ -14,7 +14,7 @@ interface ExpansionPanelProps extends PaperProps {
     helperIcon?: React.ReactNode;
     helperButtonPosition?: 'left' | 'right';
     onHelperClick?: () => void;
-    onChange?: (event?: any, expanded?: any) => void;
+    onChange?: (event?: React.ChangeEvent<{}>, expanded?: boolean) => void;
 }
 declare const ExpansionPanel: FC<ExpansionPanelProps>;
 export default ExpansionPanel;

package/core/ExpansionPanel.js

@@ -20,7 +20,7 @@ var _excluded = ["actions", "details", "expandIcon", "margin", "padding", "style
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;  \n    }\n    :hover button {\n        display: flex;\n    }\n"])));
+var ExpansionPanelHeaderWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
 var ExpansionPanel = function ExpansionPanel(_ref) {
   var actions = _ref.actions,
     details = _ref.details,

package/core/Header.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { PaperProps } from './Paper';
-interface HeaderProps extends PaperProps {
+export interface HeaderProps extends PaperProps {
     position?: 'absolute' | 'fixed' | 'static' | 'sticky';
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
 }

package/core/IconButton.d.ts

@@ -1,6 +1,6 @@
 import { FC, MouseEvent } from 'react';
 import { DefaultProps } from './types';
-interface IconButtonProps extends DefaultProps {
+export interface IconButtonProps extends DefaultProps {
     color?: 'default' | 'inherit' | 'primary' | 'secondary';
     disabled?: boolean;
     onClick?(event: MouseEvent<HTMLButtonElement>): void;

package/core/Line.js

@@ -16,7 +16,7 @@ var _excluded = ["padding", "margin", "style"];
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    border: 1px solid ", ";\n"])), function (props) {
+var StyledLine = _styledComponents["default"].hr(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n    border: 1px solid\n        ", ";\n"])), function (props) {
   return props.primary ? _colors.primary.normal : _colors.background.normal;
 });
 var Line = function Line(_ref) {

package/core/MaskField.d.ts

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { TextFieldProps } from './TextField';
-interface MaskFieldProps {
+export interface MaskFieldProps {
     mask?: string;
     type?: 'text' | 'tel' | 'password';
     decimalSeparator?: string;

package/core/Node.d.ts

@@ -7,7 +7,7 @@ interface IState {
     open: boolean;
 }
 declare class Node extends Component<NodeProps, IState> {
-    constructor(props: any);
+    constructor(props: NodeProps);
     handleToggleOpen(): void;
     renderDropdownIcon(): JSX.Element;
     render(): JSX.Element;

package/core/Pagination.d.ts

@@ -1,11 +1,11 @@
 import { Component } from 'react';
 import { DefaultProps } from './types';
-interface PaginationProps extends DefaultProps {
+export interface PaginationProps extends DefaultProps {
     pages?: number;
     active: number;
-    onNext: () => {};
-    onPrevious: () => {};
-    onNavigate: (page: any) => {};
+    onNext: () => void;
+    onPrevious: () => void;
+    onNavigate: (page: number) => void;
 }
 declare class Pagination extends Component<PaginationProps, {}> {
     render(): JSX.Element;

package/core/Pagination.js

@@ -55,18 +55,21 @@ var Pagination = /*#__PURE__*/function (_Component) {
           margin: margin
         }, style)
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        id: "prev-page-button",
         size: "small",
         onClick: this.props.onPrevious
       }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null)), allPages.map(function (page) {
         return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           size: "small",
           key: page,
+          id: "pagination-page-".concat(page),
           color: page === active ? 'primary' : 'default',
           onClick: function onClick() {
             return _this.props.onNavigate(page);
           }
         }, page);
       }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        id: "next-page-button",
         size: "small",
         onClick: this.props.onNext
       }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], null)));

package/core/PinInput.js

@@ -105,7 +105,7 @@ var PinInput = function PinInput(_ref) {
       onPinChanged(undefined, index);
     }
   };
-  var useStyleProps = function useStyleProps() {
+  var getStyleProps = function getStyleProps() {
     var style = _objectSpread({
       width: size === 'small' ? '40px' : '40px',
       height: size === 'small' ? '30px' : '40px',
@@ -113,7 +113,7 @@ var PinInput = function PinInput(_ref) {
     }, styleProps);
     return style;
   };
-  var useInputProps = function useInputProps() {
+  var getInputProps = function getInputProps() {
     var style = _objectSpread({
       width: size === 'small' ? '40px' : '45px',
       textAlign: 'center',
@@ -123,7 +123,7 @@ var PinInput = function PinInput(_ref) {
     }, inputProps);
     return style;
   };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Container, null, Array.from({
+  return /*#__PURE__*/_react["default"].createElement(Container, null, Array.from({
     length: pinLength
   }, function (_, index) {
     return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
@@ -134,10 +134,11 @@ var PinInput = function PinInput(_ref) {
       },
       onPaste: onPaste,
       color: "primary",
+      className: "pin-input-field",
       error: validationResult,
-      style: useStyleProps(),
+      style: getStyleProps(),
       InputProps: {
-        style: useInputProps()
+        style: getInputProps()
       },
       inputRef: function inputRef(el) {
         inputRefs.current[index] = el;
@@ -148,7 +149,7 @@ var PinInput = function PinInput(_ref) {
       },
       value: pin[index] === 0 ? 0 : pin[index] || ''
     });
-  })));
+  }));
 };
 var _default = PinInput;
 exports["default"] = _default;

package/core/Sidebar.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { DefaultProps } from './types';
 import { ButtonProps } from './Button';
-interface SidebarProps extends DefaultProps {
+export interface SidebarProps extends DefaultProps {
     open: boolean;
     expanded?: boolean;
     showButton?: boolean;

package/core/Sidebar.js

@@ -24,12 +24,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       '&:active': {
         boxShadow: 'none'
       },
-      'alignSelf': 'right',
-      'backgroundColor': 'transparent',
-      'boxShadow': 'none',
-      'maxWidth': 'inherit',
-      'minWidth': 'auto',
-      'width': '100%'
+      alignSelf: 'right',
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      maxWidth: 'inherit',
+      minWidth: 'auto',
+      width: '100%'
     },
     "default": {
       backgroundColor: theme.palette.background["default"],

package/core/Slider.d.ts

@@ -4,5 +4,6 @@ import { DefaultProps } from './types';
 interface ISliderProps {
     defaultValue?: number | number[];
 }
-declare const Slider: FC<Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps>;
+export declare type FlipperSliderProps = Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps;
+declare const Slider: FC<FlipperSliderProps>;
 export default Slider;

package/core/Snackbar.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, FC, FunctionComponent } from 'react';
 import { DefaultProps } from './types';
 import { TransitionProps } from '@material-ui/core/transitions/transition';
-interface SnackBarProps extends DefaultProps {
+export interface SnackBarProps extends DefaultProps {
     autoHide?: number;
     message: ReactNode;
     open: boolean;

package/core/Stepper.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { DefaultProps } from './types';
-interface StepperProps extends DefaultProps {
+export interface StepperProps extends DefaultProps {
     active?: number;
     steps: Array<string | TStep>;
     bottomLabel?: boolean;

package/core/Tree.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-interface INode {
+export interface INode {
     id: string | number;
     name: string;
     nodes?: INode[];
@@ -8,7 +8,7 @@ interface TreeProps {
     nodes?: INode[];
 }
 declare class Tree extends Component<TreeProps, {}> {
-    renderNode(node: any, index: any, root?: boolean): JSX.Element;
+    renderNode(node: INode, index: string, root?: boolean): JSX.Element;
     render(): JSX.Element[];
 }
 export default Tree;

package/core/Tree.js

@@ -45,7 +45,7 @@ var Tree = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this = this;
       return (this.props.nodes || []).map(function (node, index) {
-        return _this.renderNode(node, index, true);
+        return _this.renderNode(node, index.toString(), true);
       });
     }
   }]);

package/index.d.ts

@@ -59,3 +59,4 @@ export { default as Typography } from './core/Typography';
 export { default as Zoom } from './core/Zoom';
 export { default as PinInput } from './core/PinInput';
 export { default as Chapter } from './core/Chapter';
+export { default as DataTable } from './core/DataTable';

package/index.js

@@ -94,6 +94,12 @@ Object.defineProperty(exports, "Content", {
     return _Content["default"];
   }
 });
+Object.defineProperty(exports, "DataTable", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable["default"];
+  }
+});
 Object.defineProperty(exports, "DateTime", {
   enumerable: true,
   get: function get() {
@@ -430,4 +436,5 @@ var _Tree = _interopRequireDefault(require("./core/Tree"));
 var _Typography = _interopRequireDefault(require("./core/Typography"));
 var _Zoom = _interopRequireDefault(require("./core/Zoom"));
 var _PinInput = _interopRequireDefault(require("./core/PinInput"));
-var _Chapter = _interopRequireDefault(require("./core/Chapter"));
+var _Chapter = _interopRequireDefault(require("./core/Chapter"));
+var _DataTable = _interopRequireDefault(require("./core/DataTable"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.26.1",
+    "version": "0.26.6",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",
@@ -24,7 +24,9 @@
         "docs:build": "build-storybook -o docs",
         "type-check": "tsc --noEmit",
         "deploy": "gh-pages -d docs",
-        "release": "yarn build && node pre-publish.js && npm publish ./dist --access public"
+        "release": "yarn build && node pre-publish.js && npm publish ./dist --access public",
+        "cy:run": "cypress run --component",
+        "cy:open": "cypress open --component"
     },
     "author": "NG Informática",
     "license": "MIT",
@@ -49,47 +51,66 @@
         "@babel/preset-env": "7.20.2",
         "@babel/preset-react": "7.18.6",
         "@babel/preset-typescript": "7.18.6",
+        "@cypress/code-coverage": "3.10.0",
+        "@cypress/react": "6.2.0",
         "@storybook/addon-actions": "6.5.13",
         "@storybook/addon-essentials": "6.5.13",
         "@storybook/addon-links": "6.5.13",
         "@storybook/builder-webpack5": "6.5.13",
         "@storybook/manager-webpack5": "6.5.13",
         "@storybook/react": "6.5.13",
-        "webpack": "5",
+        "@testing-library/cypress": "8.0.3",
         "@testing-library/react": "9.3.2",
+        "@types/cypress-cucumber-preprocessor": "4.0.1",
         "@types/faker": "5.5.3",
         "@types/jest": "24.0.22",
         "@types/node": "10.9.4",
         "@types/ramda": "0.25.36",
         "@types/react": "16.8.18",
+        "@types/react-router": "5.1.2",
+        "@types/react-router-dom": "5.1.2",
         "@types/styled-components": "4.4.2",
         "@types/uuid": "8.3.4",
-        "@typescript-eslint/eslint-plugin": "1.6.0",
-        "@typescript-eslint/parser": "1.6.0",
+        "@typescript-eslint/eslint-plugin": "5.44.0",
+        "@typescript-eslint/parser": "5.44.0",
         "babel-loader": "8.2.5",
-        "date-fns": "2.4.1",
         "babel-plugin-transform-class-properties": "6.24.1",
         "babel-plugin-transform-imports": "2.0.0",
-        "eslint": "5.16.0",
-        "eslint-config-prettier": "4.1.0",
-        "eslint-plugin-import": "2.16.0",
-        "eslint-plugin-prefer-arrow": "1.1.5",
+        "cypress": "12.0.2",
+        "cypress-cucumber-preprocessor": "4.3.1",
+        "cypress-plugin-tab": "^1.0.5",
+        "cypress-real-events": "^1.7.4",
+        "cypress-wait-until": "^1.7.2",
+        "date-fns": "2.4.1",
+        "eslint": "8.28.0",
+        "eslint-config-prettier": "8.5.0",
+        "eslint-plugin-cypress": "2.12.1",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-prefer-arrow": "1.2.3",
+        "eslint-plugin-prettier": "4.2.1",
         "eslint-plugin-ramda": "2.5.1",
-        "eslint-plugin-react": "7.12.4",
+        "eslint-plugin-react": "7.31.11",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "eslint-plugin-storybook": "0.6.7",
         "fs-extra": "7.0.0",
         "gh-pages": "2.0.0",
         "jest": "24.9.0",
         "node-fetch": "2.6.1",
-        "prettier": "1.16.4",
+        "node-polyfill-webpack-plugin": "2.0.1",
+        "prettier": "2.8.0",
         "react": "16.14.0",
         "react-dom": "16.14.0",
+        "react-router": "5.1.2",
+        "react-router-dom": "5.1.2",
         "styled-components": "5.0.0",
-        "typescript": "3.9.5"
+        "ts-loader": "9.4.1",
+        "typescript": "3.9.10",
+        "webpack": "5"
     },
     "peerDependencies": {
-        "react": "^16.8.0",
-        "styled-components": "^5.0.0",
-        "date-fns": "2.4.1"
+        "date-fns": "2.4.1",
+        "react": "16.8.0",
+        "styled-components": "5.0.0"
     },
     "jest": {
         "setupFilesAfterEnv": [
@@ -101,5 +122,9 @@
             "!dist/",
             "!/node_modules/"
         ]
+    },
+    "cypress-cucumber-preprocessor": {
+        "nonGlobalStepDefinitions": true,
+        "moduleResolution": "node"
     }
 }

package/stories/Chapter.stories.js

@@ -29,7 +29,7 @@ WithCustomStyle.args = {
   },
   variant: 'body1',
   typoStyle: {
-    'color': 'blue'
+    color: 'blue'
   },
   children: 'Chapter'
 };

package/stories/Collapse.stories.js

@@ -55,5 +55,5 @@ var Closed = Template.bind({});
 exports.Closed = Closed;
 Closed.args = {
   "in": false,
-  children: 'I\'m not open for discussions. Please don\'t insist.'
+  children: 'I am not open for discussions. Please do not insist.'
 };

package/stories/DataTable.stories.js

@@ -453,24 +453,28 @@ var Crud = function Crud() {
     data = _useState4[0],
     setData = _useState4[1];
   var handleAdd = function handleAdd() {
-    controllerRef.current.addRow({
+    var _controllerRef$curren;
+    (_controllerRef$curren = controllerRef.current) === null || _controllerRef$curren === void 0 ? void 0 : _controllerRef$curren.addRow({
       id: randomId(),
       date: date()
     });
   };
   var handleEdit = function handleEdit(id) {
     return function () {
-      controllerRef.current.editRow(id);
+      var _controllerRef$curren2;
+      (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === void 0 ? void 0 : _controllerRef$curren2.editRow(id);
     };
   };
   var handleDelete = function handleDelete(id) {
     return function () {
-      controllerRef.current.pushRowView(id, 'confirmDelete');
+      var _controllerRef$curren3;
+      (_controllerRef$curren3 = controllerRef.current) === null || _controllerRef$curren3 === void 0 ? void 0 : _controllerRef$curren3.pushRowView(id, 'confirmDelete');
     };
   };
   var handleView = function handleView(id) {
     return function () {
-      controllerRef.current.viewRow(id);
+      var _controllerRef$curren4;
+      (_controllerRef$curren4 = controllerRef.current) === null || _controllerRef$curren4 === void 0 ? void 0 : _controllerRef$curren4.viewRow(id);
     };
   };
   var isNullable = function isNullable(x) {
@@ -525,7 +529,8 @@ var Crud = function Crud() {
   var handleSave = function handleSave(id) {
     var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return function () {
-      var nextItem = controllerRef.current.getEditedRowData(id);
+      var _controllerRef$curren5, _controllerRef$curren6;
+      var nextItem = (_controllerRef$curren5 = controllerRef.current) === null || _controllerRef$curren5 === void 0 ? void 0 : _controllerRef$curren5.getEditedRowData(id);
       if (!nextItem) {
         return;
       }
@@ -546,7 +551,7 @@ var Crud = function Crud() {
           });
         });
       }
-      controllerRef.current.viewRow(id);
+      (_controllerRef$curren6 = controllerRef.current) === null || _controllerRef$curren6 === void 0 ? void 0 : _controllerRef$curren6.viewRow(id);
     };
   };
   var columns = [{
@@ -640,7 +645,8 @@ var Crud = function Crud() {
       }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
         label: "CheckIcon",
         onClick: function onClick() {
-          controllerRef.current.popRowView(data.id);
+          var _controllerRef$curren7;
+          (_controllerRef$curren7 = controllerRef.current) === null || _controllerRef$curren7 === void 0 ? void 0 : _controllerRef$curren7.popRowView(data.id);
           setData(function (dataList) {
             return dataList.filter(function (item) {
               return item.id !== data.id;
@@ -650,7 +656,8 @@ var Crud = function Crud() {
       }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
         label: "CancelIcon",
         onClick: function onClick() {
-          controllerRef.current.popRowView(data.id);
+          var _controllerRef$curren8;
+          (_controllerRef$curren8 = controllerRef.current) === null || _controllerRef$curren8 === void 0 ? void 0 : _controllerRef$curren8.popRowView(data.id);
         }
       }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)))));
     }

package/stories/DataTableQueryPaginated.stories.js

@@ -288,24 +288,28 @@ var Crud = function Crud() {
     return Math.random().toString(36).substr(0, 12);
   };
   var handleAdd = function handleAdd() {
-    controllerRef.current.addRow({
+    var _controllerRef$curren;
+    (_controllerRef$curren = controllerRef.current) === null || _controllerRef$curren === void 0 ? void 0 : _controllerRef$curren.addRow({
       id: randomId(),
       date: date()
     });
   };
   var handleEdit = function handleEdit(id) {
     return function () {
-      controllerRef.current.editRow(id);
+      var _controllerRef$curren2;
+      (_controllerRef$curren2 = controllerRef.current) === null || _controllerRef$curren2 === void 0 ? void 0 : _controllerRef$curren2.editRow(id);
     };
   };
   var handleDelete = function handleDelete(id) {
     return function () {
-      controllerRef.current.pushRowView(id, 'confirmDelete');
+      var _controllerRef$curren3;
+      (_controllerRef$curren3 = controllerRef.current) === null || _controllerRef$curren3 === void 0 ? void 0 : _controllerRef$curren3.pushRowView(id, 'confirmDelete');
     };
   };
   var handleView = function handleView(id) {
     return function () {
-      controllerRef.current.viewRow(id);
+      var _controllerRef$curren4;
+      (_controllerRef$curren4 = controllerRef.current) === null || _controllerRef$curren4 === void 0 ? void 0 : _controllerRef$curren4.viewRow(id);
     };
   };
   var isNullable = function isNullable(x) {
@@ -360,7 +364,8 @@ var Crud = function Crud() {
   var handleSave = function handleSave(id) {
     var isNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     return function () {
-      var nextItem = controllerRef.current.getEditedRowData(id);
+      var _controllerRef$curren5, _controllerRef$curren6;
+      var nextItem = (_controllerRef$curren5 = controllerRef.current) === null || _controllerRef$curren5 === void 0 ? void 0 : _controllerRef$curren5.getEditedRowData(id);
       if (!nextItem) {
         return;
       }
@@ -377,7 +382,7 @@ var Crud = function Crud() {
           return item;
         }));
       }
-      controllerRef.current.viewRow(id);
+      (_controllerRef$curren6 = controllerRef.current) === null || _controllerRef$curren6 === void 0 ? void 0 : _controllerRef$curren6.viewRow(id);
     };
   };
   var columns = [{
@@ -471,7 +476,8 @@ var Crud = function Crud() {
       }, /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
         label: "CheckIcon",
         onClick: function onClick() {
-          controllerRef.current.popRowView(data.id);
+          var _controllerRef$curren7;
+          (_controllerRef$curren7 = controllerRef.current) === null || _controllerRef$curren7 === void 0 ? void 0 : _controllerRef$curren7.popRowView(data.id);
           setData(function (dataList) {
             return dataList.filter(function (item) {
               return item.id !== data.id;
@@ -481,7 +487,8 @@ var Crud = function Crud() {
       }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null)), /*#__PURE__*/_react["default"].createElement(_DataTableAction.DataTableAction, {
         label: "CancelIcon",
         onClick: function onClick() {
-          controllerRef.current.popRowView(data.id);
+          var _controllerRef$curren8;
+          (_controllerRef$curren8 = controllerRef.current) === null || _controllerRef$curren8 === void 0 ? void 0 : _controllerRef$curren8.popRowView(data.id);
         }
       }, /*#__PURE__*/_react["default"].createElement(_Cancel["default"], null)))));
     }

package/stories/Dialog.stories.js

@@ -30,7 +30,7 @@ var Default = function Default() {
   }, "Open dialog"), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
     open: open,
     title: "My beautiful Dialog",
-    text: 'Isn\'t it?',
+    text: 'Is not it?',
     onClose: function onClose() {
       return setOpen(false);
     },
@@ -58,7 +58,7 @@ var WithAlertOnClose = function WithAlertOnClose() {
   }, "Open dialog"), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
     open: open,
     title: "My beautiful Dialog",
-    text: 'Isn\'t it?',
+    text: 'Is not it?',
     onClose: handleClose,
     actions: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       onClick: function onClick() {

package/stories/Slider.stories.js

@@ -51,7 +51,7 @@ WithMarks.args = {
     label: 'Start'
   }, {
     value: 50,
-    label: 'You\'re half way'
+    label: 'You are half way'
   }, {
     value: 100,
     label: 'Finish'

package/stories/TextField.stories.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withSelectAndClear = exports.withSelect = exports.withInputAdornment = exports.withHelperButton = exports["default"] = exports.Default = void 0;
+exports.withSelect = exports.withInputAdornment = exports.withHelperButton = exports.useWithSelectAndClear = exports["default"] = exports.Default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _TextField = _interopRequireDefault(require("../core/TextField"));
@@ -91,7 +91,7 @@ var withSelect = function withSelect() {
   })));
 };
 exports.withSelect = withSelect;
-var withSelectAndClear = function withSelectAndClear() {
+var useWithSelectAndClear = function useWithSelectAndClear() {
   var _useState = (0, _react.useState)('fable'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     value = _useState2[0],
@@ -132,4 +132,4 @@ var withSelectAndClear = function withSelectAndClear() {
     }, label);
   })));
 };
-exports.withSelectAndClear = withSelectAndClear;
+exports.useWithSelectAndClear = useWithSelectAndClear;