@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/index.css

@@ -0,0 +1,494 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap');
+
+:root {
+	/* custom scrollbar related */
+	--sb-track-color: #1e1e1e;
+	--sb-thumb-color: #373737;
+	--sb-size: 6px;
+
+	/* Webflow colors */
+	--background1: #292929;
+	--black: #000000;
+	--background2: #353535;
+	--background3: #404040;
+	--background4: #373737;
+	--background5: #404040;
+	--backgroundInactive: #292929;
+	--backgroundInverse: #e8e8e8;
+	--backgroundInput: rgba(0, 0, 0, 0.22);
+	--Background-background4: #2b2b2b;
+
+	--actionPrimaryBackground: #006acc;
+	--actionPrimaryBackgroundHover: #187cd9;
+	--actionSecondaryBackground:
+		linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
+		var(--background3);
+	--actionSecondaryBackgroundHover: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0.18) 0%,
+		rgba(255, 255, 255, 0.16) 100%
+	);
+	--actionPrimaryText: #ffffff;
+	--actionPrimaryTextHover: #ffffff;
+	--actionSecondaryText: #e0e0e0;
+	--actionSecondaryTextHover: #e0e0e0;
+
+	--defaultLightHover: rgba(255, 255, 255, 0.05);
+	--defaultLightActive: rgba(255, 255, 255, 0.03);
+
+	--border1: rgba(255, 255, 255, 0.13);
+	--border2: rgba(255, 255, 255, 0.16);
+	--border3: rgba(255, 255, 255, 0.19);
+	/* removing token --border4 */
+
+	--text1: #ffffff;
+	--text2: rgba(255, 255, 255, 0.67);
+	--text3: rgba(255, 255, 255, 0.67);
+	--text-text-2: #ababab;
+	--text-text-1: #d9d9d9;
+
+	--action-action-secondary-background: #484848;
+
+	--text4: #696969;
+	--textInactive: rgba(255, 255, 255, 0.5);
+	--textInverse: #000000;
+
+	--blueText: #8ac2ff;
+	--blueIcon: #8ac2ff;
+	--blueBorder: #007df0;
+
+	--greenBackground: #007a41;
+	--greenBackgroundHover: #0d8a4f;
+	--greenText: #79e09c;
+	--greenIcon: #79e09c;
+	--greenBorder: #259d4d;
+	--yellowBackground: #946b00;
+
+	--yellowBackgroundHover: #af7f00;
+	--yellowText: #f3c831;
+	--yellowIcon: #f3c831;
+	--yellowBorder: #ffd301;
+
+	--redBackground: #cf313b;
+	--redBackgroundHover: #cb3535;
+	--redText: #ff8a8a;
+	--redIcon: #ff8a8a;
+	--redBorder: #e42f3a;
+
+	--orangeBackground: #bf4707;
+	--orangeBackgroundHover: #c95616;
+	--orangeText: #ffbc86;
+	--orangeIcon: #ffbc86;
+	--orangeBorder: #df640c;
+
+	--purpleBackground: #734ce0;
+	--purpleBackgroundHover: #815beb;
+	--purpleText: #c4afff;
+	--purpleIcon: #c4afff;
+	--purpleBorder: #875ffd;
+
+	/* Box shadows for buttons and inputs */
+	--boxShadows-action-colored:
+		0px 0.5px 1px 0px rgba(0, 0, 0, 0.8), 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.2) inset;
+	--boxShadows-action-secondary:
+		0px 0.5px 1px rgba(0, 0, 0, 0.8), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.12);
+	--boxShadows-input-inner:
+		0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset, 0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+		0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset, 0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+		0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset, 0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset;
+
+	--boxShadows-menu:
+		0px 12px 24px 8px rgba(0, 0, 0, 0.08), 0px 8px 16px 4px rgba(0, 0, 0, 0.08),
+		0px 4px 8px 2px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.08),
+		0px -0.5px 0.5px 0px rgba(0, 0, 0, 0.12) inset,
+		0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;
+
+	/* TYPOGRAPHY */
+	--font-stack: 'Inter', sans-serif;
+
+	--input-inner-shadow:
+		0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset, 0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+		0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset, 0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+		0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset, 0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset;
+
+	--menu-shadow:
+		0px 12px 24px 8px rgba(0, 0, 0, 0.08), 0px 8px 16px 4px rgba(0, 0, 0, 0.08),
+		0px 4px 8px 2px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.08),
+		0px -0.5px 0.5px 0px rgba(0, 0, 0, 0.12) inset,
+		0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;
+
+	--font-size-small: 11.5px;
+	--font-size-small-letter-spacing: -0.115px;
+	--font-size-large: 12.5px;
+	--font-weight-normal: 400;
+	--font-weight-medium: 600;
+	--border-radius: 4px;
+
+	/* Hover effect */
+	--hoverColor: rgba(255, 255, 255, 0.14);
+
+	/* NONWEBFLOW VARIABLES */
+	--padding-tiny: 2px;
+	--padding-small: 4px;
+	--padding-regular: 8px;
+	--padding-large: 12px;
+
+	/* spacing */
+	--spacing-12: 12px;
+	--space-space-1: 4px;
+	--spacing-16: 16px;
+	--spacing-8: 8px;
+	--spacing-4: 4px;
+	--spacing-32: 32px;
+	--spacing-24: 24px;
+
+	/* Finsweet Components: super app specific sizes */
+	--components-navbar-height: 43px;
+	--left-sidebar-width: 274px;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+	height: 100%;
+	background: var(--background1);
+	/* Prevents layout shift when scrollbar appears, does not work in Safari browsers */
+	/* scrollbar-gutter: stable; */
+}
+
+body {
+	margin: 0;
+	/* color: var(--text-text-1, #d9d9d9); */
+	color: var(--text1);
+
+	font-size: var(--font-size-large);
+	font-family:
+		Inter,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Oxygen-Sans,
+		Ubuntu,
+		Cantarell,
+		'Helvetica Neue',
+		Helvetica,
+		Arial,
+		'Apple Color Emoji',
+		'Segoe UI Emoji',
+		'Segoe UI Symbol',
+		sans-serif;
+}
+
+button,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+div,
+input,
+textarea,
+select,
+option,
+label,
+a {
+	font-family:
+		Inter,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Oxygen-Sans,
+		Ubuntu,
+		Cantarell,
+		'Helvetica Neue',
+		Helvetica,
+		Arial,
+		'Apple Color Emoji',
+		'Segoe UI Emoji',
+		'Segoe UI Symbol',
+		sans-serif;
+}
+
+a {
+	color: inherit;
+}
+
+h1 {
+	font-size: var(--font-size-large);
+	font-weight: 400;
+	margin-bottom: 1rem;
+	margin-block-start: 4px;
+	margin-block-end: 4px;
+}
+
+h2 {
+	font-size: var(--font-size-small);
+	color: white;
+	font-weight: 600;
+	margin-block-start: 4px;
+	margin-block-end: 4px;
+}
+
+h3 {
+	font-size: var(--font-size-tiny);
+	font-weight: 400;
+	margin-bottom: 1rem;
+	margin-block-start: 4px;
+	margin-block-end: 4px;
+}
+
+form {
+	display: block;
+	margin-top: 0em;
+	margin-block-end: 0em;
+}
+
+label {
+	display: block;
+	font-size: var(--font-size-small);
+	font-weight: 400;
+}
+
+/* Global Disabled state */
+.disabled,
+.login-required {
+	cursor: not-allowed !important;
+	opacity: 0.75 !important;
+}
+
+/* simplebar */
+.simplebar-content {
+	position: relative;
+}
+
+.simplebar-mask {
+	z-index: auto !important;
+}
+
+input {
+	/* Remove default appearance for some browsers */
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	/* Remove default border and padding for all browsers */
+	border: var(--border3) 1px solid;
+	border-radius: var(--border-radius, 4px);
+	padding: var(--padding-small);
+	margin: 0;
+
+	/* Set font styles to inherit from parent */
+	font-family: inherit;
+	font-size: inherit;
+	color: var(--text2);
+
+	/* Remove the default background */
+	background: var(--background1);
+
+	/* Remove the highlight when focused (outline: none is generally discouraged due to accessibility concerns, 
+    so use it carefully and provide alternative focus styles) */
+	outline: none;
+}
+
+/* Placeholder */
+
+input::placeholder {
+	/* Chrome, Firefox, Opera, Safari */
+	color: var(--text3) !important;
+}
+
+input::-webkit-input-placeholder {
+	/* Chrome/Safari/Opera */
+	color: var(--text3) !important;
+}
+
+input::-moz-placeholder {
+	/* Firefox */
+	color: var(--text3) !important;
+	opacity: 1;
+	/* Firefox sometimes reduces opacity */
+}
+
+input:-ms-input-placeholder {
+	/* IE/Edge */
+	color: var(--text3) !important;
+}
+
+textarea {
+	/* Remove default appearance for some browsers */
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	/* Remove default border and padding for all browsers */
+	padding: var(--padding-regular);
+	margin: 0;
+
+	/* Set font styles to inherit from parent */
+	font-family: inherit;
+	font-size: inherit;
+	color: var(--text2);
+
+	/* Remove the default background */
+	background: var(--background1);
+
+	/* border */
+	border: 1px solid;
+	border-color: var(--border3);
+	border-radius: var(--border-radius);
+
+	/* Remove the highlight when focused (outline:one is generally discouraged due to accessibility concerns, 
+    so use it carefully and provide alternative focus styles) */
+	outline: none;
+
+	resize: none;
+}
+
+input[type='checkbox'] {
+	/* The default appearance must be removed for custom styles */
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	/* Customize the checkbox */
+	width: 12px;
+	height: 12px;
+	background: var(--background5);
+	border-radius: var(--border-radius);
+	vertical-align: middle;
+	position: relative;
+}
+
+/* Checkmark style */
+input[type='checkbox']:checked::before {
+	content: '';
+	display: block;
+	width: 9px;
+	height: 5px;
+	border-style: solid;
+	border-color: var(--text1);
+	border-width: 0 0 2px 2px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -60%) rotate(-45deg);
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+/* Firefox */
+/* input[type="number"] {
+    -moz-appearance: textfield;
+  } */
+
+.button {
+	/* Reset */
+	all: unset;
+	box-sizing: border-box;
+
+	/* Layout */
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	gap: 2px;
+
+	/* Styling */
+	padding: 4px;
+	border-radius: var(--border-radius, 4px);
+	font-family: var(--font-stack, Inter, sans-serif);
+	font-weight: var(--font-weight-normal, 400);
+	line-height: 16px;
+	letter-spacing: -0.115px;
+	text-align: center;
+	cursor: pointer;
+	user-select: none;
+	transition: all 0.2s ease;
+
+	/* Primary button styling */
+	background: var(--actionPrimaryBackground);
+	color: var(--actionPrimaryText);
+
+	/* Shadow */
+	box-shadow:
+		0px 29px 23px -16px rgba(255, 255, 255, 0.04) inset,
+		0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.2) inset,
+		0px 0.5px 1px 0px #000;
+}
+
+.button:hover:not(:disabled) {
+	background: var(--actionPrimaryBackgroundHover);
+}
+
+.button:disabled {
+	cursor: not-allowed;
+	opacity: 0.4;
+	pointer-events: none;
+}
+
+.flex {
+	display: flex;
+}
+
+.flex-vertical {
+	display: flex;
+	flex-direction: column;
+}
+
+.tiny-label {
+	color: var(--text2);
+	font-size: var(--font-size-tiny);
+	padding-top: 4px;
+	padding-bottom: 4px;
+	text-align: center;
+}
+
+/* 
+  The following styles are for the notification component
+  */
+.notification-wrapper {
+	display: flex;
+	padding: 8px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 10px;
+	align-self: stretch;
+}
+
+/* Pure CSS Scrollbar */
+
+::-webkit-scrollbar {
+	width: var(--sb-size);
+	height: var(--sb-size);
+}
+
+::-webkit-scrollbar-track {
+	background: var(--sb-track-color);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--sb-thumb-color);
+	border-radius: 4px;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+	body {
+		scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
+	}
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './icons';

