@punch-in/buffet-modern-custom 3.3.11

package/src/components/DateTime/index.js

@@ -0,0 +1,150 @@
+/**
+ *
+ * DateTime
+ *
+ */
+
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import momentPropTypes from 'react-moment-proptypes';
+import { isEmpty, cloneDeep } from 'lodash';
+import { DatePicker, TimePicker } from '@punch-in/buffet-modern-core';
+import Wrapper from './Wrapper';
+
+const UNITS = ['hour', 'minute', 'second'];
+export const getTimeString = time => {
+  if (!time) {
+    return '';
+  }
+
+  const currTime = time || moment();
+
+  const timeObj = getTimeObject(currTime);
+  const timeString = Object.keys(timeObj)
+    .map(key => (timeObj[key] < 10 ? `0${timeObj[key]}` : timeObj[key]))
+    .join(':');
+
+  return timeString;
+};
+export const getTimeObject = time => {
+  const timeObj = {};
+
+  UNITS.forEach(unit => {
+    timeObj[unit] = time.get(unit);
+  });
+
+  return timeObj;
+};
+
+function DateTime({
+  disabled,
+  name,
+  onChange,
+  value,
+  tabIndex,
+  step,
+  ...rest
+}) {
+  const [timestamp, setTimestamp] = useState(null);
+
+  const setData = time => {
+    const [hour, minute, second] = time.split(':');
+    const timeObj = {
+      hour,
+      minute,
+      second,
+    };
+
+    const currentDate = isEmpty(timestamp) ? moment() : cloneDeep(timestamp);
+    currentDate.set('hours', timeObj.hour);
+    currentDate.set('minute', timeObj.minute);
+    currentDate.set('second', timeObj.second);
+
+    setDate(currentDate);
+  };
+  const setDate = (date, time) => {
+    // Clearing the date
+    if (date === null) {
+      setTimestamp(null);
+
+      onChange({ target: { name, type: 'datetime', value: null } });
+
+      return;
+    }
+
+    const newDate = time || date;
+    date.set(getTimeObject(newDate));
+    date.toISOString();
+    date.format();
+
+    setTimestamp(date);
+
+    onChange({ target: { name, type: 'datetime', value: date } });
+  };
+
+  useEffect(() => {
+    if (!!value && moment(value).isValid()) {
+      const newDate = value._isAMomentObject === true ? value : moment(value);
+
+      setTimestamp(newDate);
+    }
+  }, [value]);
+
+  return (
+    <Wrapper>
+      <DatePicker
+        {...rest}
+        name="datetime"
+        disabled={disabled}
+        onChange={({ target }) => {
+          setDate(target.value, timestamp);
+        }}
+        tabIndex={tabIndex}
+        value={timestamp}
+      />
+      <TimePicker
+        name="time"
+        disabled={disabled}
+        onChange={({ target }) => {
+          setData(target.value);
+        }}
+        seconds={false}
+        tabIndex={tabIndex}
+        value={getTimeString(timestamp) || ''}
+        step={step}
+      />
+    </Wrapper>
+  );
+}
+
+DateTime.defaultProps = {
+  autoFocus: false,
+  disabled: false,
+  id: null,
+  onChange: () => {},
+  placeholder: null,
+  tabIndex: '0',
+  value: null,
+  withDefaultValue: false,
+  step: 30,
+};
+
+DateTime.propTypes = {
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  step: PropTypes.number,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([
+    momentPropTypes.momentObj,
+    PropTypes.string,
+    PropTypes.instanceOf(Date),
+  ]),
+  withDefaultValue: PropTypes.bool,
+};
+
+export default DateTime;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import moment from 'moment';
+import { act } from 'react-dom/test-utils';
+import { DatePicker, TimePicker } from '@punch-in/buffet-modern-core';
+
+import DateTime from '../index';
+
+describe('<DateTime />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', () => {
+    mount(<DateTime name="datetime" value={null} />);
+  });
+
+  it('Should set the date with moment if a string value is given', () => {
+    const value = '2019-03-25T17:14:01.192';
+    const props = { name: 'datetime', value };
+    const renderedComponent = mount(<DateTime {...props} />);
+    const datepicker = renderedComponent.find(DatePicker);
+
+    expect(datepicker.prop('value')).toEqual(moment(value));
+  });
+
+  it('Should not set the date with moment if a moment value is given', () => {
+    const value = moment();
+    const props = { name: 'datetime', value };
+    const renderedComponent = mount(<DateTime {...props} />);
+    const datepicker = renderedComponent.find(DatePicker);
+
+    expect(datepicker.prop('value')).toEqual(value);
+  });
+
+  it('Should change the date and keep the current time', () => {
+    const value = moment('2019-02-20');
+    value.set('hour', 11);
+    value.set('minute', 11);
+    value.set('second', 11);
+
+    const props = {
+      name: 'datetime',
+      onChange: jest.fn(),
+      value,
+    };
+    const renderedComponent = mount(<DateTime {...props} />);
+    const datepicker = renderedComponent.find(DatePicker);
+    const updatedValue = moment('2019-03-20T10:10:10.000');
+
+    act(() => {
+      datepicker.props().onChange({ target: { value: updatedValue } }, value);
+    });
+
+    const expected = updatedValue
+      .set('hour', 11)
+      .set('minute', 11)
+      .set('second', 11);
+
+    expect(renderedComponent.prop('onChange')).toHaveBeenLastCalledWith({
+      target: {
+        name: 'datetime',
+        type: 'datetime',
+        value: expected,
+      },
+    });
+  });
+
+  it('Should change the time and not the date', () => {
+    const value = moment('2019-02-20');
+    value.set('hour', 11);
+    value.set('minute', 11);
+    value.set('second', 11);
+
+    const props = {
+      name: 'datetime',
+      onChange: jest.fn(),
+      value,
+    };
+    const renderedComponent = mount(<DateTime {...props} />);
+    const timepicker = renderedComponent.find(TimePicker);
+
+    const mock = { target: { value: '10' } };
+
+    act(() => {
+      timepicker.props().onChange(mock);
+    });
+
+    const expected = value
+      .set('hour', 10)
+      .set('minute', 11)
+      .set('second', 11);
+
+    expect(renderedComponent.prop('onChange')).toHaveBeenLastCalledWith({
+      target: {
+        name: 'datetime',
+        type: 'datetime',
+        value: expected,
+      },
+    });
+  });
+});

