goobs-frontend 0.7.70 → 0.8.0

package/README.md

@@ -6,10 +6,6 @@ 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 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 is confirmed working with the install instructions below.
-
 ## Integrating goobs-frontend with Next.js
 
 This guide explains how to integrate the goobs-frontend package with a Next.js project.
@@ -50,90 +46,175 @@ You can see more information on how we got here and how it was incorrectly done
 
 **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 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.
+All components should be successfully building as of this release and are being used within production in one way or another.
 
-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.
+This README update, along with the following documentation updates, are all part of a push to better document the usage of this project.
 
 ## Components
 
-The following components are available within goobs-frontend:
+The following components are available within goobs-frontend. Each component has a dedicated wiki page with detailed documentation, usage examples, and best practices.
 
 ### Accordion
 
 The Accordion component provides an expandable panel for organizing and presenting content in a collapsible manner.
 
+[Accordion Wiki](https://github.com/goobz22/goobs-frontend/wiki/Accordion)
+
 ### 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.
 
+[Button Wiki](https://github.com/goobz22/goobs-frontend/wiki/Button)
+
 ### Card
 
-The Card component offers various card layouts for displaying content, including product cards, pricing cards, and more.
+The Card component offers various card layouts for displaying content, including product cards, pricing cards, and more. It supports different variants such as default, inventory, pricing summary, detailed pricing summary, product, and product summary.
+
+[Card Wiki](https://github.com/goobz22/goobs-frontend/wiki/Card)
 
 ### CodeCopy
 
 The CodeCopy component renders a code block with syntax highlighting and a copy-to-clipboard functionality.
 
+[CodeCopy Wiki](https://github.com/goobz22/goobs-frontend/wiki/CodeCopy)
+
 ### ConfirmationCodeInput
 
 The ConfirmationCodeInput component provides an input field for entering confirmation codes, often used in two-factor authentication scenarios.
 
+[ConfirmationCodeInput Wiki](https://github.com/goobz22/goobs-frontend/wiki/ConfirmationCodeInput)
+
 ### Content
 
-The Content component is a flexible container for rendering various types of content within your application.
+The Content component is a flexible container for rendering various types of content within your application. It supports different content types including typography, radio groups, confirmation code inputs, links, buttons, images, pricing tables, steppers, transfer lists, cards, code copy blocks, text fields, date fields, dropdowns, increment number fields, searchbars, number fields, password fields, and QR codes.
+
+[Content Wiki](https://github.com/goobz22/goobs-frontend/wiki/Content)
+
+### DateField
+
+The DateField component provides a date picker input field with customizable styling options.
+
+[DateField Wiki](https://github.com/goobz22/goobs-frontend/wiki/DateField)
+
+### Dropdown
 
-### Form
+The Dropdown component offers a customizable select input with various styling options.
 
-The Form component includes the PopupForm subcomponent, which renders a customizable popup form.
+[Dropdown Wiki](https://github.com/goobz22/goobs-frontend/wiki/Dropdown)
 
 ### 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.
 
+[Grid Wiki](https://github.com/goobz22/goobs-frontend/wiki/Grid)
+
+### IncrementNumberField
+
+The IncrementNumberField component provides an input field for numeric values with increment and decrement buttons.
+
+[IncrementNumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/IncrementNumberField)
+
 ### Nav
 
 The Nav component provides navigation functionality, including both horizontal and vertical navigation options.
 
+[Nav Wiki](https://github.com/goobz22/goobs-frontend/wiki/Nav)
+
+### NumberField
+
+The NumberField component offers an input field specifically designed for numeric input with optional minimum and maximum value constraints.
+
+[NumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/NumberField)
+
+### PasswordField
+
+The PasswordField component provides a secure input field for password entry with a show/hide password toggle.
+
+[PasswordField Wiki](https://github.com/goobz22/goobs-frontend/wiki/PasswordField)
+
+### PhoneNumberField
+
+The PhoneNumberField component offers an input field specifically formatted for phone number entry.
+
+[PhoneNumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/PhoneNumberField)
+
 ### PricingTable
 
 The PricingTable component renders a customizable pricing table for displaying product or service pricing information.
 
+[PricingTable Wiki](https://github.com/goobz22/goobs-frontend/wiki/PricingTable)
+
+### QRCode
+
+The QRCode component generates and displays QR codes based on the provided value.
+
+[QRCode Wiki](https://github.com/goobz22/goobs-frontend/wiki/QRCode)
+
 ### RadioGroup
 
 The RadioGroup component renders a group of radio buttons for selecting a single option from multiple choices.
 
+[RadioGroup Wiki](https://github.com/goobz22/goobs-frontend/wiki/RadioGroup)
+
+### Searchbar
+
+The Searchbar component provides a search input field with customizable styling options.
+
+[Searchbar Wiki](https://github.com/goobz22/goobs-frontend/wiki/Searchbar)
+
 ### Stepper
 
 The Stepper component provides a step-by-step interface for guiding users through a process or workflow.
 
-### StyledComponent
+[Stepper Wiki](https://github.com/goobz22/goobs-frontend/wiki/Stepper)
+
+### TextField
 
-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.
+The TextField component offers a customizable text input field with various styling and behavior options.
+
+[TextField Wiki](https://github.com/goobz22/goobs-frontend/wiki/TextField)
 
 ### Toolbar
 
 The Toolbar component offers a customizable toolbar for use in various UI scenarios.
 
+[Toolbar Wiki](https://github.com/goobz22/goobs-frontend/wiki/Toolbar)
+
+### Tooltip
+
+The Tooltip component is a customizable and styled version of the Material-UI Tooltip component. It provides a way to display informative text when users hover over, focus on, or tap an element.
+
+[Tooltip Wiki](https://github.com/goobz22/goobs-frontend/wiki/Tooltip)
+
 ### TransferList
 
 The TransferList component provides a dual-list interface for transferring items between two lists.
 
+[TransferList Wiki](https://github.com/goobz22/goobs-frontend/wiki/TransferList)
+
 ### Typography
 
-The Typography component is a text component for rendering customizable typography.
+The Typography component is a text component for rendering customizable typography with support for different font families, variants, and colors.
+
+[Typography Wiki](https://github.com/goobz22/goobs-frontend/wiki/Typography)
 
 ## Usage
 
-To use the components and utilities in your project, you can import them from the `goobs-frontend` package. For example:
+To use the components, types, and utilities in your project, you can import them from the `goobs-frontend` package. Here's a comprehensive list of all available imports:
 
-```jsx
+```typescript
 import {
+  // Components
   CustomButton,
   CustomGrid,
-  StyledComponent,
   Typography,
-  RadioGroup,
   ConfirmationCodeInput,
+  RadioGroup,
+  PopupForm,
+  ContentSection,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
   Card,
   CodeCopy,
   Nav,
@@ -141,11 +222,150 @@ import {
   CustomStepper,
   CustomToolbar,
   TransferList,
-  Accordion,
+  StyledTooltip,
+  QRCodeComponent,
+  DateField,
+  Dropdown,
+  IncrementNumberField,
+  NumberField,
+  PasswordField,
+  PhoneNumberField,
+  Searchbar,
+  TextField,
+
+  // Types
+  CustomButtonProps,
+  CustomGridProps,
+  Alignment,
+  BorderProp,
+  columnconfig,
+  gridconfig,
+  cellconfig,
+  FontFamily,
+  TypographyVariant,
+  TypographyProps,
+  ConfirmationCodeInputsProps,
+  RadioOption,
+  RadioGroupProps,
+  PopupFormProps,
+  ContentSectionProps,
+  CardProps,
+  CodeCopyProps,
+  NavProps,
+  PricingProps,
+  CustomStepperProps,
+  ToolbarProps,
+  TransferListProps,
+  CustomTooltipProps,
+  QRCodeProps,
+  DateFieldProps,
+  DropdownProps,
+  IncrementNumberFieldProps,
+  NumberFieldProps,
+  PasswordFieldProps,
+  PhoneNumberFieldProps,
+  SearchbarProps,
+  TextFieldProps,
+
+  // Extended Types
+  ExtendedButtonProps,
+  ExtendedTypographyProps,
+  ExtendedTextFieldProps,
+  ExtendedQRCodeProps,
+  ExtendedDropdownProps,
+  ExtendedDateFieldProps,
+  ExtendedNumberFieldProps,
+  ExtendedIncrementNumberFieldProps,
+  ExtendedPasswordFieldProps,
+  ExtendedSearchbarProps,
+  ExtendedCodeCopyProps,
+  ExtendedCardProps,
+  ExtendedTransferListProps,
+  ExtendedStepperProps,
+  ExtendedPricingProps,
+  ExtendedImageProps,
+  ExtendedConfirmationCodeInputsProps,
+  ExtendedRadioGroupProps,
+
+  // Component Props Types
+  TypographyComponentProps,
+  ConfirmationCodeInputProps,
+  RadioGroupComponentProps,
+  PopupFormComponentProps,
+  ContentSectionComponentProps,
+  AccordionProps,
+  AccordionSummaryProps,
+  AccordionDetailsProps,
+  CardComponentProps,
+  CodeCopyComponentProps,
+  NavComponentProps,
+  PricingTableComponentProps,
+  CustomStepperComponentProps,
+  CustomToolbarComponentProps,
+  TransferListComponentProps,
+  StyledTooltipComponentProps,
+
+  // Styles
+  formContainerStyle,
+
+  // Animations
+  Animation,
+
+  // Colors
+  moss,
+  aqua,
+  madder,
+  woad,
+  marine,
+  pansy,
+  stainlessSteel,
+  coal,
+  ocean,
+  sky,
+  salmon,
+  lightning,
+  sage,
+  lilac,
+  gunpowder,
+  lightMadder,
+  black,
+  white,
+  none,
+  semiTransparentWhite,
+  semiTransparentBlack,
+  red,
+  green,
+  greyborder,
+
+  // Typography
+  arapeyh1,
+  arapeyh2,
+  arapeyh3,
+  arapeyh4,
+  arapeyh5,
+  arapeyh6,
+  arapeyparagraph,
+  interh1,
+  interh2,
+  interh3,
+  interh4,
+  interh5,
+  interh6,
+  interparagraph,
+  interhelperheader,
+  interhelperfooter,
+  merrih1,
+  merrih2,
+  merrih3,
+  merrih4,
+  merrih5,
+  merrih6,
+  merriparagraph,
+  merrihelperfooter,
 } from 'goobs-frontend'
 ```
 
-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).
+Please refer to the individual component and utility files for more details on their usage and available props.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.70",
+  "version": "0.8.0",
   "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",
@@ -21,13 +21,13 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/material": "^5.16.7",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
     "@types/lodash": "^4.17.7",
     "highlight.js": "^11.10.0",
     "jotai": "^2.9.3",
     "lodash": "^4.17.21",
-    "next": "14.2.6",
+    "next": "14.2.8",
     "react-datepicker": "^7.3.0",
     "react-qr-code": "^2.0.15"
   },
@@ -39,7 +39,7 @@
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.6",
+    "eslint-config-next": "^14.2.8",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3",

package/src/components/Dropdown/index.tsx

@@ -4,19 +4,73 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
-  SelectChangeEvent,
+  SelectProps,
+  FormHelperText,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-export interface DropdownProps {
+export interface DropdownOption {
+  value: string
   label: string
-  options: string[]
-  defaultOption?: string
-  onChange?: () => void
+}
+
+export interface DropdownProps extends Omit<SelectProps, 'onChange'> {
+  /**
+   * The label for the dropdown.
+   */
+  label: string
+  /**
+   * The options for the dropdown.
+   */
+  options: DropdownOption[]
+  /**
+   * The default value for the dropdown.
+   */
+  defaultValue?: string
+  /**
+   * The background color of the dropdown.
+   */
   backgroundcolor?: string
+  /**
+   * The outline color of the dropdown.
+   */
   outlinecolor?: string
+  /**
+   * The font color of the dropdown.
+   */
   fontcolor?: string
+  /**
+   * The font color of the dropdown label when shrunk.
+   */
   shrunkfontcolor?: string
+  /**
+   * Callback function triggered when the dropdown value changes.
+   */
+  onChange?: SelectProps['onChange']
+  /**
+   * Indicates if the dropdown is in an error state.
+   */
+  error?: boolean
+  /**
+   * The helper text to display below the dropdown.
+   */
+  helperText?: string
+  /**
+   * The name of the dropdown.
+   */
+  name?: string
+  /**
+   * Indicates if the dropdown is required.
+   */
+  required?: boolean
+  /**
+   * Callback function triggered when the dropdown loses focus.
+   */
+  onBlur?: SelectProps['onBlur']
+  /**
+   * Callback function triggered when the dropdown receives focus.
+   */
+  onFocus?: SelectProps['onFocus']
 }
 
 const StyledFormControl = styled(FormControl)<{
@@ -46,44 +100,74 @@ const StyledInputLabel = styled(InputLabel)<{ shrunkfontcolor?: string }>(
   })
 )
 
+/**
+ * Dropdown component built with Material UI.
+ */
 const Dropdown: React.FC<DropdownProps> = ({
   label,
   options,
-  defaultOption,
-  onChange,
+  defaultValue,
   backgroundcolor,
   outlinecolor,
   fontcolor,
   shrunkfontcolor,
+  onChange,
+  error = false,
+  helperText,
+  name,
+  required = false,
+  onBlur,
+  onFocus,
+  ...rest
 }) => {
-  const [selectedValue, setSelectedValue] = useState(defaultOption || '')
+  const [selectedValue, setSelectedValue] = useState(() => {
+    const defaultOption = options.find(option => option.value === defaultValue)
+    return defaultOption ? defaultOption.value : ''
+  })
 
-  const handleChange = (event: SelectChangeEvent) => {
+  const handleChange: SelectProps['onChange'] = (event, child) => {
     const newValue = event.target.value as string
     setSelectedValue(newValue)
-    onChange?.()
+    onChange?.(event, child)
+  }
+
+  const handleBlur: SelectProps['onBlur'] = event => {
+    onBlur?.(event)
+  }
+
+  const handleFocus: SelectProps['onFocus'] = event => {
+    onFocus?.(event)
   }
 
   return (
     <StyledFormControl
       backgroundcolor={backgroundcolor}
       outlinecolor={outlinecolor}
+      error={error}
+      required={required}
     >
-      <StyledInputLabel shrunkfontcolor={shrunkfontcolor}>
+      <StyledInputLabel id={`${name}-label`} shrunkfontcolor={shrunkfontcolor}>
         {label}
       </StyledInputLabel>
       <Select
+        labelId={`${name}-label`}
         value={selectedValue}
         onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         label={label}
         sx={{ color: fontcolor }}
+        name={name}
+        aria-labelledby={`${name}-label`}
+        {...rest}
       >
         {options.map(option => (
-          <MenuItem key={option} value={option}>
-            {option}
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
           </MenuItem>
         ))}
       </Select>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </StyledFormControl>
   )
 }

package/src/components/Grid/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import React from 'react'
-import { Grid, Box, GridProps, useMediaQuery, useTheme } from '@mui/material'
+import Grid2, { Grid2Props } from '@mui/material/Grid2'
+import { Box, useMediaQuery, useTheme } from '@mui/material'
 
 /** Defines the possible alignment options for grid content */
 export type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
@@ -47,7 +48,7 @@ export interface gridconfig {
 /**
  * Props for the CustomGrid component
  */
-export interface CustomGridProps extends GridProps {
+export interface CustomGridProps extends Grid2Props {
   gridconfig?: gridconfig
   columnconfig?: columnconfig[]
   cellconfig?: cellconfig
@@ -111,7 +112,6 @@ const CustomGrid: React.FC<CustomGridProps> = ({
       minWidth={minGridWidth}
     >
       <Box
-        // @ts-ignore
         mt={gridConfigValues?.margintop || 0}
         mb={gridConfigValues?.marginbottom || 0}
         ml={gridConfigValues?.marginleft || 0}
@@ -132,7 +132,7 @@ const CustomGrid: React.FC<CustomGridProps> = ({
           )
 
           return (
-            <Grid
+            <Grid2
               key={`row-${rowIndex}`}
               container
               alignItems="center"
@@ -194,8 +194,7 @@ const CustomGrid: React.FC<CustomGridProps> = ({
                 const computerWidth = currentCellConfig?.computerwidth || '100%'
 
                 return (
-                  <Grid
-                    item
+                  <Grid2
                     key={`column-${columnIndex}`}
                     sx={{
                       display: 'flex',
@@ -250,10 +249,10 @@ const CustomGrid: React.FC<CustomGridProps> = ({
                     >
                       {currentColumnConfig?.component || null}
                     </Box>
-                  </Grid>
+                  </Grid2>
                 )
               })}
-            </Grid>
+            </Grid2>
           )
         })}
       </Box>