@upstart.gg/sdk 0.0.96 → 0.0.97

package/src/shared/bricks/props/container.ts

@@ -0,0 +1,356 @@
+import { type TObject, Type, type Static, type SchemaOptions } from "@sinclair/typebox";
+import { getStyleProperties, getStyleValueById, group, optional, prop } from "./helpers";
+import { StringEnum } from "~/shared/utils/schema";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+// type FlexOptions = {
+//   title?: string;
+//   defaultValue?: {
+//     direction: string;
+//     wrap: string;
+//     gap: string;
+//     justifyContent: string;
+//     alignItems: string;
+//   };
+// };
+
+// export function flex(opts: FlexOptions = {}) {
+//   const {
+//     title = "Layout",
+//     defaultValue = {
+//       direction: "flex-row",
+//       gap: "gap-1",
+//       wrap: "flex-wrap",
+//       justifyContent: "justify-stretch",
+//       alignItems: "items-stretch",
+//     },
+//   } = opts;
+//   return prop({
+//     title,
+//     schema: Type.Object(
+//       {
+//         direction: Type.Optional(
+//           StringEnum(["flex-row", "flex-col"], {
+//             enumNames: ["Row", "Column"],
+//             title: "Direction",
+//             description: "The direction of the container.",
+//             default: defaultValue.direction,
+//           }),
+//         ),
+//         gap: Type.Optional(
+//           Type.String({
+//             title: "Gap",
+//             description:
+//               "Space between items. Can be a tailwind gap class like 'gap-1' or 'gap-2', or a custom value like '10px'",
+//             default: defaultValue.gap,
+//             // todo: make a specific field for gap
+//             // "ui:field": "enum",
+//           }),
+//         ),
+//         wrap: Type.Optional(
+//           StringEnum(["flex-wrap", "flex-nowrap"], {
+//             enumNames: ["Wrap", "No wrap"],
+//             title: "Wrap",
+//             description: "Wether to wrap items in the container.",
+//             default: defaultValue.wrap,
+//           }),
+//         ),
+//         justifyContent: Type.Optional(
+//           StringEnum(
+//             [
+//               "justify-start",
+//               "justify-center",
+//               "justify-end",
+//               "justify-between",
+//               "justify-around",
+//               "justify-evenly",
+//               "justify-stretch",
+//             ],
+//             {
+//               enumNames: [
+//                 "Start",
+//                 "Center",
+//                 "End",
+//                 "Space between",
+//                 "Space around",
+//                 "Evenly distributed",
+//                 "Stretch",
+//               ],
+//               title: "Justify",
+//               description: "Justify content along the main axis (horizontal for row, vertical for column).",
+//               default: defaultValue.justifyContent,
+//             },
+//           ),
+//         ),
+//         alignItems: Type.Optional(
+//           StringEnum(["items-start", "items-center", "items-end", "items-stretch"], {
+//             enumNames: ["Start", "Center", "End", "Stretch"],
+//             title: "Alignment",
+//             description: "Align items along the cross axis (vertical for row, horizontal for column).",
+//             default: defaultValue.alignItems,
+//           }),
+//         ),
+//       },
+//       {
+//         "ui:styleId": "#styles:flex",
+//         "ui:field": "flex",
+//         "ui:responsive": true,
+//         default: {
+//           direction: defaultValue.direction,
+//           gap: defaultValue.gap,
+//           wrap: defaultValue.wrap,
+//           justifyContent: defaultValue.justifyContent,
+//           alignItems: defaultValue.alignItems,
+//         },
+//       },
+//     ),
+//   });
+// }
+
+// export type FlexSettings = Static<ReturnType<typeof flex>>;
+
+// type GridOptions = {
+//   title?: string;
+//   defaultValue?: {
+//     gap: string;
+//     columns: number;
+//   };
+// };
+
+// export function grid(options: GridOptions = {}) {
+//   const { title = "Layout", defaultValue = { gap: "gap-1", columns: 2 } } = options;
+//   return prop({
+//     title,
+//     schema: Type.Object(
+//       {
+//         columns: Type.Number({
+//           title: "Columns",
+//           description: "Number of columns",
+//           "ui:group": "grid",
+//           "ui:field": "slider",
+//           default: 2,
+//           minimum: 1,
+//           maximum: 12,
+//         }),
+//         gap: Type.Optional(
+//           Type.String({
+//             title: "Gap",
+//             description:
+//               "Space between items. Can be a tailwind gap class like 'gap-1' or 'gap-2', or a custom value like '10px'",
+//             default: defaultValue.gap,
+//             // todo: make a specific field for gap
+//             // "ui:field": "enum",
+//           }),
+//         ),
+//       },
+//       {
+//         "ui:styleId": "#styles:grid",
+//         "ui:field": "grid",
+//         "ui:responsive": true,
+//         default: defaultValue,
+//       },
+//     ),
+//   });
+// }
+
+// export type GridSettings = Static<ReturnType<typeof grid>>;
+
+const isFlexLayoutFilter = (manifestProps: TObject, formData: Record<string, unknown>) => {
+  const stylesProps = getStyleProperties(manifestProps);
+  const currentStyle = getStyleValueById<ContainerLayoutSettings>(
+    stylesProps,
+    formData,
+    "#styles:containerLayout",
+  );
+  return currentStyle?.type === "flex" || !currentStyle?.type;
+};
+
+const isGridLayoutFilter = (manifestProps: TObject, formData: Record<string, unknown>) => {
+  return !isFlexLayoutFilter(manifestProps, formData);
+};
+
+type ContainerLayoutOptions = {
+  title?: string;
+  defaults?: {
+    type?: "flex" | "grid";
+    gap?: string;
+    direction?: string;
+    columns?: {
+      max?: number;
+      default?: number;
+    };
+    wrap?: boolean;
+    fillSpace?: boolean;
+    justifyContent?: string;
+    alignItems?: string;
+  };
+  options?: {
+    disableGrid?: boolean;
+  };
+};
+
+function containerlayoutStyle(options: SchemaOptions = {}) {
+  return Type.Object(
+    {
+      ...(!options.disableGrid
+        ? {
+            type: StringEnum(["flex", "grid"], {
+              enumNames: ["Flex", "Grid"],
+              title: "Layout type",
+              description:
+                "Type of the container. Flex layout arranges items in a one-dimensional line. Grid layout arranges items in a two-dimensional grid",
+              "ui:field": "enum",
+              "ui:responsive": true,
+            }),
+          }
+        : {}),
+
+      gap: Type.Optional(
+        Type.String({
+          title: "Gap",
+          description:
+            "Space between items. Can be a tailwind gap class like 'gap-1' or 'gap-2', or a custom value like '10px'",
+          "ui:placeholder": "Not specified",
+          // todo: make a specific field for gap
+          // "ui:field": "enum",
+        }),
+      ),
+      direction: optional(
+        StringEnum(["flex-row", "flex-col"], {
+          enumNames: ["Row", "Column"],
+          title: "Direction",
+          description: "The direction of the container. Only applies to flex layout",
+          metadata: {
+            filter: isFlexLayoutFilter,
+          },
+        }),
+      ),
+      columns: optional(
+        Type.Number({
+          title: "Columns",
+          description: "Number of columns. Only applies to grid layout",
+          "ui:field": "slider",
+          minimum: 1,
+          maximum: 16,
+          metadata: {
+            filter: isGridLayoutFilter,
+          },
+        }),
+      ),
+      wrap: optional(
+        Type.Boolean({
+          title: "Wrap",
+          description: "Wrap items.",
+          "ai:instructions": "Only applies to flex layout",
+          metadata: {
+            filter: isFlexLayoutFilter,
+          },
+        }),
+      ),
+      fillSpace: optional(
+        Type.Boolean({
+          title: "Fill space",
+          description: "Makes items of the container fill the available space",
+          "ai:instructions": "Only applies to flex layout",
+          metadata: {
+            filter: isFlexLayoutFilter,
+          },
+        }),
+      ),
+      justifyContent: Type.Optional(
+        StringEnum(
+          [
+            "justify-start",
+            "justify-center",
+            "justify-end",
+            "justify-between",
+            "justify-around",
+            "justify-evenly",
+            "justify-stretch",
+          ],
+          {
+            enumNames: [
+              "Start",
+              "Center",
+              "End",
+              "Space between",
+              "Space around",
+              "Evenly distributed",
+              "Stretch",
+            ],
+            title: "Justify",
+            description: "Justify content along the main axis (horizontal for row, vertical for column)",
+            "ai:instructions": "Only applies to flex layout",
+            metadata: {
+              filter: isFlexLayoutFilter,
+            },
+          },
+        ),
+      ),
+
+      alignItems: optional(
+        Type.Union(
+          [
+            Type.Literal("items-start", { title: "Start" }),
+            Type.Literal("items-center", { title: "Center" }),
+            Type.Literal("items-end", { title: "End" }),
+            Type.Literal("items-stretch", { title: "Stretch" }),
+          ],
+          {
+            title: "Alignment",
+            description: "Align items along the cross axis (vertical for row, horizontal for column)",
+            "ai:instructions": "Only applies to flex layout",
+            metadata: {
+              filter: isFlexLayoutFilter,
+            },
+          },
+        ),
+      ),
+    },
+    { $id: "styles:containerLayout" },
+  );
+}
+
+export function containerLayout({ title = "Layout", options = {} }: ContainerLayoutOptions = {}) {
+  return group({
+    title,
+    options: {
+      "ui:styleId": "#styles:containerLayout",
+      $id: "styles:containerLayout",
+    },
+    children: containerlayoutStyle(options),
+  });
+}
+
+export type ContainerLayoutSettings = Static<ReturnType<typeof containerLayout>>;
+
+export function containerLayoutRef(options: SchemaOptions = {}) {
+  return typedRef("styles:containerLayout", {
+    title: "Container layout",
+    description: "Settings for the layout of the container",
+    options: {
+      ...options,
+      disableGrid: options.disableGrid ?? false,
+    },
+  });
+}
+
+export function makeContainerProps() {
+  return {
+    $childrenType: Type.Optional(
+      Type.String({
+        title: "Dynamic child brick type",
+        description: "Type of the child bricks that will be created when container is dynamic",
+        "ui:field": "brick-type",
+        metadata: {
+          category: "content",
+        },
+      }),
+    ),
+    $children: Type.Array(Type.Any(), {
+      "ui:field": "hidden",
+      description: "List of nested bricks",
+      default: [],
+    }),
+  };
+}

