envoc-form 4.0.1-4 → 4.0.1-6

package/src/File/FileGroup.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import FileList from './FileList';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
 
 export interface FileGroupProps
   // note: file props are of type "any" with the current type generation
@@ -33,7 +34,11 @@ function FileGroup(
       meta={meta}
       label={label}
       helpText={helpText}
-      className={classNames(className, { multiple }, 'file-group')}>
+      className={classNames(
+        className,
+        { [FormDefaults.cssClassPrefix + 'multiple']: multiple },
+        FormDefaults.cssClassPrefix + 'file-group'
+      )}>
       <input
         {...input}
         {...rest}
@@ -56,7 +61,10 @@ function FileGroup(
         value={undefined}
         ref={ref}
         type="file"
-        className={classNames(className, 'file-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'file-group'
+        )}
       />
       {/* Note: because input.value is any - due to how files are currently handled - type safeness isn't great here */}
       <FileList files={input.value} />

package/src/File/FileList.tsx

@@ -1,10 +1,12 @@
+import { FormDefaults } from '../FormDefaults';
+
 export interface FileListProps {
   files?: File | File[] | undefined;
   rejectedFiles?: File | File[] | undefined;
 }
 export default function FileList({ files, rejectedFiles }: FileListProps) {
   return (
-    <div className="file-list">
+    <div className={FormDefaults.cssClassPrefix + 'file-list'}>
       {!files ? null : Array.isArray(files) ? (
         files.map((x, i) => <File file={x} key={i} />)
       ) : (

package/src/File/__snapshots__/FileGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`FileGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="file-group group"
+      class="envoc-form-file-group envoc-form-group"
     >
       <div
         id="profileimage-error-scroll-target"
@@ -19,14 +19,14 @@ exports[`FileGroup has matching snapshot 1`] = `
         Profile Image
       </label>
       <input
-        class="file-group"
+        class="envoc-form-file-group"
         id="profileImage"
         name="profileImage"
         type="file"
         value=""
       />
       <div
-        class="file-list"
+        class="envoc-form-file-list"
       />
     </div>
   </form>

package/src/Form/Form.tsx

@@ -25,6 +25,7 @@ import objectContainsNonSerializableProperty from '../utils/objectContainsNonSer
 import objectToFormData from '../utils/objectToFormData';
 import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
 import { ValidationError } from '../Validation/ValidationError';
+import { FormDefaults } from '../FormDefaults';
 
 // This exposes the builder that ensures only "name" values on the given TForm can be used
 // Further, each Field can then infer the proper type given the name
@@ -94,7 +95,10 @@ export default function Form<TForm extends object>({
       {...props}>
       <ServerErrorContext.Provider value={serverErrorContextValue}>
         <FormikFormWrapper
-          className={classNames(className, 'form')}
+          className={classNames(
+            className,
+            FormDefaults.cssClassPrefix + 'form'
+          )}
           style={style}>
           <FocusError serverErrors={serverErrorContextValue} />
           <FormBasedPreventNavigation ignoreLostChanges={ignoreLostChanges} />

package/src/Form/__snapshots__/Form.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`FormTestBase has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   />
 </DocumentFragment>
 `;

package/src/FormActions.tsx

@@ -1,3 +1,4 @@
+import { FormDefaults } from './FormDefaults';
 import { useFormikContext } from 'formik';
 import SubmitFormButton from './SubmitFormButton';
 
@@ -15,13 +16,18 @@ export default function FormActions({
   return (
     <>
       <SubmitFormButton
-        className="form-actions"
+        className={FormDefaults.cssClassPrefix + 'form-actions'}
         allowPristineSubmit={allowPristineSubmit}
         disabled={disabled}
       />
       <button
         type="button"
-        className="form-actions cancel-form-button"
+        className={
+          FormDefaults.cssClassPrefix +
+          'form-actions ' +
+          FormDefaults.cssClassPrefix +
+          'cancel-form-button'
+        }
         disabled={isSubmitting || disabled}
         onClick={handleCancel || goBack}>
         Cancel

package/src/FormDefaults.ts

@@ -0,0 +1 @@
+export const FormDefaults = { cssClassPrefix: 'envoc-form-' };

package/src/Group.tsx

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { FormDefaults } from './FormDefaults';
 import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
 import { InjectedFieldProps } from './Field/InjectedFieldProps';
 
@@ -28,16 +29,26 @@ export default function Group({
 }: GroupProps) {
   return (
     <div
-      className={classNames(className, 'group', {
-        'is-invalid': meta.error,
-        disabled: disabled,
+      className={classNames(className, FormDefaults.cssClassPrefix + 'group', {
+        [FormDefaults.cssClassPrefix + 'invalid']: meta.error,
+        [FormDefaults.cssClassPrefix + 'disabled']: disabled,
       })}>
       <FieldErrorScrollTarget />
-      {meta.warning && <div className="warning">{meta.warning}</div>}
+      {meta.warning && (
+        <div className={FormDefaults.cssClassPrefix + 'warning'}>
+          {meta.warning}
+        </div>
+      )}
       <label htmlFor={input.id}>{label}</label>
       {children}
-      {meta.error && <div className="error">{meta.error}</div>}
-      {helpText && <div className="help">{helpText}</div>}
+      {meta.error && (
+        <div className={FormDefaults.cssClassPrefix + 'error'}>
+          {meta.error}
+        </div>
+      )}
+      {helpText && (
+        <div className={FormDefaults.cssClassPrefix + 'help'}>{helpText}</div>
+      )}
     </div>
   );
 }

package/src/Input/IconInputGroup.tsx

@@ -1,7 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroupWithRef, { InputGroupProps } from './InputGroup';
-import useStandardFormInput from '../Field/useStandardField';
+import { FormDefaults } from '../FormDefaults';
 
 // TODO: make className tailwind-able instead of css. make it typeof string ????
 // or should we just give a div a className and let each project decide? (this seems to be the patern)
@@ -26,7 +26,10 @@ function IconInputGroup(
       <InputGroupWithRef
         icon={icon}
         ref={ref}
-        className={classNames(className, 'icon-input-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'icon-input-group'
+        )}
         value={input.value || ''}
         onChange={(e) => {
           if (!e.target.value) {

package/src/Input/InputGroup.tsx

@@ -2,6 +2,7 @@ import React, { ChangeEventHandler, LegacyRef } from 'react';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
 
 export interface InputGroupProps<TValue>
   extends InjectedFieldProps<TValue>,
@@ -38,7 +39,10 @@ function InputGroup<TValue>(
       disabled={disabled}
       label={label}
       helpText={helpText}
-      className={classNames(className, 'input-group')}>
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'input-group'
+      )}>
       {icon}
       <input
         {...input}
@@ -46,7 +50,10 @@ function InputGroup<TValue>(
         value={value}
         onChange={onChange}
         ref={ref}
-        className={classNames(className, 'input-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'input-group'
+        )}
       />
     </Group>
   );

package/src/Input/MoneyInputGroup.tsx

@@ -1,6 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
 
 export interface MoneyInputGroupProps
   extends Omit<
@@ -24,7 +25,10 @@ function MoneyInputGroup(
       min={0}
       {...rest}
       type="number"
-      className={classNames(className, 'money-group')}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'money-group'
+      )}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Input/NumberInputGroup.tsx

@@ -1,6 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
 
 export interface NumberInputGroupProps
   extends Omit<
@@ -22,7 +23,10 @@ function NumberInputGroup(
       ref={ref}
       {...rest}
       type="number"
-      className={classNames(className, 'number-group')}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'number-group'
+      )}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Input/StringInputGroup.tsx

@@ -1,6 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
 
 export interface StringInputGroupProps
   extends Omit<
@@ -28,7 +29,10 @@ function StringInputGroup(
     <InputGroup
       ref={ref}
       {...rest}
-      className={classNames(className, 'string-group')}
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'string-group'
+      )}
       value={input.value || ''}
       onChange={(e) => {
         if (!e.target.value) {

package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`IconInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="icon-input-group input-group group"
+      class="envoc-form-icon-input-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="namewithicon-error-scroll-target"
@@ -20,7 +20,7 @@ exports[`IconInputGroup has matching snapshot 1`] = `
         Pretend this is an icon
       </span>
       <input
-        class="icon-input-group input-group"
+        class="envoc-form-icon-input-group envoc-form-input-group"
         id="nameWithIcon"
         name="nameWithIcon"
         value=""

package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`MoneyInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="something-here money-group input-group group"
+      class="something-here envoc-form-money-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="yearlysalaryusd-error-scroll-target"
@@ -19,7 +19,7 @@ exports[`MoneyInputGroup has matching snapshot 1`] = `
         Salary
       </label>
       <input
-        class="something-here money-group input-group"
+        class="something-here envoc-form-money-group envoc-form-input-group"
         id="yearlySalaryUSD"
         min="0"
         name="yearlySalaryUSD"

package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`NumberInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="number-group input-group group"
+      class="envoc-form-number-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="numberofarms-error-scroll-target"
@@ -19,7 +19,7 @@ exports[`NumberInputGroup has matching snapshot 1`] = `
         Arm Count
       </label>
       <input
-        class="number-group input-group"
+        class="envoc-form-number-group envoc-form-input-group"
         id="numberOfArms"
         name="numberOfArms"
         type="number"

package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`StringInputGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="string-group input-group group"
+      class="envoc-form-string-group envoc-form-input-group envoc-form-group"
     >
       <div
         id="name-error-scroll-target"
@@ -19,7 +19,7 @@ exports[`StringInputGroup has matching snapshot 1`] = `
         Name
       </label>
       <input
-        class="string-group input-group"
+        class="envoc-form-string-group envoc-form-input-group"
         id="name"
         name="name"
         value=""

package/src/Select/SelectGroup.tsx

@@ -2,6 +2,7 @@ import { default as ReactSelect } from 'react-select';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
 
 export interface SelectOption<TValue> {
   value: (TValue extends Array<infer P> ? P : TValue) | undefined;
@@ -65,8 +66,11 @@ export default function SelectGroup<TValue>({
       meta={meta}
       className={classNames(
         className,
-        { multiple, 'is-loading': isLoading },
-        'select-group'
+        {
+          [FormDefaults.cssClassPrefix + 'multiple']: multiple,
+          [FormDefaults.cssClassPrefix + 'loading']: isLoading,
+        },
+        FormDefaults.cssClassPrefix + 'select-group'
       )}>
       <ReactSelect<
         Partial<SelectOption<TValue>>,
@@ -85,7 +89,10 @@ export default function SelectGroup<TValue>({
           }
         }}
         getOptionLabel={(option) => option?.label ?? ''}
-        className={classNames(className, 'select-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'select-group'
+        )}
         classNamePrefix="react-select"
         menuPortalTarget={document.body}
         menuPlacement="auto"

package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="select-group group"
+      class="envoc-form-select-group envoc-form-group"
     >
       <div
         id="allowlogin-error-scroll-target"
@@ -19,7 +19,7 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
         Allow Login
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="multiple select-group group"
+      class="envoc-form-multiple envoc-form-select-group envoc-form-group"
     >
       <div
         id="userroles-error-scroll-target"
@@ -19,7 +19,7 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
         Favorite Number
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -103,10 +103,10 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="select-group group"
+      class="envoc-form-select-group envoc-form-group"
     >
       <div
         id="favoritenumber-error-scroll-target"
@@ -118,7 +118,7 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
         Favorite Number
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="multiple select-group group"
+      class="envoc-form-multiple envoc-form-select-group envoc-form-group"
     >
       <div
         id="favoritecolors-error-scroll-target"
@@ -19,7 +19,7 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
         Favorite Color
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -103,10 +103,10 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <div
-      class="select-group group"
+      class="envoc-form-select-group envoc-form-group"
     >
       <div
         id="favoritecolor-error-scroll-target"
@@ -118,7 +118,7 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
         Favorite Color
       </label>
       <div
-        class="select-group css-b62m3t-container"
+        class="envoc-form-select-group css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"

package/src/StandardFormActions.tsx

@@ -2,6 +2,7 @@ import { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import SubmitFormButton from './SubmitFormButton';
+import { FormDefaults } from './FormDefaults';
 
 export interface StandardFormActionsProps {
   allowPristineSubmit?: boolean;
@@ -19,7 +20,9 @@ export default function StandardFormActions({
       <SubmitFormButton allowPristineSubmit={allowPristineSubmit} />
       &nbsp;
       <button
-        className={classNames('standard-form-actions-cancel-button')}
+        className={classNames(
+          FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'
+        )}
         type="button"
         disabled={isSubmitting}
         onClick={handleCancel || goBack}>

package/src/SubmitFormButton.tsx

@@ -1,6 +1,7 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
+import { FormDefaults } from './FormDefaults';
 
 export interface SubmitFormButtonProps
   extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
@@ -33,7 +34,10 @@ function SubmitFormButton(
           ? "You haven't made any changes"
           : ''
       }
-      className={classNames('submit-form-button', className)}>
+      className={classNames(
+        FormDefaults.cssClassPrefix + 'submit-form-button',
+        className
+      )}>
       {children || 'Submit'}
     </button>
   );

package/src/TextArea/TextAreaGroup.tsx

@@ -2,6 +2,7 @@ import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
 import Group, { GroupProps } from '../Group';
+import { FormDefaults } from '../FormDefaults';
 
 export interface TextAreaGroupProps
   extends InjectedFieldProps<string | undefined>,
@@ -34,7 +35,10 @@ function TextAreaGroup(
       disabled={disabled}
       label={label}
       helpText={helpText}
-      className={classNames(className, 'text-area-group')}>
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'text-area-group'
+      )}>
       {icon}
       <textarea
         {...input}
@@ -42,7 +46,10 @@ function TextAreaGroup(
         value={input.value}
         onChange={(val) => input.onChange(val.target.value)}
         ref={ref}
-        className={classNames(className, 'text-area-group')}
+        className={classNames(
+          className,
+          FormDefaults.cssClassPrefix + 'text-area-group'
+        )}
       />
     </Group>
   );

package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`StandardFormActions has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <button
-      class="submit-form-button"
+      class="envoc-form-submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"
@@ -16,7 +16,7 @@ exports[`StandardFormActions has matching snapshot 1`] = `
     </button>
      
     <button
-      class="standard-form-actions-cancel-button"
+      class="envoc-form-standard-form-actions-cancel-button"
       type="button"
     >
       Cancel

package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`SubmitFormButton has matching snapshot 1`] = `
 <DocumentFragment>
   <form
     action="#"
-    class="form"
+    class="envoc-form-form"
   >
     <button
-      class="submit-form-button"
+      class="envoc-form-submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"

package/src/index.ts

@@ -76,6 +76,9 @@ export type { FormActionsProps as FormActionsProps } from './FormActions';
 export { default as StandardFormActions } from './StandardFormActions';
 export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
 
+// FormDefaults
+export { FormDefaults } from './FormDefaults';
+
 // Input
 export { default as Group } from './Group';
 export type { GroupProps as GroupProps } from './Group';