package/dist/ui/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './icons';

package/dist/utils/api/checkIfAppModeIsDesign.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Check if the app mode is design
+ * @returns {Promise<boolean>}
+ */
+export declare const checkIfAppModeIsDesign: () => Promise<boolean>;

package/dist/utils/api/checkIfAppModeIsDesign.js

@@ -0,0 +1,20 @@
+/**
+ * Check if the app mode is design
+ * @returns {Promise<boolean>}
+ */
+export const checkIfAppModeIsDesign = async () => {
+    const capabilities = await webflow.canForAppMode([
+        webflow.appModes.canDesign,
+        webflow.appModes.canEdit
+    ]);
+    if (capabilities.canDesign) {
+        // Proceed with the action
+        return true;
+    }
+    // Provide feedback to the user
+    await webflow.notify({
+        type: 'Error',
+        message: 'This action cannot be performed right now. Ensure you are working in the Primary Locale, on the Main Branch, and in design mode.'
+    });
+    return false;
+};

package/dist/utils/api/clipboard/handlePaste.d.ts

@@ -0,0 +1,46 @@
+export type FsCopyPasteComponent = {
+    meta: {
+        droppedLinks: number;
+        dynBindRemovedCount: number;
+        dynListBindRemovedCount: number;
+        paginationRemovedCount: number;
+        universalBindingsRemovedCount: number;
+        unlinkedSymbolCount: number;
+    };
+    type: string;
+    payload: {
+        nodes: PastedNodes[];
+        styles: {
+            name: string;
+            type: string | 'class';
+        }[];
+    };
+};
+type PastedNodes = {
+    children: string[];
+    classes: string[];
+    tag: string;
+    type: string;
+    data: {
+        xattr: Attr[];
+    };
+};
+/**
+ * Process pasted component
+ * @param component
+ * @param strict - if true, check for exact match, else check for any child
+ */
+export declare const processPastedComponent: (pasteData: FsCopyPasteComponent, component: string) => {
+    data: FsCopyPasteComponent;
+    key: string;
+} | undefined;
+/**
+ * Handle pasting of Webflow components
+ * @param e
+ * @param strict - if true, check for exact match, else check for any child
+ */
+export declare const handlePasteXSCP: (e: ClipboardEvent, component: string) => {
+    data: FsCopyPasteComponent;
+    key: string;
+} | undefined;
+export {};