package/src/components/Header/index.js

@@ -0,0 +1,84 @@
+/**
+ *
+ * Header
+ *
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { HeaderTitle, HeaderActions } from '@punch-in/buffet-modern-core';
+import { Header as Wrapper, LoadingBar } from '@punch-in/buffet-modern';
+
+function Header({ actions, content, isLoading, stickable, title }) {
+  const [isHeaderSticky, setHeaderSticky] = useState(false);
+  const headerRef = useRef(null);
+
+  const { label, cta } = title;
+
+  const handleScroll = () => {
+    if (headerRef.current) {
+      setHeaderSticky(headerRef.current.getBoundingClientRect().top <= 20);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', () => handleScroll);
+    };
+  }, []);
+
+  return (
+    <Wrapper ref={headerRef}>
+      <div
+        className={`sticky-wrapper${
+          isHeaderSticky && stickable ? ' sticky' : ''
+        }`}
+      >
+        <div className="row">
+          <div className="col-sm-6 header-title">
+            <HeaderTitle title={label} cta={cta} />
+            {isLoading ? <LoadingBar /> : <p>{content}</p>}
+          </div>
+          <div className="col-sm-6 justify-content-end">
+            <HeaderActions actions={actions} />
+          </div>
+        </div>
+      </div>
+    </Wrapper>
+  );
+}
+
+Header.defaultProps = {
+  actions: [],
+  content: null,
+  isLoading: false,
+  stickable: true,
+  title: {
+    label: null,
+    cta: null,
+  },
+};
+
+Header.propTypes = {
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      onClick: PropTypes.func,
+      title: PropTypes.string,
+    })
+  ),
+  content: PropTypes.string,
+  isLoading: PropTypes.bool,
+  stickable: PropTypes.bool,
+  title: PropTypes.shape({
+    cta: PropTypes.shape({
+      icon: PropTypes.string,
+      onClick: PropTypes.func,
+    }),
+    label: PropTypes.string,
+  }),
+};
+
+export default Header;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { HeaderTitle } from '@punch-in/buffet-modern-core';
+import { LoadingBar } from '@punch-in/buffet-modern';
+
+import Header from '../index';
+
+const defaultProps = {
+  title: { label: 'Restaurant', cta: { icon: 'fa fa-pen', onClick: () => {} } },
+  content: 'restaurant description',
+  callToAction: [],
+};
+const renderComponent = (props = defaultProps) => mount(<Header {...props} />);
+
+describe('<Header />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  it('should render title and subtitle', () => {
+    const compo = renderComponent();
+    const titles = compo.find('.header-title');
+
+    const title = titles.find(HeaderTitle);
+    expect(title.contains('Restaurant')).toEqual(true);
+
+    const subtitle = titles.find('p');
+    expect(subtitle.text()).toEqual('restaurant description');
+  });
+
+  it('should not render a LoadingBar if isLoading is false', () => {
+    const wrapper = renderComponent();
+
+    expect(wrapper.find(LoadingBar).exists()).toEqual(false);
+  });
+
+  it('should render a LoadingBar if isLoading is true', () => {
+    const wrapper = renderComponent({
+      ...defaultProps,
+      isLoading: true,
+    });
+
+    expect(wrapper.find(LoadingBar).exists()).toEqual(true);
+  });
+});

package/src/components/Inputs/Wrapper.js

@@ -0,0 +1,47 @@
+/**
+ *
+ * Wrapper
+ *
+ */
+
+import styled, { css } from 'styled-components';
+import { colors, sizes } from '@punch-in/buffet-modern';
+
+const Wrapper = styled.div`
+  position: relative;
+  padding-bottom: ${sizes.margin * 2.7}px;
+  label {
+    display: block;
+    margin-bottom: 1rem;
+  }
+  > p {
+    width: 100%;
+    padding-top: 10px;
+    font-size: 13px;
+    line-height: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: -8px;
+  }
+  input[type='checkbox'] {
+    margin-bottom: 13px;
+  }
+  ${({ error }) =>
+    !!error &&
+    css`
+      input,
+      textarea,
+      select {
+        border-color: ${colors.darkOrange};
+      }
+    `}
+`;
+
+const IconWrapper = styled.span`
+  margin-left: 5px;
+  cursor: pointer;
+`;
+
+export default Wrapper;
+export { IconWrapper };

