goobs-frontend 0.7.53

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Matt Goluba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,190 @@
+# 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.
+
+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
+
+## 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.
+
+## Integrating goobs-frontend with Next.js
+
+This guide explains how to integrate the goobs-repo 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
+
+#### npm
+
+```bash
+npm i goobs-frontend
+```
+
+#### yarn
+
+```bash
+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
+
+```bash
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  transpilePackages: ['goobs-frontend'],
+}
+
+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
+
+**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.
+
+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.
+
+## Components
+
+The following components are within goobs-frontend
+
+### 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
+
+- 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).
+
+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
+
+### 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
+
+- 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 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
+
+### Typography
+
+The Typography component is a text component for rendering customizable typography.
+
+#### Capabilities Preview
+
+- 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.
+
+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
+
+### 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
+
+## Usage
+
+To use the components and utilities in your project, you can import them from the `goobs-repo` package. For example:
+
+```jsx
+import {
+  CustomButton,
+  CustomGrid,
+  StyledComponent
+  Typography,
+  RadioGroup,
+  ConfirmationCodeInputs
+} from 'goobs-repo'
+```
+
+Please refer to the individual component and utility files for more details on their usage and available props.
+
+## License
+
+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).
+
+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.
+
+## Contact
+
+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
+
+Please email for the quickest response

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "goobs-frontend",
+  "version": "0.7.53",
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@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",
+    "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",
+    "eslint-config-next": "^14.2.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.2"
+  },
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/goobz22/goobs-repo.git"
+  },
+  "bugs": {
+    "url": "https://github.com/goobz22/goobs-repo/issues"
+  },
+  "homepage": "https://github.com/goobz22/goobs-repo#readme",
+  "keywords": [
+    "react",
+    "confirmationCodeInput",
+    "confirmationCode",
+    "radioButton",
+    "radioGroup",
+    "contentSection",
+    "reusablePopup",
+    "next.js",
+    "material-ui",
+    "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",
+    "input-validation",
+    "button-validation",
+    "form-validation",
+    "searchbar",
+    "dropdown",
+    "client-side-validation",
+    "server-side-validation",
+    "multilinetextfield",
+    "textfield",
+    "phonenumber",
+    "password",
+    "email",
+    "number"
+  ],
+  "resolutions": {
+    "string-width": "^4.2.3",
+    "strip-ansi": "^6.0.1"
+  }
+}

