@pcg/dynamic-components 1.0.0-alpha.0

package/src/dynamic-components/registry/forms.ts

@@ -0,0 +1,525 @@
+import { DynamicComponent, ValidationRules } from '../types.js';
+
+export type ISizeType = 'middle' | 'large';
+
+export enum IImageRenditionType {
+  ORIGINAL = 'ORIGINAL',
+  MAIN_2X = 'MAIN_2X',
+  MAIN = 'MAIN',
+  SMALL = 'SMALL',
+  MAIN_LEGACY = 'MAIN_LEGACY',
+}
+
+export interface IRenditionOptions {
+  width: number;
+  height: number;
+  type: IImageRenditionType;
+  mimeType?: string;
+  quality?: number;
+}
+
+/* HIDDEN INPUT */
+export interface DHiddenInput extends DynamicComponent {
+  component: 'hidden-input';
+  props: {
+    name?: string;
+    rules?: ValidationRules;
+    testId?: string;
+  };
+}
+
+/* COMPUTED VALUE */
+export interface DComputedValue extends DynamicComponent {
+  component: 'computed-value';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    type: 'string' | 'number';
+    expression: string;
+    rules?: ValidationRules;
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isComputedValueComponent = (component: DynamicComponent): component is DComputedValue => component.component === 'computed-value';
+
+/* TEXT INPUT */
+export interface DTextInput extends DynamicComponent {
+  component: 'text-input';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    clearable?: boolean;
+    maska?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    rules?: ValidationRules;
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isTextInputComponent = (component: DynamicComponent): component is DTextInput => component.component === 'text-input';
+
+/* CONFIRM DELATION INPUT */
+export interface DConfirmDeletionInput extends DynamicComponent {
+  component: 'confirm-deletion-input';
+  props: {
+    title?: string;
+    text?: string;
+    keyWord: string;
+    testId?: string;
+  };
+}
+
+export const isConfirmDeletionInputComponent = (component: DynamicComponent):
+  component is DConfirmDeletionInput => component.component === 'confirm-deletion-input';
+
+/* TEXTAREA */
+export interface DTextarea extends DynamicComponent {
+  component: 'textarea';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    rows?: number;
+    autosize?: boolean;
+    lineBreak?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    rules?: ValidationRules;
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isTextareaComponent = (component: DynamicComponent): component is DTextarea => component.component === 'textarea';
+
+/* HEADING */
+export interface DHeading extends DynamicComponent {
+  component: 'heading';
+  props: {
+    text: string;
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isHeadingComponent = (component: DynamicComponent): component is DHeading => component.component === 'heading';
+
+/* RICH TEXT EDITOR */
+export interface DRichTextEditor extends DynamicComponent {
+  component: 'rich-text-editor';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    minHeight?: number;
+    maxLength?: number;
+    rules?: ValidationRules;
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isRichTextEditorComponent = (component: DynamicComponent): component is DRichTextEditor => component.component === 'rich-text-editor';
+
+/* DATE */
+export interface DDateTimePicker extends DynamicComponent {
+  component: 'date-time-picker';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    type?: 'year' | 'month' | 'date' | 'dates' | 'week' | 'datetime' | 'datetimerange' | 'daterange' | 'monthrange';
+    readonly?: boolean;
+    format?: string;
+    clearable?: boolean;
+    rules?: {
+      required?: boolean;
+    };
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isDateTimePickerComponent = (component: DynamicComponent): component is DDateTimePicker => {
+  return component.component === 'date-time-picker';
+};
+
+/* NUMBER */
+export interface DNumberInput extends DynamicComponent {
+  component: 'number-input';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    autosize?: boolean;
+    readonly?: boolean;
+    rules?: ValidationRules;
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isNumberInputComponent = (component: DynamicComponent): component is DNumberInput => {
+  return component.component === 'number-input';
+};
+
+/* SLUG */
+export interface DSlug extends DynamicComponent {
+  component: 'slug';
+  props: {
+    name?: string;
+    source?: string;
+    maxLength?: number;
+    readonly?: boolean;
+    rules?: {
+      required?: boolean;
+    };
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isSlugComponent = (component: DynamicComponent): component is DSlug => {
+  return component.component === 'slug';
+};
+
+/* Image Uploader DynamicComponent */
+export interface DImageUploader extends DynamicComponent {
+  component: 'image-uploader';
+  props: {
+    name?: string;
+    label?: string;
+    renditions: {
+      id: string;
+      position: string;
+      width: number;
+      height: number;
+      type: IImageRenditionType;
+    }[];
+    btnText?: string;
+    size?: ISizeType;
+    rounded?: ISizeType;
+    zoomable?: boolean;
+    downloadable?: boolean;
+    height?: number;
+    width?: number;
+    tooltipContent?: string;
+    hideTooltip?: boolean;
+    maxFileSize?: number;
+    readonly?: boolean;
+    visible?: string;
+    rules?: {
+      required?: boolean;
+    };
+    testId?: string;
+  };
+}
+
+export const isImageUploaderComponent = (component: DynamicComponent): component is DImageUploader => {
+  return component.component === 'image-uploader';
+};
+
+export interface DRawImageUploader extends DynamicComponent {
+  component: 'raw-image-uploader';
+  props: {
+    name?: string;
+    label?: string;
+    btnText?: string;
+    size?: ISizeType;
+    rounded?: boolean;
+    zoomable?: boolean;
+    downloadable?: boolean;
+    height?: number;
+    width?: number;
+    hideTooltip?: boolean;
+    tooltipContent?: string;
+    maxFileSize?: number;
+    visible?: string;
+    readonly?: boolean;
+    rules?: {
+      required?: boolean;
+    };
+    testId?: string;
+  };
+}
+
+export const isRawImageUploaderComponent = (component: DynamicComponent): component is DRawImageUploader => {
+  return component.component === 'raw-image-uploader';
+};
+export interface DRawImagesUploader extends DynamicComponent {
+  component: 'raw-images-uploader';
+  props: {
+    name?: string;
+    label?: string;
+    btnText?: string;
+    size?: ISizeType;
+    rounded?: boolean;
+    zoomable?: boolean;
+    downloadable?: boolean;
+    height?: number;
+    width?: number;
+    tooltipContent?: string;
+    hideTooltip?: boolean;
+    maxFileSize?: number;
+    visible?: string;
+    readonly?: boolean;
+    rules?: {
+      required?: boolean;
+      max?: number;
+    };
+    testId?: string;
+  };
+}
+
+export const isRawImagesUploaderComponent = (component: DynamicComponent): component is DRawImagesUploader => {
+  return component.component === 'raw-images-uploader';
+};
+
+export interface DSimpleImageUploader extends DynamicComponent {
+  component: 'simple-image-uploader';
+  props: {
+    name?: string;
+    label?: string;
+    rendition: {
+      width: number;
+      height: number;
+      type: IImageRenditionType;
+    };
+    btnText?: string;
+    size?: ISizeType;
+    rounded?: boolean;
+    zoomable?: boolean;
+    downloadable?: boolean;
+    width: number;
+    height: number;
+    hideTooltip?: boolean;
+    tooltipContent?: string;
+    maxFileSize?: number;
+    readonly?: boolean;
+    visible?: string;
+    rules?: {
+      required?: boolean;
+    };
+    testId?: string;
+  };
+}
+
+export const isSimpleImageUploaderComponent = (component: DynamicComponent): component is DSimpleImageUploader => {
+  return component.component === 'simple-image-uploader';
+};
+
+/* UPLOAD */
+// export interface DUpload extends DynamicComponent {
+//   component: 'upload';
+//   props: {
+//     fileType: string;
+//     listType?: 'text' | 'picture' | 'picture-card';
+//     limit?: number;
+//     multiple?: boolean;
+//     rules?: {
+//       required?: boolean;
+//     };
+//   };
+// }
+
+/* MONACO */
+// export interface DMonaco extends DynamicComponent {
+//   component: 'monaco';
+//   props: {
+//     height?: number;
+//     rules?: {
+//       required?: boolean;
+//     };
+//   };
+// }
+
+/* CONTENTFLOW */
+// export interface DDesigner extends DynamicComponent {
+//   component: 'designer';
+//   props: {
+//     name?: string;
+//   };
+// }
+
+/* RADIO GROUP */
+export interface DRadioGroup extends DynamicComponent {
+  component: 'radio-group';
+  props: {
+    name?: string;
+    label?: string;
+    cols?: number;
+    direction?: 'col' | 'row';
+    items: {
+      id: string;
+      position: string;
+      value: unknown;
+      label: string;
+    }[];
+    readonly?: boolean;
+    rules?: {
+      required?: boolean;
+    };
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isRadioGroupComponent = (component: DynamicComponent): component is DRadioGroup => {
+  return component.component === 'radio-group';
+};
+
+/* SELECT */
+export interface DSelect extends DynamicComponent {
+  component: 'select';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    clearable?: boolean;
+    options: {
+      id: string;
+      position: string;
+      value: unknown;
+      label: string;
+      imageUrl?: string;
+      disabled?: boolean;
+    }[];
+    readonly?: boolean;
+    multiple?: boolean;
+    rules?: {
+      required?: boolean;
+      max?: number;
+    };
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isSelectComponent = (cmp: DynamicComponent): cmp is DSelect => cmp.component === 'select';
+
+/* ENTITY */
+export interface DEntitySelect extends DynamicComponent {
+  component: 'entity-select';
+  props: {
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    entityType: string;
+    labelKey?: string;
+    idKey?: string;
+    filter?: Record<string, unknown>;
+    limit?: number;
+    multiple?: boolean;
+    visible?: string;
+    clearable?: boolean;
+    rules?: {
+      required?: boolean;
+    };
+    readonly?: boolean;
+    excludeIds?: string[];
+    imageUrlKey?: string;
+    defaultImageUrl?: string;
+    testId?: string;
+  };
+}
+
+export const isEntitySelectComponent = (cmp: DynamicComponent): cmp is DEntitySelect => cmp.component === 'entity-select';
+
+/* CHECKBOX */
+export interface DCheckbox extends DynamicComponent {
+  component: 'checkbox';
+  props: {
+    name?: string;
+    label?: string;
+    readonly?: boolean;
+    rules?: {
+      required?: boolean;
+    };
+    visible?: string;
+    testId?: string;
+  };
+}
+
+export const isCheckboxComponent = (component: DynamicComponent): component is DCheckbox => {
+  return component.component === 'checkbox';
+};
+
+/* CHECKBOX GROUP */
+export interface DCheckboxGroup extends DynamicComponent {
+  component: 'checkbox-group';
+  props: {
+    name?: string;
+    label?: string;
+    orientation?: 'horizontal' | 'vertical';
+    items: {
+      id: string;
+      position: string;
+      value: unknown;
+      label: string;
+    }[];
+    readonly?: boolean;
+    visible?: string;
+    rules?: {
+      required?: boolean;
+    };
+    testId?: string;
+  };
+}
+
+export const isCheckboxGroupComponent = (component: DynamicComponent): component is DCheckboxGroup => {
+  return component.component === 'checkbox';
+};
+
+/* SWITCH */
+export interface DSwitch extends DynamicComponent {
+  component: 'switch';
+  props: {
+    name?: string;
+    label?: string;
+    readonly?: boolean;
+    visible?: string;
+    rules?: {
+      required?: boolean;
+    };
+    testId?: string;
+  };
+}
+
+export const isSwitchComponent = (component: DynamicComponent): component is DSwitch => {
+  return component.component === 'switch';
+};
+
+/* File Uploader */
+export interface DFileUploader extends DynamicComponent {
+  component: 'file-uploader';
+  props: {
+    name?: string;
+    label?: string;
+    accept?: string;
+    placeholder?: string;
+    maxFileSize?: number;
+    downloadable?: boolean;
+    readonly?: boolean;
+    visible?: string;
+    rules?: {
+      required?: boolean;
+    };
+    testId?: string;
+  };
+}
+
+export const isFileUploaderComponent = (component: DynamicComponent): component is DFileUploader => {
+  return component.component === 'file-uploader';
+};

package/src/dynamic-components/registry/index.ts

@@ -0,0 +1,6 @@
+export * from './chats.js';
+export * from './content.js';
+export * from './forms.js';
+export * from './uikit-dynamic-component.js';
+export * from './layout.js';
+

package/src/dynamic-components/registry/layout.ts

@@ -0,0 +1,86 @@
+import { DynamicComponent, ValidationRules } from '../types.js';
+
+/* ROW & COLUMS */
+export interface DColumn extends DynamicComponent {
+  component: 'column';
+  props: {
+    size: number;
+    visible?: string;
+    justifySelf?: 'start' | 'center' | 'end' | 'stretch';
+    placeSelf?: 'start' | 'center' | 'end' | 'stretch';
+    components: DynamicComponent[];
+  };
+}
+
+export const isColumnComponent = (component: DynamicComponent): component is DColumn => {
+  return component.component === 'column';
+};
+
+export interface DRow extends DynamicComponent {
+  component: 'row';
+  props: {
+    components: DColumn[];
+    visible?: string;
+    placeItems?: 'start' | 'center' | 'end' | 'stretch';
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+  };
+}
+
+export const isRowComponent = (component: DynamicComponent): component is DRow => {
+  return component.component === 'row';
+};
+
+/* COLLECTION */
+export interface DCollection extends DynamicComponent {
+  component: 'collection';
+  props: {
+    name?: string;
+    heading: string;
+    components: DynamicComponent[];
+    rules?: ValidationRules;
+    readonly?: boolean;
+    visible?: string;
+  };
+}
+
+export const isCollectionComponent = (component: DynamicComponent): component is DCollection => {
+  return component.component === 'collection';
+};
+
+/* REPEATABLE COLLECTION */
+export interface DRepeatableCollection extends DynamicComponent {
+  component: 'repeatable-collection';
+  props: {
+    name?: string;
+    heading: string;
+    collectionTitle?: string;
+
+    useTabs?: boolean;
+    cols?: number;
+    tabName?: string;
+    confirmDeletion?: boolean;
+    addButtonText?: string;
+    readonly?: boolean;
+    components: DynamicComponent[];
+    visible?: string;
+    rules?: {
+      required?: boolean;
+    };
+  };
+}
+
+export const isRepeatableCollectionComponent = (component: DynamicComponent): component is DRepeatableCollection => {
+  return component.component === 'repeatable-collection';
+};
+
+/* RowSettings */
+export interface DRowSettings extends DynamicComponent {
+  component: 'row-settings';
+  props: {
+    label?: string;
+  };
+}
+
+export const isRowSettingsComponent = (component: DynamicComponent): component is DRowSettings => {
+  return component.component === 'row-settings';
+};

package/src/dynamic-components/registry/uikit-dynamic-component.ts

@@ -0,0 +1,84 @@
+import { DChatTextMessage } from './chats.js';
+import {
+  DBiblePassage,
+  DBibleQuote,
+  DEmbedCode,
+  DImage,
+  DRichText,
+} from './content.js';
+import type {
+  DCheckbox,
+  DCheckboxGroup,
+  DComputedValue,
+  DConfirmDeletionInput,
+  DDateTimePicker,
+  DEntitySelect,
+  DFileUploader,
+  DHeading,
+  DHiddenInput,
+  DImageUploader,
+  DNumberInput,
+  DRadioGroup,
+  DRawImagesUploader,
+  DRawImageUploader,
+  DRichTextEditor,
+  DSelect,
+  DSimpleImageUploader,
+  DSlug,
+  DSwitch,
+  DTextarea,
+  DTextInput,
+} from './forms.js';
+import {
+  DCollection,
+  DColumn,
+  DRepeatableCollection,
+  DRow,
+  DRowSettings,
+} from './layout.js';
+
+export type FormDynamicComponent =
+DTextInput
+| DCheckbox
+| DTextarea
+| DSelect
+| DEntitySelect
+| DRadioGroup
+| DCheckboxGroup
+| DFileUploader
+| DImageUploader
+| DSimpleImageUploader
+| DRawImageUploader
+| DSlug
+| DEmbedCode
+| DRichTextEditor
+| DNumberInput
+| DSwitch
+| DHeading
+| DRawImagesUploader
+| DDateTimePicker
+| DComputedValue
+| DHiddenInput
+| DConfirmDeletionInput
+
+export type UiKitContentDynamicComponent =
+DRichText
+| DEmbedCode
+| DImage
+| DBibleQuote
+| DBiblePassage;
+
+export type UiKitLayoutDynamicComponent =
+DRow
+| DColumn
+| DRowSettings
+| DCollection
+| DRepeatableCollection;
+
+export type UiKitChatDynamicComponent =
+  DChatTextMessage;
+
+export type UiKitDynamicComponent = FormDynamicComponent
+| UiKitContentDynamicComponent
+| UiKitLayoutDynamicComponent
+| UiKitChatDynamicComponent;