Move shadcn directories to client shared folder

opensaas-sh/app_diff/README.md.diff

@@ -1,6 +1,6 @@
 --- template/app/README.md
 +++ opensaas-sh/app/README.md
-@@ -1,6 +1,8 @@
+@@ -1,12 +1,27 @@
 -# <YOUR_APP_NAME>
 +# opensaas.sh (demo) app
 
@@ -9,10 +9,6 @@
 +
 +It is deployed to https://opensaas.sh and serves both as a landing page for Open Saas and as a demo app.
 
- ## UI Components
-
-@@ -8,9 +10,22 @@
-
  ## Development
 
 +### .env files

opensaas-sh/app_diff/src/client/components/NavBar/NavBar.tsx.diff

@@ -4,13 +4,13 @@
  import { Link as ReactRouterLink } from "react-router-dom";
  import { useAuth } from "wasp/client/auth";
  import { Link as WaspRouterLink, routes } from "wasp/client/router";
-+import { Button } from "../../../components/ui/button";
++import { Button } from "../../../client/components/ui/button";
  import {
    Sheet,
    SheetContent,
 @@ -17,6 +18,7 @@
- import { useIsLandingPage } from "../../hooks/useIsLandingPage";
  import logo from "../../static/logo.webp";
+ import { cn } from "../../utils";
  import DarkModeSwitcher from "../DarkModeSwitcher";
 +import RepoInfo from "../RepoInfo";
  import { Announcement } from "./Announcement";

opensaas-sh/app_diff/src/client/components/RepoInfo.tsx.diff

@@ -3,8 +3,8 @@
 @@ -0,0 +1,48 @@
 +import { useEffect, useState } from "react";
 +import { FaGithub } from "react-icons/fa";
-+import { Button } from "../../components/ui/button";
-+import { formatNumber } from "../../lib/utils";
++import { Button } from "../../client/components/ui/button";
++import { formatNumber } from "../utils";
 +
 +const RepoInfo = () => {
 +  const [repoInfo, setRepoInfo] = useState<null | any>(null);

opensaas-sh/app_diff/src/components/ui/button.tsx.diff → opensaas-sh/app_diff/src/client/components/ui/button.tsx.diff

@@ -1,12 +1,6 @@
---- template/app/src/components/ui/button.tsx
-+++ opensaas-sh/app/src/components/ui/button.tsx
-@@ -5,26 +5,31 @@
- import { cn } from "../../lib/utils";
-
- const buttonVariants = cva(
--  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-   {
+--- template/app/src/client/components/ui/button.tsx
++++ opensaas-sh/app/src/client/components/ui/button.tsx
+@@ -10,21 +10,26 @@
      variants: {
        variant: {
          default:

opensaas-sh/app_diff/src/components/ui/card.tsx.diff → opensaas-sh/app_diff/src/client/components/ui/card.tsx.diff

@@ -1,5 +1,5 @@
---- template/app/src/components/ui/card.tsx
-+++ opensaas-sh/app/src/components/ui/card.tsx
+--- template/app/src/client/components/ui/card.tsx
++++ opensaas-sh/app/src/client/components/ui/card.tsx
 @@ -12,7 +12,11 @@
          accent: "bg-card-accent text-card-accent-foreground hover:scale-[1.02]",
          faded: "text-card-faded-foreground scale-95 opacity-50",

opensaas-sh/app_diff/src/lib/utils.ts.diff → opensaas-sh/app_diff/src/client/utils.ts.diff

@@ -1,5 +1,5 @@
---- template/app/src/lib/utils.ts
-+++ opensaas-sh/app/src/lib/utils.ts
+--- template/app/src/client/utils.ts
++++ opensaas-sh/app/src/client/utils.ts
 @@ -4,3 +4,12 @@
  export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));

opensaas-sh/app_diff/src/landing-page/components/Examples/Auth.tsx.diff

@@ -3,9 +3,9 @@
 @@ -0,0 +1,163 @@
 +import { useState } from "react";
 +import { FaDiscord, FaGithub, FaGoogle, FaSlack } from "react-icons/fa";
-+import { Button } from "../../../components/ui/button";
-+import { Card, CardContent, CardHeader } from "../../../components/ui/card";
-+import { Input } from "../../../components/ui/input";
++import { Button } from "../../../client/components/ui/button";
++import { Card, CardContent, CardHeader } from "../../../client/components/ui/card";
++import { Input } from "../../../client/components/ui/input";
 +import { DocsUrl } from "../../../shared/common";
 +import HighlightedFeature from "../HighlightedFeature";
 +

opensaas-sh/app_diff/src/landing-page/components/Hero/Hero.tsx.diff

@@ -5,7 +5,7 @@
 +import { Link as ReactRouterLink } from "react-router-dom";
 +import { useAuth } from "wasp/client/auth";
 +import { Link as WaspRouterLink, routes } from "wasp/client/router";
-+import { Button } from "../../../components/ui/button";
++import { Button } from "../../../client/components/ui/button";
 +import { DocsUrl, WaspUrl } from "../../../shared/common";
 +import Orbit from "./Orbit";
 +

opensaas-sh/app_diff/src/landing-page/components/Hero/Orbit.tsx.diff

@@ -9,7 +9,7 @@
 +import stripeLogo from "../../../client/static/logos/stripe-light.webp";
 +import tailwindLogoDark from "../../../client/static/logos/tailwind-dark.webp";
 +import tailwindLogo from "../../../client/static/logos/tailwind-light.webp";
-+import { cn } from "../../../lib/utils";
++import { cn } from "../../../client/utils";
 +import AstroLogo from "../../logos/AstroLogo";
 +import OpenAILogo from "../../logos/OpenAILogo";
 +import PrismaLogo from "../../logos/PrismaLogo";

opensaas-sh/app_diff/src/payment/paymentProcessor.ts.diff

@@ -1,6 +1,6 @@
 --- template/app/src/payment/paymentProcessor.ts
 +++ opensaas-sh/app/src/payment/paymentProcessor.ts
-@@ -28,9 +28,4 @@
+@@ -29,9 +29,4 @@
    webhookMiddlewareConfigFn: MiddlewareConfigFn;
  }
 

opensaas-sh/app_diff/src/payment/stripe/user.ts.diff

@@ -1,6 +1,6 @@
 --- template/app/src/payment/stripe/user.ts
 +++ opensaas-sh/app/src/payment/stripe/user.ts
-@@ -3,7 +3,7 @@
+@@ -4,7 +4,7 @@
  import type { SubscriptionStatus } from "../plans";
  import { PaymentPlanId } from "../plans";
 
@@ -9,7 +9,7 @@
    userId: User["id"],
    prismaUserDelegate: PrismaClient["user"],
  ): Promise<string | null> {
-@@ -12,20 +12,20 @@
+@@ -13,20 +13,20 @@
        id: userId,
      },
      select: {
@@ -36,7 +36,7 @@
    prismaUserDelegate: PrismaClient["user"],
  ): Promise<User> {
    return prismaUserDelegate.update({
-@@ -33,7 +33,7 @@
+@@ -34,7 +34,7 @@
        id: userId,
      },
      data: {
@@ -45,7 +45,7 @@
      },
    });
  }
-@@ -54,7 +54,7 @@
+@@ -55,7 +55,7 @@
  ): Promise<User> {
    return userDelegate.update({
      where: {
@@ -54,7 +54,7 @@
      },
      data: {
        datePaid,
-@@ -81,7 +81,7 @@
+@@ -82,7 +82,7 @@
  ): Promise<User> {
    return userDelegate.update({
      where: {

template/app/.cursor/rules/ui-components.mdc

@@ -2,40 +2,45 @@
 description: Describes where the ui components built on top with Shadcn UI exist, how they are customized, and Wasp specific rules concerning how new ShadCN UI components should be installed
 alwaysApply: false
 ---
-Only ShadCN UI version 2.3.0 should be used with Wasp at the moment. Due to dependency conflicts Wasp cannot be used with Tailwindcss v4, which the newer version of Shadcn depends on. 
+Due to dependency conflicts Wasp cannot be used with Tailwindcss v4.
 
-Shadcn has already been setup with this project template, so there is no need to install it. All the ShadCN specific components exist in [src/components/ui](../../src/components/ui/)
+ShadCN has already been setup with this project template, so there is no need to install it. All the ShadCN specific components exist in [src/client/components/ui](../../src/client/components/ui/)
 
 ## Adding a new ShadCN component
-### 1. Add a new component
+
+We will use button as an example.
+Same rules apply to any ShadCN component.
+
+### 1. Add a new component 
 
 ```bash
-npx shadcn@2.3.0 add button
+npx shadcn@latest add button
 ```
 
-### 2. Adjust the `utils` import in `button.tsx` (for each component you add)
+This will generate a button component in `src/client/components/ui/button.tsx`.
+
+### 2. Adjust the `utils` import in `button.tsx` 
 
-There will be a brand new `button.tsx` file in `src/components/ui`. We need to fix some import issues:
 ```diff
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
--import { cn } from "s/lib/utils"
-+import { cn } from "../../lib/utils"
+-import { cn } from "src/lib/utils"
++import { cn } from "../../utils"
 ```
 
-### 3. Use the `Button` component
-Now you are ready to use the `Button` component. That's it!
-```jsx
-import './Main.css'
+### 3. Use the `Button` React component
 
+Now you are ready to use the `Button` component. That's it!
+```tsx
 import { Button } from './components/ui/button'
 
-export const MainPage = () => {
+function SomePage() {
   return (
-    <div className="container">
+    <div>
       <Button>This works</Button>
     </div>
   )
 }
+```

template/app/README.md

@@ -2,10 +2,6 @@
 
 Built with [Wasp](https://wasp.sh), based on the [Open Saas](https://opensaas.sh) template.
 
-## UI Components
-
-This template includes [ShadCN UI](https://ui.shadcn.com/) v2 for beautiful, accessible React components. See [SHADCN_SETUP.md](./SHADCN_SETUP.md) for details on how to use ShadCN components in your app.
-
 ## Development
 
 ### Running locally

template/app/components.json

@@ -11,11 +11,11 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "src/components",
-    "utils": "src/lib/utils",
-    "ui": "src/components/ui",
-    "lib": "src/lib",
-    "hooks": "src/hooks"
+    "lib": "src/client",
+    "components": "src/client/components",
+    "ui": "src/client/components/ui",
+    "utils": "src/client/utils",
+    "hooks": "src/client/hooks"
   },
   "iconLibrary": "lucide"
 }

template/app/src/admin/dashboards/analytics/AnalyticsDashboardPage.tsx

@@ -1,6 +1,6 @@
 import { type AuthUser } from "wasp/auth";
 import { getDailyStats, useQuery } from "wasp/client/operations";
-import { cn } from "../../../lib/utils";
+import { cn } from "../../../client/utils";
 import DefaultLayout from "../../layout/DefaultLayout";
 import RevenueAndProfitChart from "./RevenueAndProfitChart";
 import SourcesTable from "./SourcesTable";

template/app/src/admin/dashboards/analytics/TotalPageViewsCard.tsx

@@ -1,6 +1,10 @@
 import { ArrowDown, ArrowUp, Eye } from "lucide-react";
-import { Card, CardContent, CardHeader } from "../../../components/ui/card";
-import { cn } from "../../../lib/utils";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "../../../client/components/ui/card";
+import { cn } from "../../../client/utils";
 
 type PageViewsStats = {
   totalPageViews: number | undefined;

template/app/src/admin/dashboards/analytics/TotalPayingUsersCard.tsx

@@ -1,8 +1,12 @@
 import { ArrowDown, ArrowUp, ShoppingBag } from "lucide-react";
 import { useMemo } from "react";
 import { type DailyStatsProps } from "../../../analytics/stats";
-import { Card, CardContent, CardHeader } from "../../../components/ui/card";
-import { cn } from "../../../lib/utils";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "../../../client/components/ui/card";
+import { cn } from "../../../client/utils";
 
 const TotalPayingUsersCard = ({ dailyStats, isLoading }: DailyStatsProps) => {
   const isDeltaPositive = useMemo(() => {

template/app/src/admin/dashboards/analytics/TotalRevenueCard.tsx

@@ -1,8 +1,12 @@
 import { ArrowDown, ArrowUp, ShoppingCart } from "lucide-react";
 import { useMemo } from "react";
 import { type DailyStatsProps } from "../../../analytics/stats";
-import { Card, CardContent, CardHeader } from "../../../components/ui/card";
-import { cn } from "../../../lib/utils";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "../../../client/components/ui/card";
+import { cn } from "../../../client/utils";
 
 const TotalRevenueCard = ({
   dailyStats,

template/app/src/admin/dashboards/analytics/TotalSignupsCard.tsx

@@ -1,8 +1,12 @@
 import { ArrowUp, UsersRound } from "lucide-react";
 import { useMemo } from "react";
 import { type DailyStatsProps } from "../../../analytics/stats";
-import { Card, CardContent, CardHeader } from "../../../components/ui/card";
-import { cn } from "../../../lib/utils";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "../../../client/components/ui/card";
+import { cn } from "../../../client/utils";
 
 const TotalSignupsCard = ({ dailyStats, isLoading }: DailyStatsProps) => {
   const isDeltaPositive = useMemo(() => {

template/app/src/admin/dashboards/users/DropdownEditDelete.tsx

@@ -4,7 +4,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "../../../components/ui/dropdown-menu";
+} from "../../../client/components/ui/dropdown-menu";
 
 const DropdownEditDelete = () => {
   return (

template/app/src/admin/dashboards/users/UsersTable.tsx

@@ -7,19 +7,19 @@ import {
   useQuery,
 } from "wasp/client/operations";
 import { type User } from "wasp/entities";
-import useDebounce from "../../../client/hooks/useDebounce";
-import { Button } from "../../../components/ui/button";
-import { Checkbox } from "../../../components/ui/checkbox";
-import { Input } from "../../../components/ui/input";
-import { Label } from "../../../components/ui/label";
+import { Button } from "../../../client/components/ui/button";
+import { Checkbox } from "../../../client/components/ui/checkbox";
+import { Input } from "../../../client/components/ui/input";
+import { Label } from "../../../client/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../../components/ui/select";
-import { Switch } from "../../../components/ui/switch";
+} from "../../../client/components/ui/select";
+import { Switch } from "../../../client/components/ui/switch";
+import useDebounce from "../../../client/hooks/useDebounce";
 import { SubscriptionStatus } from "../../../payment/plans";
 import LoadingSpinner from "../../layout/LoadingSpinner";
 import DropdownEditDelete from "./DropdownEditDelete";

template/app/src/admin/elements/settings/SettingsPage.tsx

@@ -1,16 +1,16 @@
 import { FileText, Mail, Upload, User } from "lucide-react";
 import { FormEvent } from "react";
 import { type AuthUser } from "wasp/auth";
-import { Button } from "../../../components/ui/button";
+import { Button } from "../../../client/components/ui/button";
 import {
   Card,
   CardContent,
   CardHeader,
   CardTitle,
-} from "../../../components/ui/card";
-import { Input } from "../../../components/ui/input";
-import { Label } from "../../../components/ui/label";
-import { Textarea } from "../../../components/ui/textarea";
+} from "../../../client/components/ui/card";
+import { Input } from "../../../client/components/ui/input";
+import { Label } from "../../../client/components/ui/label";
+import { Textarea } from "../../../client/components/ui/textarea";
 import Breadcrumb from "../../layout/Breadcrumb";
 import DefaultLayout from "../../layout/DefaultLayout";
 

template/app/src/admin/elements/ui-elements/ButtonsPage.tsx

@@ -1,6 +1,6 @@
 import { Heart, Plus, Trash2 } from "lucide-react";
 import { type AuthUser } from "wasp/auth";
-import { Button } from "../../../components/ui/button";
+import { Button } from "../../../client/components/ui/button";
 import Breadcrumb from "../../layout/Breadcrumb";
 import DefaultLayout from "../../layout/DefaultLayout";
 

template/app/src/admin/layout/Header.tsx

@@ -1,6 +1,6 @@
 import { type AuthUser } from "wasp/auth";
 import DarkModeSwitcher from "../../client/components/DarkModeSwitcher";
-import { cn } from "../../lib/utils";
+import { cn } from "../../client/utils";
 import { UserDropdown } from "../../user/UserDropdown";
 import MessageButton from "../dashboards/messages/MessageButton";
 

template/app/src/admin/layout/Sidebar.tsx

@@ -11,7 +11,7 @@ import {
 import React, { useEffect, useRef, useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import Logo from "../../client/static/logo.webp";
-import { cn } from "../../lib/utils";
+import { cn } from "../../client/utils";
 import SidebarLinkGroup from "./SidebarLinkGroup";
 
 interface SidebarProps {