goobs-frontend 0.8.1 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +8 -8
  2. package/src/components/Content/Structure/phoneNumber/usePhoneNumber.tsx +61 -0
  3. package/src/components/Content/index.tsx +7 -1
  4. package/src/components/Dropdown/index.tsx +41 -52
  5. package/src/components/PhoneNumberField/index.tsx +2 -1
  6. package/src/components/PricingTable/defaultconfig.tsx +19 -22
  7. package/src/index.ts +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "goobs-frontend",
3
- "version": "0.8.1",
3
+ "version": "0.8.3",
4
4
  "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.",
5
5
  "license": "MIT",
6
6
  "main": "./src/index.ts",
@@ -21,25 +21,25 @@
21
21
  "@emotion/cache": "^11.13.1",
22
22
  "@emotion/react": "^11.13.3",
23
23
  "@emotion/styled": "^11.13.0",
24
- "@mui/icons-material": "^6.0.2",
25
- "@mui/material": "^6.0.2",
24
+ "@mui/icons-material": "^6.1.0",
25
+ "@mui/material": "^6.1.0",
26
26
  "@types/lodash": "^4.17.7",
27
27
  "highlight.js": "^11.10.0",
28
28
  "jotai": "^2.9.3",
29
29
  "lodash": "^4.17.21",
30
- "next": "14.2.8",
30
+ "next": "14.2.9",
31
31
  "react-datepicker": "^7.3.0",
32
32
  "react-qr-code": "^2.0.15"
33
33
  },
