Skip to content

Commit 7f1724b

Browse files
amoskyaloamoskyalo
committed
Made chages
0 parents  commit 7f1724b

19 files changed

+737
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
yarn.lock*

‎Docs/FormModel.md

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
## FormModel Component
2+
3+
<img width="260" alt="image" src="https://github.com/amoskyalo/React-Components-Plugin/assets/91586973/3505c4cd-009b-43f2-bba7-c217f09b761d">
4+
<img width="258" alt="image" src="https://github.com/amoskyalo/React-Components-Plugin/assets/91586973/17890adb-9f30-4b58-8fe2-e3fb29163a24">
5+
<img width="288" alt="image" src="https://github.com/amoskyalo/NextGenMUI/assets/91586973/e45b75a0-2bc5-4282-a7a1-275ff6ff2699">
6+
<img width="521" alt="image" src="https://github.com/amoskyalo/NextGenMUI/assets/91586973/29cf861b-15ab-4f2b-8095-9467b9c30434">
7+
8+
9+
10+
11+
The FormModel component is a versatile form component built using Material-UI. It dynamically renders input fields based on the provided configuration and handles both text and select input types. The form also supports loading states and submit button control.
12+
13+
### Props
14+
15+
The component accepts the following props:
16+
17+
- **inputs**: An array of objects describing each input field in the form. Each object can have the following properties:
18+
- **`name`** (string, required): The name of the input field.
19+
- **`label`** (string, required): The label text for the input field.
20+
- **`type`** (string): The type of the input field (e.g., text, number, etc.).
21+
- **`required`** (boolean, required): Whether the field is required.
22+
- **`value`** (string | number | boolean): The value of the input field.
23+
- **`lookups`** (array): An array of objects for select inputs, each with a `name` and `value`.
24+
- **`multiselect`** (boolean): If true, allows multiple selections in a select input.
25+
- **`disabled`** (boolean): If true, disables the input field.
26+
- **width** (number): Sets width of the form.
27+
- **gridColumnsCount** (number): Sets the grid columns cunt for the form since the form has a grid layout.
28+
- **submitButtoWidth** ( number): Sets th width for the submit button. `Default is "100%"`
29+
- **options** (object): Additional options for styling and behavior customization.
30+
- **disableSubmitButton** (boolean): If true, disables the submit button.
31+
- **isLoading** (boolean): If true, shows a loading indicator in the submit button.
32+
- **onSubmit** (func): The function to call when the form is submitted.
33+
- **onFieldChange** (func): The function to call when any input field value changes.
34+
35+
### Props
36+
37+
- `maxWidth`: 300
38+
- `disableSubmitButton`: false
39+
40+
### Usage
41+
42+
Here's an example of how to use the `FormModel` component:
43+
44+
```javaScript
45+
import {FormModel} from 'NextGenMUI';
46+
47+
const MyForm = () => {
48+
const inputs = [
49+
{
50+
name: "userName",
51+
type: "text",
52+
label: "Full Name",
53+
value: null,
54+
required: true
55+
},
56+
{
57+
name: "userPhone",
58+
label: "Phone Number",
59+
value: null,
60+
required: true,
61+
type: "tel"
62+
},
63+
{
64+
name: "userEmail",
65+
label: "Email Address",
66+
value: null,
67+
required: true,
68+
type: "email"
69+
}
70+
]
71+
72+
return (
73+
<FormModel inputs={inputs}
74+
CustomTitle={() => <p style={{ fontSize: 18, fontWeight: 900 }}>Add New User</p>}
75+
onSubmit={(values) => { console.log(values) }}
76+
options={{
77+
form: {
78+
backgroundColor: "white",
79+
padding: ".5rem 2rem 2rem 2rem",
80+
borderRadius: 8,
81+
boxShadow: "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
82+
}
83+
}}
84+
/>
85+
);
86+
};
87+
88+
```

‎Docs/PopoverModel.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
## PopoverModel
2+
3+
<img width="194" alt="image" src="https://github.com/amoskyalo/NextGenMUI/assets/91586973/359244e9-e423-40f1-ac45-6776687cadc4">
4+
5+
`PopoverModel` is a customizable popover component built using Material-UI. It is designed to provide a flexible and easy-to-use interface for displaying additional information, actions, or content in a compact, interactive format.
6+
7+
### Features
8+
9+
- Customizable popover items with icons and action handlers
10+
- Support for dynamic content
11+
- Lightweight and easy integration with existing Material-UI projects
12+
- Custom styling options
13+
14+
### Props
15+
16+
The `PopoverModel` component accepts the following props:
17+
18+
- **`popoverItems`**: An array of objects representing the items in the popover. Each object should have `name`, `onItemClick` (function to execute on click), and an optional `icon`.
19+
- **`open`**: A boolean to control the visibility of the popover.
20+
- **`anchorEl`**: The DOM element used to set the position of the popover.
21+
- **`onClose`**: A function that is called to close the popover.
22+
23+
### Example Usage
24+
25+
Here is a basic example of how to use the `PopoverModel`:
26+
27+
```javaScript
28+
import { useState } from 'react';
29+
import { PopoverModel } from 'NextGenMUI';
30+
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
31+
import SettingsIcon from '@mui/icons-material/Settings';
32+
import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
33+
import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
34+
import ExpandCircleDownIcon from '@mui/icons-material/ExpandCircleDown';
35+
36+
function App() {
37+
const [anchorEl, setAnchorEl] = useState(null);
38+
const open = Boolean(anchorEl);
39+
40+
41+
const handleOpenPopover = (event) => {
42+
setAnchorEl(event.currentTarget);
43+
}
44+
45+
const popoverActions = [
46+
{ name: "Profile", onItemClick: () => { }, icon: AccountCircleIcon },
47+
{ name: "Settings", onItemClick: () => { }, icon: SettingsIcon },
48+
{ name: "Notifications", onItemClick: () => { }, icon: NotificationsActiveIcon },
49+
{ name: "Logout", onItemClick: () => { }, icon: PowerSettingsNewIcon }
50+
]
51+
52+
return (
53+
<>
54+
<p style={{ marginRight: 4 }}>Exapnd Menu</p>
55+
<ExpandCircleDownIcon sx={{ cursor: 'pointer' }} onClick={handleOpenPopover} />
56+
<PopoverModel popoverItems={popoverActions} anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)} />
57+
</>
58+
);
59+
}
60+
61+
export default App;
62+
```
63+

