fix: onboarding on signin page

apps/bootstrapper/package.json

@@ -21,7 +21,7 @@
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "dotenv": "16.3.1",
-    "dotenv-cli": "7.2.1",
+    "dotenv-cli": "7.3.0",
     "dotenv-expand": "10.0.0",
     "eslint": "8.47.0",
     "jest": "29.6.2",

apps/e2e/package.json

@@ -13,7 +13,7 @@
     "@types/node": "18.16.18",
     "cypress": "10.11.0",
     "dotenv": "16.3.1",
-    "dotenv-cli": "7.2.1",
+    "dotenv-cli": "7.3.0",
     "dotenv-expand": "10.0.0",
     "eslint": "8.47.0",
     "typescript": "5.1.6"

apps/main/package.json

@@ -22,7 +22,7 @@
     "@chirpy-dev/ui": "workspace:*",
     "@chirpy-dev/utils": "workspace:*",
     "@radix-ui/colors": "1.0.1",
-    "@t3-oss/env-nextjs": "0.6.0",
+    "@t3-oss/env-nextjs": "0.6.1",
     "@tensorflow-models/toxicity": "1.2.2",
     "@tensorflow/tfjs": "3.18.0",
     "@tensorflow/tfjs-converter": "3.18.0",
@@ -34,7 +34,7 @@
     "html-loader": "4.2.0",
     "lodash": "4.17.21",
     "micro": "10.0.1",
-    "next": "13.4.16",
+    "next": "13.4.19",
     "next-axiom": "0.17.0",
     "next-connect": "0.12.2",
     "next-mdx-remote": "3.0.8",
@@ -52,7 +52,7 @@
     "superjson": "1.13.1",
     "type-fest": "4.2.0",
     "web-push": "3.6.4",
