@vc-shell/framework 1.0.187 → 1.0.189

package/shared/modules/dynamic/components/fields/storybook/Fieldset.stories.ts

@@ -0,0 +1,409 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import page from "./pages/DynamicRender";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import { FieldsetSchema } from "../../../types";
+import { SchemaBaseArgTypes } from "./common/args";
+import * as _ from "lodash-es";
+import { reactive, ref } from "vue";
+
+export default {
+  title: "DynamicViews/special/Fieldset",
+  component: page,
+  args: {
+    id: "fieldsetId",
+    component: "vc-fieldset",
+    fields: [
+      {
+        id: "fieldId",
+        component: "vc-input",
+        label: "Input field",
+        placeholder: "Enter text here",
+        property: "mockedProperty",
+      },
+      {
+        id: "fieldId2",
+        component: "vc-input",
+        label: "Input field 2",
+        placeholder: "Enter text here",
+        property: "mockedProperty2",
+      },
+    ],
+  },
+  argTypes: {
+    ..._.pick(SchemaBaseArgTypes, ["id", "visibility", "horizontalSeparator"]),
+    property: {
+      description: `Property name to build \`fieldset\` from \`array of objects\`.
+      Data can be defined in either the \`item\` or the \`scope\`.
+      \nDot notation can also be used for nested properties, e.g. \`address.city\` or \`addresses[1].city\`.
+      `,
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    component: {
+      description: "Component type for field.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-fieldset",
+        },
+        defaultValue: {
+          summary: "vc-fieldset",
+        },
+      },
+    },
+    columns: {
+      description: "Number of columns to display the fields in.",
+      control: "number",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: {
+          summary: 1,
+        },
+      },
+    },
+    aspectRatio: {
+      description: `Array of numbers that define the aspect ratio of each column.
+      Example - If you have two columns - set to [1, 1] to make all columns equal width.
+      Uses CSS flex-grow property to set the width of each column.`,
+      control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: {
+          summary: "1:1",
+        },
+      },
+    },
+    fields: {
+      description: "Array of control schemas for the fields in the fieldset.",
+      type: {
+        required: true,
+        name: "other",
+        value: "ControlSchema[]",
+      },
+      table: {
+        type: {
+          summary: "ControlSchema[]",
+        },
+      },
+    },
+    remove: {
+      description: `Method to call to remove field from the fieldset. When set - activates remove button.
+      \nUsed for \`property\`-based fieldsets.
+      Allows to remove selected fieldset.
+      Method should be defined in the blade \`scope\`.
+      \n Argument - \`id\` of the field to remove`,
+      table: {
+        type: {
+          summary: "{ method: string }",
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  },
+  parameters: {
+    componentSubtitle:
+      "Fieldset allows displaying sets of any available controls of any nested depth. It allows arranging elements in a grid with a customizable number of columns and aspect ratio that allows to control columns width, the ability to build a grid with multiple rows based on an array of data bound to the fieldset using the property option. It also has visibility state settings and ability to remove elements from the fieldset.",
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<FieldsetSchema>;
+
+export const SingleColumn: StoryFn<FieldsetSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "value",
+        mockedProperty2: "value2",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const TwoColumns = SingleColumn.bind({});
+TwoColumns.args = {
+  columns: 2,
+};
+
+export const ThreeColumns: StoryFn<FieldsetSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "value",
+        mockedProperty2: "value2",
+        mockedProperty3: "value3",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+ThreeColumns.args = {
+  columns: 3,
+  fields: [
+    {
+      id: "fieldId",
+      component: "vc-input",
+      label: "Input field",
+      placeholder: "Enter text here",
+      property: "mockedProperty",
+    },
+    {
+      id: "fieldId2",
+      component: "vc-input",
+      label: "Input field 2",
+      placeholder: "Enter text here",
+      property: "mockedProperty2",
+    },
+    {
+      id: "fieldId3",
+      component: "vc-input",
+      label: "Input field 3",
+      placeholder: "Enter text here",
+      property: "mockedProperty3",
+    },
+  ],
+};
+
+export const ThreeColumnsWithAspectRatio = ThreeColumns.bind({});
+ThreeColumnsWithAspectRatio.args = {
+  columns: 3,
+  aspectRatio: [1, 2, 1],
+  fields: [
+    {
+      id: "fieldId",
+      component: "vc-input",
+      label: "Input field",
+      placeholder: "Enter text here",
+      property: "mockedProperty",
+    },
+    {
+      id: "fieldId2",
+      component: "vc-input",
+      label: "Input field 2",
+      placeholder: "Enter text here",
+      property: "mockedProperty2",
+    },
+    {
+      id: "fieldId3",
+      component: "vc-input",
+      label: "Input field 3",
+      placeholder: "Enter text here",
+      property: "mockedProperty3",
+    },
+  ],
+};
+
+export const PropertyBasedFieldsetInTwoColumns: StoryFn<FieldsetSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        dataArray: [
+          {
+            id: 1,
+            value: "value1",
+            label: "Label 1",
+            description: "Description 1",
+          },
+          {
+            id: 2,
+            value: "value2",
+            label: "Label 2",
+            description: "Description 2",
+          },
+          {
+            id: 3,
+            value: "value3",
+            label: "Label 3",
+            description: "Description 2",
+          },
+        ],
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+PropertyBasedFieldsetInTwoColumns.args = {
+  property: "dataArray",
+  columns: 2,
+  fields: [
+    {
+      id: "fieldId",
+      component: "vc-input",
+      label: "{label}",
+      placeholder: "Enter text here",
+      property: "value",
+    },
+    {
+      id: "textareaId",
+      component: "vc-textarea",
+      label: "{label}",
+      property: "description",
+    },
+  ],
+};
+
+export const RemoveField: StoryFn<FieldsetSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        dataArray: [
+          {
+            id: 1,
+            value: "value1",
+            label: "Label 1",
+          },
+          {
+            id: 2,
+            value: "value2",
+            label: "Label 2",
+          },
+          {
+            id: 3,
+            value: "value3",
+            label: "Label 3",
+          },
+        ],
+      },
+      scope: {
+        removeField: (id: number) => {
+          context.item.dataArray.splice(id, 1);
+        },
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+RemoveField.args = {
+  property: "dataArray",
+  fields: [
+    {
+      id: "fieldId",
+      component: "vc-input",
+      label: "{label}",
+      placeholder: "Enter text here",
+      property: "value",
+    },
+  ],
+  remove: { method: "removeField" },
+};
+
+export const NestedFieldsetsWithHorizontalSeparator: StoryFn<FieldsetSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        mockedProperty: "value",
+        mockedProperty2: "value2",
+        mockedProperty3: "value3",
+        mockedProperty4: "value4",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+NestedFieldsetsWithHorizontalSeparator.args = {
+  fields: [
+    {
+      id: "nestedFieldsetId",
+      component: "vc-fieldset",
+      fields: [
+        {
+          id: "fieldsetId",
+          component: "vc-fieldset",
+          columns: 2,
+          aspectRatio: [2, 1],
+          horizontalSeparator: true,
+          fields: [
+            {
+              id: "input1",
+              component: "vc-input",
+              label: "Input 1",
+              property: "mockedProperty",
+            },
+            {
+              id: "input2",
+              component: "vc-input",
+              label: "Input 2",
+              property: "mockedProperty2",
+            },
+          ],
+        },
+        {
+          id: "fieldsetId2",
+          component: "vc-fieldset",
+          columns: 2,
+          aspectRatio: [1, 2],
+          fields: [
+            {
+              id: "input1",
+              component: "vc-input",
+              label: "Input 1",
+              property: "mockedProperty3",
+            },
+            {
+              id: "input2",
+              component: "vc-input",
+              label: "Input 2",
+              property: "mockedProperty4",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const WithVisibilityMethod: StoryFn<FieldsetSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: "I am input field",
+        mockedProperty2: "I am input field 2",
+      },
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  visibility: { method: "visibilityFn" },
+};
+
+export const WithHorizontalSeparator = SingleColumn.bind({});
+WithHorizontalSeparator.args = {
+  horizontalSeparator: true,
+};

package/shared/modules/dynamic/components/fields/storybook/GalleryField.stories.ts

@@ -0,0 +1,239 @@
+import { computed, reactive, ref } from "vue";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import page from "./pages/DynamicRender";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { ICommonAsset } from "../../../../../..";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { GallerySchema } from "../../..";
+
+export default {
+  title: "DynamicViews/molecules/VcGallery",
+  component: page,
+  args: {
+    id: "GalleryFieldId",
+    component: "vc-gallery",
+    property: "mockedImages",
+  },
+  argTypes: {
+    ..._.omit(SchemaBaseArgTypes, ["placeholder", "multilanguage", "update", "horizontalSeparator"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-gallery",
+        },
+        defaultValue: {
+          summary: "vc-gallery",
+        },
+      },
+    },
+    variant: {
+      description: "Gallery type.",
+      control: "radio",
+      options: ["gallery", "file-upload"],
+      table: {
+        type: {
+          summary: "gallery | file-upload",
+        },
+        defaultValue: {
+          summary: "gallery",
+        },
+      },
+    },
+    multiple: {
+      description: "Whether the gallery has multiple files upload or not.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    actions: {
+      description: "Gallery item button actions on hover.",
+      control: "object",
+      table: {
+        type: {
+          summary: `{
+            preview: boolean;
+            edit: boolean;
+            remove: boolean;
+          }`,
+        },
+        defaultValue: {
+          summary: `{ preview: true, edit: true, remove: true }`,
+        },
+      },
+    },
+    hideAfterUpload: {
+      description: "Whether the upload is hides after upload or not.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<GallerySchema>;
+
+const images = ref<ICommonAsset[]>([
+  {
+    id: "1",
+    url: "https://picsum.photos/200",
+  },
+  {
+    id: "2",
+    url: "https://picsum.photos/200",
+  },
+  {
+    id: "3",
+    url: "https://picsum.photos/200",
+  },
+]);
+
+const assetsHandler = {
+  images: {
+    upload: (files: FileList) => {
+      const uploadedImages = ref<ICommonAsset[]>([]);
+      for (let i = 0; i < files.length; i++) {
+        uploadedImages.value.push({
+          id: Math.random().toString(36).substring(7),
+          url: URL.createObjectURL(files[i]),
+        });
+      }
+
+      return uploadedImages.value;
+    },
+    remove: (files: ICommonAsset[]) => images.value.filter((image) => !files.includes(image)),
+    edit: (files: ICommonAsset[]) => files,
+  },
+};
+
+export const Template: StoryFn<GallerySchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedImages: images,
+      },
+      scope: {
+        assetsHandler,
+      },
+    });
+
+    return { args, context };
+  },
+  template,
+});
+
+export const Label = Template.bind({});
+Label.args = {
+  label: "Gallery label",
+};
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: "Gallery label",
+  tooltip: "Gallery tooltip",
+};
+
+export const WithDisabled: StoryFn<GallerySchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedImages: images,
+      },
+      scope: {
+        assetsHandler: {
+          images: {},
+        },
+        disabledFn: computed(() => true),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithDisabled.args = {
+  label: "Gallery label",
+  disabled: { method: "disabledFn" },
+};
+
+export const WithVisibilityMethod: StoryFn<GallerySchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedImages: images,
+      },
+      scope: {
+        assetsHandler: {
+          images: {},
+        },
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  label: "Gallery label",
+  visibility: { method: "visibilityFn" },
+};
+
+export const FileUpload: StoryFn<GallerySchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const image = ref([]);
+    const context = reactive({
+      item: {
+        mockedImages: image,
+      },
+      scope: {
+        assetsHandler,
+      },
+    });
+
+    return { args, context };
+  },
+  template,
+});
+FileUpload.storyName = "Single file upload with hide after upload";
+FileUpload.args = {
+  variant: "file-upload",
+  hideAfterUpload: true,
+};
+
+export const WithoutItemActions = Template.bind({});
+WithoutItemActions.args = {
+  label: "Gallery label",
+  actions: {
+    preview: false,
+    edit: false,
+    remove: false,
+  },
+};