southpaw 0.2.7

package/ui/blocks/herobanner.tsx

@@ -0,0 +1,391 @@
+import { create_component } from "southpaw/modules/component";
+import { UI } from "..";
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  infoText?: string;
+  primaryCta?: string;
+  secondaryCta?: string;
+  bullets?: string[];
+  backgroundImage?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  highlightColor?: string;
+  showPattern?: boolean;
+  alignment?: "left" | "center" | "right";
+  size?: "sm" | "md" | "lg" | "xl";
+  layout?: "single" | "split";
+  imageUrl?: string;
+};
+
+const Component = create_component({
+  name: "HeroBanner",
+  description:
+    "A versatile hero banner with gradient background, call-to-action buttons, optional bullet points, and split layout support",
+  props: {
+    title: "Build Something Amazing",
+    subtitle: "The Future is Here",
+    description:
+      "Transform your ideas into reality with our cutting-edge platform. Start building today and see the difference innovation makes.",
+    primaryCta: "Get Started",
+    secondaryCta: "Learn More",
+    bullets: [
+      "TypeScript based – build type safe applications, all components and hooks export types",
+      "Free and open source – all packages have MIT license, you can use in any project",
+      "No annoying focus ring – focus ring will appear only when user navigates with keyboard",
+    ],
+    backgroundImage: "",
+    showPattern: true,
+    alignment: "center",
+    size: "lg",
+    layout: "single",
+    imageUrl: "https://placehold.co/400x400",
+    infoText: "Trusted by 10,000+ developers",
+  } as Props,
+  propsDef: {
+    title: {
+      type: "text",
+      label: "Main Title",
+    },
+    subtitle: {
+      type: "text",
+      label: "Subtitle",
+    },
+    description: {
+      type: "text",
+      label: "Description",
+    },
+    primaryCta: {
+      type: "text",
+      label: "Primary CTA Text",
+    },
+    secondaryCta: {
+      type: "text",
+      label: "Secondary CTA Text",
+    },
+    bullets: {
+      type: "list-text",
+      label: "Bullet Points",
+    },
+    infoText: {
+      type: "text",
+      label: "Info Text",
+    },
+    backgroundImage: {
+      type: "text",
+      label: "Background Image URL",
+    },
+    backgroundColor: {
+      type: "color",
+      label: "Background Color",
+    },
+    textColor: {
+      type: "color",
+      label: "Text Color",
+    },
+    highlightColor: {
+      type: "color",
+      label: "Text Color",
+    },
+    showPattern: {
+      type: "switch",
+      label: "Show Pattern Overlay",
+    },
+    alignment: {
+      type: "select",
+      label: "Text Alignment",
+      options: [
+        { value: "left", label: "Left" },
+        { value: "center", label: "Center" },
+        { value: "right", label: "Right" },
+      ],
+    },
+    size: {
+      type: "select",
+      label: "Hero Size",
+      options: [
+        { value: "sm", label: "Small" },
+        { value: "md", label: "Medium" },
+        { value: "lg", label: "Large" },
+        { value: "xl", label: "Extra Large" },
+      ],
+    },
+    layout: {
+      type: "select",
+      label: "Layout Type",
+      options: [
+        { value: "single", label: "Single Column" },
+        { value: "split", label: "Split with Image" },
+      ],
+    },
+    imageUrl: {
+      type: "text",
+      label: "Image URL (for split layout)",
+    },
+  },
+  render() {
+    const {
+      title,
+      subtitle,
+      description,
+      primaryCta,
+      secondaryCta,
+      bullets,
+      backgroundImage,
+      backgroundColor,
+      textColor,
+      highlightColor,
+      showPattern,
+      alignment,
+      size,
+      layout,
+      imageUrl,
+      infoText,
+    } = this.props as Required<Props>;
+
+    const sizeProps = {
+      sm: { py: 60, titleSize: 32, subtitleSize: "sm", descSize: "md" },
+      md: { py: 80, titleSize: 42, subtitleSize: "md", descSize: "lg" },
+      lg: { py: 120, titleSize: 52, subtitleSize: "lg", descSize: "xl" },
+      xl: { py: 160, titleSize: 62, subtitleSize: "xl", descSize: "xl" },
+    }[size];
+
+    const alignItems = {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end",
+    }[alignment];
+
+    const textAlign = alignment;
+
+    const renderContent = () => (
+      <UI.flex
+        direction="column"
+        align={alignItems}
+        gap={24}
+        maw={layout === "split" ? undefined : 800}
+        mx={alignment === "center" && layout === "single" ? "auto" : undefined}
+        ml={alignment === "left" ? 0 : undefined}
+        mr={alignment === "right" ? 0 : undefined}
+        flex={layout === "split" ? 1 : undefined}
+      >
+        {/* Subtitle */}
+        {subtitle && (
+          <UI.badge
+            variant="light"
+            size={sizeProps.subtitleSize}
+            radius="xl"
+            c={textColor}
+            style={{
+              backgroundColor:
+                layout === "single"
+                  ? "rgba(255,255,255,0.2)"
+                  : "rgba(59, 130, 246, 0.1)",
+              backdropFilter: layout === "single" ? "blur(10px)" : undefined,
+              border:
+                layout === "single"
+                  ? "1px solid rgba(255,255,255,0.3)"
+                  : "1px solid rgba(59, 130, 246, 0.2)",
+            }}
+          >
+            {subtitle}
+          </UI.badge>
+        )}
+
+        {/* Main Title */}
+        <UI.title
+          text={title}
+          order={1}
+          fz={sizeProps.titleSize}
+          fw={700}
+          lh={1.1}
+          ta={textAlign}
+          style={{
+            textShadow:
+              backgroundImage && layout === "single"
+                ? "2px 2px 4px rgba(0,0,0,0.5)"
+                : undefined,
+          }}
+        />
+
+        {/* Description */}
+        <UI.text
+          text={description}
+          size={sizeProps.descSize}
+          ta={textAlign}
+          opacity={0.9}
+          maw={layout === "split" ? undefined : 600}
+          lh={1.6}
+          style={{
+            textShadow:
+              backgroundImage && layout === "single"
+                ? "1px 1px 2px rgba(0,0,0,0.5)"
+                : undefined,
+          }}
+        />
+
+        {/* Bullet Points */}
+        {bullets && bullets.length > 0 && (
+          <UI.list
+            items={bullets.map((bullet, index) => ({
+              children: (
+                <UI.flex key={index} align="center" gap={12} mb={16}>
+                  <UI.icon icon="add_circle" c={highlightColor} />
+                  <UI.text text={bullet} lh={1.6} style={{ flex: 1 }} />
+                </UI.flex>
+              ),
+            }))}
+            listStyleType="none"
+            withPadding={false}
+          />
+        )}
+
+        {/* CTA Buttons */}
+        <UI.flex
+          gap={16}
+          mt={16}
+          direction={{ base: "column", sm: "row" }}
+          align={alignment === "center" ? "center" : "flex-start"}
+          justify={
+            alignment === "center"
+              ? "center"
+              : alignment === "right"
+                ? "flex-end"
+                : "flex-start"
+          }
+        >
+          {primaryCta && (
+            <UI.button
+              size="lg"
+              radius="md"
+              fw={600}
+              px={32}
+              color={highlightColor}
+              style={{
+                boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+                transition: "all 0.3s ease",
+              }}
+            >
+              {primaryCta}
+            </UI.button>
+          )}
+
+          {secondaryCta && (
+            <UI.button
+              size="lg"
+              radius="md"
+              variant="outline"
+              color={highlightColor}
+              fw={500}
+              px={32}
+              style={
+                layout === "single"
+                  ? {
+                      borderColor: "rgba(255,255,255,0.5)",
+                      backgroundColor: "rgba(255,255,255,0.1)",
+                      backdropFilter: "blur(10px)",
+                      transition: "all 0.3s ease",
+                    }
+                  : {
+                      transition: "all 0.3s ease",
+                    }
+              }
+            >
+              {secondaryCta}
+            </UI.button>
+          )}
+        </UI.flex>
+
+        {/* Info Text */}
+        {infoText && (
+          <UI.flex gap={8} mt={32} opacity={0.7} justify={alignment}>
+            <UI.icon icon="star" fz={16} />
+            <UI.text size="sm" fw={500} text={infoText} />
+          </UI.flex>
+        )}
+      </UI.flex>
+    );
+
+    return (
+      <UI.box
+        pos="relative"
+        py={sizeProps.py}
+        px={40}
+        c={textColor}
+        style={{
+          backgroundColor,
+          backgroundImage:
+            backgroundImage && layout === "single"
+              ? `url(${backgroundImage})`
+              : undefined,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+          overflow: "hidden",
+          minHeight: layout === "split" ? "100vh" : undefined,
+        }}
+      >
+        {/* Pattern Overlay - only for single layout */}
+        {showPattern && layout === "single" && (
+          <UI.box
+            pos="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            style={{
+              background: `
+                /* Geometric grid with glow */
+                repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255,255,255,0.06) 82px, rgba(255,255,255,0.02) 84px, transparent 120px),
+                repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(255,255,255,0.06) 82px, rgba(255,255,255,0.02) 84px, transparent 120px),
+
+                /* Corner highlights */
+                radial-gradient(ellipse 400px 200px at 0% 0%, rgba(255,255,255,0.08) 0%, transparent 50%),
+                radial-gradient(ellipse 400px 200px at 100% 100%, rgba(255,255,255,0.08) 0%, transparent 50%)
+              `,
+              pointerEvents: "none",
+            }}
+          >
+            {null}
+          </UI.box>
+        )}
+
+        {/* Gradient Overlay for better text readability - only for single layout with background image */}
+        {backgroundImage && layout === "single" && (
+          <UI.box
+            pos="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            style={{
+              background: `linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%)`,
+              pointerEvents: "none",
+            }}
+          >
+            {null}
+          </UI.box>
+        )}
+
+        <UI.container
+          size={layout === "split" ? "xl" : "lg"}
+          pos="relative"
+          style={{ zIndex: 1 }}
+        >
+          {layout === "split" ? (
+            <UI.flex wrap="wrap" gap="xl" c="dark">
+              {renderContent()}
+              <UI.image flex={1} miw={400} alt="Hero image" src={imageUrl} />
+            </UI.flex>
+          ) : (
+            renderContent()
+          )}
+        </UI.container>
+      </UI.box>
+    );
+  },
+});
+
+export default Component;

