feat: TUP-700 @tacc/core-components

README.md

@@ -22,20 +22,19 @@ This project was generated using [Nx](https://nx.dev).
 The TUP dashboard is accessed at http://localhost:8000/portal.
 To bring containers down after development, run `npx nx down tup-cms`.
 
-<!--
-
 Other useful commands:
 
+- `npx nx serve core-components` to run a demo of the library for the core components.
 - `npx nx build core-components` to create a distributable library for the core components.
 
--->
-
 ## Contributing
 
 To contribute, first read [How to Contirbute](./docs/contributing.md).
 
 ---
 
+<!-- NX -->
+
 <p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="450"></p>
 
 🔎 **Smart, Fast and Extensible Build System**

apps/tup-cms/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20 as node_build
+FROM --platform=linux/amd64 node:20 as node_build
 COPY package.json package-lock.json /code/
 WORKDIR /code
 RUN npm ci

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,19 +1,22 @@
-import { FormikInput } from '@tacc/core-wrappers';
+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 (
     <div>
       <h2>Step One: Extra value two is {extra.extraTwo}</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldOne"
         required={true}
         label="Field One"
         description="The first form field"
       />
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldTwo"
         required={false}
         label="Field Two"

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

@@ -1,8 +1,13 @@
 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 {
+  FieldArray,
+  useFormikContext,
+  FieldArrayRenderProps,
+  Field,
+} from 'formik';
+import { FormikInput, FormikCheck } from '@tacc/core-components';
 import * as Yup from 'yup';
 import fieldArrayStyles from './FieldArray.module.css';
 import {
@@ -34,13 +39,15 @@ const UIWizardComplexFieldRender: React.FC<UIWizardComplexFieldRenderProps> = ({
       note="more values inside"
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`${innerKey}.name`}
         label="Name"
         required={true}
         description="Name field of this object"
       />
-      <FormikCheck
+      <Field
+        component={FormikCheck}
         name={`${innerKey}.include`}
         label="Include"
         required={false}
@@ -114,7 +121,8 @@ const OuterItemRender: React.FC<FieldArrayOfArraysRenderProps> = ({
       title={`Field Array ${outerIndex}`}
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`fieldArrayOfArrays.${outerIndex}.name`}
         label="Name"
         required={true}

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

@@ -8,8 +8,13 @@ import React from 'react';
 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 {
+  FieldArray,
+  useFormikContext,
+  FieldArrayRenderProps,
+  Field,
+} from 'formik';
+import { FormikInput, FormikCheck } from '@tacc/core-components';
 import {
   UIWizardStep,
   UIWizardComplexField,
@@ -37,13 +42,15 @@ const UIWizardComplexFieldRender: React.FC<UIWizardComplexFieldProps> = ({
       note="more values inside"
       className={fieldArrayStyles.item}
     >
-      <FormikInput
+      <Field
+        component={FormikInput}
         name={`fieldArray.${index}.name`}
         label="Name"
         required={true}
         description="Name field of this object"
       />
-      <FormikCheck
+      <Field
+        component={FormikCheck}
         name={`fieldArray.${index}.include`}
         label="Include"
         required={false}

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,19 +1,22 @@
-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 '..';
+import { Field } from 'formik';
 
 export const StepOne: React.FC = () => {
   return (
     <div>
       <h2>Step One</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldOne"
         required={true}
         label="Name"
         description="The first form field"
       />
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldTwo"
         required={false}
         label="Description"

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

@@ -1,13 +1,15 @@
-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 '..';
+import { Field } from 'formik';
 
 export const StepThree: React.FC = () => {
   return (
     <div>
       <h2>Step Three</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldFour"
         required={true}
         label="Field Four"

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

@@ -1,13 +1,15 @@
-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 '..';
+import { Field } from 'formik';
 
 export const StepTwo: React.FC = () => {
   return (
     <div>
       <h2>Step Two</h2>
-      <FormikInput
+      <Field
+        component={FormikInput}
         name="fieldThree"
         required={true}
         label="Field Three"

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/.gitignore

@@ -0,0 +1,4 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist

libs/core-components/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'libs/core-components/vite.config.ts',
+      },
+    },
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

libs/core-components/.storybook/preview.global.css

@@ -0,0 +1,4 @@
+/* https://tacc-main.atlassian.net/wiki/x/hRlv */
+@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation);
+@import url('@tacc/core-styles/dist/core-styles.base.css') layer(base);
+@import url('@tacc/core-styles/dist/core-styles.portal.css') layer(base);

libs/core-components/.storybook/preview.ts

@@ -0,0 +1 @@
+import './preview.global.css';