package/src/shared/bricks/props/css-length.ts

@@ -0,0 +1,25 @@
+import { type Static, Type, type StringOptions } from "@sinclair/typebox";
+import { prop } from "./helpers";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+export function cssLength(options: StringOptions = {}) {
+  const units = ["px", "%", "em", "rem", "vh", "vw", "dvh", "dvw", "rlh", "lh", "cqh", "cqw"];
+  return prop({
+    title: "Length",
+    schema: Type.String({
+      $id: "styles:cssLength",
+      description: `A CSS length value. Must be a number with a unit (e.g. "10px", "50%"). The unit can be one of the following: ${units?.join(", ")}.`,
+      title: "Length",
+      default: options.default,
+      ...options,
+      "ui:field": "css-length",
+      "ui:css-units": units,
+    }),
+  });
+}
+
+export type CssLength = Static<ReturnType<typeof cssLength>>;
+
+export function cssLengthRef(options: StringOptions = {}) {
+  return typedRef("styles:cssLength", options);
+}

package/src/shared/bricks/props/datasource.ts

@@ -0,0 +1,60 @@
+import { Type, type Static } from "@sinclair/typebox";
+import { prop } from "./helpers";
+
+export function datasourceRef() {
+  return prop({
+    title: "Database",
+    description: "Reference to a data source. Only used for dynamic websites",
+    schema: Type.Object(
+      {
+        id: Type.String({
+          title: "Data Source ID",
+        }),
+        mapping: Type.Record(Type.String(), Type.String(), {
+          description: "Mapping of data source fields to brick props",
+        }),
+        filters: Type.Optional(
+          Type.Record(
+            Type.String(),
+            Type.Object({
+              op: Type.Union([
+                Type.Literal("eq"),
+                Type.Literal("ne"),
+                Type.Literal("lt"),
+                Type.Literal("lte"),
+                Type.Literal("gt"),
+                Type.Literal("gte"),
+                Type.Literal("in"),
+                Type.Literal("nin"),
+                Type.Literal("contains"),
+                Type.Literal("startsWith"),
+                Type.Literal("endsWith"),
+              ]),
+              value: Type.String(),
+            }),
+            { description: "Filter data source records" },
+          ),
+        ),
+        sort: Type.Optional(
+          Type.Record(
+            Type.String(),
+            Type.Union([
+              Type.Literal("asc", { title: "Ascending" }),
+              Type.Literal("desc", { title: "Descending" }),
+            ]),
+            { description: "Sort data source records" },
+          ),
+        ),
+        limit: Type.Optional(Type.Number({ description: "Limit the number of records to fetch" })),
+        offset: Type.Optional(Type.Number({ description: "Offset the records to fetch" })),
+      },
+      {
+        "ui:field": "datasource-ref",
+        "ui:meta-type": "datasource-ref",
+        description: "Datasource reference. Only used for dynamic websites. Do not use for static websites",
+      },
+    ),
+  });
+}
+
+export type DatasourceRefSettings = Static<ReturnType<typeof datasourceRef>>;

