envoc-form 3.2.0 → 4.0.1-1

package/src/DatePickerInput/__snapshots__/DatePickerInput.test.js.snap

@@ -1,134 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DatePickerInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="react-date-picker react-date-picker--closed react-date-picker--enabled form-control"
-  >
-    <div
-      class="react-date-picker__wrapper"
-    >
-      <div
-        class="react-date-picker__inputGroup"
-      >
-        <input
-          max="2021-09-23"
-          min="2020-09-23"
-          name="date"
-          style="visibility: hidden; position: absolute; z-index: -999;"
-          type="date"
-          value="2020-09-25"
-        />
-        <input
-          autocomplete="off"
-          class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
-          data-input="true"
-          inputmode="numeric"
-          max="12"
-          min="9"
-          name="month"
-          placeholder="--"
-          type="number"
-          value="9"
-        />
-        <span
-          class="react-date-picker__inputGroup__divider"
-        >
-          /
-        </span>
-        <input
-          autocomplete="off"
-          class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
-          data-input="true"
-          inputmode="numeric"
-          max="30"
-          min="23"
-          name="day"
-          placeholder="--"
-          type="number"
-          value="25"
-        />
-        <span
-          class="react-date-picker__inputGroup__divider"
-        >
-          /
-        </span>
-        <input
-          autocomplete="off"
-          class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
-          data-input="true"
-          inputmode="numeric"
-          max="2021"
-          min="2020"
-          name="year"
-          placeholder="----"
-          step="1"
-          type="number"
-          value="2020"
-        />
-      </div>
-      <button
-        class="react-date-picker__clear-button react-date-picker__button"
-        type="button"
-      >
-        <svg
-          class="react-date-picker__clear-button__icon react-date-picker__button__icon"
-          height="19"
-          stroke="black"
-          stroke-width="2"
-          viewBox="0 0 19 19"
-          width="19"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <line
-            x1="4"
-            x2="15"
-            y1="4"
-            y2="15"
-          />
-          <line
-            x1="15"
-            x2="4"
-            y1="4"
-            y2="15"
-          />
-        </svg>
-      </button>
-      <button
-        class="react-date-picker__calendar-button react-date-picker__button"
-        type="button"
-      >
-        <svg
-          class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
-          height="19"
-          stroke="black"
-          stroke-width="2"
-          viewBox="0 0 19 19"
-          width="19"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <rect
-            fill="none"
-            height="15"
-            width="15"
-            x="2"
-            y="2"
-          />
-          <line
-            x1="6"
-            x2="6"
-            y1="0"
-            y2="4"
-          />
-          <line
-            x1="13"
-            x2="13"
-            y1="0"
-            y2="4"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/DatePickerInput/date-picker-input.scss

@@ -1,42 +0,0 @@
-@import '../variables';
-
-.react-date-picker {
-  padding: 0;
-  &.react-date-picker--open {
-    border: 1px solid $input-border-color--focused;
-    box-shadow: $input-box-shadow--focused;
-  }
-  &.react-date-picker--disabled {
-    background-color: $input-disabled-background-color;
-    border-color: $input-disabled-border-color;
-  }
-
-  .react-date-picker__wrapper {
-    width: 100%;
-    border: none;
-  }
-
-  .react-date-picker__inputGroup {
-    width: 100%;
-    margin-left: 10px;
-  }
-
-  .is-invalid.react-date-picker {
-    border: 1px solid $red;
-  }
-
-  .react-date-picker__calendar {
-    z-index: 3;
-  }
-  .react-date-picker__inputGroup__input {
-    min-width: 18px;
-    text-align: center;
-    &.react-date-picker__inputGroup__year {
-      min-width: 40px;
-    }
-  }
-
-  .react-calendar__tile--now {
-    outline: 1px solid rgba(0, 0, 0, 0.5);
-  }
-}

package/src/DatePickerInput/index.js

@@ -1,3 +0,0 @@
-import DatePickerInput from './DatePickerInput';
-
-export default DatePickerInput;

package/src/ErrorScrollTarget.js

