Merge pull request #52 from RBND-studio/dev

New web
RBND-studio · Feb 14, 2024 · 78237ae · 78237ae
2 parents c942e87 + 5fbcbcc
commit 78237ae
Show file tree

Hide file tree

Showing 208 changed files with 8,907 additions and 4,231 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,16 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
diff --git a/.husky/pre-commit → .husky/pre-push b/.husky/pre-commit → .husky/pre-push
@@ -12,4 +12,4 @@ fi
 # Run gitleaks
 gitleaks protect --staged -v 
 
-pnpm pre-commit
+pnpm pre-push
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
@@ -10,6 +10,9 @@ const nextConfig = {
     outputFileTracingRoot: path.join(__dirname, "../../"),
     optimizePackageImports: ["ui", "icons"],
   },
+  images: {
+    formats: ["image/avif", "image/webp"],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -15,19 +15,18 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
+    "@flows/js": "0.0.37",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-slot": "^1.0.2",
-    "@flows/js": "0.0.32",
     "@rbnd/react-dark-mode": "^2.0.1",
-    "@supabase/ssr": "^0.0.10",
+    "@supabase/ssr": "^0.1.0",
     "@visx/axis": "^3.5.0",
     "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",
     "@visx/responsive": "^3.3.0",
     "@visx/scale": "^3.5.0",
     "@visx/shape": "^3.5.0",
     "@visx/tooltip": "^3.3.0",
-    "cookies-next": "^4.1.0",
     "dayjs": "^1.11.10",
     "icons": "workspace:*",
     "monaco-editor": "^0.44.0",
@@ -36,15 +35,16 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "shared": "workspace:*",
+    "sharp": "^0.33.2",
     "swr": "^2.2.4",
     "ui": "workspace:*"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.1.0",
-    "@pandacss/dev": "0.27.3",
+    "@pandacss/dev": "0.30.2",
     "@types/node": "^17.0.12",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
     "typescript": "5.3.3"

diff --git a/apps/app/panda.config.ts b/apps/app/panda.config.ts
@@ -1,6 +1,8 @@
 import { defineConfig } from "@pandacss/dev";
 import { theme, conditions, utilities } from "ui/theme";
 
+const prod = process.env.PROD === "true" || process.env.NODE_ENV === "production";
+
 export default defineConfig({
   // Whether to use css reset
   preflight: true,
@@ -25,5 +27,7 @@ export default defineConfig({
 
   minify: true,
 
+  hash: { className: prod, cssVar: false },
+
   conditions,
 });
diff --git a/apps/app/src/app/(auth)/layout.tsx b/apps/app/src/app/(auth)/layout.tsx
@@ -3,6 +3,8 @@ import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import { routes } from "routes";
 
+import { AuthWrapper } from "./auth-wrapper";
+
 type Props = {
   children?: ReactNode;
 };
@@ -11,5 +13,5 @@ export default async function AuthLayout({ children }: Props): Promise<JSX.Eleme
   const auth = await getAuth();
   if (auth) redirect(routes.home);
 
-  return <>{children}</>;
+  return <AuthWrapper>{children}</AuthWrapper>;
 }
diff --git a/apps/app/src/app/(auth)/login/login-form.tsx b/apps/app/src/app/(auth)/login/login-form.tsx
@@ -3,15 +3,16 @@
 import { css } from "@flows/styled-system/css";
 import { Box, Flex } from "@flows/styled-system/jsx";
 import { LoginMessage } from "app/(auth)/login/login-message";
-import { createClient } from "auth/client";
 import { signIn } from "auth/server-actions";
 import { GitHub16, Google16 } from "icons";
 import Link from "next/link";
 import type { FC } from "react";
 import { Suspense, useTransition } from "react";
 import { routes } from "routes";
-import { Button, Input, Text } from "ui";
+import { createClient } from "supabase/client";
+import { Button, Input, Text, toast } from "ui";
 
+//TODO: @pesickadavid add password reset page and uncomment the link
 export const LoginForm: FC = () => {
   const [isPending, startTransition] = useTransition();
   const supabase = createClient();
@@ -20,8 +21,9 @@ export const LoginForm: FC = () => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
 
-    startTransition(() => {
-      void signIn(formData);
+    startTransition(async () => {
+      const res = await signIn(formData);
+      if (res.error) toast.error(res.error);
     });
   };
 
@@ -94,7 +96,7 @@ export const LoginForm: FC = () => {
         <Button loading={isPending} name="sign-in" size="medium" type="submit">
           Log in
         </Button>
-        <Text align="center" color="muted">
+        {/* <Text align="center" color="muted">
           <Link
             className={css({
               textDecoration: "underline",
@@ -104,7 +106,7 @@ export const LoginForm: FC = () => {
           >
             Forgot password?
           </Link>
-        </Text>
+        </Text> */}
 
         <hr
           className={css({

diff --git a/apps/app/src/app/(auth)/login/page.tsx b/apps/app/src/app/(auth)/login/page.tsx
@@ -1,16 +1,11 @@
 import type { Metadata } from "next";
 
-import { AuthWrapper } from "../auth-wrapper";
 import { LoginForm } from "./login-form";
 
 export const metadata: Metadata = {
   title: "Login | Flows",
 };
 
 export default function Login(): JSX.Element {
-  return (
-    <AuthWrapper>
-      <LoginForm />
-    </AuthWrapper>
-  );
+  return <LoginForm />;
 }
diff --git a/apps/app/src/app/(auth)/signup/page.tsx b/apps/app/src/app/(auth)/signup/page.tsx
@@ -3,7 +3,6 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { Text } from "ui";
 
-import { AuthWrapper } from "../auth-wrapper";
 import { SignupForm } from "./signup-form";
 
 export const metadata: Metadata = {
@@ -12,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function Signup(): JSX.Element {
   return (
-    <AuthWrapper>
+    <>
       <SignupForm />
       <Text
         align="center"
@@ -45,6 +44,6 @@ export default function Signup(): JSX.Element {
           Privacy policy
         </Link>
       </Text>
-    </AuthWrapper>
+    </>
   );
 }
diff --git a/apps/app/src/app/(auth)/signup/signup-form.tsx b/apps/app/src/app/(auth)/signup/signup-form.tsx
@@ -3,14 +3,14 @@
 import { css } from "@flows/styled-system/css";
 import { Box, Flex } from "@flows/styled-system/jsx";
 import { LoginMessage } from "app/(auth)/login/login-message";
-import { createClient } from "auth/client";
 import { signUp } from "auth/server-actions";
 import { GitHub16, Google16 } from "icons";
 import Link from "next/link";
 import type { FC } from "react";
 import { Suspense, useTransition } from "react";
 import { routes } from "routes";
-import { Button, Input, Text } from "ui";
+import { createClient } from "supabase/client";
+import { Button, Input, Text, toast } from "ui";
 
 export const SignupForm: FC = () => {
   const [isPending, startTransition] = useTransition();
@@ -20,8 +20,9 @@ export const SignupForm: FC = () => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
 
-    startTransition(() => {
-      void signUp(formData);
+    startTransition(async () => {
+      const res = await signUp(formData);
+      if (res.error) toast.error(res.error);
     });
   };
 

diff --git a/apps/app/src/app/(auth)/signup/success/page.tsx b/apps/app/src/app/(auth)/signup/success/page.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { css } from "@flows/styled-system/css";
+import { Box } from "@flows/styled-system/jsx";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { routes } from "routes";
+import { Text } from "ui";
+
+// Try it out by visiting http://localhost:6001/signup/success?email=example%40example.com
+export default function SignupSuccessPage(): JSX.Element {
+  const searchParams = useSearchParams();
+  const email = searchParams.get("email");
+
+  return (
+    <>
+      <Box borderRadius="radius12" cardWrap="-" padding="space24">
+        <Text
+          align="center"
+          className={css({
+            mb: "space24",
+          })}
+          variant="titleXl"
+        >
+          Check your email
+        </Text>
+
+        <Text align="center" className={css({ mb: "space24" })}>
+          We&apos;ve sent a verification link.
+          <br />
+          Please check your inbox at{" "}
+          <Text as="span" weight="700">
+            {email}
+          </Text>
+        </Text>
+
+        <Text align="center" color="muted">
+          Back to{" "}
+          <Link
+            className={css({
+              textDecoration: "underline",
+              color: "text",
+            })}
+            href={routes.login()}
+          >
+            login
+          </Link>
+        </Text>
+      </Box>
+      <Text
+        align="center"
+        className={css({
+          mt: "space24",
+        })}
+        color="muted"
+        variant="bodyXs"
+      >
+        Having trouble? Contact support at <strong>hello@flows.sh</strong>
+      </Text>
+    </>
+  );
+}
diff --git a/apps/app/src/app/(auth)/verify/error/page.tsx b/apps/app/src/app/(auth)/verify/error/page.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { css } from "@flows/styled-system/css";
+import { Box } from "@flows/styled-system/jsx";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { routes } from "routes";
+import { Text } from "ui";
+
+// Try it out by visiting http://localhost:6001/verify/error?message=Email%20link%20is%20invalid%20or%20has%20expired
+export default function VerifyErrorPage(): JSX.Element {
+  const searchParams = useSearchParams();
+  const message = searchParams.get("message");
+
+  return (
+    <>
+      <Box borderRadius="radius12" cardWrap="-" padding="space24">
+        <Text
+          align="center"
+          className={css({
+            mb: "space24",
+          })}
+          variant="titleXl"
+        >
+          Verification failed
+        </Text>
+
+        <Text align="center" className={css({ mb: "space24" })}>
+          {message}
+        </Text>
+
+        <Text align="center" color="muted">
+          Back to{" "}
+          <Link
+            className={css({
+              textDecoration: "underline",
+              color: "text",
+            })}
+            href={routes.login()}
+          >
+            login
+          </Link>
+        </Text>
+      </Box>
+      <Text
+        align="center"
+        className={css({
+          mt: "space24",
+        })}
+        color="muted"
+        variant="bodyXs"
+      >
+        Having trouble? Contact support at <strong>hello@flows.sh</strong>
+      </Text>
+    </>
+  );
+}
diff --git a/.../app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/(detail)/flows-list.tsx b/.../app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/(detail)/flows-list.tsx
@@ -43,9 +43,7 @@ export const FlowsList: FC<Props> = async ({ projectId }) => {
             gap: "space24",
             justifyContent: "space-between",
 
-            transitionDuration: "fast",
-            transitionTimingFunction: "easeInOut",
-            transitionProperty: "all",
+            fastEaseInOut: "all",
 
             borderBottomStyle: "solid",
             borderBottomWidth: "1px",
@@ -127,9 +125,7 @@ export const FlowsList: FC<Props> = async ({ projectId }) => {
                 py: "space48",
                 cursor: "pointer",
 
-                transitionDuration: "fast",
-                transitionTimingFunction: "easeInOut",
-                transitionProperty: "all",
+                fastEaseInOut: "all",
 
                 _hover: {
                   bg: "bg.subtleHover",

diff --git a/...shboard)/org/[organizationId]/project/[projectId]/(detail)/template/css-template-form.tsx b/...shboard)/org/[organizationId]/project/[projectId]/(detail)/template/css-template-form.tsx
@@ -35,6 +35,12 @@ export const CssTemplateForm: FC<Props> = ({ project, defaultTemplate }) => {
       defaultValues: createDefaultValues({ project, defaultTemplate }),
     });
   const [enabled, setEnabled] = useState(createDefaultEnabled(project));
+  const handleSetEnabled = (value: boolean): void => {
+    if (value)
+      setValue("cssTemplate", formState.defaultValues?.cssTemplate ?? "", { shouldDirty: true });
+    else setValue("cssTemplate", "", { shouldDirty: true });
+    setEnabled(value);
+  };
 
   const { send, loading } = useSend();
   const router = useRouter();
@@ -82,7 +88,7 @@ export const CssTemplateForm: FC<Props> = ({ project, defaultTemplate }) => {
         className={css({ mb: "space12" })}
         id="enabled"
         label="Customize full CSS template"
-        onChange={setEnabled}
+        onChange={handleSetEnabled}
       />
       <form onSubmit={handleSubmit(onSubmit)}>
         {enabled ? (