@vc-shell/framework 1.0.187 → 1.0.189

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

@@ -0,0 +1,186 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import Checkbox from "../Checkbox";
+import { computed, reactive, ref } from "vue";
+import page from "./pages/DynamicRender";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { CheckboxSchema } from "../../..";
+
+export default {
+  title: "DynamicViews/atoms/VcCheckbox",
+  component: page,
+  args: {
+    id: "checkboxId",
+    component: "vc-checkbox",
+    content: "Checkbox text",
+    property: "mockedProperty",
+  },
+  argTypes: {
+    ..._.omit(SchemaBaseArgTypes, ["multilanguage", "placeholder"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-checkbox",
+        },
+        defaultValue: {
+          summary: "vc-checkbox",
+        },
+      },
+    },
+    content: {
+      description: `Checkbox text content.
+      Supports i18n keys.`,
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    trueValue: {
+      description: "Value when checkbox is checked.",
+      table: {
+        type: {
+          summary: "any",
+        },
+        defaultValue: {
+          summary: "true",
+        },
+      },
+    },
+    falseValue: {
+      description: "Value when checkbox is unchecked.",
+      table: {
+        type: {
+          summary: "any",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<CheckboxSchema>;
+
+export const Template: StoryFn<CheckboxSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: true,
+      },
+    });
+
+    return { args, context };
+  },
+  template,
+});
+
+export const Disabled: StoryFn<CheckboxSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: false,
+      },
+      scope: {
+        disabledFn: computed(() => true),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+Disabled.args = {
+  disabled: {
+    method: "disabledFn",
+  },
+};
+
+export const Checked: StoryFn<CheckboxSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: true,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const WithVisibilityMethod: StoryFn<CheckboxSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: false,
+      },
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  visibility: {
+    method: "visibilityFn",
+  },
+};
+
+export const HorizontalSeparator = Template.bind({});
+HorizontalSeparator.args = {
+  horizontalSeparator: true,
+};
+
+export const WithUpdateMethod: StoryFn<CheckboxSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: false,
+      },
+      scope: {
+        updateFn: (value: string) => alert(`Value updated to: ${value}`),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithUpdateMethod.args = {
+  update: {
+    method: "updateFn",
+  },
+};
+
+export const WithRequiredRule = Template.bind({});
+WithRequiredRule.args = {
+  rules: {
+    required: true,
+  },
+};

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

@@ -0,0 +1,246 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import ContentField from "../ContentField";
+import { computed, reactive, ref } from "vue";
+import page from "./pages/DynamicRender";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { FieldSchema } from "../../..";
+
+export default {
+  title: "DynamicViews/molecules/VcField",
+  component: page,
+  args: {
+    id: "ContentFieldId",
+    component: "vc-field",
+    property: "mockedProperty",
+    variant: "text",
+  },
+  argTypes: {
+    ..._.pick(SchemaBaseArgTypes, ["id", "property", "label", "visibility", "tooltip", "horizontalSeparator"]),
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-field",
+        },
+        defaultValue: {
+          summary: "vc-field",
+        },
+      },
+    },
+    variant: {
+      description: "Field variant.",
+      control: "radio",
+      options: ["date-ago", "date", "link", "text", "email"],
+      table: {
+        type: {
+          summary: "date-ago | date | link | text | email",
+        },
+        defaultValue: {
+          summary: "text",
+        },
+      },
+    },
+    copyable: {
+      description: "Whether the field is copyable or not.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    orientation: {
+      description: "Field orientation.",
+      control: "radio",
+      options: ["horizontal", "vertical"],
+      table: {
+        type: {
+          summary: "horizontal | vertical",
+        },
+        defaultValue: {
+          summary: "vertical",
+        },
+      },
+    },
+    aspectRatio: {
+      description: `Field columns aspect ratio.
+      Uses CSS flex-grow property.`,
+      control: "array",
+      table: {
+        type: {
+          summary: "[number, number]",
+        },
+        defaultValue: {
+          summary: "[1, 1]",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<FieldSchema>;
+
+export const Template: StoryFn<FieldSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: "I am a content field",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const WithLabel: StoryFn<FieldSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: "I am a content field",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithLabel.args = {
+  label: "Field label",
+};
+
+export const WithTooltip = WithLabel.bind({});
+WithTooltip.args = {
+  label: "Field label",
+  tooltip: "Field tooltip",
+};
+
+export const WithHorizontalOrientation = WithLabel.bind({});
+WithHorizontalOrientation.storyName = "Horizontal Orientation";
+WithHorizontalOrientation.args = {
+  label: "Field label",
+  orientation: "horizontal",
+};
+
+export const WithAspectRatio = WithLabel.bind({});
+WithAspectRatio.storyName = "Horizontal Orientation With Aspect Ratio 1:2";
+WithAspectRatio.args = {
+  label: "Field label",
+  orientation: "horizontal",
+  aspectRatio: [1, 2],
+};
+
+export const CopyableLink: StoryFn<FieldSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: "https://virtocommerce.com/",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+CopyableLink.args = {
+  label: "Field label",
+  variant: "link",
+  copyable: true,
+};
+
+export const DateAgo: StoryFn<FieldSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: new Date("01.01.2024"),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+DateAgo.args = {
+  label: "Field label",
+  variant: "date-ago",
+};
+
+export const SimpleDate: StoryFn<FieldSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: new Date(),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+SimpleDate.storyName = "Date";
+SimpleDate.args = {
+  label: "Field label",
+  variant: "date",
+};
+
+export const Email: StoryFn<FieldSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const context = reactive({
+      item: {
+        mockedProperty: "mail@seller.net",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+Email.args = {
+  label: "Field label",
+  variant: "email",
+};
+
+export const WithVisibilityMethod: StoryFn<FieldSchema> = (args) => ({
+  components: { page },
+  setup: () => {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        mockedProperty: "I am a content field",
+      },
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  label: "Field label",
+  visibility: { method: "visibilityFn" },
+};
+
+export const WithHorizontalSeparator = Template.bind({});
+WithHorizontalSeparator.args = {
+  label: "Field label",
+  horizontalSeparator: true,
+};

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

@@ -0,0 +1,185 @@
+import { Meta, StoryFn } from "@storybook/vue3";
+import EditorField from "../EditorField";
+import { template, templateWithVisibilityToggle } from "./common/templates";
+import page from "./pages/DynamicRender";
+import { nextTick, reactive, ref } from "vue";
+import * as _ from "lodash-es";
+import { SchemaBaseArgTypes } from "./common/args";
+import { EditorSchema } from "../../..";
+
+export default {
+  title: "DynamicViews/molecules/VcEditor",
+  component: page,
+  args: {
+    id: "EditorId",
+    component: "vc-editor",
+    property: "mockedProperty",
+  },
+  argTypes: {
+    ...SchemaBaseArgTypes,
+    component: {
+      description: "Component type.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "vc-field",
+        },
+        defaultValue: {
+          summary: "vc-field",
+        },
+      },
+    },
+    assetsFolder: {
+      description: "Assets folder for the editor image uploads.",
+      type: {
+        required: true,
+        name: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "none",
+      },
+    },
+  },
+} satisfies Meta<EditorSchema>;
+
+export const Template: StoryFn<EditorSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        id: "some-alpha-num-id",
+        mockedProperty: "I am an editor",
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: "Editor label",
+};
+
+export const WithTooltip = WithLabel.bind({});
+WithTooltip.args = {
+  label: "Editor label",
+  tooltip: "I am a tooltip",
+};
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  label: "Editor label",
+  placeholder: "I am a placeholder",
+};
+
+export const WithValidation: StoryFn<EditorSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        id: "some-alpha-num-id",
+        mockedProperty: null,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithValidation.args = {
+  label: "Editor label",
+  rules: { required: true },
+  placeholder: "I am a placeholder",
+};
+
+export const WithDisabled: StoryFn<EditorSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        id: "some-alpha-num-id",
+        mockedProperty: "I am an editor",
+      },
+      scope: {
+        disabledFn: true,
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithDisabled.args = {
+  label: "Editor label",
+  disabled: {
+    method: "disabledFn",
+  },
+};
+
+export const WithVisibilityMethod: StoryFn<EditorSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const isVisible = ref(false);
+    const toggle = () => {
+      isVisible.value = !isVisible.value;
+    };
+
+    const context = reactive({
+      item: {
+        id: "some-alpha-num-id",
+        mockedProperty: "I am an editor",
+      },
+      scope: {
+        visibilityFn: isVisible,
+      },
+    });
+    return { args, context, toggle };
+  },
+  template: templateWithVisibilityToggle,
+});
+WithVisibilityMethod.args = {
+  label: "Editor label",
+  visibility: {
+    method: "visibilityFn",
+  },
+};
+
+export const WithUpdateMethod: StoryFn<EditorSchema> = (args) => ({
+  components: { page },
+  setup() {
+    const context = reactive({
+      item: {
+        id: "some-alpha-num-id",
+        mockedProperty: undefined,
+      },
+      scope: {
+        updateFn: (value: string) => alert(`Value updated to: ${value}`),
+      },
+    });
+    return { args, context };
+  },
+  template,
+});
+WithUpdateMethod.args = {
+  label: "Editor label",
+  update: {
+    method: "updateFn",
+  },
+};
+
+export const WithHorizontalSeparator = Template.bind({});
+WithHorizontalSeparator.args = {
+  label: "Editor label",
+  horizontalSeparator: true,
+};