@@ -1,6 +0,0 @@
-import React from 'react';
-
-export default function ErrorScrollTarget(props) {
-  const divId = `${props.name.toLowerCase()}-error-scroll-target`;
-  return <div id={divId} style={{ display: 'none' }} />;
-}

package/src/FileInput/DefaultFileList.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import { ListGroupItem, ListGroup } from 'reactstrap';
-
-export default function DefaultFileList({ files, rejectedFiles = [] }) {
-  return (
-    <ListGroup>
-      {files.map((file) => (
-        <Group key={file.path} item={file} warning={false} />
-      ))}
-      {rejectedFiles.map(({ file }) => {
-        return <Group key={file.path} item={file} warning={true} />;
-      })}
-    </ListGroup>
-  );
-}
-
-function Group({ item, warning }) {
-  return (
-    <ListGroupItem
-      color={`d-flex ${
-        warning ? 'warning' : 'success'
-      }  justify-content-between list-group-item ${
-        warning ? 'list-group-item-warning' : 'list-group-item-success'
-      } px-3 py-1 rounded-1`}>
-      <span className="d-flex justify-content-between w-100">
-        <span>{item.name}</span> <span>{humanFileSize(item.size)}</span>
-      </span>
-    </ListGroupItem>
-  );
-}
-
-function humanFileSize(size) {
-  const i = Math.floor(Math.log(size) / Math.log(1024));
-  return (
-    (size / Math.pow(1024, i)).toFixed(2) * 1 +
-    ' ' +
-    ['B', 'KB', 'MB', 'GB', 'TB'][i]
-  );
-}

package/src/FileInput/DropzoneFileInput.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { useDropzone } from 'react-dropzone';
-import classNames from 'classnames';
-import DefaultFileList from './DefaultFileList';
-
-export default function DropzoneFileInput({
-  className: classNameProp,
-  onChange,
-  value,
-  accept,
-  disabled,
-  multiple = false,
-  FileList = DefaultFileList,
-  placeholder = 'Drag and drop some file(s) here, or click to select file(s)',
-  dropzone,
-  ...props
-}) {
-  const {
-    acceptedFiles = (acceptedFiles = acceptedFiles[0]),
-    fileRejections = fileRejections.push(
-      acceptedFiles.slice(1, acceptedFiles.length)
-    ),
-    getRootProps,
-    getInputProps,
-    isDragAccept,
-    isDragReject,
-  } = useDropzone({ accept, onDrop, disabled: disabled, multiple: multiple });
-
-  function onDrop(acceptedFiles) {
-    if (!acceptedFiles?.length > 1 && !multiple) {
-      onChange(null);
-    } else {
-      onChange(acceptedFiles);
-    }
-  }
-
-  const className = classNames('react-dropzone', classNameProp, {
-    accept: isDragAccept,
-    reject: isDragReject,
-    disabled: disabled,
-  });
-
-  return (
-    <section className={className}>
-      <div {...getRootProps()}>
-        <input {...props} {...getInputProps()} />
-        <>{placeholder}</>
-        {!multiple && <b>{`Only one file accepted.`}</b>}
-        {accept && <b>{`Files of type "${accept}" accepted`}</b>}
-      </div>
-      <aside>
-        <FileList files={acceptedFiles} rejectedFiles={fileRejections} />
-      </aside>
-    </section>
-  );
-}

