@devvit/ui-renderer 0.9.0 → 0.9.2

package/client/formbuilder/devvit-form-dialog.js

@@ -0,0 +1,152 @@
+var _DevvitFormDialog_onEvent, _DevvitFormDialog_idMap, _DevvitFormDialog_makeIdMap, _DevvitFormDialog_collectValues, _DevvitFormDialog_submitClicked, _DevvitFormDialog_cancelClicked, _DevvitFormDialog_closeDialog, _DevvitFormDialog_renderTitle, _DevvitFormDialog_renderDescription, _DevvitFormDialog_renderButtons;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { button, ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
+import { FaceplateDialog } from '@reddit/faceplate-ui/components/faceplate-dialog.js';
+import { msg } from '@reddit/faceplate/lib/i18n/localize.js';
+import { FaceplateForm } from '@reddit/faceplate/components/faceplate-form.js';
+import { FormFieldType, FormFieldValue, UIEvent } from '@devvit/protos';
+import { renderFormFields } from './fields/index.js';
+import { styles } from '../../styles.js';
+import '@reddit/faceplate-ui/components/faceplate-dialog';
+import '@reddit/faceplate/components/faceplate-form.js';
+let DevvitFormDialog = class DevvitFormDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DevvitFormDialog_onEvent.set(this, () => { });
+        _DevvitFormDialog_idMap.set(this, {});
+        _DevvitFormDialog_makeIdMap.set(this, (fields) => fields.reduce((map, field) => {
+            if (field.fieldType === FormFieldType.GROUP) {
+                return __classPrivateFieldGet(this, _DevvitFormDialog_makeIdMap, "f").call(this, field.fieldConfig?.groupConfig?.fields ?? []);
+            }
+            map[field.fieldId] = field;
+            return map;
+        }, {}));
+        _DevvitFormDialog_collectValues.set(this, () => {
+            const values = {};
+            if (!this.$form) {
+                return values;
+            }
+            for (const f of this.$form.elementsIterator()) {
+                const { name, value } = f;
+                const { fieldType } = __classPrivateFieldGet(this, _DevvitFormDialog_idMap, "f")[name];
+                const fieldValue = FormFieldValue.fromPartial({
+                    fieldType,
+                });
+                switch (fieldType) {
+                    case FormFieldType.STRING:
+                    case FormFieldType.PARAGRAPH:
+                        if (value === null || value.trim() === '') {
+                            continue;
+                        }
+                        fieldValue.stringValue = value;
+                        break;
+                    case FormFieldType.NUMBER:
+                        fieldValue.numberValue = Number(value || 0);
+                        break;
+                    case FormFieldType.BOOLEAN:
+                        fieldValue.boolValue = value === 'true' || value === 'on';
+                        break;
+                    case FormFieldType.SELECTION:
+                        if (value === null || value.trim() === '') {
+                            continue;
+                        }
+                        fieldValue.selectionValue = { values: value.split(',') };
+                        break;
+                }
+                values[name] = fieldValue;
+            }
+            return values;
+        });
+        _DevvitFormDialog_submitClicked.set(this, () => {
+            __classPrivateFieldGet(this, _DevvitFormDialog_onEvent, "f").call(this, UIEvent.fromPartial({
+                formSubmitted: {
+                    formId: this.form?.id,
+                    results: __classPrivateFieldGet(this, _DevvitFormDialog_collectValues, "f").call(this),
+                },
+            }));
+            __classPrivateFieldGet(this, _DevvitFormDialog_closeDialog, "f").call(this);
+        });
+        _DevvitFormDialog_cancelClicked.set(this, () => {
+            __classPrivateFieldGet(this, _DevvitFormDialog_closeDialog, "f").call(this);
+        });
+        _DevvitFormDialog_closeDialog.set(this, () => {
+            this.$dialog?.close();
+            this.form = undefined;
+            __classPrivateFieldSet(this, _DevvitFormDialog_idMap, {}, "f");
+        });
+        _DevvitFormDialog_renderTitle.set(this, () => html `<span class="text-32 py-sm">${this.form?.title}</span>`);
+        _DevvitFormDialog_renderDescription.set(this, () => html `<span class="pb-md">${this.form?.shortDescription}</span>`);
+        _DevvitFormDialog_renderButtons.set(this, () => html `
+    <div class="flex justify-end space-x-xs">
+      ${button({
+            appearance: 'primary',
+            size: ButtonSize.Medium,
+            children: this.form?.acceptLabel ?? msg('OK', { desc: 'Submit input for the custom action' }),
+            attributes: {
+                type: 'submit',
+                onclick: __classPrivateFieldGet(this, _DevvitFormDialog_submitClicked, "f"),
+            },
+        })}
+      ${button({
+            appearance: 'secondary',
+            size: ButtonSize.Medium,
+            children: this.form?.cancelLabel ??
+                msg('Cancel', { desc: 'Cancel custom action and dismiss dialog' }),
+            attributes: {
+                onclick: __classPrivateFieldGet(this, _DevvitFormDialog_cancelClicked, "f"),
+            },
+        })}
+    </div>
+  `);
+    }
+    static get styles() {
+        return [styles];
+    }
+    showForm(form, onEvent) {
+        if (this.$dialog) {
+            this.form = form;
+            __classPrivateFieldSet(this, _DevvitFormDialog_idMap, __classPrivateFieldGet(this, _DevvitFormDialog_makeIdMap, "f").call(this, form.fields), "f");
+            __classPrivateFieldSet(this, _DevvitFormDialog_onEvent, onEvent, "f");
+            this.$dialog.showModal();
+        }
+    }
+    render() {
+        return html `
+      <faceplate-dialog class="z-dialog w-[32rem] overflow-auto">
+        <div class="flex flex-col gap-y-sm">
+          ${when(this.form?.title, __classPrivateFieldGet(this, _DevvitFormDialog_renderTitle, "f"))}
+          ${when(this.form?.shortDescription, __classPrivateFieldGet(this, _DevvitFormDialog_renderDescription, "f"))}
+          <faceplate-form
+            @faceplate-submit="${(ev) => ev.preventDefault()}"
+            class="flex flex-col gap-y-sm"
+          >
+            ${renderFormFields(this.form?.fields ?? [])}
+            <!---->
+            ${__classPrivateFieldGet(this, _DevvitFormDialog_renderButtons, "f").call(this)}
+          </faceplate-form>
+        </div>
+      </faceplate-dialog>
+    `;
+    }
+};
+_DevvitFormDialog_onEvent = new WeakMap(), _DevvitFormDialog_idMap = new WeakMap(), _DevvitFormDialog_makeIdMap = new WeakMap(), _DevvitFormDialog_collectValues = new WeakMap(), _DevvitFormDialog_submitClicked = new WeakMap(), _DevvitFormDialog_cancelClicked = new WeakMap(), _DevvitFormDialog_closeDialog = new WeakMap(), _DevvitFormDialog_renderTitle = new WeakMap(), _DevvitFormDialog_renderDescription = new WeakMap(), _DevvitFormDialog_renderButtons = new WeakMap();
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitFormDialog.prototype, "form", void 0);
+__decorate([
+    query('faceplate-dialog', true),
+    __metadata("design:type", FaceplateDialog)
+], DevvitFormDialog.prototype, "$dialog", void 0);
+__decorate([
+    query('faceplate-form', true),
+    __metadata("design:type", FaceplateForm)
+], DevvitFormDialog.prototype, "$form", void 0);
+DevvitFormDialog = __decorate([
+    customElement('devvit-form-dialog')
+], DevvitFormDialog);
+export { DevvitFormDialog };

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

