mui-dialog 1.0.6 → 1.0.9

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 (4) hide show
  1. package/README.md +54 -23
  2. package/dist/index.d.ts +4 -3
  3. package/dist/{fe-vi-dialog.es.js → mui-dialog.es.js} +19 -16
  4. package/package.json +8 -14
package/README.md CHANGED
@@ -28,7 +28,7 @@ yarn add mui-dialog
28
28
  ## Usage
29
29
 
30
30
  ```tsx
31
- import { ViDialog } from "mui-dialog";
31
+ import { MuiDialog } from "mui-dialog";
32
32
  import { MODAL_TYPES, INFORMATION_SUBTYPES } from "mui-dialog";
33
33
 
34
34
  // Basic Information Dialog
@@ -36,7 +36,7 @@ const MyComponent = () => {
36
36
  const [open, setOpen] = useState(false);
37
37
 
38
38
  return (
39
- <ViDialog
39
+ <MuiDialog
40
40
  type={MODAL_TYPES.INFORMATION}
41
41
  subtype={INFORMATION_SUBTYPES.ACKNOWLEDGEMENT}
42
42
  open={open}
@@ -52,7 +52,7 @@ const MyComponent = () => {
52
52
  }}
53
53
  >
54
54
  {/* Optional content */}
55
- </ViDialog>
55
+ </MuiDialog>
56
56
  );
57
57
  };
58
58
  ```
