@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/charts/radar-widget.chart.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart as OriginalRadarChart } from "recharts"
+import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent} from "../ui/chart";
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {cn} from "../../infrastructure/utilities/utils";
+import { RadarChartWidgetProps } from "./chart-widgets.types";
+
+export function RadarWidgetChart({
+  data,
+  config,
+  title,
+  description,
+  footerTitle,
+  footerDescription,
+  radars,
+  polarAngleDataKey = "month",
+  gridShape,
+  className,
+  hideCard = false,
+}: RadarChartWidgetProps) {
+  const content = (
+    <>
+      {(title || description) && !hideCard && (
+        <CardHeader className="items-center pb-4">
+          <CardTitle>{title}</CardTitle>
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent className={cn("pb-0", hideCard ? "p-0" : "")}>
+        <ChartContainer
+          config={config}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <OriginalRadarChart data={data}>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <PolarAngleAxis dataKey={polarAngleDataKey} />
+            <PolarGrid gridType={gridShape} />
+            {radars.map((radar) => (
+              <Radar
+                key={radar.dataKey}
+                dataKey={radar.dataKey}
+                fill={radar.fill || `var(--color-${radar.dataKey})`}
+                fillOpacity={radar.fillOpacity ?? 0.6}
+              />
+            ))}
+          </OriginalRadarChart>
+        </ChartContainer>
+      </CardContent>
+      {(footerTitle || footerDescription) && !hideCard && (
+        <CardFooter className="flex-col gap-2 text-sm">
+          {footerTitle && (
+            <div className="flex items-center gap-2 leading-none font-medium">
+              {footerTitle} <TrendingUp className="h-4 w-4" />
+            </div>
+          )}
+          {footerDescription && (
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+              {footerDescription}
+            </div>
+          )}
+        </CardFooter>
+      )}
+    </>
+  )
+
+  if (hideCard) {
+    return content
+  }
+
+  return (
+    <Card className={className}>
+      {content}
+    </Card>
+  )
+}

package/src/presentation/charts/radial-stacked-widget.chart-skeleton.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {Skeleton} from "../ui/skeleton";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export interface RadialStackedWidgetChartSkeletonProps {
+    title?: string
+    description?: string
+    footerTitle?: string
+    footerDescription?: string
+    className?: string
+    hideCard?: boolean
+}
+
+export function RadialStackedWidgetChartSkeleton(
+    {
+        title,
+        description,
+        footerTitle,
+        footerDescription,
+        className,
+        hideCard = false,
+    }: RadialStackedWidgetChartSkeletonProps
+) {
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader className="items-center pb-0">
+                    <CardTitle>
+                        <Skeleton className="h-5 w-48"/>
+                    </CardTitle>
+                    {description && (
+                        <CardDescription>
+                            <Skeleton className="h-4 w-64"/>
+                        </CardDescription>
+                    )}
+                </CardHeader>
+            )}
+            <CardContent className={cn("flex flex-1 items-center justify-center pb-0", hideCard ? "p-0" : "")}>
+                <div className="relative mx-auto aspect-square w-full max-w-[250px]">
+                    <Skeleton className="h-full w-full rounded-full"/>
+                    <div className="absolute inset-0 flex items-center justify-center">
+                        <Skeleton className="h-16 w-24"/>
+                    </div>
+                </div>
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+                <CardFooter className="flex-col items-center gap-2 text-sm">
+                    {footerTitle && <Skeleton className="h-4 w-40"/>}
+                    {footerDescription && <Skeleton className="h-4 w-56"/>}
+                </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={cn("flex flex-col", className)}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/radial-stacked-widget.chart.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import {TrendingUp} from "lucide-react"
+import {
+    Label,
+    PolarRadiusAxis,
+    RadialBar,
+    RadialBarChart,
+} from "recharts"
+import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent} from "../ui/chart";
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {cn} from "../../infrastructure/utilities/utils";
+import { RadialStackedChartWidgetProps } from "./chart-widgets.types";
+
+export function RadialStackedWidgetChart({
+  data,
+  config,
+  title,
+  description,
+  footerTitle,
+  footerDescription,
+  bars,
+  innerRadius = 80,
+  outerRadius = 110,
+  endAngle = 180,
+  innerLabel = "Visitors",
+  className,
+  hideCard = false,
+}: RadialStackedChartWidgetProps) {
+    const totalValue = bars.reduce((acc, bar) => acc + (data[0]?.[bar.dataKey] || 0), 0)
+
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader className="items-center pb-0">
+                    <CardTitle>{title}</CardTitle>
+                    {description && <CardDescription>{description}</CardDescription>}
+                </CardHeader>
+            )}
+            <CardContent className={cn("flex flex-1 items-center pb-0", hideCard ? "p-0" : "")}>
+                <ChartContainer
+                    config={config}
+                    className="mx-auto aspect-square w-full max-w-[250px]"
+                >
+                    <RadialBarChart
+                        data={data}
+                        endAngle={endAngle}
+                        innerRadius={innerRadius}
+                        outerRadius={outerRadius}
+                    >
+                        {bars.map((bar) => (
+                          <RadialBar
+                              key={bar.dataKey}
+                              dataKey={bar.dataKey}
+                              fill={bar.fill || `var(--color-${bar.dataKey})`}
+                              stackId={bar.stackId || "a"}
+                              cornerRadius={bar.cornerRadius ?? 5}
+                              className="stroke-transparent stroke-2"
+                          />
+                        ))}
+                        <ChartTooltip
+                            cursor={false}
+                            content={<ChartTooltipContent hideLabel/>}
+                        />
+                        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                            <Label
+                                content={({viewBox}) => {
+                                    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                        return (
+                                            <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={(viewBox.cy || 0) - 16}
+                                                    className="fill-foreground text-2xl font-bold"
+                                                >
+                                                    {totalValue.toLocaleString()}
+                                                </tspan>
+                                                <tspan
+                                                    x={viewBox.cx}
+                                                    y={(viewBox.cy || 0) + 4}
+                                                    className="fill-muted-foreground"
+                                                >
+                                                    {innerLabel}
+                                                </tspan>
+                                            </text>
+                                        )
+                                    }
+                                }}
+                            />
+                        </PolarRadiusAxis>
+                    </RadialBarChart>
+                </ChartContainer>
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+              <CardFooter className="flex-col gap-2 text-sm">
+                  {footerTitle && (
+                    <div className="flex items-center gap-2 leading-none font-medium">
+                        {footerTitle} <TrendingUp className="h-4 w-4"/>
+                    </div>
+                  )}
+                  {footerDescription && (
+                    <div className="leading-none text-muted-foreground">
+                        {footerDescription}
+                    </div>
+                  )}
+              </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={cn("flex flex-col", className)}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/radial-widget.chart-skeleton.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {Skeleton} from "../ui/skeleton";
+import {cn} from "../../infrastructure/utilities/utils";
+
+export interface RadialWidgetChartSkeletonProps {
+    title?: string
+    description?: string
+    footerTitle?: string
+    footerDescription?: string
+    className?: string
+    hideCard?: boolean
+}
+
+export function RadialWidgetChartSkeleton(
+    {
+        title,
+        description,
+        footerTitle,
+        footerDescription,
+        className,
+        hideCard = false,
+    }: RadialWidgetChartSkeletonProps
+) {
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader className="items-center pb-0">
+                    <CardTitle>
+                        <Skeleton className="h-5 w-48"/>
+                    </CardTitle>
+                    {description && (
+                        <CardDescription>
+                            <Skeleton className="h-4 w-64"/>
+                        </CardDescription>
+                    )}
+                </CardHeader>
+            )}
+            <CardContent className={cn("flex flex-1 items-center justify-center pb-0", hideCard ? "p-0" : "")}>
+                <Skeleton className="mx-auto aspect-square max-h-[250px] w-full rounded-full"/>
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+                <CardFooter className="flex-col items-center gap-2 text-sm">
+                    {footerTitle && <Skeleton className="h-4 w-40"/>}
+                    {footerDescription && <Skeleton className="h-4 w-56"/>}
+                </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={cn("flex flex-col", className)}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/radial-widget.chart.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { LabelList, RadialBar, RadialBarChart } from "recharts"
+import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent} from "../ui/chart";
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {cn} from "../../infrastructure/utilities/utils";
+import { RadialChartWidgetProps } from "./chart-widgets.types";
+
+export function RadialWidgetChart({
+  data,
+  config,
+  title,
+  description,
+  footerTitle,
+  footerDescription,
+  dataKey,
+  nameKey,
+  startAngle = -90,
+  endAngle = 380,
+  innerRadius = 30,
+  outerRadius = 110,
+  className,
+  hideCard = false,
+}: RadialChartWidgetProps) {
+  const content = (
+    <>
+      {(title || description) && !hideCard && (
+        <CardHeader className="items-center pb-0">
+          <CardTitle>{title}</CardTitle>
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent className={cn("flex-1 pb-0", hideCard ? "p-0" : "")}>
+        <ChartContainer
+          config={config}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <RadialBarChart
+            data={data}
+            startAngle={startAngle}
+            endAngle={endAngle}
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
+          >
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel nameKey={nameKey} />}
+            />
+            <RadialBar dataKey={dataKey} background>
+              <LabelList
+                position="insideStart"
+                dataKey={nameKey}
+                className="fill-white capitalize mix-blend-luminosity"
+                fontSize={11}
+              />
+            </RadialBar>
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+      {(footerTitle || footerDescription) && !hideCard && (
+        <CardFooter className="flex-col gap-2 text-sm">
+          {footerTitle && (
+            <div className="flex items-center gap-2 leading-none font-medium">
+              {footerTitle} <TrendingUp className="h-4 w-4" />
+            </div>
+          )}
+          {footerDescription && (
+            <div className="leading-none text-muted-foreground">
+              {footerDescription}
+            </div>
+          )}
+        </CardFooter>
+      )}
+    </>
+  )
+
+  if (hideCard) {
+    return content
+  }
+
+  return (
+    <Card className={cn("flex flex-col", className)}>
+      {content}
+    </Card>
+  )
+}

package/src/presentation/charts/tooltip-widget.chart-skeleton.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {Skeleton} from "../ui/skeleton";
+
+export interface TooltipWidgetChartSkeletonProps {
+    title?: string
+    description?: string
+    footerTitle?: string
+    footerDescription?: string
+    className?: string
+    hideCard?: boolean
+}
+
+export function TooltipWidgetChartSkeleton(
+    {
+        title,
+        description,
+        footerTitle,
+        footerDescription,
+        className,
+        hideCard = false,
+    }: TooltipWidgetChartSkeletonProps
+) {
+    const content = (
+        <>
+            {(title || description) && !hideCard && (
+                <CardHeader>
+                    <CardTitle>
+                        <Skeleton className="h-5 w-48"/>
+                    </CardTitle>
+                    {description && (
+                        <CardDescription>
+                            <Skeleton className="h-4 w-64"/>
+                        </CardDescription>
+                    )}
+                </CardHeader>
+            )}
+            <CardContent className={hideCard ? "p-0" : ""}>
+                <div className={hideCard ? "w-full" : "flex flex-col gap-2"}>
+                    <Skeleton className="h-64 w-full"/>
+                    <Skeleton className="h-4 w-full"/>
+                    <Skeleton className="h-4 w-2/3"/>
+                </div>
+            </CardContent>
+            {(footerTitle || footerDescription) && !hideCard && (
+                <CardFooter className="flex-col items-start gap-2 text-sm">
+                    {footerTitle && <Skeleton className="h-4 w-40"/>}
+                    {footerDescription && <Skeleton className="h-4 w-56"/>}
+                </CardFooter>
+            )}
+        </>
+    )
+
+    if (hideCard) {
+        return content
+    }
+
+    return (
+        <Card className={className}>
+            {content}
+        </Card>
+    )
+}

package/src/presentation/charts/tooltip-widget.chart.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { TrendingUp } from "lucide-react"
+import { Bar, BarChart, XAxis } from "recharts"
+import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent} from "../ui/chart";
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "../ui/card";
+import {cn} from "../../infrastructure/utilities/utils";
+import { TooltipChartWidgetProps } from "./chart-widgets.types";
+
+export function TooltipWidgetChart({
+  data,
+  config,
+  title,
+  description,
+  footerTitle,
+  footerDescription,
+  bars,
+  xAxisDataKey = "date",
+  className,
+  hideCard = false,
+}: TooltipChartWidgetProps) {
+  const content = (
+    <>
+      {(title || description) && !hideCard && (
+        <CardHeader>
+          <CardTitle>{title}</CardTitle>
+          {description && <CardDescription>{description}</CardDescription>}
+        </CardHeader>
+      )}
+      <CardContent className={hideCard ? "p-0" : ""}>
+        <ChartContainer config={config}>
+          <BarChart accessibilityLayer data={data}>
+            <XAxis
+              dataKey={xAxisDataKey}
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                if (isNaN(date.getTime())) return String(value)
+                return date.toLocaleDateString("en-US", {
+                  weekday: "short",
+                })
+              }}
+            />
+            {bars.map((bar) => (
+              <Bar
+                key={bar.dataKey}
+                dataKey={bar.dataKey}
+                stackId={bar.stackId || "a"}
+                fill={bar.fill || `var(--color-${bar.dataKey})`}
+                radius={bar.radius}
+              />
+            ))}
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="line" />}
+              cursor={false}
+              defaultIndex={1}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      {(footerTitle || footerDescription) && !hideCard && (
+        <CardFooter className="flex-col items-start gap-2 text-sm">
+          {footerTitle && (
+            <div className="flex gap-2 leading-none font-medium">
+              {footerTitle} <TrendingUp className="h-4 w-4" />
+            </div>
+          )}
+          {footerDescription && (
+            <div className="leading-none text-muted-foreground">
+              {footerDescription}
+            </div>
+          )}
+        </CardFooter>
+      )}
+    </>
+  )
+
+  if (hideCard) {
+    return content
+  }
+
+  return (
+    <Card className={className}>
+      {content}
+    </Card>
+  )
+}

