Availity · gregmartDOTin · Oct 4, 2024 · Oct 4, 2024
@@ -0,0 +1 @@
+commitlint -e $HUSKY_GIT_PARAMS
@@ -0,0 +1 @@
+lint-staged
@@ -11,6 +11,7 @@ module.exports = {
   themeConfig: {
     colorMode: {
       defaultMode: 'light',
+      disableSwitch: true,
       // Should we use the prefers-color-scheme media-query,
       // using user system preferences, instead of the hardcoded defaultMode
       respectPrefersColorScheme: true,
@@ -25,9 +26,9 @@ module.exports = {
       },
       items: [
         {
-          href: 'https://availity.github.io/availity-react',
+          href: 'https://availity.github.io/element',
           target: '_self',
-          label: 'React',
+          label: 'Element',
           position: 'right',
         },
         {
@@ -54,16 +55,16 @@ module.exports = {
       style: 'dark',
       links: [
         {
-          title: 'Availity React',
+          title: 'Element Design System',
           items: [
             {
               label: 'Documentation',
-              href: 'https://availity.github.io/availity-react',
+              href: 'https://availity.github.io/element',
               target: '_self',
             },
             {
               label: 'GitHub Repository',
-              href: 'https://github.com/availity/availity-react',
+              href: 'https://github.com/Availity/element',
             },
           ],
         },
@@ -95,6 +96,33 @@ module.exports = {
             },
           ],
         },
+        {
+          title: 'Availity React',
+          items: [
+            {
+              label: 'Documentation',
+              href: 'https://availity.github.io/availity-react',
+              target: '_self',
+            },
+            {
+              label: 'GitHub Repository',
+              href: 'https://github.com/availity/availity-react',
+            },
+          ],
+        },
+        {
+          title: 'Legacy Availity UIKit',
+          items: [
+            {
+              label: 'Documentation',
+              href: 'https://availity.github.io/availity-uikit',
+            },
+            {
+              label: 'GitHub Repository',
+              href: 'https://github.com/Availity/availity-uikit',
+            },
+          ],
+        },
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Made with ❤️ by Availity`,
     },

@@ -9,26 +9,32 @@
     "Brandon Robinson <brandon.robinson@availity.com>"
   ],
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.70",
-    "@docusaurus/preset-classic": "2.0.0-alpha.70",
-    "@mdx-js/react": "^1.6.21",
-    "clsx": "^1.1.1",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-icons": "^4.1.0"
+    "@availity/mui-alert": "^0.5.16",
+    "@availity/mui-card": "^0.2.17",
+    "@availity/mui-layout": "^0.1.6",
+    "@availity/mui-typography": "^0.2.0",
+    "@availity/theme-provider": "^0.4.80",
+    "@docusaurus/core": "3.5.2",
+    "@docusaurus/preset-classic": "3.5.2",
+    "@mdx-js/react": "^3.0.1",
+    "@mui/material": "^5.15.0",
+    "axios": "^1.7.7",
+    "clsx": "^2.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "eslint-config-availity": "^7.0.250",
-    "gh-pages": "^3.1.0",
-    "husky": "^4.3.7",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.3",
-    "prettier": "^2.2.1",
-    "typescript": "^4.1.3"
+    "@commitlint/cli": "^18.0.0",
+    "@commitlint/config-conventional": "^18.0.0",
+    "eslint-config-availity": "^10.0.3",
+    "gh-pages": "^6.1.1",
+    "husky": "^9.1.6",
+    "is-ci": "^3.0.1",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.2"
   },
   "keywords": [
     "docusaurus",
@@ -45,7 +51,8 @@
     "clear": "docusaurus clear",
     "deploy:pages": "yarn build && gh-pages -d public -b master",
     "format": "prettier --write src/**/*.{js,jsx}",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "postinstall": "is-ci || husky"
   },
   "repository": {
     "type": "git",
@@ -59,12 +66,6 @@
       "@commitlint/config-conventional"
     ]
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS",
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.js": [
       "eslint --fix",
@@ -87,5 +88,7 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }
+
@@ -17,16 +17,36 @@
   --ifm-color-primary-lightest: rgb(146, 224, 208);
 
   /* Potential Availity Theme */
-  /*
-  --ifm-color-primary: #d93d11;
-  --ifm-color-primary-dark: #c3370f;
+
+  --ifm-color-primary: #1552BC;
+  --ifm-color-primary-dark: #103E8E;
   --ifm-color-primary-darker: #b8340e;
   --ifm-color-primary-darkest: #982b0c;
   --ifm-color-primary-light: #ed4415;
   --ifm-color-primary-lighter: #ed4d20;
   --ifm-color-primary-lightest: #f06740;
-  */
+
+  --ifm-h3-font-size: 28px;
+
+  --ifm-button-background-color: var(--ifm-color-primary);
+  --ifm-button-border-radius: 4px;
+
   --ifm-code-font-size: 95%;
+  --ifm-navbar-background-color: #292B32;
+  --ifm-navbar-link-color: #ffffff;
+  --ifm-color-content: #292B32 --ifm-heading-color: var(--ifm-color-content);
+  --ifm-hero-text-color: var(--ifm-color-content);
+  --ifm-navbar-link-hover-color: #ffffff84;
+  --ifm-footer-link-hover-color: var(--ifm-navbar-link-hover-color);
+  --ifm-footer-background-color: #393B46;
+}
+
+a.MuiButton-root:hover {
+  color: unset
+}
+
+a:hover {
+  text-decoration: unset;
 }
 
 .docusaurus-highlight-code-line {
@@ -45,10 +65,9 @@
   width: 24px;
   height: 24px;
   display: flex;
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
 }
+
 html[data-theme='dark'] .header-github-link:before {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-    no-repeat;
-}
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+}
@@ -1,9 +1,12 @@
 import React from 'react';
-import { FaReact, FaPlayCircle, FaCss3, FaJs } from 'react-icons/fa';
-import clsx from 'clsx';
+import { FaReact, FaPlayCircle, FaJs, FaCss3 } from 'react-icons/fa';
 import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { ThemeProvider } from '@availity/theme-provider';
+import { Card, CardActionArea, CardHeader, CardContent } from '@availity/mui-card';
+import { Grid, Container } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
+import { Alert } from '@availity/mui-alert';
 import styles from './styles.module.css';
 
 const features = [
@@ -16,11 +19,11 @@ const features = [
     target: '_self',
   },
   {
-    title: 'React Components',
+    title: 'Element',
     icon: FaReact,
     // linkStyle: 'reactIcon',
-    description: <>React components built with the Availity UI Kit and Reactstrap</>,
-    href: 'https://availity.github.io/availity-react',
+    description: <>React components built with Material UI using Availity&apos;s Element Design System.</>,
+    href: 'https://availity.github.io/element',
     target: '_self',
   },
   {
@@ -32,68 +35,74 @@ const features = [
     target: '_self',
   },
   {
-    title: 'Availity UI Kit',
+    title: 'Availity React',
+    icon: FaReact,
+    // linkStyle: 'reactIcon',
+    description: <>React components and hooks. React components are built with the Availity UI Kit and Reactstrap 8.</>,
+    href: 'https://availity.github.io/availity-react',
+    target: '_self',
+  },
+  {
+    title: 'Legacy Availity UI Kit',
     icon: FaCss3,
     // linkStyle: 'reactIcon', styles[linkStyle] || styles.featureLink for <a />
-    description: <>Our custom CSS kit that is built on top of Bootstrap 4</>,
+    description: (
+      <>
+        Our custom CSS kit that is built on top of Bootstrap 4.{' '}
+        <Alert severity="error">This library will be retired 01/01/26</Alert>
+      </>
+    ),
     href: 'https://availity.github.io/availity-uikit',
     target: '_blank', // uikit does not link back to docs
   },
 ];
 
 function Feature({ title, description, icon: Icon, href, target }) {
   return (
-    <div className={clsx('col col--6', styles.feature)}>
-      {Icon && (
-        <Link href={href} target={target} aria-label={title}>
-          <div className="text--center">
-            <Icon className={styles.featureImage} alt={title} />
-          </div>
-        </Link>
-      )}
-      <h3>{title}</h3>
-      <p>{description}</p>
-    </div>
+    <Card sx={{ marginBottom: 2, marginRight: 2 }}>
+      <CardActionArea href={href} target={target} sx={{ height: '100%' }}>
+        <CardHeader
+          title={
+            <Grid container alignItems="center">
+              <Icon className={styles.featureImage} alt={title} />
+              <span>{title}</span>
+            </Grid>
+          }
+        />
+        {Icon && <CardContent>{description}</CardContent>}
+      </CardActionArea>
+    </Card>
   );
 }
 
 function Home() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
   return (
-    <Layout
-      title={`${siteConfig.title}`}
-      description="Homepage for Availity's Workflow, React, SDK-JS, and UI Kit documentation"
-    >
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
-        <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link
-              className={clsx('button button--outline button--secondary button--lg', styles.getStarted)}
-              href="https://availity.github.io/availity-workflow"
-              target="_self"
-            >
-              Get Started
-            </Link>
-          </div>
-        </div>
-      </header>
-      <main>
-        {features?.length > 0 && (
-          <section className={styles.features}>
-            <div className="container">
-              <div className="row">
+    <ThemeProvider>
+      <Layout
+        title={`${siteConfig.title}`}
+        description="Homepage for Availity's Workflow, React, SDK-JS, and UI Kit documentation"
+      >
+        <Container>
+          <header>
+            <Typography variant="h1" marginTop={2}>
+              {siteConfig.title}
+            </Typography>
+            <Typography variant="subtitle1">{siteConfig.tagline}</Typography>
+          </header>
+          <main>
+            {features?.length > 0 && (
+              <Grid margin={2} container marginTop={4}>
                 {features.map((props, idx) => (
                   <Feature key={idx} {...props} />
                 ))}
-              </div>
-            </div>
-          </section>
-        )}
-      </main>
-    </Layout>
+              </Grid>
+            )}
+          </main>
+        </Container>
+      </Layout>
+    </ThemeProvider>
   );
 }
 

@@ -35,15 +35,16 @@
 }
 
 .featureImage {
-  height: 200px;
-  width: 200px;
+  height: 36px;
+  width: 36px;
+  margin-right: 8px;
 }
 
 /* Overrides for default <a /> styles */
 .featureLink {
-  color:var(--ifm-color-primary-light)
+  color: var(--ifm-color-primary-light)
 }
 
 .reactIcon {
   color: rgb(97, 219, 251)
-}
+}