@verma-consulting/design-library 0.1.10 → 0.1.11
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 +84 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,85 @@
|
|
|
1
|
-
# design-library
|
|
1
|
+
# @verma-consulting/design-library
|
|
2
2
|
|
|
3
|
-
Verma Consulting design
|
|
3
|
+
Shared MUI-based React components for Verma Consulting applications. Use this package for consistent UI patterns, forms, and design tokens across projects.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @verma-consulting/design-library
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @verma-consulting/design-library
|
|
11
|
+
# or
|
|
12
|
+
yarn add @verma-consulting/design-library
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Peer dependencies
|
|
16
|
+
|
|
17
|
+
Install these in your app (they are not bundled):
|
|
18
|
+
|
|
19
|
+
- `react` (>=17)
|
|
20
|
+
- `react-dom` (>=17)
|
|
21
|
+
- `@mui/material` (^5.15.15)
|
|
22
|
+
- `@mui/icons-material` (^7.3.0)
|
|
23
|
+
- `@mui/styles` (^5.15.15)
|
|
24
|
+
|
|
25
|
+
The package also depends on `@verma-consulting/common-library`; it will be installed automatically.
|
|
26
|
+
|
|
27
|
+
## Quick start
|
|
28
|
+
|
|
29
|
+
Wrap your app with MUI’s `ThemeProvider` (or use the re-exported one), then import components as needed:
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import {
|
|
33
|
+
ThemeProvider,
|
|
34
|
+
Button,
|
|
35
|
+
Logo,
|
|
36
|
+
FormDialog,
|
|
37
|
+
Loader,
|
|
38
|
+
} from "@verma-consulting/design-library";
|
|
39
|
+
|
|
40
|
+
function App() {
|
|
41
|
+
return (
|
|
42
|
+
<ThemeProvider theme={yourTheme}>
|
|
43
|
+
<Logo organization={{ name: "Acme" }} handleClick={() => {}} />
|
|
44
|
+
<Button variant="contained">Click me</Button>
|
|
45
|
+
</ThemeProvider>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
The library re-exports **all of `@mui/material`**, so you can use MUI components from this single package if desired. It also re-exports `useTheme`, `styled`, `createTheme`, `ThemeProvider` from `@mui/material/styles` and `makeStyles` from `@mui/styles`.
|
|
51
|
+
|
|
52
|
+
## Components
|
|
53
|
+
|
|
54
|
+
| Component | Description |
|
|
55
|
+
| ------------------------------------------------ | ------------------------------------------------------- |
|
|
56
|
+
| [Logo](./docs/Logo.md) | Organization logo and name (centered or horizontal). |
|
|
57
|
+
| [FormDialog](./docs/FormDialog.md) | Modal dialog with title, content, and actions. |
|
|
58
|
+
| [FormDrawer](./docs/FormDrawer.md) | Side/bottom drawer for forms with optional actions. |
|
|
59
|
+
| [FormPopover](./docs/FormPopover.md) | Popover triggered by an icon button (e.g. row actions). |
|
|
60
|
+
| [FormSnackBar](./docs/FormSnackBar.md) | Snackbar for form success/error messages. |
|
|
61
|
+
| [ClearableSelect](./docs/ClearableSelect.md) | Select with optional clear and view/edit modes. |
|
|
62
|
+
| [SearchableSelect](./docs/SearchableSelect.md) | Searchable single/multi select with view/edit modes. |
|
|
63
|
+
| [PhoneNumberField](./docs/PhoneNumberField.md) | Phone input with country code and E.164 output. |
|
|
64
|
+
| [InputFileUpload](./docs/InputFileUpload.md) | Button that opens a file picker. |
|
|
65
|
+
| [ImageUploadAvatar](./docs/ImageUploadAvatar.md) | Avatar-style image upload with preview and clear. |
|
|
66
|
+
| [TabPanel](./docs/TabPanel.md) | Panel content for MUI Tabs (by index). |
|
|
67
|
+
| [Pill](./docs/Pill.md) | Filter-style pill button with optional icons. |
|
|
68
|
+
| [StatusPill](./docs/StatusPill.md) | Chip showing user status (Pending, Active, etc.). |
|
|
69
|
+
| [IOSSwitch](./docs/IOSSwitch.md) | iOS-style switch (accepts MUI Switch props). |
|
|
70
|
+
| [Loader](./docs/Loader.md) | Full-screen loading overlay with spinner. |
|
|
71
|
+
|
|
72
|
+
Detailed docs for each component are in **[docs/](./docs/README.md)**.
|
|
73
|
+
|
|
74
|
+
## Scripts
|
|
75
|
+
|
|
76
|
+
| Command | Description |
|
|
77
|
+
| ---------------- | -------------------------------------- |
|
|
78
|
+
| `pnpm run build` | Build the library (output in `dist/`). |
|
|
79
|
+
| `pnpm run watch` | Watch and rebuild on changes. |
|
|
80
|
+
| `pnpm run clean` | Remove `dist/`. |
|
|
81
|
+
| `pnpm run lint` | Run ESLint on `src/`. |
|
|
82
|
+
|
|
83
|
+
## License
|
|
84
|
+
|
|
85
|
+
MIT © Verma Consulting
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@verma-consulting/design-library",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Shared MUI-based components for Verma Consulting",
|
|
5
5
|
"author": "Ankit Verma <ankit@vermadev.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@verma-consulting/common-library": "^0.1.
|
|
33
|
+
"@verma-consulting/common-library": "^0.1.40"
|
|
34
34
|
},
|
|
35
35
|
"scripts": {
|
|
36
36
|
"clean": "rimraf dist",
|