Refactor file upload and toast notifications

opensaas-sh/app_diff/src/file-upload/operations.ts.diff

@@ -15,9 +15,9 @@
 +import { checkIfUserHasReachedFileUploadLimit } from './fileUploading';
 +import * as z from 'zod';
 
- import { getUploadFileSignedURLFromS3, getDownloadFileSignedURLFromS3, deleteFileFromS3 } from './s3Utils';
- import { ensureArgsSchemaOrThrowHttpError } from '../server/validation';
-@@ -32,6 +33,14 @@
+ import {
+   getUploadFileSignedURLFromS3,
+@@ -37,6 +38,14 @@
      throw new HttpError(401);
    }
 

opensaas-sh/app_diff/src/landing-page/contentSections.tsx.diff

@@ -1,53 +1,73 @@
 --- template/app/src/landing-page/contentSections.tsx
 +++ opensaas-sh/app/src/landing-page/contentSections.tsx
-@@ -0,0 +1,239 @@
+@@ -1,4 +1,9 @@
+-import daBoiAvatar from '../client/static/da-boi.webp';
 +import { routes } from 'wasp/client/router';
 +import type { NavigationItem } from '../client/components/NavBar/NavBar';
 +import blog from '../client/static/assets/blog.webp';
 +import email from '../client/static/assets/email.webp';
 +import fileupload from '../client/static/assets/fileupload.webp';
 +import ai from '../client/static/assets/openapi.webp';
-+import kivo from '../client/static/examples/kivo.webp';
-+import messync from '../client/static/examples/messync.webp';
-+import microinfluencerClub from '../client/static/examples/microinfluencers.webp';
-+import promptpanda from '../client/static/examples/promptpanda.webp';
-+import reviewradar from '../client/static/examples/reviewradar.webp';
-+import scribeist from '../client/static/examples/scribeist.webp';
-+import searchcraft from '../client/static/examples/searchcraft.webp';
+ import kivo from '../client/static/examples/kivo.webp';
+ import messync from '../client/static/examples/messync.webp';
+ import microinfluencerClub from '../client/static/examples/microinfluencers.webp';
+@@ -6,161 +11,226 @@
+ import reviewradar from '../client/static/examples/reviewradar.webp';
+ import scribeist from '../client/static/examples/scribeist.webp';
+ import searchcraft from '../client/static/examples/searchcraft.webp';
+-import { BlogUrl, DocsUrl } from '../shared/common';
+-import type { GridFeature } from './components/FeaturesGrid';
 +import logo from '../client/static/logo.webp';
 +import { BlogUrl, DocsUrl, GithubUrl, WaspUrl } from '../shared/common';
 +import { GridFeature } from './components/FeaturesGrid';
-+
+ 
 +export const landingPageNavigationItems: NavigationItem[] = [
 +  { name: 'Features', to: '#features' },
 +  { name: 'Documentation', to: DocsUrl },
 +  { name: 'Blog', to: BlogUrl },
 +];