package/dist/utils/api/clipboard/handlePaste.js

@@ -0,0 +1,53 @@
+import { getLogger } from '../../logger';
+const logger = getLogger('webflow-apps-ui-utils');
+/**
+ * Process pasted component
+ * @param component
+ * @param strict - if true, check for exact match, else check for any child
+ */
+export const processPastedComponent = (pasteData, component) => {
+    const valid = pasteData?.payload?.nodes?.some((node) => node?.data?.xattr?.some((attr) => {
+        if (component === 'consent') {
+            // consent is kinda different
+            const bannerFound = attr.name.includes(`fs-consent-element`) && attr.value === 'banner';
+            const wrapperFound = attr.name.includes(`fs-consent-element`) && attr.value === 'wrapper';
+            return bannerFound || wrapperFound;
+        }
+        return attr.name.includes(`fs-${component}-instance`);
+    }));
+    if (valid) {
+        return { data: pasteData, key: component };
+    }
+};
+/**
+ * Handle pasting of Webflow components
+ * @param e
+ * @param strict - if true, check for exact match, else check for any child
+ */
+export const handlePasteXSCP = (e, component) => {
+    if (!e.clipboardData?.types.includes('application/json'))
+        return;
+    const data = e.clipboardData?.getData('application/json');
+    const clipboard = JSON.parse(data);
+    if (clipboard?.type === '@webflow/XscpData') {
+        try {
+            const data = e.clipboardData.getData('application/json');
+            const clipboard = JSON.parse(data);
+            if (clipboard?.type === '@webflow/XscpData') {
+                return processPastedComponent(clipboard, component);
+            }
+            webflow.notify({
+                type: 'Error',
+                message: 'Invalid! You can only paste valid Finsweet Components.'
+            });
+        }
+        catch (error) {
+            logger.error({}, 'handlePasteXSCP', error);
+            webflow.notify({
+                type: 'Error',
+                message: 'Invalid! You can only paste valid Finsweet Components.'
+            });
+            return;
+        }
+    }
+};

