npm - lowcoder-comps - Versions diffs - 0.0.7 → 0.0.9 - Mend

lowcoder-comps 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/icons/icon-chart.svg +15 -0
package/icons/icon-comp-calendar.svg +22 -0
package/index.html +26 -0
package/index.tsx +19 -0
package/jest.config.js +5 -0
package/package.json +1 -4
package/src/__test__/allComp.test.tsx +61 -0
package/src/app-env.d.ts +3 -0
package/src/comps/calendarComp/calendarComp.tsx +442 -0
package/src/comps/calendarComp/calendarConstants.tsx +897 -0
package/src/comps/chartComp/chartComp.tsx +249 -0
package/src/comps/chartComp/chartConfigs/barChartConfig.tsx +51 -0
package/src/comps/chartComp/chartConfigs/cartesianAxisConfig.tsx +307 -0
package/src/comps/chartComp/chartConfigs/chartUrls.tsx +6 -0
package/src/comps/chartComp/chartConfigs/legendConfig.tsx +55 -0
package/src/comps/chartComp/chartConfigs/lineChartConfig.tsx +96 -0
package/src/comps/chartComp/chartConfigs/pieChartConfig.tsx +83 -0
package/src/comps/chartComp/chartConfigs/scatterChartConfig.tsx +62 -0
package/src/comps/chartComp/chartConstants.tsx +243 -0
package/src/comps/chartComp/chartPropertyView.tsx +161 -0
package/src/comps/chartComp/chartUtils.ts +240 -0
package/src/comps/chartComp/reactEcharts/core.tsx +187 -0
package/src/comps/chartComp/reactEcharts/index.ts +20 -0
package/src/comps/chartComp/reactEcharts/types.ts +70 -0
package/src/comps/chartComp/seriesComp.tsx +119 -0
package/src/comps/imageEditorComp/imageEditorClass.tsx +52 -0
package/src/comps/imageEditorComp/imageEditorConstants.tsx +109 -0
package/src/comps/imageEditorComp/index.tsx +184 -0
package/src/comps/mermaidComp/index.tsx +44 -0
package/src/comps/mermaidComp/mermaid.tsx +29 -0
package/src/global.ts +1 -0
package/src/i18n/comps/index.tsx +29 -0
package/src/i18n/comps/locales/en.ts +142 -0
package/src/i18n/comps/locales/enObj.tsx +120 -0
package/src/i18n/comps/locales/index.ts +7 -0
package/src/i18n/comps/locales/types.tsx +9 -0
package/src/i18n/comps/locales/zh.ts +4 -0
package/src/i18n/comps/locales/zhObj.tsx +4 -0
package/src/index.ts +11 -0
package/vite.config.js +10 -0

package/icons/icon-chart.svg ADDED Viewed

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(6.000000, 11.500000)" stroke="#D7D9E0" stroke-linecap="round" stroke-width="2">
+      <line x1="-2.00715996e-17" y1="0.5" x2="36" y2="0.5"/>
+      <line x1="-2.00715996e-17" y1="8.5" x2="36" y2="8.5"/>
+      <line x1="2.70913881e-14" y1="16.5" x2="36" y2="16.5"/>
+      <line x1="2.70913881e-14" y1="24.5" x2="36" y2="24.5"/>
+    </g>
+    <g transform="translate(11.000000, 10.000000)" fill="#3377FF">
+      <path d="M11,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,25 L16,25 L10,25 L10,1 C10,0.44771525 10.4477153,7.67586877e-16 11,0 Z"/>
+      <path d="M1,13 L5,13 C5.55228475,13 6,13.4477153 6,14 L6,25 L6,25 L0,25 L0,14 C-6.76353751e-17,13.4477153 0.44771525,13 1,13 Z"/>
+      <path d="M21,6 L25,6 C25.5522847,6 26,6.44771525 26,7 L26,25 L26,25 L20,25 L20,7 C20,6.44771525 20.4477153,6 21,6 Z"/>
+    </g>
+  </g>
+</svg>

