@punch-in/buffet-modern-core 3.3.11

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@punch-in/buffet-modern-core",
+  "version": "3.3.11",
+  "description": "Buffetjs Core Components",
+  "main": "build",
+  "module": "build/esm/index.js",
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "prebuild": "rimraf build",
+    "build": "npm run build:development && npm run build:production && npm run build:esm && npm run create:index",
+    "build:analyze": "cross-env NODE_ENV=production webpack-cli --json > build/stats.production.json && webpack-bundle-analyzer build/stats.production.json",
+    "build:development": "cross-env NODE_ENV=development webpack-cli",
+    "build:esm": "cross-env BABEL_ENV=esm babel ./src --out-dir ./build/esm --ignore \"**/*.test.js\" --ignore \"**/test.js\"",
+    "build:production": "cross-env NODE_ENV=production webpack-cli",
+    "build:watch": "npm run create:index && cross-env NODE_ENV=development webpack-cli -w",
+    "build:watch:esm": "cross-env BABEL_ENV=esm babel ./src --out-dir ./build/esm --ignore \"**/*.test.js\" --ignore \"**/test.js\" --watch",
+    "create:index": "node ./createBuildIndex.js",
+    "test": "cross-env NODE_ENV=development npm run test:lint && npm run test:style && npm run test:jest",
+    "test:jest": "jest --runInBand --no-cache --config=jest.config.js",
+    "test:jest:watch": "jest --config=jest.config.js --watchAll",
+    "test:jest:update": "jest --runInBand --no-cache --config=jest.config.js -u",
+    "test:lint": "eslint .",
+    "test:lint:quiet": "eslint . --quiet",
+    "test:prettier": "echo \"Error: no test specified\"",
+    "test:prettiers": "prettier-check \"**/*.js\"",
+    "test:style": "stylelint src/components/**/*.js",
+    "test:style:quiet": "stylelint src/components/**/*.js --quiet",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-regular-svg-icons": "^5.11.2",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@punch-in/buffet-modern": "^3.3.11",
+    "@punch-in/buffet-modern-hooks": "^3.3.11",
+    "@punch-in/buffet-modern-icons": "^3.3.11",
+    "@punch-in/buffet-modern-utils": "^3.3.11",
+    "invariant": "^2.2.4",
+    "lodash": "4.17.21",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
+    "rc-input-number": "^4.5.0",
+    "react": "^16.14.0",
+    "react-dates": "^21.5.1",
+    "react-moment-proptypes": "^1.7.0",
+    "react-router-dom": "^5.2.0",
+    "react-with-direction": "^1.3.1",
+    "reactstrap": "^8.5.1",
+    "styled-components": "^5.3.10"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.1.5",
+    "@babel/core": "^7.1.6",
+    "@babel/eslint-parser": "^7.22.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-transform-class-properties": "^7.1.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/react-hooks": "^3.2.1",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-module-resolver": "3.0.0",
+    "bundlesize": "^0.17.0",
+    "cross-env": "^5.1.4",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.5.0",
+    "eslint": "^7.5.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-lerna": "^1.1.0",
+    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^23.19.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "jest-styled-components": "^7.0.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "react-dom": "^16.14.0",
+    "react-test-renderer": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "stylelint": "^13.6.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.44.0",
+    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-cli": "^3.3.12"
+  },
+  "peerDependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "styled-components": "^5.0.0"
+  },
+  "keywords": [
+    "Buffetjs",
+    "React"
+  ],
+  "author": "Strapi team",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/strapi/buffet"
+  },
+  "gitHead": "63c6c13e0fd7feed8e0ea89f751b68b02ef767ea"
+}