package/src/FileInput/DropzoneFileInput.test.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import DropzoneFileInput from './DropzoneFileInput';
-
-describe('DropZoneFileInput', () => {
-  it('Renders without error', () => {
-    render(<DropzoneFileInput name="myFile" />);
-  });
-
-  it('Renders multiple file without error', () => {
-    render(<DropzoneFileInput name="myFile" multiple />);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(<DropzoneFileInput name="myFile" />);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('Multiple file input has matching snapshot', () => {
-    const renderResult = render(<DropzoneFileInput name="myFile" multiple />);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/FileInput/FileInput.js

@@ -1,77 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import DefaultFileList from './DefaultFileList';
-
-export default function FileInput({
-  className,
-  onChange,
-  value,
-  multiple = false,
-  ...props
-}) {
-  const inputRef = useRef();
-  const [acceptedFiles, setAcceptedFiles] = useState([]);
-  useEffect(() => {
-    if (!value && inputRef.current) {
-      inputRef.current.value = null;
-    }
-  }, [value]);
-  return (
-    <>
-      <div
-        className={`custom-file file-input ${className || ''} ${
-          props.disabled ? 'disabled' : ''
-        }`}>
-        <div>
-          <input
-            ref={inputRef}
-            type="file"
-            className="custom-file-input"
-            onChange={handleChange}
-            multiple={multiple}
-            {...props}
-          />
-        </div>
-        <label className="custom-file-label">
-          <div>
-            {!value && <span>Choose A File...</span>}
-            {value &&
-              (!multiple ? (
-                <span>
-                  {value.name} - size: {humanFileSize(value.size)}
-                </span>
-              ) : value.length === 1 ? (
-                <span>
-                  {value[0].name} - size: {humanFileSize(value[0].size)}
-                </span>
-              ) : (
-                <span>Multiple files selected.</span>
-              ))}
-          </div>
-        </label>
-      </div>
-      <DefaultFileList files={acceptedFiles} />
-    </>
-  );
-  function handleChange(e) {
-    if (e == null || !e.target || !e.target.files.length) {
-      onChange(null);
-    } else {
-      const files = [...e.target.files];
-      setAcceptedFiles(files);
-      if (!multiple) {
-        onChange(files[0]);
-      } else {
-        onChange(files);
-      }
-    }
-  }
-}
-
-function humanFileSize(size) {
-  const i = Math.floor(Math.log(size) / Math.log(1024));
-  return (
-    (size / Math.pow(1024, i)).toFixed(2) * 1 +
-    ' ' +
-    ['B', 'KB', 'MB', 'GB', 'TB'][i]
-  );
-}

package/src/FileInput/FileInput.test.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import FileInput from './FileInput';
-
-describe('FileInput', () => {
-  it('Renders without error', () => {
-    render(<FileInput name="myFile" />);
-  });
-
-  it('Renders multiple files without error', () => {
-    render(<FileInput name="myFile" multiple />);
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(<FileInput name="myFile" />);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('multiple files has matching snapshot', () => {
-    const renderResult = render(<FileInput name="myFile" multiple />);
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/FileInput/__snapshots__/DropzoneFileInput.test.js.snap

@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DropZoneFileInput Multiple file input has matching snapshot 1`] = `
-<DocumentFragment>
-  <section
-    class="react-dropzone"
-  >
-    <div
-      tabindex="0"
-    >
-      <input
-        autocomplete="off"
-        multiple=""
-        name="myFile"
-        style="display: none;"
-        tabindex="-1"
-        type="file"
-      />
-      Drag and drop some file(s) here, or click to select file(s)
-    </div>
-    <aside>
-      <ul
-        class="list-group"
-      />
-    </aside>
-  </section>
-</DocumentFragment>
-`;
-
-exports[`DropZoneFileInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <section
-    class="react-dropzone"
-  >
-    <div
-      tabindex="0"
-    >
-      <input
-        autocomplete="off"
-        name="myFile"
-        style="display: none;"
-        tabindex="-1"
-        type="file"
-      />
-      Drag and drop some file(s) here, or click to select file(s)
-      <b>
-        Only one file accepted.
-      </b>
-    </div>
-    <aside>
-      <ul
-        class="list-group"
-      />
-    </aside>
-  </section>
-</DocumentFragment>
-`;

package/src/FileInput/__snapshots__/FileInput.test.js.snap

@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FileInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="custom-file file-input  "
-  >
-    <div>
-      <input
-        class="custom-file-input"
-        name="myFile"
-        type="file"
-      />
-    </div>
-    <label
-      class="custom-file-label"
-    >
-      <div>
-        <span>
-          Choose A File...
-        </span>
-      </div>
-    </label>
-  </div>
-  <ul
-    class="list-group"
-  />
-</DocumentFragment>
-`;
-
-exports[`FileInput multiple files has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="custom-file file-input  "
-  >
-    <div>
-      <input
-        class="custom-file-input"
-        multiple=""
-        name="myFile"
-        type="file"
-      />
-    </div>
-    <label
-      class="custom-file-label"
-    >
-      <div>
-        <span>
-          Choose A File...
-        </span>
-      </div>
-    </label>
-  </div>
-  <ul
-    class="list-group"
-  />
-</DocumentFragment>
-`;

package/src/FileInput/file-input.scss

@@ -1,58 +0,0 @@
-@import '../variables';
-
-.file-input {
-  &.is-invalid {
-    .custom-file-label {
-      border: 1px solid $red;
-    }
-  }
-}
-
-.custom-file-input:disabled ~ .custom-file-label {
-  background-color: $input-disabled-background-color;
-  border-color: $input-disabled-border-color;
-  &:after {
-    display: none !important;
-  }
-}
-
-section.react-dropzone {
-  & > div {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-    border: 1px dashed #d8dbe0;
-    border-radius: 0.25rem;
-    background-color: white;
-    color: #8a93a2;
-    outline: none;
-    margin: 0;
-    padding: 20px;
-    transition: 'border .24s ease-in-out';
-    cursor: pointer;
-    &:focus,
-    &:focus-within {
-      border-color: #958bef;
-      box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
-    }
-  }
-  &.active > div,
-  &.accept > div {
-    border-color: #958bef;
-    box-shadow: 0 0 0 0.2rem rgba(50, 31, 219, 0.25);
-  }
-  &.reject > div {
-    color: rgb(229, 83, 83);
-    border-color: rgb(229, 83, 83);
-    box-shadow: rgba(229, 83, 83, 0.25) 0px 0px 0px 3.2px;
-  }
-  &.disabled > div {
-    background-color: $input-disabled-background-color;
-    border-color: $input-disabled-border-color;
-    cursor: no-drop;
-  }
-  & > aside > .list-group:not(:empty) {
-    margin-top: 1rem;
-  }
-}

package/src/FileInput/index.js

@@ -1,4 +0,0 @@
-import FileInput from './FileInput';
-import DropzoneFileInput from './DropzoneFileInput';
-
-export { FileInput, DropzoneFileInput };

package/src/Form/Form.test.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { HashRouter } from 'react-router-dom';
-import Form from './Form';
-
-describe('MoneyInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <HashRouter>
-        <Form onSubmit={() => {}} />
-      </HashRouter>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <HashRouter>
-        <Form onSubmit={() => {}} />
-      </HashRouter>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/Form/FormBasedPreventNavigation.js

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-import { useFormikContext } from 'formik';
-
-export default function FormBasedPreventNavigation({
-  ignoreLostChanges,
-  promptMessage = 'Changes you made may not be saved.',
-}) {
-  const { dirty, isSubmitting } = useFormikContext();
-  const preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
-  useEffect(() => {
-    if (!preventNavigate) {
-      return;
-    }
-    window.addEventListener('beforeunload', beforeUnload);
-    return () => {
-      window.removeEventListener('beforeunload', beforeUnload);
-    };
-    function beforeUnload(e) {
-      e.preventDefault();
-      e.returnValue = promptMessage;
-    }
-  }, [preventNavigate, promptMessage]);
-  // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
-  return null;
-}

package/src/Form/ServerErrorContext.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const ServerErrorContext = React.createContext({
-  getError: (path) => {},
-  setError: (path, errorMessage) => {},
-});
-export default ServerErrorContext;

package/src/Form/index.js

@@ -1,3 +0,0 @@
-import Form from './Form';
-import ServerErrorContext from './ServerErrorContext';
-export { Form as default, ServerErrorContext };

package/src/FormGroup.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import {
-  FormGroup as BootstrapFormGroup,
-  Label,
-  FormFeedback,
-  FormText,
-  Alert,
-} from 'reactstrap';
-
-const FormGroup = ({
-  label,
-  id,
-  helpText,
-  className,
-  style,
-  children,
-  meta,
-}) => {
-  return (
-    <BootstrapFormGroup className={className} style={style}>
-      {!!meta.warning && <Alert color="warning">{meta.warning}</Alert>}
-      {label && <Label htmlFor={id}>{label}</Label>}
-      {children}
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormText>{helpText}</FormText>}
-    </BootstrapFormGroup>
-  );
-};
-
-export default FormGroup;