goobs-frontend 0.7.53 → 0.7.55

package/README.md

@@ -1,22 +1,22 @@
 # goobs-frontend
 
-goobs-frontend previously known as goobs-repo is a collection of reusable components and utilities for building web applications with React and Next.js. It provides a set of tools to streamline development and enhance functionality.
+goobs-frontend, previously known as goobs-repo, is a comprehensive React-based UI library built on Material-UI. It offers a wide range of customizable components for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.
 
 The NPM repo is available here - https://www.npmjs.com/package/goobs-frontend
 
-This entire repository is written in typescript and there is no need for a types/ install file
+This entire repository is written in TypeScript, and there is no need for a separate types installation.
 
 ## Version
 
-This is a beta release of the tools. It is available via npm to ensure functionality is as expected. We will iron out any kinks and expect version v1 to be production-ready for all components, while some components are already production-ready. Installation confirmed working with install instructions below.
+This is a beta release of the tools. It is available via npm to ensure functionality is as expected. We will iron out any kinks and expect version v1 to be production-ready for all components, while some components are already production-ready. Installation is confirmed working with the install instructions below.
 
 ## Integrating goobs-frontend with Next.js
 
-This guide explains how to integrate the goobs-repo package with a Next.js project
+This guide explains how to integrate the goobs-frontend package with a Next.js project.
 
 **Step 1: Install the project**
 
-In your Next.js project directory, run the following command to install goobs-repo
+In your Next.js project directory, run the following command to install goobs-frontend:
 
 #### npm
 
@@ -32,9 +32,9 @@ yarn add goobs-frontend
 
 **Step 2: Update next.config.js**
 
-We are using SWC; here is the minimum recommended configuration for next.config.js using our repository
+We are using SWC; here is the minimum recommended configuration for next.config.js using our repository:
 
