@upstart.gg/sdk 0.0.96 → 0.0.97

package/src/shared/bricks/manifests/timeline.manifest.ts

@@ -0,0 +1,456 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps, optional, group, prop } from "../props/helpers";
+import { Type } from "@sinclair/typebox";
+import { MdTimeline } from "react-icons/md";
+import { backgroundColor, backgroundColorRef } from "../props/background";
+import { textContent, textContentRef } from "../props/text";
+import { string } from "../props/string";
+import { padding, paddingRef } from "../props/padding";
+import { border, borderRef } from "../props/border";
+import { shadow, shadowRef } from "../props/effects";
+import { RiMapPinTimeLine } from "react-icons/ri";
+import type { BrickProps } from "../props/types";
+import { colorRef } from "../props/color";
+import { StringEnum } from "~/shared/utils/schema";
+import type { FC } from "react";
+
+export const manifest = defineBrickManifest({
+  type: "timeline",
+  kind: "widget",
+  name: "Timeline",
+  description: "A timeline element for showing chronological events",
+  aiInstructions: `
+    This timeline element displays a series of chronological events, milestones, or processes.
+    It can be used for company history, project roadmaps, or any sequential information.
+    Each item has a date/time, title, description, and optional icon.
+  `.trim(),
+  icon: RiMapPinTimeLine,
+
+  defaultHeight: { desktop: 12, mobile: 18 },
+  defaultWidth: { desktop: 36, mobile: 24 },
+
+  props: defineProps(
+    {
+      container: optional(
+        group({
+          title: "Container",
+          children: {
+            backgroundColor: optional(backgroundColorRef()),
+            padding: optional(paddingRef),
+            border: optional(borderRef),
+            shadow: optional(shadowRef()),
+          },
+        }),
+      ),
+      items: prop({
+        title: "Timeline items",
+        schema: Type.Array(
+          Type.Object({
+            date: string("Date", "2024", {
+              description: "Date or time period for this event",
+            }),
+            title: textContentRef({ title: "Title", default: "Event title", disableSizing: true }),
+            description: textContentRef({ title: "Description", default: "Event description" }),
+            icon: optional(
+              prop({
+                title: "Icon",
+                description: "Icon to display (iconify reference)",
+                schema: string("Icon", undefined, {
+                  description: "Icon for this timeline item",
+                  "ui:widget": "iconify",
+                }),
+              }),
+            ),
+          }),
+        ),
+      }),
+      variants: Type.Array(
+        Type.Union(
+          [
+            Type.Literal("vertical", {
+              title: "Vertical",
+              description: "Display timeline vertically",
+            }),
+            Type.Literal("horizontal", {
+              title: "Horizontal",
+              description: "Display timeline horizontally",
+            }),
+            Type.Literal("alternating", {
+              title: "Alternating",
+              description: "Alternate items left and right (vertical only)",
+            }),
+            Type.Literal("with-connectors", {
+              title: "With connectors",
+              description: "Show connecting lines between items",
+            }),
+            Type.Literal("minimal", {
+              title: "Minimal",
+              description: "Simple design with less visual elements",
+            }),
+            Type.Literal("card-style", {
+              title: "Card style",
+              description: "Display each item as a card",
+            }),
+          ],
+          {
+            title: "Variant",
+            description: "Timeline display variants",
+          },
+        ),
+        { default: ["vertical", "with-connectors"] },
+      ),
+      appearance: optional(
+        group({
+          title: "Appearance",
+          children: {
+            lineColor: optional(
+              prop({
+                title: "Line color",
+                description: "Color for the timeline dot/line",
+                schema: StringEnum(["primary", "secondary", "accent"], {
+                  default: "primary",
+                  enumNames: ["Primary", "Secondary", "Accent"],
+                }),
+              }),
+            ),
+            lineWidth: optional(
+              prop({
+                title: "Line width",
+                schema: Type.Union(
+                  [
+                    Type.Literal("border-2", { title: "Thin" }),
+                    Type.Literal("border-4", { title: "Medium" }),
+                    Type.Literal("border-8", { title: "Thick" }),
+                  ],
+                  { default: "border-2" },
+                ),
+              }),
+            ),
+            dotSize: optional(
+              prop({
+                title: "Dot size",
+                schema: Type.Union(
+                  [
+                    Type.Literal("w-3", { title: "S" }),
+                    Type.Literal("w-4", { title: "M" }),
+                    Type.Literal("w-6", { title: "L" }),
+                    Type.Literal("w-8", { title: "XL" }),
+                  ],
+                  { default: "w-4" },
+                ),
+              }),
+            ),
+            datePosition: optional(
+              prop({
+                title: "Date position",
+                schema: Type.Union(
+                  [
+                    Type.Literal("above", { title: "Above title" }),
+                    Type.Literal("below", { title: "Below title" }),
+                    Type.Literal("inline", { title: "Inline with title" }),
+                  ],
+                  { default: "above" },
+                ),
+              }),
+            ),
+          },
+        }),
+      ),
+      textStyles: optional(
+        group({
+          title: "Text styles",
+          children: {
+            dateColor: optional(colorRef({ default: "text-base-content/70", title: "Date color" })),
+            titleColor: optional(colorRef({ default: "text-base-content", title: "Title color" })),
+            descriptionColor: optional(
+              colorRef({ default: "text-base-content/80", title: "Description color" }),
+            ),
+          },
+        }),
+      ),
+    },
+    {
+      default: {
+        container: {
+          padding: "p-6",
+          backgroundColor: "bg-transparent",
+        },
+        variants: ["vertical", "with-connectors"],
+        appearance: {
+          lineColor: "primary",
+          lineWidth: "border-2",
+          dotSize: "w-4 h-4",
+          datePosition: "above",
+        },
+        textStyles: {
+          dateColor: "text-base-content/70",
+          titleColor: "text-base-content",
+          descriptionColor: "text-base-content/80",
+        },
+      },
+    },
+  ),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "Company milestone timeline with alternating layout",
+    type: "timeline",
+    props: {
+      container: {
+        backgroundColor: "bg-base-100",
+        padding: "p-8",
+      },
+      variants: ["vertical", "alternating", "with-connectors"],
+      appearance: {
+        lineColor: "primary",
+        lineWidth: "border-4",
+        dotSize: "w-6",
+        datePosition: "above",
+      },
+      items: [
+        {
+          date: "2019",
+          title: "Company Founded",
+          description: "Started our journey with a vision to revolutionize the industry",
+          icon: "mdi:rocket-launch",
+        },
+        {
+          date: "2020",
+          title: "First Product Launch",
+          description: "Released our flagship product to the market with overwhelming response",
+          icon: "mdi:product-hunt",
+        },
+        {
+          date: "2021",
+          title: "Series A Funding",
+          description: "Raised $10M in Series A funding to accelerate growth and expansion",
+          icon: "mdi:currency-usd",
+        },
+        {
+          date: "2023",
+          title: "Global Expansion",
+          description: "Opened offices in Europe and Asia, serving customers worldwide",
+          icon: "mdi:earth",
+        },
+        {
+          date: "2024",
+          title: "IPO Planning",
+          description: "Preparing for initial public offering and continued growth",
+          icon: "mdi:trending-up",
+        },
+      ],
+    },
+  },
+  {
+    description: "Project roadmap with horizontal layout",
+    type: "timeline",
+    props: {
+      container: {
+        padding: "p-8",
+      },
+      variants: ["horizontal", "with-connectors", "card-style"],
+      appearance: {
+        lineColor: "accent",
+        lineWidth: "border-2",
+        dotSize: "w-4",
+        datePosition: "below",
+      },
+      textStyles: {
+        dateColor: "text-primary",
+        titleColor: "text-base-content",
+        descriptionColor: "text-base-content/80",
+      },
+      items: [
+        {
+          date: "Q1 2024",
+          title: "Planning Phase",
+          description: "Requirements gathering and technical specifications",
+          icon: "mdi:clipboard-text",
+        },
+        {
+          date: "Q2 2024",
+          title: "Development",
+          description: "Core feature development and testing",
+          icon: "mdi:code-braces",
+        },
+        {
+          date: "Q3 2024",
+          title: "Beta Testing",
+          description: "User acceptance testing and feedback collection",
+          icon: "mdi:test-tube",
+        },
+        {
+          date: "Q4 2024",
+          title: "Launch",
+          description: "Production deployment and go-to-market strategy",
+          icon: "mdi:rocket",
+        },
+      ],
+    },
+  },
+  {
+    description: "Personal career timeline with minimal design",
+    type: "timeline",
+    props: {
+      container: {
+        padding: "p-4",
+      },
+      variants: ["vertical", "minimal"],
+      appearance: {
+        lineColor: "secondary",
+        lineWidth: "border-2",
+        datePosition: "inline",
+      },
+      textStyles: {
+        dateColor: "text-base-content/60",
+        titleColor: "text-base-content",
+        descriptionColor: "text-base-content/70",
+      },
+      items: [
+        {
+          date: "2020-2024",
+          title: "Senior Software Engineer",
+          description: "Led development of microservices architecture at Tech Startup Inc.",
+        },
+        {
+          date: "2018-2020",
+          title: "Full Stack Developer",
+          description: "Built scalable web applications using React and Node.js at Digital Agency",
+        },
+        {
+          date: "2016-2018",
+          title: "Junior Developer",
+          description: "Started career developing mobile apps and learning modern frameworks",
+        },
+        {
+          date: "2012-2016",
+          title: "Computer Science Degree",
+          description: "Bachelor's degree in Computer Science from State University",
+        },
+      ],
+    },
+  },
+  {
+    description: "Product development phases with card styling",
+    type: "timeline",
+    props: {
+      container: {
+        backgroundColor: "bg-base-50",
+        padding: "p-8",
+      },
+      variants: ["vertical", "card-style", "with-connectors"],
+      appearance: {
+        lineColor: "accent",
+        lineWidth: "border-4",
+        dotSize: "w-6",
+        datePosition: "above",
+      },
+      textStyles: {
+        dateColor: "text-accent",
+        titleColor: "text-base-content",
+        descriptionColor: "text-base-content/80",
+      },
+      items: [
+        {
+          date: "Phase 1",
+          title: "Research & Discovery",
+          description: "Market research, user interviews, and competitive analysis to understand user needs",
+          icon: "mdi:magnify",
+        },
+        {
+          date: "Phase 2",
+          title: "Design & Prototyping",
+          description: "Create wireframes, mockups, and interactive prototypes for user testing",
+          icon: "mdi:palette",
+        },
+        {
+          date: "Phase 3",
+          title: "Development",
+          description: "Build the product using agile methodology with continuous integration",
+          icon: "mdi:hammer-wrench",
+        },
+        {
+          date: "Phase 4",
+          title: "Testing & QA",
+          description:
+            "Comprehensive testing including unit tests, integration tests, and user acceptance testing",
+          icon: "mdi:bug",
+        },
+        {
+          date: "Phase 5",
+          title: "Launch & Monitor",
+          description:
+            "Product launch with monitoring, analytics, and continuous improvement based on user feedback",
+          icon: "mdi:rocket-launch",
+        },
+      ],
+    },
+  },
+  {
+    description: "Event schedule timeline with large dots",
+    type: "timeline",
+    props: {
+      container: {
+        backgroundColor: "bg-primary/5",
+        padding: "p-8",
+      },
+      variants: ["vertical", "with-connectors"],
+      appearance: {
+        lineColor: "primary",
+        lineWidth: "border-8",
+        dotSize: "w-6",
+        datePosition: "above",
+      },
+      textStyles: {
+        dateColor: "text-primary",
+        titleColor: "text-primary",
+        descriptionColor: "text-base-content",
+      },
+      items: [
+        {
+          date: "9:00 AM",
+          title: "Registration & Welcome",
+          description: "Check-in, networking breakfast, and welcome address by the CEO",
+          icon: "mdi:account-check",
+        },
+        {
+          date: "10:00 AM",
+          title: "Keynote Presentation",
+          description: "Future of Technology: Trends and Innovations Shaping Tomorrow",
+          icon: "mdi:presentation",
+        },
+        {
+          date: "11:30 AM",
+          title: "Panel Discussion",
+          description: "Industry leaders discuss challenges and opportunities in digital transformation",
+          icon: "mdi:account-group",
+        },
+        {
+          date: "1:00 PM",
+          title: "Networking Lunch",
+          description: "Catered lunch with opportunities to connect with speakers and attendees",
+          icon: "mdi:food",
+        },
+        {
+          date: "2:30 PM",
+          title: "Workshop Sessions",
+          description: "Hands-on workshops covering AI, cloud computing, and cybersecurity",
+          icon: "mdi:school",
+        },
+        {
+          date: "4:00 PM",
+          title: "Closing Remarks",
+          description: "Summary of key insights and announcement of next year's conference",
+          icon: "mdi:microphone",
+        },
+      ],
+    },
+  },
+];

