@frontify/guideline-blocks-settings 0.32.0 → 0.32.2

package/src/helpers/mapColorPalettes.spec.ts

@@ -2,6 +2,7 @@
 
 import { describe, expect, it } from 'vitest';
 import { mapAppBridgeColorPalettesToFonduePalettes } from './mapColorPalettes';
+import { ColorDummy } from '@frontify/app-bridge';
 
 describe('mapAppBridgeColorPalettesToFonduePalettes', () => {
     it('should map app bridge color palette to fondue palette', () => {
@@ -10,107 +11,7 @@ describe('mapAppBridgeColorPalettesToFonduePalettes', () => {
                 id: 19,
                 name: 'Awesome color palette',
                 description: 'This is an awesome color palette',
-                colors: [
-                    {
-                        id: 6,
-                        name: 'Tarawera',
-                        sort: 1,
-                        nameCss: 'tarawera',
-                        hex: '0b486b',
-                        red: 11,
-                        green: 72,
-                        blue: 107,
-                        alpha: 255,
-                        hue: 202,
-                        saturation: 81,
-                        lightness: 23,
-                        c: 90,
-                        m: 33,
-                        y: 0,
-                        k: 58,
-                        pantone: null,
-                        ral: null,
-                        oracal: null,
-                        pantoneCoated: null,
-                        pantoneUncoated: null,
-                        cmykCoated: null,
-                        cmykUncoated: null,
-                        cmykNewspaper: null,
-                        ncs: null,
-                        pantoneCp: null,
-                        pantonePlastics: null,
-                        pantoneTextile: null,
-                        hks: null,
-                        threeM: null,
-                        lab: null,
-                    },
-                    {
-                        id: 7,
-                        name: 'Oracle',
-                        sort: 2,
-                        nameCss: 'oracle',
-                        hex: '3b8686',
-                        red: 59,
-                        green: 134,
-                        blue: 134,
-                        alpha: 255,
-                        hue: 180,
-                        saturation: 39,
-                        lightness: 38,
-                        c: 56,
-                        m: 0,
-                        y: 0,
-                        k: 47,
-                        pantone: null,
-                        ral: null,
-                        oracal: null,
-                        pantoneCoated: null,
-                        pantoneUncoated: null,
-                        cmykCoated: null,
-                        cmykUncoated: null,
-                        cmykNewspaper: null,
-                        ncs: null,
-                        pantoneCp: null,
-                        pantonePlastics: null,
-                        pantoneTextile: null,
-                        hks: null,
-                        threeM: null,
-                        lab: null,
-                    },
-                    {
-                        id: 8,
-                        name: 'Silver Tree',
-                        sort: 3,
-                        nameCss: 'silver-tree',
-                        hex: '79bd9a',
-                        red: 121,
-                        green: 189,
-                        blue: 154,
-                        alpha: 255,
-                        hue: 149,
-                        saturation: 34,
-                        lightness: 61,
-                        c: 36,
-                        m: 0,
-                        y: 19,
-                        k: 26,
-                        pantone: null,
-                        ral: null,
-                        oracal: null,
-                        pantoneCoated: null,
-                        pantoneUncoated: null,
-                        cmykCoated: null,
-                        cmykUncoated: null,
-                        cmykNewspaper: null,
-                        ncs: null,
-                        pantoneCp: null,
-                        pantonePlastics: null,
-                        pantoneTextile: null,
-                        hks: null,
-                        threeM: null,
-                        lab: null,
-                    },
-                ],
+                colors: [ColorDummy.green(), ColorDummy.yellow(), ColorDummy.red()],
             },
         ]);
         expect(result).toEqual([
@@ -120,24 +21,24 @@ describe('mapAppBridgeColorPalettesToFonduePalettes', () => {
                 colors: [
                     {
                         alpha: 1,
-                        red: 11,
-                        green: 72,
-                        blue: 107,
-                        name: 'Tarawera',
+                        blue: 0,
+                        green: 255,
+                        red: 0,
+                        name: 'Green',
                     },
                     {
                         alpha: 1,
-                        red: 59,
-                        green: 134,
-                        blue: 134,
-                        name: 'Oracle',
+                        blue: 0,
+                        green: 255,
+                        red: 255,
+                        name: 'Yellow',
                     },
                     {
                         alpha: 1,
-                        red: 121,
-                        green: 189,
-                        blue: 154,
-                        name: 'Silver Tree',
+                        blue: 0,
+                        green: 0,
+                        red: 255,
+                        name: 'Red',
                     },
                 ],
             },

package/src/helpers/mapColorPalettes.ts

@@ -3,20 +3,63 @@
 import { ColorPalette } from '@frontify/app-bridge';
 import { Palette } from '@frontify/fondue';
 
+type Nullable<T> = T | null;
+
+type V3Color = {
+    id: number;
+    name: Nullable<string>;
+    red: Nullable<number>;
+    green: Nullable<number>;
+    blue: Nullable<number>;
+    alpha: Nullable<number>;
+};
+
+type V4Color = {
+    id: number;
+    title: Nullable<string>;
+    revision: {
+        rgba: {
+            red: Nullable<number>;
+            green: Nullable<number>;
+            blue: Nullable<number>;
+            alpha: Nullable<number>;
+        };
+    };
+};
+
+type Color = V3Color | V4Color;
+
 export const mapAppBridgeColorPalettesToFonduePalettes = (colorPalettes: ColorPalette[]): Palette[] => {
     return colorPalettes.map(mapAppBridgeColorPaletteToFonduePalette);
 };
-
 export const mapAppBridgeColorPaletteToFonduePalette = (colorPalette: ColorPalette): Palette => {
     return {
         id: colorPalette.id,
         title: colorPalette.name,
-        colors: colorPalette.colors.map((color) => ({
-            alpha: color.alpha ? color.alpha / 255 : 1,
-            red: color.red ?? 0,
-            green: color.green ?? 0,
-            blue: color.blue ?? 0,
-            name: color.name ?? '',
-        })),
+        colors: colorPalette.colors.map(mapColor),
+    };
+};
+
+const isV4Color = (color: Color): color is V4Color => {
+    return 'revision' in color;
+};
+
+const mapColor = (color: Color) => {
+    if (isV4Color(color)) {
+        const { title, revision } = color;
+        return {
+            alpha: revision.rgba.alpha ? revision.rgba.alpha / 255 : 1,
+            red: revision.rgba.red ?? 0,
+            green: revision.rgba.green ?? 0,
+            blue: revision.rgba.blue ?? 0,
+            name: title ?? '',
+        };
+    }
+    return {
+        alpha: color.alpha ? color.alpha / 255 : 1,
+        red: color.red ?? 0,
+        green: color.green ?? 0,
+        blue: color.blue ?? 0,
+        name: color.name ?? '',
     };
 };

package/src/hooks/useAttachments.spec.tsx

@@ -26,6 +26,7 @@ describe('useAttachments', async () => {
         const STUB_WITH_THREE_ASSETS = getAppBridgeBlockStub({
             blockId: 2,
             blockAssets: { [MOCK_SETTINGS_ID]: [AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)] },
+            editorState: true,
         });
         const { result } = renderHook(() => useAttachments(STUB_WITH_THREE_ASSETS, MOCK_SETTINGS_ID));
 

package/tsconfig.json

@@ -22,6 +22,6 @@
         "skipLibCheck": true,
         "types": ["cypress", "node", "cypress-real-events"]
     },
-    "include": ["src/**/*"],
+    "include": ["src/**/*", "./setupTests.ts"],
     "exclude": ["node_modules", "dist"]
 }

package/dist/components/BlockItemWrapper/Toolbar/ToolbarAttachments.es.js

@@ -1,27 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { ToolbarAttachmentsTrigger as p } from "./ToolbarAttachmentsTrigger.es.js";
-import { useAttachmentsContext as h } from "../../../hooks/useAttachments.es.js";
-import { Attachments as i } from "../../Attachments/Attachments.es.js";
-const f = ({ isOpen: o, onOpenChange: n }) => {
-  const { appBridge: r, attachments: m, onAttachmentsAdd: t, onAttachmentDelete: a, onAttachmentReplace: e, onAttachmentsSorted: c } = h();
-  return /* @__PURE__ */ s(
-    i,
-    {
-      onUpload: t,
-      onDelete: a,
-      onReplaceWithBrowse: e,
-      onReplaceWithUpload: e,
-      onSorted: c,
-      onBrowse: t,
-      items: m,
-      appBridge: r,
-      triggerComponent: p,
-      isOpen: o,
-      onOpenChange: n
-    }
-  );
-};
-export {
-  f as ToolbarAttachments
-};
-//# sourceMappingURL=ToolbarAttachments.es.js.map

package/dist/components/BlockItemWrapper/Toolbar/ToolbarAttachments.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarAttachments.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/ToolbarAttachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Attachments } from '../../Attachments';\nimport { useAttachmentsContext } from '../../../hooks';\n\nimport { type ToolbarFlyoutState } from './types';\n\nimport { ToolbarAttachmentsTrigger } from './ToolbarAttachmentsTrigger';\n\nexport const ToolbarAttachments = ({ isOpen, onOpenChange }: ToolbarFlyoutState) => {\n    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =\n        useAttachmentsContext();\n\n    return (\n        <Attachments\n            onUpload={onAttachmentsAdd}\n            onDelete={onAttachmentDelete}\n            onReplaceWithBrowse={onAttachmentReplace}\n            onReplaceWithUpload={onAttachmentReplace}\n            onSorted={onAttachmentsSorted}\n            onBrowse={onAttachmentsAdd}\n            items={attachments}\n            appBridge={appBridge}\n            triggerComponent={ToolbarAttachmentsTrigger}\n            isOpen={isOpen}\n            onOpenChange={onOpenChange}\n        />\n    );\n};\n"],"names":["ToolbarAttachments","isOpen","onOpenChange","appBridge","attachments","onAttachmentsAdd","onAttachmentDelete","onAttachmentReplace","onAttachmentsSorted","useAttachmentsContext","jsx","Attachments","ToolbarAttachmentsTrigger"],"mappings":";;;;AASO,MAAMA,IAAqB,CAAC,EAAE,QAAAC,GAAQ,cAAAC,QAAuC;AAC1E,QAAA,EAAE,WAAAC,GAAW,aAAAC,GAAa,kBAAAC,GAAkB,oBAAAC,GAAoB,qBAAAC,GAAqB,qBAAAC,MACvFC;AAGA,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAUN;AAAA,MACV,UAAUC;AAAA,MACV,qBAAqBC;AAAA,MACrB,qBAAqBA;AAAA,MACrB,UAAUC;AAAA,MACV,UAAUH;AAAA,MACV,OAAOD;AAAA,MACP,WAAAD;AAAA,MACA,kBAAkBS;AAAA,MAClB,QAAAX;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/BlockItemWrapper/Toolbar/ToolbarAttachmentsTrigger.es.js

@@ -1,12 +0,0 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { IconPaperclip16 as s, IconCaretDown12 as a } from "@frontify/fondue";
-import { getToolbarButtonClassNames as m } from "./helpers.es.js";
-const p = ({ children: r, isFlyoutOpen: t }) => /* @__PURE__ */ e("div", { className: m("pointer", t), children: [
-  /* @__PURE__ */ o(s, {}),
-  r,
-  /* @__PURE__ */ o(a, {})
-] });
-export {
-  p as ToolbarAttachmentsTrigger
-};
-//# sourceMappingURL=ToolbarAttachmentsTrigger.es.js.map

package/dist/components/BlockItemWrapper/Toolbar/ToolbarAttachmentsTrigger.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolbarAttachmentsTrigger.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/ToolbarAttachmentsTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\nimport { type AttachmentsTriggerProps } from '../../Attachments/types';\n\nimport { getToolbarButtonClassNames } from './helpers';\n\nexport const ToolbarAttachmentsTrigger = ({ children, isFlyoutOpen }: AttachmentsTriggerProps) => (\n    <div className={getToolbarButtonClassNames('pointer', isFlyoutOpen)}>\n        <IconPaperclip16 />\n        {children}\n        <IconCaretDown12 />\n    </div>\n);\n"],"names":["ToolbarAttachmentsTrigger","children","isFlyoutOpen","jsxs","getToolbarButtonClassNames","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAOO,MAAMA,IAA4B,CAAC,EAAE,UAAAC,GAAU,cAAAC,EAAa,MAC9D,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAA2B,WAAWF,CAAY,GAC9D,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,EAChBL;AAAA,oBACAM,GAAgB,EAAA;AAAA,EACrB,CAAA;"}

package/src/components/BlockItemWrapper/Toolbar/ToolbarAttachments.tsx

@@ -1,29 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { Attachments } from '../../Attachments';
-import { useAttachmentsContext } from '../../../hooks';
-
-import { type ToolbarFlyoutState } from './types';
-
-import { ToolbarAttachmentsTrigger } from './ToolbarAttachmentsTrigger';
-
-export const ToolbarAttachments = ({ isOpen, onOpenChange }: ToolbarFlyoutState) => {
-    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =
-        useAttachmentsContext();
-
-    return (
-        <Attachments
-            onUpload={onAttachmentsAdd}
-            onDelete={onAttachmentDelete}
-            onReplaceWithBrowse={onAttachmentReplace}
-            onReplaceWithUpload={onAttachmentReplace}
-            onSorted={onAttachmentsSorted}
-            onBrowse={onAttachmentsAdd}
-            items={attachments}
-            appBridge={appBridge}
-            triggerComponent={ToolbarAttachmentsTrigger}
-            isOpen={isOpen}
-            onOpenChange={onOpenChange}
-        />
-    );
-};

package/src/components/BlockItemWrapper/Toolbar/ToolbarAttachmentsTrigger.tsx

@@ -1,14 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';
-import { type AttachmentsTriggerProps } from '../../Attachments/types';
-
-import { getToolbarButtonClassNames } from './helpers';
-
-export const ToolbarAttachmentsTrigger = ({ children, isFlyoutOpen }: AttachmentsTriggerProps) => (
-    <div className={getToolbarButtonClassNames('pointer', isFlyoutOpen)}>
-        <IconPaperclip16 />
-        {children}
-        <IconCaretDown12 />
-    </div>
-);