@flipdish/portal-library 4.2.8 → 4.2.10

package/README.md

@@ -16,6 +16,66 @@ npm install @flipdish/portal-library
 pnpm add @flipdish/portal-library
 ```
 
+## Using the library
+
+To use Flipdish UI components in your project, you must use this library's theme provider.
+
+In some existing projects that already use Material UI theme providers, it may not be feasible to replace the theme provider in a single PR if the codebase is large. In these cases, it may be better to gradually integrate the UI library by nesting the Flipdish UI library theme provider within the esisting theme provider. Wrapping individual route components in the Flipdish UI theme provider will allow for you to migrate your project to Flipdish UI page by page, removing the need of a 'big bang' PR. To support nested theme providers, make the following changes:
+
+1. Rename your existing breakpoint variables in your `theme.ts` file to match the names defined in the UI library. e.g. If the project is using the default MUI breakpoint variable names and values, define them as this:
+
+```typescript
+breakpoints: {
+values: {
+base: 0,
+mobile: 600,
+tablet: 900,
+laptop: 1200,
+desktop: 1536,
+widescreen: 1920,
+},
+},
+```
+
+2. Rename any use of the old breakpoint variable names to the new names e.g XS → base, SM → mobile etc. This will need to be in any `theme.breakpoints.*` logic or in MUI grid props (e.g `<Grid mobile={3}>`).
+
+3. Add missing theme values that are required and defined in the Flipdish UI library. i.e. `radius` and `customShadows` values:
+
+```typescript
+  radius: {
+    'radius-4': '4px',
+    'radius-8': '8px',
+    'radius-12': '12px',
+    'radius-16': '16px',
+    'radius-20': '20px',
+    'radius-24': '24px',
+    'radius-32': '32px',
+    'radius-40': '40px',
+    'radius-48': '48px',
+    'radius-56': '56px',
+    'radius-64': '64px',
+  },
+  customShadows: {
+    base: '0px 1px 3px rgba(0, 0, 0, 0.1)',
+    sunken: 'inset 0px 1px 3px rgba(0, 0, 0, 0.1)',
+    raised: '0px 4px 8px rgba(0, 0, 0, 0.15)',
+    overlay: '0px 8px 24px rgba(0, 0, 0, 0.2)',
+  },
+```
+
+These steps will prevent type errors being introduced when nesting the UI library theme provider.
+
+To use the Flipdish UI library on particular page, go to the route definitiion for the project and import the theme provider
+
+```typescript
+import FlipdishUIThemeProvider from '@flipdish/portal-library/themes/ThemeProvider';
+...
+...
+<FlipdishUIThemeProvider>
+//Route component here
+</FlipdishUIThemeProvider>;
+```
+
 ## Using Icons
 
 To use an icon in your project, import the icon and use it like any other component. You can specify the size using the `size` prop.

package/dist/components/molecules/Tabs/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/Tabs");module.exports=e;
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Tabs");module.exports=({fdKey:t,...a})=>e.jsx(r,{"data-testid":t,...a});
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/Tabs/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":["import MuiTabs, { type TabsProps as MuiTabsProps } from '@mui/material/Tabs';\n\nexport interface TabsProps extends MuiTabsProps {\n    fdKey: string;\n}\n\nconst Tabs = ({ fdKey, ...props }: TabsProps): JSX.Element => {\n    return <MuiTabs data-testid={fdKey} {...props} />;\n};\n\nexport default Tabs;\n"],"names":["fdKey","props","_jsx","MuiTabs"],"mappings":"+FAMa,EAAGA,WAAUC,KACfC,EAAAA,IAACC,EAAO,CAAA,cAAcH,KAAWC"}

package/dist/components/molecules/Tabs/index.d.ts

@@ -1,2 +1,9 @@
-import Tabs from '@mui/material/Tabs';
-export { default } from '@mui/material/Tabs';
+import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
+
+interface TabsProps extends TabsProps$1 {
+    fdKey: string;
+}
+declare const Tabs: ({ fdKey, ...props }: TabsProps) => JSX.Element;
+
+export { Tabs as default };
+export type { TabsProps };

package/dist/components/molecules/Tabs/index.js

@@ -1,2 +1,2 @@
-import a from"@mui/material/Tabs";export{default}from"@mui/material/Tabs";
+import{jsx as t}from"react/jsx-runtime";import a from"@mui/material/Tabs";const r=({fdKey:r,...e})=>t(a,{"data-testid":r,...e});export{r as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":["import MuiTabs, { type TabsProps as MuiTabsProps } from '@mui/material/Tabs';\n\nexport interface TabsProps extends MuiTabsProps {\n    fdKey: string;\n}\n\nconst Tabs = ({ fdKey, ...props }: TabsProps): JSX.Element => {\n    return <MuiTabs data-testid={fdKey} {...props} />;\n};\n\nexport default Tabs;\n"],"names":["Tabs","fdKey","props","_jsx","MuiTabs"],"mappings":"0EAMA,MAAMA,EAAO,EAAGC,WAAUC,KACfC,EAACC,EAAO,CAAA,cAAcH,KAAWC"}

package/dist/components/organisms/ImageUploadWidget/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("react"),n=require("@mui/material/Backdrop"),t=require("@mui/material/Box"),r=require("@mui/material/CircularProgress/CircularProgress"),a=require("@mui/material/Fade"),o=require("@mui/material/Modal"),s=require("@mui/material/Stack/Stack"),l=require("@mui/material/styles/styled"),d=require("@mui/material/Typography"),u=require("@mui/material/useMediaQuery"),c=require("../../atoms/Button/index.cjs.js");require("react-images-uploading");var m=require("./components/FlipdishFonts.cjs.js"),p=require("./components/ImageDisplay.cjs.js"),x=require("./components/ImageDropZone.cjs.js");const g=l(t)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),h=l(d)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"});module.exports=t=>{const{open:l,onClose:d,widgetTitle:j="Upload Image",imageUrl:b="",isCloudinaryAsset:y=!1,cdnCloudName:f,onUpload:C,onUploadImageLink:k,onRemove:w}=t,[v,q]=i.useState(null),[I,z]=i.useState(!1),[B,S]=i.useState(null),[K,F]=i.useState(""),U=u((e=>e.breakpoints.up("tablet"))),L=()=>{q(null),d()},R=async()=>{z(!0),S(null);try{v?.file?await C(v.file):K&&k&&await k(K)}catch(e){e instanceof Error&&S(e)}finally{z(!1),q(null),F("")}};return e.jsxs(e.Fragment,{children:[e.jsx(m,{}),e.jsx(o,{closeAfterTransition:!0,"data-testid":"image-upload-widget",disableEscapeKeyDown:!0,open:l,slotProps:{backdrop:{timeout:500}},slots:{backdrop:n},children:e.jsx(a,{in:l,children:e.jsxs(g,{children:[e.jsx(h,{children:j}),e.jsx(s,{alignItems:"center",direction:"row",flex:1,justifyContent:"center",maxHeight:U?"300px":"100%",children:b?e.jsx(p,{cdnCloudName:f,isCloudinaryAsset:y,src:b}):e.jsx(x,{allowImageLinkUpload:!!k,imageLink:K,onImageLinkChange:e=>F(e),onImageSelect:e=>q(e),onUploadImageLink:()=>{R()},selectedImage:v,uploadingError:B})}),U?e.jsxs(s,{direction:"row",gap:"2px",justifyContent:"space-between",children:[e.jsx(s,{direction:"row",children:!!v&&e.jsx(c.Button,{fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e.jsxs(s,{direction:"row",gap:"16px",justifyContent:"space-between",children:[e.jsx(c.Button,{fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),b?e.jsx(c.Button,{fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"})]})]}):e.jsxs(s,{direction:"column",gap:e=>e.spacing(1),children:[b?e.jsx(c.Button,{fullWidth:!0,fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{fullWidth:!0,disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"}),!!v&&e.jsx(c.Button,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),e.jsx(c.Button,{fullWidth:!0,fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),n=require("@mui/material/Backdrop"),t=require("@mui/material/Box"),r=require("@mui/material/CircularProgress/CircularProgress"),a=require("@mui/material/Fade"),o=require("@mui/material/Modal"),s=require("@mui/material/Stack/Stack"),l=require("@mui/material/styles/styled"),d=require("@mui/material/Typography"),u=require("@mui/material/useMediaQuery"),c=require("../../atoms/Button/index.cjs.js");require("react-images-uploading");var m=require("./components/FlipdishFonts.cjs.js"),p=require("./components/ImageDisplay.cjs.js"),g=require("./components/ImageDropZone.cjs.js");const x=l(t)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),h=l(d)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"});module.exports=t=>{const{open:l,onClose:d,widgetTitle:j="Upload Image",imageUrl:b="",isCloudinaryAsset:y=!1,cdnCloudName:f,onUpload:C,onUploadImageLink:k,onRemove:w}=t,[v,q]=i.useState(null),[I,z]=i.useState(!1),[B,S]=i.useState(null),[K,F]=i.useState(""),U=u((e=>e.breakpoints.up("tablet"))),L=()=>{q(null),d()},R=async()=>{z(!0),S(null);try{v?.file?await C(v.file):K&&k&&await k(K)}catch(e){e instanceof Error&&S(e)}finally{z(!1),q(null),F("")}};return e.jsxs(e.Fragment,{children:[e.jsx(m,{}),e.jsx(o,{closeAfterTransition:!0,"data-testid":"image-upload-widget",disableEscapeKeyDown:!0,open:l,slotProps:{backdrop:{timeout:500}},slots:{backdrop:n},children:e.jsx(a,{in:l,children:e.jsxs(x,{children:[e.jsx(h,{children:j}),e.jsx(s,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:b?e.jsx(p,{cdnCloudName:f,isCloudinaryAsset:y,src:b}):e.jsx(g,{allowImageLinkUpload:!!k,imageLink:K,onImageLinkChange:e=>F(e),onImageSelect:e=>q(e),onUploadImageLink:()=>{R()},selectedImage:v,uploadingError:B})}),U?e.jsxs(s,{direction:"row",gap:"2px",justifyContent:"space-between",children:[e.jsx(s,{direction:"row",children:!!v&&e.jsx(c.Button,{fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e.jsxs(s,{direction:"row",gap:"16px",justifyContent:"space-between",children:[e.jsx(c.Button,{fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),b?e.jsx(c.Button,{fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"})]})]}):e.jsxs(s,{direction:"column",gap:e=>e.spacing(1),children:[b?e.jsx(c.Button,{fullWidth:!0,fdKey:"img-remove-btn",onClick:w,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}):e.jsx(c.Button,{fullWidth:!0,disabled:!v&&!K||I,endIcon:I?e.jsx(r,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:R,size:"medium",variant:"primary",children:"Upload"}),!!v&&e.jsx(c.Button,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>q(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),e.jsx(c.Button,{fullWidth:!0,fdKey:"img-close-btn",onClick:L,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/ImageUploadWidget/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onUploadImageLink, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap='2px' justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && <Button fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n            {imageUrl ? (\n              <Button fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                fdKey='img-upload-btn'\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      )\n    }\n    return (\n      <Stack direction='column' gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button fullWidth fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey='img-upload-btn'\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && <Button fullWidth fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n        <Button fullWidth fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n      </Stack>\n    )\n  }\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-testid='image-upload-widget'\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} justifyContent=\"center\" maxHeight={isDesktop ? '300px' : '100%'}>\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","maxHeight","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onUploadImageLink, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap='2px' justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && <Button fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n            {imageUrl ? (\n              <Button fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                fdKey='img-upload-btn'\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      )\n    }\n    return (\n      <Stack direction='column' gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button fullWidth fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey='img-upload-btn'\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && <Button fullWidth fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n        <Button fullWidth fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n      </Stack>\n    )\n  }\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-testid='image-upload-widget'\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} height={'calc(100% - 300px)'} justifyContent=\"center\">\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}

package/dist/components/organisms/ImageUploadWidget/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import t from"@mui/material/Backdrop";import r from"@mui/material/Box";import a from"@mui/material/CircularProgress/CircularProgress";import l from"@mui/material/Fade";import d from"@mui/material/Modal";import m from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import c from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import{Button as u}from"../../atoms/Button/index.js";import"react-images-uploading";import g from"./components/FlipdishFonts.js";import h from"./components/ImageDisplay.js";import f from"./components/ImageDropZone.js";const b=s(r)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),x=s(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),y=r=>{const{open:s,onClose:c,widgetTitle:y="Upload Image",imageUrl:C="",isCloudinaryAsset:k=!1,cdnCloudName:w,onUpload:v,onUploadImageLink:I,onRemove:z}=r,[j,K]=n(null),[U,F]=n(!1),[S,L]=n(null),[R,W]=n(""),D=p((e=>e.breakpoints.up("tablet"))),A=()=>{K(null),c()},B=async()=>{F(!0),L(null);try{j?.file?await v(j.file):R&&I&&await I(R)}catch(e){e instanceof Error&&L(e)}finally{F(!1),K(null),W("")}};return e(i,{children:[o(g,{}),o(d,{closeAfterTransition:!0,"data-testid":"image-upload-widget",disableEscapeKeyDown:!0,open:s,slotProps:{backdrop:{timeout:500}},slots:{backdrop:t},children:o(l,{in:s,children:e(b,{children:[o(x,{children:y}),o(m,{alignItems:"center",direction:"row",flex:1,justifyContent:"center",maxHeight:D?"300px":"100%",children:C?o(h,{cdnCloudName:w,isCloudinaryAsset:k,src:C}):o(f,{allowImageLinkUpload:!!I,imageLink:R,onImageLinkChange:e=>W(e),onImageSelect:e=>K(e),onUploadImageLink:()=>{B()},selectedImage:j,uploadingError:S})}),e(m,D?{direction:"row",gap:"2px",justifyContent:"space-between",children:[o(m,{direction:"row",children:!!j&&o(u,{fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e(m,{direction:"row",gap:"16px",justifyContent:"space-between",children:[o(u,{fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),o(u,C?{fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"})]})]}:{direction:"column",gap:e=>e.spacing(1),children:[o(u,C?{fullWidth:!0,fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{fullWidth:!0,disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"}),!!j&&o(u,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),o(u,{fullWidth:!0,fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};export{y as default};
+import{jsxs as e,Fragment as i,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import t from"@mui/material/Backdrop";import r from"@mui/material/Box";import a from"@mui/material/CircularProgress/CircularProgress";import l from"@mui/material/Fade";import d from"@mui/material/Modal";import m from"@mui/material/Stack/Stack";import s from"@mui/material/styles/styled";import c from"@mui/material/Typography";import p from"@mui/material/useMediaQuery";import{Button as u}from"../../atoms/Button/index.js";import"react-images-uploading";import g from"./components/FlipdishFonts.js";import h from"./components/ImageDisplay.js";import f from"./components/ImageDropZone.js";const b=s(r)((({theme:e})=>({display:"flex",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",flexDirection:"column",width:"95%",padding:"16px",boxSizing:"border-box",height:"95%",alignItems:"stretch",justifyContent:"space-between",gap:e.spacing(3),borderRadius:e.radius["radius-8"],border:"1px solid rgba(0, 0, 0, 0.10)",background:"#FFF",boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",[e.breakpoints.up("tablet")]:{width:"650px",height:"500px",padding:"32px"}}))),y=s(c)({color:"rgba(0, 0, 0, 0.90)",fontFamily:"Roboto",fontSize:"24px",fontWeight:"600",lineHeight:"32px",letterSpacing:"0px"}),x=r=>{const{open:s,onClose:c,widgetTitle:x="Upload Image",imageUrl:C="",isCloudinaryAsset:k=!1,cdnCloudName:w,onUpload:v,onUploadImageLink:I,onRemove:z}=r,[j,K]=n(null),[U,F]=n(!1),[S,L]=n(null),[R,W]=n(""),D=p((e=>e.breakpoints.up("tablet"))),A=()=>{K(null),c()},B=async()=>{F(!0),L(null);try{j?.file?await v(j.file):R&&I&&await I(R)}catch(e){e instanceof Error&&L(e)}finally{F(!1),K(null),W("")}};return e(i,{children:[o(g,{}),o(d,{closeAfterTransition:!0,"data-testid":"image-upload-widget",disableEscapeKeyDown:!0,open:s,slotProps:{backdrop:{timeout:500}},slots:{backdrop:t},children:o(l,{in:s,children:e(b,{children:[o(y,{children:x}),o(m,{alignItems:"center",direction:"row",flex:1,height:"calc(100% - 300px)",justifyContent:"center",children:C?o(h,{cdnCloudName:w,isCloudinaryAsset:k,src:C}):o(f,{allowImageLinkUpload:!!I,imageLink:R,onImageLinkChange:e=>W(e),onImageSelect:e=>K(e),onUploadImageLink:()=>{B()},selectedImage:j,uploadingError:S})}),e(m,D?{direction:"row",gap:"2px",justifyContent:"space-between",children:[o(m,{direction:"row",children:!!j&&o(u,{fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"})}),e(m,{direction:"row",gap:"16px",justifyContent:"space-between",children:[o(u,{fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"}),o(u,C?{fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"})]})]}:{direction:"column",gap:e=>e.spacing(1),children:[o(u,C?{fullWidth:!0,fdKey:"img-remove-btn",onClick:z,size:"medium",tone:"destructive",variant:"secondary",children:"Remove"}:{fullWidth:!0,disabled:!j&&!R||U,endIcon:U?o(a,{color:"inherit",size:"sm",sx:{width:"20px"}}):null,fdKey:"img-upload-btn",onClick:B,size:"medium",variant:"primary",children:"Upload"}),!!j&&o(u,{fullWidth:!0,fdKey:"img-change-button",onClick:()=>K(null),size:"medium",tone:"brand",variant:"secondary",children:"Change"}),o(u,{fullWidth:!0,fdKey:"img-close-btn",onClick:A,size:"medium",tone:"neutral",variant:"secondary",children:"Close"})]})]})})})]})};export{x as default};
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/ImageUploadWidget/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onUploadImageLink, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap='2px' justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && <Button fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n            {imageUrl ? (\n              <Button fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                fdKey='img-upload-btn'\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      )\n    }\n    return (\n      <Stack direction='column' gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button fullWidth fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey='img-upload-btn'\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && <Button fullWidth fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n        <Button fullWidth fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n      </Stack>\n    )\n  }\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-testid='image-upload-widget'\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} justifyContent=\"center\" maxHeight={isDesktop ? '300px' : '100%'}>\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","ImageUploadWidget","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","maxHeight","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/ImageUploadWidget/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport Backdrop from '@mui/material/Backdrop';\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress/CircularProgress';\nimport Fade from '@mui/material/Fade';\nimport Modal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack/Stack';\nimport styled from '@mui/material/styles/styled';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Button from '@fd/components/atoms/Button';\nimport { type ImageType } from 'react-images-uploading';\n\nimport FlipdishFonts from './components/FlipdishFonts';\nimport ImageDisplay from './components/ImageDisplay';\nimport ImageDropZone from './components/ImageDropZone';\n\nconst StyledWidgetContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  flexDirection: 'column',\n  width: '95%',\n  padding: '16px',\n  boxSizing: 'border-box',\n  height: '95%',\n  alignItems: 'stretch',\n  justifyContent: 'space-between',\n  gap: theme.spacing(3),\n  borderRadius: theme.radius['radius-8'],\n  border: '1px solid rgba(0, 0, 0, 0.10)',\n  background: '#FFF',\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)',\n  [theme.breakpoints.up('tablet')]: {\n    width: '650px',\n    height: '500px',\n    padding: '32px',\n  },\n}));\n\nconst StyledWidgetTitle = styled(Typography)({\n  color: 'rgba(0, 0, 0, 0.90)',\n  fontFamily: 'Roboto',\n  fontSize: '24px',\n  fontWeight: '600',\n  lineHeight: '32px',\n  letterSpacing: '0px',\n});\n\nexport interface ImageUploadWidgetProps {\n  open: boolean;\n  widgetTitle?: string;\n  imageUrl?: string;\n  isCloudinaryAsset?: boolean;\n  cdnCloudName?: string;\n  onUpload: (file: File) => Promise<void>;\n  onUploadImageLink?: (imageLink: string) => Promise<void>;\n  onRemove: () => void;\n  onClose: () => void;\n}\n\nconst ImageUploadWidget: React.FC<ImageUploadWidgetProps> = (props) => {\n  const { open, onClose, widgetTitle = 'Upload Image', imageUrl = '', isCloudinaryAsset = false, cdnCloudName, onUpload, onUploadImageLink, onRemove } = props;\n  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadingError, setUploadingError] = useState<Error | null>(null);\n  const [imageLink, setImageLink] = useState('');\n\n  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('tablet'));\n\n  const handleClose = (): void => {\n    setSelectedImage(null);\n    onClose();\n  };\n\n  const handleUpload = async (): Promise<void> => {\n    setUploading(true);\n    setUploadingError(null);\n\n    try {\n      if (selectedImage?.file) {\n        await onUpload(selectedImage.file);\n      } else if (imageLink && onUploadImageLink) {\n        await onUploadImageLink(imageLink);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        setUploadingError(error);\n      }\n    } finally {\n      setUploading(false);\n      setSelectedImage(null);\n      setImageLink('');\n    }\n  };\n\n  const renderActionButtons = (): React.ReactElement => {\n    if (isDesktop) {\n      return (\n        <Stack direction=\"row\" gap='2px' justifyContent=\"space-between\">\n          <Stack direction=\"row\">\n            {!!selectedImage && <Button fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n          </Stack>\n          <Stack direction=\"row\" gap=\"16px\" justifyContent=\"space-between\">\n            <Button fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n            {imageUrl ? (\n              <Button fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n            ) : (\n              <Button\n                disabled={(!selectedImage && !imageLink) || uploading}\n                endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n                fdKey='img-upload-btn'\n                // eslint-disable-next-line @typescript-eslint/no-misused-promises\n                onClick={handleUpload}\n                size=\"medium\"\n                variant=\"primary\"\n              >\n                Upload\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      )\n    }\n    return (\n      <Stack direction='column' gap={(theme) => theme.spacing(1)}>\n        {imageUrl ? (\n          <Button fullWidth fdKey='img-remove-btn' onClick={onRemove} size=\"medium\" tone=\"destructive\" variant=\"secondary\">Remove</Button>\n        ) : (\n          <Button\n            fullWidth\n            disabled={(!selectedImage && !imageLink) || uploading}\n            endIcon={uploading ? <CircularProgress color=\"inherit\" size=\"sm\" sx={{ width: '20px' }} /> : null}\n            fdKey='img-upload-btn'\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            onClick={handleUpload}\n            size=\"medium\"\n            variant=\"primary\"\n          >\n            Upload\n          </Button>\n        )}\n        {!!selectedImage && <Button fullWidth fdKey='img-change-button' onClick={() => setSelectedImage(null)} size=\"medium\" tone='brand' variant='secondary'>Change</Button>}\n        <Button fullWidth fdKey='img-close-btn' onClick={handleClose} size=\"medium\" tone='neutral' variant=\"secondary\">Close</Button>\n      </Stack>\n    )\n  }\n\n  return (\n    <>\n      <FlipdishFonts />\n      <Modal\n        closeAfterTransition\n        data-testid='image-upload-widget'\n        disableEscapeKeyDown={true}\n        open={open}\n        slotProps={{\n          backdrop: {\n            timeout: 500,\n          },\n        }}\n        slots={{ backdrop: Backdrop }}\n      >\n        <Fade in={open}>\n          <StyledWidgetContainer>\n            <StyledWidgetTitle>{widgetTitle}</StyledWidgetTitle>\n            <Stack alignItems=\"center\" direction=\"row\" flex={1} height={'calc(100% - 300px)'} justifyContent=\"center\">\n              {imageUrl ? (\n                <ImageDisplay cdnCloudName={cdnCloudName} isCloudinaryAsset={isCloudinaryAsset} src={imageUrl} />\n              ) : (\n                <ImageDropZone\n                  allowImageLinkUpload={!!onUploadImageLink}\n                  imageLink={imageLink}\n                  onImageLinkChange={(link) => setImageLink(link)}\n                  onImageSelect={(image) => setSelectedImage(image)}\n                  onUploadImageLink={() => void handleUpload()}\n                  selectedImage={selectedImage}\n                  uploadingError={uploadingError}\n                />\n              )}\n            </Stack>\n            {renderActionButtons()}\n          </StyledWidgetContainer>\n        </Fade>\n      </Modal>\n    </>\n  );\n};\n\nexport default ImageUploadWidget;\n"],"names":["StyledWidgetContainer","styled","Box","theme","display","position","top","left","transform","flexDirection","width","padding","boxSizing","height","alignItems","justifyContent","gap","spacing","borderRadius","radius","border","background","boxShadow","breakpoints","up","StyledWidgetTitle","Typography","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","ImageUploadWidget","props","open","onClose","widgetTitle","imageUrl","isCloudinaryAsset","cdnCloudName","onUpload","onUploadImageLink","onRemove","selectedImage","setSelectedImage","useState","uploading","setUploading","uploadingError","setUploadingError","imageLink","setImageLink","isDesktop","useMediaQuery","handleClose","handleUpload","async","file","error","Error","_jsxs","_jsx","FlipdishFonts","Modal","closeAfterTransition","disableEscapeKeyDown","slotProps","backdrop","timeout","slots","Backdrop","children","Fade","in","Stack","direction","flex","ImageDisplay","src","ImageDropZone","allowImageLinkUpload","onImageLinkChange","link","onImageSelect","image","Button","fdKey","onClick","size","tone","variant","disabled","endIcon","CircularProgress","sx","fullWidth"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "4.2.8",
+  "version": "4.2.10",
   "files": [
     "dist"
   ],
@@ -31,9 +31,9 @@
       "node": "./dist/themes/*.cjs.js"
     },
     "./icons/*": {
-      "types": "./dist/icons/*.index.d.ts",
-      "import": "./dist/icons/*.index.js",
-      "node": "./dist/icons/*.index.cjs.js"
+      "types": "./dist/icons/*/index.d.ts",
+      "import": "./dist/icons/*/index.js",
+      "node": "./dist/icons/*/index.cjs.js"
     }
   },
   "peerDependencies": {
@@ -97,6 +97,7 @@
     "eslint-import-resolver-typescript": "^4.2.5",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-mycustom-eslint-rules": "file:eslint/custom-rules",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "4.6.2",