-    "zod": "3.22.0"
+    "zod": "3.22.2"
   },
   "devDependencies": {
     "@chirpy-dev/bootstrapper": "workspace:*",
@@ -61,7 +61,7 @@
     "@chirpy-dev/eslint-config": "workspace:*",
     "@chirpy-dev/service-worker": "workspace:*",
     "@chirpy-dev/tsconfigs": "workspace:*",
-    "@next/bundle-analyzer": "13.4.16",
+    "@next/bundle-analyzer": "13.4.19",
     "@relative-ci/agent": "4.1.6",
     "@types/cors": "2.8.13",
     "@types/jest": "29.5.3",
@@ -72,7 +72,7 @@
     "@types/requestidlecallback": "0.3.5",
     "@types/web-push": "3.3.2",
     "dotenv": "16.3.1",
-    "dotenv-cli": "7.2.1",
+    "dotenv-cli": "7.3.0",
     "dotenv-expand": "10.0.0",
     "eslint": "8.47.0",
     "jest": "29.6.2",

apps/service-worker/package.json

@@ -11,7 +11,7 @@
     "@chirpy-dev/eslint-config": "workspace:*",
     "@chirpy-dev/tsconfigs": "workspace:*",
     "dotenv": "16.3.1",
-    "dotenv-cli": "7.2.1",
+    "dotenv-cli": "7.3.0",
     "dotenv-expand": "10.0.0",
     "eslint": "8.47.0",
     "typescript": "5.1.6",

package.json

@@ -21,7 +21,7 @@
     "eslint": "8.47.0",
     "husky": "8.0.3",
     "lint-staged": "13.2.3",
-    "next": "13.4.16",
+    "next": "13.4.19",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/analytics/package.json

@@ -17,8 +17,8 @@
     "@headlessui/react": "1.7.16",
     "@tremor/react": "3.6.1",
     "clsx": "2.0.0",
-    "framer-motion": "10.15.2",
-    "next": "13.4.16",
+    "framer-motion": "10.16.0",
+    "next": "13.4.19",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

packages/eslint-config/package.json

@@ -5,15 +5,15 @@
   "main": "./index.js",
   "dependencies": {
     "@chirpy-dev/prettier-config": "workspace:*",
-    "@typescript-eslint/eslint-plugin": "6.3.0",
-    "@typescript-eslint/parser": "6.3.0",
-    "eslint-config-next": "13.4.13",
+    "@typescript-eslint/eslint-plugin": "6.4.0",
+    "@typescript-eslint/parser": "6.4.0",
+    "eslint-config-next": "13.4.19",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-jest": "27.2.3",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-storybook": "0.6.7",
     "eslint-plugin-unicorn": "48.0.1",
-    "next": "13.4.16",
+    "next": "13.4.19",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/trpc/package.json

@@ -26,15 +26,15 @@
     "@trpc/server": "10.37.1",
     "@types/web-push": "3.3.2",
     "dayjs": "1.11.9",
-    "next": "13.4.16",
+    "next": "13.4.19",
     "next-auth": "4.23.0",
     "next-axiom": "0.17.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "stripe": "12.18.0",
+    "stripe": "13.2.0",
     "superjson": "1.13.1",
     "web-push": "3.6.4",
-    "zod": "3.22.0"
+    "zod": "3.22.2"
   },
   "devDependencies": {
     "@types/jest": "29.5.3",

packages/types/package.json

@@ -7,14 +7,14 @@
   "types": "./src/index.ts",
   "devDependencies": {
     "@chirpy-dev/tsconfigs": "workspace:*",
-    "@tiptap/core": "2.0.4",
-    "@tiptap/pm": "2.0.4",
-    "@tiptap/react": "2.0.4",
+    "@tiptap/core": "2.1.6",
+    "@tiptap/pm": "2.1.6",
+    "@tiptap/react": "2.1.6",
     "@types/node": "18.16.18",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "csstype": "3.1.2",
-    "next": "13.4.16",
+    "next": "13.4.19",
     "next-auth": "4.23.0",
     "next-mdx-remote": "3.0.8",
     "react": "18.2.0",

packages/ui/package.json

@@ -27,24 +27,24 @@
     "@radix-ui/react-tooltip": "1.0.6",
     "@stripe/stripe-js": "2.1.0",
     "@tanstack/react-query": "4.32.6",
-    "@tiptap/core": "2.0.4",
-    "@tiptap/extension-image": "2.0.4",
-    "@tiptap/extension-link": "2.0.4",
-    "@tiptap/extension-placeholder": "2.0.4",
-    "@tiptap/extension-underline": "2.0.4",
-    "@tiptap/pm": "2.0.4",
-    "@tiptap/react": "2.0.4",
-    "@tiptap/starter-kit": "2.0.4",
+    "@tiptap/core": "2.1.6",
+    "@tiptap/extension-image": "2.1.6",
+    "@tiptap/extension-link": "2.1.6",
+    "@tiptap/extension-placeholder": "2.1.6",
+    "@tiptap/extension-underline": "2.1.6",
+    "@tiptap/pm": "2.1.6",
+    "@tiptap/react": "2.1.6",
+    "@tiptap/starter-kit": "2.1.6",
     "avvvatars-react": "0.4.2",
     "canvas-confetti": "1.6.0",
     "class-variance-authority": "0.6.1",
     "clsx": "2.0.0",
     "crisp-sdk-web": "1.0.21",
     "dayjs": "1.11.9",
     "debounce-promise": "3.1.2",
-    "framer-motion": "10.15.2",
-    "lucide-react": "0.265.0",
-    "next": "13.4.16",
+    "framer-motion": "10.16.0",
+    "lucide-react": "0.268.0",
+    "next": "13.4.19",
     "next-auth": "4.23.0",
     "next-axiom": "0.17.0",
     "next-mdx-remote": "3.0.8",
@@ -80,7 +80,7 @@
     "@types/node": "18.16.18",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
-    "@types/testing-library__jest-dom": "5.14.9",
+    "@types/testing-library__jest-dom": "6.0.0",
     "autoprefixer": "10.4.14",
     "babel-loader": "8.2.5",
     "chromatic": "6.11.4",
@@ -99,7 +99,7 @@
     "postcss-loader": "7.3.3",
     "require-from-string": "2.0.2",
     "resolve-url-loader": "5.0.0",
-    "sass": "1.65.1",
+    "sass": "1.66.1",
     "sass-loader": "13.3.2",
     "storybook-addon-next": "1.7.1",
     "style-loader": "3.3.3",

packages/ui/src/blocks/layout/site-layout.tsx

@@ -38,18 +38,19 @@ export function SiteLayout({
         )}
       >
         {!hideHeader && <Header />}
-        <main
-          className={clsx(
-            // Make main content to fill viewport even the content isn't tall enough
-            'min-h-[calc(100vh-109px)] py-16 md:mx-4',
-            // https://www.joshwcomeau.com/css/full-bleed/
-            !hideFullBleed && cssstyles.layoutMain,
-            styles?.container,
-          )}
-        >
-          {/* This div is necessary to make fill viewport work */}
-          <div>{children}</div>
-        </main>
+        {/* Make main content to fill viewport even the content isn't tall enough */}
+        <div className="min-h-[calc(100vh-109px)]">
+          <main
+            className={clsx(
+              'py-16 md:mx-4',
+              // https://www.joshwcomeau.com/css/full-bleed/
+              !hideFullBleed && cssstyles.layoutMain,
+              styles?.container,
+            )}
+          >
+            {children}
+          </main>
+        </div>
         {!hideFooter && <Footer className="mt-auto" />}
       </LayoutWrapper>
     </SiteThemeProvider>

packages/ui/src/blocks/pricing/pricing.tsx

@@ -103,7 +103,7 @@ export function PricingCards({
         ]}
         callToAction={{
           variant: 'solid',
-          children: 'Get started',
+          children: 'Start building',
           color: 'primary',
           onClick: handleClickCTA,
           ...payAsYouGoButton,

packages/ui/src/blocks/sign-in-form/sign-in-form.tsx

@@ -23,15 +23,15 @@ export type SignInFormProps = React.PropsWithChildren<{
   /**
    * @default false allow anonymous sign-in
    */
-  allowAnonymous?: boolean;
+  anonymous?: boolean;
 }>;
 
 type SignInErrorKeys = keyof typeof SIGN_IN_ERRORS;
 
 export function SignInForm({
   title,
   subtitle,
-  allowAnonymous,
+  anonymous,
 }: SignInFormProps): JSX.Element {
   const [errorType, setErrorType] = React.useState<SignInErrorKeys | null>(
     null,
@@ -83,12 +83,12 @@ export function SignInForm({
           </div>
           <div className="space-y-6">
             <div>
-              {allowAnonymous && isAnonymous ? (
+              {anonymous && isAnonymous ? (
                 <AnonymousUserSignIn>{alert}</AnonymousUserSignIn>
               ) : (
                 <EmailSignIn>{alert}</EmailSignIn>
               )}
-              {allowAnonymous && (
+              {anonymous && (
                 <Toggle
                   checked={isAnonymous}
                   onChange={(value) => setIsAnonymous(value)}

packages/ui/src/hooks/use-sign-in-window.ts

@@ -16,7 +16,7 @@ export function useSignInWindow({
   const popupWindow = React.useRef<Window | null>(null);
   const handleClickSignIn = () => {
     popupWindow.current = popupCenterWindow(
-      '/auth/sign-in?allowAnonymous=true',
+      '/auth/sign-in?anonymous=true',
       '_blank',
       width,
       height,

packages/ui/src/pages/auth/sign-in.tsx

@@ -1,27 +1,27 @@
+import { useRouter } from 'next/router';
 import * as React from 'react';
 
 import { SignInForm, SiteLayout } from '../../blocks';
 
 export function SignInPage(): JSX.Element {
-  const [allowAnonymous, setAllowAnonymous] = React.useState(false);
-  React.useEffect(() => {
-    if (new URL(location.href).searchParams.get('allowAnonymous') === 'true') {
-      setAllowAnonymous(true);
-    }
-  }, []);
+  const router = useRouter();
   return (
     <SiteLayout
       title="Sign in"
       styles={{
-        container: `mx-2 md:mx-0 !py-0`,
+        container: `mx-2 md:!mx-0 !py-0`,
       }}
       hideFooter
       hideHeader
     >
       <SignInForm
-        title="Sign in"
-        subtitle="👋 Welcome! Please enter your details."
-        allowAnonymous={allowAnonymous}
+        title={router.query['onboarding'] ? `You're almost done` : 'Sign in'}
+        subtitle={
+          router.query['onboarding']
+            ? 'Sign-in to continue to create your project'
+            : '👋 Welcome! Please enter your details.'
+        }
+        anonymous={router.query['anonymous'] === 'true'}
       />
     </SiteLayout>
   );

packages/ui/src/pages/dashboard/project/new.tsx

@@ -15,6 +15,7 @@ export function New(): JSX.Element {
   const { data } = useCurrentUser();
   return (
     <CreateProject
+      title={`Create project`}
       onSubmit={async (fields) => {
         try {
           await createAProject({

packages/ui/src/pages/home.tsx

@@ -72,7 +72,7 @@ export const strings = {
     </>
   ),
   callToAction: {
-    main: 'Get started',
+    main: 'Start building',
     secondary: 'Learn More',
   },
 };

packages/ui/src/pages/new.tsx

@@ -24,18 +24,20 @@ export function New(): JSX.Element {
   const router = useRouter();
   return (
     <CreateProject
+      title={`Let's build your community`}
       fields={savedFields}
       onSubmit={async (fields) => {
         setSavedFields(fields);
-        router.push('/auth/sign-in');
+        router.push('/auth/sign-in?onboarding=true');
       }}
     />
   );
 }
 
 export type CreateProjectProps = {
-  fields?: FormFields;
+  title: string;
   onSubmit: (fields: FormFields) => Promise<void>;
+  fields?: FormFields;
 };
 
 export function CreateProject(props: CreateProjectProps): JSX.Element {
@@ -59,8 +61,8 @@ export function CreateProject(props: CreateProjectProps): JSX.Element {
     await props.onSubmit(fields);
   });
   return (
-    <SiteLayout title={'Create project'}>
-      <PageTitle>Create project</PageTitle>
+    <SiteLayout title={props.title}>
+      <PageTitle>{props.title}</PageTitle>
       <div className="mt-8 flex max-w-lg flex-col gap-8">
         <TextField
           {...register('name', {

packages/utils/package.json

@@ -6,14 +6,14 @@
   "sideEffects": false,
   "types": "./src/index.ts",
   "dependencies": {
-    "@tiptap/pm": "2.0.4",
+    "@tiptap/pm": "2.1.6",
     "dayjs": "1.11.9"
   },
   "devDependencies": {
     "@chirpy-dev/tsconfigs": "workspace:*",
     "@chirpy-dev/types": "workspace:*",
-    "@tiptap/core": "2.0.4",
-    "@tiptap/react": "2.0.4",
+    "@tiptap/core": "2.1.6",
+    "@tiptap/react": "2.1.6",
     "@types/node": "18.16.18",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",