From bb8571dfbe5aae6bdbdfebc3160842a38d3e0ddf Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:16:15 -0500 Subject: [PATCH] feat: TUP-700 @tacc/core-components - use, test, fix (#465) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: revert FormikFieldWrapper→FieldWrapperFormik * fix: support .js imports * chore: use index.js when component is .jsx * fix: make FormikCheck useField like other fields * fix: FieldWrapper… TACC-Cloud/Hazmapper form crash TACC-Cloud/hazmapper's only form crashed. If checkbox is removed, then now it doesn't. Expect checkbox fix in next commit. https://github.com/TACC-Cloud/hazmapper/pull/239 * fix: FieldWrapper… TACC-Cloud/Hazmapper checkbox TACC-Cloud/hazmapper's only checkbox field crashed. Now it doesn't. https://github.com/TACC-Cloud/hazmapper/pull/239 * fix: FormikCheck not supporting ID attr * chore: npx nx format:write * fix: FieldWrapper… ID fallback support incomplete * fix: remove unused prop * refactor: use Formik field wrappers as components * fix: FieldWrapper… ID fallback support STILL incomplete * docs: update author, add contributors * Move to peer dependencies (#484) * Move to peer dependencies Also add vite for building as we want to make stand-alone * Make 0.0.3 prelease * Bump postcss and postcss-preset-env to match core styles requirements * Fix pretty issue * Add vite-plugin-lib-inject-css * Make uuid only as a dependeny allow any 8 or 9 version --------- Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com> --------- Co-authored-by: Nathan Franklin --- .../UIPatternsComplexWizard/steps/StepOne.tsx | 7 +- .../steps/StepThree.tsx | 16 +- .../UIPatternsComplexWizard/steps/StepTwo.tsx | 13 +- .../app/UIPatternsWizard/steps/StepOne.tsx | 7 +- .../app/UIPatternsWizard/steps/StepThree.tsx | 4 +- .../app/UIPatternsWizard/steps/StepTwo.tsx | 4 +- libs/core-components/package.json | 24 +- libs/core-components/src/index.ts | 4 +- .../FieldWrapperFormik.global.css} | 0 .../FieldWrapperFormik.tsx} | 28 +- .../fields/FormikCheck.module.css | 0 .../FieldWrapperFormik/fields/FormikCheck.tsx | 36 + .../FormikFileInput/FileDropzone.module.css | 0 .../FormikFileInput/FileDropzone.test.tsx | 0 .../fields/FormikFileInput/FileDropzone.tsx | 4 +- .../FormikFileInput/FormikFileInput.tsx | 17 +- .../fields/FormikInput.tsx | 13 +- .../fields/FormikSelect.tsx | 13 +- .../fields/FormikTextarea.tsx | 13 +- .../fields/formikPatch.ts | 0 .../fields/index.ts | 11 +- .../fields/styles.css | 0 .../index.ts | 2 +- .../FormikFieldWrapper/fields/FormikCheck.tsx | 37 - libs/core-components/vite.config.ts | 15 +- .../auth/LoginComponent/LoginComponent.tsx | 10 +- .../details/ProjectEdit/ProjectEditForm.tsx | 25 +- .../details/grants/ProjectGrantFormFields.tsx | 48 +- .../ProjectPublicationFormFIelds.tsx | 24 +- .../TicketCreateModal/TicketCreateForm.tsx | 46 +- .../TicketDetailModal/TicketReplyForm.tsx | 6 +- package-lock.json | 9158 ++++++++++------- package.json | 3 +- 33 files changed, 5867 insertions(+), 3721 deletions(-) rename libs/core-components/src/lib/{FormikFieldWrapper/FormikFieldWrapper.global.css => FieldWrapperFormik/FieldWrapperFormik.global.css} (100%) rename libs/core-components/src/lib/{FormikFieldWrapper/FormikFieldWrapper.tsx => FieldWrapperFormik/FieldWrapperFormik.tsx} (59%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikCheck.module.css (100%) create mode 100644 libs/core-components/src/lib/FieldWrapperFormik/fields/FormikCheck.tsx rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikFileInput/FileDropzone.module.css (100%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikFileInput/FileDropzone.test.tsx (100%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikFileInput/FileDropzone.tsx (97%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikFileInput/FormikFileInput.tsx (77%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikInput.tsx (64%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikSelect.tsx (67%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/FormikTextarea.tsx (64%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/formikPatch.ts (100%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/index.ts (73%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/fields/styles.css (100%) rename libs/core-components/src/lib/{FormikFieldWrapper => FieldWrapperFormik}/index.ts (61%) delete mode 100644 libs/core-components/src/lib/FormikFieldWrapper/fields/FormikCheck.tsx diff --git a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx index ef2df37d1..d5e0e8691 100644 --- a/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx +++ b/apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx @@ -1,19 +1,22 @@ import { FormikInput } from '@tacc/core-components'; import * as Yup from 'yup'; import { UIWizardStep, useWizardValues, InitialValueGenerator } from '..'; +import { Field } from 'formik'; export const StepOne: React.FC = () => { const { extra } = useWizardValues(); return (

Step One: Extra value two is {extra.extraTwo}

- - = ({ note="more values inside" className={fieldArrayStyles.item} > - - = ({ title={`Field Array ${outerIndex}`} className={fieldArrayStyles.item} > - = ({ note="more values inside" className={fieldArrayStyles.item} > - - { return (

Step One

- - { return (

Step Three

- { return (

Step Two

- ", + "author": "TACC ACI WMA ", + "contributors": [ + "TACC COA CMD " + ], "description": "React component library for TACC applications.", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -10,17 +13,22 @@ "dist" ], "homepage": "https://github.com/TACC/tup-ui/libs/core-components", + "scripts": { + "build": "vite build --outDir dist" + }, "dependencies": { + "uuid": "^8 || ^9" + }, + "peerDependencies": { "formik": "^2.2.9", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-resize-detector": "^7.1.2", - "react-router-dom": "6.11.2", + "react-router-dom": "^6.11.2", "react-step-wizard": "^5.3.11", "react-table": "^7.8.0", - "reactstrap": "^9.1.5", - "uuid": "^8.3.2" + "reactstrap": "^9.1.5" }, "devDependencies": { "@nx/react": "^17.2.8", @@ -30,7 +38,7 @@ "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.5.2", "@vitejs/plugin-react-swc": "^3.5.0", - "uuid": "^8.3.2", + "vite": "^5.0.11", "vite-plugin-dts": "^2.3.0", "vite-plugin-lib-inject-css": "^2.1.1", "vite-tsconfig-paths": "^4.2.0" diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts index c19ed2dc7..e396bb4c0 100644 --- a/libs/core-components/src/index.ts +++ b/libs/core-components/src/index.ts @@ -27,12 +27,12 @@ export { default as SubmitWrapper } from './lib/SubmitWrapper'; export { default as Wizard, useWizard, WizardNavigation } from './lib/Wizard'; export type WizardStep = WizardStepType; export { - FormikFieldWrapper, + FieldWrapperFormik, FormikInput, FormikSelect, FormikCheck, FormikTextarea, FormikFileInput, -} from './lib/FormikFieldWrapper'; +} from './lib/FieldWrapperFormik'; export { default as withBuilder } from './utils/withBuilder'; diff --git a/libs/core-components/src/lib/FormikFieldWrapper/FormikFieldWrapper.global.css b/libs/core-components/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css similarity index 100% rename from libs/core-components/src/lib/FormikFieldWrapper/FormikFieldWrapper.global.css rename to libs/core-components/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css diff --git a/libs/core-components/src/lib/FormikFieldWrapper/FormikFieldWrapper.tsx b/libs/core-components/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx similarity index 59% rename from libs/core-components/src/lib/FormikFieldWrapper/FormikFieldWrapper.tsx rename to libs/core-components/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx index 1114e5d43..a5c8ae4c5 100644 --- a/libs/core-components/src/lib/FormikFieldWrapper/FormikFieldWrapper.tsx +++ b/libs/core-components/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx @@ -1,42 +1,42 @@ import React from 'react'; -import { ErrorMessage } from 'formik'; +import { FieldProps } from 'formik'; import { Badge } from 'reactstrap'; -import './FormikFieldWrapper.global.css'; +import './FieldWrapperFormik.global.css'; export type FieldWrapperProps = { - name: string; + id?: string; label: React.ReactNode; required?: boolean; className?: string; description?: React.ReactNode; + formik: FieldProps; }; + const FieldWrapper: React.FC> = ({ - name, + id, label, required, description, className, children, + formik: { field, form }, }) => { return (
-
); diff --git a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikCheck.module.css b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikCheck.module.css similarity index 100% rename from libs/core-components/src/lib/FormikFieldWrapper/fields/FormikCheck.module.css rename to libs/core-components/src/lib/FieldWrapperFormik/fields/FormikCheck.module.css diff --git a/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikCheck.tsx b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikCheck.tsx new file mode 100644 index 000000000..72788a730 --- /dev/null +++ b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikCheck.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import FieldWrapper from '../FieldWrapperFormik'; +import { FormikInputProps } from '.'; + +const FormikCheck: React.FC = ({ + id, + name, + label, + required, + description, + field, + form, + meta, + ...props +}: FormikInputProps) => { + return ( + + + + ); +}; + +export default FormikCheck; diff --git a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.module.css b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.module.css similarity index 100% rename from libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.module.css rename to libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.module.css diff --git a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.test.tsx b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.test.tsx similarity index 100% rename from libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.test.tsx rename to libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.test.tsx diff --git a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.tsx b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.tsx similarity index 97% rename from libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.tsx rename to libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.tsx index f85d3b974..7ee0ea8c1 100644 --- a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.tsx +++ b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.tsx @@ -5,6 +5,7 @@ import { InlineMessage, Button } from '../../../..'; import styles from './FileDropzone.module.css'; interface FileInputDropzoneProps { + id: string; files: File[]; onDrop: (files: File[]) => void; onRemoveFile: (index: number) => void; @@ -18,6 +19,7 @@ interface FileInputDropzoneProps { * and user can manage (e.g. delete those files) directly in this component. */ const FileInputDropZone: React.FC = ({ + id, files, onDrop, maxSize, @@ -60,7 +62,7 @@ const FileInputDropZone: React.FC = ({ return ( // eslint-disable-next-line react/jsx-props-no-spreading
- + {!showFileList && (
diff --git a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FormikFileInput.tsx b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FormikFileInput.tsx similarity index 77% rename from libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FormikFileInput.tsx rename to libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FormikFileInput.tsx index 918382f7d..14754e93c 100644 --- a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FormikFileInput.tsx +++ b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikFileInput/FormikFileInput.tsx @@ -1,10 +1,11 @@ /* FP-993: Allow use by DataFilesUploadModal */ import React from 'react'; -import { useField } from 'formik'; +import { useField, FieldProps } from 'formik'; import FileInputDropZone from './FileDropzone'; -import FieldWrapper from '../../FormikFieldWrapper'; +import FieldWrapper from '../../FieldWrapperFormik'; -interface FormikFileInputProps { +interface FormikFileInputProps extends FieldProps { + id: string; name: string; label: string; required: boolean; @@ -14,14 +15,18 @@ interface FormikFileInputProps { } const FileInputDropZoneFormField: React.FC = ({ + id, name, label, description, maxSizeMessage, maxSize, required, + field, + form, + meta, }) => { - const [field, , helpers] = useField(name); + const [, , helpers] = useField(name); const onSetFiles = (acceptedFiles: File[]) => { const newAcceptedFiles = acceptedFiles.filter( @@ -35,12 +40,14 @@ const FileInputDropZoneFormField: React.FC = ({ }; return ( = ({ + id, name, label, required, description, + field, + form, + meta, ...props }: FormikInputProps) => { - const [field] = useField(name); return ( - + ); }; diff --git a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikSelect.tsx b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikSelect.tsx similarity index 67% rename from libs/core-components/src/lib/FormikFieldWrapper/fields/FormikSelect.tsx rename to libs/core-components/src/lib/FieldWrapperFormik/fields/FormikSelect.tsx index 785c72803..a80cea141 100644 --- a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikSelect.tsx +++ b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikSelect.tsx @@ -1,25 +1,28 @@ import React from 'react'; -import FieldWrapper from '../FormikFieldWrapper'; -import { useField } from 'formik'; +import FieldWrapper from '../FieldWrapperFormik'; import { FormikSelectProps } from '.'; const FormikTextarea: React.FC = ({ + id, name, label, required, description, children, + field, + form, + meta, ...props }: FormikSelectProps) => { - const [field] = useField(name); return ( - {children} diff --git a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikTextarea.tsx b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikTextarea.tsx similarity index 64% rename from libs/core-components/src/lib/FormikFieldWrapper/fields/FormikTextarea.tsx rename to libs/core-components/src/lib/FieldWrapperFormik/fields/FormikTextarea.tsx index 66570d77d..bef566585 100644 --- a/libs/core-components/src/lib/FormikFieldWrapper/fields/FormikTextarea.tsx +++ b/libs/core-components/src/lib/FieldWrapperFormik/fields/FormikTextarea.tsx @@ -1,24 +1,27 @@ import React from 'react'; -import FieldWrapper from '../FormikFieldWrapper'; -import { useField } from 'formik'; +import FieldWrapper from '../FieldWrapperFormik'; import { FormikTextareaProps } from '.'; const FormikTextarea: React.FC = ({ + id, name, label, required, description, + field, + form, + meta, ...props }: FormikTextareaProps) => { - const [field] = useField(name); return ( -