-```bash
+```javascript
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
@@ -46,125 +46,106 @@ const nextConfig = {
 export default nextConfig
 ```
 
-which you can see more information on how we got here and how it was incorrectly done in previous versions via - https://github.com/goobz22/goobs-frontend/discussions/21
+You can see more information on how we got here and how it was incorrectly done in previous versions via - https://github.com/goobz22/goobs-frontend/discussions/21
 
 **Step 3: Implement into project and build to confirm functionality**
 
-All components should be successfully building as of this release and are being used within production in one way or another. The props may not all work exactly as expected but as I go through and find a way to document each of the components further I will sus out what needs removed and or implemented now or in future versions.
+All components should be successfully building as of this release and are being used within production in one way or another. The props may not all work exactly as expected, but as we go through and find a way to document each of the components further, we will determine what needs to be removed or implemented now or in future versions.
 
-This readme update along side the following documentation updates are all a push to better document the usage of this project and is a hard requirement to move from .7-beta of this product and to move onto .8-beta as I am getting ready for release and establishing a product version release methodology.
+This README update, along with the following documentation updates, are all part of a push to better document the usage of this project. It is a hard requirement to move from .7-beta of this product to .8-beta as we are getting ready for release and establishing a product version release methodology.
 
 ## Components
 
-The following components are within goobs-frontend
+The following components are available within goobs-frontend:
+
+### Accordion
+
+The Accordion component provides an expandable panel for organizing and presenting content in a collapsible manner.
 
 ### Button
 
 The Button component is a customizable button with support for icons, variants, and styling props. It provides a flexible and reusable way to create buttons in your application.
 
-#### Capabilities Preview
+### Card
+
+The Card component offers various card layouts for displaying content, including product cards, pricing cards, and more.
+
+### CodeCopy
+
+The CodeCopy component renders a code block with syntax highlighting and a copy-to-clipboard functionality.
+
+### ConfirmationCodeInput
+
+The ConfirmationCodeInput component provides an input field for entering confirmation codes, often used in two-factor authentication scenarios.
+
+### Content
+
+The Content component is a flexible container for rendering various types of content within your application.
 
-- text (optional): The text to display on the button.
-- variant (optional): The variant of the button (e.g., 'contained', 'outlined', 'text').
-- fontsize (optional): The font size of the button text.
-- icon (optional): The icon to display on the button.
-- iconlocation (optional): The location of the icon ('left' or 'right').
-- type (optional): The type of the button (e.g., 'button', 'submit', 'reset').
-- onClick (optional): The function to be called when the button is clicked.
-- fontcolor (optional): The color of the button text.
-- helperfooter (optional): An object containing helper footer properties (status, statusMessage).
+### Form
 
-The usage of the button component and these props will be documented before release of v.8. within this wiki - https://github.com/goobz22/goobs-repo/wiki/Button
+The Form component includes the PopupForm subcomponent, which renders a customizable popup form.
 
 ### Grid
 
 The Grid component is a highly customizable and flexible grid system built with React and Material-UI. It allows you to create complex grid layouts with ease, providing a wide range of configuration options for grids, rows, columns, and cells.
 
-#### Capabilities Preview
+### Nav
 
-- gridconfig: An object or an array of objects representing the grid configuration. It includes properties such as grid name, margins, width, and animation.
-- columnconfig: An array of objects representing the column configuration. Each object includes properties such as the row and column position, grid name, alignment, column width, margins, animation, and custom component.
-- cellconfig (optional): An object representing the cell configuration. It includes properties such as border style and minimum height.
+The Nav component provides navigation functionality, including both horizontal and vertical navigation options.
 
-The usage of the grid component and these props will be documented before release of v.8. within this wiki - https://github.com/goobz22/goobs-repo/wiki/Grid
+### PricingTable
 
-### Typography
+The PricingTable component renders a customizable pricing table for displaying product or service pricing information.
 
-The Typography component is a text component for rendering customizable typography.
+### RadioGroup
 
-#### Capabilities Preview
+The RadioGroup component renders a group of radio buttons for selecting a single option from multiple choices.
 
-- text (optional): The text content to be rendered.
-- fontvariant (optional): The variant of the typography component.
-- fontcolor (optional): The color of the typography text.
-- columnconfig (optional): The configuration object for the grid column.
-- cellconfig (optional): The configuration object for the grid cell.
+### Stepper
 
-The usage of the typography component and these props will be documented before release of v.8. within this wiki - https://github.com/goobz22/goobs-repo/wiki/Typography
+The Stepper component provides a step-by-step interface for guiding users through a process or workflow.
 
 ### StyledComponent
 
 The StyledComponent is a versatile and customizable input component built with React and Material-UI. It provides a range of input variants and supports various styling options to match your application's design requirements.
 
-#### Capabilities Preview
-
-- name (optional): The name of the input field.
-- outlinecolor (optional): The color of the input outline.
-- iconcolor (optional): The color of the input icons.
-- backgroundcolor (optional): The background color of the input.
-- combinedfontcolor (optional): The color of the input text and label when combined.
-- unshrunkfontcolor (optional): The color of the label when not shrunk.
-- shrunkfontcolor (optional): The color of the label when shrunk.
-- endAdornmentMarginRight (optional): The right margin of the end adornment.
-- autoComplete (optional): The autocomplete attribute for the input.
-- componentvariant (optional): The variant of the input component (e.g., 'textfield', 'phonenumber', 'password', 'dropdown', 'searchbar').
-- options (optional): An array of options for the dropdown variant.
-- helperfooter (optional): An object containing helper footer properties (status, statusMessage).
-- placeholder (optional): The placeholder text for the input.
-- minRows (optional): The minimum number of rows for the multiline textfield variant.
-- formname (optional): The name of the form associated with the input.
-- label (optional): The label text for the input.
-- shrunklabellocation (optional): The location of the shrunk label ('onnotch', 'above', 'left').
-- value (optional): The value of the input.
-- onChange (optional): The function to be called when the input value changes.
-- defaultValue (optional): The default value of the input.
-- inputRef (optional): The ref object for the input element.
-- columnconfig (optional): The configuration object for the grid column.
-- serverActionValidation (optional): An async function that performs server-side validation on the input value.
-
-#### Hooks
-
-The StyledComponent utilizes several custom hooks to enhance its functionality:
-
-- src/hooks/styledcomponent/useDropdown.tsx: Handles the dropdown functionality, including opening/closing the dropdown, filtering options, and selecting an option.
-- src/hooks/styledcomponent/usePhoneNumber.tsx: Handles phone number formatting and updating the input value.
-- src/hooks/styledcomponent/usePassword.tsx: Handles password visibility toggling.
-- src/hooks/styledcomponent/useSearchbar.tsx: Handles the searchbar functionality, including filtering options based on the search query.
-
-#### Validation
-
-The StyledComponent supports both client-side and server-side validation. Client-side validation is handled by the component itself, while server-side validation is performed through the serverActionValidation prop.
-
-When the serverActionValidation prop is provided, the component debounces the validation function to optimize performance. The validation result is then displayed in the helper footer message.
-
-The usage of the StyledComponent component and these props will be documented before release of v.8. within this wiki - https://github.com/goobz22/goobs-frontend/wiki/StyledComponent
+### Toolbar
+
+The Toolbar component offers a customizable toolbar for use in various UI scenarios.
+
+### TransferList
+
+The TransferList component provides a dual-list interface for transferring items between two lists.
+
+### Typography
+
+The Typography component is a text component for rendering customizable typography.
 
 ## Usage
 
-To use the components and utilities in your project, you can import them from the `goobs-repo` package. For example:
+To use the components and utilities in your project, you can import them from the `goobs-frontend` package. For example:
 
 ```jsx
 import {
   CustomButton,
   CustomGrid,
-  StyledComponent
+  StyledComponent,
   Typography,
   RadioGroup,
-  ConfirmationCodeInputs
-} from 'goobs-repo'
+  ConfirmationCodeInput,
+  Card,
+  CodeCopy,
+  Nav,
+  PricingTable,
+  CustomStepper,
+  CustomToolbar,
+  TransferList,
+  Accordion,
+} from 'goobs-frontend'
 ```
 
-Please refer to the individual component and utility files for more details on their usage and available props.
+Please refer to the individual component and utility files for more details on their usage and available props. We are in the process of documenting each component in the [GitHub wiki](https://github.com/goobz22/goobs-frontend/wiki).
 
 ## License
 
@@ -172,11 +153,11 @@ This project is licensed under the MIT License.
 
 ## Feedback and Contributions
 
-We welcome feedback, bug reports, and contributions. If you encounter any issues or have feature requests, please open an issue on the [GitHub repository](https://github.com/goobz22/goobs-repo/issues).
+We welcome feedback, bug reports, and contributions. If you encounter any issues or have feature requests, please open an issue on the [GitHub repository](https://github.com/goobz22/goobs-frontend/issues).
 
 If you would like to contribute to the project, please fork the repository and submit a pull request with your changes.
 
-If you would like to request a this ported over to a different design system, a feature/capability or more information on this project please reach out to Matthew Goluba.
+If you would like to request this ported over to a different design system, a feature/capability, or more information on this project, please reach out to Matthew Goluba.
 
 ## Contact
 
@@ -185,6 +166,6 @@ For any questions or inquiries, please contact Matthew Goluba.
 - Email - mkgoluba@technologiesunlimited.net
 - LinkedIn - https://www.linkedin.com/in/matthew-goluba/
 
-The website is in progress and will be shared here soon
+The website is in progress and will be shared here soon.
 
-Please email for the quickest response
+Please email for the quickest response.

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.53",
+  "version": "0.7.55",
+  "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -27,28 +28,23 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@types/lodash": "^4.17.5",
-    "@types/mongodb": "^4.0.7",
-    "async-lock": "^1.4.1",
-    "aws4": "^1.13.0",
-    "goobs-cache": "^1.0.1",
-    "jotai": "^2.8.3",
+    "goobs-cache": "^1.2.1",
+    "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
-    "mongodb": "^6.8.0",
     "next": "14.2.4"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.4",
-    "@types/async-lock": "^1.4.2",
     "@types/node": "^20.14.9",
     "@types/react": "18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
-    "eslint": "8.57.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "3.3.2",
+    "prettier": "^3.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.5.2"
@@ -58,14 +54,13 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/goobz22/goobs-repo.git"
+    "url": "https://github.com/goobz22/goobs-frontend.git"
   },
   "bugs": {
-    "url": "https://github.com/goobz22/goobs-repo/issues"
+    "url": "https://github.com/goobz22/goobs-frontend/issues"
   },
-  "homepage": "https://github.com/goobz22/goobs-repo#readme",
+  "homepage": "https://github.com/goobz22/goobs-frontend#readme",
   "keywords": [
-    "react",
     "confirmationCodeInput",
     "confirmationCode",
     "radioButton",
@@ -77,27 +72,13 @@
     "node.js",
     "formData",
     "form",
-    "formStore",
     "form-validation",
     "form-submission",
-    "form-caching",
-    "redis-alternative",
-    "useState-alternative",
-    "jotai-alternative",
     "button",
     "grid",
     "responsive",
     "flexgrid",
-    "jsonStorage",
-    "localStorage",
-    "sessionStorage",
-    "fileStorage",
     "typography",
-    "server-actions",
-    "form-store",
-    "form-data",
-    "client-actions",
-    "reusable-server-actions",
     "responsive-grid",
     "styled-component",
     "input-component",
@@ -106,14 +87,29 @@
     "form-validation",
     "searchbar",
     "dropdown",
-    "client-side-validation",
-    "server-side-validation",
     "multilinetextfield",
     "textfield",
     "phonenumber",
     "password",
     "email",
-    "number"
+    "number",
+    "card",
+    "pricing-table",
+    "navigation",
+    "stepper",
+    "tooltip",
+    "accordion",
+    "code-copy",
+    "syntax-highlighting",
+    "theming",
+    "customizable-components",
+    "react-components",
+    "ui-library",
+    "design-system",
+    "front-end",
+    "user-interface",
+    "responsive-design",
+    "typescript"
   ],
   "resolutions": {
     "string-width": "^4.2.3",

package/src/components/Accordion/index.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import React from 'react'
+import { styled } from '@mui/material/styles'
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'
+import MuiAccordionSummary, {
+  AccordionSummaryProps,
+} from '@mui/material/AccordionSummary'
+import MuiAccordionDetails from '@mui/material/AccordionDetails'
+import { ExpandMore } from '@mui/icons-material'
+import { black } from '../../styles/palette'
+
+/**
+ * Custom styled Accordion component.
+ * Wraps MUI's Accordion with custom styling and disables gutters by default.
+ */
+const Accordion = styled((props: AccordionProps) => (
+  <MuiAccordion disableGutters {...props} />
+))({})
+
+/**
+ * Custom styled AccordionSummary component.
+ * Wraps MUI's AccordionSummary with custom styling and a custom expand icon.
+ */
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+  <MuiAccordionSummary
+    expandIcon={<ExpandMore sx={{ color: black.main }} />}
+    {...props}
+  />
+))({
+  fontSize: '20px',
+  fontFamily: 'merriweather',
+  fontWeight: 500,
+})
+
+/**
+ * Custom styled AccordionDetails component.
+ * Wraps MUI's AccordionDetails with custom padding based on the theme's spacing.
+ */
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+}))
+
+export { Accordion, AccordionSummary, AccordionDetails }

package/src/components/Button/index.tsx

@@ -1,22 +1,52 @@
 'use client'
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import StarIcon from '@mui/icons-material/Star'
 import Typography from '../Typography'
-import { useAtom } from 'jotai'
-import { helperFooterAtom, HelperFooterMessage } from '../../atoms/helperfooter'
+import { get, JSONValue } from 'goobs-cache'
 import { red } from '../../styles/palette'
 
+/**
+ * Defines the possible alignment options for button content.
+ */
 export type ButtonAlignment = 'left' | 'center' | 'right'
 
+/**
+ * Defines the structure of helper footer messages used for form validation.
+ */
+export interface HelperFooterMessage {
+  /** Indicates whether the message represents an error or success state */
+  status: 'error' | 'success'
+  /** The message to display in the status area */
+  statusMessage: string
+  /** The message to spread across multiple components */
+  spreadMessage: string
+  /** Priority of the spread message for determining which message to show */
+  spreadMessagePriority: number
+  /** The name of the form this message is associated with */
+  formname: string
+  /** Indicates if the field associated with this message is required */
+  required: boolean
+}
+
+/**
+ * Props for the CustomButton component.
+ * Extends ButtonProps from Material-UI, omitting 'color' and 'variant'.
+ */
 export interface CustomButtonProps
   extends Omit<ButtonProps, 'color' | 'variant'> {
+  /** Text to display on the button */
   text?: string
+  /** Background color of the button */
   backgroundcolor?: string
+  /** Color of the button's outline */
   outlinecolor?: string
+  /** Color of the button's text */
   fontcolor?: string
+  /** Alignment of the button's text */
   fontlocation?: ButtonAlignment
+  /** Typography variant for the button's text */
   fontvariant?:
     | 'arapeyh1'
     | 'arapeyh2'
@@ -45,24 +75,31 @@ export interface CustomButtonProps
     | 'merriparagraph'
     | 'merrihelperheader'
     | 'merrihelperfooter'
+  /** Icon to display on the button. Set to false to hide the icon */
   icon?: React.ReactNode | false
+  /** Color of the icon */
   iconcolor?: string
+  /** Size of the icon */
   iconsize?: string
+  /** Position of the icon relative to the text */
   iconlocation?: 'left' | 'top' | 'right'
+  /** Style variant of the button */
   variant?: 'text' | 'outlined' | 'contained'
+  /** Function to call when the button is clicked */
   onClick?: () => void
+  /** Helper footer message for form validation */
   helperfooter?: HelperFooterMessage
+  /** Width of the button */
   width?: string
+  /** Name of the form this button is associated with */
   formname?: string
+  /** Name attribute for the button element */
   name?: string
-  onFormSubmit?: (isSubmitted: boolean) => void
 }
 
 /**
- * CustomButton component renders a customizable button with various styling and functionality options.
- * It integrates with helper footers to display error messages and form validation status.
- * @param props The props for the CustomButton component.
- * @returns The rendered CustomButton component.
+ * CustomButton component renders a customizable button with integrated form validation.
+ * It displays error messages based on helper footers and form validation status.
  */
 const CustomButton: React.FC<CustomButtonProps> = props => {
   const {
@@ -82,25 +119,27 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
     fontlocation,
     iconcolor,
     width,
-    onFormSubmit,
   } = props
 
-  const [helperFooterAtomValue] = useAtom(helperFooterAtom)
+  /** State for storing the current error message */
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
     undefined
   )
+  /** State for tracking whether the associated form is valid */
   const [isFormValid, setIsFormValid] = useState<boolean>(true)
-  const [isFormSubmitted, setIsFormSubmitted] = useState<boolean>(false)
+  /** State for storing helper footer messages */
+  const [helperFooterValue, setHelperFooterValue] = useState<
+    Record<string, HelperFooterMessage>
+  >({})
 
   /**
-   * updateFormValidation function updates the form validation status and error message
-   * based on the values in the helper footers associated with the current form.
-   * It checks for error footers and empty required fields to determine the form's validity
-   * and sets the error message accordingly.
+   * Updates the form validation status and error message based on helper footers.
+   * This function filters relevant footers, checks for errors and empty required fields,
+   * and updates the error message and form validity accordingly.
    */
-  const updateFormValidation = () => {
+  const updateFormValidation = useCallback(() => {
     if (formname) {
-      const relevantFooters = Object.values(helperFooterAtomValue).filter(
+      const relevantFooters = Object.values(helperFooterValue).filter(
         footer => footer?.formname === formname
       )
 
@@ -130,30 +169,46 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
         setIsFormValid(true)
       }
     }
-  }
+  }, [formname, helperFooterValue])
 
   /**
-   * useEffect hook that triggers the updateFormValidation function whenever the
-   * helperFooterAtomValue or formname changes.
+   * Fetches helper footer data from the cache when formname changes.
+   * This effect runs whenever the formname prop changes.
    */
   useEffect(() => {
-    updateFormValidation()
-  }, [helperFooterAtomValue, formname])
+    const fetchHelperFooter = async () => {
+      const helperFooterResult = await get('helperFooter', 'client')
+      if (
+        helperFooterResult &&
+        typeof helperFooterResult === 'object' &&
+        'value' in helperFooterResult
+      ) {
+        setHelperFooterValue(
+          (helperFooterResult as JSONValue).value as Record<
+            string,
+            HelperFooterMessage
+          >
+        )
+      }
+    }
+
+    fetchHelperFooter()
+  }, [formname])
 
   /**
-   * useEffect hook that calls the onFormSubmit callback with the current isFormSubmitted state
-   * whenever the isFormSubmitted state or onFormSubmit prop changes.
+   * Triggers form validation whenever helperFooterValue changes.
+   * This effect ensures that the form validation is updated whenever
+   * the helper footer messages change.
    */
   useEffect(() => {
-    if (onFormSubmit) {
-      onFormSubmit(isFormSubmitted)
-    }
-  }, [isFormSubmitted, onFormSubmit])
+    updateFormValidation()
+  }, [updateFormValidation])
 
   /**
-   * renderIcon function renders the icon element based on the provided icon prop.
-   * It clones the icon element and applies the iconsize style if the icon is a valid React element.
-   * If the icon prop is set to false, it returns null.
+   * Renders the icon element based on the provided icon prop.
+   * If the icon prop is false, it returns null.
+   * If the icon is a valid React element, it clones it with the specified size.
+   * Otherwise, it renders a default StarIcon.
    * @returns The rendered icon element or null.
    */
   const renderIcon = () => {
@@ -169,13 +224,10 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
   }
 
   /**
-   * handleButtonClick function is called when the button is clicked.
-   * It sets the isFormSubmitted state to true and checks the form validity.
-   * If the form is valid and an onClick handler is provided, it calls the onClick handler.
+   * Handles the button click event.
+   * If the form is valid and an onClick handler is provided, it calls the handler.
    */
   const handleButtonClick = async () => {
-    setIsFormSubmitted(true)
-
     if (!isFormValid) {
       return
     }
@@ -223,7 +275,7 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
           {iconlocation === 'right' && renderIcon()}
         </Box>
       </Button>
-      {isFormSubmitted && errorMessage && (
+      {errorMessage && (
         <Typography
           fontvariant="merrihelperfooter"
           fontcolor={red.main}