feat: TUP-700 @tacc/core-components - wrappers (#461)

* test(@tacc/core-components): TUP-700 (WIP)

* fix: tup-700 do not commit dist

* docs(README): tup-700 add `build core-components`

* feat: tup-700 peer dependencies

* feat: tup-700 build (no tested on a client yet)

* feat: tup-700 1st attempt to split files/css build

* fix: tup-700 add main file to dist

* build: tup-700 do not build tests

* fix: tup-700 add types & fix resulting errors

1. import & use `dts`
    - Fixes build error:
      > error TS2307: Cannot find module './….module.css' or its corresponding type declarations.
      > … import styles from './….module.css';

2. `"composite": true`
    - Fixes Typescript lint error:
      > Referenced project '/…/tup-ui/libs/core-components/tsconfig.lib.json' must have setting "composite": true.

3. `"declaration": true,`
    - Seemingly caused by `"composite": true`.
    - Fixes Vite build error:
    > \> nx run core-components:build:production
    > error TS6304: Composite projects may not disable declaration emit.

* fix: tup-700 tag types in package.json

* style: tup-700 move rollup opts input glob inline

* style: npx nx format:write

* style: tup-700 peerDependencies

"So the consuming application is aware that it must have React installed to use this package."
— https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#dependencies

* feat: tup-700 add CSS as sideEffects

"To prevent the CSS files from being accidentally removed by the consumer's tree-shaking efforts…"
—https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#side-effects

* feat: tup-700 ensure build before publish

* fix: tup-700 do 2d5ab1c, 6336f2c, 233f165 correct

Move the changes from thsoe commits to be in core-components package.json, not root package.json.

- style: tup-700 peerDependencies

    "So the consuming application is aware that it must have React installed to use this package."
    — https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#dependencies

- feat: tup-700 add CSS as sideEffects

    "To prevent the CSS files from being accidentally removed by the consumer's tree-shaking efforts…"
    — https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#side-effects

- feat: tup-700 ensure build before publish

* chore: tup-700 resolve vite.config.ts comment code

Resolve all commented code in `vite.config.ts`.

- `outDir` DELETED cuz `rollupOptions` > `output` exists
- `reportCompressedSize` RESTORED cuz why not & it was already there
- `commonjsOptions` & `transformMixedEsModules` DELETED cuz…
    - no `require` i.e. common js modules
- `lib`'s `name` and `fileName` DELETED cuz…
    - `rollupOptions` > `output` > `assetFileNames` exists
    - `rollupOptions` > `output` > `entryFileNames` exists

* fix: tup-700 scripts inaccurate

* docs: tup-700 README

* feat: tup-700 core-components deps via workspace

* fix: tup-700 core-components deps via workspace

* npx nx format:write

* fix: core-components/package-lock.json should not exist

Only 1 root package-lock.json in an Nx project such as tup-ui.

Having this may have been cause of errors when starting CMS.

* chore: rename Navbar → NavbarWrapper

* chore: rename FieldWrapperFormik → FormikFieldWrapper

* npx nx format:write

* chore: move withBuilder to core-components

* feat: move core-wrappers to core-components

Because the distinction between them is not accurate.

Both have components that import other components.

* lint: rename some index.js to index.ts

* lint: import via rel. path not lib name

* deps: add core-wrappers deps to peerDeps

* docs: do not reference lib names

This causes more work when renaming a library.

* docs: do reference (other) lib names

These references are outside of this lib, so yeah, reference lib name.

* docs(README): remove duplicate step

apps/ui-patterns/src/app/UIPatternsComplexWizard/UIPatternsComplexWizard.tsx

@@ -8,7 +8,7 @@
 import React, { useCallback, useMemo } from 'react';
 import useWizardValues, { UIWizardProvider } from './useWizardValues';
 import { UIWizardStep, UIWizardSchema, UIWizardExtra } from '.';
-import { Wizard, WizardStep } from '@tacc/core-wrappers';
+import { Wizard, WizardStep } from '@tacc/core-components';
 import wizardSteps from './steps';
 
 export const UIPatternsComplexWizardRender: React.FC<{
@@ -26,7 +26,7 @@ export const UIPatternsComplexWizardRender: React.FC<{
     [add]
   );
 
-  // Map Array of UIWizardSteps into an array of @tacc/core-wrappers/WizardStep
+  // Map Array of UIWizardSteps into an array of @tacc/core-components/WizardStep
   const steps: Array<WizardStep<UIWizardSchema>> = useMemo(() => {
     return wizardSteps.map((jobStep) => {
       const { generateInitialValues, validateThunk, ...stepProps } = jobStep;

apps/ui-patterns/src/app/UIPatternsComplexWizard/index.ts

@@ -34,7 +34,7 @@ export type InitialValueGenerator = (hookValues: {
   extra: UIWizardExtra;
 }) => Partial<UIWizardSchema>;
 
-// An adapter type for mapping additional values to @tacc/core-wrappers/Wizard
+// An adapter type for mapping additional values to @tacc/core-coponents/Wizard
 export type UIWizardStep = {
   id: string;
   name: string;

apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/LastStep.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState, useMemo } from 'react';
 import * as Yup from 'yup';
 import { UIWizardStep, UIWizardSchema, InitialValueGenerator } from '..';
 import { Button } from '@tacc/core-components';
-import { SubmitWrapper } from '@tacc/core-wrappers';
+import { SubmitWrapper } from '@tacc/core-components';
 import { validationSchema as stepOneValidationSchema } from './StepOne';
 import { validationSchema as stepTwoValidationSchema } from './StepTwo';
 import { validationSchema as stepThreeValidationSchema } from './StepThree';

apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx

@@ -1,4 +1,4 @@
-import { FormikInput } from '@tacc/core-wrappers';
+import { FormikInput } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { UIWizardStep, useWizardValues, InitialValueGenerator } from '..';
 

apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepThree.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormGroup } from 'reactstrap';
 import { Collapse, Button } from '@tacc/core-components';
 import { FieldArray, useFormikContext, FieldArrayRenderProps } from 'formik';
-import { FormikInput, FormikCheck } from '@tacc/core-wrappers';
+import { FormikInput, FormikCheck } from '@tacc/core-components';
 import * as Yup from 'yup';
 import fieldArrayStyles from './FieldArray.module.css';
 import {

apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepTwo.tsx

@@ -9,7 +9,7 @@ import { Button } from '@tacc/core-components';
 import fieldArrayStyles from './FieldArray.module.css';
 import { Collapse } from '@tacc/core-components';
 import { FieldArray, useFormikContext, FieldArrayRenderProps } from 'formik';
-import { FormikInput, FormikCheck } from '@tacc/core-wrappers';
+import { FormikInput, FormikCheck } from '@tacc/core-components';
 import {
   UIWizardStep,
   UIWizardComplexField,

apps/ui-patterns/src/app/UIPatternsComplexWizard/useWizardValues.tsx

@@ -8,7 +8,7 @@
 
 import React, { useContext } from 'react';
 import { UIWizardSchema, UIWizardExtra } from '.';
-import { withBuilder } from '@tacc/core-wrappers';
+import { withBuilder } from '@tacc/core-components';
 
 // A React context for the external values
 const UIWizardContext = React.createContext<UIWizardExtra>({

apps/ui-patterns/src/app/UIPatternsWizard/UIPatternsWizard.tsx

@@ -8,7 +8,7 @@
 import React, { useCallback } from 'react';
 import { UIWizardSchema } from '.';
 import { UIWizardProvider, useWizardValues } from '.';
-import { Wizard } from '@tacc/core-wrappers';
+import { Wizard } from '@tacc/core-components';
 import wizardSteps from './steps';
 
 const UIPatternsWizardRender: React.FC = () => {

apps/ui-patterns/src/app/UIPatternsWizard/steps/LastStep.tsx

@@ -2,8 +2,8 @@ import React, { useCallback, useState, useMemo } from 'react';
 import * as Yup from 'yup';
 import { UIWizardSchema, useWizardValues } from '..';
 import { Button } from '@tacc/core-components';
-import { SubmitWrapper } from '@tacc/core-wrappers';
-import { WizardStep } from '@tacc/core-wrappers';
+import { SubmitWrapper } from '@tacc/core-components';
+import { WizardStep } from '@tacc/core-components';
 import { validationSchema as stepOneValidationSchema } from './StepOne';
 import { validationSchema as stepTwoValidationSchema } from './StepTwo';
 import { validationSchema as stepThreeValidationSchema } from './StepThree';

apps/ui-patterns/src/app/UIPatternsWizard/steps/StepOne.tsx

@@ -1,5 +1,5 @@
-import { FormikInput } from '@tacc/core-wrappers';
-import { WizardStep } from '@tacc/core-wrappers';
+import { FormikInput } from '@tacc/core-components';
+import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
 

apps/ui-patterns/src/app/UIPatternsWizard/steps/StepThree.tsx

@@ -1,5 +1,5 @@
-import { FormikInput } from '@tacc/core-wrappers';
-import { WizardStep } from '@tacc/core-wrappers';
+import { FormikInput } from '@tacc/core-components';
+import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
 

apps/ui-patterns/src/app/UIPatternsWizard/steps/StepTwo.tsx

@@ -1,5 +1,5 @@
-import { FormikInput } from '@tacc/core-wrappers';
-import { WizardStep } from '@tacc/core-wrappers';
+import { FormikInput } from '@tacc/core-components';
+import { WizardStep } from '@tacc/core-components';
 import * as Yup from 'yup';
 import { useWizardValues, UIWizardSchema } from '..';
 

apps/ui-patterns/src/app/UIPatternsWizard/useWizardValues.tsx

@@ -5,7 +5,7 @@
  */
 
 import { UIWizardSchema } from '.';
-import { withBuilder } from '@tacc/core-wrappers';
+import { withBuilder } from '@tacc/core-components';
 
 // Use the withBuilder Higher Order Component to generate a context and provider
 const { useBuilderContext, Provider } = withBuilder<UIWizardSchema>();

libs/core-components/package.json

@@ -25,6 +25,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-resize-detector": "^7.1.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"

libs/core-components/src/index.ts

@@ -1,3 +1,5 @@
+import { WizardStep as WizardStepType } from './lib/Wizard';
+
 export { default as Button } from './lib/Button';
 export { default as Icon } from './lib/Icon';
 export { default as Section } from './lib/Section';
@@ -18,3 +20,19 @@ export { default as HistoryBadge } from './lib/HistoryBadge';
 export { default as Collapse } from './lib/Collapse';
 export { default as TextCopyField } from './lib/TextCopyField';
 export * from './lib/Form';
+
+export { Navbar, NavItem, QueryNavItem, AnchorNavItem } from './lib/Navbar';
+export { default as QueryWrapper } from './lib/QueryWrapper';
+export { default as SubmitWrapper } from './lib/SubmitWrapper';
+export { default as Wizard, useWizard, WizardNavigation } from './lib/Wizard';
+export type WizardStep<T> = WizardStepType<T>;
+export {
+  FormikFieldWrapper,
+  FormikInput,
+  FormikSelect,
+  FormikCheck,
+  FormikTextarea,
+  FormikFileInput,
+} from './lib/FormikFieldWrapper';
+
+export { default as withBuilder } from './utils/withBuilder';

libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx → libs/core-components/src/lib/FormikFieldWrapper/FormikFieldWrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ErrorMessage } from 'formik';
 import { Badge } from 'reactstrap';
 
-import './FieldWrapperFormik.global.css';
+import './FormikFieldWrapper.global.css';
 
 export type FieldWrapperProps = {
   name: string;

libs/core-wrappers/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.spec.tsx → libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.test.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { testRender } from '@tacc/tup-testing';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import FileDropzone from './FileDropzone';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -28,7 +29,7 @@ describe('dropzone', () => {
     const smallFile = new File(['file'], 'myfile.json', {
       type: 'application/json',
     });
-    testRender(<FileDropzoneWrapper maxSize={100000} />);
+    render(<FileDropzoneWrapper maxSize={100000} />);
     const input = screen.getByTestId('dropzone-input');
     await userEvent.upload(input, smallFile);
     expect(screen.getByText('myfile.json')).toBeDefined();
@@ -37,7 +38,7 @@ describe('dropzone', () => {
 
   it('Shows error when file is too big.', async () => {
     const bigFile = new File(['hi'], 'myfile', { type: 'image/jpeg' });
-    testRender(<FileDropzoneWrapper maxSize={0} />);
+    render(<FileDropzoneWrapper maxSize={0} />);
     const input = screen.getByTestId('dropzone-input');
     await userEvent.upload(input, bigFile);
     expect(screen.getByText(/Exceeds File Size Limit/)).toBeDefined();

libs/core-wrappers/src/lib/FieldWrapperFormik/fields/FormikFileInput/FileDropzone.tsx → libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FileDropzone.tsx

@@ -1,7 +1,7 @@
 /* FP-993: Allow use by DataFilesUploadModal */
 import React, { useCallback, useState } from 'react';
 import { useDropzone, FileRejection } from 'react-dropzone';
-import { InlineMessage, Button } from '@tacc/core-components';
+import { InlineMessage, Button } from '../../../..';
 import styles from './FileDropzone.module.css';
 
 interface FileInputDropzoneProps {

libs/core-wrappers/src/lib/FieldWrapperFormik/fields/FormikFileInput/FormikFileInput.tsx → libs/core-components/src/lib/FormikFieldWrapper/fields/FormikFileInput/FormikFileInput.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { useField } from 'formik';
 import FileInputDropZone from './FileDropzone';
-import FieldWrapper from '../../FieldWrapperFormik';
+import FieldWrapper from '../../FormikFieldWrapper';
 
 interface FormikFileInputProps {
   name: string;

libs/core-wrappers/src/lib/FieldWrapperFormik/fields/FormikInput.tsx → libs/core-components/src/lib/FormikFieldWrapper/fields/FormikInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import FieldWrapper from '../FieldWrapperFormik';
+import FieldWrapper from '../FormikFieldWrapper';
 import { useField } from 'formik';
 import { FormikInputProps } from '.';
 

libs/core-wrappers/src/lib/FieldWrapperFormik/fields/FormikSelect.tsx → libs/core-components/src/lib/FormikFieldWrapper/fields/FormikSelect.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import FieldWrapper from '../FieldWrapperFormik';
+import FieldWrapper from '../FormikFieldWrapper';
 import { useField } from 'formik';
 import { FormikSelectProps } from '.';
 

libs/core-wrappers/src/lib/FieldWrapperFormik/fields/FormikTextarea.tsx → libs/core-components/src/lib/FormikFieldWrapper/fields/FormikTextarea.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import FieldWrapper from '../FieldWrapperFormik';
+import FieldWrapper from '../FormikFieldWrapper';
 import { useField } from 'formik';
 import { FormikTextareaProps } from '.';
 

libs/core-wrappers/src/lib/FieldWrapperFormik/index.ts → libs/core-components/src/lib/FormikFieldWrapper/index.ts

@@ -1,4 +1,4 @@
-export { default as FieldWrapperFormik } from './FieldWrapperFormik';
+export { default as FormikFieldWrapper } from './FormikFieldWrapper';
 export {
   FormikInput,
   FormikSelect,

libs/core-wrappers/src/lib/Navbar/Navbar.tsx → libs/core-components/src/lib/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { Icon } from '@tacc/core-components';
+import { Icon } from '../..';
 import styles from './Navbar.module.css';
 
 type sizes = 'xs' | 'sm' | 'md' | 'lg';

libs/core-wrappers/src/lib/QueryWrapper/QueryWrapper.tsx → libs/core-components/src/lib/QueryWrapper/QueryWrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LoadingSpinner, Message } from '@tacc/core-components';
+import { LoadingSpinner, Message } from '../..';
 
 type QueryWrapperProps = React.PropsWithChildren<{
   isLoading: boolean;

libs/core-wrappers/src/lib/SubmitWrapper/SubmitWrapper.tsx → libs/core-components/src/lib/SubmitWrapper/SubmitWrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LoadingSpinner, Message } from '@tacc/core-components';
+import { LoadingSpinner, Message } from '../..';
 import styles from './SubmitWrapper.module.css';
 
 type SubmitWrapperProps = React.PropsWithChildren<{

libs/core-wrappers/src/lib/Wizard/Wizard.tsx → libs/core-components/src/lib/Wizard/Wizard.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useCallback, useEffect } from 'react';
 import StepWizard, { StepWizardChildProps } from 'react-step-wizard';
-import { Button } from '@tacc/core-components';
+import { Button } from '../..';
 import { WizardStep } from '.';
 import { Formik, Form, useFormikContext } from 'formik';
 import styles from './Wizard.module.css';