goobs-frontend 0.9.2 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -55,6 +55,7 @@
     "@storybook/nextjs": "^8",
     "@storybook/react": "^8",
     "@storybook/test": "^8",
+    "@types/node": "^22.13.8",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8",

package/src/components/Content/Structure/Address/useAddress.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import AddressStructure from '../../../Field/IPAM/Address'
+import type { IPAddressFieldProps } from '../../../Field/IPAM/Address'
+
+export interface UseAddressProps {
+  address?: IPAddressFieldProps | IPAddressFieldProps[]
+}
+
+const useAddress = ({
+  address,
+}: UseAddressProps): React.ReactElement[] | null => {
+  if (!address) return null
+
+  const addressArray = Array.isArray(address) ? address : [address]
+
+  return addressArray.map((props, index) => (
+    <AddressStructure key={index} {...props} />
+  ))
+}
+
+export default useAddress

package/src/components/Content/Structure/CIDR/useCIDR.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import CIDRStructure from '../../../Field/IPAM/CIDR'
+import type { CIDRFieldProps } from '../../../Field/IPAM/CIDR'
+
+export interface UseCIDRProps {
+  cidr?: CIDRFieldProps | CIDRFieldProps[]
+}
+
+const useCIDR = ({ cidr }: UseCIDRProps): React.ReactElement[] | null => {
+  if (!cidr) return null
+
+  const cidrArray = Array.isArray(cidr) ? cidr : [cidr]
+
+  return cidrArray.map((props, index) => (
+    <CIDRStructure key={index} {...props} />
+  ))
+}
+
+export default useCIDR

package/src/components/Content/Structure/Subnet/useSubnet.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import SubnetField from '../../../../components/Field/IPAM/Subnet'
+import type { InternalIncrementNumberFieldProps as SubnetFieldProps } from '../../../../components/Field/IPAM/Subnet'
+
+interface UseSubnetProps {
+  subnet?: SubnetFieldProps | SubnetFieldProps[]
+}
+
+const useSubnet = ({ subnet }: UseSubnetProps): React.ReactElement[] | null => {
+  if (!subnet) return null
+
+  const subnetArray = Array.isArray(subnet) ? subnet : [subnet]
+
+  return subnetArray.map((props, index) => (
+    <SubnetField key={index} {...props} />
+  ))
+}
+
+export default useSubnet

package/src/components/Content/Structure/Supernet/useSupernet.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import SupernetField from '../../../../components/Field/IPAM/Subnet'
+import type { InternalIncrementNumberFieldProps as SupernetFieldProps } from '../../../../components/Field/IPAM/Subnet'
+
+interface UseSupernet {
+  supernet?: SupernetFieldProps | SupernetFieldProps[]
+}
+
+const useSupernet = ({
+  supernet,
+}: UseSupernet): React.ReactElement[] | null => {
+  if (!supernet) return null
+
+  const supernetArray = Array.isArray(supernet) ? supernet : [supernet]
+
+  return supernetArray.map((props, index) => (
+    <SupernetField key={index} {...props} />
+  ))
+}
+
+export default useSupernet

package/src/components/Content/Structure/USD/useUSD.tsx

