@devvit/ui-renderer 0.10.20-next-2024-04-26-62f55e1ef.0 → 0.10.20-next-2024-04-29-43d2ba7f8.0

package/client/formbuilder/components/image-field/render-empty-state.js

@@ -0,0 +1,46 @@
+import { IconSize } from '@reddit/faceplate-ui/lib/IconSize.js';
+import { ButtonSize, button } from '@reddit/faceplate-ui/templates/button.js';
+import IconUploadOutline from '@reddit/faceplate-ui/templates/client/icons/icon-upload-outline.js';
+import { msg } from '@lit/localize';
+import { html } from 'lit';
+import { DragState } from './drag-and-drop-controller.js';
+export function renderEmptyState({ allowImages, allowVideos, inputDragState, }) {
+    let label;
+    if (allowImages && allowVideos) {
+        label = msg('Drag and Drop images or videos or', {
+            desc: 'Label for file drag and drop files',
+        });
+    }
+    else if (allowImages) {
+        label = msg('Drag and Drop images or', { desc: 'Label for file drag and drop images' });
+    }
+    else {
+        label = msg('Drag and Drop videos or', { desc: 'Label for file drag and drop videos' });
+    }
+    if (inputDragState === DragState.IN_FRAME) {
+        label = msg('Drop here to upload', {
+            desc: 'Drop files here to upload.',
+        });
+    }
+    return html `
+    <div class="w-full flex items-center justify-center">
+      <div id="inputInfo" class="flex flex-row gap-xs items-center">
+        ${label}
+        ${button({
+        size: ButtonSize.Small,
+        shape: 'pill',
+        appearance: 'secondary',
+        attributes: {
+            type: 'button',
+            className: 'upload-media action',
+            id: 'device-upload-button',
+        },
+        leadingIcon: IconUploadOutline({
+            size: IconSize.Small,
+        }),
+        screenReaderContent: '',
+    })}
+      </div>
+    </div>
+  `;
+}

package/client/formbuilder/components/image-field/render-loading-state.d.ts

@@ -0,0 +1,9 @@
+import type { TemplateResult } from 'lit';
+import type { MediaItem } from './media-controller.js';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+export declare function renderLoadingState(media: MediaItem): TemplateResult<1>;
+//# sourceMappingURL=render-loading-state.d.ts.map

package/client/formbuilder/components/image-field/render-loading-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-loading-state.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/render-loading-state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;GAIG;AAEH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAmBtE"}

package/client/formbuilder/components/image-field/render-loading-state.js

@@ -0,0 +1,27 @@
+import { msg } from '@lit/localize';
+import { html } from 'lit';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+export function renderLoadingState(media) {
+    return html `
+    <div class="loading-state w-full h-full flex flex-col flex-1">
+      <div class="flex flex-col flex-1 justify-center items-center bg-neutral-background-weak">
+        <faceplate-progress
+          value="85"
+          class="animate-spin"
+          style="--loader-size: 1rem"
+          aria-label="${msg('Uploading media', { desc: 'Uploading media' })}"
+        ></faceplate-progress>
+      </div>
+      <div
+        class="border-neutral-border border-solid border-0 border-t-sm py-xs px-sm flex flex-col items-start"
+      >
+        <p class="selected-file-name m-0 text-12 line-clamp-1">${media?.file?.name}</p>
+        <p class="m-0 text-12">${msg('Uploading...', { desc: 'Uploading media' })}</p>
+      </div>
+    </div>
+  `;
+}

package/client/formbuilder/components/image-field/render-media-carousel.d.ts

@@ -0,0 +1,5 @@
+import type { TemplateResult } from 'lit';
+import type { MediaController, MediaItem } from './media-controller.js';
+export declare function renderUploaderState(media: MediaItem): TemplateResult<1>;
+export declare function renderCarousel(mediaController: MediaController): TemplateResult<1>;
+//# sourceMappingURL=render-media-carousel.d.ts.map

package/client/formbuilder/components/image-field/render-media-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-media-carousel.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/render-media-carousel.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAwCxE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAMvE;AAED,wBAAgB,cAAc,CAAC,eAAe,EAAE,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,CA4ClF"}

package/client/formbuilder/components/image-field/render-media-carousel.js

