@punch-in/buffet-modern-core 3.3.11

package/src/components/InputText/index.js

@@ -0,0 +1,88 @@
+/**
+ *
+ * InputText
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  IconWrapper,
+  InputText as Input,
+  InputWrapper,
+} from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+import PrefixIcon from './PrefixIcon';
+
+function InputText({
+  autoFocus,
+  className,
+  icon,
+  id,
+  name,
+  onChange,
+  tabIndex,
+  type,
+  value,
+  ...rest
+}) {
+  const [showPassword, togglePassword] = useState(false);
+
+  return (
+    <InputWrapper className={className}>
+      <PrefixIcon icon={icon} type={type} />
+      {type === 'password' && (
+        <button
+          type="button"
+          onClick={() => togglePassword(!showPassword)}
+          className={showPassword ? 'shown' : ''}
+          tabIndex="-1"
+        >
+          <IconWrapper background={false}>
+            <Icon icon={type} />
+          </IconWrapper>
+        </button>
+      )}
+      <Input
+        autoFocus={autoFocus}
+        id={id || name}
+        name={name}
+        onChange={onChange}
+        tabIndex={tabIndex}
+        type={showPassword ? 'text' : type}
+        value={value}
+        icon={icon}
+        {...rest}
+      />
+    </InputWrapper>
+  );
+}
+
+InputText.defaultProps = {
+  autoComplete: 'off',
+  autoFocus: false,
+  className: null,
+  icon: null,
+  id: null,
+  onChange: () => {},
+  placeholder: null,
+  tabIndex: '0',
+  type: 'text',
+  value: '',
+};
+
+InputText.propTypes = {
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  type: PropTypes.string,
+  value: PropTypes.string,
+};
+
+export default InputText;

package/src/components/Label/index.js

@@ -0,0 +1,53 @@
+/**
+ *
+ * Label
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isFunction } from 'lodash';
+
+import { Label as StyledLabel } from '@punch-in/buffet-modern';
+
+function Label(props) {
+  const content = (() => {
+    if (isFunction(props.message)) {
+      return props.message();
+    }
+
+    if (props.message) {
+      return props.message;
+    }
+
+    return props.children;
+  })();
+
+  return (
+    <StyledLabel htmlFor={props.htmlFor} className={props.className}>
+      {content}
+    </StyledLabel>
+  );
+}
+
+Label.defaultProps = {
+  children: null,
+  className: null,
+  message: null,
+};
+
+Label.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  htmlFor: PropTypes.string.isRequired,
+  message: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+    PropTypes.shape({
+      id: PropTypes.string,
+      params: PropTypes.object,
+    }),
+  ]),
+};
+
+export default Label;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { isFunction } from 'lodash';
+import Label from '../index';
+
+let renderedComponent;
+const renderComponent = (props = {}) => mount(<Label {...props} />);
+
+describe('<Label />', () => {
+  afterEach(() => {
+    renderedComponent.unmount();
+  });
+
+  it('render the <Label /> with htmlFor props', () => {
+    renderedComponent = renderComponent({ htmlFor: 'inputName' });
+    expect(renderedComponent.at(0).prop('htmlFor')).toBe('inputName');
+  });
+
+  it('render the <Label /> with message props as a String', () => {
+    renderedComponent = renderComponent({
+      htmlFor: 'inputName',
+      message: 'text',
+    });
+
+    expect(renderedComponent.prop('message')).toEqual('text');
+  });
+
+  it('render the <Label /> with message props as a function', () => {
+    const messageFunc = () => 'text';
+    renderedComponent = renderComponent({
+      htmlFor: 'inputName',
+      message: messageFunc,
+    });
+    expect(isFunction(renderedComponent.prop('message'))).toBe(true);
+    expect(renderedComponent.prop('message')).toEqual(messageFunc);
+  });
+});

package/src/components/List/index.js

@@ -0,0 +1,56 @@
+/**
+ *
+ * List
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { List as StyledList, LoadingIndicator } from '@punch-in/buffet-modern';
+
+import ListRow from '../ListRow';
+import Padded from '../Padded';
+
+function List({ className, items, isLoading, customRowComponent }) {
+  return (
+    <StyledList className={className}>
+      {isLoading ? (
+        <Padded top bottom size="md">
+          <LoadingIndicator />
+        </Padded>
+      ) : (
+        <table>
+          <tbody>
+            {items.map((item, index) =>
+              customRowComponent ? (
+                // eslint-disable-next-line react/no-array-index-key
+                <React.Fragment key={index}>
+                  {customRowComponent(item)}
+                </React.Fragment>
+              ) : (
+                // eslint-disable-next-line react/no-array-index-key
+                <ListRow cells={item} key={index} />
+              )
+            )}
+          </tbody>
+        </table>
+      )}
+    </StyledList>
+  );
+}
+
+List.defaultProps = {
+  className: null,
+  customRowComponent: null,
+  isLoading: false,
+  items: [],
+};
+
+List.propTypes = {
+  className: PropTypes.string,
+  customRowComponent: PropTypes.func,
+  isLoading: PropTypes.bool,
+  items: PropTypes.instanceOf(Array),
+};
+
+export default List;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import List from '../index';
+
+describe('<List />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', () => {
+    mount(<List />);
+  });
+
+  it('Should use a custom row if provided', () => {
+    const items = [{ test: 'test' }];
+    const customRowComponent = jest.fn();
+    mount(<List items={items} customRowComponent={customRowComponent} />);
+
+    expect(customRowComponent).toHaveBeenCalledWith(items[0]);
+  });
+});

package/src/components/ListHeader/BaselineAlignement.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const BaselineAlignement = styled.div`
+  padding-top: 17px;
+`;
+
+export default BaselineAlignement;

package/src/components/ListHeader/index.js

@@ -0,0 +1,58 @@
+/**
+ *
+ * ListHeader
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ListHeader as StyledListHeader } from '@punch-in/buffet-modern';
+import Button from '../Button';
+import Flex from '../Flex';
+import Padded from '../Padded';
+import Text from '../Text';
+import BaselineAlignement from './BaselineAlignement';
+
+function ListHeader({ button, title, subtitle }) {
+  return (
+    <StyledListHeader>
+      <Flex justifyContent="space-between">
+        <Padded top bottom size="smd">
+          <Text fontSize="lg" fontWeight="bold" lineHeight="18px">
+            {title}
+          </Text>
+          {subtitle && (
+            <Padded top size="xs">
+              <Text fontSize="md" color="grey" lineHeight="13px">
+                {subtitle}
+              </Text>
+            </Padded>
+          )}
+        </Padded>
+        {button && (
+          <BaselineAlignement>
+            <Button {...button} />
+          </BaselineAlignement>
+        )}
+      </Flex>
+    </StyledListHeader>
+  );
+}
+
+ListHeader.defaultProps = {
+  button: null,
+  title: null,
+  subtitle: null,
+};
+
+ListHeader.propTypes = {
+  button: PropTypes.shape({
+    color: PropTypes.string,
+    icon: PropTypes.bool,
+    type: PropTypes.string,
+  }),
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
+};
+
+export default ListHeader;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ListHeader from '../index';
+
+describe('<ListHeader />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', () => {
+    mount(<ListHeader />);
+  });
+});

package/src/components/ListRow/index.js

@@ -0,0 +1,34 @@
+/**
+ *
+ * ListRow
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ListRow as StyledListRow } from '@punch-in/buffet-modern';
+
+function ListRow({ cells, onClick }) {
+  return (
+    <StyledListRow onClick={onClick}>
+      {Object.keys(cells).map(key => (
+        <td key={key} className={`${key}-cell`}>
+          <p>{cells[key]}</p>
+        </td>
+      ))}
+    </StyledListRow>
+  );
+}
+
+ListRow.defaultProps = {
+  cells: {},
+  onClick: () => {},
+};
+
+ListRow.propTypes = {
+  cells: PropTypes.instanceOf(Object),
+  onClick: PropTypes.func,
+};
+
+export default ListRow;

package/src/components/ListRow/tests/index.tests.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ListRow from '../index';
+
+describe('<ListRow />', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', () => {
+    mount(
+      <table>
+        <tbody>
+          <ListRow />
+        </tbody>
+      </table>
+    );
+  });
+
+  it('should display some cells', () => {
+    const cells = { name: 'name', test: 'test' };
+    const renderedComponent = mount(
+      <table>
+        <tbody>
+          <ListRow cells={cells} />
+        </tbody>
+      </table>
+    );
+    const tds = renderedComponent.find('td');
+
+    expect(tds.at(0).text()).toBe('name');
+    expect(tds.at(1).text()).toBe('test');
+  });
+});

package/src/components/NavTabs/index.js

@@ -0,0 +1,51 @@
+/**
+ *
+ * NavTabs
+ *
+ */
+
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Tab as StyledTab, colors } from '@punch-in/buffet-modern';
+import { gradient } from '@punch-in/buffet-modern-utils';
+
+function NavTabs({ links }) {
+  let color = colors.greyLink;
+
+  return (
+    <ul>
+      {links.map((link, index) => {
+        color = gradient(color, 1.5);
+        const content = link.label ? <p>{link.label}</p> : link.compo || null;
+
+        return (
+          <StyledTab
+            key={link.to}
+            index={index}
+            count={links.length}
+            background={color}
+          >
+            <NavLink to={link.to}>{content}</NavLink>
+          </StyledTab>
+        );
+      })}
+    </ul>
+  );
+}
+
+NavTabs.defaultProps = {
+  links: [],
+};
+
+NavTabs.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      compo: PropTypes.node,
+      label: PropTypes.string,
+      to: PropTypes.string,
+    })
+  ),
+};
+
+export default NavTabs;