package/src/components/Inputs/index.js

@@ -0,0 +1,221 @@
+/**
+ *
+ * Inputs
+ *
+ */
+
+import React, { useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { get, isEmpty, isFunction, isUndefined } from 'lodash';
+import {
+  DatePicker,
+  Checkbox,
+  Enumeration,
+  Error,
+  InputNumber,
+  InputText,
+  Label,
+  Select,
+  Textarea,
+  TimePicker,
+  Toggle,
+  UnknownInput,
+} from '@punch-in/buffet-modern-core';
+import { Description, ErrorMessage, Tooltip } from '@punch-in/buffet-modern';
+
+import DateTime from '../DateTime';
+import Wrapper, { IconWrapper } from './Wrapper';
+/* eslint-disable react/forbid-prop-types */
+
+const inputs = {
+  bool: Toggle,
+  checkbox: Checkbox,
+  date: DatePicker,
+  datetime: DateTime,
+  enum: Enumeration,
+  number: InputNumber,
+  text: InputText,
+  textarea: Textarea,
+  time: TimePicker,
+  select: Select,
+  email: InputText,
+  password: InputText,
+  search: InputText,
+};
+
+function Inputs({
+  customInputs,
+  description,
+  error: inputError,
+  id,
+  label,
+  name,
+  onBlur: handleBlur,
+  onChange,
+  translatedErrors,
+  type,
+  validations,
+  value,
+  ...rest
+}) {
+  const [isOver, setIsOver] = useState(false);
+
+  const inputValue = useMemo(() => {
+    let ret;
+
+    switch (type) {
+      case 'checkbox':
+        ret = value || false;
+        break;
+      case 'bool':
+        ret = value;
+        break;
+      case 'number':
+        ret = isUndefined(value) ? '' : value;
+        break;
+      default:
+        ret = value || '';
+    }
+
+    return ret;
+  }, [type, value]);
+
+  const allInputs = useRef(Object.assign(inputs, customInputs));
+  const InputComponent = allInputs.current[type] || UnknownInput;
+  const inputId = useMemo(() => id || name, [id, name]);
+  const descriptionId = `description-${inputId}`;
+  const errorId = `error-${inputId}`;
+  const handleMouseEvent = () => {
+    setIsOver(prev => !prev);
+  };
+
+  if (get(customInputs, type, null) !== null) {
+    return (
+      <InputComponent
+        description={description}
+        error={inputError}
+        label={label}
+        name={name}
+        onBlur={handleBlur}
+        onChange={onChange}
+        type={type}
+        validations={validations}
+        value={value}
+        {...rest}
+      />
+    );
+  }
+
+  return (
+    <Error
+      inputError={inputError}
+      name={name}
+      translatedErrors={translatedErrors}
+      type={type}
+      validations={validations}
+    >
+      {({ canCheck, onBlur, error, dispatch }) => (
+        <Wrapper error={error}>
+          {type !== 'checkbox' && (
+            <Label htmlFor={inputId}>
+              <span>
+                {label}
+                {isEmpty(label) && <>&nbsp;</>}
+              </span>
+              {rest.labelIcon && (
+                <>
+                  <IconWrapper
+                    data-tip={rest.labelIcon.title}
+                    data-for="icon-title"
+                    onMouseEnter={handleMouseEvent}
+                    onMouseLeave={handleMouseEvent}
+                  >
+                    {rest.labelIcon.icon}
+                  </IconWrapper>
+                  {isOver && <Tooltip id="icon-title" />}
+                </>
+              )}
+            </Label>
+          )}
+          <InputComponent
+            {...rest}
+            message={label} // Only for the checkbox
+            name={name}
+            id={inputId}
+            aria-describedby={`${!error && description ? descriptionId : ''} ${
+              error ? errorId : ''
+            }`}
+            aria-invalid={error ? 'true' : 'false'}
+            onBlur={isFunction(handleBlur) ? handleBlur : onBlur}
+            onChange={e => {
+              if (!canCheck) {
+                dispatch({
+                  type: 'SET_CHECK',
+                });
+              }
+
+              dispatch({
+                type: 'SET_ERROR',
+                error: null,
+              });
+              onChange(e);
+            }}
+            type={type}
+            value={inputValue}
+          />
+          {!error && description && (
+            <Description id={descriptionId} title={description}>
+              {description}
+            </Description>
+          )}
+          {error && <ErrorMessage id={errorId}>{error}</ErrorMessage>}
+        </Wrapper>
+      )}
+    </Error>
+  );
+}
+
+Inputs.defaultProps = {
+  customInputs: null,
+  description: null,
+  id: null,
+  error: null,
+  label: null,
+  labelIcon: null,
+  onBlur: null,
+  onChange: () => {},
+  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',
+  },
+  validations: {},
+  value: null,
+};
+
+Inputs.propTypes = {
+  customInputs: PropTypes.object,
+  description: PropTypes.string,
+  error: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string,
+  labelIcon: PropTypes.shape({ icon: PropTypes.any, title: PropTypes.string }),
+  name: PropTypes.string.isRequired,
+  onBlur: PropTypes.func,
+  onChange: () => {},
+  translatedErrors: PropTypes.objectOf(PropTypes.string),
+  type: PropTypes.string.isRequired,
+  validations: PropTypes.object,
+  value: PropTypes.any,
+};
+
+export default Inputs;

package/src/components/List/index.js

@@ -0,0 +1,62 @@
+/**
+ *
+ * List
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  List as ListCompo,
+  ListHeader,
+  Padded,
+} from '@punch-in/buffet-modern-core';
+import { Card } from '@punch-in/buffet-modern';
+
+function List({
+  title,
+  subtitle,
+  button,
+  isLoading,
+  items,
+  customRowComponent,
+  ...props
+}) {
+  return (
+    <Card {...props}>
+      <Padded right left size="md">
+        <ListHeader title={title} subtitle={subtitle} button={button} />
+      </Padded>
+      <ListCompo
+        items={items}
+        isLoading={isLoading}
+        customRowComponent={customRowComponent}
+      />
+    </Card>
+  );
+}
+
+List.defaultProps = {
+  button: null,
+  customRowComponent: null,
+  isLoading: false,
+  items: [],
+  title: null,
+  subtitle: null,
+};
+
+List.propTypes = {
+  button: PropTypes.shape({
+    color: PropTypes.string,
+    icon: PropTypes.bool,
+    type: PropTypes.string,
+  }),
+  customRowComponent: PropTypes.func,
+  isLoading: PropTypes.bool,
+  items: PropTypes.instanceOf(Array),
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
+};
+
+export default List;