@simoncomputing/mui-bueno-v3 0.1.13 → 0.1.15

package/README.md

@@ -1,6 +1,6 @@
 # MUI Bueno v3
 
-A React component library based on [Material UI](https://mui.com/material-ui) components with built-in support for [Formik](https://formik.org/). Rebuilt & redesigned based on the original [mui-bueno](https://www.npmjs.com/package/mui-bueno) library, and expanded to provide additional components beyond form components.
+A React component library based on [Material UI](https://mui.com/material-ui) components with built-in support for [React Hook Form](https://react-hook-form.com/). Rebuilt & redesigned based on the original [mui-bueno](https://www.npmjs.com/package/@simoncomputing/mui-bueno-v3) library, and expanded to provide additional components beyond form components.
 
 ![SimonComputing Logo](https://simoncomputing.com/staging/img/sc-logo/SC_logo_scratched_bluer_mobile.png)
 
@@ -24,6 +24,75 @@ npm install mui-bueno-v3
 </MForm>
 ```
 
+## Running the Library Locally
+
+To test locally before submitting to NPM, perform the following:
+
+```shell
+
+rm -rf dist
+npm run build:lib
+npm pack
+
+# will output something like: simoncomputing-mui-bueno-v3-0.1.14.tgz
+```
+
+In the application repo:
+
+```shell
+# Update package to look for this file in the proper directory.
+npm i ~/git/mui-bueno-v3/simoncomputing-mui-bueno-v3-0.1.15.tgz
+
+# Install
+npm install
+
+## If you want a clean reinstall
+rm -rf node_modules package-lock.json
+npm install
+```
+
+## Deploying to NPM
+
+#### Get an NPM Account
+
+1. Request an account from Simon, indicate you want to deploy mui-bueno-v3.
+
+#### Log into NPM
+
+1. At command line, type: `npm login`
+1. You'll be prompted to press enter to open the browser.
+1. Finish your login process.
+1. You can now confirm you're logged in:
+
+```shell
+
+# This should identify your user ID
+npm whoami
+
+# Logout
+npm logout
+
+# Running whoami again should return an error
+npm whoami
+
+# Log back in
+npm login
+```
+
+#### Run the build
+
+Go into `package.json` and set `private` to `false`. Don't check this in as this is safety against accidental deployment.
+
+```shell
+# Test with dry run
+npm run publishLib:dryrun
+
+# Run actual deployment
+npm run publishLib
+```
+
+Undo your change to `package.json`
+
 ## Documentation & Demo
 
 This project uses Storybook to document and demonstrate the components. _URL COMING SOON._

package/dist/@types/index.d.ts

@@ -190,3 +190,5 @@ export type UnsavedCitation = {
 export type UnsavedAttachment = {
     file?: File;
 } & UnsavedCitation;
+
+export type StoryFormValues = Record<string, any>;

package/dist/components/Form/Inputs/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import { AutocompleteProps as MuiAutocompleteProps, TypographyProps } from '@mui/material';
 export type BaseAutocompleteProps<T> = {
     /**
-     * Name of the component. Must match a key from initialValues in Formik.
+     * Name of the component. Must match a key from initialValues in react-hook-form.
      * @required
      */
     name: string;
@@ -38,7 +38,7 @@ export type BaseAutocompleteProps<T> = {
     /**
      * If true, an asterisk will be displayed next to the label
      * Most browsers will automatically validate this, but it's recommended to also
-     * have Formik also validate as well so that `Error` displays for consistency.
+     * have react-hook-form also validate as well so that `Error` displays for consistency.
      * @default false
      */
     required?: boolean;
@@ -48,13 +48,13 @@ export type BaseAutocompleteProps<T> = {
      */
     clearOnSelect?: boolean;
     /**
-     * When using Autocomplete with objects, this prop can be used to store only a property of that object in formik.
+     * When using Autocomplete with objects, this prop can be used to store only a property of that object in react-hook-form.
      *
      * For example, if you have `type User = { id: number; firstName: string; lastName: string; ... }`, you can
-     * set useFieldAsValue="id" if you want formik to only store the user's id rather than the whole user object.
+     * set useFieldAsValue="id" if you want react-hook-form to only store the user's id rather than the whole user object.
      *
-     * NOTE: This will require extra processing on the client-side compared to just using the object for the formik value
-     * because the Autocomplete will have to search `options` for the object with the property matching formik's initial value.
+     * NOTE: This will require extra processing on the client-side compared to just using the object for the react-hook-form value
+     * because the Autocomplete will have to search `options` for the object with the property matching react-hook-form's initial value.
      *
      */
     useFieldAsValue?: string;

package/dist/components/Form/Inputs/Checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ import { CheckboxProps as MuiCheckboxProps, TypographyProps } from '@mui/materia
 import * as React from "react";
 type BaseCheckboxProps = {
     /**
-     * Must match a key from initialValues in Formik.
+     * Must match a key from initialValues in react-hook-form.
      * @required
      */
     name: string;
@@ -36,7 +36,7 @@ type BaseCheckboxProps = {
     /**
      * If true, an asterisk will be displayed next to the label
      * Most browsers will automatically validate this, but it's recommended to also
-     * have Formik also validate as well so that `Error` displays for consistency.
+     * have react-hook-form also validate as well so that `Error` displays for consistency.
      * @default false
      */
     required?: boolean;

package/dist/components/Form/Inputs/CheckboxGroup/CheckboxGroup.d.ts

@@ -59,7 +59,7 @@ export type CheckboxGroupProps = {
     /**
      * If true, an asterisk will be displayed next to the label
      * Most browsers will automatically validate this, but it's recommended to also
-     * have Formik also validate as well so that `Error` displays for consistency.
+     * have react-hook-form also validate as well so that `Error` displays for consistency.
      * @default false
      */
     required?: boolean;

package/dist/components/Form/Inputs/FileUpload/FileUpload.d.ts

@@ -2,7 +2,7 @@ import { TypographyProps } from '@mui/material';
 import * as React from 'react';
 export type FileUploadProps = {
     /**
-     * Must match a key from initialValues in Formik.
+     * Must match a key from initialValues in react-hook-form.
      * @required
      */
     name: string;

package/dist/components/Form/Inputs/RadioGroup/RadioGroup.d.ts

@@ -86,7 +86,7 @@ type BaseRadioGroupProps<T> = {
     /**
      * If true, an asterisk will be displayed next to the label
      * Most browsers will automatically validate this, but it's recommended to also
-     * have ( NOT Formik) also validate as well so that `Error` displays for consistency.
+     * have ( NOT react-hook-form) also validate as well so that `Error` displays for consistency.
      * @default false
      */
     required?: boolean;

package/dist/components/Form/Inputs/RangeSlider/RangeSlider.d.ts

@@ -2,7 +2,7 @@ import { SliderProps, TypographyProps } from '@mui/material';
 import * as React from 'react';
 type BaseRangeSliderProps = {
     /**
-     * Must match a key from initialValues in Formik.
+     * Must match a key from initialValues in react-hook-form.
      * @required
      */
     name: string;

package/dist/components/Form/Inputs/Select/Select.d.ts

@@ -35,7 +35,7 @@ export interface SelectOption<T> {
     /**
      * If true, an asterisk will be displayed next to the label
      * Most browsers will automatically validate this, but it's recommended to also
-     * have Formik also validate as well so that `Error` displays for consistency.
+     * have react-hook-form also validate as well so that `Error` displays for consistency.
      * @default false
      */
     required?: boolean;

package/dist/components/Form/Inputs/TextField/TextField.d.ts

@@ -2,7 +2,7 @@ import { TypographyProps, TextFieldProps as MuiTextFieldProps } from '@mui/mater
 import * as React from "react";
 type BaseTextFieldProps = {
     /**
-     * Name and ID of the component. Must match a key from initialValues in Formik.
+     * Name and ID of the component. Must match a key from initialValues in react-hook-form.
      * @required
      */
     name: string;

package/dist/components/Form/MForm/MForm.d.ts

@@ -1,19 +1,24 @@
+import { default as React } from 'react';
 import { SubmitHandler, FieldValues, DefaultValues, FieldErrors, UseFormSetValue, UseFormReturn } from 'react-hook-form';
 import { AnyObjectSchema } from 'yup';
+type MFormChildProps<T extends FieldValues> = {
+    values: T;
+    setValue: UseFormSetValue<T>;
+    methods: UseFormReturn<T>;
+};
 type MFormProps<T extends FieldValues> = Readonly<{
     initialValues: DefaultValues<T>;
     initialErrors?: FieldErrors<T>;
-    onSubmit: SubmitHandler<T>;
-    children: React.ReactNode | ((props: {
-        values: T;
-        setValue: UseFormSetValue<T>;
-        methods: UseFormReturn<T>;
-    }) => React.ReactNode);
+    onSubmit: SubmitHandler<T> | ((values: T) => Promise<void>);
+    children: React.ReactNode | ((props: MFormChildProps<T>) => React.ReactNode);
     validationSchema?: AnyObjectSchema;
     shouldValidateOption?: boolean;
     shouldDirtyOption?: boolean;
     validationOnMount?: boolean;
     enableReinitialize?: boolean;
+    /** Automatically catch and apply 422 server errors (Axios-style). */
+    applyAxios422Errors?: boolean;
+    submitRef?: React.RefObject<(() => Promise<void>) | null>;
 }>;
-export declare function MForm<T extends FieldValues>({ initialValues, onSubmit, children, initialErrors, validationSchema, shouldValidateOption, shouldDirtyOption, validationOnMount, enableReinitialize }: MFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MForm<T extends FieldValues>({ initialValues, onSubmit, children, initialErrors, validationSchema, shouldValidateOption, shouldDirtyOption, validationOnMount, enableReinitialize, applyAxios422Errors, submitRef, }: MFormProps<T>): import("react/jsx-runtime").JSX.Element;
 export default MForm;

package/dist/components/Form/MForm/MFormContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type ServerErrorMap = Record<string, string>;
+type MFormCtx = {
+    applyServerErrors: (errors: ServerErrorMap, focusFirst?: boolean) => void;
+};
+export declare const MFormContext: React.Context<MFormCtx | null>;
+export declare function useMForm(): MFormCtx;
+export {};

package/dist/components/Form/RepeatableFormGroup/RepeatableFormGroup.d.ts

@@ -4,12 +4,12 @@ type RepeatableGroupWrapperType = 'card' | 'elevatedCard' | 'none';
 type RepeatableRemovePosition = 'bottom' | 'right';
 export type RepeatableFormGroupProps<T> = {
     /**
-     * Name of field. Must match the name of the array in Formik.
+     * Name of field. Must match the name of the array in react-hook-form.
      */
     name: string;
     /**
      * An "empty" object of type T.
-     * This is what you would normally pass to initialState for Formik for a single object of type T
+     * This is what you would normally pass to initialState for react-hook-form for a single object of type T
      */
     initialState: T;
     /**
@@ -83,7 +83,7 @@ export type RepeatableFormGroupProps<T> = {
 };
 /**
  * Repeatable Form Group is used for handling arrays in forms. It automatically handles adding & removing
- * field groups (components containing one or multiple fields) using Formik.
+ * field groups (components containing one or multiple fields) using react-hook-form.
  */
 export declare const RepeatableFormGroup: <T>(props: RepeatableFormGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default RepeatableFormGroup;