@flipdish/portal-library 8.6.4 → 8.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Badge/index.cjs.js +1 -1
- package/dist/components/atoms/Badge/index.cjs.js.map +1 -1
- package/dist/components/atoms/Badge/index.d.ts +1 -1
- package/dist/components/atoms/Badge/index.js +1 -1
- package/dist/components/atoms/Badge/index.js.map +1 -1
- package/dist/components/atoms/IconContainer/index.cjs.js +1 -1
- package/dist/components/atoms/IconContainer/index.cjs.js.map +1 -1
- package/dist/components/atoms/IconContainer/index.d.ts +1 -1
- package/dist/components/atoms/IconContainer/index.js +1 -1
- package/dist/components/atoms/IconContainer/index.js.map +1 -1
- package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.cjs.js +1 -1
- package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.cjs.js.map +1 -1
- package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.d.ts +2 -1
- package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.js +1 -1
- package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.js.map +1 -1
- package/dist/components/organisms/AssetManager/hooks/usePresignedUploadAsset.cjs.js +2 -0
- package/dist/components/organisms/AssetManager/hooks/usePresignedUploadAsset.cjs.js.map +1 -0
- package/dist/components/organisms/AssetManager/hooks/usePresignedUploadAsset.d.ts +12 -0
- package/dist/components/organisms/AssetManager/hooks/usePresignedUploadAsset.js +2 -0
- package/dist/components/organisms/AssetManager/hooks/usePresignedUploadAsset.js.map +1 -0
- package/dist/components/organisms/AssetManager/index.cjs.js +1 -1
- package/dist/components/organisms/AssetManager/index.cjs.js.map +1 -1
- package/dist/components/organisms/AssetManager/index.d.ts +2 -0
- package/dist/components/organisms/AssetManager/index.js +1 -1
- package/dist/components/organisms/AssetManager/index.js.map +1 -1
- package/dist/components/organisms/AssetManager/services/asset.service.cjs.js +1 -1
- package/dist/components/organisms/AssetManager/services/asset.service.cjs.js.map +1 -1
- package/dist/components/organisms/AssetManager/services/asset.service.d.ts +45 -2
- package/dist/components/organisms/AssetManager/services/asset.service.js +1 -1
- package/dist/components/organisms/AssetManager/services/asset.service.js.map +1 -1
- package/dist/mocks/msw/handlers.cjs.js +1 -1
- package/dist/mocks/msw/handlers.cjs.js.map +1 -1
- package/dist/mocks/msw/handlers.d.ts +6 -1
- package/dist/mocks/msw/handlers.js +1 -1
- package/dist/mocks/msw/handlers.js.map +1 -1
- package/dist/themes/theme.d.ts +6 -12
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.d.ts +5 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.js +2 -0
- package/dist/themes/tokens/breakpoints/BreakpointsVisualizer.js.map +1 -0
- package/dist/themes/tokens/colours/colours-stories-utils.cjs.js +1 -1
- package/dist/themes/tokens/colours/colours-stories-utils.cjs.js.map +1 -1
- package/dist/themes/tokens/colours/colours-stories-utils.d.ts +19 -1
- package/dist/themes/tokens/colours/colours-stories-utils.js +1 -1
- package/dist/themes/tokens/colours/colours-stories-utils.js.map +1 -1
- package/dist/themes/tokens/colours/semantic.cjs.js +1 -1
- package/dist/themes/tokens/colours/semantic.cjs.js.map +1 -1
- package/dist/themes/tokens/colours/semantic.d.ts +6 -12
- package/dist/themes/tokens/colours/semantic.js +1 -1
- package/dist/themes/tokens/colours/semantic.js.map +1 -1
- package/dist/themes/tokens/radius/RadiusVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.d.ts +5 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.js +2 -0
- package/dist/themes/tokens/radius/RadiusVisualizer.js.map +1 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.d.ts +5 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.js +2 -0
- package/dist/themes/tokens/shadows/ShadowsVisualizer.js.map +1 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.cjs.js +2 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.cjs.js.map +1 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.d.ts +6 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.js +2 -0
- package/dist/themes/tokens/spacing/SpacingVisualizer.js.map +1 -0
- package/package.json +12 -12
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Chip"),a=require("@mui/material/styles");const r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Chip"),a=require("@mui/material/styles");const r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},ai:{backgroundColor:t.palette.semantic.fill["fill-ai-weak"],borderColor:t.palette.semantic.stroke["stroke-ai-weak"],color:t.palette.semantic.text["text-ai"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-ai"]}},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-primary"]}}}[e]),o=a.styled(t,{shouldForwardProp:e=>"tone"!==e})(({theme:e,tone:t})=>({...r(t,e)})),i=({className:t,fdKey:a,icon:r,label:i,size:l="medium",tone:n="neutral"})=>e.jsx(o,{className:t,clickable:!1,"data-fd":a,"data-fd-variant":"badge",icon:r,label:i,size:l,tone:n});i.displayName="Badge",exports.BADGE_TONES=["neutral","error","warning","success","ai","brand"],exports.Badge=i,exports.default=i;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', '
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'ai', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-strong'],\n },\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-error'],\n },\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-warning'],\n },\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-success'],\n },\n },\n ai: {\n backgroundColor: theme.palette.semantic.fill['fill-ai-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-ai-weak'],\n color: theme.palette.semantic.text['text-ai'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-ai'],\n },\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-primary'],\n },\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","error","warning","success","ai","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","label","size","_jsx","clickable","displayName"],"mappings":"yKAIO,MAuBDA,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,iBAGvCC,MAAO,CACLT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,cACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,gBAGvCE,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCG,QAAS,CACPX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCI,GAAI,CACFZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,gBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,kBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,WACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,aAGvCK,MAAO,CACLb,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,mBAKzBX,IAGZiB,EAAcC,EAAAA,OAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,CAEC,EAAGjB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,MAQZqB,EAAQ,EACnBC,YACAC,QACAb,OACAc,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAAAA,IAACV,EAAW,CACVM,UAAWA,EACXK,WAAW,EAAK,UACPJ,EAAK,kBACE,QAChBb,KAAMA,EACNc,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVsB,EAAMO,YAAc,4BApHO,CAAC,UAAW,QAAS,UAAW,UAAW,KAAM"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ChipProps } from '@mui/material/Chip';
|
|
2
2
|
|
|
3
3
|
/** Available visual tones for the Badge component */
|
|
4
|
-
declare const BADGE_TONES: readonly ["neutral", "error", "warning", "success", "
|
|
4
|
+
declare const BADGE_TONES: readonly ["neutral", "error", "warning", "success", "ai", "brand"];
|
|
5
5
|
type BadgeTone = (typeof BADGE_TONES)[number];
|
|
6
6
|
/** Props for the Badge component */
|
|
7
7
|
interface BadgeProps {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Chip";import{styled as a}from"@mui/material/styles";const o=["neutral","error","warning","success","
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Chip";import{styled as a}from"@mui/material/styles";const o=["neutral","error","warning","success","ai","brand"],r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},ai:{backgroundColor:t.palette.semantic.fill["fill-ai-weak"],borderColor:t.palette.semantic.stroke["stroke-ai-weak"],color:t.palette.semantic.text["text-ai"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-ai"]}},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-primary"]}}}[e]),i=a(t,{shouldForwardProp:e=>"tone"!==e})(({theme:e,tone:t})=>({...r(t,e)})),l=({className:t,fdKey:a,icon:o,label:r,size:l="medium",tone:n="neutral"})=>e(i,{className:t,clickable:!1,"data-fd":a,"data-fd-variant":"badge",icon:o,label:r,size:l,tone:n});l.displayName="Badge";export{o as BADGE_TONES,l as Badge,l as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', '
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'ai', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-strong'],\n },\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-error'],\n },\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-warning'],\n },\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-success'],\n },\n },\n ai: {\n backgroundColor: theme.palette.semantic.fill['fill-ai-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-ai-weak'],\n color: theme.palette.semantic.text['text-ai'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-ai'],\n },\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-primary'],\n },\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["BADGE_TONES","getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","error","warning","success","ai","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","label","size","_jsx","clickable","displayName"],"mappings":"wHAIO,MAAMA,EAAc,CAAC,UAAW,QAAS,UAAW,UAAW,KAAM,SAuBtEC,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,iBAGvCC,MAAO,CACLT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,cACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,gBAGvCE,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCG,QAAS,CACPX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCI,GAAI,CACFZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,gBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,kBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,WACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,aAGvCK,MAAO,CACLb,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,mBAKzBX,IAGZiB,EAAcC,EAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,CAEC,EAAGjB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,MAQZqB,EAAQ,EACnBC,YACAC,QACAb,OACAc,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAACV,EAAW,CACVM,UAAWA,EACXK,WAAW,EAAK,UACPJ,EAAK,kBACE,QAChBb,KAAMA,EACNc,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVsB,EAAMO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/styles");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var i=n(t);const s={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],ai:e=>e.palette.semantic.fill["fill-ai-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],ai:e=>e.palette.semantic.stroke["stroke-ai-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],ai:e=>e.palette.semantic.icon["icon-ai"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},l=(e,t,r)=>s.background[r][t](e),c=(e,t,r)=>s.border[r][t](e),o=(e,t)=>s.icon[t](e),u=a.styled(r,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})(({theme:e,tone:t,containerStyle:r})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:l(e,t,r),border:"stroked"===r?"1px solid":"none",borderColor:c(e,t,r),boxSizing:"border-box",color:o(e,t)})),d=i.memo(({ariaLabel:t,className:r,fdKey:a,icon:n,style:i="filled",tone:s="neutral"})=>{const l=t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0};return e.jsx(u,{className:r,containerStyle:i,"data-fd":a,tone:s,...l,children:n})});d.displayName="IconContainer",module.exports=d;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = '
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'ai' | 'brand' | 'destructive' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n /** Accessible description of the icon (for screen readers) */\n ariaLabel?: string;\n /** Additional class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Icon element to display in the container */\n icon: React.ReactNode;\n /** Visual style of the container */\n style?: IconContainerStyle;\n /** Visual tone of the container */\n tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n background: {\n filled: {\n brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.fill['fill-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n },\n stroked: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n },\n border: {\n filled: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n stroked: {\n brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.stroke['stroke-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n },\n },\n icon: {\n brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n ai: (theme: Theme) => theme.palette.semantic.icon['icon-ai'],\n neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n tone: IconContainerTones;\n containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '48px',\n height: '48px',\n borderRadius: '50%',\n backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n border: containerStyle === 'stroked' ? '1px solid' : 'none',\n borderColor: getBorderColor(theme, tone, containerStyle),\n boxSizing: 'border-box',\n color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n // Only set aria-hidden if no ariaLabel is provided\n const ariaProps = ariaLabel\n ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n : { 'aria-hidden': true };\n\n return (\n <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n {icon}\n </StyledBox>\n );\n },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","ai","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","ariaProps","role","_jsx","children","displayName"],"mappings":"gZAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,GAAKP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,gBAClDK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,GAAKP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,kBACpDH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,GAAKP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,WAClDJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAAA,OAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,CAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,MAWvBqB,EAAgBC,EAAMC,KAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,cAE7D,MAAM2B,EAAYH,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAErB,OACEC,EAAAA,IAACzB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAAU2B,EAASG,SAC9FhC,MAMTuB,EAAcU,YAAc"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
|
|
4
|
-
type IconContainerTones = '
|
|
4
|
+
type IconContainerTones = 'ai' | 'brand' | 'destructive' | 'neutral' | 'success' | 'warning';
|
|
5
5
|
type IconContainerStyle = 'filled' | 'stroked';
|
|
6
6
|
interface IconContainerProps {
|
|
7
7
|
/** Accessible description of the icon (for screen readers) */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import*as t from"react";import a from"@mui/material/Box";import{styled as r}from"@mui/material/styles";const n={background:{filled:{brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],ai:e=>e.palette.semantic.fill["fill-ai-weak"],neutral:e=>e.palette.semantic.fill["fill-weak"]},stroked:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"}},border:{filled:{brand:()=>"transparent",destructive:()=>"transparent",warning:()=>"transparent",success:()=>"transparent",ai:()=>"transparent",neutral:()=>"transparent"},stroked:{brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],ai:e=>e.palette.semantic.stroke["stroke-ai-weak"],neutral:e=>e.palette.semantic.stroke["stroke-weak"]}},icon:{brand:e=>e.palette.semantic.icon["icon-primary"],destructive:e=>e.palette.semantic.icon["icon-error"],warning:e=>e.palette.semantic.icon["icon-warning"],success:e=>e.palette.semantic.icon["icon-success"],ai:e=>e.palette.semantic.icon["icon-ai"],neutral:e=>e.palette.semantic.icon["icon-strong"]}},i=(e,t,a)=>n.background[a][t](e),s=(e,t,a)=>n.border[a][t](e),l=(e,t)=>n.icon[t](e),o=r(a,{shouldForwardProp:e=>!["tone","containerStyle"].includes(e)})(({theme:e,tone:t,containerStyle:a})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"48px",height:"48px",borderRadius:"50%",backgroundColor:i(e,t,a),border:"stroked"===a?"1px solid":"none",borderColor:s(e,t,a),boxSizing:"border-box",color:l(e,t)})),c=t.memo(({ariaLabel:t,className:a,fdKey:r,icon:n,style:i="filled",tone:s="neutral"})=>e(o,{className:a,containerStyle:i,"data-fd":r,tone:s,...t?{"aria-label":t,role:"graphics-symbol"}:{"aria-hidden":!0},children:n}));c.displayName="IconContainer";export{c as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = '
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/IconContainer/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled, type Theme } from '@mui/material/styles';\n\nexport type IconContainerTones = 'ai' | 'brand' | 'destructive' | 'neutral' | 'success' | 'warning';\nexport type IconContainerStyle = 'filled' | 'stroked';\n\nexport interface IconContainerProps {\n /** Accessible description of the icon (for screen readers) */\n ariaLabel?: string;\n /** Additional class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Icon element to display in the container */\n icon: React.ReactNode;\n /** Visual style of the container */\n style?: IconContainerStyle;\n /** Visual tone of the container */\n tone?: IconContainerTones;\n}\n\n/** Color mapping for different tones and styles */\nconst COLORS = {\n background: {\n filled: {\n brand: (theme: Theme) => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.fill['fill-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.fill['fill-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.fill['fill-weak'],\n },\n stroked: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n },\n border: {\n filled: {\n brand: () => 'transparent',\n destructive: () => 'transparent',\n warning: () => 'transparent',\n success: () => 'transparent',\n ai: () => 'transparent',\n neutral: () => 'transparent',\n },\n stroked: {\n brand: (theme: Theme) => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme) => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme) => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme) => theme.palette.semantic.stroke['stroke-success-weak'],\n ai: (theme: Theme) => theme.palette.semantic.stroke['stroke-ai-weak'],\n neutral: (theme: Theme) => theme.palette.semantic.stroke['stroke-weak'],\n },\n },\n icon: {\n brand: (theme: Theme) => theme.palette.semantic.icon['icon-primary'],\n destructive: (theme: Theme) => theme.palette.semantic.icon['icon-error'],\n warning: (theme: Theme) => theme.palette.semantic.icon['icon-warning'],\n success: (theme: Theme) => theme.palette.semantic.icon['icon-success'],\n ai: (theme: Theme) => theme.palette.semantic.icon['icon-ai'],\n neutral: (theme: Theme) => theme.palette.semantic.icon['icon-strong'],\n },\n};\n\nconst getBackgroundColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.background[style][tone](theme);\n};\n\nconst getBorderColor = (theme: Theme, tone: IconContainerTones, style: IconContainerStyle): string => {\n return COLORS.border[style][tone](theme);\n};\n\nconst getIconColor = (theme: Theme, tone: IconContainerTones): string => {\n return COLORS.icon[tone](theme);\n};\n\ninterface StyledBoxProps {\n tone: IconContainerTones;\n containerStyle: IconContainerStyle;\n}\n\nconst StyledBox = styled(Box, {\n shouldForwardProp: (prop) => !['tone', 'containerStyle'].includes(prop as string),\n})<StyledBoxProps>(({ theme, tone, containerStyle }) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '48px',\n height: '48px',\n borderRadius: '50%',\n backgroundColor: getBackgroundColor(theme, tone, containerStyle),\n border: containerStyle === 'stroked' ? '1px solid' : 'none',\n borderColor: getBorderColor(theme, tone, containerStyle),\n boxSizing: 'border-box',\n color: getIconColor(theme, tone),\n}));\n\n/**\n * IconContainer component is used to make icons appear larger and more prominent while\ngiving them a consistent shape.\n *\n * React.memo is used to optimize performance by preventing unnecessary re-renders\n * when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst IconContainer = React.memo(\n ({ ariaLabel, className, fdKey, icon, style = 'filled', tone = 'neutral' }: IconContainerProps) => {\n // Only set aria-hidden if no ariaLabel is provided\n const ariaProps = ariaLabel\n ? { 'aria-label': ariaLabel, role: 'graphics-symbol' }\n : { 'aria-hidden': true };\n\n return (\n <StyledBox className={className} containerStyle={style} data-fd={fdKey} tone={tone} {...ariaProps}>\n {icon}\n </StyledBox>\n );\n },\n);\n\nIconContainer.displayName = 'IconContainer';\n\nexport default IconContainer;\n"],"names":["COLORS","background","filled","brand","theme","palette","semantic","fill","destructive","warning","success","ai","neutral","stroked","border","stroke","icon","getBackgroundColor","tone","style","getBorderColor","getIconColor","StyledBox","styled","Box","shouldForwardProp","prop","includes","containerStyle","display","alignItems","justifyContent","width","height","borderRadius","backgroundColor","borderColor","boxSizing","color","IconContainer","React","memo","ariaLabel","className","fdKey","_jsx","role","children","displayName"],"mappings":"+IAwBA,MAAMA,EAAS,CACbC,WAAY,CACVC,OAAQ,CACNC,MAAQC,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACrDC,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,mBAC3DE,QAAUL,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDG,QAAUN,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,qBACvDI,GAAKP,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,gBAClDK,QAAUR,GAAiBA,EAAMC,QAAQC,SAASC,KAAK,cAEzDM,QAAS,CACPV,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,gBAGnBE,OAAQ,CACNZ,OAAQ,CACNC,MAAO,IAAM,cACbK,YAAa,IAAM,cACnBC,QAAS,IAAM,cACfC,QAAS,IAAM,cACfC,GAAI,IAAM,cACVC,QAAS,IAAM,eAEjBC,QAAS,CACPV,MAAQC,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACvDP,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,qBAC7DN,QAAUL,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDL,QAAUN,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,uBACzDJ,GAAKP,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,kBACpDH,QAAUR,GAAiBA,EAAMC,QAAQC,SAASS,OAAO,iBAG7DC,KAAM,CACJb,MAAQC,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACrDR,YAAcJ,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,cAC3DP,QAAUL,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDN,QAAUN,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,gBACvDL,GAAKP,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,WAClDJ,QAAUR,GAAiBA,EAAMC,QAAQC,SAASU,KAAK,iBAIrDC,EAAqB,CAACb,EAAcc,EAA0BC,IAC3DnB,EAAOC,WAAWkB,GAAOD,GAAMd,GAGlCgB,EAAiB,CAAChB,EAAcc,EAA0BC,IACvDnB,EAAOc,OAAOK,GAAOD,GAAMd,GAG9BiB,EAAe,CAACjB,EAAcc,IAC3BlB,EAAOgB,KAAKE,GAAMd,GAQrBkB,EAAYC,EAAOC,EAAK,CAC5BC,kBAAoBC,IAAU,CAAC,OAAQ,kBAAkBC,SAASD,IADlDH,CAEC,EAAGnB,QAAOc,OAAMU,qBAAgB,CACjDC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,MAAO,OACPC,OAAQ,OACRC,aAAc,MACdC,gBAAiBlB,EAAmBb,EAAOc,EAAMU,GACjDd,OAA2B,YAAnBc,EAA+B,YAAc,OACrDQ,YAAahB,EAAehB,EAAOc,EAAMU,GACzCS,UAAW,aACXC,MAAOjB,EAAajB,EAAOc,MAWvBqB,EAAgBC,EAAMC,KAC1B,EAAGC,YAAWC,YAAWC,QAAO5B,OAAMG,QAAQ,SAAUD,OAAO,aAO3D2B,EAACvB,EAAS,CAACqB,UAAWA,EAAWf,eAAgBT,YAAgByB,EAAO1B,KAAMA,KAL9DwB,EACd,CAAE,aAAcA,EAAWI,KAAM,mBACjC,CAAE,eAAe,GAG8EC,SAC9F/B,KAMTuB,EAAcS,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react"),l=require("./useUploadAsset.cjs.js");exports.useAssetUploadManager=({orgId:a,brandId:
|
|
1
|
+
"use strict";var e=require("react"),l=require("./usePresignedUploadAsset.cjs.js"),s=require("./useUploadAsset.cjs.js");exports.useAssetUploadManager=({orgId:a,brandId:r,onUploadSuccess:o,getErrorMessage:d,useNewUploadFlow:u=!1})=>{const[n,t]=e.useState([]),[c,i]=e.useState(null),p=s.useUploadAsset(),U=l.usePresignedUploadAsset(),g=u?U:p,b=e.useCallback(e=>{if(0===e.length)return;i(null);const l=e.map(e=>({file:e}));t(e=>[...e,...l])},[]),f=e.useCallback(e=>{t(l=>l.filter(l=>l.file!==e))},[]),S=e.useCallback(()=>{i(null),g.mutate({orgId:a,brandId:r,files:n.map(e=>e.file)},{onSuccess:e=>{const l=e.data||[];o&&o(l),t([])},onError:e=>{console.error("Upload failed:",e);const l=d(e);i(l)}})},[a,r,n,g,o,d]),k=e.useCallback(()=>{t([])},[]),A=e.useCallback(()=>{i(null)},[]);return{uploadedFiles:n,uploadError:c,isUploading:g.isPending,handleUpload:b,handleRemove:f,handleSave:S,clearUploadedFiles:k,clearSaveUploadError:A}};
|
|
2
2
|
//# sourceMappingURL=useAssetUploadManager.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAssetUploadManager.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n orgId: string;\n brandId?: string;\n onUploadSuccess?: (assets: Asset[]) => void;\n getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n uploadedFiles: FileUploadState[];\n uploadError: string | null;\n isUploading: boolean;\n handleUpload: (files: File[]) => void;\n handleRemove: (file: File) => void;\n handleSave: () => void;\n clearUploadedFiles: () => void;\n clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n orgId,\n brandId,\n onUploadSuccess,\n getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n const [uploadError, setUploadError] = useState<string | null>(null);\n const
|
|
1
|
+
{"version":3,"file":"useAssetUploadManager.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { usePresignedUploadAsset } from './usePresignedUploadAsset';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n orgId: string;\n brandId?: string;\n onUploadSuccess?: (assets: Asset[]) => void;\n getErrorMessage: (error: Error) => string;\n useNewUploadFlow?: boolean;\n}\n\ninterface UseAssetUploadManagerReturn {\n uploadedFiles: FileUploadState[];\n uploadError: string | null;\n isUploading: boolean;\n handleUpload: (files: File[]) => void;\n handleRemove: (file: File) => void;\n handleSave: () => void;\n clearUploadedFiles: () => void;\n clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n orgId,\n brandId,\n onUploadSuccess,\n getErrorMessage,\n useNewUploadFlow = false,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n const [uploadError, setUploadError] = useState<string | null>(null);\n const legacyMutation = useUploadAsset();\n const presignedMutation = usePresignedUploadAsset();\n const uploadMutation = useNewUploadFlow ? presignedMutation : legacyMutation;\n\n const handleUpload = useCallback((files: File[]): void => {\n if (files.length === 0) {\n return;\n }\n // Clear any upload errors when files are added\n setUploadError(null);\n // Add files with uploading state\n const newFiles: FileUploadState[] = files.map((file) => ({\n file,\n }));\n setUploadedFiles((prev) => [...prev, ...newFiles]);\n }, []);\n\n const handleRemove = useCallback((fileToRemove: File): void => {\n setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n }, []);\n\n const handleSave = useCallback((): void => {\n // Clear any previous errors\n setUploadError(null);\n\n uploadMutation.mutate(\n {\n orgId,\n brandId,\n files: uploadedFiles.map((file) => file.file),\n },\n {\n onSuccess: (response) => {\n const uploadedAssets = response.data || [];\n // Notify parent component of successful upload\n if (onUploadSuccess) {\n onUploadSuccess(uploadedAssets);\n }\n // Clear uploaded files after successful upload\n setUploadedFiles([]);\n },\n onError: (error) => {\n console.error('Upload failed:', error);\n // Display the error message\n const errorMessage = getErrorMessage(error);\n setUploadError(errorMessage);\n },\n },\n );\n }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n const clearUploadedFiles = useCallback((): void => {\n setUploadedFiles([]);\n }, []);\n\n const clearSaveUploadError = useCallback((): void => {\n setUploadError(null);\n }, []);\n\n return {\n uploadedFiles,\n uploadError,\n isUploading: uploadMutation.isPending,\n handleUpload,\n handleRemove,\n handleSave,\n clearUploadedFiles,\n clearSaveUploadError,\n };\n};\n"],"names":["orgId","brandId","onUploadSuccess","getErrorMessage","useNewUploadFlow","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","legacyMutation","useUploadAsset","presignedMutation","usePresignedUploadAsset","uploadMutation","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"qJAiCqC,EACnCA,QACAC,UACAC,kBACAC,kBACAC,oBAAmB,MAEnB,MAAOC,EAAeC,GAAoBC,EAAAA,SAA4B,KAC/DC,EAAaC,GAAkBF,EAAAA,SAAwB,MACxDG,EAAiBC,EAAAA,iBACjBC,EAAoBC,EAAAA,0BACpBC,EAAiBV,EAAmBQ,EAAoBF,EAExDK,EAAeC,cAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFT,EAAe,MAEf,MAAMU,EAA8BF,EAAMG,IAAKC,IAAI,CACjDA,UAEFf,EAAkBgB,GAAS,IAAIA,KAASH,KACvC,IAEGI,EAAeP,cAAaQ,IAChClB,EAAkBgB,GAASA,EAAKG,OAAQC,GAAcA,EAAUL,OAASG,KACxE,IAEGG,EAAaX,EAAAA,YAAY,KAE7BP,EAAe,MAEfK,EAAec,OACb,CACE5B,QACAC,UACAgB,MAAOZ,EAAce,IAAKC,GAASA,EAAKA,OAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC9B,GACFA,EAAgB6B,GAGlBzB,EAAiB,KAEnB2B,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAejC,EAAgB+B,GACrCzB,EAAe2B,OAIpB,CAACpC,EAAOC,EAASI,EAAeS,EAAgBZ,EAAiBC,IAE9DkC,EAAqBrB,EAAAA,YAAY,KACrCV,EAAiB,KAChB,IAEGgC,EAAuBtB,EAAAA,YAAY,KACvCP,EAAe,OACd,IAEH,MAAO,CACLJ,gBACAG,cACA+B,YAAazB,EAAe0B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}
|
|
@@ -6,6 +6,7 @@ interface UseAssetUploadManagerOptions {
|
|
|
6
6
|
brandId?: string;
|
|
7
7
|
onUploadSuccess?: (assets: Asset[]) => void;
|
|
8
8
|
getErrorMessage: (error: Error) => string;
|
|
9
|
+
useNewUploadFlow?: boolean;
|
|
9
10
|
}
|
|
10
11
|
interface UseAssetUploadManagerReturn {
|
|
11
12
|
uploadedFiles: FileUploadState[];
|
|
@@ -24,6 +25,6 @@ interface UseAssetUploadManagerReturn {
|
|
|
24
25
|
* @param options - Configuration options for upload management
|
|
25
26
|
* @returns Upload state and handlers
|
|
26
27
|
*/
|
|
27
|
-
declare const useAssetUploadManager: ({ orgId, brandId, onUploadSuccess, getErrorMessage, }: UseAssetUploadManagerOptions) => UseAssetUploadManagerReturn;
|
|
28
|
+
declare const useAssetUploadManager: ({ orgId, brandId, onUploadSuccess, getErrorMessage, useNewUploadFlow, }: UseAssetUploadManagerOptions) => UseAssetUploadManagerReturn;
|
|
28
29
|
|
|
29
30
|
export { useAssetUploadManager };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState as e,useCallback as
|
|
1
|
+
import{useState as e,useCallback as o}from"react";import{usePresignedUploadAsset as l}from"./usePresignedUploadAsset.js";import{useUploadAsset as r}from"./useUploadAsset.js";const a=({orgId:a,brandId:s,onUploadSuccess:d,getErrorMessage:n,useNewUploadFlow:t=!1})=>{const[i,p]=e([]),[u,c]=e(null),f=r(),m=l(),U=t?m:f,g=o(e=>{if(0===e.length)return;c(null);const o=e.map(e=>({file:e}));p(e=>[...e,...o])},[]),h=o(e=>{p(o=>o.filter(o=>o.file!==e))},[]),E=o(()=>{c(null),U.mutate({orgId:a,brandId:s,files:i.map(e=>e.file)},{onSuccess:e=>{const o=e.data||[];d&&d(o),p([])},onError:e=>{console.error("Upload failed:",e);const o=n(e);c(o)}})},[a,s,i,U,d,n]),I=o(()=>{p([])},[]),S=o(()=>{c(null)},[]);return{uploadedFiles:i,uploadError:u,isUploading:U.isPending,handleUpload:g,handleRemove:h,handleSave:E,clearUploadedFiles:I,clearSaveUploadError:S}};export{a as useAssetUploadManager};
|
|
2
2
|
//# sourceMappingURL=useAssetUploadManager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAssetUploadManager.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n orgId: string;\n brandId?: string;\n onUploadSuccess?: (assets: Asset[]) => void;\n getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n uploadedFiles: FileUploadState[];\n uploadError: string | null;\n isUploading: boolean;\n handleUpload: (files: File[]) => void;\n handleRemove: (file: File) => void;\n handleSave: () => void;\n clearUploadedFiles: () => void;\n clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n orgId,\n brandId,\n onUploadSuccess,\n getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n const [uploadError, setUploadError] = useState<string | null>(null);\n const
|
|
1
|
+
{"version":3,"file":"useAssetUploadManager.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { usePresignedUploadAsset } from './usePresignedUploadAsset';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n orgId: string;\n brandId?: string;\n onUploadSuccess?: (assets: Asset[]) => void;\n getErrorMessage: (error: Error) => string;\n useNewUploadFlow?: boolean;\n}\n\ninterface UseAssetUploadManagerReturn {\n uploadedFiles: FileUploadState[];\n uploadError: string | null;\n isUploading: boolean;\n handleUpload: (files: File[]) => void;\n handleRemove: (file: File) => void;\n handleSave: () => void;\n clearUploadedFiles: () => void;\n clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n orgId,\n brandId,\n onUploadSuccess,\n getErrorMessage,\n useNewUploadFlow = false,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n const [uploadError, setUploadError] = useState<string | null>(null);\n const legacyMutation = useUploadAsset();\n const presignedMutation = usePresignedUploadAsset();\n const uploadMutation = useNewUploadFlow ? presignedMutation : legacyMutation;\n\n const handleUpload = useCallback((files: File[]): void => {\n if (files.length === 0) {\n return;\n }\n // Clear any upload errors when files are added\n setUploadError(null);\n // Add files with uploading state\n const newFiles: FileUploadState[] = files.map((file) => ({\n file,\n }));\n setUploadedFiles((prev) => [...prev, ...newFiles]);\n }, []);\n\n const handleRemove = useCallback((fileToRemove: File): void => {\n setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n }, []);\n\n const handleSave = useCallback((): void => {\n // Clear any previous errors\n setUploadError(null);\n\n uploadMutation.mutate(\n {\n orgId,\n brandId,\n files: uploadedFiles.map((file) => file.file),\n },\n {\n onSuccess: (response) => {\n const uploadedAssets = response.data || [];\n // Notify parent component of successful upload\n if (onUploadSuccess) {\n onUploadSuccess(uploadedAssets);\n }\n // Clear uploaded files after successful upload\n setUploadedFiles([]);\n },\n onError: (error) => {\n console.error('Upload failed:', error);\n // Display the error message\n const errorMessage = getErrorMessage(error);\n setUploadError(errorMessage);\n },\n },\n );\n }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n const clearUploadedFiles = useCallback((): void => {\n setUploadedFiles([]);\n }, []);\n\n const clearSaveUploadError = useCallback((): void => {\n setUploadError(null);\n }, []);\n\n return {\n uploadedFiles,\n uploadError,\n isUploading: uploadMutation.isPending,\n handleUpload,\n handleRemove,\n handleSave,\n clearUploadedFiles,\n clearSaveUploadError,\n };\n};\n"],"names":["useAssetUploadManager","orgId","brandId","onUploadSuccess","getErrorMessage","useNewUploadFlow","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","legacyMutation","useUploadAsset","presignedMutation","usePresignedUploadAsset","uploadMutation","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"8KAiCO,MAAMA,EAAwB,EACnCC,QACAC,UACAC,kBACAC,kBACAC,oBAAmB,MAEnB,MAAOC,EAAeC,GAAoBC,EAA4B,KAC/DC,EAAaC,GAAkBF,EAAwB,MACxDG,EAAiBC,IACjBC,EAAoBC,IACpBC,EAAiBV,EAAmBQ,EAAoBF,EAExDK,EAAeC,EAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFT,EAAe,MAEf,MAAMU,EAA8BF,EAAMG,IAAKC,IAAI,CACjDA,UAEFf,EAAkBgB,GAAS,IAAIA,KAASH,KACvC,IAEGI,EAAeP,EAAaQ,IAChClB,EAAkBgB,GAASA,EAAKG,OAAQC,GAAcA,EAAUL,OAASG,KACxE,IAEGG,EAAaX,EAAY,KAE7BP,EAAe,MAEfK,EAAec,OACb,CACE5B,QACAC,UACAgB,MAAOZ,EAAce,IAAKC,GAASA,EAAKA,OAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC9B,GACFA,EAAgB6B,GAGlBzB,EAAiB,KAEnB2B,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAejC,EAAgB+B,GACrCzB,EAAe2B,OAIpB,CAACpC,EAAOC,EAASI,EAAeS,EAAgBZ,EAAiBC,IAE9DkC,EAAqBrB,EAAY,KACrCV,EAAiB,KAChB,IAEGgC,EAAuBtB,EAAY,KACvCP,EAAe,OACd,IAEH,MAAO,CACLJ,gBACAG,cACA+B,YAAazB,EAAe0B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var s=require("@tanstack/react-query"),e=require("../assets.queryKeys.cjs.js"),r=require("../services/asset.service.cjs.js");exports.usePresignedUploadAsset=()=>{const t=s.useQueryClient();return s.useMutation({mutationFn:r.uploadAssetViaPresignedUrl,onSuccess:(s,r)=>{const a=e.assetsKeys.list({orgId:r.orgId,brandId:r.brandId}),u=s.data||[];t.setQueryData(a,s=>({data:[...u,...s?.data||[]]}))}})};
|
|
2
|
+
//# sourceMappingURL=usePresignedUploadAsset.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePresignedUploadAsset.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/usePresignedUploadAsset.ts"],"sourcesContent":["import { useMutation, type UseMutationResult, useQueryClient } from '@tanstack/react-query';\n\nimport { assetsKeys } from '../assets.queryKeys';\nimport { type UploadAssetParams, uploadAssetViaPresignedUrl } from '../services/asset.service';\nimport { type ListAssetsResponse, type UploadAssetResponse } from '../types/assets.type';\n\n/**\n * Hook to upload assets via the presigned S3 URL flow (request-upload → S3 PUT → confirm-upload).\n * Supports files up to 20 MB. Automatically updates the assets query cache after successful upload.\n * @returns Mutation result with mutate function, loading state, and error state\n */\nexport const usePresignedUploadAsset = (): UseMutationResult<\n UploadAssetResponse,\n Error,\n UploadAssetParams\n> => {\n const queryClient = useQueryClient();\n\n return useMutation<UploadAssetResponse, Error, UploadAssetParams>({\n mutationFn: uploadAssetViaPresignedUrl,\n onSuccess: (createdAssetsResponse, variables) => {\n const queryKey = assetsKeys.list({ orgId: variables.orgId, brandId: variables.brandId });\n const newAssets = createdAssetsResponse.data || [];\n\n queryClient.setQueryData<ListAssetsResponse>(queryKey, (prev) => ({\n data: [...newAssets, ...(prev?.data || [])],\n }));\n },\n });\n};\n"],"names":["queryClient","useQueryClient","useMutation","mutationFn","uploadAssetViaPresignedUrl","onSuccess","createdAssetsResponse","variables","queryKey","assetsKeys","list","orgId","brandId","newAssets","data","setQueryData","prev"],"mappings":"0KAWuC,KAKrC,MAAMA,EAAcC,EAAAA,iBAEpB,OAAOC,cAA2D,CAChEC,WAAYC,EAAAA,2BACZC,UAAW,CAACC,EAAuBC,KACjC,MAAMC,EAAWC,EAAAA,WAAWC,KAAK,CAAEC,MAAOJ,EAAUI,MAAOC,QAASL,EAAUK,UACxEC,EAAYP,EAAsBQ,MAAQ,GAEhDd,EAAYe,aAAiCP,EAAWQ,IAAI,CAC1DF,KAAM,IAAID,KAAeG,GAAMF,MAAQ"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { UseMutationResult } from '@tanstack/react-query';
|
|
2
|
+
import { UploadAssetParams } from '../services/asset.service.js';
|
|
3
|
+
import { UploadAssetResponse } from '@flipdish/asset-management';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Hook to upload assets via the presigned S3 URL flow (request-upload → S3 PUT → confirm-upload).
|
|
7
|
+
* Supports files up to 20 MB. Automatically updates the assets query cache after successful upload.
|
|
8
|
+
* @returns Mutation result with mutate function, loading state, and error state
|
|
9
|
+
*/
|
|
10
|
+
declare const usePresignedUploadAsset: () => UseMutationResult<UploadAssetResponse, Error, UploadAssetParams>;
|
|
11
|
+
|
|
12
|
+
export { usePresignedUploadAsset };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useQueryClient as t,useMutation as r}from"@tanstack/react-query";import{assetsKeys as s}from"../assets.queryKeys.js";import{uploadAssetViaPresignedUrl as a}from"../services/asset.service.js";const e=()=>{const e=t();return r({mutationFn:a,onSuccess:(t,r)=>{const a=s.list({orgId:r.orgId,brandId:r.brandId}),o=t.data||[];e.setQueryData(a,t=>({data:[...o,...t?.data||[]]}))}})};export{e as usePresignedUploadAsset};
|
|
2
|
+
//# sourceMappingURL=usePresignedUploadAsset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePresignedUploadAsset.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/usePresignedUploadAsset.ts"],"sourcesContent":["import { useMutation, type UseMutationResult, useQueryClient } from '@tanstack/react-query';\n\nimport { assetsKeys } from '../assets.queryKeys';\nimport { type UploadAssetParams, uploadAssetViaPresignedUrl } from '../services/asset.service';\nimport { type ListAssetsResponse, type UploadAssetResponse } from '../types/assets.type';\n\n/**\n * Hook to upload assets via the presigned S3 URL flow (request-upload → S3 PUT → confirm-upload).\n * Supports files up to 20 MB. Automatically updates the assets query cache after successful upload.\n * @returns Mutation result with mutate function, loading state, and error state\n */\nexport const usePresignedUploadAsset = (): UseMutationResult<\n UploadAssetResponse,\n Error,\n UploadAssetParams\n> => {\n const queryClient = useQueryClient();\n\n return useMutation<UploadAssetResponse, Error, UploadAssetParams>({\n mutationFn: uploadAssetViaPresignedUrl,\n onSuccess: (createdAssetsResponse, variables) => {\n const queryKey = assetsKeys.list({ orgId: variables.orgId, brandId: variables.brandId });\n const newAssets = createdAssetsResponse.data || [];\n\n queryClient.setQueryData<ListAssetsResponse>(queryKey, (prev) => ({\n data: [...newAssets, ...(prev?.data || [])],\n }));\n },\n });\n};\n"],"names":["usePresignedUploadAsset","queryClient","useQueryClient","useMutation","mutationFn","uploadAssetViaPresignedUrl","onSuccess","createdAssetsResponse","variables","queryKey","assetsKeys","list","orgId","brandId","newAssets","data","setQueryData","prev"],"mappings":"sMAWO,MAAMA,EAA0B,KAKrC,MAAMC,EAAcC,IAEpB,OAAOC,EAA2D,CAChEC,WAAYC,EACZC,UAAW,CAACC,EAAuBC,KACjC,MAAMC,EAAWC,EAAWC,KAAK,CAAEC,MAAOJ,EAAUI,MAAOC,QAASL,EAAUK,UACxEC,EAAYP,EAAsBQ,MAAQ,GAEhDd,EAAYe,aAAiCP,EAAWQ,IAAI,CAC1DF,KAAM,IAAID,KAAeG,GAAMF,MAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),a=require("react"),s=require("@mui/material/styles"),r=require("@mui/material/Box"),l=require("../../atoms/Tab/index.cjs.js"),i=require("../../molecules/Modal/index.cjs.js"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),a=require("react"),s=require("@mui/material/styles"),r=require("@mui/material/Box"),l=require("../../atoms/Tab/index.cjs.js"),i=require("../../molecules/Modal/index.cjs.js"),o=require("../../molecules/Tabs/index.cjs.js"),t=require("../../../providers/TranslationProvider.cjs.js"),n=require("@tanstack/react-query"),d=require("./hooks/useAssetSelection.cjs.js"),c=require("./hooks/useAssetUploadManager.cjs.js"),u=require("./hooks/useGetAssets.cjs.js"),p=require("./LibraryTabContent/index.cjs.js"),g=require("./UploadTabContent/index.cjs.js");const m=s.styled(r)(({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)})),j=new n.QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),b=({open:s,onClose:r,onSelect:n,orgId:j,brandId:b,maxSelect:y=1,useNewUploadFlow:h=!1})=>{const[x,v]=a.useState("library"),{translate:q}=t.useTranslation(),{data:C,isLoading:S,error:U}=u.useGetAssets(j,s,b),{selectedAssetsMap:A,handleAssetClick:f,clearSelection:k,addAssetsToSelection:T}=d.useAssetSelection({maxSelect:y}),{uploadedFiles:w,uploadError:_,isUploading:F,handleUpload:I,handleRemove:L,handleSave:M,clearUploadedFiles:E,clearSaveUploadError:R}=c.useAssetUploadManager({orgId:j,brandId:b,useNewUploadFlow:h,onUploadSuccess:e=>{T(e),v("library")},getErrorMessage:e=>e.message||q("Failed_to_upload_assets_try_again")});a.useEffect(()=>{s||(k(),E(),R())},[s,k,E,R]);const B=a.useCallback(()=>{k(),r()},[r,k]),z=a.useCallback(()=>{if(0===A.size)return void r();const e=Array.from(A.values());n&&e.length>0&&n(e),k(),r()},[n,A,r,k]),G=a.useMemo(()=>{const e={label:q("Cancel"),onClick:B,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:q("Select"),onClick:z,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:q("Save"),onClick:M,loading:F,variant:"primary",id:"asset-manager-upload"}]};return a[x]??a.library},[x,F,B,z,M,q]);return e.jsxs(i,{actions:G,onClose:B,open:s,size:"large",title:q("library"===x?"Select_Images":"Upload_Images"),children:[e.jsxs(o,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{v(a),E()},value:x,children:[e.jsx(l,{label:q("Upload"),value:"upload"}),e.jsx(l,{label:q("Library"),value:"library"})]}),e.jsx(m,{children:"library"===x?e.jsx(p,{assets:C?.data,error:U,isLoading:S,onAssetClick:f,selectedAssets:A}):e.jsx(g,{error:_,files:w,onRemove:L,onUpload:I})})]})};module.exports=a=>e.jsx(n.QueryClientProvider,{client:j,children:e.jsx(b,{...a})});
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAssetSelection } from './hooks/useAssetSelection';\nimport { useAssetUploadManager } from './hooks/useAssetUploadManager';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types/assets.type';\nimport UploadAssetContent from './UploadTabContent';\n/**\n * Scrollable container for the tab content.\n * Allows the asset list to scroll while keeping the modal title, tabs, and actions visible.\n * Uses fixed height to prevent modal resizing when switching tabs.\n */\nconst StyledScrollableContent = styled(Box)(({ theme }) => ({\n height: 'calc(70vh - 200px)', // Fixed height for consistent modal size across tabs\n overflowY: 'auto',\n marginTop: theme.spacing(2),\n marginRight: theme.spacing(-2), // Extend to edge for scrollbar\n marginLeft: theme.spacing(-1), // Allow space for shadows on left\n marginBottom: theme.spacing(-1), // Allow space for shadows on bottom\n paddingRight: theme.spacing(2), // Compensate for negative margin\n paddingLeft: theme.spacing(1), // Compensate for negative margin\n paddingBottom: theme.spacing(1), // Compensate for negative margin\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes with configurable limits.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n /** Whether the asset manager modal is open */\n open: boolean;\n /** Callback function when the modal is closed or cancelled */\n onClose: () => void;\n /** Callback function when assets are selected */\n onSelect?: (selectedAssets: Asset[]) => void;\n /**\n * Organization ID for fetching assets\n */\n orgId: string;\n /** Brand ID for fetching assets */\n brandId?: string;\n /** Maximum number of assets that can be selected. Defaults to 1 */\n maxSelect?: number;\n}\n\n// Create a QueryClient instance for the AssetManager component\n// This allows the component to be used without requiring clients to wrap it in QueryClientProvider\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n refetchOnWindowFocus: false,\n retry: 2,\n },\n },\n});\n\n/**\n * Inner component that contains the AssetManager logic.\n * Must be rendered inside QueryClientProvider to use React Query hooks.\n */\nconst AssetManagerContent: React.FC<AssetManagerProps> = ({\n open,\n onClose,\n onSelect,\n orgId,\n brandId,\n maxSelect = 1,\n}) => {\n const [selectedTab, setSelectedTab] = useState<string>('library');\n const { translate } = useTranslation();\n\n // Fetch assets at the parent level to enable future reuse across tabs\n const {\n data: assetResponse,\n isLoading: isLoadingAssets,\n error: assetsError,\n } = useGetAssets(orgId, open, brandId);\n\n // Asset selection hook - manages selected assets from library\n const { selectedAssetsMap, handleAssetClick, clearSelection, addAssetsToSelection } = useAssetSelection({\n maxSelect,\n });\n\n // Asset upload hook - manages file uploads and upload state\n const {\n uploadedFiles,\n uploadError,\n isUploading,\n handleUpload,\n handleRemove,\n handleSave,\n clearUploadedFiles,\n clearSaveUploadError,\n } = useAssetUploadManager({\n orgId,\n brandId,\n onUploadSuccess: (uploadedAssets) => {\n // Add uploaded assets to selection and switch to library tab\n addAssetsToSelection(uploadedAssets);\n setSelectedTab('library');\n },\n getErrorMessage: () => translate('Failed_to_upload_assets_try_again'),\n });\n\n // Reset state when modal opens/closes\n useEffect(() => {\n if (!open) {\n clearSelection();\n clearUploadedFiles();\n clearSaveUploadError();\n }\n }, [open, clearSelection, clearUploadedFiles, clearSaveUploadError]);\n\n const handleCancel = useCallback((): void => {\n clearSelection();\n onClose();\n }, [onClose, clearSelection]);\n\n const handleSelectAssets = useCallback((): void => {\n if (selectedAssetsMap.size === 0) {\n onClose();\n return;\n }\n const selectedAssets = Array.from(selectedAssetsMap.values());\n if (onSelect && selectedAssets.length > 0) {\n onSelect(selectedAssets);\n }\n clearSelection();\n onClose();\n }, [onSelect, selectedAssetsMap, onClose, clearSelection]);\n\n const getTitle = (): string => {\n switch (selectedTab) {\n case 'library':\n return translate('Select_Images');\n default:\n return translate('Upload_Images');\n }\n };\n\n // Tab-specific action button configurations\n const actionButtons = useMemo<ModalAction[]>(() => {\n // Common cancel button configuration\n const cancelButton: ModalAction = {\n label: translate('Cancel'),\n onClick: handleCancel,\n variant: 'secondary',\n tone: 'neutral',\n id: 'asset-manager-cancel',\n };\n\n const tabActions: Record<string, ModalAction[]> = {\n library: [\n cancelButton,\n {\n label: translate('Select'),\n onClick: handleSelectAssets,\n variant: 'primary',\n id: 'asset-manager-select',\n },\n ],\n upload: [\n cancelButton,\n {\n label: translate('Save'),\n onClick: handleSave,\n loading: isUploading,\n variant: 'primary',\n id: 'asset-manager-upload',\n },\n ],\n };\n\n return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n }, [selectedTab, isUploading, handleCancel, handleSelectAssets, handleSave, translate]);\n\n return (\n <Modal actions={actionButtons} onClose={handleCancel} open={open} size=\"large\" title={getTitle()}>\n <Tabs\n fdKey=\"asset-manager-tabs\"\n onChange={(_, value: string) => {\n setSelectedTab(value);\n clearUploadedFiles();\n }}\n value={selectedTab}\n >\n <Tab label={translate('Upload')} value=\"upload\" />\n <Tab label={translate('Library')} value=\"library\" />\n </Tabs>\n <StyledScrollableContent>\n {selectedTab === 'library' ? (\n <LibraryTabContent\n assets={assetResponse?.data}\n error={assetsError}\n isLoading={isLoadingAssets}\n onAssetClick={handleAssetClick}\n selectedAssets={selectedAssetsMap}\n />\n ) : (\n <UploadAssetContent\n error={uploadError}\n files={uploadedFiles}\n onRemove={handleRemove}\n onUpload={handleUpload}\n />\n )}\n </StyledScrollableContent>\n </Modal>\n );\n};\n\n/**\n * AssetManager component used to select assets from the library or upload new assets.\n * Can manage assets at a organization or brand level.\n *\n * @example\n * ```tsx\n * <AssetManager\n * open={isOpen}\n * onClose={() => setIsOpen(false)}\n * onSelect={(assets) => console.log(assets)}\n * orgId=\"org123\"\n * brandId=\"brand456\"\n * maxSelect={3}\n * />\n * ```\n */\nconst AssetManager: React.FC<AssetManagerProps> = (props) => {\n return (\n <QueryClientProvider client={queryClient}>\n <AssetManagerContent {...props} />\n </QueryClientProvider>\n );\n};\n\nexport type { Asset, AssetMetadata, AssetMetadataDimensions, AssetType } from './types/assets.type';\nexport default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","marginLeft","marginBottom","paddingRight","paddingLeft","paddingBottom","queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","retry","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","selectedTab","setSelectedTab","useState","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","selectedAssetsMap","handleAssetClick","clearSelection","addAssetsToSelection","useAssetSelection","uploadedFiles","uploadError","isUploading","handleUpload","handleRemove","handleSave","clearUploadedFiles","clearSaveUploadError","useAssetUploadManager","onUploadSuccess","uploadedAssets","getErrorMessage","useEffect","handleCancel","useCallback","handleSelectAssets","size","selectedAssets","Array","from","values","length","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","id","tabActions","library","upload","loading","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","files","onRemove","onUpload","props","QueryClientProvider","client"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Tab from '@fd/components/atoms/Tab';\nimport Modal, { type ModalAction } from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAssetSelection } from './hooks/useAssetSelection';\nimport { useAssetUploadManager } from './hooks/useAssetUploadManager';\nimport { useGetAssets } from './hooks/useGetAssets';\nimport LibraryTabContent from './LibraryTabContent';\nimport type { Asset } from './types/assets.type';\nimport UploadAssetContent from './UploadTabContent';\n/**\n * Scrollable container for the tab content.\n * Allows the asset list to scroll while keeping the modal title, tabs, and actions visible.\n * Uses fixed height to prevent modal resizing when switching tabs.\n */\nconst StyledScrollableContent = styled(Box)(({ theme }) => ({\n height: 'calc(70vh - 200px)', // Fixed height for consistent modal size across tabs\n overflowY: 'auto',\n marginTop: theme.spacing(2),\n marginRight: theme.spacing(-2), // Extend to edge for scrollbar\n marginLeft: theme.spacing(-1), // Allow space for shadows on left\n marginBottom: theme.spacing(-1), // Allow space for shadows on bottom\n paddingRight: theme.spacing(2), // Compensate for negative margin\n paddingLeft: theme.spacing(1), // Compensate for negative margin\n paddingBottom: theme.spacing(1), // Compensate for negative margin\n}));\n\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes with configurable limits.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n /** Whether the asset manager modal is open */\n open: boolean;\n /** Callback function when the modal is closed or cancelled */\n onClose: () => void;\n /** Callback function when assets are selected */\n onSelect?: (selectedAssets: Asset[]) => void;\n /**\n * Organization ID for fetching assets\n */\n orgId: string;\n /** Brand ID for fetching assets */\n brandId?: string;\n /** Maximum number of assets that can be selected. Defaults to 1 */\n maxSelect?: number;\n /** When true, uploads via presigned S3 URLs (supports files up to 20 MB). Defaults to false */\n useNewUploadFlow?: boolean;\n}\n\n// Create a QueryClient instance for the AssetManager component\n// This allows the component to be used without requiring clients to wrap it in QueryClientProvider\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n refetchOnWindowFocus: false,\n retry: 2,\n },\n },\n});\n\n/**\n * Inner component that contains the AssetManager logic.\n * Must be rendered inside QueryClientProvider to use React Query hooks.\n */\nconst AssetManagerContent: React.FC<AssetManagerProps> = ({\n open,\n onClose,\n onSelect,\n orgId,\n brandId,\n maxSelect = 1,\n useNewUploadFlow = false,\n}) => {\n const [selectedTab, setSelectedTab] = useState<string>('library');\n const { translate } = useTranslation();\n\n // Fetch assets at the parent level to enable future reuse across tabs\n const {\n data: assetResponse,\n isLoading: isLoadingAssets,\n error: assetsError,\n } = useGetAssets(orgId, open, brandId);\n\n // Asset selection hook - manages selected assets from library\n const { selectedAssetsMap, handleAssetClick, clearSelection, addAssetsToSelection } = useAssetSelection({\n maxSelect,\n });\n\n // Asset upload hook - manages file uploads and upload state\n const {\n uploadedFiles,\n uploadError,\n isUploading,\n handleUpload,\n handleRemove,\n handleSave,\n clearUploadedFiles,\n clearSaveUploadError,\n } = useAssetUploadManager({\n orgId,\n brandId,\n useNewUploadFlow,\n onUploadSuccess: (uploadedAssets) => {\n // Add uploaded assets to selection and switch to library tab\n addAssetsToSelection(uploadedAssets);\n setSelectedTab('library');\n },\n getErrorMessage: (error: Error) => error.message || translate('Failed_to_upload_assets_try_again'),\n });\n\n // Reset state when modal opens/closes\n useEffect(() => {\n if (!open) {\n clearSelection();\n clearUploadedFiles();\n clearSaveUploadError();\n }\n }, [open, clearSelection, clearUploadedFiles, clearSaveUploadError]);\n\n const handleCancel = useCallback((): void => {\n clearSelection();\n onClose();\n }, [onClose, clearSelection]);\n\n const handleSelectAssets = useCallback((): void => {\n if (selectedAssetsMap.size === 0) {\n onClose();\n return;\n }\n const selectedAssets = Array.from(selectedAssetsMap.values());\n if (onSelect && selectedAssets.length > 0) {\n onSelect(selectedAssets);\n }\n clearSelection();\n onClose();\n }, [onSelect, selectedAssetsMap, onClose, clearSelection]);\n\n const getTitle = (): string => {\n switch (selectedTab) {\n case 'library':\n return translate('Select_Images');\n default:\n return translate('Upload_Images');\n }\n };\n\n // Tab-specific action button configurations\n const actionButtons = useMemo<ModalAction[]>(() => {\n // Common cancel button configuration\n const cancelButton: ModalAction = {\n label: translate('Cancel'),\n onClick: handleCancel,\n variant: 'secondary',\n tone: 'neutral',\n id: 'asset-manager-cancel',\n };\n\n const tabActions: Record<string, ModalAction[]> = {\n library: [\n cancelButton,\n {\n label: translate('Select'),\n onClick: handleSelectAssets,\n variant: 'primary',\n id: 'asset-manager-select',\n },\n ],\n upload: [\n cancelButton,\n {\n label: translate('Save'),\n onClick: handleSave,\n loading: isUploading,\n variant: 'primary',\n id: 'asset-manager-upload',\n },\n ],\n };\n\n return tabActions[selectedTab] ?? (tabActions['library'] as ModalAction[]);\n }, [selectedTab, isUploading, handleCancel, handleSelectAssets, handleSave, translate]);\n\n return (\n <Modal actions={actionButtons} onClose={handleCancel} open={open} size=\"large\" title={getTitle()}>\n <Tabs\n fdKey=\"asset-manager-tabs\"\n onChange={(_, value: string) => {\n setSelectedTab(value);\n clearUploadedFiles();\n }}\n value={selectedTab}\n >\n <Tab label={translate('Upload')} value=\"upload\" />\n <Tab label={translate('Library')} value=\"library\" />\n </Tabs>\n <StyledScrollableContent>\n {selectedTab === 'library' ? (\n <LibraryTabContent\n assets={assetResponse?.data}\n error={assetsError}\n isLoading={isLoadingAssets}\n onAssetClick={handleAssetClick}\n selectedAssets={selectedAssetsMap}\n />\n ) : (\n <UploadAssetContent\n error={uploadError}\n files={uploadedFiles}\n onRemove={handleRemove}\n onUpload={handleUpload}\n />\n )}\n </StyledScrollableContent>\n </Modal>\n );\n};\n\n/**\n * AssetManager component used to select assets from the library or upload new assets.\n * Can manage assets at a organization or brand level.\n *\n * @example\n * ```tsx\n * <AssetManager\n * open={isOpen}\n * onClose={() => setIsOpen(false)}\n * onSelect={(assets) => console.log(assets)}\n * orgId=\"org123\"\n * brandId=\"brand456\"\n * maxSelect={3}\n * />\n * ```\n */\nconst AssetManager: React.FC<AssetManagerProps> = (props) => {\n return (\n <QueryClientProvider client={queryClient}>\n <AssetManagerContent {...props} />\n </QueryClientProvider>\n );\n};\n\nexport type { Asset, AssetMetadata, AssetMetadataDimensions, AssetType } from './types/assets.type';\nexport default AssetManager;\n"],"names":["StyledScrollableContent","styled","Box","theme","height","overflowY","marginTop","spacing","marginRight","marginLeft","marginBottom","paddingRight","paddingLeft","paddingBottom","queryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","retry","AssetManagerContent","open","onClose","onSelect","orgId","brandId","maxSelect","useNewUploadFlow","selectedTab","setSelectedTab","useState","translate","useTranslation","data","assetResponse","isLoading","isLoadingAssets","error","assetsError","useGetAssets","selectedAssetsMap","handleAssetClick","clearSelection","addAssetsToSelection","useAssetSelection","uploadedFiles","uploadError","isUploading","handleUpload","handleRemove","handleSave","clearUploadedFiles","clearSaveUploadError","useAssetUploadManager","onUploadSuccess","uploadedAssets","getErrorMessage","message","useEffect","handleCancel","useCallback","handleSelectAssets","size","selectedAssets","Array","from","values","length","actionButtons","useMemo","cancelButton","label","onClick","variant","tone","id","tabActions","library","upload","loading","_jsxs","Modal","actions","title","Tabs","fdKey","onChange","_","value","_jsx","Tab","children","LibraryTabContent","assets","onAssetClick","UploadAssetContent","files","onRemove","onUpload","props","QueryClientProvider","client"],"mappings":"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"}
|
|
@@ -27,6 +27,8 @@ interface AssetManagerProps {
|
|
|
27
27
|
brandId?: string;
|
|
28
28
|
/** Maximum number of assets that can be selected. Defaults to 1 */
|
|
29
29
|
maxSelect?: number;
|
|
30
|
+
/** When true, uploads via presigned S3 URLs (supports files up to 20 MB). Defaults to false */
|
|
31
|
+
useNewUploadFlow?: boolean;
|
|
30
32
|
}
|
|
31
33
|
/**
|
|
32
34
|
* AssetManager component used to select assets from the library or upload new assets.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as r,useEffect as o,useCallback as s,useMemo as t}from"react";import{styled as
|
|
1
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as r,useEffect as o,useCallback as s,useMemo as t}from"react";import{styled as l}from"@mui/material/styles";import i from"@mui/material/Box";import n from"../../atoms/Tab/index.js";import d from"../../molecules/Modal/index.js";import m from"../../molecules/Tabs/index.js";import{useTranslation as c}from"../../../providers/TranslationProvider.js";import{QueryClient as p,QueryClientProvider as g}from"@tanstack/react-query";import{useAssetSelection as u}from"./hooks/useAssetSelection.js";import{useAssetUploadManager as f}from"./hooks/useAssetUploadManager.js";import{useGetAssets as b}from"./hooks/useGetAssets.js";import h from"./LibraryTabContent/index.js";import y from"./UploadTabContent/index.js";const v=l(i)(({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)})),S=new p({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),U=({open:l,onClose:i,onSelect:p,orgId:g,brandId:S,maxSelect:U=1,useNewUploadFlow:x=!1})=>{const[C,j]=r("library"),{translate:k}=c(),{data:A,isLoading:w,error:T}=b(g,l,S),{selectedAssetsMap:_,handleAssetClick:F,clearSelection:I,addAssetsToSelection:L}=u({maxSelect:U}),{uploadedFiles:M,uploadError:R,isUploading:B,handleUpload:E,handleRemove:q,handleSave:z,clearUploadedFiles:N,clearSaveUploadError:O}=f({orgId:g,brandId:S,useNewUploadFlow:x,onUploadSuccess:e=>{L(e),j("library")},getErrorMessage:e=>e.message||k("Failed_to_upload_assets_try_again")});o(()=>{l||(I(),N(),O())},[l,I,N,O]);const G=s(()=>{I(),i()},[i,I]),K=s(()=>{if(0===_.size)return void i();const e=Array.from(_.values());p&&e.length>0&&p(e),I(),i()},[p,_,i,I]),P=t(()=>{const e={label:k("Cancel"),onClick:G,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:k("Select"),onClick:K,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:k("Save"),onClick:z,loading:B,variant:"primary",id:"asset-manager-upload"}]};return a[C]??a.library},[C,B,G,K,z,k]);return a(d,{actions:P,onClose:G,open:l,size:"large",title:k("library"===C?"Select_Images":"Upload_Images"),children:[a(m,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{j(a),N()},value:C,children:[e(n,{label:k("Upload"),value:"upload"}),e(n,{label:k("Library"),value:"library"})]}),e(v,{children:"library"===C?e(h,{assets:A?.data,error:T,isLoading:w,onAssetClick:F,selectedAssets:_}):e(y,{error:R,files:M,onRemove:q,onUpload:E})})]})},x=a=>e(g,{client:S,children:e(U,{...a})});export{x as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|