package/src/components/Option/RemoveButton.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const RemoveButton = styled.button`
+  display: flex;
+  justify-items: center;
+  height: 13px;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-left: 10px;
+  background-color: transparent;
+  border: 0;
+  border-left: 1px solid rgba(0, 126, 255, 0.1);
+  &:focus {
+    outline: 0;
+  }
+`;
+
+export default RemoveButton;

package/src/components/Option/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Remove } from '@punch-in/buffet-modern-icons';
+import { Option as Wrapper } from '@punch-in/buffet-modern';
+import { upperFirst } from 'lodash';
+import RemoveButton from './RemoveButton';
+
+function Filter({ label, onClick, ...rest }) {
+  const content =
+    typeof label === 'string' ? <span>{upperFirst(label)}</span> : label;
+
+  return (
+    <Wrapper {...rest}>
+      {content}
+      <RemoveButton type="button" onClick={onClick}>
+        <Remove width="11px" height="11px" fill="#007eff" />
+      </RemoveButton>
+    </Wrapper>
+  );
+}
+
+Filter.defaultProps = {
+  label: '',
+  onClick: () => {},
+};
+
+Filter.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onClick: PropTypes.func,
+};
+
+export default Filter;

package/src/components/Padded/index.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Padded = styled.div`
+  padding-top: ${({ theme, size, top }) =>
+    top && (theme.main.sizes.paddings[size] || size)};
+  padding-right: ${({ theme, size, right }) =>
+    right && (theme.main.sizes.paddings[size] || size)};
+  padding-bottom: ${({ theme, size, bottom }) =>
+    bottom && (theme.main.sizes.paddings[size] || size)};
+  padding-left: ${({ theme, size, left }) =>
+    left && (theme.main.sizes.paddings[size] || size)};
+`;
+
+Padded.defaultProps = {
+  bottom: false,
+  left: false,
+  right: false,
+  size: 'sm',
+  top: false,
+  // TODO : This is temporary
+  theme: {
+    main: {
+      sizes: {
+        paddings: {
+          xs: '5px',
+          sm: '10px',
+          smd: '20px',
+          md: '30px',
+          lg: '40px',
+        },
+      },
+    },
+  },
+};
+
+Padded.propTypes = {
+  bottom: PropTypes.bool,
+  left: PropTypes.bool,
+  right: PropTypes.bool,
+  size: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  theme: PropTypes.object,
+  top: PropTypes.bool,
+};
+
+export default Padded;

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

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Padded /> should match snapshot 1`] = `
+<div
+  className=""
+  size="sm"
+/>
+`;

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

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

package/src/components/Paging/index.js

@@ -0,0 +1,66 @@
+/**
+ *
+ * Paging
+ *
+ */
+
+import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+import { Paging as StyledPaging } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+/* eslint-disable react/no-array-index-key */
+
+function Paging({ count, page, onChange, range }) {
+  const pagesCount = Math.ceil(count / range);
+
+  return (
+    <>
+      <StyledPaging />
+      <Pagination aria-label="Page navigation">
+        <PaginationItem>
+          <PaginationLink onClick={onChange} value={0}>
+            <Icon icon="left" />
+          </PaginationLink>
+        </PaginationItem>
+        {Array(pagesCount)
+          .fill(1)
+          .map((item, index) => (
+            <React.Fragment key={index}>
+              <PaginationItem
+                key={index}
+                onClick={onChange}
+                className={page === index * range ? 'selected' : ''}
+              >
+                <PaginationLink onClick={onChange} value={index * range}>
+                  {index + 1}
+                </PaginationLink>
+              </PaginationItem>
+            </React.Fragment>
+          ))}
+        <PaginationItem>
+          <PaginationLink onClick={onChange} value={(pagesCount - 1) * range}>
+            <Icon icon="right" />
+          </PaginationLink>
+        </PaginationItem>
+      </Pagination>
+    </>
+  );
+}
+
+Paging.defaultProps = {
+  count: 0,
+  onChange: () => {},
+  page: 0,
+  range: 15,
+};
+
+Paging.propTypes = {
+  count: PropTypes.number,
+  onChange: PropTypes.func,
+  page: PropTypes.number,
+  range: PropTypes.number,
+};
+
+export default Paging;