goobs-frontend 0.7.71 → 0.8.1
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/README.md +55 -11
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -6,10 +6,6 @@ The NPM repo is available here - https://www.npmjs.com/package/goobs-frontend
|
|
|
6
6
|
|
|
7
7
|
This entire repository is written in TypeScript, and there is no need for a separate types installation.
|
|
8
8
|
|
|
9
|
-
## Version
|
|
10
|
-
|
|
11
|
-
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.
|
|
12
|
-
|
|
13
9
|
## Integrating goobs-frontend with Next.js
|
|
14
10
|
|
|
15
11
|
This guide explains how to integrate the goobs-frontend package with a Next.js project.
|
|
@@ -50,110 +46,158 @@ You can see more information on how we got here and how it was incorrectly done
|
|
|
50
46
|
|
|
51
47
|
**Step 3: Implement into project and build to confirm functionality**
|
|
52
48
|
|
|
53
|
-
All components should be successfully building as of this release and are being used within production in one way or another.
|
|
49
|
+
All components should be successfully building as of this release and are being used within production in one way or another.
|
|
54
50
|
|
|
55
|
-
This README update, along with the following documentation updates, are all part of a push to better document the usage of this project.
|
|
51
|
+
This README update, along with the following documentation updates, are all part of a push to better document the usage of this project.
|
|
56
52
|
|
|
57
53
|
## Components
|
|
58
54
|
|
|
59
|
-
The following components are available within goobs-frontend
|
|
55
|
+
The following components are available within goobs-frontend. Each component has a dedicated wiki page with detailed documentation, usage examples, and best practices.
|
|
60
56
|
|
|
61
57
|
### Accordion
|
|
62
58
|
|
|
63
59
|
The Accordion component provides an expandable panel for organizing and presenting content in a collapsible manner.
|
|
64
60
|
|
|
61
|
+
[Accordion Wiki](https://github.com/goobz22/goobs-frontend/wiki/Accordion)
|
|
62
|
+
|
|
65
63
|
### Button
|
|
66
64
|
|
|
67
65
|
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.
|
|
68
66
|
|
|
67
|
+
[Button Wiki](https://github.com/goobz22/goobs-frontend/wiki/Button)
|
|
68
|
+
|
|
69
69
|
### Card
|
|
70
70
|
|
|
71
71
|
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.
|
|
72
72
|
|
|
73
|
+
[Card Wiki](https://github.com/goobz22/goobs-frontend/wiki/Card)
|
|
74
|
+
|
|
73
75
|
### CodeCopy
|
|
74
76
|
|
|
75
77
|
The CodeCopy component renders a code block with syntax highlighting and a copy-to-clipboard functionality.
|
|
76
78
|
|
|
79
|
+
[CodeCopy Wiki](https://github.com/goobz22/goobs-frontend/wiki/CodeCopy)
|
|
80
|
+
|
|
77
81
|
### ConfirmationCodeInput
|
|
78
82
|
|
|
79
83
|
The ConfirmationCodeInput component provides an input field for entering confirmation codes, often used in two-factor authentication scenarios.
|
|
80
84
|
|
|
85
|
+
[ConfirmationCodeInput Wiki](https://github.com/goobz22/goobs-frontend/wiki/ConfirmationCodeInput)
|
|
86
|
+
|
|
81
87
|
### Content
|
|
82
88
|
|
|
83
89
|
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.
|
|
84
90
|
|
|
91
|
+
[Content Wiki](https://github.com/goobz22/goobs-frontend/wiki/Content)
|
|
92
|
+
|
|
85
93
|
### DateField
|
|
86
94
|
|
|
87
95
|
The DateField component provides a date picker input field with customizable styling options.
|
|
88
96
|
|
|
97
|
+
[DateField Wiki](https://github.com/goobz22/goobs-frontend/wiki/DateField)
|
|
98
|
+
|
|
89
99
|
### Dropdown
|
|
90
100
|
|
|
91
101
|
The Dropdown component offers a customizable select input with various styling options.
|
|
92
102
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
The Form component includes the PopupForm subcomponent, which renders a customizable popup form.
|
|
103
|
+
[Dropdown Wiki](https://github.com/goobz22/goobs-frontend/wiki/Dropdown)
|
|
96
104
|
|
|
97
105
|
### Grid
|
|
98
106
|
|
|
99
107
|
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.
|
|
100
108
|
|
|
109
|
+
[Grid Wiki](https://github.com/goobz22/goobs-frontend/wiki/Grid)
|
|
110
|
+
|
|
101
111
|
### IncrementNumberField
|
|
102
112
|
|
|
103
113
|
The IncrementNumberField component provides an input field for numeric values with increment and decrement buttons.
|
|
104
114
|
|
|
115
|
+
[IncrementNumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/IncrementNumberField)
|
|
116
|
+
|
|
105
117
|
### Nav
|
|
106
118
|
|
|
107
119
|
The Nav component provides navigation functionality, including both horizontal and vertical navigation options.
|
|
108
120
|
|
|
121
|
+
[Nav Wiki](https://github.com/goobz22/goobs-frontend/wiki/Nav)
|
|
122
|
+
|
|
109
123
|
### NumberField
|
|
110
124
|
|
|
111
125
|
The NumberField component offers an input field specifically designed for numeric input with optional minimum and maximum value constraints.
|
|
112
126
|
|
|
127
|
+
[NumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/NumberField)
|
|
128
|
+
|
|
113
129
|
### PasswordField
|
|
114
130
|
|
|
115
131
|
The PasswordField component provides a secure input field for password entry with a show/hide password toggle.
|
|
116
132
|
|
|
133
|
+
[PasswordField Wiki](https://github.com/goobz22/goobs-frontend/wiki/PasswordField)
|
|
134
|
+
|
|
117
135
|
### PhoneNumberField
|
|
118
136
|
|
|
119
137
|
The PhoneNumberField component offers an input field specifically formatted for phone number entry.
|
|
120
138
|
|
|
139
|
+
[PhoneNumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/PhoneNumberField)
|
|
140
|
+
|
|
121
141
|
### PricingTable
|
|
122
142
|
|
|
123
143
|
The PricingTable component renders a customizable pricing table for displaying product or service pricing information.
|
|
124
144
|
|
|
145
|
+
[PricingTable Wiki](https://github.com/goobz22/goobs-frontend/wiki/PricingTable)
|
|
146
|
+
|
|
125
147
|
### QRCode
|
|
126
148
|
|
|
127
149
|
The QRCode component generates and displays QR codes based on the provided value.
|
|
128
150
|
|
|
151
|
+
[QRCode Wiki](https://github.com/goobz22/goobs-frontend/wiki/QRCode)
|
|
152
|
+
|
|
129
153
|
### RadioGroup
|
|
130
154
|
|
|
131
155
|
The RadioGroup component renders a group of radio buttons for selecting a single option from multiple choices.
|
|
132
156
|
|
|
157
|
+
[RadioGroup Wiki](https://github.com/goobz22/goobs-frontend/wiki/RadioGroup)
|
|
158
|
+
|
|
133
159
|
### Searchbar
|
|
134
160
|
|
|
135
161
|
The Searchbar component provides a search input field with customizable styling options.
|
|
136
162
|
|
|
163
|
+
[Searchbar Wiki](https://github.com/goobz22/goobs-frontend/wiki/Searchbar)
|
|
164
|
+
|
|
137
165
|
### Stepper
|
|
138
166
|
|
|
139
167
|
The Stepper component provides a step-by-step interface for guiding users through a process or workflow.
|
|
140
168
|
|
|
169
|
+
[Stepper Wiki](https://github.com/goobz22/goobs-frontend/wiki/Stepper)
|
|
170
|
+
|
|
141
171
|
### TextField
|
|
142
172
|
|
|
143
173
|
The TextField component offers a customizable text input field with various styling and behavior options.
|
|
144
174
|
|
|
175
|
+
[TextField Wiki](https://github.com/goobz22/goobs-frontend/wiki/TextField)
|
|
176
|
+
|
|
145
177
|
### Toolbar
|
|
146
178
|
|
|
147
179
|
The Toolbar component offers a customizable toolbar for use in various UI scenarios.
|
|
148
180
|
|
|
181
|
+
[Toolbar Wiki](https://github.com/goobz22/goobs-frontend/wiki/Toolbar)
|
|
182
|
+
|
|
183
|
+
### Tooltip
|
|
184
|
+
|
|
185
|
+
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.
|
|
186
|
+
|
|
187
|
+
[Tooltip Wiki](https://github.com/goobz22/goobs-frontend/wiki/Tooltip)
|
|
188
|
+
|
|
149
189
|
### TransferList
|
|
150
190
|
|
|
151
191
|
The TransferList component provides a dual-list interface for transferring items between two lists.
|
|
152
192
|
|
|
193
|
+
[TransferList Wiki](https://github.com/goobz22/goobs-frontend/wiki/TransferList)
|
|
194
|
+
|
|
153
195
|
### Typography
|
|
154
196
|
|
|
155
197
|
The Typography component is a text component for rendering customizable typography with support for different font families, variants, and colors.
|
|
156
198
|
|
|
199
|
+
[Typography Wiki](https://github.com/goobz22/goobs-frontend/wiki/Typography)
|
|
200
|
+
|
|
157
201
|
## Usage
|
|
158
202
|
|
|
159
203
|
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:
|
|
@@ -321,7 +365,7 @@ import {
|
|
|
321
365
|
} from 'goobs-frontend'
|
|
322
366
|
```
|
|
323
367
|
|
|
324
|
-
Please refer to the individual component and utility files for more details on their usage and available props.
|
|
368
|
+
Please refer to the individual component and utility files for more details on their usage and available props.
|
|
325
369
|
|
|
326
370
|
## License
|
|
327
371
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "goobs-frontend",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.1",
|
|
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",
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@next/eslint-plugin-next": "^14.2.6",
|
|
36
|
-
"@types/node": "^22.5.
|
|
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.
|
|
41
|
-
"eslint": "^
|
|
39
|
+
"@typescript-eslint/eslint-plugin": "^8.4.0",
|
|
40
|
+
"@typescript-eslint/parser": "^8.4.0",
|
|
41
|
+
"eslint": "^9.9.1",
|
|
42
42
|
"eslint-config-next": "^14.2.8",
|
|
43
43
|
"eslint-config-prettier": "^9.1.0",
|
|
44
44
|
"eslint-plugin-prettier": "^5.2.1",
|