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 ( -