goobs-frontend 0.7.69 → 0.7.71

package/README.md

@@ -68,7 +68,7 @@ The Button component is a customizable button with support for icons, variants,
 
 ### 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.
 
 ### CodeCopy
 
@@ -80,7 +80,15 @@ The ConfirmationCodeInput component provides an input field for entering confirm
 
 ### 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.
+
+### DateField
+
+The DateField component provides a date picker input field with customizable styling options.
+
+### Dropdown
+
+The Dropdown component offers a customizable select input with various styling options.
 
 ### Form
 
@@ -90,25 +98,49 @@ The Form component includes the PopupForm subcomponent, which renders a customiz
 
 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.
 
+### IncrementNumberField
+
+The IncrementNumberField component provides an input field for numeric values with increment and decrement buttons.
+
 ### Nav
 
 The Nav component provides navigation functionality, including both horizontal and vertical navigation options.
 
+### NumberField
+
+The NumberField component offers an input field specifically designed for numeric input with optional minimum and maximum value constraints.
+
+### PasswordField
+
+The PasswordField component provides a secure input field for password entry with a show/hide password toggle.
+
+### PhoneNumberField
+
+The PhoneNumberField component offers an input field specifically formatted for phone number entry.
+
 ### PricingTable
 
 The PricingTable component renders a customizable pricing table for displaying product or service pricing information.
 
+### QRCode
+
+The QRCode component generates and displays QR codes based on the provided value.
+
 ### RadioGroup
 
 The RadioGroup component renders a group of radio buttons for selecting a single option from multiple choices.
 
+### Searchbar
+
+The Searchbar component provides a search input field with customizable styling options.
+
 ### Stepper
 
 The Stepper component provides a step-by-step interface for guiding users through a process or workflow.
 
-### StyledComponent
+### 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.
 
 ### Toolbar
 
@@ -120,20 +152,25 @@ The TransferList component provides a dual-list interface for transferring items
 
 ### 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.
 
 ## 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,7 +178,146 @@ 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'
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.69",
+  "version": "0.7.71",
   "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>