package/dist/utils/api/clipboard/index.d.ts

@@ -0,0 +1 @@
+export * from './handlePaste';

package/dist/utils/api/clipboard/index.js

@@ -0,0 +1 @@
+export * from './handlePaste';

package/dist/utils/api/copyPaste/index.d.ts

@@ -0,0 +1,18 @@
+export type CopyPasteComponent = {
+    meta: object;
+    type: string;
+    payload: {
+        nodes: PastedNodes[];
+        styles: PastedStyles[];
+    };
+};
+type PastedStyles = {
+    name: string;
+    comb: '&' | string;
+};
+type PastedNodes = {
+    data: {
+        xattr: Attr[];
+    };
+};
+export {};

package/dist/utils/api/copyPaste/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/api/getAllAssets.d.ts

@@ -0,0 +1,12 @@
+export interface AllAssets {
+    name: string;
+    url: string;
+    mimeType: string;
+    altText: string;
+    asset: Asset;
+}
+/**
+ * Get all assets from the Webflow Canvas
+ * @returns
+ */
+export declare const getAllAssets: () => Promise<AllAssets[]>;

package/dist/utils/api/getAllAssets.js

@@ -0,0 +1,21 @@
+/**
+ * Get all assets from the Webflow Canvas
+ * @returns
+ */
+export const getAllAssets = async () => {
+    const assets = await webflow.getAllAssets();
+    const assetPromises = assets.map(async (asset) => {
+        const url = await asset.getUrl();
+        const name = await asset.getName();
+        const mimeType = await asset.getMimeType();
+        const altText = (await asset.getAltText()) ?? '';
+        return {
+            name,
+            url,
+            mimeType,
+            altText,
+            asset
+        };
+    });
+    return await Promise.all(assetPromises);
+};

package/dist/utils/api/getFinsweetComponentsEnvironment.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Get the Finsweet components environment.
+ * @returns
+ */
+export declare const getFinsweetComponentsEnvironment: () => {
+    development: boolean;
+    coreScript: string;
+    api: string;
+};