package/icons/icon-comp-calendar.svg ADDED Viewed

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(6.000000, 5.000000)">
+            <rect stroke="#D7D9E0" stroke-width="2" fill="#FFFFFF" x="1" y="4" width="34" height="30" rx="3"></rect>
+            <g transform="translate(5.000000, 14.000000)">
+                <rect fill="#3377FF" x="14" y="0" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="7" y="0" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#3377FF" x="14" y="6" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="7" y="6" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="0" y="6" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="7" y="12" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="0" y="12" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="21" y="0" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="21" y="6" width="5" height="5" rx="1.5"></rect>
+            </g>
+            <path d="M3,3 L33,3 C34.6568542,3 36,4.34314575 36,6 L36,12 L36,12 L0,12 L0,6 C-2.02906125e-16,4.34314575 1.34314575,3 3,3 Z" fill="#D7D9E0"></path>
+            <rect fill="#D7D9E0" x="7" y="0" width="4" height="8" rx="1"></rect>
+            <rect fill="#D7D9E0" x="25" y="0" width="4" height="8" rx="1"></rect>
+        </g>
+    </g>
+</svg>

package/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lowcoder Comp Playground</title>
+    <style>
+      #root {
+        height: 100vh;
+      }
+      #root-loader {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div id="root-loader">Loading...</div>
+    </div>
+    <script src="index.tsx" type="module"></script>
+  </body>
+</html>

package/index.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import ReactDOM from "react-dom";
+import { CompIDE } from "lowcoder-sdk";
+import { name, version, lowcoder } from "./package.json";
+import compMap from "./src/index";
+import "lowcoder-sdk/dist/style.css";
+function CompDevApp() {
+  return (
+    <CompIDE
+      compMap={compMap}
+      packageName={name}
+      packageVersion={version}
+      compMeta={lowcoder.comps}
+    />
+  );
+}
+ReactDOM.render(<CompDevApp />, document.querySelector("#root"));

package/jest.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+import config from "../../config/test/jest.config.js";
+export default {
+  ...config,
+};

package/package.json CHANGED Viewed