@@ -0,0 +1,12 @@
+export * from './renderBooleanField.js';
+export * from './renderFieldLabel.js';
+export * from './renderFormFields.js';
+export * from './renderGroupField.js';
+export * from './renderHelpText.js';
+export * from './renderListField.js';
+export * from './renderNumberField.js';
+export * from './renderParagraphField.js';
+export * from './renderSelectionField.js';
+export * from './renderStringField.js';
+export type OnInputDelegate = (event: InputEvent | CustomEvent) => void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,WAAW,KAAK,IAAI,CAAC"}

package/client/formbuilder/fields/index.js

@@ -0,0 +1,10 @@
+export * from './renderBooleanField.js';
+export * from './renderFieldLabel.js';
+export * from './renderFormFields.js';
+export * from './renderGroupField.js';
+export * from './renderHelpText.js';
+export * from './renderListField.js';
+export * from './renderNumberField.js';
+export * from './renderParagraphField.js';
+export * from './renderSelectionField.js';
+export * from './renderStringField.js';

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

@@ -0,0 +1,4 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-switch-input.js';
+export declare const renderBooleanField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderBooleanField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderBooleanField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderBooleanField.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,2DAA2D,CAAC;AAEnE,eAAO,MAAM,kBAAkB,UAAW,SAAS,yCAWlD,CAAC"}