package/src/components/AttributeIcon/Div.js

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 20px;
+  width: 35px;
+
+  > svg {
+    align-self: center;
+  }
+
+  background-color: ${({ type }) => {
+    switch (type) {
+      case 'boolean':
+        return '#69ba05';
+      case 'date':
+      case 'datetime':
+      case 'time':
+      case 'timestamp':
+        return '#1c8ee2';
+      case 'component':
+        return '#666666';
+      case 'contentType':
+        return '#ff6458';
+      case 'dynamiczone':
+        return '#333333';
+      case 'email':
+        return '#ff6400';
+      case 'enumeration':
+      case 'enum':
+        return '#f8b295';
+      case 'json':
+      case 'JSON':
+        return '#3C8C98';
+      case 'media':
+      case 'file':
+      case 'files':
+        return '#b981d5';
+      case 'number':
+        return '#e8442f';
+      case 'password':
+        return '#ff9900';
+      case 'string':
+      case 'text':
+        return '#ffb500';
+      case 'relation':
+        return '#1c5de7';
+      case 'richtext':
+        return '#ff9200';
+      case 'singleType':
+        return '#F4A7B4';
+      case 'uid':
+        return '#c3814f';
+      default:
+        return '';
+    }
+  }};
+  border-radius: 2px;
+`;
+
+export default Div;

package/src/components/AttributeIcon/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Bool,
+  Calendar,
+  Component,
+  ContentType,
+  DynamicZone,
+  Email,
+  Enumeration,
+  Json,
+  Media,
+  NumberIcon,
+  Password,
+  Relation,
+  RichText,
+  SingleType,
+  Text,
+  Uid,
+} from '@punch-in/buffet-modern-icons';
+import Div from './Div';
+
+const types = {
+  biginteger: NumberIcon,
+  boolean: Bool,
+  component: Component,
+  contentType: ContentType,
+  date: Calendar,
+  datetime: Calendar,
+  decimal: NumberIcon,
+  dynamiczone: DynamicZone,
+  email: Email,
+  enum: Enumeration,
+  enumeration: Enumeration,
+  file: Media,
+  files: Media,
+  float: NumberIcon,
+  integer: NumberIcon,
+  json: Json,
+  JSON: Json,
+  media: Media,
+  number: NumberIcon,
+  password: Password,
+  relation: Relation,
+  richtext: RichText,
+  singleType: SingleType,
+  string: Text,
+  text: Text,
+  time: Calendar,
+  timestamp: Calendar,
+  uid: Uid,
+};
+
+const AttributeIcon = ({ type, ...rest }) => {
+  const Compo = types[type];
+
+  if (!types[type]) {
+    return null;
+  }
+
+  return (
+    <Div {...rest} type={type}>
+      <Compo />
+    </Div>
+  );
+};
+
+AttributeIcon.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default AttributeIcon;

package/src/components/Button/index.js

@@ -0,0 +1,95 @@
+/**
+ *
+ * Button
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  LoadingIndicator,
+  Button as StyledButton,
+  colors,
+} from '@punch-in/buffet-modern';
+import { Plus } from '@punch-in/buffet-modern-icons';
+import Flex from '../Flex';
+import PrefixIcon from '../PrefixIcon';
+
+function Button({
+  children,
+  color,
+  disabled,
+  icon,
+  label,
+  isLoading,
+  ...rest
+}) {
+  const content = label || children;
+
+  const img =
+    icon === true ? (
+      <Plus height="11px" width="11px" fill={`${colors.button[color].color}`} />
+    ) : (
+      <PrefixIcon icon={icon} />
+    );
+
+  if (isLoading) {
+    return (
+      <StyledButton
+        color={color}
+        disabled={disabled}
+        {...rest}
+        onClick={e => {
+          // Preventing the user from clicking the button when loading
+          e.preventDefault();
+        }}
+      >
+        <Flex justifyContent="space-around">
+          <LoadingIndicator
+            animationTime="0.6s"
+            borderWidth="2px"
+            borderColor="#f7f5f0"
+            borderTopColor="#d1cec7"
+            size="1.3rem"
+          />
+        </Flex>
+      </StyledButton>
+    );
+  }
+
+  return (
+    <StyledButton color={color} disabled={disabled} {...rest}>
+      {img}
+      {content}
+    </StyledButton>
+  );
+}
+
+Button.defaultProps = {
+  children: null,
+  color: 'primary',
+  disabled: false,
+  icon: false,
+  isLoading: false,
+  label: null,
+  type: 'button',
+};
+
+Button.propTypes = {
+  children: PropTypes.node,
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'cancel',
+    'success',
+    'delete',
+    'none',
+  ]),
+  disabled: PropTypes.bool,
+  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+  isLoading: PropTypes.bool,
+  label: PropTypes.string,
+  type: PropTypes.oneOf(['submit', 'reset', 'button', 'menu']),
+};
+
+export default Button;

package/src/components/Checkbox/index.js

@@ -0,0 +1,86 @@
+/**
+ *
+ * Checkbox
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Checkbox as StyledCheckbox,
+  CheckboxWrapper,
+} from '@punch-in/buffet-modern';
+import Label from '../Label';
+
+function Checkbox({
+  autoFocus,
+  className,
+  id,
+  message,
+  name,
+  onChange,
+  tabIndex,
+  value,
+  ...rest
+}) {
+  const handleChange = () => {
+    const target = {
+      name,
+      type: 'checkbox',
+      value: !value,
+    };
+
+    onChange({ target });
+  };
+
+  return (
+    <CheckboxWrapper className={className} disabled={rest.disabled}>
+      <StyledCheckbox
+        {...rest}
+        autoFocus={autoFocus}
+        id={id || name}
+        name={name}
+        onChange={handleChange}
+        tabIndex={tabIndex}
+        checked={value}
+      />
+      <Label htmlFor={id || name} message={message} />
+    </CheckboxWrapper>
+  );
+}
+
+Checkbox.defaultProps = {
+  autoComplete: 'off',
+  autoFocus: false,
+  className: null,
+  disabled: false,
+  id: null,
+  message: null,
+  onChange: () => {},
+  placeholder: null,
+  tabIndex: '0',
+  value: false,
+};
+Checkbox.propTypes = {
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  message: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+    PropTypes.shape({
+      id: PropTypes.string,
+      params: PropTypes.object,
+    }),
+  ]),
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  value: PropTypes.bool,
+};
+
+export default Checkbox;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Checkbox from '../index';
+
+const defaultProps = {
+  type: 'checkbox',
+  name: 'checkbox',
+  onChange: jest.fn(),
+};
+const renderComponent = (props = defaultProps) =>
+  mount(<Checkbox {...props} />);
+
+describe('<Checkbox />', () => {
+  // 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');
+    const expected = {
+      target: {
+        name: 'checkbox',
+        type: 'checkbox',
+        value: true,
+      },
+    };
+    expect(onChange).toHaveBeenLastCalledWith(expected);
+  });
+
+  it('should use the defaultProps', () => {
+    const {
+      defaultProps: { onChange },
+    } = Checkbox;
+
+    expect(onChange).toBeDefined();
+    expect(onChange({ preventDefault: jest.fn() })).toBe(undefined);
+  });
+});

package/src/components/Count/Wrapper.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import Flex from '../Flex';
+import colors from '../../theme/colors';
+
+const Wrapper = styled(Flex)`
+  width: fit-content;
+  height: 1.4rem;
+  min-width: 1.4rem;
+  padding: 0 0.2rem;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  background-color: ${({ theme, isActive }) =>
+    isActive ? theme.main.colors.lightBlue : '#e9eaeb'};
+`;
+
+Wrapper.defaultProps = {
+  theme: {
+    main: {
+      colors,
+      sizes: {
+        borderRadius: '2px',
+        paddings: {
+          xs: '5px',
+        },
+      },
+    },
+  },
+};
+
+Wrapper.propTypes = {
+  isActive: PropTypes.bool,
+  theme: PropTypes.object,
+};
+
+export default Wrapper;

package/src/components/Count/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Text from '../Text';
+import Wrapper from './Wrapper';
+
+const Count = ({ count, isActive }) => (
+  <Wrapper isActive={isActive} justifyContent="center" alignItems="center">
+    <Text
+      lineHeight="none"
+      fontWeight="bold"
+      color={isActive ? 'mediumBlue' : 'grey'}
+      fontSize="xs"
+    >
+      {count}
+    </Text>
+  </Wrapper>
+);
+
+Count.propTypes = {
+  count: PropTypes.number,
+  isActive: PropTypes.bool,
+};
+
+Count.defaultProps = {
+  count: 0,
+  isActive: false,
+};
+
+export default Count;