@@ -114,19 +114,21 @@ const MyComponent = () => {
114
114
 
115
115
  ### Action Props
116
116
 
117
- | Prop | Type | Required | Default | Description |
118
- | ------------------------ | ----------------- | -------- | ------- | ------------------------------------- |
119
- | `primaryCtaTitle` | `string` | No | - | Primary button text |
120
- | `secondaryCtaTitle` | `string` | No | - | Secondary button text |
121
- | `tertiaryCtaTitle` | `string` | No | - | Tertiary button text |
122
- | `isPrimaryCtaLoading` | `boolean` | No | `false` | Show loading state for primary button |
123
- | `isPrimaryCtaDisabled` | `boolean` | No | `false` | Disable primary button |
124
- | `isSecondaryCtaDisabled` | `boolean` | No | `false` | Disable secondary button |
125
- | `isTertiaryCtaDisabled` | `boolean` | No | `false` | Disable tertiary button |
126
- | `onPrimaryCtaClick` | `() => void` | No | - | Primary button click handler |
127
- | `onSecondaryCtaClick` | `() => void` | No | - | Secondary button click handler |
128
- | `onTertiaryCtaClick` | `() => void` | No | - | Tertiary button click handler |
129
- | `tertiaryCtaStartIcon` | `React.ReactNode` | No | - | Icon for tertiary button |
117
+ | Prop | Type | Required | Default | Description |
118
+ | ------------------------ | ----------------- | -------- | ----------------------------------------------- | --------------------------------------- |
119
+ | `primaryCtaTitle` | `string` | No | - | Primary button text |
120
+ | `secondaryCtaTitle` | `string` | No | - | Secondary button text |
121
+ | `tertiaryCtaTitle` | `string` | No | - | Tertiary button text |
122
+ | `isPrimaryCtaLoading` | `boolean` | No | `false` | Show loading state for primary button |
123
+ | `isSecondaryCtaLoading` | `boolean` | No | `false` | Show loading state for secondary button |
124
+ | `isTertiaryCtaLoading` | `boolean` | No | `false` | Show loading state for tertiary button |
125
+ | `isPrimaryCtaDisabled` | `boolean` | No | `isSecondaryCtaLoading or isTertiaryCtaLoading` | Disable primary button |
126
+ | `isSecondaryCtaDisabled` | `boolean` | No | `isPrimaryCtaLoading or isTertiaryCtaLoading` | Disable secondary button |
127
+ | `isTertiaryCtaDisabled` | `boolean` | No | `isPrimaryCtaLoading or isSecondaryCtaLoading` | Disable tertiary button |
128
+ | `onPrimaryCtaClick` | `() => void` | No | - | Primary button click handler |
129
+ | `onSecondaryCtaClick` | `() => void` | No | - | Secondary button click handler |
130
+ | `onTertiaryCtaClick` | `() => void` | No | - | Tertiary button click handler |
131
+ | `tertiaryCtaStartIcon` | `React.ReactNode` | No | - | Icon for tertiary button |
130
132
 
131
133
  ## Size Breakpoints
132
134
 
@@ -140,10 +142,10 @@ const MyComponent = () => {
140
142
  ## Usage Example
141
143
 
142
144
  ```tsx
143
- import { ViDialog } from "mui-dialog";
145
+ import { MuiDialog } from "mui-dialog";
144
146
 
145
147
  // Input Modal
146
- <ViDialog
148
+ <MuiDialog
147
149
  type="input"
148
150
  subtype="default"
149
151
  open={true}
@@ -159,7 +161,7 @@ import { ViDialog } from "mui-dialog";
159
161
  }}
160
162
  >
161
163
  <input type="text" />
162
- </ViDialog>;
164
+ </MuiDialog>;
163
165
  ```
164
166
 
165
167
  ## Modal Configuration
@@ -181,14 +183,43 @@ yarn install
181
183
 
182
184
  # Build package
183
185
  yarn build
186
+ ```
187
+
188
+ ### Local Development with yarn link
189
+
190
+ To test the package in another project locally:
184
191
 
185
- # Run tests
186
- yarn test
192
+ 1. In the `mui-dialog` directory:
187
193
 
188
- # Run tests with coverage
189
- yarn test:coverage
194
+ ```bash
195
+ # Build the package
196
+ yarn build
197
+
198
+ # Create a global symlink
199
+ yarn link
190
200
  ```
191
201
 
202
+ 2. In your project directory:
203
+
204
+ ```bash
205
+ # Link to the package
206
+ yarn link "mui-dialog"
207
+ ```
208
+
209
+ 3. To unlink when done:
210
+
211
+ ```bash
212
+ # In your project directory
213
+ yarn unlink "mui-dialog"
214
+
215
+ # In the fe-vi-dialog directory
216
+ yarn unlink
217
+ ```
218
+
219
+ Note: After making changes to the package, you'll need to:
220
+
221
+ 1. Rebuild the package (`yarn build`)
222
+
192
223
  ## License
193
224
 
194
225
  © [Virtual Internships]
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Breakpoint } from '@mui/material';
2
- import { JSX as JSX_2 } from 'react/jsx-runtime';
2
+ import { JSX } from 'react/jsx-runtime';
3
3
 
4
4
  export declare interface BaseModalProps {
5
5
  wrapperClassName?: string;
@@ -36,6 +36,7 @@ declare interface IActions {
36
36
  isPrimaryCtaLoading?: boolean;
37
37
  isPrimaryCtaDisabled?: boolean;
38
38
  isSecondaryCtaDisabled?: boolean;
39
+ isSecondaryCtaLoading?: boolean;
39
40
  onPrimaryCtaClick?: () => void;
40
41
  onSecondaryCtaClick?: () => void;
41
42
  tertiaryCtaTitle?: string;
@@ -111,6 +112,8 @@ declare type ModalTypeConfig = {
111
112
  [subtype: string]: ModalConfig;
112
113
  };
113
114
 
115
+ export declare const MuiDialog: (props: ModalProps) => JSX.Element;
116
+
114
117
  export declare const SIZE_TO_MAX_WIDTH: Record<ModalSize, Breakpoint>;
115
118
 
116
119
  export declare type SubtypeForType<T extends ModalType> = T extends typeof MODAL_TYPES.INFORMATION ? InformationSubtype : T extends typeof MODAL_TYPES.CONFIRMATION ? ConfirmationSubtype : T extends typeof MODAL_TYPES.INPUT ? InputSubtype : never;
@@ -120,6 +123,4 @@ export declare const TERTIARY_CTA_TYPES: {
120
123
  DESTRUCTIVE: string;
121
124
  };
122
125
 
123
- export declare const ViDialog: (props: ModalProps) => JSX_2.Element;
124
-
125
126
  export { }
package/dist/{fe-vi-dialog.es.js → mui-dialog.es.js} RENAMED
@@ -1,15 +1,15 @@
1
- !function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".vi-dialog .close-icon{cursor:pointer;color:#717371}.vi-dialog .MuiPaper-root{border-radius:12px}.vi-dialog .divider{margin-top:28px;margin-bottom:-4px}.vi-dialog .vi-dialog-actions-wrapper{margin-top:28px;display:flex;justify-content:space-between;align-items:center}.vi-dialog .vi-dialog-actions-wrapper .tertiary-cta.destructive{color:#ed1d31;justify-self:flex-start}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.medium{width:50%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.large{width:33%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.extra-large{width:25%}.vi-dialog .vi-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.vi-dialog .vi-dialog-actions .vi-dialog-cta{width:-webkit-fill-available}.vi-dialog .vi-dialog-actions .tertiary-cta{padding:0}.vi-dialog .vi-dialog-actions .vi-dialog-cta.destructive{background-color:#ed1d31}.vi-dialog .vi-dialog-actions.without-tertiary{margin-top:28px}.vi-dialog .vi-dialog-actions.small{justify-content:center}.vi-dialog .vi-dialog-actions.without-tertiary.medium{max-width:50%;margin-left:50%}.vi-dialog .vi-dialog-actions.without-tertiary.large{max-width:33%;margin-left:67%}.vi-dialog .vi-dialog-actions.without-tertiary.extra-large{max-width:25%;margin-left:75%}.vi-dialog .vi-dialog-actions.with-tertiary-cta{max-width:100%;margin-left:0}.vi-dialog .vi-dialog-title{margin-bottom:28px}.vi-dialog .vi-dialog-title .description{margin-top:16px!important}.vi-dialog .vi-dialog-title.small{margin-bottom:16px}.vi-dialog .divider{margin-left:-24px;margin-right:-24px}@media only screen and (max-width: 600px){.vi-dialog .MuiPaper-root{margin:16px;width:calc(100% - 32px)}.vi-dialog .vi-dialog-actions-wrapper{flex-direction:column-reverse;gap:12px}.vi-dialog .vi-dialog-actions{flex-direction:column-reverse;width:100%!important;gap:12px}.vi-dialog .vi-dialog-actions.medium,.vi-dialog .vi-dialog-actions.large,.vi-dialog .vi-dialog-actions.extra-large{max-width:100%;margin-left:0}.vi-dialog.medium .MuiPaper-root,.vi-dialog.large .MuiPaper-root{margin:0;width:100%;height:100%;max-height:none;border-radius:0}}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
1
+ !function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".vi-dialog .close-icon{cursor:pointer;color:#717371}.vi-dialog .p-24{padding:24px}.vi-dialog .h-fill{height:-webkit-fill-available}.vi-dialog .d-f{display:flex}.vi-dialog .ai-c{align-items:center}.vi-dialog .jc-sb{justify-content:space-between}.vi-dialog .flex-dir-col{flex-direction:column}.vi-dialog .gap-8{gap:8px}.vi-dialog .MuiPaper-root{border-radius:12px}.vi-dialog .divider{margin-top:28px;margin-bottom:-4px}.vi-dialog .vi-dialog-actions-wrapper{margin-top:28px;display:flex;justify-content:space-between;align-items:center}.vi-dialog .vi-dialog-actions-wrapper .tertiary-cta.destructive{color:#ed1d31;justify-self:flex-start}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.medium{width:50%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.large{width:33%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.extra-large{width:25%}.vi-dialog .vi-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.vi-dialog .vi-dialog-actions .vi-dialog-cta{width:-webkit-fill-available}.vi-dialog .vi-dialog-actions .tertiary-cta{padding:0}.vi-dialog .vi-dialog-actions .vi-dialog-cta.destructive{background-color:#ed1d31}.vi-dialog .vi-dialog-actions.without-tertiary{margin-top:28px}.vi-dialog .vi-dialog-actions.small{justify-content:center}.vi-dialog .vi-dialog-actions.without-tertiary.medium{max-width:50%;margin-left:50%}.vi-dialog .vi-dialog-actions.without-tertiary.large{max-width:33%;margin-left:67%}.vi-dialog .vi-dialog-actions.without-tertiary.extra-large{max-width:25%;margin-left:75%}.vi-dialog .vi-dialog-actions.with-tertiary-cta{max-width:100%;margin-left:0}.vi-dialog .vi-dialog-title{margin-bottom:28px}.vi-dialog .vi-dialog-title .description{margin-top:16px!important}.vi-dialog .vi-dialog-title.small{margin-bottom:16px}.vi-dialog .divider{margin-left:-24px;margin-right:-24px}@media only screen and (max-width: 600px){.vi-dialog .MuiPaper-root{margin:16px;width:calc(100% - 32px)}.vi-dialog .vi-dialog-actions-wrapper{flex-direction:column-reverse;gap:12px}.vi-dialog .vi-dialog-actions{flex-direction:column-reverse;width:100%!important;gap:12px}.vi-dialog .vi-dialog-actions.medium,.vi-dialog .vi-dialog-actions.large,.vi-dialog .vi-dialog-actions.extra-large{max-width:100%;margin-left:0}.vi-dialog.medium .MuiPaper-root,.vi-dialog.large .MuiPaper-root{margin:0;width:100%;height:100%;max-height:none;border-radius:0}}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
4
  import { forwardRef } from 'react';
5
5
  import Dialog from '@mui/material/Dialog';
6
- import Button from '@mui/material/Button';
7
6
  import Typography from '@mui/material/Typography';
8
7
  import { createSvgIcon } from '@mui/material/utils';
9
8
  import Slide from '@mui/material/Slide';
10
9
  import useMediaQuery from '@mui/material/useMediaQuery';
11
10
  import { useTheme, ThemeProvider } from '@mui/material/styles';
12
11
  import { createTheme, Divider } from '@mui/material';
12
+ import Button from '@mui/material/Button';
13
13
 
14
14
  const CloseIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
15
15
  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
@@ -567,7 +567,7 @@ const TransitionUp = forwardRef(
567
567
  return /* @__PURE__ */ jsx(Slide, { direction: "up", ref, ...props });
568
568
  }
569
569
  );
570
- const ViDialog = (props) => {
570
+ const MuiDialog = (props) => {
571
571
  let parentTheme = useTheme();
572
572
  parentTheme = {
573
573
  ...parentTheme,
@@ -598,14 +598,15 @@ const ViDialog = (props) => {
598
598
  const {
599
599
  primaryCtaTitle,
600
600
  secondaryCtaTitle,
601
- isPrimaryCtaLoading = false,
601
+ isPrimaryCtaLoading,
602
+ isSecondaryCtaLoading,
602
603
  isPrimaryCtaDisabled = false,
603
604
  isSecondaryCtaDisabled = false,
604
605
  onPrimaryCtaClick = _noop,
605
606
  onSecondaryCtaClick = _noop,
606
607
  tertiaryCtaTitle,
607
608
  tertiaryCtaStartIcon,
608
- isTertiaryCtaLoading = false,
609
+ isTertiaryCtaLoading,
609
610
  isTertiaryCtaDisabled = false,
610
611
  onTertiaryCtaClick = _noop
611
612
  } = actions || {};
@@ -678,8 +679,8 @@ const ViDialog = (props) => {
678
679
  className: `tertiary-cta ${tertiaryCtaType === TERTIARY_CTA_TYPES.DESTRUCTIVE ? "destructive" : ""}`,
679
680
  variant: "text",
680
681
  onClick: onTertiaryCtaClick,
681
- loading: isTertiaryCtaLoading,
682
- disabled: isTertiaryCtaDisabled,
682
+ loading: !!isTertiaryCtaLoading,
683
+ disabled: isTertiaryCtaDisabled !== void 0 ? isTertiaryCtaDisabled : !!(isPrimaryCtaLoading || isSecondaryCtaLoading),
683
684
  startIcon: tertiaryCtaStartIcon,
684
685
  children: tertiaryCtaTitle
685
686
  }
@@ -690,12 +691,13 @@ const ViDialog = (props) => {
690
691
  className: `vi-dialog-actions ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]}`,
691
692
  children: [
692
693
  secondaryCtaTitle && /* @__PURE__ */ jsx(
693
- Button,
694
+ LoadingButton,
694
695
  {
695
696
  className: "vi-dialog-cta",
696
697
  variant: "outlined",
697
698
  onClick: onSecondaryCtaClick,
698
- disabled: isSecondaryCtaDisabled,
699
+ disabled: isSecondaryCtaDisabled !== void 0 ? isSecondaryCtaDisabled : !!(isPrimaryCtaLoading || isTertiaryCtaLoading),
700
+ loading: !!isSecondaryCtaLoading,
699
701
  children: secondaryCtaTitle
700
702
  }
701
703
  ),
@@ -705,8 +707,8 @@ const ViDialog = (props) => {
705
707
  className: `vi-dialog-cta ${subtype === "destructive" ? "destructive" : ""}`,
706
708
  variant: "contained",
707
709
  onClick: onPrimaryCtaClick,
708
- loading: isPrimaryCtaLoading,
709
- disabled: isPrimaryCtaDisabled,
710
+ loading: !!isPrimaryCtaLoading,
711
+ disabled: isPrimaryCtaDisabled !== void 0 ? isPrimaryCtaDisabled : !!(isSecondaryCtaLoading || isTertiaryCtaLoading),
710
712
  children: primaryCtaTitle
711
713
  }
712
714
  )
@@ -719,12 +721,13 @@ const ViDialog = (props) => {
719
721
  className: `vi-dialog-actions without-tertiary ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]}`,
720
722
  children: [
721
723
  secondaryCtaTitle && /* @__PURE__ */ jsx(
722
- Button,
724
+ LoadingButton,
723
725
  {
724
726
  className: "vi-dialog-cta",
725
727
  variant: "outlined",
726
728
  onClick: onSecondaryCtaClick,
727
- disabled: isSecondaryCtaDisabled,
729
+ disabled: isSecondaryCtaDisabled !== void 0 ? isSecondaryCtaDisabled : !!(isPrimaryCtaLoading || isTertiaryCtaLoading),
730
+ loading: !!isSecondaryCtaLoading,
728
731
  children: secondaryCtaTitle
729
732
  }
730
733
  ),
@@ -734,8 +737,8 @@ const ViDialog = (props) => {
734
737
  className: `vi-dialog-cta ${subtype === "destructive" ? "destructive" : ""}`,
735
738
  variant: "contained",
736
739
  onClick: onPrimaryCtaClick,
737
- loading: isPrimaryCtaLoading,
738
- disabled: isPrimaryCtaDisabled,
740
+ loading: !!isPrimaryCtaLoading,
741
+ disabled: isPrimaryCtaDisabled !== void 0 ? isPrimaryCtaDisabled : !!(isSecondaryCtaLoading || isTertiaryCtaLoading),
739
742
  children: primaryCtaTitle
740
743
  }
741
744
  )
@@ -748,4 +751,4 @@ const ViDialog = (props) => {
748
751
  ) });
749
752
  };
750
753
 
751
- export { CONFIRMATION_SUBTYPES, INFORMATION_SUBTYPES, INPUT_SUBTYPES, MODAL_CONFIGS, MODAL_SIZES, MODAL_SIZE_VS_CLASS_NAMES, MODAL_TYPES, SIZE_TO_MAX_WIDTH, TERTIARY_CTA_TYPES, ViDialog };
754
+ export { CONFIRMATION_SUBTYPES, INFORMATION_SUBTYPES, INPUT_SUBTYPES, MODAL_CONFIGS, MODAL_SIZES, MODAL_SIZE_VS_CLASS_NAMES, MODAL_TYPES, MuiDialog, SIZE_TO_MAX_WIDTH, TERTIARY_CTA_TYPES };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "mui-dialog",
3
3
  "description": "A reusable dialog component for React applications built with Material-UI (MUI).",
4
- "author": "Victor de la Fouchardiere <victor.delafouchardiere@gmail.com> (https://github.com/viclafouch)",
4
+ "author": "Bikash Das <bikashdas0108@gmail.com> (https://github.com/bikashdas0108)",
5
5
  "license": "MIT",
6
6
  "bugs": {
7
7
  "url": "https://github.com/viplatform/mui-dialog/issues"
8
8
  },
9
9
  "homepage": "https://github.com/viplatform/mui-dialog#readme",
10
- "version": "1.0.6",
10
+ "version": "1.0.9",
11
11
  "files": [
12
12
  "dist"
13
13
  ],
@@ -32,20 +32,20 @@
32
32
  "material"
33
33
  ],
34
34
  "scripts": {
35
- "build": "npm run lint && vite build",
36
- "lint": "npx tsc --noEmit && eslint",
37
- "lint:fix": "npm run lint --fix",
35
+ "build": "yarn lint && vite build",
36
+ "lint": "tsc --noEmit && eslint",
37
+ "lint:fix": "yarn lint --fix",
38
38
  "storybook": "storybook dev -p 6006",
39
39
  "build-storybook": "storybook build",
40
40
  "test": "vitest",
41
41
  "release": "standard-version",
42
42
  "coverage": "vitest run --coverage",
43
43
  "prepare": "husky",
44
- "prepublishOnly": "npm run build"
44
+ "prepublishOnly": "yarn build"
45
45
  },
46
46
  "standard-version": {
47
47
  "scripts": {
48
- "prerelease": "npm run build"
48
+ "prerelease": "yarn build"
49
49
  },
50
50
  "skip": {
51
51
  "changelog": true
@@ -65,14 +65,8 @@
65
65
  }
66
66
  },
67
67
  "dependencies": {
68
- "@emotion/react": "^11.13.0",
69
- "@emotion/styled": "^11.13.0",
70
68
  "@mui/icons-material": "^7.1.0",
71
- "@mui/lab": "^7.0.0-beta.12",
72
- "@mui/material": "^7.0.0",
73
- "@types/react": "^18.0.0 || ^19.0.0",
74
- "react": "^18.0.0 || ^19.0.0",
75
- "react-dom": "^18.0.0 || ^19.0.0"
69
+ "@mui/lab": "^7.0.0-beta.12"
76
70
  },
77
71
  "devDependencies": {
78
72
  "@emotion/react": "^11.14.0",