package/ui/blocks/index.ts

@@ -0,0 +1,44 @@
+import dynamic from "next/dynamic";
+
+export const Blocks = {
+  herobanner: (() => {
+    const Comp = dynamic(() => import("./herobanner"));
+    Comp.displayName = "Blocks.herobanner";
+    return Comp;
+  })(),
+  features: (() => {
+    const Comp = dynamic(() => import("./features"));
+    Comp.displayName = "Blocks.features";
+    return Comp;
+  })(),
+  pricing: (() => {
+    const Comp = dynamic(() => import("./pricing"));
+    Comp.displayName = "Blocks.pricing";
+    return Comp;
+  })(),
+  testimonials: (() => {
+    const Comp = dynamic(() => import("./testimonials"));
+    Comp.displayName = "Blocks.testimonials";
+    return Comp;
+  })(),
+  faq: (() => {
+    const Comp = dynamic(() => import("./faq"));
+    Comp.displayName = "Blocks.faq";
+    return Comp;
+  })(),
+  footer: (() => {
+    const Comp = dynamic(() => import("./footer"));
+    Comp.displayName = "Blocks.footer";
+    return Comp;
+  })(),
+  leftnav: (() => {
+    const Comp = dynamic(() => import("./leftnav"));
+    Comp.displayName = "Blocks.leftnav";
+    return Comp;
+  })(),
+  uidocs: (() => {
+    const Comp = dynamic(() => import("./uidocs"));
+    Comp.displayName = "Blocks.uidocs";
+    return Comp;
+  })(),
+};