34
34
  "devDependencies": {
35
- "@next/eslint-plugin-next": "^14.2.6",
35
+ "@next/eslint-plugin-next": "^14.2.9",
36
36
  "@types/node": "^22.5.4",
37
37
  "@types/react": "18.3.4",
38
38
  "@types/react-dom": "^18.3.0",
39
- "@typescript-eslint/eslint-plugin": "^8.4.0",
40
- "@typescript-eslint/parser": "^8.4.0",
39
+ "@typescript-eslint/eslint-plugin": "^8.5.0",
40
+ "@typescript-eslint/parser": "^8.5.0",
41
41
  "eslint": "^9.9.1",
42
- "eslint-config-next": "^14.2.8",
42
+ "eslint-config-next": "^14.2.9",
43
43
  "eslint-config-prettier": "^9.1.0",
44
44
  "eslint-plugin-prettier": "^5.2.1",
45
45
  "prettier": "^3.3.3",
package/src/components/Content/Structure/phoneNumber/usePhoneNumber.tsx CHANGED
@@ -0,0 +1,61 @@
1
+ 'use client'
2
+ import React from 'react'
3
+ import PhoneNumberField, {
4
+ PhoneNumberFieldProps,
5
+ } from './../../../PhoneNumberField'
6
+ import { columnconfig, cellconfig } from '../../../Grid'
7
+
8
+ export interface ExtendedPhoneNumberFieldProps extends PhoneNumberFieldProps {
9
+ columnconfig?: Partial<columnconfig>
10
+ cellconfig?: cellconfig
11
+ }
12
+
13
+ const usePhoneNumber = (grid: {
14
+ phoneNumberField?:
15
+ | ExtendedPhoneNumberFieldProps
16
+ | ExtendedPhoneNumberFieldProps[]
17
+ }) => {
18
+ if (!grid.phoneNumberField) return null
19
+
20
+ const renderPhoneNumberField = (
21
+ phoneNumberFieldItem: ExtendedPhoneNumberFieldProps,
22
+ index: number
23
+ ): columnconfig => {
24
+ const {
25
+ columnconfig: itemColumnConfig,
26
+ cellconfig,
27
+ ...restProps
28
+ } = phoneNumberFieldItem
29
+
30
+ if (
31
+ !itemColumnConfig ||
32
+ typeof itemColumnConfig !== 'object' ||
33
+ typeof itemColumnConfig.row !== 'number' ||
34
+ typeof itemColumnConfig.column !== 'number'
35
+ ) {
36
+ throw new Error(
37
+ 'columnconfig must be an object with row and column as numbers'
38
+ )
39
+ }
40
+
41
+ const mergedConfig: columnconfig = {
42
+ ...(itemColumnConfig as columnconfig),
43
+ cellconfig: {
44
+ ...cellconfig,
45
+ },
46
+ component: (
47
+ <PhoneNumberField key={`phone-number-field-${index}`} {...restProps} />
48
+ ),
49
+ }
50
+
51
+ return mergedConfig
52
+ }
53
+
54
+ if (Array.isArray(grid.phoneNumberField)) {
55
+ return grid.phoneNumberField.map(renderPhoneNumberField)
56
+ } else {
57
+ return [renderPhoneNumberField(grid.phoneNumberField, 0)]
58
+ }
59
+ }
60
+
61
+ export default usePhoneNumber
package/src/components/Content/index.tsx CHANGED
@@ -57,7 +57,9 @@ import usePasswordField, {
57
57
  ExtendedPasswordFieldProps,
58
58
  } from './Structure/passwordField/usePasswordField'
59
59
  import useQRCode, { ExtendedQRCodeProps } from './Structure/qrcode/useQRCode'
60
-
60
+ import usePhoneNumber, {
61
+ ExtendedPhoneNumberFieldProps,
62
+ } from './Structure/phoneNumber/usePhoneNumber'
61
63
  /**
62
64
  * Props for the ContentSection component.
63
65
  * Includes configuration for various content elements.
@@ -90,6 +92,9 @@ export interface ContentSectionProps {
90
92
  numberField?: ExtendedNumberFieldProps | ExtendedNumberFieldProps[]
91
93
  passwordField?: ExtendedPasswordFieldProps | ExtendedPasswordFieldProps[]
92
94
  qrcode?: ExtendedQRCodeProps | ExtendedQRCodeProps[]
95
+ phoneNumberField?:
96
+ | ExtendedPhoneNumberFieldProps
97
+ | ExtendedPhoneNumberFieldProps[]
93
98
  }>
94
99
  width?: number
95
100
  }
@@ -130,6 +135,7 @@ const RenderContent: React.FC<
130
135
  addToColumnConfigs(useCodeCopy(props))
131
136
  addToColumnConfigs(useTextField(props))
132
137
  addToColumnConfigs(useDateField(props))
138
+ addToColumnConfigs(usePhoneNumber(props))
133
139
  addToColumnConfigs(useDropdown(props))
134
140
  addToColumnConfigs(
135
141
  useIncrementNumberField({
package/src/components/Dropdown/index.tsx CHANGED
@@ -6,70 +6,35 @@ import {
6
6
  InputLabel,
7
7
  SelectProps,
8
8
  FormHelperText,
9
+ Typography,
9
10
  } from '@mui/material'
10
11
  import { styled } from '@mui/material/styles'
11
12
 
12
- export interface DropdownOption {
13
+ export interface SimpleDropdownOption {
13
14
  value: string
14
- label: string
15
15
  }
16
16
 
17
+ export interface ComplexDropdownOption extends SimpleDropdownOption {
18
+ attribute1?: string
19
+ attribute2?: string
20
+ }
21
+
22
+ export type DropdownOption = SimpleDropdownOption | ComplexDropdownOption
23
+
17
24
  export interface DropdownProps extends Omit<SelectProps, 'onChange'> {
18
- /**
19
- * The label for the dropdown.
20
- */
21
25
  label: string
22
- /**
23
- * The options for the dropdown.
24
- */
25
26
  options: DropdownOption[]
26
- /**
27
- * The default value for the dropdown.
28
- */
29
27
  defaultValue?: string
30
- /**
31
- * The background color of the dropdown.
32
- */
33
28
  backgroundcolor?: string
34
- /**
35
- * The outline color of the dropdown.
36
- */
37
29
  outlinecolor?: string
38
- /**
39
- * The font color of the dropdown.
40
- */
41
30
  fontcolor?: string
42
- /**
43
- * The font color of the dropdown label when shrunk.
44
- */
45
31
  shrunkfontcolor?: string
46
- /**
47
- * Callback function triggered when the dropdown value changes.
48
- */
49
32
  onChange?: SelectProps['onChange']
50
- /**
51
- * Indicates if the dropdown is in an error state.
52
- */
53
33
  error?: boolean
54
- /**
55
- * The helper text to display below the dropdown.
56
- */
57
34
  helperText?: string
58
- /**
59
- * The name of the dropdown.
60
- */
61
35
  name?: string
62
- /**
63
- * Indicates if the dropdown is required.
64
- */
65
36
  required?: boolean
66
- /**
67
- * Callback function triggered when the dropdown loses focus.
68
- */
69
37
  onBlur?: SelectProps['onBlur']
70
- /**
71
- * Callback function triggered when the dropdown receives focus.
72
- */
73
38
  onFocus?: SelectProps['onFocus']
74
39
  }
