Merge remote-tracking branch 'upstream/main' into update-ci-workflow

.dockerignore

@@ -1,5 +1,5 @@
-# Ignores everything except dist/ prisma/ apps/ and yarn.lock
+# Ignores everything except dist/ prisma/ apps/ and pnpm-lock.yaml
 *
 !dist/
 !prisma/
-!yarn.lock
+!pnpm-lock.yaml

.env.example

@@ -54,12 +54,3 @@ [email protected]
 NX_EMAIL_PROVIDER=
 NX_EMAIL_PROVIDER_API_TOKEN=
 
-
-
-########################################################################
-# DEPRECATING
-# We're in the process of removing code that requires the following
-# environment variables. They will be removed in a future release, but
-# for now, they are still required.
-########################################################################
-NX_PLAID_SECRET=

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+pnpm lint-staged

README.md

@@ -58,14 +58,14 @@ Maybe uses [Teller](https://teller.io/) for connecting financial accounts. To ge
 -   Webhooks are not implemented yet, but you can populate the `NX_TELLER_SIGNING_SECRET` with the value from your Teller account.
 -   We highly recommend checking out the [Teller docs](https://teller.io/docs) for more info.
 
-Then run the following yarn commands:
+Then run the following pnpm commands:
 
 ```shell
-yarn install
-yarn run dev:services:all
-yarn prisma:migrate:dev
-yarn prisma:seed
-yarn dev
+pnpm install
+pnpm run dev:services:all
+pnpm prisma:migrate:dev
+pnpm prisma:seed
+pnpm dev
 ```
 
 ## Set Up Ngrok
@@ -87,21 +87,17 @@ To do so:
 2. Click on Create Domain
 3. Copy the domain and paste it into your `.env` file: `NGROK_DOMAIN=your_domain`
 
-That's it! As long as you run the project locally using `docker` with `yarn dev:services:all` you'll be good to go.
+That's it! As long as you run the project locally using `docker` with `pnpm dev:services:all` you'll be good to go.
 
 ## Contributing
 
 To contribute, please see our [contribution guide](https://github.com/maybe-finance/maybe/blob/main/CONTRIBUTING.md).
 
-## High-priority issues
-
-The biggest focus at the moment is on getting the app functional without some previously key external services (namely Plaid).
-
-You can view the current [high-priority issues here](https://github.com/maybe-finance/maybe/issues?q=is:issue+is:open+label:%22high+priority%22). Those are the most impactful issues to tackle first.
+You can view organized issues on [our public Roadmap](https://github.com/maybe-finance/maybe/projects?query=is:open?type%3Dnew&query=is:open%20sort:title-asc). This is a great way to narrow down the most impactful ways to contribute.
 
 ## External data
 
-To pull market data in (for investments), you'll need a Polygon.io API key. You can get one for free [here](https://polygon.io/) and then add it to your `.env` file (`NX_POLYGON_API_KEY`).
+To pull market data in (for investments), you'll need a Polygon.io API key. You can get one for free [here](https://polygon.io/) and then add it to your `.env` file (`NX_POLYGON_API_KEY`). **Note:** If you're using the free "basic" plan, you'll need to manually sync stock tickers using the dev tools in the app the first time you run it. It will then be re-synced automatically every 24 hours. If you're using a paid tier, be sure to update your `.env` file with the correct tier (`NX_POLYGON_API_TIER`) and tickers and pricing will be synced automatically.
 
 ## Tech stack
 

apps/client/.storybook/main.js

@@ -3,7 +3,7 @@ const rootMain = require('../../../.storybook/main')
 module.exports = {
     ...rootMain,
     core: { ...rootMain.core, builder: 'webpack5' },
-    stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
+    stories: ['../**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
     webpackFinal: async (config, { configType }) => {
         // apply any global webpack configs that might have been specified in .storybook/main.js

apps/client/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({
+    theme,
+})

apps/client/.storybook/preview.js

@@ -0,0 +1,9 @@
+import '../styles.css'
+
+import theme from './theme'
+
+export const parameters = {
+    docs: {
+        theme,
+    },
+}

apps/client/.storybook/theme.js

@@ -0,0 +1,18 @@
+import { create } from '@storybook/theming'
+import logo from '../assets/logo.svg'
+
+export default create({
+    base: 'dark',
+
+    brandTitle: 'Maybe',
+    brandUrl: 'https://maybe.co',
+    brandImage: logo,
+
+    fontBase: '"General Sans", sans-serif',
+
+    colorPrimary: '#4361EE',
+    colorSecondary: '#F12980',
+
+    appBg: '#1C1C20',
+    appContentBg: '#16161A',
+})

apps/client/pages/onboarding.tsx

@@ -109,7 +109,7 @@ export default function OnboardingPage() {
 
     return (
         <>
-            <div className="fixed inset-0 z-auto overflow-hidden">
+            <div className="fixed inset-0 z-1 overflow-hidden">
                 <OnboardingBackground className="absolute -bottom-3 left-1/2 -translate-x-1/2" />
             </div>
 
@@ -119,7 +119,7 @@ export default function OnboardingPage() {
 
             <Transition
                 key={currentStep.key}
-                className={classNames('px-6 mb-20 grow')}
+                className={classNames('px-6 mb-20 grow z-10')}
                 appear
                 show
                 enter="ease-in duration-100"

apps/client/pages/register.tsx

@@ -1,11 +1,17 @@
 import { useState, type ReactElement } from 'react'
-import { Input, InputPassword, Button, Checkbox } from '@maybe-finance/design-system'
-import { FullPageLayout } from '@maybe-finance/client/features'
+import { Input, InputPassword, Button } from '@maybe-finance/design-system'
+import {
+    FullPageLayout,
+    UserDevTools,
+    completedOnboarding,
+    onboardedProfile,
+} from '@maybe-finance/client/features'
 import { signIn, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import Script from 'next/script'
 import Link from 'next/link'
+import { useUserApi } from '@maybe-finance/client/shared'
 
 export default function RegisterPage() {
     const [firstName, setFirstName] = useState('')
@@ -16,10 +22,15 @@ export default function RegisterPage() {
     const [errorMessage, setErrorMessage] = useState<string | null>(null)
     const [isLoading, setIsLoading] = useState(false)
     const [isAdmin, setIsAdmin] = useState<boolean>(false)
+    const [isOnboarded, setIsOnboarded] = useState<boolean>(false)
 
+    const { useUpdateOnboarding, useUpdateProfile } = useUserApi()
     const { data: session } = useSession()
     const router = useRouter()
 
+    const updateOnboarding = useUpdateOnboarding()
+    const updateProfile = useUpdateProfile()
+
     useEffect(() => {
         if (session) router.push('/')
     }, [session, router])
@@ -43,6 +54,11 @@ export default function RegisterPage() {
             redirect: false,
         })
 
+        if (isOnboarded && response?.ok) {
+            await updateProfile.mutateAsync(onboardedProfile)
+            await updateOnboarding.mutateAsync(completedOnboarding)
+        }
+
         if (response && response.error) {
             setErrorMessage(response.error)
             setIsLoading(false)
@@ -110,7 +126,12 @@ export default function RegisterPage() {
                                 </div>
                             ) : null}
 
-                            <AuthDevTools isAdmin={isAdmin} setIsAdmin={setIsAdmin} />
+                            <UserDevTools
+                                isAdmin={isAdmin}
+                                setIsAdmin={setIsAdmin}
+                                isOnboarded={isOnboarded}
+                                setIsOnboarded={setIsOnboarded}
+                            />
 
                             <Button
                                 type="submit"
@@ -140,28 +161,6 @@ export default function RegisterPage() {
     )
 }
 
-type AuthDevToolsProps = {
-    isAdmin: boolean
-    setIsAdmin: (isAdmin: boolean) => void
-}
-
-function AuthDevTools({ isAdmin, setIsAdmin }: AuthDevToolsProps) {
-    return process.env.NODE_ENV === 'development' ? (
-        <div className="my-2 p-2 border border-red-300 rounded-md">
-            <h6 className="flex text-red">
-                Dev Tools <i className="ri-tools-fill ml-1.5" />
-            </h6>
-            <p className="text-sm my-2">
-                This section will NOT show in production and is solely for making testing easier.
-            </p>
-
-            <div>
-                <Checkbox checked={isAdmin} onChange={setIsAdmin} label="Create Admin user?" />
-            </div>
-        </div>
-    ) : null
-}
-
 RegisterPage.getLayout = function getLayout(page: ReactElement) {
     return <FullPageLayout>{page}</FullPageLayout>
 }

apps/client/stories/404.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import type { Story, Meta } from '@storybook/react'
+import Page404 from '../pages/404'
+
+export default {
+    title: 'pages/Page404',
+    component: Page404,
+} as Meta
+
+export const Default: Story = () => <Page404 />

apps/client/styles.css

@@ -132,6 +132,31 @@
             overflow: auto !important;
         }
     }
+
+    .show-on-hover-custom-gray-scroll::-webkit-scrollbar {
+        height: 14px;
+        width: 14px;
+    }
+
+    .show-on-hover-custom-gray-scroll::-webkit-scrollbar-thumb {
+        border: 4px solid rgba(0, 0, 0, 0);
+        background-clip: content-box;
+        @apply bg-transparent rounded-full;
+    }
+
+    .show-on-hover-custom-gray-scroll {
+        overflow: overlay !important;
+    }
+
+    .show-on-hover-custom-gray-scroll:hover::-webkit-scrollbar-thumb {
+        @apply bg-gray-200;
+    }
+
+    @-moz-document url-prefix() {
+        .show-on-hover-custom-gray-scroll {
+            overflow: auto !important;
+        }
+    }
 }
 
 /* tiptap / prosemirror customization */

apps/server/Dockerfile

@@ -6,8 +6,8 @@
 FROM node:16.18.1 as builder
 
 WORKDIR /app
-COPY ./dist/apps/server ./yarn.lock ./prisma ./
-RUN yarn install --production
+COPY ./dist/apps/server ./pnpm-lock.yaml ./prisma ./
+RUN pnpm install --prod --frozen-lockfile
 
 # ------------------------------------------
 #                PROD STAGE