package/ui/blocks/leftnav.tsx

@@ -0,0 +1,141 @@
+import { ListItemProps } from "@mantine/core";
+import { Fragment } from "react";
+import { create_component } from "southpaw/modules/component";
+import { UI } from "..";
+
+type NavChild = {
+  label: string;
+  href: string; // base path (ex: "/ui")
+  section?: string; // query section (ex: "accordion")
+};
+
+type Props = {
+  items: {
+    title: string;
+    href?: string;
+    children?: NavChild[];
+  }[];
+  onItemClick?: () => void;
+};
+
+const Component = create_component({
+  name: "Leftnav",
+  description: "A leftnav",
+  props: {
+    items: [
+      {
+        title: "Getting started",
+        href: "/getting-started",
+        children: [
+          {
+            label: "Create project",
+            href: "/getting-started",
+            section: "create-project",
+          },
+          {
+            label: "Create component",
+            href: "/getting-started",
+            section: "create-component",
+          },
+          {
+            label: "Create page",
+            href: "/getting-started",
+            section: "create-page",
+          },
+          {
+            label: "Create app",
+            href: "/getting-started",
+            section: "create-app",
+          },
+        ],
+      },
+    ],
+  } as Props,
+  methods: {
+    getHrefSection(href: string) {
+      if (!href.includes("?")) return undefined;
+      const search = href.split("?")[1];
+      const params = new URLSearchParams(search);
+      return params.get("section");
+    },
+  },
+  render() {
+    const { items } = this.props as Required<Props>;
+    const section = this.methods.getHrefSection(this.router.asPath);
+
+    return (
+      <UI.flex
+        bg="var(--mantine-color-body)"
+        h="100%"
+        py="lg"
+        direction="column"
+        align="flex-start"
+        style={{ overflowY: "auto", overflowX: "hidden" }}
+      >
+        {items.map((item) => {
+          const children: ListItemProps[] = (item.children || []).map(
+            (child) => {
+              const isActive =
+                section === this.methods.getHrefSection(child.href);
+
+              const href = child.section
+                ? `${child.href}?section=${child.section}`
+                : child.href;
+
+              return {
+                children: (
+                  <UI.anchor
+                    key={child.label}
+                    href={href}
+                    c={
+                      isActive
+                        ? "var(--mantine-primary-color-filled)"
+                        : "var(--text-color)"
+                    }
+                    onClick={() => this.props.onItemClick?.()}
+                  >
+                    <UI.text text={child.label} />
+                  </UI.anchor>
+                ),
+              };
+            },
+          );
+
+          if (item.href) {
+            const isActive = section === this.methods.getHrefSection(item.href);
+
+            return (
+              <Fragment key={item.title}>
+                <UI.anchor
+                  href={item.href}
+                  onClick={() => this.props.onItemClick?.()}
+                >
+                  <UI.text
+                    fw="bold"
+                    text={item.title}
+                    c={
+                      isActive
+                        ? "var(--mantine-primary-color-filled)"
+                        : "var(--text-color)"
+                    }
+                  />
+                </UI.anchor>
+
+                <UI.list items={children} listStyleType="none" withPadding />
+              </Fragment>
+            );
+          }
+
+          return (
+            <Fragment key={item.title}>
+              <UI.text fw="bold" text={item.title} />
+              <UI.list items={children} listStyleType="none" withPadding />
+            </Fragment>
+          );
+        })}
+      </UI.flex>
+    );
+  },
+});
+
+export default Component;