docs(dinosaurdocs): update deps

.eslintrc.yaml

@@ -1 +1 @@
-extends: availity/workflow
+extends: availity/browser

docusaurus/package.json

@@ -11,12 +11,12 @@
     "serve": "docusaurus serve"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.1.1",
-    "@docusaurus/preset-classic": "^3.1.1",
+    "@docusaurus/core": "^3.3.2",
+    "@docusaurus/preset-classic": "^3.3.2",
     "@mdx-js/react": "^3.0.1",
-    "clsx": "^2.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "clsx": "^2.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "browserslist": {
     "production": [

example/package.json

@@ -31,45 +31,42 @@
   "license": "MIT",
   "homepage": "https://github.com/availity/availity-workflow#readme",
   "dependencies": {
-    "@availity/api-axios": "^8.0.2",
-    "@availity/breadcrumbs": "^3.3.3",
-    "@availity/favorites": "^3.4.3",
-    "@availity/form": "^1.7.4",
-    "@availity/icon": "^0.11.3",
+    "@availity/api-axios": "^8.0.7",
+    "@availity/block-ui": "^1.1.3",
+    "@availity/breadcrumbs": "^3.3.5",
+    "@availity/favorites": "^5.0.4",
+    "@availity/form": "^1.9.0",
+    "@availity/icon": "^0.11.7",
     "@availity/localstorage-core": "^3.0.0",
-    "@availity/page-header": "^11.3.4",
-    "@availity/spaces": "6.6.0",
+    "@availity/page-header": "^13.0.7",
+    "@availity/spaces": "8.0.5",
     "@availity/yup": "^5.1.5",
-    "availity-uikit": "^4.4.0",
-    "axios": "^1.6.2",
-    "classnames": "^2.3.2",
-    "formik": "^2.4.2",
+    "@tanstack/react-query": "^4.36.1",
+    "availity-uikit": "^4.6.3",
+    "axios": "^1.6.8",
+    "classnames": "^2.5.1",
+    "formik": "^2.4.6",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-block-ui": "^1.3.6",
-    "react-dom": "^18.2.0",
-    "react-query": "^3.34.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "reactstrap": "^8.10.1",
-    "yup": "^1.2.0"
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@availity/workflow": "workspace:*",
-    "@testing-library/react": "^14.2.1",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^20.11.24",
-    "@types/react": "^18.2.17",
-    "@types/react-dom": "^18.2.7",
+    "@testing-library/react": "^14.3.1",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^20.12.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/reactstrap": "^8.7.2",
     "@types/yup": "^0.32.0",
     "cross-env": "^7.0.3",
-    "esbuild-loader": "^3.0.1",
-    "eslint-config-availity": "^9.0.1",
-    "eslint-import-resolver-root-import": "^1.0.4",
-    "eslint-import-resolver-typescript": "^3.5.5",
+    "esbuild-loader": "^3.2.0",
+    "eslint-config-availity": "^10.0.1",
     "jest": "^27.5.1",
     "jest-dom": "^4.0.0",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.4.5"
   },
   "lint-staged": {
     "*.(js|ts|jsx|tsx)": [

example/project/__test__/App.test.tsx → example/project/app/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+
 import { chain, nullChain } from '@/chain';
-// eslint-disable-next-line import/extensions
-import App from '../app/App';
+
+import App from './App';
 
 describe('App', () => {
   test('renders without error', () => {

example/project/app/App.tsx

@@ -1,32 +1,20 @@
-import React from 'react';
-import { Formik } from 'formik';
 import PageHeader from '@availity/page-header';
 import { Container, Card } from 'reactstrap';
-import { object, string } from 'yup';
-// eslint-disable-next-line import/extensions
-import Form from '@/components/Form';
-import { chain, nullChain } from './chain';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
-const App: React.SFC<Record<string, unknown>> = () => (
-  <Container className="container-sm">
-    <PageHeader appName="Sample Project" appAbbr="SP" feedback />
-    <Card
-      tag={Formik}
-      initialValues={{
-        formField: '',
-        chainedField: chain,
-        nullishCoalescedField: nullChain,
-      }}
-      // onSubmit={() => {}}
-      validationSchema={object().shape({
-        formField: string().required('This field is required.'),
-        chainedField: string().required('This field is required.'),
-        nullishCoalescedField: string().required('This field is required.'),
-      })}
-    >
-      <Form />
-    </Card>
-  </Container>
+import { SearchForm } from '@/components/Form';
+
+const client = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={client}>
+    <Container className="container-sm">
+      <PageHeader appName="Sample Project" appAbbr="SP" feedback />
+      <Card>
+        <SearchForm />
+      </Card>
+    </Container>
+  </QueryClientProvider>
 );
 
 export default App;

example/project/app/components/Form.tsx

@@ -1,27 +1,63 @@
-import * as React from 'react';
-import { Field } from '@availity/form';
-import { Form as RForm, CardHeader, CardBody, CardFooter, Button } from 'reactstrap';
+import { useState } from 'react';
+import BlockUi from '@availity/block-ui';
+import { Form, Field } from '@availity/form';
+import { Alert, Button, CardBody, CardFooter, CardHeader } from 'reactstrap';
+import { object, string } from 'yup';
+
+import { chain, nullChain } from '@/chain';
+
 import config from './form-config.json';
 
-const Form: React.SFC<FormikProps<FormValues>> = ({ handleSubmit, handleReset }) => (
-  <RForm onSubmit={handleSubmit}>
-    <CardHeader className="text-center h4 lead" tag="h3">
-      {config.header}
-    </CardHeader>
-    <CardBody>
-      {config.fields.map((fieldProps) => (
-        <Field key={fieldProps.name} {...fieldProps} />
-      ))}
-    </CardBody>
-    <CardFooter className="d-flex justify-content-end">
-      <Button color="secondary" onClick={handleReset}>
-        Reset
-      </Button>
-      <Button type="submit" color="primary" className="ml-2">
-        Submit
-      </Button>
-    </CardFooter>
-  </RForm>
-);
-
-export default Form;
+const initialValues = {
+  formField: '',
+  chainedField: chain,
+  nullishCoalescedField: nullChain,
+};
+
+const schema = object().shape({
+  formField: string().required('This field is required.'),
+  chainedField: string().required('This field is required.'),
+  nullishCoalescedField: string().required('This field is required.'),
+});
+
+async function sleep(duration = 2500) {
+  await new Promise((resolve) => {
+    setTimeout(resolve, duration);
+  });
+}
+
+export function SearchForm() {
+  const [loading, setLoading] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleOnSubmit = async () => {
+    setLoading(true);
+    await sleep();
+    setLoading(false);
+    setIsSubmitted(true);
+  };
+
+  return (
+    <Form onSubmit={handleOnSubmit} initialValues={initialValues} validationSchema={schema}>
+      <CardHeader className="h4" tag="h3">
+        {config.header}
+      </CardHeader>
+      <BlockUi tag={CardBody} blocking={loading}>
+        <Alert isOpen={isSubmitted} toggle={() => setIsSubmitted(false)} color="success">
+          Form submitted!
+        </Alert>
+        {config.fields.map((fieldProps) => (
+          <Field key={fieldProps.name} {...fieldProps} />
+        ))}
+      </BlockUi>
+      <CardFooter className="d-flex justify-content-end">
+        <Button color="secondary" type="reset">
+          Reset
+        </Button>
+        <Button type="submit" color="primary" className="ml-2">
+          Submit
+        </Button>
+      </CardFooter>
+    </Form>
+  );
+}

example/project/app/index.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.scss';
-import 'react-block-ui/style.css';
+import '@availity/block-ui/dist/index.css';
 import '@availity/yup';
 import App from './App';
 
-const container = document.getElementById('root');
+const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 
 root.render(<App />);

example/project/config/workflow.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const webpack = require('webpack');
 
 // TODO: add more complex workflow features for building/testing
@@ -21,7 +20,6 @@ module.exports = (config) => {
   // specify how to resolve node_modules since yarn hoists them to top-level
   config.modifyWebpackConfig = (webpackConfig, settings) => {
     webpackConfig.resolveLoader.modules.push(path.join(settings.project(), '../node_modules'));
-    webpackConfig.resolve.plugins = [new TsConfigPathsPlugin()];
     webpackConfig.plugins.push(
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],

example/tsconfig.json

@@ -14,7 +14,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,

package.json

@@ -30,26 +30,26 @@
     "version:dry-run": "nx affected --target version --dryRun --parallel=1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-angular": "^17.6.7",
-    "@commitlint/config-conventional": "^17.6.7",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-angular": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
     "@jscutlery/semver": "3.0.0",
     "@nrwl/cli": "15.9.4",
     "@nrwl/js": "^16.5.5",
     "@nrwl/workspace": "16.5.5",
-    "@types/is-ci": "^3.0.0",
+    "@types/is-ci": "^3.0.4",
     "conventional-changelog-cli": "^4.1.0",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "dependency-check": "^4.1.0",
-    "eslint-config-availity": "^9.0.1",
+    "eslint-config-availity": "^10.0.1",
     "gh-pages": "^5.0.0",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
     "jest": "^27.5.1",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^13.3.0",
     "nx": "16.5.3",
-    "prettier": "^3.0.0",
-    "typescript": "^5.1.6"
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5"
   },
   "resolutions": {
     "nx": "16.5.3",

packages/mock-data/data/current-region.json

@@ -1,31 +1,37 @@
 {
-  "totalCount" : 1,
-  "count" : 1,
-  "offset" : 0,
-  "limit" : 50,
-  "regionAggregations" : [ {
-    "type" : "hits",
-    "hits" : [ {
-      "key" : "userRegionCount",
-      "count" : 56
-    } ]
-  } ],
-  "links" : {
-    "self" : {
-      "href" : "${context}/sdk/platform/v1/regions?currentlySelected=true"
+  "totalCount": 1,
+  "count": 1,
+  "offset": 0,
+  "limit": 50,
+  "regionAggregations": [
+    {
+      "type": "hits",
+      "hits": [
+        {
+          "key": "userRegionCount",
+          "count": 56
+        }
+      ]
+    }
+  ],
+  "links": {
+    "self": {
+      "href": "${context}/sdk/platform/v1/regions?currentlySelected=true"
     },
-    "user" : {
-      "href" : "${context}/sdk/platform/v1/users/aka123456789"
+    "user": {
+      "href": "${context}/sdk/platform/v1/users/aka123456789"
     }
   },
-  "regions" : [ {
-    "links": {
-      "self": {
-        "href": "${context}/sdk/platform/v1/regions/FL"
-      }
-    },
-    "id": "FL",
-    "value": "Florida",
-    "currentlySelected": true
-  } ]
+  "regions": [
+    {
+      "links": {
+        "self": {
+          "href": "${context}/sdk/platform/v1/regions/FL"
+        }
+      },
+      "id": "FL",
+      "value": "Florida",
+      "currentlySelected": true
+    }
+  ]
 }