package/src/presentation/components/activity-actions.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { ReactNode } from "react"
+import { cn } from "../../infrastructure/utilities/utils"
+
+export interface ActivityActionsProps {
+  children: ReactNode
+  className?: string
+}
+
+export function ActivityActions({ children, className }: ActivityActionsProps) {
+  return (
+    <div
+      data-slot="activity-actions"
+      className={cn("flex flex-row items-center gap-2 shrink-0", className)}
+    >
+      {children}
+    </div>
+  )
+}

package/src/presentation/components/activity-container.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { Children, ReactNode } from "react"
+import { Motion } from "../../infrastructure/library/motion"
+import { elasticContainer, elasticEnter, elasticScaleEnter } from "../../infrastructure/library/motion-utils"
+import { cn } from "../../infrastructure/utilities/utils"
+
+export interface ActivityContainerProps {
+  children: ReactNode
+  className?: string
+  variant?: "enter" | "scale" | "container" | "none"
+  stagger?: number
+  delay?: number
+  animateChildren?: boolean
+}
+
+export function ActivityContainer({
+  children,
+  className,
+  variant = "enter",
+  stagger = 0.08,
+  delay = 0,
+  animateChildren = false,
+}: ActivityContainerProps) {
+  if (variant === "none") {
+    return <>{children}</>
+  }
+
+  if (animateChildren && variant === "container") {
+    const childrenArray = Children.toArray(children)
+    return (
+      <Motion
+        className={cn('flex flex-col w-full gap-4', className, '')}
+        animation={elasticContainer(delay, stagger)}
+      >
+        {childrenArray.map((child) => child)}
+      </Motion>
+    )
+  }
+
+  const animation = variant === "enter"
+    ? elasticEnter(delay)
+    : variant === "scale"
+      ? elasticScaleEnter()
+      : elasticContainer(delay, stagger)
+
+  return (
+    <Motion
+      className={cn("w-full flex flex-col gap-4", className)}
+      animation={animation}
+    >
+      {children}
+    </Motion>
+  )
+}

package/src/presentation/components/activity-content.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { ReactNode } from "react"
+import { cn } from "../../infrastructure/utilities/utils"
+
+export interface ActivityContentProps {
+  children: ReactNode
+  className?: string
+}
+
+export function ActivityContent({ children, className }: ActivityContentProps) {
+  return (
+    <div
+      data-slot="activity-content"
+      className={cn("flex-auto flex flex-col gap-6", className)}
+    >
+      {children}
+    </div>
+  )
+}