@@ -1,11 +1,8 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "license": "MIT",
-  "files": [
-    "tsconfig.json"
-  ],
   "dependencies": {
     "@fullcalendar/core": "^6.1.6",
     "@fullcalendar/daygrid": "^6.1.6",

package/src/__test__/allComp.test.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+import _ from "lodash";
+import { CompConstructor, CustomAction } from "lowcoder-core";
+import { evalAndReduce, isExposingMethodComp } from "lowcoder-sdk";
+import { ChartCompWithDefault } from "comps/chartComp/chartComp";
+import log from "loglevel";
+const COMPS_MAP = {
+  chart: ChartCompWithDefault,
+} as Record<string, CompConstructor>;
+const compContextActionMap = {} as Record<string, CustomAction>;
+test("test comp don't change if no value change", () => {
+  Object.keys(COMPS_MAP).forEach((name) => {
+    const Comp = COMPS_MAP[name];
+    let comp = new Comp({});
+    if (compContextActionMap[name]) {
+      // set context
+      comp = comp.reduce(compContextActionMap[name]);
+    }
+    comp.getView(); // getView() is allowed when unevaluated
+    comp = evalAndReduce(comp);
+    expect(comp.node() === comp.node()).toBe(true);
+    expect(comp.node()?.evaluate() === comp.node()?.evaluate()).toBe(true);
+    const comp2 = evalAndReduce(comp);
+    if (comp2 !== comp) {
+      const comp3 = evalAndReduce(comp2);
+      if (comp3 === comp2) {
+        // log.debug(`${name} need eval twice to converge`);
+      } else {
+        const newComp = evalAndReduce(comp);
+        Object.keys((comp as any).children).forEach((key) => {
+          log.log(
+            `${key}, isEqual ${(comp as any).children[key] === (newComp as any).children[key]}`
+          );
+        });
+        throw new Error("bad " + name);
+      }
+    }
+  });
+});
+test("comp exposing method duplicate name", () => {
+  // one comp can't expose two methods with the same name
+  Object.values(COMPS_MAP).forEach((Comp) => {
+    const comp = new Comp({});
+    const methods = [];
+    if (isExposingMethodComp(comp)) {
+      methods.push(comp.getMethodConfig());
+    }
+    const childrenMap = (comp as any).children;
+    childrenMap &&
+      Object.values(childrenMap).forEach((child) => {
+        if (isExposingMethodComp(child as any)) {
+          methods.push((child as any).getMethodConfig());
+        }
+      });
+    const allMethodName = methods.flatMap((m) => m.map((methodConfig) => methodConfig.name));
+    expect(allMethodName.length).toEqual(_.uniq(allMethodName).length);
+  });
+});

package/src/app-env.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+/// <reference types="lowcoder-cli/client" />
+declare module "lowcoder-sdk";

package/src/comps/calendarComp/calendarComp.tsx ADDED Viewed

@@ -0,0 +1,442 @@
+import {
+  isValidColor,
+  NameConfig,
+  NameConfigHidden,
+  BoolControl,
+  UICompBuilder,
+  withDefault,
+  withExposingConfigs,
+  NumberControl,
+  StringControl,
+  hiddenPropertyView,
+  ChangeEventHandlerControl,
+  Section,
+  sectionNames,
+  dropdownControl,
+  styleControl,
+  ThemeContext,
+  CalendarStyle,
+  DateParser,
+  CustomModal,
+  jsonValueExposingStateControl,
+  CalendarDeleteIcon,
+  Tooltip,
+} from "lowcoder-sdk";
+import { Input, Form } from "antd";
+import { trans, getCalendarLocale } from "../../i18n/comps";
+import { createRef, useContext, useRef, useState } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import allLocales from "@fullcalendar/core/locales-all";
+import { EventContentArg, DateSelectArg } from "@fullcalendar/core";
+import momentPlugin from "@fullcalendar/moment";
+import {
+  DefaultViewOptions,
+  FirstDayOptions,
+  Wrapper,
+  Event,
+  Remove,
+  EventType,
+  defaultData,
+  ViewType,
+  buttonText,
+  headerToolbar,
+  views,
+  slotLabelFormat,
+  viewClassNames,
+  FormWrapper,
+} from "./calendarConstants";
+import moment from "moment";
+const childrenMap = {
+  events: jsonValueExposingStateControl("events", defaultData),
+  onEvent: ChangeEventHandlerControl,
+  editable: withDefault(BoolControl, true),
+  defaultDate: withDefault(StringControl, "{{ new Date() }}"),
+  defaultView: dropdownControl(DefaultViewOptions, "timeGridWeek"),
+  firstDay: dropdownControl(FirstDayOptions, "1"),
+  showEventTime: withDefault(BoolControl, true),
+  showWeekends: withDefault(BoolControl, true),
+  showAllDay: withDefault(BoolControl, true),
+  dayMaxEvents: withDefault(NumberControl, 2),
+  eventMaxStack: withDefault(NumberControl, 0),
+  style: styleControl(CalendarStyle),
+};
+let CalendarBasicComp = (function () {
+  return new UICompBuilder(childrenMap, (props) => {
+    const theme = useContext(ThemeContext);
+    const ref = createRef<HTMLDivElement>();
+    const editEvent = useRef<EventType>();
+    const [form] = Form.useForm();
+    const [left, setLeft] = useState<number | undefined>(undefined);
+    const events = props.events.value.map((item: EventType) => {
+      return {
+        title: item.title,
+        id: item.id,
+        start: moment(item.start, DateParser).format(),
+        end: moment(item.end, DateParser).format(),
+        allDay: item.allDay,
+        color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
+        ...(item.groupId ? { groupId: item.groupId } : null),
+      };
+    });
+    const {
+      defaultDate,
+      defaultView,
+      showEventTime,
+      showWeekends,
+      showAllDay,
+      dayMaxEvents,
+      eventMaxStack,
+      style,
+      firstDay,
+      editable,
+    } = props;
+    function renderEventContent(eventInfo: EventContentArg) {
+      const isList = eventInfo.view.type === "listWeek";
+      let sizeClass = "";
+      if ([ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)) {
+        const duration = moment(eventInfo.event.end).diff(moment(eventInfo.event.start), "minutes");
+        if (duration <= 30 || eventInfo.event.allDay) {
+          sizeClass = "small";
+        } else if (duration <= 60) {
+          sizeClass = "middle";
+        } else {
+          sizeClass = "large";
+        }
+      }
+      const stateClass =
+        moment().isAfter(moment(eventInfo.event.end)) &&
+        (eventInfo.view.type as ViewType) !== ViewType.MONTH
+          ? "past"
+          : "";
+      return (
+        <Event
+          className={`event ${sizeClass} ${stateClass}`}
+          isList={isList}
+          bg={eventInfo.backgroundColor}
+          theme={theme?.theme}
+          $style={props.style}
+        >
+          <div className="event-time">{eventInfo.timeText}</div>
+          <div className="event-title">{eventInfo.event.title}</div>
+          <Remove
+            isList={isList}
+            className="event-remove"
+            onClick={(e) => {
+              e.stopPropagation();
+              props.onEvent("change");
+              const event = events.filter((item: EventType) => item.id !== eventInfo.event.id);
+              props.events.onChange(event);
+            }}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+          >
+            <CalendarDeleteIcon />
+          </Remove>
+        </Event>
+      );
+    }
+    const handleDbClick = () => {
+      const event = props.events.value.find(
+        (item: EventType) => item.id === editEvent.current?.id
+      ) as EventType;
+      if (!editable || !editEvent.current) {
+        return;
+      }
+      if (event) {
+        const { title, groupId, color, id } = event;
+        const eventInfo = {
+          title,
+          groupId,
+          color,
+          id,
+        };
+        showModal(eventInfo, true);
+      } else {
+        showModal(editEvent.current, false);
+      }
+    };
+    const handleCreate = (info: DateSelectArg) => {
+      const event = {
+        allDay: info.allDay,
+        start: info.startStr,
+        end: info.endStr,
+      };
+      const view = info.view.type as ViewType;
+      const duration = moment(info.end).diff(moment(info.start), "minutes");
+      const singleClick =
+        (view === ViewType.MONTH && duration === 1440) ||
+        ([ViewType.WEEK, ViewType.DAY].includes(view) && duration === 30) ||
+        (info.allDay && duration === 1440);
+      if (singleClick) {
+        editEvent.current = event;
+        setTimeout(() => {
+          editEvent.current = undefined;
+        }, 500);
+        return;
+      }
+      showModal(event, false);
+    };
+    const showModal = (event: EventType, ifEdit: boolean) => {
+      const modalTitle = ifEdit ? trans("calendar.editEvent") : trans("calendar.creatEvent");
+      form && form.setFieldsValue(event);
+      const eventId = editEvent.current?.id;
+      CustomModal.confirm({
+        title: modalTitle,
+        content: (
+          <FormWrapper form={form}>
+            <Form.Item
+              label={
+                <Tooltip title={trans("calendar.eventIdTooltip")}>
+                  {trans("calendar.eventId")}
+                </Tooltip>
+              }
+              name="id"
+              rules={[{ required: true, message: trans("calendar.eventIdRequire") }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={trans("calendar.eventName")}
+              name="title"
+              rules={[{ required: true, message: trans("calendar.eventNameRequire") }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item label={trans("calendar.eventColor")} name="color">
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={
+                <Tooltip title={trans("calendar.groupIdTooltip")}>
+                  {trans("calendar.eventGroupId")}
+                </Tooltip>
+              }
+              name="groupId"
+            >
+              <Input />
+            </Form.Item>
+          </FormWrapper>
+        ),
+        onConfirm: () => {
+          form.submit();
+          return form.validateFields().then(() => {
+            const { id, groupId, color, title = "" } = form.getFieldsValue();
+            const idExist = props.events.value.findIndex((item: EventType) => item.id === id);
+            if (idExist > -1 && id !== eventId) {
+              form.setFields([{ name: "id", errors: [trans("calendar.eventIdExist")] }]);
+              throw new Error();
+            }
+            if (ifEdit) {
+              const changeEvents = props.events.value.map((item: EventType) => {
+                if (item.id === eventId) {
+                  return {
+                    ...item,
+                    title,
+                    id,
+                    ...(groupId !== undefined ? { groupId } : null),
+                    ...(color !== undefined ? { color } : null),
+                  };
+                } else {
+                  return item;
+                }
+              });
+              props.events.onChange(changeEvents);
+            } else {
+              const createInfo = {
+                allDay: event.allDay,
+                start: event.start,
+                end: event.end,
+                id,
+                title,
+                ...(groupId !== undefined ? { groupId } : null),
+                ...(color !== undefined ? { color } : null),
+              };
+              props.events.onChange([...props.events.value, createInfo]);
+            }
+            props.onEvent("change");
+            form.resetFields();
+          });
+        },
+        onCancel: () => {
+          form.resetFields();
+        },
+      });
+    };
+    let initialDate = defaultDate;
+    try {
+      initialDate = new Date(defaultDate).toISOString();
+    } catch (error) {
+      initialDate = undefined;
+    }
+    return (
+      <Wrapper
+        ref={ref}
+        editable={editable}
+        $style={style}
+        theme={theme?.theme}
+        onDoubleClick={handleDbClick}
+        left={left}
+        key={initialDate ? defaultView + initialDate : defaultView}
+      >
+        <FullCalendar
+          slotEventOverlap={false}
+          events={events}
+          expandRows={true}
+          height={"100%"}
+          locale={getCalendarLocale()}
+          locales={allLocales}
+          firstDay={Number(firstDay)}
+          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, momentPlugin]}
+          headerToolbar={headerToolbar}
+          moreLinkClick={(info) => {
+            let left = 0;
+            const ele = info.jsEvent.target as HTMLElement;
+            if (info.view.type === ViewType.DAY) {
+              if (info.allDay) {
+                left = ele.offsetParent?.parentElement?.offsetLeft || 0;
+              } else {
+                left = ele.parentElement?.offsetLeft || 0;
+              }
+            } else {
+              if (info.allDay) {
+                left = ele.offsetParent?.parentElement?.parentElement?.offsetLeft || 0;
+              } else {
+                left =
+                  ele.offsetParent?.parentElement?.parentElement?.parentElement?.offsetLeft || 0;
+              }
+            }
+            setLeft(left);
+          }}
+          buttonText={buttonText}
+          views={views}
+          eventClassNames={() => (!showEventTime ? "no-time" : "")}
+          slotLabelFormat={slotLabelFormat}
+          viewClassNames={viewClassNames}
+          moreLinkText={trans("calendar.more")}
+          initialDate={initialDate}
+          initialView={defaultView}
+          editable={editable}
+          selectable={editable}
+          selectMirror={false}
+          displayEventTime={showEventTime}
+          dayMaxEvents={dayMaxEvents}
+          eventMaxStack={eventMaxStack || undefined}
+          weekends={showWeekends}
+          allDaySlot={showAllDay}
+          eventContent={renderEventContent}
+          select={(info) => handleCreate(info)}
+          eventClick={(info) => {
+            const event = events.find((item: EventType) => item.id === info.event.id);
+            editEvent.current = event;
+            setTimeout(() => {
+              editEvent.current = undefined;
+            }, 500);
+          }}
+          eventsSet={(info) => {
+            let needChange = false;
+            let changeEvents: EventType[] = [];
+            info.forEach((item) => {
+              const event = events.find((i: EventType) => i.id === item.id);
+              const start = moment(item.start, DateParser).format();
+              const end = moment(item.end, DateParser).format();
+              if (
+                start !== event?.start ||
+                end !== event?.end ||
+                !!item.allDay !== !!event?.allDay
+              ) {
+                needChange = true;
+                changeEvents.push({
+                  ...event,
+                  allDay: item.allDay,
+                  start: item.startStr,
+                  end: item.endStr,
+                });
+              } else {
+                changeEvents.push(event);
+              }
+            });
+            if (needChange) {
+              props.events.onChange(changeEvents);
+              props.onEvent("change");
+            }
+          }}
+        />
+      </Wrapper>
+    );
+  })
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          <Section name={sectionNames.basic}>{children.events.propertyView({})}</Section>
+          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+          <Section name={sectionNames.advanced}>
+            {children.editable.propertyView({
+              label: trans("calendar.editable"),
+            })}
+            {children.defaultDate.propertyView({
+              label: trans("calendar.defaultDate"),
+              tooltip: trans("calendar.defaultDateTooltip"),
+            })}
+            {children.defaultView.propertyView({
+              label: trans("calendar.defaultView"),
+              tooltip: trans("calendar.defaultViewTooltip"),
+            })}
+            {children.firstDay.propertyView({
+              label: trans("calendar.startWeek"),
+            })}
+            {children.showEventTime.propertyView({
+              label: trans("calendar.showEventTime"),
+              tooltip: trans("calendar.showEventTimeTooltip"),
+            })}
+            {children.showWeekends.propertyView({
+              label: trans("calendar.showWeekends"),
+            })}
+            {children.showAllDay.propertyView({
+              label: trans("calendar.showAllDay"),
+              tooltip: trans("calendar.showAllDayTooltip"),
+            })}
+            {children.dayMaxEvents.propertyView({
+              label: trans("calendar.dayMaxEvents"),
+              tooltip: trans("calendar.dayMaxEventsTooltip"),
+            })}
+            {children.eventMaxStack.propertyView({
+              label: trans("calendar.eventMaxStack"),
+              tooltip: trans("calendar.eventMaxStackTooltip"),
+            })}
+          </Section>
+          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        </>
+      );
+    })
+    .build();
+})();
+CalendarBasicComp = class extends CalendarBasicComp {
+  override autoHeight(): boolean {
+    return false;
+  }
+};
+export const CalendarComp = withExposingConfigs(CalendarBasicComp, [
+  new NameConfig("events", trans("calendar.events")),
+  NameConfigHidden,
+]);