package/src/shared/bricks/props/date.ts

@@ -0,0 +1,24 @@
+import { Type, type StringOptions } from "@sinclair/typebox";
+import { prop } from "./helpers";
+
+export function date(title = "Date", options?: StringOptions) {
+  return prop({
+    title,
+    schema: Type.String({
+      format: "date",
+      "ui:field": "date",
+      ...options,
+    }),
+  });
+}
+
+export function datetime(title = "Date and Time", options?: StringOptions) {
+  return prop({
+    title,
+    schema: Type.String({
+      format: "date-time",
+      "ui:field": "datetime",
+      ...options,
+    }),
+  });
+}

package/src/shared/bricks/props/effects.ts

@@ -0,0 +1,123 @@
+import { type SchemaOptions, Type, type Static } from "@sinclair/typebox";
+import { group, optional, prop } from "./helpers";
+import { StringEnum } from "~/shared/utils/schema";
+import { typedRef } from "~/shared/utils/typed-ref";
+
+type ShadowOptions = {
+  title?: string;
+  defaultValue?: string;
+};
+
+export function shadow({ title = "Shadow", defaultValue = "shadow-none" }: ShadowOptions = {}) {
+  return prop({
+    title,
+    schema: StringEnum(["shadow-none", "shadow-sm", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl"], {
+      $id: "styles:shadow",
+      title,
+      default: defaultValue,
+      enumNames: ["None", "S", "M", "L", "XL", "2XL"],
+      "ui:placeholder": "Not specified",
+      "ui:field": "enum",
+      "ui:display": "select",
+    }),
+  });
+}
+
+export type ShadowSettings = Static<ReturnType<typeof shadow>>;
+
+export function shadowRef(options: SchemaOptions & ShadowOptions = {}) {
+  return typedRef("styles:shadow", { ...options, "ui:styleId": "#styles:shadow" });
+}
+
+type TextShadowOptions = {
+  title?: string;
+  defaultValue?: string;
+};
+
+export function textShadow({
+  title = "Text shadow",
+  defaultValue = "text-shadow-none",
+}: TextShadowOptions = {}) {
+  return prop({
+    title,
+    schema: StringEnum(
+      ["text-shadow-none", "text-shadow-sm", "text-shadow-md", "text-shadow-lg", "text-shadow-xl"],
+      {
+        default: defaultValue,
+        enumNames: ["None", "Small", "Medium", "Large", "Extra large"],
+        "ui:placeholder": "Not specified",
+        "ui:field": "enum",
+      },
+    ),
+  });
+}
+
+export type TextShadowSettings = Static<ReturnType<typeof textShadow>>;
+
+type OpacityOptions = {
+  title?: string;
+  defaultValue?: number;
+};
+
+export function opacity({ defaultValue = 1, title = "Opacity" }: OpacityOptions = {}) {
+  return prop({
+    title,
+    schema: Type.Number({
+      minimum: 0.1,
+      maximum: 1,
+      default: defaultValue,
+      multipleOf: 0.1,
+      "ui:field": "slider",
+      "ui:unit": "%",
+      "ui:multiplier": 100,
+    }),
+  });
+}
+
+export type OpacitySettings = Static<ReturnType<typeof opacity>>;
+
+type EffectsOptions = {
+  title?: string;
+  defaultValue?: {
+    opacity?: number;
+    shadow?: string;
+    textShadow?: string;
+  };
+  enableTextShadow?: boolean;
+};
+
+// export function effects({ title = "Effects", defaultValue = {}, enableTextShadow }: EffectsOptions = {}) {
+//   return group({
+//     title,
+//     options: {
+//       default: defaultValue,
+//       $id: "styles:effects",
+//     },
+//     children: {
+//       opacity: optional(
+//         opacity({
+//           title: "Opacity",
+//           defaultValue: defaultValue.opacity,
+//         }),
+//       ),
+//       shadow: optional(
+//         shadowRef({
+//           title: "Shadow",
+//           defaultValue: defaultValue.shadow,
+//         }),
+//       ),
+//       ...(enableTextShadow && {
+//         textShadow: optional(
+//           textShadow({
+//             title: "Text shadow",
+//             defaultValue: defaultValue.textShadow,
+//           }),
+//         ),
+//       }),
+//     },
+//   });
+// }
+
+// export function effectsRef(options: SchemaOptions & EffectsOptions = {}) {
+//   return typedRef("styles:effects", options);
+// }