package/src/shared/bricks/manifests/video.manifest.ts

@@ -0,0 +1,59 @@
+import { defineBrickManifest } from "~/shared/brick-manifest";
+import { defineProps, optional } from "../props/helpers";
+import { RxVideo } from "react-icons/rx";
+import { string } from "../props/string";
+import type { BrickProps } from "../props/types";
+import type { FC } from "react";
+import { backgroundRef } from "../props/background";
+import { borderRef } from "../props/border";
+import { paddingRef } from "../props/padding";
+import { shadowRef } from "../props/effects";
+export type { Type } from "@sinclair/typebox";
+
+export const manifest = defineBrickManifest({
+  type: "video",
+  kind: "brick",
+  name: "Video",
+  description: "Youtube video",
+  repeatable: true,
+  icon: RxVideo,
+  props: defineProps({
+    url: string("Video URL", undefined, {
+      description: "URL of the video to embed. It can be a YouTube link or an embed link.",
+    }),
+    background: optional(backgroundRef()),
+    border: optional(borderRef),
+    padding: optional(paddingRef),
+    shadow: optional(shadowRef()),
+  }),
+});
+
+export type Manifest = typeof manifest;
+
+export const examples: {
+  description: string;
+  type: string;
+  props: BrickProps<Manifest>["brick"]["props"];
+}[] = [
+  {
+    description: "A YouTube video",
+    type: "video",
+    props: {
+      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    },
+  },
+  {
+    description: "An embedded YouTube video",
+    type: "video",
+    props: {
+      url: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+    },
+  },
+  {
+    description: "A Vimeo video",
+    type: "video",
+    props: {
+      url: "https://vimeo.com/123456789",
+    },
+  },
+];