75
40
 
@@ -100,9 +65,16 @@ const StyledInputLabel = styled(InputLabel)<{ shrunkfontcolor?: string }>(
100
65
  })
101
66
  )
102
67
 
103
- /**
104
- * Dropdown component built with Material UI.
105
- */
68
+ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
69
+ display: 'flex',
70
+ flexDirection: 'column',
71
+ alignItems: 'flex-start',
72
+ }))
73
+
74
+ const capitalizeFirstLetter = (string: string) => {
75
+ return string.charAt(0).toUpperCase() + string.slice(1)
76
+ }
77
+
106
78
  const Dropdown: React.FC<DropdownProps> = ({
107
79
  label,
108
80
  options,
@@ -139,6 +111,27 @@ const Dropdown: React.FC<DropdownProps> = ({
139
111
  onFocus?.(event)
140
112
  }
141
113
 
114
+ const renderMenuItem = (option: DropdownOption) => {
115
+ const label = capitalizeFirstLetter(option.value.replace(/_/g, ' '))
116
+ if (!('attribute1' in option)) {
117
+ return (
118
+ <MenuItem key={option.value} value={option.value}>
119
+ {label}
120
+ </MenuItem>
121
+ )
122
+ } else {
123
+ return (
124
+ <StyledMenuItem key={option.value} value={option.value}>
125
+ <Typography variant="body1">{label}</Typography>
126
+ <Typography variant="caption" color="textSecondary">
127
+ {option.attribute1}
128
+ {option.attribute2 && ` | ${option.attribute2}`}
129
+ </Typography>
130
+ </StyledMenuItem>
131
+ )
132
+ }
133
+ }
134
+
142
135
  return (
143
136
  <StyledFormControl
144
137
  backgroundcolor={backgroundcolor}
@@ -161,11 +154,7 @@ const Dropdown: React.FC<DropdownProps> = ({
161
154
  aria-labelledby={`${name}-label`}
162
155
  {...rest}
163
156
  >
164
- {options.map(option => (
165
- <MenuItem key={option.value} value={option.value}>
166
- {option.label}
167
- </MenuItem>
168
- ))}
157
+ {options.map(renderMenuItem)}
169
158
  </Select>
170
159
  {helperText && <FormHelperText>{helperText}</FormHelperText>}
171
160
  </StyledFormControl>
package/src/components/PhoneNumberField/index.tsx CHANGED
@@ -3,7 +3,8 @@ import React, { useState, useCallback } from 'react'
3
3
  import { TextField, TextFieldProps } from '@mui/material'
4
4
  import { styled } from '@mui/material/styles'
5
5
 
6
- interface PhoneNumberFieldProps extends Omit<TextFieldProps, 'onChange'> {
6
+ export interface PhoneNumberFieldProps
7
+ extends Omit<TextFieldProps, 'onChange'> {
7
8
  initialValue?: string
8
9
  onChange?: () => void
9
10
  backgroundcolor?: string
package/src/components/PricingTable/defaultconfig.tsx CHANGED
@@ -1,8 +1,5 @@
1
1
  import { PricingProps } from './index'
2
2
 
3
- // Type definition for alignment options
4
- type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
5
-
6
3
  /**
7
4
  * Default configuration for the PricingTable component
8
5
  */
@@ -10,7 +7,7 @@ const defaultConfig: PricingProps = {
10
7
  // Configuration for the header grid
11
8
  headerGridConfig: {
12
9
  gridname: 'pricingtableheader',
13
- alignment: 'center' as Alignment,
10
+ alignment: 'center' as const,
14
11
  margintop: 1,
15
12
  gridwidth: '100%',
16
13
  },
@@ -21,7 +18,7 @@ const defaultConfig: PricingProps = {
21
18
  row: 3,
22
19
  column: 1,
23
20
  gridname: 'pricingtableheader',
24
- alignment: 'left' as Alignment,
21
+ alignment: 'left' as const,
25
22
  marginleft: 3,
26
23
  marginbottom: 1,
27
24
  mobilewidth: '100%',
@@ -36,7 +33,7 @@ const defaultConfig: PricingProps = {
36
33
  row: 1,
37
34
  column: 2,
38
35
  gridname: 'pricingtableheader',
39
- alignment: 'center' as Alignment,
36
+ alignment: 'center' as const,
40
37
  mobilewidth: '80%',
41
38
  tabletwidth: '48%',
42
39
  computerwidth: '48%',
@@ -56,7 +53,7 @@ const defaultConfig: PricingProps = {
56
53
  tabletwidth: '48%',
57
54
  computerwidth: '48%',
58
55
  gridname: 'pricingtableheader',
59
- alignment: 'center' as Alignment,
56
+ alignment: 'center' as const,
60
57
  },
61
58
  },
62
59
  // Configuration for annual pricing
@@ -73,13 +70,13 @@ const defaultConfig: PricingProps = {
73
70
  tabletwidth: '48%',
74
71
  computerwidth: '48%',
75
72
  gridname: 'pricingtableheader',
76
- alignment: 'center' as Alignment,
73
+ alignment: 'center' as const,
77
74
  },
78
75
  },
79
76
  // Configuration for the feature grid
80
77
  featureGridConfig: {
81
78
  gridname: 'pricingtablefeatures',
82
- alignment: 'center' as Alignment,
79
+ alignment: 'center' as const,
83
80
  gridwidth: '100%',
84
81
  },
85
82
  // Configuration for features and subfeatures
@@ -95,7 +92,7 @@ const defaultConfig: PricingProps = {
95
92
  tabletwidth: '48%',
96
93
  computerwidth: '48%',
97
94
  gridname: 'pricingtablefeatures',
98
- alignment: 'left' as Alignment,
95
+ alignment: 'left' as const,
99
96
  },
100
97
  tiedtopackage: {
101
98
  tiedtopackages: ['true', 'true', 'true'],
@@ -106,7 +103,7 @@ const defaultConfig: PricingProps = {
106
103
  tabletwidth: '48%',
107
104
  computerwidth: '48%',
108
105
  gridname: 'pricingtablefeatures',
109
- alignment: 'center' as Alignment,
106
+ alignment: 'center' as const,
110
107
  },
111
108
  },
112
109
  subfeatures: [
@@ -120,7 +117,7 @@ const defaultConfig: PricingProps = {
120
117
  tabletwidth: '48%',
121
118
  computerwidth: '48%',
122
119
  gridname: 'pricingtablefeatures',
123
- alignment: 'left' as Alignment,
120
+ alignment: 'left' as const,
124
121
  },
125
122
  tiedtopackage: {
126
123
  tiedtopackages: ['true', 'true', 'true'],
@@ -131,7 +128,7 @@ const defaultConfig: PricingProps = {
131
128
  tabletwidth: '48%',
132
129
  computerwidth: '48%',
133
130
  gridname: 'pricingtablefeatures',
134
- alignment: 'center' as Alignment,
131
+ alignment: 'center' as const,
135
132
  },
136
133
  },
137
134
  },
@@ -146,7 +143,7 @@ const defaultConfig: PricingProps = {
146
143
  tabletwidth: '48%',
147
144
  computerwidth: '48%',
148
145
  gridname: 'pricingtablefeatures',
149
- alignment: 'left' as Alignment,
146
+ alignment: 'left' as const,
150
147
  },
151
148
  tiedtopackage: {
152
149
  tiedtopackages: ['true', 'true', 'true'],
@@ -157,7 +154,7 @@ const defaultConfig: PricingProps = {
157
154
  tabletwidth: '48%',
158
155
  computerwidth: '48%',
159
156
  gridname: 'pricingtablefeatures',
160
- alignment: 'center' as Alignment,
157
+ alignment: 'center' as const,
161
158
  },
162
159
  },
163
160
  },
@@ -173,7 +170,7 @@ const defaultConfig: PricingProps = {
173
170
  tabletwidth: '48%',
174
171
  computerwidth: '48%',
175
172
  gridname: 'pricingtablefeatures',
176
- alignment: 'left' as Alignment,
173
+ alignment: 'left' as const,
177
174
  },
178
175
  tiedtopackage: {
179
176
  tiedtopackages: ['true', 'true', 'true'],
@@ -184,7 +181,7 @@ const defaultConfig: PricingProps = {
184
181
  tabletwidth: '48%',
185
182
  computerwidth: '48%',
186
183
  gridname: 'pricingtablefeatures',
187
- alignment: 'center' as Alignment,
184
+ alignment: 'center' as const,
188
185
  },
189
186
  },
190
187
  subfeatures: [
@@ -199,7 +196,7 @@ const defaultConfig: PricingProps = {
199
196
  tabletwidth: '50%',
200
197
  computerwidth: '48%',
201
198
  gridname: 'pricingtablefeatures',
202
- alignment: 'left' as Alignment,
199
+ alignment: 'left' as const,
203
200
  },
204
201
  tiedtopackage: {
205
202
  tiedtopackages: ['true', 'true', 'true'],
@@ -210,7 +207,7 @@ const defaultConfig: PricingProps = {
210
207
  tabletwidth: '48%',
211
208
  computerwidth: '48%',
212
209
  gridname: 'pricingtablefeatures',
213
- alignment: 'center' as Alignment,
210
+ alignment: 'center' as const,
214
211
  },
215
212
  },
216
213
  },
@@ -225,7 +222,7 @@ const defaultConfig: PricingProps = {
225
222
  tabletwidth: '48%',
226
223
  computerwidth: '48%',
227
224
  gridname: 'pricingtablefeatures',
228
- alignment: 'left' as Alignment,
225
+ alignment: 'left' as const,
229
226
  },
230
227
  tiedtopackage: {
231
228
  tiedtopackages: ['true', 'true', 'true'],
@@ -236,7 +233,7 @@ const defaultConfig: PricingProps = {
236
233
  tabletwidth: '48%',
237
234
  computerwidth: '48%',
238
235
  gridname: 'pricingtablefeatures',
239
- alignment: 'center' as Alignment,
236
+ alignment: 'center' as const,
240
237
  },
241
238
  },
242
239
  },
@@ -260,7 +257,7 @@ const defaultConfig: PricingProps = {
260
257
  tabletwidth: '100%',
261
258
  computerwidth: '48%',
262
259
  gridname: 'pricingtablefeatures',
263
- alignment: 'center' as Alignment,
260
+ alignment: 'center' as const,
264
261
  },
265
262
  },
266
263
  }
package/src/index.ts CHANGED
@@ -70,6 +70,7 @@ import { ExtendedPricingProps } from './components/Content/Structure/pricing/use
70
70
  import { ExtendedImageProps } from './components/Content/Structure/image/useImage'
71
71
  import { ExtendedConfirmationCodeInputsProps } from './components/Content/Structure/confirmationinput/useConfirmationInput'
72
72
  import { ExtendedRadioGroupProps } from './components/Content/Structure/radiogroup/useRadioGroup'
73
+ import { ExtendedPhoneNumberFieldProps } from './components/Content/Structure/phoneNumber/usePhoneNumber'
73
74
 
74
75
  // Colors
75
76
  import {
@@ -228,7 +229,7 @@ export type { ExtendedPricingProps }
228
229
  export type { ExtendedImageProps }
229
230
  export type { ExtendedConfirmationCodeInputsProps }
230
231
  export type { ExtendedRadioGroupProps }
231
-
232
+ export type { ExtendedPhoneNumberFieldProps }
232
233
  // Type exports
233
234
  export type { CustomButtonProps }
234
235
  export type { CustomGridProps }