package/src/shared/bricks/props/enum.ts

@@ -0,0 +1,42 @@
+import { type SchemaOptions, Type, type StringOptions } from "@sinclair/typebox";
+import { prop } from "./helpers";
+
+type EnumOption = {
+  title?: string;
+  description?: string;
+  value: string;
+  icon?: string;
+};
+
+export function enumProp(
+  title: string,
+  defaultValue: string,
+  opts: Omit<SchemaOptions, "title" | "default"> & {
+    options: EnumOption[] | string[];
+    displayAs?: "radio" | "select" | "button-group" | "icon-group";
+  },
+) {
+  const defaultOpts = {
+    "ui:field": "enum",
+    "ui:display": opts.displayAs || "select",
+  };
+  const { options, displayAs, ...commonOpts } = opts;
+
+  return prop({
+    title,
+    schema: Type.Union(
+      options.map((opt) =>
+        Type.Literal(typeof opt === "string" ? opt : opt.value, {
+          title: typeof opt === "string" ? opt : opt.title,
+          "ui:icon": typeof opt === "string" ? undefined : opt.icon,
+        }),
+      ),
+      {
+        title,
+        default: defaultValue,
+        ...defaultOpts,
+        ...commonOpts,
+      },
+    ),
+  });
+}

package/src/shared/bricks/props/file.ts

