@superblocksteam/vite-plugin-file-sync 2.0.170-next.1 → 2.0.171-next.0

package/dist/migration-templates/app-fullstack/client/components/ui/bar-chart.tsx

@@ -1,264 +0,0 @@
-import React from "react";
-import {
-  BarChart as BarChartComponent,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  LabelList,
-} from "recharts";
-
-import {
-  registerComponent,
-  Prop,
-  Section,
-  PropsCategory,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
-import { cn } from "@/lib/utils";
-
-import type { ChartConfig } from "./chart";
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  sanitizeForCssVar,
-  fixColorFormat,
-  createKeyMapping,
-} from "./chart";
-
-type ComponentProps = Omit<
-  React.ComponentPropsWithoutRef<typeof ChartContainer>,
-  "children" | "config"
-> & {
-  data?: any[];
-  xAxisKey?: string;
-  categories?: string[];
-  seriesLabels?: Record<string, string>;
-  colors?: string[];
-  stackIds?: Record<string, string>;
-  gridStyle?: "solid" | "dashed" | "hidden";
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  showTooltip?: boolean;
-  showLegend?: boolean;
-  layout?: "horizontal" | "vertical";
-  barSize?: number;
-  stackOffset?: "expand" | "none" | "wiggle" | "silhouette";
-  barRadius?: number | [number, number, number, number];
-  showBarLabels?: boolean;
-  enableAnimation?: boolean;
-  onDataClick?: (data: any) => void;
-};
-
-const BarChart = ({ className, ...props }: ComponentProps) => {
-  const chartConfig: ChartConfig = React.useMemo(() => {
-    const effectiveCategories =
-      props.categories && props.categories.length > 0
-        ? props.categories
-        : props.data && props.data.length > 0
-          ? Object.keys(props.data[0]).filter((key) => {
-              if (key === props.xAxisKey) return false;
-              const value = props.data![0][key];
-              return typeof value === "number";
-            })
-          : [];
-
-    if (!effectiveCategories.length) return {};
-
-    const config: ChartConfig = {};
-    effectiveCategories.forEach((key, index) => {
-      const sanitizedKey = sanitizeForCssVar(key);
-      const label = props.seriesLabels?.[key] || key;
-      const color = fixColorFormat(
-        props.colors?.[index] || `var(--chart-${(index % 5) + 1})`,
-      );
-
-      config[sanitizedKey] = {
-        label,
-        color,
-      };
-    });
-
-    return config;
-  }, [
-    props.categories,
-    props.seriesLabels,
-    props.colors,
-    props.data,
-    props.xAxisKey,
-  ]);
-
-  const keyMapping = React.useMemo(() => {
-    const effectiveCategories =
-      props.categories && props.categories.length > 0
-        ? props.categories
-        : props.data && props.data.length > 0
-          ? Object.keys(props.data[0]).filter((key) => {
-              if (key === props.xAxisKey) return false;
-              const value = props.data![0][key];
-              return typeof value === "number";
-            })
-          : [];
-
-    return effectiveCategories.length > 0
-      ? createKeyMapping(
-          Object.fromEntries(effectiveCategories.map((k) => [k, { label: k }])),
-        )
-      : new Map();
-  }, [props.categories, props.data, props.xAxisKey]);
-
-  const hasData = Array.isArray(props.data) && props.data?.length;
-
-  return (
-    <ChartContainer
-      className={cn("h-full w-full pt-4 pb-4 pr-4", className)}
-      {...props}
-      config={chartConfig}
-    >
-      {hasData ? (
-        <BarChartComponent
-          data={props.data}
-          onClick={props.onDataClick}
-          accessibilityLayer
-          layout={props.layout}
-          barSize={props.barSize}
-          stackOffset={props.stackOffset}
-        >
-          {props.gridStyle !== "hidden" && (
-            <CartesianGrid
-              vertical={props.layout === "horizontal"}
-              strokeDasharray={props.gridStyle === "dashed" ? "3 3" : "0"}
-            />
-          )}
-
-          {props.showXAxis && (
-            <XAxis
-              type={props.layout === "vertical" ? "number" : "category"}
-              dataKey={props.layout === "vertical" ? undefined : props.xAxisKey}
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-            />
-          )}
-
-          {props.showYAxis && (
-            <YAxis
-              type={props.layout === "vertical" ? "category" : "number"}
-              dataKey={props.layout === "vertical" ? props.xAxisKey : undefined}
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-            />
-          )}
-
-          {props.showTooltip && (
-            <ChartTooltip
-              cursor={{ fill: "rgba(0, 0, 0, 0.1)" }}
-              content={<ChartTooltipContent />}
-            />
-          )}
-
-          {props.showLegend && <ChartLegend content={<ChartLegendContent />} />}
-
-          {Object.keys(chartConfig).map((key) => {
-            const originalKey = keyMapping.get(key) || key;
-            const stackId = props.stackIds?.[originalKey];
-            return (
-              <Bar
-                key={key}
-                dataKey={originalKey}
-                fill={`var(--color-${key})`}
-                radius={props.barRadius}
-                stackId={stackId || undefined}
-                isAnimationActive={props.enableAnimation}
-              >
-                {props.showBarLabels && (
-                  <LabelList
-                    dataKey={originalKey}
-                    position={props.layout === "vertical" ? "right" : "top"}
-                    className="fill-foreground font-semibold text-xs"
-                  />
-                )}
-              </Bar>
-            );
-          })}
-        </BarChartComponent>
-      ) : (
-        <div className="flex items-center justify-center h-full w-full min-h-32 text-muted-foreground">
-          No data available
-        </div>
-      )}
-    </ChartContainer>
-  );
-};
-
-const properties = {
-  general: Section.category(PropsCategory.Content).children({
-    data: Prop.array<any>().docs({
-      description:
-        "Array of objects where each object represents a category with X-axis value and Y-axis values for each data series. Each object should contain the xAxisKey property and properties for each bar series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple bar series (grouped or stacked).",
-    }),
-
-    xAxisKey: Prop.string().docs({
-      description:
-        "The property name in your data objects that contains the X-axis values (categories, labels, or identifiers). This determines the horizontal grouping of bars and should be consistent across all data objects.",
-    }),
-
-    categories: Prop.array<string>().docs({
-      description:
-        "Array of property names from your data objects to plot as separate bar series. Example: ['desktop', 'mobile'] will create two bar series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) from the data.",
-    }),
-
-    seriesLabels: Prop.any<Record<string, string>>().docs({
-      description:
-        "Optional object mapping category keys to display labels. Example: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. If not provided, the category keys are used as labels.",
-    }),
-
-    colors: Prop.array<string>().docs({
-      description:
-        "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
-    }),
-
-    stackIds: Prop.any<Record<string, string>>().docs({
-      description:
-        "Optional object mapping category keys to stack IDs. Bars with the same stack ID will be stacked together. Example: {desktop: 'stack1', mobile: 'stack1'} stacks desktop and mobile bars.",
-    }),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    layout: Prop.string<"vertical" | "horizontal">().docs({
-      description:
-        "Chart orientation. 'vertical' creates bars that extend upward from bottom (categories on X-axis, values on Y-axis). 'horizontal' creates bars that extend rightward from left (categories on Y-axis, values on X-axis). Layout affects axis configuration and bar positioning.",
-    }),
-
-    gridStyle: Prop.string<"solid" | "dashed" | "hidden">(),
-    showXAxis: Prop.boolean(),
-    showYAxis: Prop.boolean(),
-    showTooltip: Prop.boolean(),
-    showLegend: Prop.boolean(),
-    barSize: Prop.number(),
-    barRadius: Prop.number(),
-    showBarLabels: Prop.boolean(),
-    stackOffset: Prop.string<"none" | "expand">().docs({
-      description:
-        "Stacking behavior for bars with matching stackId. 'none' shows actual values with bars stacked to their natural heights. 'expand' normalizes all stacked bars to 100% height, showing relative proportions rather than absolute values. Only affects bars that share the same stackId.",
-    }),
-  }),
-  interaction: Section.category(PropsCategory.Interaction).children({
-    enableAnimation: Prop.boolean(),
-  }),
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onDataClick: Prop.eventHandler(),
-  }),
-};
-
-const editorConfig: EditorConfig = {
-  icon: "chart",
-};
-
-registerComponent(BarChart, properties).editorConfig(editorConfig);
-
-export { BarChart };

