@punch-in/buffet-modern-core 3.3.11

package/src/components/Enumeration/tests/index.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Enumeration from '../index';
+
+const defaultProps = {
+  name: 'enumeration',
+  type: 'radio',
+  options: [
+    {
+      value: 'first',
+      label: 'first option',
+    },
+    {
+      value: 'second',
+      label: 'second option',
+    },
+    {
+      value: 'third',
+      label: 'third option',
+    },
+  ],
+};
+const renderComponent = (props = defaultProps) =>
+  mount(<Enumeration {...props} />);
+
+describe('<Enumeration />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  it('should use the defaultProps', () => {
+    const {
+      defaultProps: { onChange },
+    } = Enumeration;
+
+    expect(onChange).toBeDefined();
+    expect(onChange({ preventDefault: jest.fn() })).toBe(undefined);
+  });
+});

package/src/components/Error/index.js

@@ -0,0 +1,118 @@
+/**
+ *
+ * Error
+ *
+ */
+
+import React, { useEffect, useReducer, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+
+import { createYupSchema } from '@punch-in/buffet-modern-utils';
+import reducer from './reducer';
+
+function Error({
+  children,
+  inputError,
+  translatedErrors,
+  type,
+  validations,
+  value,
+}) {
+  const [state, dispatch] = useReducer(reducer, {
+    error: false,
+    canCheck: !isEmpty(value),
+  });
+
+  const ref = useRef();
+
+  useEffect(() => {
+    dispatch({
+      type: 'SET_ERROR',
+      error: inputError,
+    });
+  }, [inputError]);
+
+  const { error, canCheck } = state;
+
+  const resetError = () => {
+    if (!ref.current) {
+      return;
+    }
+
+    dispatch({
+      type: 'SET_ERROR',
+      error: null,
+    });
+  };
+
+  const setError = message => {
+    if (!ref.current) {
+      return;
+    }
+
+    dispatch({
+      type: 'SET_ERROR',
+      error: message,
+    });
+  };
+
+  const handleBlur = async ({ target }) => {
+    if (canCheck) {
+      try {
+        await createYupSchema(type, validations, translatedErrors).validate(
+          target.value
+        );
+        resetError();
+      } catch (err) {
+        const { message } = err;
+        setError(message);
+      }
+    }
+  };
+
+  if (children) {
+    return (
+      <>
+        {children({
+          canCheck,
+          dispatch,
+          error,
+          onBlur: handleBlur,
+        })}
+        <span style={{ display: 'none' }} ref={ref} />
+      </>
+    );
+  }
+}
+
+Error.defaultProps = {
+  children: () => {},
+  translatedErrors: {
+    date: 'This is not a date',
+    email: 'This is not an email',
+    string: 'This is not a string',
+    number: 'This is not a number',
+    json: 'This is not a JSON',
+    max: 'This is too high',
+    maxLength: 'This is too long',
+    min: 'This is too small',
+    minLength: 'This is too short',
+    required: 'This value is required',
+    regex: 'This does not match the format',
+    uppercase: 'This must be a upper case string',
+  },
+  type: null,
+  validations: {},
+  value: null,
+};
+
+Error.propTypes = {
+  children: PropTypes.func,
+  translatedErrors: PropTypes.objectOf(PropTypes.string),
+  type: PropTypes.string,
+  validations: PropTypes.objectOf(PropTypes.any),
+  value: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+};
+
+export default Error;

package/src/components/Error/reducer.js

@@ -0,0 +1,14 @@
+function reducer(state, action) {
+  const { error, type } = action;
+
+  switch (type) {
+    case 'SET_ERROR':
+      return { ...state, error };
+    case 'SET_CHECK':
+      return { ...state, canCheck: true };
+    default:
+      return state;
+  }
+}
+
+export default reducer;

package/src/components/Flex/index.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const Flex = styled.div`
+  display: flex;
+  justify-content: ${({ justifyContent }) => justifyContent};
+  flex-direction: ${({ flexDirection }) => flexDirection};
+  align-items: ${({ alignItems }) => alignItems};
+  flex-wrap: ${({ flexWrap }) => flexWrap};
+`;
+
+Flex.defaultProps = {
+  justifyContent: 'normal',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'normal',
+};
+
+Flex.propTypes = {
+  flexDirection: PropTypes.string,
+  flexWrap: PropTypes.string,
+  justifyContent: PropTypes.string,
+};
+
+export default Flex;

package/src/components/Flex/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Flex /> should match snapshot 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: normal;
+  -webkit-justify-content: normal;
+  -ms-flex-pack: normal;
+  justify-content: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+<div
+  className="c0"
+/>
+`;

package/src/components/Flex/tests/index.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Flex from '../index';
+
+describe('<Flex />', () => {
+  it('should match snapshot', () => {
+    const tree = renderer.create(<Flex />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/HeaderActions/index.js

@@ -0,0 +1,52 @@
+/**
+ *
+ * HeaderActions
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HeaderActions as Wrapper } from '@punch-in/buffet-modern';
+
+import Button from '../Button';
+
+function HeaderActions({ actions }) {
+  return (
+    <Wrapper>
+      {actions.map((action, index) => {
+        const { Component, disabled, label, onClick } = action;
+
+        if (Component) {
+          return <Component {...action} key={action.key || index} />;
+        }
+
+        return (
+          <Button
+            key={label}
+            onClick={onClick}
+            disabled={disabled || false}
+            {...action}
+          >
+            {label}
+          </Button>
+        );
+      })}
+    </Wrapper>
+  );
+}
+
+HeaderActions.defaultProps = {
+  actions: [],
+};
+
+HeaderActions.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      disabled: PropTypes.bool,
+      onClick: PropTypes.func,
+      title: PropTypes.string,
+    })
+  ),
+};
+
+export default HeaderActions;

package/src/components/HeaderActions/tests/index.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import HeaderActions from '../index';
+
+const defaultProps = {};
+const renderComponent = (props = defaultProps) =>
+  mount(<HeaderActions {...props} />);
+
+describe('<HeaderActions />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('should not crash', () => {
+    renderComponent();
+  });
+});

package/src/components/HeaderTitle/index.js

@@ -0,0 +1,59 @@
+/**
+ *
+ * HeaderTitle
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { upperFirst } from 'lodash';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+
+import { HeaderTitle as Wrapper } from '@punch-in/buffet-modern';
+
+function HeaderTitle({ title, children, cta }) {
+  const content = upperFirst(title) || children;
+  const renderCTA = () => {
+    if (cta) {
+      const { onClick } = cta;
+
+      return (
+        <FontAwesomeIcon
+          icon={faPencilAlt}
+          onClick={onClick}
+          role="button"
+          tabIndex="0"
+          size="sm"
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Wrapper>
+      <h1>
+        {content}
+        {renderCTA()}
+      </h1>
+    </Wrapper>
+  );
+}
+
+HeaderTitle.defaultProps = {
+  children: null,
+  cta: null,
+  title: null,
+};
+
+HeaderTitle.propTypes = {
+  children: PropTypes.node,
+  cta: PropTypes.shape({
+    onClick: PropTypes.func,
+  }),
+  title: PropTypes.string,
+};
+
+export default HeaderTitle;

package/src/components/HeaderTitle/tests/index.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import HeaderTitle from '../index';
+
+const defaultProps = {};
+const renderComponent = (props = defaultProps) =>
+  mount(<HeaderTitle {...props} />);
+
+describe('<HeaderTitle />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('should not crash', () => {
+    renderComponent();
+  });
+});

package/src/components/Icon/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  faSearch,
+  faEye,
+  faAngleLeft,
+  faAngleRight,
+  faPencilAlt,
+  faSortDown,
+  faSortUp,
+  faTrashAlt,
+  faPlus,
+} from '@fortawesome/free-solid-svg-icons';
+import { faClock } from '@fortawesome/free-regular-svg-icons';
+import { Icon as StyledIcon } from '@punch-in/buffet-modern';
+
+const iconMap = new Map([
+  ['time', faClock],
+  ['password', faEye],
+  ['search', faSearch],
+  ['left', faAngleLeft],
+  ['right', faAngleRight],
+  ['pencil', faPencilAlt],
+  ['asc', faSortUp],
+  ['desc', faSortDown],
+  ['trash', faTrashAlt],
+  ['plus', faPlus],
+]);
+
+function Icon({ icon, className }) {
+  if (iconMap.has(icon)) {
+    return (
+      <StyledIcon icon={iconMap.get(icon)} className={className || undefined} />
+    );
+  }
+
+  return icon || null;
+}
+
+Icon.defaultProps = {
+  className: null,
+  icon: 'search',
+};
+
+Icon.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+};
+
+export default Icon;

package/src/components/Icon/tests/Icon.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { mount } from 'enzyme';
+// import renderer from 'react-test-renderer';
+import Icon from '../index';
+
+let renderedComponent;
+const renderComponent = (props = {}) => mount(<Icon {...props} />);
+
+describe('<Icon />', () => {
+  describe('<Icon /> attributes', () => {
+    afterEach(() => {
+      renderedComponent.unmount();
+    });
+
+    it('should have a default icon equals to search', () => {
+      renderedComponent = renderComponent({ icon: 'search' });
+      const defaultType = 'search';
+      expect(renderedComponent.at(0).prop('icon')).toBe(defaultType);
+    });
+  });
+  // NOTE: disabling this test
+  // describe('<Icon /> icon attributes', () => {
+  //   it('should render the search icon', () => {
+  //     const tree = renderer.create(<Icon icon="search" />).toJSON();
+  //     expect(tree).toMatchSnapshot();
+  //   });
+
+  //   it('should render the password icon', () => {
+  //     const tree = renderer.create(<Icon icon="password" />).toJSON();
+  //     expect(tree).toMatchSnapshot();
+  //   });
+  // });
+});

package/src/components/IconLinks/index.js

@@ -0,0 +1,39 @@
+/* eslint-disable react/no-array-index-key */
+/**
+ *
+ * IconLinks
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Links as StyledLinks } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+
+function IconLinks({ links }) {
+  return (
+    <StyledLinks>
+      {links.map(({ icon, onClick }, index) => (
+        <button key={index} onClick={onClick} type="button">
+          <Icon className="link-icon" icon={icon} />
+        </button>
+      ))}
+    </StyledLinks>
+  );
+}
+
+IconLinks.defaultProps = {
+  links: [],
+};
+
+IconLinks.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      icon: PropTypes.node,
+      onClick: PropTypes.func,
+    })
+  ),
+};
+
+export default IconLinks;

package/src/components/IconLinks/tests/index.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import IconLinks from '../index';
+
+describe('<IconLinks />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', () => {
+    mount(<IconLinks />);
+  });
+
+  it('Should render some icons', () => {
+    const icons = [{ icon: 'trash', onClick: jest.fn() }];
+    const renderedComponent = mount(<IconLinks links={icons} />);
+    const buttons = renderedComponent.find('button');
+
+    buttons.at(0).simulate('click');
+
+    expect(icons[0].onClick).toHaveBeenCalled();
+    expect(
+      buttons
+        .at(0)
+        .find('svg')
+        .prop('className')
+    ).toContain('trash');
+  });
+});

package/src/components/InputNumber/index.js

@@ -0,0 +1,74 @@
+/**
+ *
+ * InputNumber
+ *
+ */
+
+import React from 'react';
+import RcInputNumber from 'rc-input-number';
+import PropTypes from 'prop-types';
+import { InputNumber as StyledInputNumber } from '@punch-in/buffet-modern';
+
+function InputNumber({
+  autoFocus,
+  id,
+  className,
+  name,
+  onChange,
+  tabIndex,
+  value,
+  ...rest
+}) {
+  const handleChange = data => {
+    if (data !== null) {
+      const target = {
+        id,
+        name,
+        type: 'number',
+        value: data,
+      };
+
+      onChange({ target });
+    }
+  };
+
+  return (
+    <StyledInputNumber className={className}>
+      <RcInputNumber
+        {...rest}
+        autoFocus={autoFocus}
+        id={id || name}
+        name={name}
+        onChange={handleChange}
+        tabIndex={tabIndex}
+        value={value}
+        className="inputNumber"
+      />
+    </StyledInputNumber>
+  );
+}
+
+InputNumber.defaultProps = {
+  autoComplete: 'off',
+  autoFocus: false,
+  className: null,
+  id: null,
+  onChange: () => {},
+  placeholder: null,
+  tabIndex: '0',
+  value: 0,
+};
+
+InputNumber.propTypes = {
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default InputNumber;

package/src/components/InputText/PrefixIcon.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IconText, IconWrapper } from '@punch-in/buffet-modern';
+
+import Icon from '../Icon';
+
+function PrefixIcon({ type, icon }) {
+  if (icon) {
+    return (
+      <IconWrapper>
+        <Icon icon={icon} />
+      </IconWrapper>
+    );
+  }
+  if (type === 'search') {
+    return (
+      <IconWrapper>
+        <Icon icon={type} />
+      </IconWrapper>
+    );
+  }
+  if (type === 'email') {
+    return <IconText text="@" />;
+  }
+
+  return null;
+}
+
+PrefixIcon.defaultProps = {
+  icon: null,
+};
+
+PrefixIcon.propTypes = {
+  icon: PropTypes.node,
+  type: PropTypes.string.isRequired,
+};
+
+export default PrefixIcon;