@m5kdev/web-ui 0.1.4 → 0.2.0

package/src/modules/billing/components/BillingRouter.tsx

@@ -1,20 +0,0 @@
-import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
-import { Route } from "react-router";
-import { BillingInvoicePage } from "#modules/billing/components/BillingInvoicePage";
-import type { UseBackendTRPC } from "#types";
-
-interface BillingRouterProps {
-  useTRPC?: UseBackendTRPC;
-  serverUrl: string;
-  plans: StripePlan[];
-}
-
-export function BillingRouter({ useTRPC, serverUrl }: BillingRouterProps) {
-  if (!useTRPC) return null;
-
-  return (
-    <Route path="billing">
-      <Route index element={<BillingInvoicePage useTRPC={useTRPC} serverUrl={serverUrl} />} />
-    </Route>
-  );
-}

package/src/modules/billing/components/BillingSinglePlanSelect.tsx

@@ -1,172 +0,0 @@
-import { Button } from "@heroui/react";
-import type { StripePlan } from "@m5kdev/commons/modules/billing/billing.types";
-import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
-import { Check, LogOut } from "lucide-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "#components/ui/card";
-import { Tabs, TabsList, TabsTrigger } from "#components/ui/tabs";
-import { cn } from "#utils";
-
-export interface BillingSinglePlanSelectProps {
-  plan: StripePlan;
-  features?: string[];
-  /** URL for the Terms of Service link. Override for your app's legal page. */
-  termsOfServiceUrl?: string;
-}
-
-export function BillingSinglePlanSelect({
-  plan,
-  termsOfServiceUrl,
-  features = [
-    "Unlimited access to all features",
-    "Priority support",
-    "Early access to new features",
-    "Secure data storage",
-    "Cancel anytime",
-  ],
-}: BillingSinglePlanSelectProps) {
-  const { t } = useTranslation("web-ui");
-  const navigate = useNavigate();
-  const [billingInterval, setBillingInterval] = useState<"monthly" | "annually">("annually");
-
-  const handleLogout = async () => {
-    await authClient.signOut();
-    navigate("/login");
-  };
-
-  const isAnnual = billingInterval === "annually";
-  const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;
-
-  // Fallback if no annual price ID exists
-  const hasAnnualOption = !!plan.annualDiscountPriceId;
-
-  const priceUnitAmount = plan.priceUnitAmount ?? Number.NaN;
-  const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? Number.NaN;
-
-  const priceDisplay = {
-    monthly: {
-      amount: `$${priceUnitAmount / 100}`,
-      label: "/ month",
-    },
-    annually: {
-      amount: `$${annualPriceUnitAmount / 100 / 12}`,
-      originalAmount: `$${priceUnitAmount / 100}`,
-      label: "/ month, billed annually",
-      discountLabel: plan.annualPriceUnitAmount
-        ? `Save ${Math.floor(((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount) * 100).toFixed(0)}%`
-        : "",
-    },
-  };
-
-  return (
-    <div className="w-full max-w-3xl mx-auto px-4 py-8">
-      <div className="flex flex-col items-center gap-8">
-        <div className="text-center space-y-2">
-          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-            {t("billing.plans.title", "Simple, transparent pricing")}
-          </h2>
-          <p className="text-muted-foreground text-lg">
-            {t("billing.plans.subtitle", "Choose the plan that's right for you")}
-          </p>
-        </div>
-
-        {hasAnnualOption && (
-          <Tabs
-            defaultValue="annually"
-            value={billingInterval}
-            onValueChange={(v) => setBillingInterval(v as "monthly" | "annually")}
-            className="w-full max-w-xs"
-          >
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="monthly">Monthly</TabsTrigger>
-              <TabsTrigger value="annually" className="relative">
-                Annually
-                {priceDisplay.annually.discountLabel && (
-                  <span className="absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12">
-                    {priceDisplay.annually.discountLabel}
-                  </span>
-                )}
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
-        )}
-
-        <Card className={cn("w-full max-w-md border-2 border-primary")}>
-          <CardHeader>
-            <CardTitle className="flex justify-between items-start">
-              <span className="text-xl font-bold">{plan.name}</span>
-            </CardTitle>
-            <CardDescription>
-              {isAnnual ? "Perfect for long-term commitment" : "Flexible monthly billing"}
-            </CardDescription>
-          </CardHeader>
-
-          <CardContent className="space-y-6">
-            <div className="flex items-baseline gap-1">
-              <span className="text-4xl font-bold">
-                {isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount}
-              </span>
-              <span className="text-muted-foreground">
-                {isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label}
-              </span>
-            </div>
-
-            {isAnnual && priceDisplay.annually.originalAmount && (
-              <p className="text-sm text-green-500 line-through">
-                {" "}
-                {priceDisplay.annually.originalAmount} / month
-              </p>
-            )}
-
-            <div className="space-y-3">
-              {features.map((feature) => (
-                <div key={feature} className="flex items-center gap-2">
-                  <div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
-                    <Check className="h-3 w-3 text-primary" />
-                  </div>
-                  <span className="text-sm text-muted-foreground">{feature}</span>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-
-          <CardFooter>
-            <Button
-              className="w-full"
-              color="primary"
-              size="lg"
-              as="a"
-              href={`${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`}
-            >
-              {isAnnual ? "Subscribe Annually" : "Subscribe Monthly"}
-            </Button>
-          </CardFooter>
-        </Card>
-
-        <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary">
-          <a href={termsOfServiceUrl} rel="noopener noreferrer" target="_blank">
-            {t("common.termsOfService", "Terms of Service")}
-          </a>{" "}
-          {t("common.and", "and")}{" "}
-          <Link to="/privacy">{t("common.privacyPolicy", "Privacy Policy")}</Link>
-        </div>
-      </div>
-
-      <div className="fixed bottom-4 left-4">
-        <Button variant="light" onPress={handleLogout} className="gap-2">
-          <LogOut className="h-4 w-4" />
-          {t("sidebar.user.logout", "Log out")}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/modules/table/components/ColumnOrderAndVisibility.tsx

@@ -1,127 +0,0 @@
-import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { EyeIcon, EyeOffIcon, GripVertical } from "lucide-react";
-import { useCallback, useState } from "react";
-import type { ColumnOrderState, VisibilityState } from "@tanstack/react-table";
-import { Button } from "#components/ui/button";
-import type { ColumnItem } from "./table.types";
-
-interface ColumnOrderAndVisibilityItemProps {
-  column: ColumnItem;
-  onChangeVisibilityState: (columnId: string) => void;
-}
-
-const ColumnOrderAndVisibilityItem = ({
-  column,
-  onChangeVisibilityState,
-}: ColumnOrderAndVisibilityItemProps) => {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id: column.id,
-  });
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition }}
-      className="flex justify-between items-center gap-2"
-    >
-      {column.label}
-      <div className="flex items-center gap-2">
-        <div
-          {...attributes}
-          {...listeners}
-          className="cursor-grab active:cursor-grabbing touch-none"
-        >
-          <GripVertical className="h-4 w-4" />
-        </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => onChangeVisibilityState(String(column.id))}
-        >
-          {column.visibility ? <EyeIcon className="h-4 w-4" /> : <EyeOffIcon className="h-4 w-4" />}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-interface ColumnOrderAndVisibilityProps {
-  layout: ColumnItem[];
-  onChangeOrder: (order: ColumnOrderState) => void;
-  onChangeVisibility: (visibility: VisibilityState) => void;
-  onClose: () => void;
-}
-
-export const ColumnOrderAndVisibility = ({
-  layout,
-  onChangeOrder,
-  onChangeVisibility,
-  onClose,
-}: ColumnOrderAndVisibilityProps) => {
-  const [activeLayout, setActiveLayout] = useState<ColumnItem[]>([...layout]);
-
-  const onChangeVisibilityState = useCallback((columnId: string) => {
-    setActiveLayout((prev) => {
-      const index = prev.findIndex((c) => c.id === columnId);
-      if (index !== -1) {
-        const newLayout = [...prev];
-        newLayout[index] = { ...prev[index], visibility: !prev[index].visibility };
-        return newLayout;
-      }
-      return prev;
-    });
-  }, []);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const onSubmit = useCallback(() => {
-    onChangeOrder(activeLayout.map((column) => column.id));
-    onChangeVisibility(
-      Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility]))
-    );
-    onClose();
-  }, [activeLayout, onChangeOrder, onChangeVisibility, onClose]);
-
-  return (
-    <div className="flex flex-col gap-2 p-1 min-w-[200px]">
-      <DndContext
-        onDragEnd={({ active, over }) => {
-          if (over && active.id !== over?.id) {
-            const activeIndex = activeLayout.findIndex(({ id }) => id === active.id);
-            const overIndex = activeLayout.findIndex(({ id }) => id === over.id);
-
-            setActiveLayout(arrayMove(activeLayout, activeIndex, overIndex));
-          }
-        }}
-        sensors={sensors}
-      >
-        <SortableContext
-          items={activeLayout.map((column) => column.id)}
-          strategy={verticalListSortingStrategy}
-        >
-          {activeLayout.map((column) => (
-            <ColumnOrderAndVisibilityItem
-              key={column.id}
-              column={column}
-              onChangeVisibilityState={onChangeVisibilityState}
-            />
-          ))}
-        </SortableContext>
-      </DndContext>
-      <Button onClick={onSubmit}>Apply</Button>
-    </div>
-  );
-};
-