@wasp.sh/wasp-cli-darwin-arm64-unknown 0.17.2 → 0.18.2

package/data/Cli/starters/basic/eslint.config.js

@@ -12,4 +12,13 @@ export default defineConfig([
   eslintReact.configs.flat.recommended,
   eslintReact.configs.flat['jsx-runtime'],
   eslintPrettier,
+  // Overrides:
+  {
+    // `@typescript-eslint/no-require-imports` is enabled by default in `typescript-eslint/recommended` config.
+    // This allows us to use `require` syntax in CJS files.
+    files: ["**/*.{cjs,cts}"],
+    rules: {
+      "@typescript-eslint/no-require-imports": ["off"]
+    }
+  }
 ]);

package/data/Cli/starters/basic/package.json

@@ -22,6 +22,6 @@
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.2",
     "typescript-eslint": "^8.32.1",
-    "vite": "^4.3.9"
+    "vite": "^7.0.6"
   }
 }

package/data/Cli/starters/basic/{postcss.config.cjs → postcss.config.js}

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

package/data/Cli/starters/basic/{tailwind.config.cjs → tailwind.config.js}

@@ -1,7 +1,7 @@
 import { resolveProjectPath } from "wasp/dev";
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: [resolveProjectPath("./src/**/*.{js,jsx,ts,tsx}")],
   theme: {
     extend: {

package/data/Cli/starters/minimal/package.json

@@ -11,6 +11,6 @@
     "@types/react": "^18.0.37",
     "prisma": "5.19.1",
     "typescript": "5.8.2",
-    "vite": "^4.3.9"
+    "vite": "^7.0.6"
   }
 }

package/data/Generator/templates/Dockerfile

@@ -3,7 +3,9 @@
 #   Because if not, we had situations where it would use the different version
 #   locally and on Github CI. This way we ensure exact version is used,
 #   and also have control over updating it (instead of update surprising us).