package/src/app/_app.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import type { AppProps } from 'next/app'
+
+const MyApp = ({ Component, pageProps }: AppProps) => {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

package/src/atoms/helperfooter.ts

@@ -0,0 +1,21 @@
+import { atom } from 'jotai'
+
+export interface HelperFooterMessage {
+  status?: 'error' | 'success'
+  statusMessage?: string
+  spreadMessage?: string
+  spreadMessagePriority?: number
+  formname?: string
+  required?: boolean
+}
+
+export const helperFooterAtom = atom<Record<string, HelperFooterMessage>>({
+  default: {
+    status: 'success',
+    statusMessage: '',
+    spreadMessage: '',
+    spreadMessagePriority: 0,
+    formname: '',
+    required: false,
+  },
+})

package/src/components/Button/index.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import React, { useEffect, useState } 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 { red } from '../../styles/palette'
+
+export type ButtonAlignment = 'left' | 'center' | 'right'
+
+export interface CustomButtonProps
+  extends Omit<ButtonProps, 'color' | 'variant'> {
+  text?: string
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  fontlocation?: ButtonAlignment
+  fontvariant?:
+    | 'arapeyh1'
+    | 'arapeyh2'
+    | 'arapeyh3'
+    | 'arapeyh4'
+    | 'arapeyh5'
+    | 'arapeyh6'
+    | 'arapeyparagraph'
+    | 'arapeyhelperheader'
+    | 'arapeyhelperfooter'
+    | 'interh1'
+    | 'interh2'
+    | 'interh3'
+    | 'interh4'
+    | 'interh5'
+    | 'interh6'
+    | 'interparagraph'
+    | 'interhelperheader'
+    | 'interhelperfooter'
+    | 'merrih1'
+    | 'merrih2'
+    | 'merrih3'
+    | 'merrih4'
+    | 'merrih5'
+    | 'merrih6'
+    | 'merriparagraph'
+    | 'merrihelperheader'
+    | 'merrihelperfooter'
+  icon?: React.ReactNode | false
+  iconcolor?: string
+  iconsize?: string
+  iconlocation?: 'left' | 'top' | 'right'
+  variant?: 'text' | 'outlined' | 'contained'
+  onClick?: () => void
+  helperfooter?: HelperFooterMessage
+  width?: string
+  formname?: string
+  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.
+ */
+const CustomButton: React.FC<CustomButtonProps> = props => {
+  const {
+    text,
+    variant,
+    fontvariant = 'merriparagraph',
+    icon,
+    iconlocation,
+    iconsize,
+    type,
+    onClick,
+    fontcolor,
+    name,
+    formname,
+    outlinecolor,
+    backgroundcolor,
+    fontlocation,
+    iconcolor,
+    width,
+    onFormSubmit,
+  } = props
+
+  const [helperFooterAtomValue] = useAtom(helperFooterAtom)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
+  const [isFormValid, setIsFormValid] = useState<boolean>(true)
+  const [isFormSubmitted, setIsFormSubmitted] = useState<boolean>(false)
+
+  /**
+   * 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.
+   */
+  const updateFormValidation = () => {
+    if (formname) {
+      const relevantFooters = Object.values(helperFooterAtomValue).filter(
+        footer => footer?.formname === formname
+      )
+
+      const errorFooters = relevantFooters.filter(
+        footer => footer?.status === 'error'
+      )
+
+      const emptyRequiredFields = relevantFooters.filter(
+        footer =>
+          footer?.required && (!footer.status || footer.status === 'error')
+      )
+
+      if (errorFooters.length > 0) {
+        const highestPriorityError = errorFooters.reduce((prev, current) =>
+          (prev.spreadMessagePriority || Infinity) <
+          (current.spreadMessagePriority || Infinity)
+            ? prev
+            : current
+        )
+        setErrorMessage(highestPriorityError.spreadMessage)
+        setIsFormValid(false)
+      } else if (emptyRequiredFields.length > 0) {
+        setErrorMessage('Please fill in all required fields.')
+        setIsFormValid(false)
+      } else {
+        setErrorMessage(undefined)
+        setIsFormValid(true)
+      }
+    }
+  }
+
+  /**
+   * useEffect hook that triggers the updateFormValidation function whenever the
+   * helperFooterAtomValue or formname changes.
+   */
+  useEffect(() => {
+    updateFormValidation()
+  }, [helperFooterAtomValue, formname])
+
+  /**
+   * useEffect hook that calls the onFormSubmit callback with the current isFormSubmitted state
+   * whenever the isFormSubmitted state or onFormSubmit prop changes.
+   */
+  useEffect(() => {
+    if (onFormSubmit) {
+      onFormSubmit(isFormSubmitted)
+    }
+  }, [isFormSubmitted, onFormSubmit])
+
+  /**
+   * 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.
+   * @returns The rendered icon element or null.
+   */
+  const renderIcon = () => {
+    if (icon === false) {
+      return null
+    }
+    if (React.isValidElement(icon)) {
+      return React.cloneElement(icon as React.ReactElement, {
+        style: { fontSize: iconsize },
+      })
+    }
+    return <StarIcon style={{ fontSize: iconsize }} />
+  }
+
+  /**
+   * 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.
+   */
+  const handleButtonClick = async () => {
+    setIsFormSubmitted(true)
+
+    if (!isFormValid) {
+      return
+    }
+
+    if (onClick) {
+      onClick()
+    }
+  }
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      width={width}
+    >
+      <Button
+        disableElevation
+        variant={variant}
+        startIcon={null}
+        endIcon={null}
+        type={type}
+        name={name}
+        onClick={handleButtonClick}
+        style={{
+          minWidth: text ? 'auto' : 'fit-content',
+          paddingLeft: text ? '8px' : '0',
+          paddingRight: text ? '8px' : '0',
+          justifyContent: fontlocation || 'center',
+          backgroundColor: backgroundcolor,
+          border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
+          color: iconcolor,
+          width: width,
+        }}
+      >
+        <Box display="flex" alignItems="center">
+          {iconlocation === 'left' && renderIcon()}
+          {text && (
+            <Typography
+              fontvariant={fontvariant}
+              fontcolor={fontcolor}
+              text={text}
+            />
+          )}
+          {iconlocation === 'right' && renderIcon()}
+        </Box>
+      </Button>
+      {isFormSubmitted && errorMessage && (
+        <Typography
+          fontvariant="merrihelperfooter"
+          fontcolor={red.main}
+          text={errorMessage}
+          marginTop={0.5}
+          marginBottom={0}
+          align="center"
+          width="100%"
+        />
+      )}
+    </Box>
+  )
+}
+
+export default CustomButton