package/client/formbuilder/fields/renderBooleanField.js

@@ -0,0 +1,14 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import '@reddit/faceplate-ui/components/faceplate-switch-input.js';
+export const renderBooleanField = (field) => html `
+  <faceplate-switch-input
+    id="${field.fieldId}"
+    name="${field.fieldId}"
+    class="py-xs border-0"
+    ?required="${field.required}"
+    ?checked="${field.defaultValue?.boolValue}"
+    ?disabled="${field.disabled}"
+  >
+    ${field.label}
+  </faceplate-switch-input>
+`;

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

@@ -0,0 +1,3 @@
+import { FormField } from '@devvit/protos';
+export declare const renderFieldLabel: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderFieldLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderFieldLabel.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderFieldLabel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,eAAO,MAAM,gBAAgB,UAAW,SAAS,yCAC+B,CAAC"}

package/client/formbuilder/fields/renderFieldLabel.js

@@ -0,0 +1,3 @@
+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>`;

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

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { FormField } from '@devvit/protos';
+export declare const renderFormFields: (fields: FormField[]) => TemplateResult;
+//# sourceMappingURL=renderFormFields.d.ts.map

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

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

package/client/formbuilder/fields/renderFormFields.js

@@ -0,0 +1,18 @@
+import { choose } from 'lit/directives/choose.js';
+import { html, repeat } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FormFieldType } from '@devvit/protos';
+import { renderBooleanField, renderGroupField, renderNumberField, renderParagraphField, renderSelectionField, renderStringField, } from './index.js';
+const renderFormField = (field) => html `
+  ${choose(field.fieldType, [
+    [FormFieldType.STRING, () => renderStringField(field)],
+    [FormFieldType.PARAGRAPH, () => renderParagraphField(field)],
+    [FormFieldType.NUMBER, () => renderNumberField(field)],
+    [FormFieldType.BOOLEAN, () => renderBooleanField(field)],
+    // [FormFieldType.LIST, () => renderListField(field)],
+    [FormFieldType.SELECTION, () => renderSelectionField(field)],
+    [FormFieldType.GROUP, () => renderGroupField(field)],
+])}
+`;
+export const renderFormFields = (fields) => {
+    return html `${repeat(fields, (field) => renderFormField(field))}`;
+};

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

@@ -0,0 +1,3 @@
+import { FormField } from '@devvit/protos';
+export declare const renderGroupField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderGroupField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderGroupField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderGroupField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,eAAO,MAAM,gBAAgB,UAAW,SAAS,yCAShD,CAAC"}

package/client/formbuilder/fields/renderGroupField.js

@@ -0,0 +1,13 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { renderFormFields } from './renderFormFields.js';
+import { renderFieldLabel } from './renderFieldLabel.js';
+export const renderGroupField = (field) => {
+    return html `
+    <div class="flex flex-col py-xs border-0 gap-y-xs">
+      ${renderFieldLabel(field)}
+      <div class="flex flex-col border border-solid border-tone-4 rounded-sm px-xs">
+        ${renderFormFields(field.fieldConfig?.groupConfig?.fields ?? [])}
+      </div>
+    </div>
+  `;
+};

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

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+export declare const renderHelpText: (helpText?: string | undefined) => TemplateResult;
+//# sourceMappingURL=renderHelpText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderHelpText.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderHelpText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrC,OAAO,+DAA+D,CAAC;AAEvE,eAAO,MAAM,cAAc,cAAe,MAAM,GAAG,SAAS,KAAG,cACiC,CAAC"}

package/client/formbuilder/fields/renderHelpText.js

@@ -0,0 +1,3 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+export const renderHelpText = (helpText) => helpText ? html `<faceplate-form-helper-text>${helpText}</faceplate-form-helper-text>` : html ``;

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=renderListField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderListField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderListField.ts"],"names":[],"mappings":""}

package/client/formbuilder/fields/renderListField.js

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

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

@@ -0,0 +1,4 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export declare const renderNumberField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderNumberField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderNumberField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderNumberField.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,yDAAyD,CAAC;AAEjE,eAAO,MAAM,iBAAiB,UAAW,SAAS,yCAmBjD,CAAC"}

package/client/formbuilder/fields/renderNumberField.js

@@ -0,0 +1,23 @@
+import { html, ifDefined } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FieldConfig_Number } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export const renderNumberField = (field) => {
+    const { min, max, step } = field.fieldConfig?.numberConfig ?? FieldConfig_Number.fromPartial({});
+    return html `
+    <faceplate-text-input
+      id="${field.fieldId}"
+      name="${field.fieldId}"
+      class="py-xs border-0"
+      type="number"
+      value="${field.defaultValue?.numberValue ?? 0}"
+      min="${ifDefined(min)}"
+      max="${ifDefined(max)}"
+      step="${ifDefined(step)}"
+      ?required="${field.required}"
+      ?disabled="${field.disabled}"
+      innerLabel
+    >
+      <span slot="label">${field.label}</span>
+    </faceplate-text-input>
+  `;
+};

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

@@ -0,0 +1,5 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-textarea-input.js';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+export declare const renderParagraphField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderParagraphField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderParagraphField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderParagraphField.ts"],"names":[],"mappings":"AAIA,OAAO,EAAyB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIlE,OAAO,6DAA6D,CAAC;AACrE,OAAO,+DAA+D,CAAC;AAGvE,eAAO,MAAM,oBAAoB,UAAW,SAAS,yCAoBpD,CAAC"}

package/client/formbuilder/fields/renderParagraphField.js

@@ -0,0 +1,25 @@
+import { html, ifDefined } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FieldConfig_Paragraph } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-textarea-input.js';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+import { renderHelpText } from './renderHelpText.js';
+export const renderParagraphField = (field) => {
+    const { lineHeight, maxCharacters, placeholder } = field.fieldConfig?.paragraphConfig ?? FieldConfig_Paragraph.fromPartial({});
+    return html `
+    <faceplate-textarea-input
+      id="${field.fieldId}"
+      name="${field.fieldId}"
+      class="py-xs border-0"
+      value="${ifDefined(field.defaultValue?.stringValue)}"
+      placeholder="${ifDefined(placeholder)}"
+      rows="${ifDefined(lineHeight)}"
+      maxlength="${ifDefined(maxCharacters)}"
+      ?disabled="${field.disabled}"
+      ?required="${field.required}"
+      innerLabel
+    >
+      <span slot="label">${field.label}</span>
+    </faceplate-textarea-input>
+    ${renderHelpText(field.helpText)}
+  `;
+};

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

@@ -0,0 +1,5 @@
+import { FormField } from '@devvit/protos';
+import '../components/devvit-form-selection-dropdown.js';
+import '../components/devvit-form-selection-list.js';
+export declare const renderSelectionField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderSelectionField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderSelectionField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderSelectionField.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AAErD,eAAO,MAAM,oBAAoB,UAAW,SAAS,yCAapD,CAAC"}

package/client/formbuilder/fields/renderSelectionField.js

@@ -0,0 +1,18 @@
+import { renderFieldLabel } from './index.js';
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import '../components/devvit-form-selection-dropdown.js';
+import '../components/devvit-form-selection-list.js';
+export const renderSelectionField = (field) => {
+    if (field.fieldConfig?.selectionConfig?.renderAsList === true) {
+        return html `<devvit-form-selection-list
+      name="${field.fieldId}"
+      .field="${field}"
+    ></devvit-form-selection-list>`;
+    }
+    return html `${renderFieldLabel(field)}
+    <devvit-form-selection-dropdown
+      class="flex flex-row"
+      name="${field.fieldId}"
+      .field="${field}"
+    ></devvit-form-selection-dropdown>`;
+};

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

@@ -0,0 +1,4 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export declare const renderStringField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderStringField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderStringField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderStringField.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,yDAAyD,CAAC;AAEjE,eAAO,MAAM,iBAAiB,UAAW,SAAS,yCAqBjD,CAAC"}

package/client/formbuilder/fields/renderStringField.js

@@ -0,0 +1,24 @@
+import { html, ifDefined } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FieldConfig_String } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export const renderStringField = (field) => {
+    const { minLength, maxLength, placeholder } = field.fieldConfig?.stringConfig ?? FieldConfig_String.fromPartial({});
+    return html `
+    <faceplate-text-input
+      id="${field.fieldId}"
+      name="${field.fieldId}"
+      class="py-xs border-0"
+      type="text"
+      value="${ifDefined(field.defaultValue?.stringValue)}"
+      placeholder="${ifDefined(placeholder)}"
+      helperText="${ifDefined(field.helpText)}"
+      minlength="${ifDefined(minLength)}"
+      maxlength="${ifDefined(maxLength)}"
+      ?disabled="${field.disabled}"
+      ?required="${field.required}"
+      innerLabel
+    >
+      <span slot="label">${field.label}</span>
+    </faceplate-text-input>
+  `;
+};

package/client/formbuilder/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/client/formbuilder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/formbuilder/index.ts"],"names":[],"mappings":""}

package/client/formbuilder/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -9,34 +9,36 @@
   "type": "module",
   "main": "./index.js",
   "scripts": {
-    "build": "tsc && yarn styles:copy",
+    "build": "yarn build:typescript && yarn build:styles",
+    "build:styles": "postcss -c postcss.config.cjs styles.css -o dist/styles.css && yarn build:styles-dist",
+    "build:styles-dist": "node scripts/make-styles.js",
+    "build:typescript": "tsc",
     "clean": "rm -rf .turbo coverage dist",
     "clobber": "yarn clean && rm -rf node_modules",
-    "dev": "yarn styles:copy && tsc -w",
+    "dev": "concurrently -n 'styles,styles-dist,typescript' 'yarn watch:styles' 'yarn watch:styles-dist' 'yarn watch:typescript'",
     "lint": "redlint .",
     "lint:fix": "yarn lint --fix",
     "prepublishOnly": "publish-package-json",
-    "styles:clean": "rm -f dist/styles.css",
-    "styles:copy": "yarn styles:clean && cp styles.css dist/styles.css && cp tailwind.devvit.cjs dist/tailwind.devvit.cjs",
-    "styles:dev": "echo 'todo make a filewatcher for styles.css or build it in less and use the preprocessor watch mode'",
     "test": "yarn test:unit && yarn test:types && yarn lint",
     "test:types": "tsc --noEmit",
     "test:unit": "vitest run",
-    "test:unit-with-coverage": "vitest run --coverage"
+    "test:unit-with-coverage": "vitest run --coverage",
+    "watch:styles": "postcss -w -c postcss.config.cjs styles.css -o dist/styles.css",
+    "watch:styles-dist": "node scripts/make-styles.js --watch",
+    "watch:typescript": "tsc -w"
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.9.0",
-    "@devvit/runtimes": "0.9.0",
+    "@devvit/protos": "0.9.2",
+    "@devvit/runtimes": "0.9.2",
     "@lottiefiles/lottie-player": "1.7.1",
     "p-queue": "7.3.4",
     "rxjs": "7.5.7"
   },
   "peerDependencies": {
     "@reddit/baseplate": "0.14.0",
-    "@reddit/faceplate": "2.0.0",
-    "@reddit/faceplate-ui": "1.0.5-6",
-    "@reddit/shreddit.styles": "^1.0.8"
+    "@reddit/faceplate": "2.x",
+    "@reddit/faceplate-ui": "2.x"
   },
   "peerDependenciesMeta": {
     "@reddit/baseplate": {
@@ -47,25 +49,29 @@
     },
     "@reddit/faceplate-ui": {
       "optional": true
-    },
-    "@reddit/shreddit.styles": {
-      "optional": true
     }
   },
   "optionalDependencies": {
     "lit": "^2.0.0"
   },
   "devDependencies": {
-    "@devvit/eslint-config": "0.9.0",
-    "@devvit/public-api": "0.9.0",
-    "@devvit/repo-tools": "0.9.0",
-    "@devvit/tsconfig": "0.9.0",
+    "@devvit/eslint-config": "0.9.2",
+    "@devvit/public-api": "0.9.2",
+    "@devvit/repo-tools": "0.9.2",
+    "@devvit/tsconfig": "0.9.2",
+    "@lit/localize": "0.11.4",
     "@reddit/baseplate": "0.14.0",
     "@reddit/eslint-plugin-i18n-shreddit": "0.1.0",
-    "@reddit/faceplate": "2.0.0",
-    "@reddit/faceplate-ui": "2.0.0",
+    "autoprefixer": "10.4.14",
+    "chokidar": "3.5.3",
+    "concurrently": "7.5.0",
+    "debounce": "1.2.1",
     "eslint": "8.9.0",
     "lit": "^2.0.0",
+    "postcss": "8.4.22",
+    "postcss-cli": "10.1.0",
+    "postcss-import": "15.1.0",
+    "tailwindcss": "3.3.1",
     "typescript": "4.9.3",
     "vitest": "0.8.2"
   },
@@ -73,5 +79,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "199c828f2632d9c09e6dc4182988cd7693704848"
+  "gitHead": "409f899e60151c9a3b01d0804419efc1e63fb507"
 }