-FROM node:{= nodeVersion =}-alpine3.17 AS node
+{=! TODO: Upgrade this to the latest Alpine version once we update Prisma #2504 =}
+{=! (Alpine 3.21 at time of writing) =}
+FROM node:{= nodeVersion =}-alpine3.20 AS node
 
 
 # We split Dockerfile into base, server-builder and server-production.

package/data/Generator/templates/react-app/package.json

@@ -9,7 +9,8 @@
   {=& overridesChunk =},
   "scripts": {
     "start": "vite",
-    "build": "tsc --build && vite build"
+    "build": "tsc --build && vite build",
+    "preview": "vite preview"
   },
   "engineStrict": true,
   "engines": {

package/data/Generator/templates/react-app/tsconfig.app.json

@@ -5,11 +5,19 @@
     // Temporary loosen the type checking until we can address all the errors.
     "jsx": "preserve",
     "allowJs": true,
-    "strict": false,
     "skipLibCheck": true,
     // Allow importing pages with the .tsx extension.
     "allowImportingTsExtensions": true,
     "noEmit": true,
+    // Overriding Vite 7 linting-focused options to be less strict since we
+    // don't want to block web-app builds on linting errors.
+    // We'll tackle it when we do: https://github.com/wasp-lang/wasp/issues/2777
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": false,
+    "noFallthroughCasesInSwitch": false,
+    "noUncheckedSideEffectImports": false
   },
   "include": [
     "src"

package/data/Generator/templates/react-app/vite.config.ts

@@ -45,7 +45,7 @@ const defaultViteConfig = {
       {
         // Vite doesn't look for `.prisma/client` imports in the `node_modules`
         // folder. We point it to the correct place here.
-        // TODO: Check if we can remove when updating Vite (#2867) and Prisma (#2504)
+        // TODO: Check if we can remove when updating Prisma (#2504)
         find: /^\.prisma\/(.+)$/,
         replacement: path.join(
           "{= projectDir =}",

package/data/Generator/templates/sdk/wasp/auth/email/actions/signup.ts

@@ -5,7 +5,7 @@ import { type UserEmailSignupFields } from '../../providers'
 {=/ emailUserSignupFields.isDefined =}
 
 type EmailSignupData = {
-  username: string
+  email: string
   password: string
 }{=# emailUserSignupFields.isDefined =} & UserEmailSignupFields{=/ emailUserSignupFields.isDefined =}
 

package/data/Generator/templates/sdk/wasp/auth/forms/Auth.module.css

@@ -0,0 +1,16 @@
+/*
+  Using !important with some of the components is a workaround for Tailwind
+  CSS's having too much precedence.
+  https://github.com/wasp-lang/wasp/issues/1764
+*/
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.headerText {
+  font-size: 1.875rem !important;
+  font-weight: 700 !important;
+  margin-top: 1.5rem !important;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/Auth.tsx

@@ -1,7 +1,9 @@
 {{={= =}=}}
-import { useState, createContext } from 'react'
-import { createTheme } from '@stitches/react'
-import { styled } from 'wasp/core/stitches.config'
+import { useState, createContext, useMemo } from 'react'
+import styles from './Auth.module.css'
+import './internal/auth-styles.css'
+import { tokenObjToCSSVars } from "./internal/util"
+import { CSSProperties } from "react"
 
 import {
   type State,
@@ -21,22 +23,6 @@ const logoStyle = {
   height: '3rem'
 }
 
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-})
-
-// Note about using !important with some of the components:
-// This is a workaround for CSS generated by Stitches not being specific enough
-// and thus being overridden by Tailwind CSS. https://github.com/wasp-lang/wasp/issues/1764
-// Long term we want to move away from Stitches and this is an acceptable workaround for now.
-
-const HeaderText = styled('h2', {
-  fontSize: '1.875rem !important',
-  fontWeight: '700 !important',
-  marginTop: '1.5rem !important'
-})
-
 
 // PRIVATE API
 export const AuthContext = createContext({
@@ -55,10 +41,10 @@ function Auth ({ state, appearance, logo, socialLayout = 'horizontal', additiona
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  // TODO(matija): this is called on every render, is it a problem?
-  // If we do it in useEffect(), then there is a glitch between the default color and the
-  // user provided one.
-  const customTheme = createTheme(appearance ?? {})
+  const customStyle = useMemo(() => ({
+    ...tokenObjToCSSVars('color', appearance?.colors ?? {}),
+    ...tokenObjToCSSVars('font-size', appearance?.fontSizes ?? {}),
+  }), [appearance])
 
   const titles: Record<State, string> = {
     login: 'Log in to your account',
@@ -74,10 +60,10 @@ function Auth ({ state, appearance, logo, socialLayout = 'horizontal', additiona
   const socialButtonsDirection = socialLayout === 'vertical' ? 'vertical' : 'horizontal'
 
   return (
-    <Container className={customTheme}>
+    <div className={styles.container} style={customStyle}>
       <div>
         {logo && (<img style={logoStyle} src={logo} alt='Your Company' />)}
-        <HeaderText>{title}</HeaderText>
+        <h2 className={styles.headerText}>{title}</h2>
       </div>
 
       {errorMessage && (
@@ -100,7 +86,7 @@ function Auth ({ state, appearance, logo, socialLayout = 'horizontal', additiona
         {state === 'verify-email' && (<VerifyEmailForm />)}
         {=/ isEmailAuthEnabled =}
       </AuthContext.Provider>
-    </Container>
+    </div>
   )
 }
 

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Form.module.css

@@ -0,0 +1,99 @@
+/*
+  Using !important with some of the components is a workaround for Tailwind
+  CSS's having too much precedence.
+  https://github.com/wasp-lang/wasp/issues/1764
+*/
+
+.form {
+  margin-top: 1.5rem;
+}
+
+.formItemGroup {
+  /* Empty class to use as marker */
+}
+
+.formItemGroup + .formItemGroup {
+  margin-top: 1.5rem;
+}
+
+.formLabel {
+  display: block !important;
+  font-size: var(--font-size-sm) !important;
+  font-weight: 500 !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.formInput,
+.formTextarea {
+  display: block !important;
+  line-height: 1.5rem !important;
+  font-size: var(--font-size-sm) !important;
+  border-width: 1px !important;
+  border-color: var(--color-gray600) !important;
+  background-color: #f8f4ff !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  border-radius: 0.375rem !important;
+  width: 100% !important;
+  padding-top: 0.375rem !important;
+  padding-bottom: 0.375rem !important;
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
+  margin: 0 !important;
+}
+
+.formInput:focus,
+.formTextarea:focus {
+  border-width: 1px !important;
+  border-color: var(--color-gray700) !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  outline: none;
+}
+
+.formInput:disabled,
+.formTextarea:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  background-color: var(--color-gray400) !important;
+  border-color: var(--color-gray400) !important;
+  color: var(--color-gray500) !important;
+}
+
+.formError {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-formErrorText);
+  margin-top: 0.5rem;
+}
+
+.submitButton {
+  display: flex !important;
+  justify-content: center !important;
+  width: 100% !important;
+  border-width: 1px !important;
+  border-color: var(--color-brand) !important;
+  background-color: var(--color-brand) !important;
+  color: var(--color-submitButtonText) !important;
+  padding: 0.5rem 0.75rem !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  font-weight: 600 !important;
+  font-size: var(--font-size-sm) !important;
+  line-height: 1.25rem !important;
+  border-radius: 0.375rem !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 100ms !important;
+  cursor: pointer;
+}
+
+.submitButton:hover {
+  background-color: var(--color-brandAccent) !important;
+  border-color: var(--color-brandAccent) !important;
+}
+
+.submitButton:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  background-color: var(--color-gray400) !important;
+  border-color: var(--color-gray400) !important;
+  color: var(--color-gray500) !important;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Form.tsx

@@ -1,107 +1,74 @@
-import { styled } from 'wasp/core/stitches.config'
-
-// Note about using !important with some of the components:
-// This is a workaround for CSS generated by Stitches not being specific enough
-// and thus being overridden by Tailwind CSS. https://github.com/wasp-lang/wasp/issues/1764
-// Long term we want to move away from Stitches and this is an acceptable workaround for now.
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import styles from "./Form.module.css";
+import "./auth-styles.css";
+import { clsx } from "./util";
 
 // PRIVATE API
-export const Form = styled('form', {
-  marginTop: '1.5rem',
-})
+export const Form = forwardRef<
+  ComponentRef<"form">,
+  ComponentPropsWithoutRef<"form">
+>(({ children, className, ...props }, ref) => (
+  <form className={clsx(styles.form, className)} {...props} ref={ref}>
+    {children}
+  </form>
+));
 
 // PUBLIC API
-export const FormItemGroup = styled('div', {
-  '& + div': {
-    marginTop: '1.5rem',
-  },
-})
+export const FormItemGroup = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.formItemGroup, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
 
 // PUBLIC API
-export const FormLabel = styled('label', {
-  display: 'block !important',
-  fontSize: '$sm !important',
-  fontWeight: '500 !important',
-  marginBottom: '0.5rem !important',
-})
-
-const commonInputStyles = {
-  display: 'block !important',
-  lineHeight: '1.5rem !important',
-  fontSize: '$sm !important',
-  borderWidth: '1px !important',
-  borderColor: '$gray600 !important',
-  backgroundColor: '#f8f4ff !important',
-  boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05) !important',
-  '&:focus': {
-    borderWidth: '1px !important',
-    borderColor: '$gray700 !important',
-    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05) !important',
-  },
-  '&:disabled': {
-    opacity: '0.5 !important',
-    cursor: 'not-allowed !important',
-    backgroundColor: '$gray400 !important',
-    borderColor: '$gray400 !important',
-    color: '$gray500 !important',
-  },
-
-  borderRadius: '0.375rem !important',
-  width: '100% !important',
-
-  paddingTop: '0.375rem !important',
-  paddingBottom: '0.375rem !important',
-  paddingLeft: '0.75rem !important',
-  paddingRight: '0.75rem !important',
-  margin: '0 !important',
-}
+export const FormLabel = forwardRef<
+  ComponentRef<"label">,
+  ComponentPropsWithoutRef<"label">
+>(({ children, className, ...props }, ref) => (
+  <label className={clsx(styles.formLabel, className)} {...props} ref={ref}>
+    {children}
+  </label>
+));
 
 // PUBLIC API
-export const FormInput = styled('input', commonInputStyles)
+export const FormInput = forwardRef<
+  ComponentRef<"input">,
+  ComponentPropsWithoutRef<"input">
+>(({ className, ...props }, ref) => (
+  <input className={clsx(styles.formInput, className)} {...props} ref={ref} />
+));
 
-// PUBLIC API
-export const FormTextarea = styled('textarea', commonInputStyles)
+// PUBLIC API)
+export const FormTextarea = forwardRef<
+  ComponentRef<"textarea">,
+  ComponentPropsWithoutRef<"textarea">
+>(({ className, ...props }, ref) => (
+  <textarea
+    className={clsx(styles.formTextarea, className)}
+    {...props}
+    ref={ref}
+  />
+));
 
-// PUBLIC API
-export const FormError = styled('div', {
-  display: 'block',
-  fontSize: '$sm',
-  fontWeight: '500',
-  color: '$formErrorText',
-  marginTop: '0.5rem',
-})
+// PUBLIC API)
+export const FormError = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.formError, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
 
 // PRIVATE API
-export const SubmitButton = styled('button', {
-  display: 'flex !important',
-  justifyContent: 'center !important',
-
-  width: '100% !important',
-  borderWidth: '1px !important',
-  borderColor: '$brand !important',
-  backgroundColor: '$brand !important',
-  color: '$submitButtonText !important',
-
-  padding: '0.5rem 0.75rem !important',
-  boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05) !important',
-
-  fontWeight: '600 !important',
-  fontSize: '$sm !important',
-  lineHeight: '1.25rem !important',
-  borderRadius: '0.375rem !important',
-
-  // TODO(matija): extract this into separate BaseButton component and then inherit it.
-  '&:hover': {
-    backgroundColor: '$brandAccent !important',
-    borderColor: '$brandAccent !important',
-  },
-  '&:disabled': {
-    opacity: '0.5 !important',
-    cursor: 'not-allowed !important',
-    backgroundColor: '$gray400 !important',
-    borderColor: '$gray400 !important',
-    color: '$gray500 !important',
-  },
-  transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1) !important',
-  transitionDuration: '100ms !important',
-})
+export const SubmitButton = forwardRef<
+  ComponentRef<"button">,
+  ComponentPropsWithoutRef<"button">
+>(({ children, className, ...props }, ref) => (
+  <button className={clsx(styles.submitButton, className)} {...props} ref={ref}>
+    {children}
+  </button>
+));

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Message.module.css

@@ -0,0 +1,22 @@
+.message {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  margin-top: 1rem;
+  background: var(--color-gray400);
+}
+
+.messageError {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  margin-top: 1rem;
+  background: var(--color-errorBackground);
+  color: var(--color-errorText);
+}
+
+.messageSuccess {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  margin-top: 1rem;
+  background: var(--color-successBackground);
+  color: var(--color-successText);
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Message.tsx

@@ -1,21 +1,34 @@
-import { styled } from 'wasp/core/stitches.config'
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import styles from "./Message.module.css";
+import "./auth-styles.css";
+import { clsx } from "./util";
 
 // PRIVATE API
-export const Message = styled('div', {
-  padding: '0.5rem 0.75rem',
-  borderRadius: '0.375rem',
-  marginTop: '1rem',
-  background: '$gray400',
-})
+export const Message = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.message, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
 
 // PRIVATE API
-export const MessageError = styled(Message, {
-  background: '$errorBackground',
-  color: '$errorText',
-})
+export const MessageError = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.messageError, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
 
 // PRIVATE API
-export const MessageSuccess = styled(Message, {
-  background: '$successBackground',
-  color: '$successText',
-})
+export const MessageSuccess = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.messageSuccess, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));

package/data/Generator/templates/sdk/wasp/auth/forms/internal/auth-styles.css

@@ -0,0 +1,30 @@
+:root {
+  /* ATTENTION: Keep this list in sync with the one at ../types.ts */
+  /*
+    This is the list of CSS variables that are used in the auth forms, and that
+    the user can override.
+  */
+
+  /* Colors */
+  --color-waspYellow: #ffcc00;
+  --color-gray700: #a1a5ab;
+  --color-gray600: #d1d5db;
+  --color-gray500: gainsboro;
+  --color-gray400: #f0f0f0;
+  --color-red: #FED7D7;
+  --color-darkRed: #fa3838;
+  --color-green: #C6F6D5;
+
+  /* Semantic colors */
+  --color-brand: var(--color-waspYellow);
+  --color-brandAccent: #ffdb46;
+  --color-errorBackground: var(--color-red);
+  --color-errorText: #2D3748;
+  --color-successBackground: var(--color-green);
+  --color-successText: #2D3748;
+  --color-submitButtonText: black;
+  --color-formErrorText: var(--color-darkRed);
+
+  /* Font sizes */
+  --font-size-sm: 1rem;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.module.css

@@ -0,0 +1,55 @@
+.orContinueWith {
+  position: relative;
+  margin-top: 1.5rem;
+}
+
+.orContinueWithLineContainer {
+  position: absolute;
+  inset: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.orContinueWithLine {
+  width: 100%;
+  border-top-width: 1px;
+  border-color: var(--color-gray500);
+}
+
+.orContinueWithTextContainer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+}
+
+.orContinueWithText {
+  background-color: white;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.socialAuth {
+  margin-top: 1.5rem;
+}
+
+.socialAuthLabel {
+  font-weight: 500;
+  font-size: var(--font-size-sm);
+}
+
+.socialAuthButtons {
+  gap: 16px;
+  margin-top: 0.5rem;
+  display: flex;
+}
+
+.socialAuthButtons.horizontal {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
+}
+
+.socialAuthButtons.vertical {
+  flex-direction: column;
+  margin: 8px 0;
+}