@punch-in/buffet-modern-core 3.3.11

package/src/components/Text/index.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import colors from '../../theme/colors';
+
+const Text = styled.p`
+  margin: 0;
+  line-height: ${({ lineHeight }) => lineHeight};
+  color: ${({ theme, color }) => theme.main.colors[color] || color};
+  font-size: ${({ theme, fontSize }) => theme.main.sizes.fonts[fontSize]};
+  font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]};
+  text-transform: ${({ textTransform }) => textTransform};
+  ${({ ellipsis }) =>
+    ellipsis &&
+    `
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `}
+`;
+
+Text.defaultProps = {
+  color: 'greyDark',
+  ellipsis: false,
+  fontSize: 'md',
+  fontWeight: 'regular',
+  lineHeight: 'normal',
+  textTransform: 'none',
+  // TODO : This is temporary
+  theme: {
+    main: {
+      colors,
+      sizes: {
+        fonts: {
+          xs: '11px',
+          sm: '12px',
+          md: '13px',
+          lg: '18px',
+          xl: '24px',
+        },
+      },
+      fontWeights: {
+        regular: 400,
+        semiBold: 500,
+        bold: 600,
+        black: 900,
+      },
+    },
+  },
+};
+
+Text.propTypes = {
+  color: PropTypes.string,
+  ellipsis: PropTypes.bool,
+  fontSize: PropTypes.string,
+  fontWeight: PropTypes.string,
+  lineHeight: PropTypes.string,
+  textTransform: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  theme: PropTypes.object,
+};
+
+export default Text;

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Text /> should match snapshot 1`] = `
+.c0 {
+  margin: 0;
+  line-height: normal;
+  color: #292b2c;
+  font-size: 13px;
+  font-weight: 400;
+  text-transform: none;
+}
+
+<p
+  className="c0"
+  color="greyDark"
+  fontSize="md"
+  fontWeight="regular"
+/>
+`;

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

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

package/src/components/Textarea/index.js

@@ -0,0 +1,19 @@
+/**
+ *
+ * Textarea
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Textarea as StyledTextArea } from '@punch-in/buffet-modern';
+
+function Textarea(props) {
+  return <StyledTextArea {...props} />;
+}
+
+Textarea.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default Textarea;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Textarea from '../index';
+
+let renderedComponent;
+const initProps = {
+  name: 'textarea',
+  onChange: jest.fn(),
+  value: '',
+};
+const renderComponent = (props = initProps) => mount(<Textarea {...props} />);
+
+describe('<Textarea />', () => {
+  afterEach(() => {
+    renderedComponent.unmount();
+  });
+
+  it('should have a placeholder undefined if not specified', () => {
+    renderedComponent = renderComponent();
+    expect(renderedComponent.at(0).prop('placeholder')).toBe(undefined);
+  });
+});

package/src/components/TimePicker/index.js

@@ -0,0 +1,328 @@
+/**
+ *
+ * TimePicker
+ *
+ */
+
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+  useMemo,
+} from 'react';
+import { isInteger, toNumber } from 'lodash';
+import PropTypes from 'prop-types';
+
+import {
+  IconWrapper,
+  TimePicker as StyledTimePicker,
+  TimePickerWrapper,
+  TimeList,
+} from '@punch-in/buffet-modern';
+import {
+  useEventListener,
+  useShortcutEffect,
+} from '@punch-in/buffet-modern-hooks';
+import Icon from '../Icon';
+
+const MINUTES_IN_HOUR = 60;
+
+// Returns string with two digits padded at start with 0
+const pad = num => `0${num}`.substr(-2);
+
+// Convert time array to formatted time string
+export const timeFormatter = time => {
+  const newTime = Array(3)
+    .fill('00')
+    .concat(splitArray(time))
+    .reverse();
+  newTime.length = 3;
+
+  return format(newTime).join(':');
+};
+
+// Convert time string to time array
+const splitArray = string => {
+  if (isInteger(toNumber(string)) && string) {
+    const stringFormat = string.length === 3 ? `0${string}` : string;
+
+    return stringFormat.match(/.{1,2}/g).reverse();
+  }
+
+  const lowercase = string ? string.toLowerCase() : '0';
+  const array = lowercase.includes('h')
+    ? lowercase.split('h')
+    : lowercase.split(':');
+
+  return array.reverse().filter(v => !!v);
+};
+
+// Ensure two-digit format for minutes and seconds
+const format = array =>
+  array.map((string, i) => {
+    if (string.length < 2) {
+      return i === 0 ? `0${string}` : `${string}0`;
+    }
+
+    return string;
+  });
+
+// Hide seconds if needed
+const short = hour => {
+  const array = hour.split(':');
+  if (array.length > 2) {
+    return array.slice(0, -1).join(':');
+  }
+
+  return hour;
+};
+
+// return array of minutes in hours with current step
+const getMinutesArr = step => {
+  const length = MINUTES_IN_HOUR / step;
+
+  return Array.from({ length }, (_v, i) => step * i);
+};
+
+// Generate options for TimeList display
+const getOptions = step => {
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+  const minutes = getMinutesArr(step);
+
+  const options = hours.reduce((acc, cur) => {
+    const hour = pad(cur);
+
+    const hourOptions = minutes.map(minute => {
+      const label = `${hour}:${pad(minute)}`;
+
+      return { value: `${label}:00`, label };
+    });
+
+    return acc.concat(hourOptions);
+  }, []);
+
+  return options;
+};
+
+// Find the nearest time option to select a TimeList value
+const roundHour = (time, step) => {
+  const arr = splitArray(time);
+  const minutesArr = getMinutesArr(step);
+  const nearMin = nearest(
+    minutesArr.concat(MINUTES_IN_HOUR),
+    parseInt(arr[1], 10)
+  );
+
+  arr[1] = minutesArr.includes(arr[1]) ? '00' : pad(nearMin);
+  arr[2] = nearMin === 60 ? `${parseInt(arr[2], 10) + 1}` : arr[2];
+
+  return format(arr.reverse()).join(':');
+};
+
+// Set the nearest option to select a TimeList value
+const nearest = (arr, val) =>
+  arr.reduce(
+    (p, n) => (Math.abs(p) > Math.abs(n - val) ? n - val : p),
+    Infinity
+  ) + val;
+
+function TimePicker(props) {
+  const { name, onChange, seconds, tabIndex, value, step } = props;
+  const [inputVal, setInputVal] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const options = useMemo(() => getOptions(step), [step]);
+  const inputRef = useRef();
+  const wrapperRef = useRef();
+  const listRef = useRef();
+  const listRefs = options.reduce((acc, curr) => {
+    acc[curr.value] = useRef();
+
+    return acc;
+  }, {});
+
+  const currentTimeSelected = useMemo(
+    () => roundHour(timeFormatter(inputVal), step),
+    [inputVal, step]
+  );
+
+  // Effect to set the time
+  useEffect(() => {
+    if (!isOpen) {
+      const time = seconds ? value : short(value);
+
+      setInputVal(time);
+    }
+  }, [value, seconds, isOpen]);
+
+  // Effect to enable scrolling
+  useEffect(() => {
+    const currentRef = currentTimeSelected;
+
+    if (isOpen && listRefs[currentRef]) {
+      listRef.current.scrollTop = listRefs[currentRef].current.offsetTop;
+    }
+  }, [isOpen, currentTimeSelected, listRefs]);
+
+  // Custom hook to close the TimeList
+  useEventListener(
+    'click',
+    event => {
+      if (!wrapperRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    },
+    isOpen
+  );
+
+  // Custom hook to select a time using the keyboard's up arrow
+  useShortcutEffect(
+    'arrowUp',
+    () => {
+      if (isOpen) {
+        const currentIndex = options.findIndex(
+          o => o.value === currentTimeSelected
+        );
+        if (!currentIndex) return;
+        const nextIndex = currentIndex - 1;
+
+        const nextTime = options[nextIndex] || options[currentIndex];
+
+        updateTime(nextTime.value);
+      }
+    },
+    isOpen
+  );
+
+  // Custom hook to select a time using the keyboard's down arrow
+  useShortcutEffect(
+    'arrowDown',
+    () => {
+      if (isOpen) {
+        const currentIndex = options.findIndex(
+          o => o.value === currentTimeSelected
+        );
+        const lastIndex = options.length - 1;
+        if (currentIndex >= lastIndex) return;
+        const nextIndex = currentIndex + 1;
+
+        const nextTime = options[nextIndex] || options[lastIndex];
+
+        updateTime(nextTime.value);
+      }
+    },
+    isOpen
+  );
+
+  // Custom hook to close the time list
+  useShortcutEffect(
+    'enter',
+    () => {
+      if (isOpen) {
+        setIsOpen(false);
+        inputRef.current.blur();
+      }
+    },
+    isOpen
+  );
+
+  useShortcutEffect(
+    'tab',
+    () => {
+      if (isOpen) {
+        setIsOpen(false);
+        inputRef.current.blur();
+      }
+    },
+    isOpen
+  );
+
+  const handleChange = ({ target }) => {
+    updateTime(target.value);
+  };
+
+  const handleChangeRadio = useCallback(() => {}, []);
+
+  const formatInputValue = time => {
+    if (!seconds) {
+      setInputVal(short(time));
+    } else {
+      setInputVal(time);
+    }
+  };
+
+  const handleClick = ({ target }) => {
+    updateTime(target.value);
+    setIsOpen(false);
+  };
+
+  const updateTime = time => {
+    formatInputValue(time);
+    onChange({
+      target: {
+        name,
+        type: 'time',
+        value: timeFormatter(time),
+      },
+    });
+  };
+
+  return (
+    <TimePickerWrapper ref={wrapperRef} className={props.className}>
+      <StyledTimePicker
+        {...props}
+        autoComplete="off"
+        onChange={handleChange}
+        onFocus={() => setIsOpen(true)}
+        ref={inputRef}
+        type="text"
+        value={inputVal}
+        tabIndex={tabIndex}
+      />
+      <IconWrapper>
+        <Icon icon="time" />
+      </IconWrapper>
+      <TimeList className={isOpen && 'displayed'} ref={listRef}>
+        {isOpen &&
+          options.map(option => (
+            <li key={option.value} ref={listRefs[option.value]}>
+              <input
+                type="radio"
+                onChange={handleChangeRadio}
+                onClick={handleClick}
+                value={option.value}
+                id={option.value}
+                name="time"
+                checked={option.value === currentTimeSelected}
+                tabIndex="0"
+              />
+              <label htmlFor={option.value}>{option.label}</label>
+            </li>
+          ))}
+      </TimeList>
+    </TimePickerWrapper>
+  );
+}
+
+TimePicker.defaultProps = {
+  className: null,
+  onChange: () => {},
+  tabIndex: '0',
+  seconds: false,
+  value: '',
+  step: 30,
+};
+
+TimePicker.propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  seconds: PropTypes.bool,
+  step: (props, propName) =>
+    MINUTES_IN_HOUR % props[propName] > 0 &&
+    new Error('step should be divisible by 60'),
+  tabIndex: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export default TimePicker;

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { TimePicker as StyledTimePicker } from '@punch-in/buffet-modern';
+import TimePicker, { timeFormatter } from '../index';
+
+const defaultProps = { name: 'time' };
+const renderComponent = (props = defaultProps) =>
+  mount(<TimePicker {...props} />);
+
+describe('<TimePicker />', () => {
+  describe('Parser onBlur', () => {
+    it('Should format the value to 10:38:00 if 10:38 is given', () => {
+      expect(timeFormatter('10:38')).toEqual('10:38:00');
+    });
+
+    it('Should format the value to 10:38:00 if 10h38 is given', () => {
+      expect(timeFormatter('10h38')).toEqual('10:38:00');
+    });
+
+    it('Should format the value to 10:38:00 if 10H38 is given', () => {
+      expect(timeFormatter('10H38')).toEqual('10:38:00');
+    });
+
+    it('Should format the value to 10:00:00 if 10: is given', () => {
+      expect(timeFormatter('10:')).toEqual('10:00:00');
+    });
+
+    it('Should format the value to 10:00:00 if 10 is given', () => {
+      expect(timeFormatter('10')).toEqual('10:00:00');
+    });
+
+    it('Should format the value to 10:38:38 if 10:38:38 is given', () => {
+      expect(timeFormatter('10:38:38')).toEqual('10:38:38');
+    });
+
+    it('Should format the value to 01:11:00 if 1:11:00 is given', () => {
+      expect(timeFormatter('1:11:00')).toEqual('01:11:00');
+    });
+
+    it('Should format the value to 01:10:00 if 11:1:00 is given', () => {
+      expect(timeFormatter('11:1:00')).toEqual('11:10:00');
+    });
+
+    it('Should format the value to 11:10:2 if 11:10:20 is given', () => {
+      expect(timeFormatter('11:10:2')).toEqual('11:10:20');
+    });
+
+    it('Should format the value to 1200 if 12:00:00 is given', () => {
+      expect(timeFormatter('1200')).toEqual('12:00:00');
+    });
+
+    it('Should format the value to 111 if 01:11:00 is given', () => {
+      expect(timeFormatter('111')).toEqual('01:11:00');
+    });
+
+    it('Should format the value to 00:00:00 if null is given', () => {
+      expect(timeFormatter(null)).toEqual('00:00:00');
+    });
+
+    it('Should format the value to 00:00:00 if nothing is given', () => {
+      expect(timeFormatter('')).toEqual('00:00:00');
+    });
+  });
+
+  describe('<TimePicker /> behavior', () => {
+    // eslint-disable-next-line jest/expect-expect
+    it('should not crash', () => {
+      renderComponent();
+    });
+
+    it('should send a formatted string onChange', () => {
+      const onChange = jest.fn();
+      const value = '';
+      const renderedComponent = renderComponent({
+        ...defaultProps,
+        onChange,
+        value,
+      });
+
+      const element = renderedComponent.find(StyledTimePicker);
+      const mock = { target: { value: '10' } };
+      element.simulate('change', mock);
+
+      const expected = {
+        target: {
+          name: 'time',
+          type: 'time',
+          value: '10:00:00',
+        },
+      };
+      expect(onChange).toHaveBeenCalledWith(expected);
+    });
+  });
+});

package/src/components/Toggle/index.js

@@ -0,0 +1,83 @@
+/**
+ *
+ * Toggle
+ *
+ */
+
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import { Toggle as StyledToggle, ToggleWrapper } from '@punch-in/buffet-modern';
+import Label from '../Label';
+
+function Toggle({
+  disabled,
+  id,
+  className,
+  name,
+  onChange,
+  value,
+  leftLabel,
+  rightLabel,
+}) {
+  const isIndeterminate = value === null;
+
+  const handleRef = useCallback(
+    element => {
+      if (element) {
+        element.indeterminate = isIndeterminate; // eslint-disable-line no-param-reassign
+      }
+    },
+    [isIndeterminate]
+  );
+
+  const handleChange = e => {
+    let targetValue = e.target.checked;
+    // Handle click when the state is inteterminate
+    if (isIndeterminate) {
+      // Select the right value depending on the mouse position
+      targetValue = e.nativeEvent.offsetX >= e.target.offsetWidth / 2;
+    }
+    onChange({ target: { name, value: targetValue } });
+  };
+
+  return (
+    <ToggleWrapper className={className}>
+      <Label htmlFor={id || name}>
+        <StyledToggle
+          disabled={disabled}
+          checked={value || false}
+          id={id || name}
+          name={id || name}
+          onChange={handleChange}
+          ref={handleRef}
+        />
+        <span>{leftLabel}</span>
+        <span>{rightLabel}</span>
+      </Label>
+    </ToggleWrapper>
+  );
+}
+
+Toggle.defaultProps = {
+  className: null,
+  disabled: false,
+  id: null,
+  leftLabel: 'OFF',
+  onChange: () => {},
+  rightLabel: 'ON',
+  value: false,
+};
+
+Toggle.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  leftLabel: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  rightLabel: PropTypes.string,
+  value: PropTypes.bool,
+};
+
+export default Toggle;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Toggle from '../index';
+
+const defaultProps = {
+  name: 'toggle',
+  type: 'checkbox',
+};
+const renderComponent = (props = defaultProps) => mount(<Toggle {...props} />);
+
+describe('<Toggle />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('should not crash', () => {
+    renderComponent();
+  });
+
+  it('should send a boolean', () => {
+    const onChange = jest.fn();
+    const value = false;
+    const renderedComponent = renderComponent({
+      ...defaultProps,
+      onChange,
+      value,
+    });
+    const element = renderedComponent.find('input');
+    element.simulate('change');
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('should use the defaultProps', () => {
+    const {
+      defaultProps: { onChange },
+    } = Toggle;
+
+    expect(onChange).toBeDefined();
+    expect(onChange({ preventDefault: jest.fn() })).toBe(undefined);
+  });
+});

package/src/components/UnknownInput/index.js

@@ -0,0 +1,20 @@
+/**
+ *
+ * UnknownInput
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const UnknownInput = ({ type }) => <div>This {type} is not available</div>;
+
+UnknownInput.defaultProps = {
+  type: null,
+};
+
+UnknownInput.propTypes = {
+  type: PropTypes.string,
+};
+
+export default UnknownInput;