@@ -0,0 +1,12 @@
+import { Type } from "@sinclair/typebox";
+import { prop } from "./helpers";
+
+export function file(title = "File") {
+  return prop({
+    title,
+    schema: Type.String({
+      format: "data-url",
+      "ui:field": "file",
+    }),
+  });
+}

package/src/shared/bricks/props/geolocation.ts

@@ -0,0 +1,30 @@
+import { Type, type Static } from "@sinclair/typebox";
+import { prop } from "./helpers";
+
+type GeolocationOptions = {
+  title?: string;
+  defaultValue?: {
+    lat: number;
+    lng: number;
+  };
+};
+
+export function geolocation(opts: GeolocationOptions = {}) {
+  const { title = "Geolocation", defaultValue = { lat: 48.864716, lng: 2.349014 } } = opts;
+  return prop({
+    title,
+    schema: Type.Object(
+      {
+        lat: Type.Number({ minimum: -90, maximum: 90 }),
+        lng: Type.Number({ minimum: -180, maximum: 180 }),
+        label: Type.Optional(Type.String({ title: "Tooltip" })),
+      },
+      {
+        "ui:field": "geo-point",
+        default: defaultValue,
+      },
+    ),
+  });
+}
+
+export type GeolocationSettings = Static<ReturnType<typeof geolocation>>;