package/dist/migration-templates/app-fullstack/client/components/ui/code-block-content.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  oneDark,
-  oneLight,
-} from "react-syntax-highlighter/dist/esm/styles/prism";
-
-interface CodeBlockContentProps {
-  code: string;
-  language: string;
-  showLineNumbers: boolean;
-}
-
-const CodeBlockContent = ({
-  code,
-  language,
-  showLineNumbers,
-}: CodeBlockContentProps) => {
-  const commonCodeTagProps = {
-    className: "font-mono text-sm",
-  };
-
-  const commonCustomStyle = {
-    margin: 0,
-    padding: "1rem",
-    fontSize: "0.875rem",
-    background: "hsl(var(--background))",
-    color: "hsl(var(--foreground))",
-  };
-
-  const commonLineNumberStyle = {
-    color: "hsl(var(--muted-foreground))",
-    paddingRight: "1rem",
-    minWidth: "2.5rem",
-  };
-
-  return (
-    <>
-      <SyntaxHighlighter
-        className="overflow-hidden dark:hidden"
-        codeTagProps={commonCodeTagProps}
-        customStyle={commonCustomStyle}
-        language={language}
-        lineNumberStyle={commonLineNumberStyle}
-        showLineNumbers={showLineNumbers}
-        style={oneLight}
-      >
-        {code}
-      </SyntaxHighlighter>
-      <SyntaxHighlighter
-        className="hidden overflow-hidden dark:block"
-        codeTagProps={commonCodeTagProps}
-        customStyle={commonCustomStyle}
-        language={language}
-        lineNumberStyle={commonLineNumberStyle}
-        showLineNumbers={showLineNumbers}
-        style={oneDark}
-      >
-        {code}
-      </SyntaxHighlighter>
-    </>
-  );
-};
-
-export default CodeBlockContent;