@@ -0,0 +1,145 @@
+import { useState, useCallback } from 'react'
+import React from 'react'
+import { Box, InputAdornment } from '@mui/material'
+import TextField from '../../../Field/Text'
+import { black } from '../../../../styles/palette'
+
+export interface UseUSDProps {
+  usdField?: USDFieldProps | USDFieldProps[]
+}
+
+export interface USDFieldProps {
+  initialValue?: string
+  onChange?: (value: string) => void
+  label?: string
+  min?: number
+  max?: number
+  precision?: number
+  readOnly?: boolean
+  disabled?: boolean
+  error?: boolean
+  helperText?: string
+  placeholder?: string
+  sx?: React.CSSProperties
+}
+
+const formatCurrency = (value: string): string => {
+  // Remove all non-numeric characters except decimal point
+  const numericValue = value.replace(/[^0-9.]/g, '')
+
+  // Handle empty input
+  if (!numericValue) return ''
+
+  // Allow manual decimal input
+  if (numericValue === '.') return '.'
+
+  // Handle multiple decimal points - keep only the first one
+  const parts = numericValue.split('.')
+  if (parts.length > 2) {
+    return `${parts[0]}.${parts.slice(1).join('')}`
+  }
+
+  // If there's a decimal point, allow manual input
+  if (numericValue.includes('.')) {
+    return numericValue
+  }
+
+  // For whole numbers, convert and format
+  const number = parseFloat(numericValue)
+  if (isNaN(number)) return ''
+
+  return number.toString()
+}
+
+const USDComponent: React.FC<USDFieldProps> = ({
+  initialValue = '',
+  onChange,
+  label = 'Amount',
+  min,
+  max,
+  precision = 2,
+  readOnly = false,
+  disabled = false,
+  error = false,
+  helperText,
+  placeholder,
+  sx,
+}) => {
+  const [value, setValue] = useState(initialValue)
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (readOnly) return
+
+      const newValue = event.target.value
+      const formattedValue = formatCurrency(newValue)
+
+      // Validate min/max if provided
+      const numericValue = parseFloat(formattedValue)
+      if (!isNaN(numericValue)) {
+        if (min !== undefined && numericValue < min) {
+          const minValue = min.toFixed(precision)
+          setValue(minValue)
+          onChange?.(minValue)
+          return
+        }
+        if (max !== undefined && numericValue > max) {
+          const maxValue = max.toFixed(precision)
+          setValue(maxValue)
+          onChange?.(maxValue)
+          return
+        }
+      }
+
+      setValue(formattedValue)
+      onChange?.(formattedValue)
+    },
+    [onChange, precision, min, max, readOnly]
+  )
+
+  return (
+    <Box>
+      <TextField
+        value={value}
+        onChange={handleChange}
+        label={label}
+        type="text"
+        inputMode="decimal"
+        variant="outlined"
+        disabled={disabled}
+        error={error}
+        helperText={helperText}
+        placeholder={placeholder}
+        sx={sx}
+        slotProps={{
+          input: {
+            readOnly,
+            startAdornment: (
+              <InputAdornment position="start" sx={{ color: black.main }}>
+                $
+              </InputAdornment>
+            ),
+            sx: {
+              '& .MuiInputBase-input': {
+                marginLeft: '-10px',
+              },
+              '&::placeholder': {
+                marginLeft: '-10px',
+              },
+            },
+          },
+        }}
+      />
+    </Box>
+  )
+}
+
+export const useUSD = ({ usdField }: UseUSDProps): React.ReactElement[] => {
+  if (!usdField) return []
+
+  const fields = Array.isArray(usdField) ? usdField : [usdField]
+
+  return fields.map((field, index) => <USDComponent key={index} {...field} />)
+}
+
+export default useUSD

package/src/components/Content/Structure/VLAN/useVLAN.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import VLANStructure from '../../../Field/IPAM/VLAN'
+import type { VLANFieldProps } from '../../../Field/IPAM/VLAN'
+
+export interface UseVLANProps {
+  vlan?: VLANFieldProps | VLANFieldProps[]
+}
+
+const useVLAN = ({ vlan }: UseVLANProps): React.ReactElement[] | null => {
+  if (!vlan) return null
+
+  const vlanArray = Array.isArray(vlan) ? vlan : [vlan]
+
+  return vlanArray.map((props, index) => (
+    <VLANStructure key={index} {...props} />
+  ))
+}
+
+export default useVLAN