‎Docs/StepperForm.md

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
## StepperFormModel
2+
3+
`StepperFormModel` is a React component built on top of Material-UI, designed to simplify the creation and management of multi-step forms. This component allows you to divide form inputs across multiple steps, enhancing user experience for complex forms.
4+
5+
<img width="317" alt="image" src="https://github.com/amoskyalo/NextGenMUI/assets/91586973/af41ff81-3847-4b85-ab29-0bece002adfa">
6+
<img width="317" alt="image" src="https://github.com/amoskyalo/NextGenMUI/assets/91586973/73e264a2-2664-4cfe-8ab0-a736adc30c79">
7+
<img width="318" alt="image" src="https://github.com/amoskyalo/NextGenMUI/assets/91586973/56d68c91-299c-40d8-84a5-e44329c9926c">
8+
9+
### Features
10+
11+
- Multi-step form management
12+
- Customizable step labels
13+
- Dynamic form content per step
14+
- Customizable button labels and styles
15+
- Integration with Material-UI for consistent styling
16+
17+
### Props
18+
19+
The `StepperFormModel` component accepts the following props:
20+
21+
- **`steps`**: An array of objects representing each step. Each object must have a `label` and an `inputs` array.
22+
- **`onFieldChange`**: A function triggered on input change.
23+
- **`isLoading`**: A boolean to indicate loading state.
24+
- **`onSubmit`**: A function triggered when the form is submitted.
25+
- **`width`**: The width of the stepper, can be a number or a string.
26+
- **`buttonLabel`**: The label for the submit button on the last step.
27+
- **`submitButtonWidth`**: The width of the submit button.
28+
- **`gridColumnsCount`**: Number of columns in the grid layout for form inputs.
29+
30+
## Customization
31+
32+
You can customize the appearance of the stepper and the form by passing styles to the options prop, as illustrated below:
33+
34+
```javascript
35+
options={{
36+
stepper: {
37+
backgroundColor: "white",
38+
padding: 4,
39+
borderRadius: 2,
40+
boxShadow: "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
41+
},
42+
form: {
43+
// styles to be appied to the form
44+
}
45+
}}
46+
```
47+
48+
### Usage
49+
50+
Here's an example of how to use the `StepperFormModel` component:
51+
52+
```javaScript
53+
import { useState } from "react";
54+
import StepperFormModel from "NextGenMUI";
55+
56+
function App() {
57+
const stepsList = [
58+
{
59+
label: "User Details",
60+
inputs: [
61+
{
62+
name: "userName",
63+
type: "text",
64+
label: "Full Name",
65+
value: null,
66+
required: true
67+
},
68+
{
69+
name: "userPhone",
70+
label: "Phone Number",
71+
value: null,
72+
required: true,
73+
type: "number"
74+
},
75+
{
76+
name: "userEmail",
77+
label: "Email Address",
78+
value: null,
79+
required: true,
80+
type: "email"
81+
}
82+
]
83+
},
84+
{
85+
label: "User Roles",
86+
inputs: [
87+
{
88+
name: "userCode",
89+
type: "text",
90+
label: "User Code",
91+
value: null,
92+
required: true
93+
},
94+
{
95+
name: "userType",
96+
lookups: [{ name: "Admin", value: 1 }, { name: "Supervisor", value: 0 }, { name: "IT Admin", value: 0 }],
97+
label: "User Type",
98+
value: null,
99+
required: true
100+
}
101+
]
102+
},
103+
]
104+
105+
return (
106+
<>
107+
<StepperFormModel
108+
steps={stepsList}
109+
options={{
110+
stepper: {
111+
backgroundColor: "white",
112+
padding: 4,
113+
borderRadius: 2,
114+
boxShadow: "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
115+
}
116+
}}
117+
/>
118+
</>
119+
);
120+
}
121+
122+
export default App;
123+
124+
125+
```

‎demos/sidebar-demo/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
yarn.lock*

0 commit comments

Comments
 (0)