package/dist/migration-templates/app-fullstack/client/components/ui/date-range-picker.tsx

@@ -1,255 +0,0 @@
-import { format } from "date-fns";
-import { ChevronDownIcon, CalendarIcon } from "lucide-react";
-import { useMemo, useState, useEffect } from "react";
-import type { ComponentPropsWithoutRef } from "react";
-import type { DropdownProps, Matcher, DateRange } from "react-day-picker";
-
-import {
-  registerComponent,
-  Prop,
-  Section,
-  PropsCategory,
-  type PropertiesPanelDefinition,
-  type EditorConfig,
-} from "@superblocksteam/library";
-
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectItem,
-  SelectTrigger,
-  SelectContent,
-  SelectValue,
-} from "@/components/ui/select";
-import { cn } from "@/lib/utils";
-
-// Component Props
-type ComponentProps = ComponentPropsWithoutRef<typeof Popover> & {
-  value?: { from?: string; to?: string };
-  onValueChange?: (value: { from: string; to: string }) => void;
-  minDate?: string;
-  maxDate?: string;
-  disabled?: boolean;
-  displayFormat?: string;
-  buttonVariant?:
-    | "default"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | "destructive";
-  captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
-  numberOfMonths?: number;
-  placeholder?: string;
-  className?: string;
-};
-
-const CustomCalendarDropdown = ({
-  options,
-  value,
-  onChange,
-}: DropdownProps) => {
-  const handleValueChange = (newValue: string) => {
-    if (onChange) {
-      const syntheticEvent = {
-        target: {
-          value: newValue,
-        },
-      } as React.ChangeEvent<HTMLSelectElement>;
-      onChange(syntheticEvent);
-    }
-  };
-  return (
-    <Select value={value?.toString()} onValueChange={handleValueChange}>
-      <SelectTrigger className={"rdp-dropdown"}>
-        <SelectValue />
-      </SelectTrigger>
-      <SelectContent className="max-h-[200px]">
-        {options?.map((option) => (
-          <SelectItem
-            key={option.value}
-            value={option.value.toString()}
-            disabled={option.disabled}
-          >
-            {option.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-};
-
-const DateRangePicker = (props: ComponentProps) => {
-  const {
-    value,
-    onValueChange,
-    minDate,
-    maxDate,
-    disabled,
-    displayFormat = "MM/dd/yyyy",
-    buttonVariant,
-    captionLayout,
-    numberOfMonths,
-    placeholder,
-    className,
-    ...rest
-  } = props;
-  const [open, setOpen] = useState(false);
-
-  const dateRange = useMemo(() => {
-    const range: {
-      from?: Date;
-      to?: Date;
-    } = {};
-    if (minDate) {
-      range.from = new Date(minDate);
-    }
-    if (maxDate) {
-      range.to = new Date(maxDate);
-    }
-    return Object.keys(range).length > 0 ? range : undefined;
-  }, [minDate, maxDate]);
-
-  const disabledMatcher = useMemo(() => {
-    const matchers: any[] = [];
-    if (dateRange?.from) {
-      matchers.push({
-        before: dateRange?.from,
-      });
-    }
-    if (dateRange?.to) {
-      matchers.push({
-        after: dateRange?.to,
-      });
-    }
-    return matchers.length > 0 ? matchers : undefined;
-  }, [dateRange]);
-
-  const selectedRange: DateRange | undefined = useMemo(() => {
-    return {
-      from: value?.from ? new Date(value.from) : undefined,
-      to: value?.to ? new Date(value.to) : undefined,
-    };
-  }, [value]);
-
-  const handleRangeSelect = (range: DateRange | undefined) => {
-    const newFromValue = range?.from?.toISOString() || "";
-    const newToValue = range?.to?.toISOString() || "";
-    void onValueChange?.({
-      from: newFromValue,
-      to: newToValue,
-    });
-  };
-
-  const getDisplayText = () => {
-    if (!selectedRange?.from && !selectedRange?.to) {
-      return placeholder;
-    }
-    if (selectedRange?.from && selectedRange?.to) {
-      return `${format(selectedRange.from, displayFormat)} - ${format(selectedRange.to, displayFormat)}`;
-    }
-    if (selectedRange?.from) {
-      return `${format(selectedRange.from, displayFormat)} - ...`;
-    }
-    return placeholder;
-  };
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, []);
-
-  return (
-    <div className={className} {...rest}>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger className="w-full" asChild>
-          <div>
-            <Button
-              variant="outline"
-              disabled={disabled}
-              className={cn(
-                "w-full justify-between font-normal",
-                !selectedRange?.from &&
-                  !selectedRange?.to &&
-                  "text-muted-foreground",
-              )}
-            >
-              <div className="flex items-center gap-2">
-                <CalendarIcon className="h-4 w-4" />
-                {getDisplayText()}
-              </div>
-              <ChevronDownIcon className="h-4 w-4" />
-            </Button>
-          </div>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
-          <Calendar
-            showOutsideDays={false}
-            buttonVariant={buttonVariant}
-            captionLayout={captionLayout}
-            disabled={disabled ? true : (disabledMatcher as Matcher[])}
-            mode="range"
-            selected={selectedRange}
-            onSelect={handleRangeSelect}
-            numberOfMonths={numberOfMonths}
-            components={{
-              Dropdown: CustomCalendarDropdown,
-            }}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
-
-// Properties Definition
-const propertiesDefinition: PropertiesPanelDefinition<ComponentProps> = {
-  general: Section.category(PropsCategory.Content).children({
-    value: Prop.any<{ from?: string; to?: string }>(),
-    defaultFromValue: Prop.string(),
-    defaultToValue: Prop.string(),
-    displayFormat: Prop.string(),
-    minDate: Prop.string(),
-    maxDate: Prop.string(),
-    placeholder: Prop.string(),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    buttonVariant: Prop.string<
-      "ghost" | "outline" | "default" | "secondary" | "destructive"
-    >(),
-    captionLayout: Prop.string<"dropdown" | "label">(),
-    numberOfMonths: Prop.number(),
-  }),
-  interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean(),
-  }),
-  events: Section.category(PropsCategory.EventHandlers).children({
-    onValueChange: Prop.eventHandler(),
-  }),
-};
-
-// Editor Template
-// Editor Config
-const editorConfig: EditorConfig = {
-  icon: "date-picker",
-};
-
-// Register Component
-registerComponent(DateRangePicker, propertiesDefinition).editorConfig(
-  editorConfig,
-);
-
-export { DateRangePicker };