package/src/components/Content/Structure/datefield/useDateField.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import DateField, { DateFieldProps } from './../../../DateField'
+import DateField, { DateFieldProps } from '../../../Field/Date'
 
 const useDateField = (props: {
   datefield?: DateFieldProps | DateFieldProps[]

package/src/components/Content/Structure/dropdown/useDropdown.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import Dropdown, { DropdownProps } from './../../../Dropdown'
+import Dropdown, { DropdownProps } from '../../../Field/Dropdown/Regular'
 
 const useDropdown = (props: {
   dropdown?: DropdownProps | DropdownProps[]

package/src/components/Content/Structure/incremementNumberField/useIncremementNumberField.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import IncrementNumberField, {
   IncrementNumberFieldProps,
-} from './../../../IncrementNumberField'
+} from '../../../Field/Number/ExternalIncrement'
 
 const useIncrementNumberField = (props: {
   incrementNumberField?: IncrementNumberFieldProps | IncrementNumberFieldProps[]

package/src/components/Content/Structure/multiSelect/useMultiSelect.tsx

@@ -1,6 +1,8 @@
 'use client'
 import React from 'react'
-import MultipleSelectChip, { MultiSelectChipProps } from '../../../MultiSelect'
+import MultipleSelectChip, {
+  MultiSelectChipProps,
+} from '../../../Field/Dropdown/MultiSelect'
 
 const useMultiSelect = (props: {
   multiSelect?: MultiSelectChipProps | MultiSelectChipProps[]

package/src/components/Content/Structure/numberField/useNumberField.tsx

@@ -1,14 +1,18 @@
 'use client'
 import React from 'react'
-import NumberField, { NumberFieldProps } from './../../../NumberField'
+import NumberField, {
+  InternalIncrementNumberFieldProps,
+} from '../../../Field/Number/InternalIncrement'
 
 const useNumberField = (props: {
-  numberField?: NumberFieldProps | NumberFieldProps[]
+  numberField?:
+    | InternalIncrementNumberFieldProps
+    | InternalIncrementNumberFieldProps[]
 }): React.ReactElement[] | null => {
   if (!props.numberField) return null
 
   const renderNumberField = (
-    numberFieldItem: NumberFieldProps,
+    numberFieldItem: InternalIncrementNumberFieldProps,
     index: number
   ): React.ReactElement => {
     return <NumberField key={`number-field-${index}`} {...numberFieldItem} />

package/src/components/Content/Structure/passwordField/usePasswordField.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import PasswordField, { PasswordFieldProps } from './../../../PasswordField'
+import PasswordField, { PasswordFieldProps } from '../../../Field/Password'
 
 const usePasswordField = (props: {
   passwordField?: PasswordFieldProps | PasswordFieldProps[]

package/src/components/Content/Structure/phoneNumber/usePhoneNumber.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
-import PhoneNumberField from '../../../PhoneNumberField'
-import type { TextFieldProps } from '../../../TextField'
+import PhoneNumberField from '../../../Field/PhoneNumber'
+import type { TextFieldProps } from '../../../Field/Text'
 
 const usePhoneNumber = (props: {
   phoneNumberField?: TextFieldProps | TextFieldProps[]

package/src/components/Content/Structure/searchableDropdown/useSearchableDropdown.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import SearchableDropdown, {
   SearchableDropdownProps,
-} from './../../../SearchableDropdown'
+} from '../../../Field/Dropdown/Searchable'
 
 const useSearchableDropdown = (props: {
   searchableDropdown?: SearchableDropdownProps | SearchableDropdownProps[]

package/src/components/Content/Structure/searchbar/useSearchbar.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import Searchbar, { SearchbarProps } from './../../../Searchbar'
+import Searchbar, { SearchbarProps } from '../../../Field/Search'
 
 const useSearchbar = (props: {
   searchbar?: SearchbarProps | SearchbarProps[]

package/src/components/Content/Structure/textfield/useTextField.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import TextField, { TextFieldProps } from '../../../../components/TextField'
+import TextField, { TextFieldProps } from '../../../Field/Text'
 
 const useTextField = (props: {
   textfield?: TextFieldProps | TextFieldProps[]

package/src/components/Content/index.tsx

@@ -5,7 +5,7 @@ import { Box, BoxProps } from '@mui/material'
 import { TypographyProps } from '../Typography'
 import { RadioGroupProps } from '../RadioGroup'
 import { ConfirmationCodeInputsProps } from '../ConfirmationCodeInput'
-import { TextFieldProps } from '../TextField'
+import { TextFieldProps } from '../Field/Text'
 import { CustomButtonProps } from '../Button'
 import { ImageProps } from './Structure/image/useImage'
 import { PricingProps } from '../PricingTable'
@@ -13,20 +13,26 @@ import { CustomStepperProps } from '../Stepper'
 import { TransferListProps } from '../TransferList'
 import { CardProps } from '../Card'
 import { CodeCopyProps } from '../CodeCopy'
-import { DateFieldProps } from '../DateField'
-import { DropdownProps } from '../Dropdown'
-import { IncrementNumberFieldProps } from '../IncrementNumberField'
-import { SearchbarProps } from '../Searchbar'
-import { NumberFieldProps } from '../NumberField'
-import { PasswordFieldProps } from '../PasswordField'
+import { DateFieldProps } from '../Field/Date'
+import { DropdownProps } from '../Field/Dropdown/Regular'
+import { IncrementNumberFieldProps } from '../Field/Number/ExternalIncrement'
+import { SearchbarProps } from '../Field/Search'
+import { InternalIncrementNumberFieldProps } from '../Field/Number/InternalIncrement'
+import { InternalIncrementNumberFieldProps as SubnetFieldProps } from '../Field/IPAM/Subnet'
+import { InternalIncrementNumberFieldProps as SupernetFieldProps } from '../Field/IPAM/Subnet'
+import { PasswordFieldProps } from '../Field/Password'
 import { QRCodeProps } from '../QRCode'
 import { ComplexTextEditorProps } from '../ComplexTextEditor'
-import { SearchableDropdownProps } from '../SearchableDropdown'
+import { SearchableDropdownProps } from '../Field/Dropdown/Searchable'
 import { AccordionProps } from '../Accordion'
 import { ProjectBoardProps } from '../ProjectBoard/types'
-import { MultiSelectChipProps } from '../MultiSelect'
+import { MultiSelectChipProps } from '../Field/Dropdown/MultiSelect'
 import { CheckboxProps } from '../Checkbox'
 import { LinkProps } from './Structure/link/useLink'
+import type { USDFieldProps } from './Structure/USD/useUSD'
+import { CIDRFieldProps } from '../Field/IPAM/CIDR'
+import { IPAddressFieldProps } from '../Field/IPAM/Address'
+import { VLANFieldProps } from '../Field/IPAM/VLAN'
 
 // Import hooks
 import useTypography from './Structure/typography/useTypography'
@@ -55,6 +61,12 @@ import useSearchableDropdown from './Structure/searchableDropdown/useSearchableD
 import useAccordion from './Structure/accordion/useAccordion'
 import useProjectBoard from './Structure/projectboard/useProjectBoard'
 import useMultiSelect from './Structure/multiSelect/useMultiSelect'
+import useSubnet from './Structure/Subnet/useSubnet'
+import useSupernet from './Structure/Supernet/useSupernet'
+import useCIDR from './Structure/CIDR/useCIDR'
+import useAddress from './Structure/Address/useAddress'
+import useVLAN from './Structure/VLAN/useVLAN'
+import useUSD from './Structure/USD/useUSD'
 
 export interface ContentSectionProps {
   grids: Array<{
@@ -83,12 +95,20 @@ export interface ContentSectionProps {
       | IncrementNumberFieldProps
       | IncrementNumberFieldProps[]
     searchbar?: SearchbarProps | SearchbarProps[]
-    numberField?: NumberFieldProps | NumberFieldProps[]
+    numberField?:
+      | InternalIncrementNumberFieldProps
+      | InternalIncrementNumberFieldProps[]
     passwordField?: PasswordFieldProps | PasswordFieldProps[]
     qrcode?: QRCodeProps | QRCodeProps[]
     phoneNumberField?: TextFieldProps | TextFieldProps[]
     checkbox?: CheckboxProps | CheckboxProps[]
     multiSelect?: MultiSelectChipProps | MultiSelectChipProps[]
+    subnet?: SubnetFieldProps | SubnetFieldProps[]
+    supernet?: SupernetFieldProps | SupernetFieldProps[]
+    cidr?: CIDRFieldProps | CIDRFieldProps[]
+    address?: IPAddressFieldProps | IPAddressFieldProps[]
+    vlan?: VLANFieldProps | VLANFieldProps[]
+    usdField?: USDFieldProps | USDFieldProps[]
     // Added optional style property for grid customization
     style?: React.CSSProperties
   }>
@@ -144,6 +164,12 @@ const RenderContent: React.FC<ContentSectionProps['grids'][0]> = ({
   addElements(useNumberField({ numberField: props.numberField }))
   addElements(usePasswordField({ passwordField: props.passwordField }))
   addElements(useQRCode({ qrcode: props.qrcode }))
+  addElements(useSubnet({ subnet: props.subnet }))
+  addElements(useSupernet({ supernet: props.supernet }))
+  addElements(useCIDR({ cidr: props.cidr }))
+  addElements(useAddress({ address: props.address }))
+  addElements(useVLAN({ vlan: props.vlan }))
+  addElements(useUSD({ usdField: props.usdField }))
 
   // Merge any style provided in boxProps with the grid's style property
   const mergedStyle = { ...(boxProps?.style || {}), ...style }

package/src/components/DataGrid/ManageColumn/index.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Box, Popover, IconButton } from '@mui/material'
 import { useManageColumn } from '../utils/useManageColumn'
 import CustomButton from '../../Button'
-import Searchbar from '../../Searchbar'
+import Searchbar from '../../Field/Search'
 import Checkbox from '../../Checkbox'
 import ShowHideEyeIcon from '../../Icons/ShowHideEye'
 import { ColumnDef } from '../types'

package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { TableRow, TableCell, Checkbox } from '@mui/material'
 import type { ColumnDef } from '../../types'
 import { white } from '../../../../styles/palette'
-import SearchableDropdown from '../../../SearchableDropdown'
+import SearchableDropdown from '../../../Field/Dropdown/Searchable'
 
 interface ColumnHeaderRowProps {
   isMobile: boolean

package/src/components/DataGrid/types/index.ts

@@ -2,8 +2,8 @@
 
 import React from 'react'
 import type { CustomButtonProps } from '../../Button'
-import type { DropdownProps } from '../../Dropdown'
-import type { SearchbarProps } from '../../Searchbar'
+import type { DropdownProps } from '../../Field/Dropdown/Regular'
+import type { SearchbarProps } from '../../Field/Search'
 
 export interface ColumnDef {
   field: string

package/src/components/DataGrid/utils/useToolbarSearchbar.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useMemo, useState, useEffect } from 'react'
 import type { ColumnDef, RowData } from '../types'
-import type { SearchbarProps } from '../../Searchbar'
+import type { SearchbarProps } from '../../Field/Search'
 import * as palette from '../../../styles/palette'
 
 interface UseSearchbarProps {

package/src/components/{DateField → Field/Date}/datefield.stories.tsx

@@ -8,7 +8,7 @@ import DateField from './index'
  * Storybook metadata
  */
 const meta: Meta<typeof DateField> = {
-  title: 'Components/DateField',
+  title: 'Components/Field/Date',
   component: DateField,
   parameters: {
     a11y: {

package/src/components/{DateField → Field/Date}/index.tsx

@@ -3,7 +3,7 @@ import React, { useState, forwardRef } from 'react'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday'
-import TextField, { TextFieldProps } from '../TextField'
+import TextField, { TextFieldProps } from '../../Field/Text'
 
 export interface DateFieldProps
   extends Omit<TextFieldProps, 'onChange' | 'value' | 'endAdornment'> {

package/src/components/{MultiSelect → Field/Dropdown/MultiSelect}/multiselect.stories.tsx

@@ -9,7 +9,7 @@ import { within, userEvent, expect } from '@storybook/test'
 import MultipleSelectChip from './index'
 
 const meta: Meta<typeof MultipleSelectChip> = {
-  title: 'Components/MultiSelectChip',
+  title: 'Components/Field/Dropdown/MultiSelect',
   component: MultipleSelectChip,
   parameters: {
     a11y: { disable: false },

package/src/components/{Dropdown → Field/Dropdown/Regular}/dropdown.stories.tsx

@@ -8,7 +8,7 @@ import Dropdown from './index'
  * Setup story metadata
  */
 const meta: Meta<typeof Dropdown> = {
-  title: 'Components/Dropdown',
+  title: 'Components/Field/Dropdown/Regular',
   component: Dropdown,
   // Let Storybook build color pickers and other controls for these props
   argTypes: {

package/src/components/{Dropdown → Field/Dropdown/Regular}/index.tsx

@@ -18,8 +18,8 @@ import {
   OutlinedInput,
   SelectChangeEvent,
 } from '@mui/material'
-import Typography from '../Typography'
-import { black, white } from '../../styles/palette'
+import Typography from '../../../Typography'
+import { black, white } from '../../../../styles/palette'
 
 export interface SimpleDropdownOption {
   value: string

package/src/components/{SearchableDropdown → Field/Dropdown/Searchable}/index.tsx

@@ -9,8 +9,8 @@ import {
   FormControl,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
-import { black, white } from '../../styles/palette'
-import Typography from '../Typography'
+import { black, white } from '../../../../styles/palette'
+import Typography from '../../../Typography'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 
 export interface DropdownOption {

package/src/components/{SearchableDropdown → Field/Dropdown/Searchable}/searchabledropdown.stories.tsx

@@ -20,7 +20,7 @@ const sampleOptions = [
  * Storybook metadata
  */
 const meta: Meta<typeof SearchableDropdown> = {
-  title: 'Components/SearchableDropdown',
+  title: 'Components/Field/Dropdown/Searchable',
   component: SearchableDropdown,
   argTypes: {
     backgroundcolor: { control: 'color' },