@m5kdev/web-ui 0.1.0

package/package.json

@@ -0,0 +1,169 @@
+{
+  "name": "@m5kdev/web-ui",
+  "version": "0.1.0",
+  "license": "GPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/michalkow/m5kdev.git"
+  },
+  "homepage": "https://github.com/michalkow/m5kdev#readme",
+  "bugs": "https://github.com/michalkow/m5kdev/issues",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@heroui/react": "2.8.8",
+    "@heroui/theme": "2.4.23",
+    "@radix-ui/react-alert-dialog": "1.1.6",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-dialog": "1.1.5",
+    "@radix-ui/react-dropdown-menu": "2.1.5",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-select": "2.1.5",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.3",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.3",
+    "@radix-ui/react-toast": "1.2.5",
+    "@radix-ui/react-tooltip": "1.1.7",
+    "@tabler/icons-react": "3.31.0",
+    "@tanstack/react-table": "8.21.2",
+    "@uiw/color-convert": "2.7.3",
+    "@uiw/react-color-colorful": "2.7.3",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cobe": "0.6.3",
+    "dayjs": "1.11.19",
+    "chart.js": "4.4.0",
+    "luxon": "3.7.1",
+    "dicons": "1.1.7",
+    "@internationalized/date": "3.8.2",
+    "framer-motion": "12.23.12",
+    "lucide-react": "0.488.0",
+    "motion": "12.11.3",
+    "next-themes": "0.4.4",
+    "ogl": "1.0.11",
+    "nuqs": "2.4.3",
+    "posthog-js": "1.258.2",
+    "react": "19.2.1",
+    "react-big-calendar": "1.19.4",
+    "react-chartjs-2": "5.3.1",
+    "react-dom": "19.2.1",
+    "react-dropzone": "14.3.8",
+    "react-easy-crop": "5.5.0",
+    "react-hook-form": "7.61.1",
+    "react-i18next": "15.6.1",
+    "react-router": "7.10.1",
+    "sonner": "1.7.4",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "1.0.7",
+    "zod": "4.2.1",
+    "@tanstack/react-query": "5.83.0",
+    "@trpc/tanstack-react-query": "11.4.3"
+  },
+  "devDependencies": {
+    "@trpc/server": "11.4.3",
+    "@types/luxon": "3.7.1",
+    "@types/react": "19.2.7",
+    "@types/react-big-calendar": "1.16.3",
+    "@types/react-dom": "19.2.3",
+    "globals": "16.3.0",
+    "vite": "7.0.4",
+    "@m5kdev/backend": "0.1.0",
+    "@m5kdev/commons": "0.1.0",
+    "@m5kdev/frontend": "0.1.0",
+    "@m5kdev/config": "0.0.0"
+  },
+  "imports": {
+    "#components/*": "./src/components/*.tsx",
+    "#components/ui/*": "./src/components/ui/*.tsx",
+    "#components/shared/*": "./src/components/ui/shared/*.tsx",
+    "#animations/*": "./src/animations/*.ts",
+    "#modules/auth/components/*": "./src/modules/auth/components/*.tsx",
+    "#modules/auth/types": "./src/modules/auth/types.ts",
+    "#modules/billing/components/*": "./src/modules/billing/components/*.tsx",
+    "#modules/app/components/*": "./src/modules/app/components/*.tsx",
+    "#icons/*": "./src/icons/*.tsx",
+    "#modules/charts/components/*": "./src/modules/charts/components/*.tsx",
+    "#modules/table/components/*": "./src/modules/table/components/*.tsx",
+    "#hooks/*": "./src/hooks/*.ts",
+    "#utils": "./src/lib/utils.ts",
+    "#lib/*": "./src/lib/*.ts",
+    "#types": "./src/types.ts"
+  },
+  "exports": {
+    "./components/*": {
+      "types": "./dist/src/components/*.d.ts",
+      "default": "./dist/src/components/*.js"
+    },
+    "./components/ui/*": {
+      "types": "./dist/src/components/ui/*.d.ts",
+      "default": "./dist/src/components/ui/*.js"
+    },
+    "./components/shared/*": {
+      "types": "./dist/src/components/ui/shared/*.d.ts",
+      "default": "./dist/src/components/ui/shared/*.js"
+    },
+    "./animations/*": {
+      "types": "./dist/src/animations/*.d.ts",
+      "default": "./dist/src/animations/*.js"
+    },
+    "./modules/auth/components/*": {
+      "types": "./dist/src/modules/auth/components/*.d.ts",
+      "default": "./dist/src/modules/auth/components/*.js"
+    },
+    "./modules/auth/types": {
+      "types": "./dist/src/modules/auth/types.d.ts",
+      "default": "./dist/src/modules/auth/types.js"
+    },
+    "./modules/billing/components/*": {
+      "types": "./dist/src/modules/billing/components/*.d.ts",
+      "default": "./dist/src/modules/billing/components/*.js"
+    },
+    "./modules/app/components/*": {
+      "types": "./dist/src/modules/app/components/*.d.ts",
+      "default": "./dist/src/modules/app/components/*.js"
+    },
+    "./modules/charts/components/*": {
+      "types": "./dist/src/modules/charts/components/*.d.ts",
+      "default": "./dist/src/modules/charts/components/*.js"
+    },
+    "./modules/table/components/*": {
+      "types": "./dist/src/modules/table/components/*.d.ts",
+      "default": "./dist/src/modules/table/components/*.js"
+    },
+    "./modules/table/filterTransformers": {
+      "types": "./dist/src/modules/table/filterTransformers.d.ts",
+      "default": "./dist/src/modules/table/filterTransformers.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/src/hooks/*.d.ts",
+      "default": "./dist/src/hooks/*.js"
+    },
+    "./icons/*": {
+      "types": "./dist/src/icons/*.d.ts",
+      "default": "./dist/src/icons/*.js"
+    },
+    "./utils": {
+      "types": "./dist/src/lib/utils.d.ts",
+      "default": "./dist/src/lib/utils.js"
+    },
+    "./lib/*": {
+      "types": "./dist/src/lib/*.d.ts",
+      "default": "./dist/src/lib/*.js"
+    }
+  },
+  "scripts": {
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write",
+    "check-types": "tsc --noEmit",
+    "build": "tsc --build"
+  }
+}