-+export const features: GridFeature[] = [
-+  {
+ export const features: GridFeature[] = [
+   {
+-    name: 'Cool Feature 1',
+-    description: 'Your feature',
+-    emoji: '🤝',
 +    description: 'Have a sweet AI-powered app concept? Get your idea shipped to potential customers in days!',
 +    icon: <img src={ai} alt='AI illustration' />,
-+    href: DocsUrl,
+     href: DocsUrl,
+-    size: 'small',
 +    size: 'medium',
 +    fullWidthIcon: true,
 +    align: 'left',
-+  },
-+  {
+   },
+   {
+-    name: 'Cool Feature 2',
+-    description: 'Feature description',
+-    emoji: '🔐',
 +    name: 'Full-stack Type Safety',
 +    description:
 +      'Full support for TypeScript with auto-generated types that span the whole stack. Nothing to configure!',
 +    emoji: '🥞',
-+    href: DocsUrl,
+     href: DocsUrl,
+-    size: 'small',
 +    size: 'medium',
-+  },
-+  {
+   },
+   {
+-    name: 'Cool Feature 3',
+-    description: 'Describe your cool feature here',
+-    emoji: '🥞',
+-    href: DocsUrl,
 +    description: 'File upload examples with AWS S3 presigned URLs are included and fully documented!',
 +    icon: <img src={fileupload} alt='File upload illustration' className='w-full h-auto' />,
 +    href: DocsUrl + '/guides/file-uploading/',
-+    size: 'medium',
+     size: 'medium',
 +    fullWidthIcon: true,
-+  },
-+  {
+   },
+   {
+-    name: 'Cool Feature 4',
+-    description: 'Describe your cool feature here',
+-    emoji: '💸',
+-    href: DocsUrl,
+-    size: 'large',
 +    name: 'Email Sending',
 +    description:
 +      'Email sending built-in. Combine it with the cron jobs feature to easily send emails to your customers.',
@@ -56,25 +76,38 @@
 +    size: 'medium',
 +    fullWidthIcon: true,
 +    direction: 'col-reverse',
-+  },
-+  {
+   },
+   {
+-    name: 'Cool Feature 5',
+-    description: 'Describe your cool feature here',
+-    emoji: '💼',
+-    href: DocsUrl,
+-    size: 'large',
 +    name: 'Open SaaS',
 +    description: 'Try the demo app',
 +    icon: <img src={logo} alt='Wasp Logo' />,
 +    href: routes.LoginRoute.to,
 +    size: 'medium',
 +    highlight: true,
-+  },
-+  {
+   },
+   {
+-    name: 'Cool Feature 6',
+-    description: 'It is cool',
+-    emoji: '📈',
+-    href: DocsUrl,
+-    size: 'small',
 +    name: 'Blog w/ Astro',
 +    description:
 +      'Built-in blog with the Astro framework. Write your posts in Markdown, and watch your SEO performance take off.',
 +    icon: <img src={blog} alt='Blog illustration' />,
 +    href: DocsUrl + '/start/guided-tour/',
 +    size: 'medium',
 +    fullWidthIcon: true,
-+  },
-+  {
+   },
+   {
+-    name: 'Cool Feature 7',
+-    description: 'Cool feature',
+-    emoji: '📧',
 +    name: 'Deploy Anywhere. Easily.',
 +    description:
 +      'No vendor lock-in because you own all your code. Deploy yourself, or let Wasp deploy it for you with a single command.',
@@ -85,26 +118,54 @@
 +  {
 +    name: 'Complete Documentation & Support',
 +    description: 'And a Discord community to help!',
-+    href: DocsUrl,
-+    size: 'small',
-+  },
-+  {
+     href: DocsUrl,
+     size: 'small',
+   },
+   {
+-    name: 'Cool Feature 8',
+-    description: 'Describe your cool feature here',
+-    emoji: '🤖',
+-    href: DocsUrl,
+-    size: 'medium',
 +    name: 'E2E Tests w/ Playwright',
 +    description: 'Tests and a CI pipeline w/ GitHub Actions',
 +    href: DocsUrl + '/guides/tests/',
 +    size: 'small',
-+  },
-+  {
+   },
+   {
+-    name: 'Cool Feature 9',
+-    description: 'Describe your cool feature here',
+-    emoji: '🚀',
 +    name: 'Open-Source Philosophy',
 +    description:
 +      'The repo and framework are 100% open-source, and so are the services wherever possible. Still missing something? Contribute!',
 +    emoji: '🤝',
-+    href: DocsUrl,
-+    size: 'medium',
-+  },
-+];
-+export const testimonials = [
-+  {
+     href: DocsUrl,
+     size: 'medium',
+   },
+ ];
+-
+ export const testimonials = [
+   {
+-    name: 'Da Boi',
+-    role: 'Wasp Mascot',
+-    avatarSrc: daBoiAvatar,
+-    socialUrl: 'https://twitter.com/wasplang',
+-    quote: "I don't even know how to code. I'm just a plushie.",
+-  },
+-  {
+-    name: 'Mr. Foobar',
+-    role: 'Founder @ Cool Startup',
+-    avatarSrc: daBoiAvatar,
+-    socialUrl: '',
+-    quote: 'This product makes me cooler than I already am.',
+-  },
+-  {
+-    name: 'Jamie',
+-    role: 'Happy Customer',
+-    avatarSrc: daBoiAvatar,
+-    socialUrl: '#',
+-    quote: 'My cats love it!',
 +    name: 'Max Khamrovskyi',
 +    role: 'Senior Eng @ Red Hat',
 +    avatarSrc: 'https://pbs.twimg.com/profile_images/1719397191205179392/V_QrGPSO_400x400.jpg',
@@ -165,11 +226,15 @@
 +    socialUrl: 'https://dev.to/wasp/our-web-framework-reached-9000-stars-on-github-9000-jij#comment-2dech',
 +    quote:
 +      "This is exactly the framework I've been dreaming of ever since I've been waiting to fully venture into the JS Backend Dev world. I believe Wasp will go above 50k stars this year. The documentation alone gives me the confidence that this is my permanent Nodejs framework and I'm staying with Wasp. Phenomenal work by the team...  Please keep up your amazing spirits. Thank you",
-+  },
-+];
-+export const faqs = [
-+  {
-+    id: 1,
+   },
+ ];
+-
+ export const faqs = [
+   {
+     id: 1,
+-    question: 'Whats the meaning of life?',
+-    answer: '42.',
+-    href: 'https://en.wikipedia.org/wiki/42_(number)',
 +    question: 'Why is this SaaS Template free and open-source?',
 +    answer:
 +      'We believe the best product is made when the community puts their heads together. We also believe a quality starting point for a web app should be free and available to everyone. Our hope is that together we can create the best SaaS template out there and bring our ideas to customers quickly.',
@@ -180,60 +245,93 @@
 +    href: 'https://wasp-lang.dev',
 +    answer:
 +      "It's the fastest way to develop full-stack React + NodeJS + Prisma apps and it's what gives this template superpowers. Wasp relies on React, NodeJS, and Prisma to define web components and server queries and actions. Wasp's secret sauce is its compiler which takes the client, server code, and config file and outputs the client app, server app and deployment code, supercharging the development experience. Combined with this template, you can build a SaaS app in record time.",
-+  },
-+];
-+export const footerNavigation = {
-+  app: [
+   },
+ ];
+-
+ export const footerNavigation = {
+   app: [
 +    { name: 'Github', href: GithubUrl },
-+    { name: 'Documentation', href: DocsUrl },
-+    { name: 'Blog', href: BlogUrl },
-+  ],
-+  company: [
+     { name: 'Documentation', href: DocsUrl },
+     { name: 'Blog', href: BlogUrl },
+   ],
+   company: [
+-    { name: 'About', href: 'https://wasp.sh' },
+-    { name: 'Privacy', href: '#' },
+-    { name: 'Terms of Service', href: '#' },
 +    { name: 'Terms of Service', href: GithubUrl + '/blob/main/LICENSE' },
 +    { name: 'Made by the Wasp team = }', href: WaspUrl },
-+  ],
-+};
-+export const examples = [
-+  {
+   ],
+ };
+-
+ export const examples = [
+   {
+-    name: 'Example #1',
+-    description: 'Describe your example here.',
+-    imageSrc: kivo,
+-    href: '#',
 +    name: 'Microinfluencers',
 +    description: 'microinfluencer.club',
 +    imageSrc: microinfluencerClub,
 +    href: 'https://microinfluencer.club',
-+  },
-+  {
+   },
+   {
+-    name: 'Example #2',
+-    description: 'Describe your example here.',
+-    imageSrc: messync,
+-    href: '#',
 +    name: 'Kivo',
 +    description: 'kivo.dev',
 +    imageSrc: kivo,
 +    href: 'https://kivo.dev',
-+  },
-+  {
+   },
+   {
+-    name: 'Example #3',
+-    description: 'Describe your example here.',
+-    imageSrc: microinfluencerClub,
+-    href: '#',
 +    name: 'Searchcraft',
 +    description: 'searchcraft.io',
 +    imageSrc: searchcraft,
 +    href: 'https://www.searchcraft.io',
-+  },
-+  {
+   },
+   {
+-    name: 'Example #4',
+-    description: 'Describe your example here.',
+-    imageSrc: promptpanda,
+-    href: '#',
 +    name: 'Scribeist',
 +    description: 'scribeist.com',
 +    imageSrc: scribeist,
 +    href: 'https://scribeist.com',
-+  },
-+  {
+   },
+   {
+-    name: 'Example #5',
+-    description: 'Describe your example here.',
+-    imageSrc: reviewradar,
+-    href: '#',
 +    name: 'Messync',
 +    description: 'messync.com',
 +    imageSrc: messync,
 +    href: 'https://messync.com',
-+  },
-+  {
+   },
+   {
+-    name: 'Example #6',
+-    description: 'Describe your example here.',
+-    imageSrc: scribeist,
+-    href: '#',
 +    name: 'Prompt Panda',
 +    description: 'promptpanda.io',
 +    imageSrc: promptpanda,
 +    href: 'https://promptpanda.io',
-+  },
-+  {
+   },
+   {
+-    name: 'Example #7',
+-    description: 'Describe your example here.',
+-    imageSrc: searchcraft,
+-    href: '#',
 +    name: 'Review Radar',
 +    description: 'reviewradar.ai',
 +    imageSrc: reviewradar,
 +    href: 'https://reviewradar.ai',
-+  },
-+];
+   },
+ ];

template/app/src/components/ui/toast.tsx

@@ -76,7 +76,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-primary text-primary-foreground px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className
     )}
     {...props}