goobs-frontend 0.8.1 → 0.8.2
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "goobs-frontend",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
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
|
|
25
|
-
"@mui/material": "^6.0
|
|
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.
|
|
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.
|
|
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.
|
|
40
|
-
"@typescript-eslint/parser": "^8.
|
|
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.
|
|
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",
|
|
@@ -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
|
|
@@ -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({
|
|
@@ -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
|
|
6
|
+
export interface PhoneNumberFieldProps
|
|
7
|
+
extends Omit<TextFieldProps, 'onChange'> {
|
|
7
8
|
initialValue?: string
|
|
8
9
|
onChange?: () => void
|
|
9
10
|
backgroundcolor?: string
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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 }
|