@@ -0,0 +1,92 @@
+import { NAVIGATION_PLACEMENT, PAGINATION_PLACEMENT, } from '@reddit/faceplate-ui/components/faceplate-carousel.js';
+import { IconSize } from '@reddit/faceplate-ui/lib/IconSize.js';
+import { button, ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
+import IconDeleteOutline from '@reddit/faceplate-ui/templates/client/icons/icon-delete-outline.js';
+import IconLeftFill from '@reddit/faceplate-ui/templates/client/icons/icon-left-fill.js';
+import IconRightFill from '@reddit/faceplate-ui/templates/client/icons/icon-right-fill.js';
+import { html } from 'lit';
+import { renderLoadingState } from './render-loading-state.js';
+import { renderMediaPreview } from './render-media-preview.js';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+function renderDeleteButton(disabled) {
+    return button({
+        size: ButtonSize.Small,
+        shape: 'pill',
+        appearance: 'media',
+        attributes: {
+            type: 'button',
+            disabled,
+            className: 'remove-media remove action invisible group-hover:visible',
+        },
+        leadingIcon: IconDeleteOutline({
+            size: IconSize.Small,
+        }),
+        screenReaderContent: '',
+    });
+}
+function renderTopLeftActions() {
+    return html `
+    <div class="absolute top-xs left-xs">
+      <div class="flex gap-md"></div>
+    </div>
+  `;
+}
+function renderTopRightActions(disabled) {
+    return html `<div class="absolute top-xs right-xs">${renderDeleteButton(disabled)}</div> `;
+}
+export function renderUploaderState(media) {
+    if (media.status === 'loading') {
+        return renderLoadingState(media);
+    }
+    else {
+        return renderMediaPreview(media);
+    }
+}
+export function renderCarousel(mediaController) {
+    const hasLoadingMedia = mediaController.hasLoadingMedia();
+    return html `
+    <div class="w-full relative flex rounded-dx-md overflow-hidden">
+      <faceplate-carousel
+        autoplay="off"
+        nav-placement="${NAVIGATION_PLACEMENT.INSIDE}"
+        pagination-placement="${PAGINATION_PLACEMENT.OFF}"
+        advance-animation="true"
+      >
+        <span slot="prevButton">
+          ${button({
+        appearance: 'media',
+        size: ButtonSize.Small,
+        leadingIcon: IconLeftFill({ size: IconSize.Small }),
+        attributes: {
+            type: 'button',
+            id: 'media-carousel-prev',
+        },
+    })}
+        </span>
+        <ul>
+          ${mediaController.media.map((value) => {
+        return html `<li class="m-0 text-center rounded-dx-md">
+              ${renderUploaderState(value)}
+            </li>`;
+    })}
+        </ul>
+        <span slot="nextButton">
+          ${button({
+        appearance: 'media',
+        size: ButtonSize.Small,
+        leadingIcon: IconRightFill({ size: IconSize.Small }),
+        attributes: {
+            type: 'button',
+            id: 'media-carousel-next',
+        },
+    })}
+        </span>
+      </faceplate-carousel>
+      ${renderTopLeftActions()} ${renderTopRightActions(hasLoadingMedia)}
+    </div>
+  `;
+}

package/client/formbuilder/components/image-field/render-media-preview.d.ts

@@ -0,0 +1,15 @@
+import type { TemplateResult } from 'lit';
+import type { MediaItem } from './media-controller.js';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+export interface RenderMediaPreview {
+    handleRemoveClick: (event: Event, index: number) => void;
+    itemIndex: number;
+}
+export declare function renderImagePreview(image: MediaItem): TemplateResult<1>;
+export declare function renderVideoPreview(video: MediaItem): TemplateResult<1>;
+export declare function renderMediaPreview(media: MediaItem): TemplateResult<1>;
+//# sourceMappingURL=render-media-preview.d.ts.map

package/client/formbuilder/components/image-field/render-media-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-media-preview.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/render-media-preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;GAIG;AAEH,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAatE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAetE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAMtE"}

package/client/formbuilder/components/image-field/render-media-preview.js

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+export function renderImagePreview(image) {
+    const { src } = image;
+    return html `
+    <div class="max-h-[min(20vw,150px)]">
+      <img src="${src}" class="w-full h-full" alt="" />
+      <img
+        src="${src}"
+        class="absolute top-0 left-0 w-full h-full object-cover object-center opacity-30 -z-10"
+        style="filter: blur(24px);"
+        alt=""
+      />
+    </div>
+  `;
+}
+export function renderVideoPreview(video) {
+    const { src, posterSrc, file } = video;
+    return html `
+    <div class="max-h-[max(23vw,250px)] w-full">
+      <shreddit-player
+        autoplay-pref
+        ui="desktop"
+        src="${src}"
+        class="w-full h-full"
+        poster="${ifDefined(posterSrc)}"
+      >
+        <source src="${src}" type="${file.type}" />
+      </shreddit-player>
+    </div>
+  `;
+}
+export function renderMediaPreview(media) {
+    return html `
+    <div class="flex relative justify-center align-center w-full h-full items-center flex-col">
+      ${media.type === 'video' ? renderVideoPreview(media) : renderImagePreview(media)}
+    </div>
+  `;
+}

package/client/formbuilder/components/image-field/validate-image-size.d.ts

@@ -0,0 +1,14 @@
+export type ValidationResult = {
+    valid: boolean;
+    error: string | null;
+    reason?: ImageValidationErrorReason | VideoValidationErrorReason;
+};
+type ImageValidationErrorReason = 'IMAGE_SIZE_LIMIT_EXCEEDED_ERROR';
+type VideoValidationErrorReason = 'VIDEO_SIZE_LIMIT_EXCEEDED_ERROR';
+interface FileInfo {
+    type: string;
+    size: number;
+}
+export declare function validateImageFileSize(file: FileInfo): ValidationResult;
+export {};
+//# sourceMappingURL=validate-image-size.d.ts.map

package/client/formbuilder/components/image-field/validate-image-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-image-size.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/validate-image-size.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,0BAA0B,GAAG,0BAA0B,CAAC;CAClE,CAAC;AAEF,KAAK,0BAA0B,GAAG,iCAAiC,CAAC;AACpE,KAAK,0BAA0B,GAAG,iCAAiC,CAAC;AAEpE,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,QAAQ,GAAG,gBAAgB,CAoDtE"}

package/client/formbuilder/components/image-field/validate-image-size.js

@@ -0,0 +1,47 @@
+import { msg, str } from '@lit/localize';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+const KILOBYTE = 1024;
+const MEGABYTE = KILOBYTE * KILOBYTE;
+const GIGABYTE = KILOBYTE * MEGABYTE;
+const MAX_IMAGE_FILE_SIZE = 2 * MEGABYTE; // 2MB
+const MAX_GIF_FILE_SIZE = 2 * MEGABYTE; // 2MB
+const MAX_VIDEO_FILE_SIZE = 1 * GIGABYTE; // 1GB
+// TODO(ADE-7032): Rename to validateMediaFileSize
+export function validateImageFileSize(file) {
+    const mimetype = file.type;
+    if (mimetype === 'image/gif' && file.size > MAX_GIF_FILE_SIZE) {
+        return {
+            valid: false,
+            error: msg(str `Upload failed, GIF size should be less than ${Math.floor(MAX_GIF_FILE_SIZE / MEGABYTE)}MB.`, {
+                desc: 'Error: gif size limit exceeded',
+            }),
+            reason: 'IMAGE_SIZE_LIMIT_EXCEEDED_ERROR',
+        };
+    }
+    if (mimetype.includes('image/') && mimetype !== 'image/gif' && file.size > MAX_IMAGE_FILE_SIZE) {
+        return {
+            valid: false,
+            error: msg(str `Upload failed, Image size should be less than ${Math.floor(MAX_IMAGE_FILE_SIZE / MEGABYTE)}MB.`, {
+                desc: 'Error: image size limit exceeded',
+            }),
+            reason: 'IMAGE_SIZE_LIMIT_EXCEEDED_ERROR',
+        };
+    }
+    if (mimetype.includes('video/') && file.size > MAX_VIDEO_FILE_SIZE) {
+        return {
+            valid: false,
+            error: msg(str `Upload failed, Video size should be less than ${Math.floor(MAX_VIDEO_FILE_SIZE / GIGABYTE)}GB.`, {
+                desc: 'Error: video size limit exceeded',
+            }),
+            reason: 'VIDEO_SIZE_LIMIT_EXCEEDED_ERROR',
+        };
+    }
+    return {
+        valid: true,
+        error: null,
+    };
+}

package/client/formbuilder/components/image-field/validateMedia.d.ts

@@ -0,0 +1,13 @@
+export declare const MAX_VIDEO_FILE_SIZE: number;
+export declare const MAX_VIDEO_DURATION: number;
+export declare const MIN_VIDEO_DURATION = 2;
+export declare const MIN_VIDEO_WIDTH = 50;
+export declare const MIN_VIDEO_HEIGHT = 50;
+export declare const ALLOWED_IMAGE_MIMETYPES: string[];
+export declare const ALLOWED_VIDEO_MIMETYPES: string[];
+export type ValidationResult = {
+    valid: boolean;
+    error: string | null;
+};
+export declare function validateImageFile(file: File): ValidationResult;
+//# sourceMappingURL=validateMedia.d.ts.map

package/client/formbuilder/components/image-field/validateMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateMedia.d.ts","sourceRoot":"","sources":["../../../../../library/src/client/formbuilder/components/image-field/validateMedia.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,mBAAmB,QAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,QAAU,CAAC;AAC1C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,eAAO,MAAM,uBAAuB,UAAyD,CAAC;AAC9F,eAAO,MAAM,uBAAuB,UAAmC,CAAC;AAExE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,gBAAgB,CAa9D"}

package/client/formbuilder/components/image-field/validateMedia.js

@@ -0,0 +1,29 @@
+import { msg } from '@lit/localize/lit-localize.js';
+import { validateImageFileSize } from './validate-image-size.js';
+/**
+ * This entire file was copied from shreddit
+ * I removed some parts of it that were too "shreddit post creation" focused, but kept the original code style
+ * Eventually we will remove it in favour of faceplate-ui image upload component, but for now we have this
+ */
+const KILOBYTE = 1024;
+const MEGABYTE = KILOBYTE * KILOBYTE;
+const GIGABYTE = KILOBYTE * MEGABYTE;
+export const MAX_VIDEO_FILE_SIZE = 1 * GIGABYTE; // 1GB
+export const MAX_VIDEO_DURATION = 60 * 15;
+export const MIN_VIDEO_DURATION = 2; // 2 seconds
+export const MIN_VIDEO_WIDTH = 50;
+export const MIN_VIDEO_HEIGHT = 50;
+export const ALLOWED_IMAGE_MIMETYPES = ['image/png', 'image/gif', 'image/jpeg', 'image/webp'];
+export const ALLOWED_VIDEO_MIMETYPES = ['video/mp4', 'video/quicktime'];
+export function validateImageFile(file) {
+    const mimetype = file.type;
+    if (!ALLOWED_IMAGE_MIMETYPES.includes(mimetype)) {
+        return {
+            valid: false,
+            error: msg('Sorry, we accept only files (.png, .jpeg, .gif, .webp).', {
+                desc: 'Error: invalid media type',
+            }),
+        };
+    }
+    return validateImageFileSize(file);
+}

package/client/formbuilder/fields/renderFieldLabel.d.ts

@@ -1,4 +1,4 @@
 import type { FormField } from '@devvit/protos';
 import type { TemplateResult } from 'lit';
-export declare const renderFieldLabel: (field: FormField) => TemplateResult;
+export declare const renderFieldLabel: (field: FormField, classnames?: string) => TemplateResult;
 //# sourceMappingURL=renderFieldLabel.d.ts.map

package/client/formbuilder/fields/renderFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderFieldLabel.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/fields/renderFieldLabel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,eAAO,MAAM,gBAAgB,UAAW,SAAS,KAAG,cAC4B,CAAC"}
+{"version":3,"file":"renderFieldLabel.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/fields/renderFieldLabel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,eAAO,MAAM,gBAAgB,UAAW,SAAS,eAAe,MAAM,KAAG,cAGrE,CAAC"}

package/client/formbuilder/fields/renderFieldLabel.js

@@ -1,3 +1,5 @@
 import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
 const isRequired = (field) => field.required === true ? html `<span class="text-danger-content">*</span>` : html ``;
-export const renderFieldLabel = (field) => html `<label for="${field.fieldId}">${field.label}${isRequired(field)}</label>`;
+export const renderFieldLabel = (field, classnames) => html `<label for="${field.fieldId}" class="${classnames || ''}"
+    >${field.label}${isRequired(field)}</label
+  >`;

package/client/formbuilder/fields/renderFormFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderFormFields.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/fields/renderFormFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAuBhD,eAAO,MAAM,gBAAgB,WAAY,SAAS,EAAE,KAAG,cAEtD,CAAC"}
+{"version":3,"file":"renderFormFields.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/fields/renderFormFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAwBhD,eAAO,MAAM,gBAAgB,WAAY,SAAS,EAAE,KAAG,cAEtD,CAAC"}

package/client/formbuilder/fields/renderFormFields.js

@@ -7,10 +7,11 @@ import { renderGroupField } from './renderGroupField.js';
 import { renderSelectionField } from './renderSelectionField.js';
 import { renderNumberField } from './renderNumberField.js';
 import { renderParagraphField } from './renderParagraphField.js';
+import { renderImageField } from './renderImageField.js';
 const renderFormField = (field) => html `
   ${choose(field.fieldType, [
     [FormFieldType.STRING, () => renderStringField(field)],
-    // [FormFieldType.IMAGE, () => renderImageField(field)], // TODO Image support goes here! DX-6082/6083
+    [FormFieldType.IMAGE, () => renderImageField(field)],
     [FormFieldType.PARAGRAPH, () => renderParagraphField(field)],
     [FormFieldType.NUMBER, () => renderNumberField(field)],
     [FormFieldType.BOOLEAN, () => renderBooleanField(field)],

package/client/formbuilder/fields/renderImageField.d.ts

@@ -0,0 +1,5 @@
+import type { FormField } from '@devvit/protos';
+import '../components/image-field/devvit-image-field.js';
+import type { TemplateResult } from 'lit';
+export declare const renderImageField: (field: FormField) => TemplateResult;
+//# sourceMappingURL=renderImageField.d.ts.map

package/client/formbuilder/fields/renderImageField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderImageField.d.ts","sourceRoot":"","sources":["../../../../library/src/client/formbuilder/fields/renderImageField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAKhD,OAAO,iDAAiD,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,eAAO,MAAM,gBAAgB,UAAW,SAAS,KAAG,cAoBnD,CAAC"}

package/client/formbuilder/fields/renderImageField.js

@@ -0,0 +1,26 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { renderFieldLabel } from './renderFieldLabel.js';
+import '../components/image-field/devvit-image-field.js';
+import { renderHelpText } from './renderHelpText.js';
+import { msg } from '@lit/localize';
+export const renderImageField = (field) => {
+    return html ` <div>
+    ${renderFieldLabel(field, 'font-semibold text-14 text-neutral-content-strong')}
+    ${renderHelpText(field.helpText)}
+    <devvit-form-image-field
+      class="flex mt-xs"
+      name="${field.fieldId}"
+      .field="${field}"
+    ></devvit-form-image-field>
+    <div class="flex flex-row justify-between text-12 text-neutral-content-weak mt-xs">
+      <span
+        >${msg('Formats: JPG, PNG, GIF, WEBP', {
+        desc: 'Supported formats for image upload',
+    })}</span
+      >
+      <span
+        >${msg('Max size: 2 MB', { desc: 'Max file size for image upload is 2 megabytes' })}</span
+      >
+    </div>
+  </div>`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.10.20-next-2024-04-26-62f55e1ef.0",
+  "version": "0.10.20-next-2024-04-29-43d2ba7f8.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -55,10 +55,10 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.10.20-next-2024-04-26-62f55e1ef.0",
-    "@devvit/runtime-lite": "0.10.20-next-2024-04-26-62f55e1ef.0",
-    "@devvit/runtimes": "0.10.20-next-2024-04-26-62f55e1ef.0",
-    "@devvit/shared-types": "0.10.20-next-2024-04-26-62f55e1ef.0",
+    "@devvit/protos": "0.10.20-next-2024-04-29-43d2ba7f8.0",
+    "@devvit/runtime-lite": "0.10.20-next-2024-04-29-43d2ba7f8.0",
+    "@devvit/runtimes": "0.10.20-next-2024-04-29-43d2ba7f8.0",
+    "@devvit/shared-types": "0.10.20-next-2024-04-29-43d2ba7f8.0",
     "@dotlottie/player-component": "2.7.2",
     "nice-grpc-web": "3.3.3",
     "p-queue": "7.3.4",
@@ -85,9 +85,9 @@
   },
   "devDependencies": {
     "@devvit/eslint-config": "0.10.19",
-    "@devvit/public-api": "0.10.20-next-2024-04-26-62f55e1ef.0",
+    "@devvit/public-api": "0.10.20-next-2024-04-29-43d2ba7f8.0",
     "@devvit/repo-tools": "0.10.19",
-    "@devvit/tsconfig": "0.10.20-next-2024-04-26-62f55e1ef.0",
+    "@devvit/tsconfig": "0.10.20-next-2024-04-29-43d2ba7f8.0",
     "@lit-labs/ssr": "^2.2.3",
     "@lit/localize": "0.11.4",
     "@open-wc/testing-helpers": "2.3.0",
@@ -119,5 +119,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "54561cf807ae5ee9fdfb6446e53d13504f6f89e7"
+  "gitHead": "72891389be34e9ce8222c37ec3fe6abda8ff9eef"
 }