package/src/animations/card.motion.ts

@@ -0,0 +1,9 @@
+import type { MotionNodeOptions } from "framer-motion";
+
+export const cardMotion: Partial<MotionNodeOptions> = {
+  layout: true,
+  initial: { opacity: 0, scale: 0.98 },
+  animate: { opacity: 1, scale: 1 },
+  exit: { opacity: 0, scale: 0.98, transition: { duration: 0.12 } },
+  transition: { type: "spring", stiffness: 160, damping: 28 },
+};

package/src/components/AvatarUpload.tsx

@@ -0,0 +1,133 @@
+import { useFileUpload } from "@m5kdev/frontend/modules/file/hooks/useUpload";
+import { Edit2, User } from "lucide-react";
+import { type ChangeEvent, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CropDialog } from "#components/CropDialog";
+import { Avatar, AvatarFallback, AvatarImage } from "#components/ui/avatar";
+import { Progress } from "#components/ui/progress";
+import { cn } from "#utils";
+
+interface AvatarUploadProps {
+  currentAvatarUrl?: string | null;
+  onUploadComplete?: (avatarUrl: string) => void;
+  className?: string;
+}
+
+export function AvatarUpload({ currentAvatarUrl, onUploadComplete, className }: AvatarUploadProps) {
+  const { t } = useTranslation();
+  const [isHovered, setIsHovered] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(currentAvatarUrl || null);
+  const [showCropDialog, setShowCropDialog] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { upload, status, progress, errorMessage, reset } = useFileUpload();
+
+  const handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!["image/jpeg", "image/png", "image/webp", "image/jpg"].includes(file.type)) {
+        alert(t("web-ui:upload.errors.invalidType"));
+        return;
+      }
+      // Validate file size (5MB)
+      if (file.size > 5 * 1024 * 1024) {
+        alert(t("web-ui:upload.errors.tooLarge"));
+        return;
+      }
+      setSelectedFile(file);
+      const objectUrl = URL.createObjectURL(file);
+      setPreviewUrl(objectUrl);
+      setShowCropDialog(true);
+    }
+  };
+
+  const handleCropComplete = async (croppedBlob: Blob) => {
+    const croppedFile = new File([croppedBlob], selectedFile?.name || "cropped-image.jpg", {
+      type: "image/jpeg",
+    });
+
+    setSelectedFile(croppedFile);
+    const croppedObjectUrl = URL.createObjectURL(croppedFile);
+    setPreviewUrl(croppedObjectUrl);
+    setShowCropDialog(false);
+
+    try {
+      const res = await upload<{
+        url: string;
+        minetype: string;
+        size: number;
+      }>("image", croppedFile);
+      console.log({ res });
+      onUploadComplete?.(res.url);
+    } catch (error) {
+      console.error("Error uploading image:", error);
+    }
+  };
+
+  const removeFile = () => {
+    if (previewUrl && previewUrl !== currentAvatarUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setSelectedFile(null);
+    setPreviewUrl(currentAvatarUrl || null);
+    setShowCropDialog(false);
+    reset();
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <>
+      <div
+        role="dialog"
+        className={cn("relative inline-block", className)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Avatar className="h-24 w-24 cursor-pointer" onClick={() => fileInputRef.current?.click()}>
+          {previewUrl ? (
+            <AvatarImage src={previewUrl} alt={t("web-ui:avatar.preview.alt")} />
+          ) : (
+            <AvatarFallback>
+              <User className="h-12 w-12" />
+            </AvatarFallback>
+          )}
+          {isHovered && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/50 rounded-full">
+              <Edit2 className="h-6 w-6 text-white" />
+            </div>
+          )}
+        </Avatar>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="hidden"
+          accept="image/jpeg,image/png,image/webp"
+          onChange={handleFileSelect}
+        />
+
+        {status === "uploading" && (
+          <div className="mt-2 w-full">
+            <Progress value={progress} className="h-2" />
+          </div>
+        )}
+        {status === "error" && <p className="mt-2 text-sm text-red-500">{errorMessage}</p>}
+      </div>
+
+      {previewUrl && (
+        <CropDialog
+          open={showCropDialog}
+          onOpenChange={setShowCropDialog}
+          imageUrl={previewUrl}
+          onCropComplete={handleCropComplete}
+          onCancel={removeFile}
+          isLoading={status === "uploading"}
+        />
+      )}
+    </>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,14 @@
+import { Button as ButtonPrimitive, type ButtonProps as ButtonPrimitiveProps } from "./ui/button";
+
+export interface ButtonProps extends ButtonPrimitiveProps {
+  loading?: boolean;
+}
+
+export function Button({ loading, children, ...props }: ButtonProps) {
+  return (
+    <ButtonPrimitive {...props} disabled={loading || props.disabled}>
+      {loading && <i className="ti ti-refresh animate-spin" />}
+      {children}
+    </ButtonPrimitive>
+  );
+}