From b214e60a03f549bd9cdf7b5f7393b25b8bbc9142 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 11 Aug 2025 11:25:14 +0000 Subject: [PATCH 1/2] feat: Add display mode options to modal This commit introduces a new feature that allows you to change the display mode of the modal component. A 3-dots menu has been added to the modal header, providing the following options: - Default: The standard centered modal. - Drawer: A sidebar that slides in from the right. - Fullscreen: A mode that fills a specified container element. Your selected display mode is persisted in `localStorage`. The `ModalProvider` has been updated to accept a `containerRef` prop to support the fullscreen mode within a specific container. --- src/modal-consumer.tsx | 4 ++-- src/modal-provider.tsx | 34 ++++++++++++++++++++++++++++++--- src/modal.css | 39 ++++++++++++++++++++++++++++++++++++++ src/modal.tsx | 43 +++++++++++++++++++++++++++++------------- src/quick-modal.ts | 5 +++++ 5 files changed, 107 insertions(+), 18 deletions(-) create mode 100644 src/modal.css diff --git a/src/modal-consumer.tsx b/src/modal-consumer.tsx index f992c95..ebc6706 100644 --- a/src/modal-consumer.tsx +++ b/src/modal-consumer.tsx @@ -16,7 +16,7 @@ export const withModal = (props: P) => {(context: IModalContext) => }; export const useModal = (): ModalHook => { - const {showModal, hideModal} = useContext(ModalContext); + const {showModal, hideModal, displayMode, setDisplayMode, containerRef} = useContext(ModalContext); - return {showModal, hideModal}; + return {showModal, hideModal, displayMode, setDisplayMode, containerRef}; }; diff --git a/src/modal-provider.tsx b/src/modal-provider.tsx index 230a648..5fd0e05 100644 --- a/src/modal-provider.tsx +++ b/src/modal-provider.tsx @@ -1,20 +1,38 @@ import React, {ComponentType, PropsWithChildren, useCallback, useMemo, useState} from 'react'; import ModalRenderer from './modal-renderer'; -import {ModalHook, ModalProps} from './quick-modal'; +import {DisplayMode, ModalHook, ModalProps} from './quick-modal'; export type IModalContext = { component: ComponentType | null; props: object; showModal: ModalHook['showModal']; hideModal: ModalHook['hideModal']; + displayMode: DisplayMode; + setDisplayMode: (mode: DisplayMode) => void; + containerRef?: React.RefObject; }; export const ModalContext = React.createContext({} as IModalContext); -export const ModalProvider = ({children}: PropsWithChildren) => { +const getInitialDisplayMode = (): DisplayMode => { + if (typeof window !== 'undefined') { + const storedMode = localStorage.getItem('modalDisplayMode'); + if (storedMode === 'drawer' || storedMode === 'fullscreen') { + return storedMode; + } + } + return 'default'; +}; + +type ModalProviderProps = PropsWithChildren<{ + containerRef?: React.RefObject; +}>; + +export const ModalProvider = ({children, containerRef}: ModalProviderProps) => { const [component, setComponent] = useState | null>(null); const [props, setProps] = useState({}); + const [displayMode, setDisplayModeState] = useState(getInitialDisplayMode()); const showModal: ModalHook['showModal'] = useCallback((component, props) => { setComponent(() => component as ComponentType); @@ -26,14 +44,24 @@ export const ModalProvider = ({children}: PropsWithChildren) => { setComponent(null); }, []); + const setDisplayMode = useCallback((mode: DisplayMode) => { + setDisplayModeState(mode); + if (typeof window !== 'undefined') { + localStorage.setItem('modalDisplayMode', mode); + } + }, []); + const context = useMemo( () => ({ props, component, showModal, hideModal, + displayMode, + setDisplayMode, + containerRef, }), - [props, component, showModal, hideModal], + [props, component, showModal, hideModal, displayMode, setDisplayMode, containerRef], ); return ( diff --git a/src/modal.css b/src/modal.css new file mode 100644 index 0000000..750816a --- /dev/null +++ b/src/modal.css @@ -0,0 +1,39 @@ +.modal-drawer .modal-dialog { + position: fixed; + top: 0; + right: 0; + margin: 0; + height: 100%; + transform: translateX(100%); + transition: transform 0.3s ease-out; +} + +.modal-drawer.show .modal-dialog { + transform: translateX(0); +} + +.modal-drawer .modal-content { + height: 100%; + border-radius: 0; +} + +.modal-fullscreen.modal { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.modal-fullscreen .modal-dialog { + max-width: 100%; + width: 100%; + height: 100%; + margin: 0; +} + +.modal-fullscreen .modal-content { + height: 100%; + border-radius: 0; + border: none; +} diff --git a/src/modal.tsx b/src/modal.tsx index faa6111..5aeb7c2 100644 --- a/src/modal.tsx +++ b/src/modal.tsx @@ -1,8 +1,9 @@ import React, {PropsWithChildren, useCallback, useState} from 'react'; -import {Button, Modal as BootstrapModal} from 'react-bootstrap'; +import {Button, Dropdown, Modal as BootstrapModal} from 'react-bootstrap'; -import {useModal} from './quick-modal'; +import './modal.css'; +import {ModalProps, useModal} from './quick-modal'; type buttonType = | 'primary' @@ -29,15 +30,16 @@ type modalButton = { variant?: buttonType; }; -type props = PropsWithChildren<{ - title: string; - cancelButton?: modalButton; - confirmButton?: modalButton; - size?: 'sm' | 'lg' | 'xl'; - className?: string; - closeOnConfirm?: boolean; - keyboard?: boolean; -}>; +type props = ModalProps & + PropsWithChildren<{ + title: string; + cancelButton?: modalButton; + confirmButton?: modalButton; + size?: 'sm' | 'lg' | 'xl'; + className?: string; + closeOnConfirm?: boolean; + keyboard?: boolean; + }>; const Modal = ({ cancelButton, @@ -48,9 +50,10 @@ const Modal = ({ title, children, closeOnConfirm = true, + hideModal, }: props) => { const [show, setShow] = useState(true); - const {hideModal} = useModal(); + const {displayMode, setDisplayMode, containerRef} = useModal(); const handleClose = useCallback(() => { hideModal(); @@ -77,15 +80,29 @@ const Modal = ({ return ( {title} + + + ⋮ + + + + setDisplayMode('default')}>Default + setDisplayMode('drawer')}>Drawer + setDisplayMode('fullscreen')}>Full Screen + + {children} {cancelButton || confirmButton ? ( diff --git a/src/quick-modal.ts b/src/quick-modal.ts index 771eb55..6552bbc 100644 --- a/src/quick-modal.ts +++ b/src/quick-modal.ts @@ -8,9 +8,14 @@ export type ModalPropsWith = { modal: ModalHook; }; +export type DisplayMode = 'default' | 'drawer' | 'fullscreen'; + export type ModalHook = { showModal

(component: ComponentType

, props?: Omit): void; hideModal(): void; + displayMode: DisplayMode; + setDisplayMode: (mode: DisplayMode) => void; + containerRef?: React.RefObject; }; export type ModalProps = { From 5e658a5934f8fe2f1a8feb01bfbca05ae3dd9bcb Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 11 Aug 2025 11:52:16 +0000 Subject: [PATCH 2/2] fix: Include modal.css in build output The previous build process did not include the `modal.css` file in the published package, causing a runtime error in consuming projects. This commit updates the `build` script in `package.json` to copy the `modal.css` file to the `lib` directory after compilation. This ensures that the CSS file is included in the published package and can be resolved at runtime. --- package-lock.json | 374 ++++++++++++++++++++++++++++++++++++++++++---- package.json | 3 +- 2 files changed, 346 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index bcaeb97..308f66f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@types/react-color": "^3.0.13", "@types/react-dom": "^19.1.3", "@typescript-eslint/eslint-plugin": "^8.32.0", + "copyfiles": "^2.4.1", "eslint": "^9.26.0", "eslint-config-prettier": "^10.1.3", "eslint-plugin-prettier": "^5.4.0", @@ -1361,6 +1362,32 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -1752,6 +1779,38 @@ "license": "MIT", "peer": true }, + "node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, "node_modules/commander": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", @@ -1816,6 +1875,33 @@ "node": ">=6.6.0" } }, + "node_modules/copyfiles": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz", + "integrity": "sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==", + "dev": true, + "license": "MIT", + "dependencies": { + "glob": "^7.0.5", + "minimatch": "^3.0.3", + "mkdirp": "^1.0.4", + "noms": "0.0.0", + "through2": "^2.0.1", + "untildify": "^4.0.0", + "yargs": "^16.1.0" + }, + "bin": { + "copyfiles": "copyfiles", + "copyup": "copyfiles" + } + }, + "node_modules/core-util-is": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", + "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", + "dev": true, + "license": "MIT" + }, "node_modules/cors": { "version": "2.8.5", "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", @@ -2015,6 +2101,13 @@ "dev": true, "license": "ISC" }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, + "license": "MIT" + }, "node_modules/encodeurl": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", @@ -2417,20 +2510,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint/node_modules/ansi-styles": { - "version": "4.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, "node_modules/eslint/node_modules/chalk": { "version": "4.1.2", "dev": true, @@ -2446,22 +2525,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/eslint/node_modules/color-convert": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/eslint/node_modules/color-name": { - "version": "1.1.4", - "dev": true, - "license": "MIT" - }, "node_modules/eslint/node_modules/escape-string-regexp": { "version": "4.0.0", "dev": true, @@ -2956,6 +3019,16 @@ "node": ">=6.9.0" } }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "license": "ISC", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/get-intrinsic": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", @@ -3452,6 +3525,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/is-generator-function": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz", @@ -3937,6 +4020,19 @@ "node": "*" } }, + "node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true, + "license": "MIT", + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -3966,6 +4062,17 @@ "dev": true, "license": "MIT" }, + "node_modules/noms": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz", + "integrity": "sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==", + "dev": true, + "license": "ISC", + "dependencies": { + "inherits": "^2.0.1", + "readable-stream": "~1.0.31" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -4282,6 +4389,13 @@ "node": ">=6.0.0" } }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "dev": true, + "license": "MIT" + }, "node_modules/prop-types": { "version": "15.8.1", "license": "MIT", @@ -4468,6 +4582,26 @@ "react-dom": ">=16.6.0" } }, + "node_modules/readable-stream": { + "version": "1.0.34", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==", + "dev": true, + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.1", + "isarray": "0.0.1", + "string_decoder": "~0.10.x" + } + }, + "node_modules/readable-stream/node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", + "dev": true, + "license": "MIT" + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -4526,6 +4660,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/requireindex": { "version": "1.2.0", "dev": true, @@ -4900,6 +5044,28 @@ "node": ">= 0.8" } }, + "node_modules/string_decoder": { + "version": "0.10.31", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", + "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/string.prototype.matchall": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz", @@ -4994,6 +5160,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/strip-json-comments": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", @@ -5035,6 +5214,57 @@ "url": "https://opencollective.com/synckit" } }, + "node_modules/through2": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", + "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } + }, + "node_modules/through2/node_modules/isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/through2/node_modules/readable-stream": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", + "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "dev": true, + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/through2/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true, + "license": "MIT" + }, + "node_modules/through2/node_modules/string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "dev": true, @@ -5267,6 +5497,16 @@ "node": ">= 0.8" } }, + "node_modules/untildify": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz", + "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", @@ -5308,6 +5548,13 @@ "punycode": "^2.1.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, + "license": "MIT" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -5439,11 +5686,49 @@ "node": ">=0.10.0" } }, + "node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/wrappy": { "version": "1.0.2", "dev": true, "license": "ISC" }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.4" + } + }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=10" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -5451,6 +5736,35 @@ "dev": true, "license": "ISC" }, + "node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "dev": true, + "license": "MIT", + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=10" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "dev": true, diff --git a/package.json b/package.json index b70a722..412792a 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "types": "lib/quick-modal.d.ts", "scripts": { "test": "jest --config jestconfig.json", - "build": "tsc", + "build": "tsc && copyfiles -u 1 src/modal.css lib", "eslint": "eslint src/", "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"src/**/*.js\"", "prepare": "npm run build", @@ -50,6 +50,7 @@ "@types/react-color": "^3.0.13", "@types/react-dom": "^19.1.3", "@typescript-eslint/eslint-plugin": "^8.32.0", + "copyfiles": "^2.4.1", "eslint": "^9.26.0", "eslint-config-prettier": "^10.1.3", "eslint-plugin-prettier": "^5.4.0",