Merge branch 'dev'

.github/workflows/deploy-stage.yml

@@ -15,6 +15,7 @@ jobs:
           path: "./stage-deploy"
       - run: |
           touch .env
+          echo NODE_ENV=production >> .env
           echo NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }} >> .env
           echo NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }} >> .env
           echo NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }} >> .env

.husky/pre-commit

@@ -1,4 +1,15 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+# Section for gitleaks
+if ! command -v gitleaks > /dev/null 2>&1
+then
+
+    echo "gitleaks is not installed. Please run 'brew install gitleaks' or visit https://github.com/gitleaks/gitleaks#installing"
+    exit 1
+fi
+
+# Run gitleaks
+gitleaks protect --staged -v 
+
 pnpm pre-commit

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["contentlayer"],
+  "cSpell.words": ["contentlayer", "sonner"],
   "editor.formatOnSave": true,
   "editor.detectIndentation": false,
   "eslint.workingDirectories": [{ "mode": "auto" }]

apps/app/next.config.js

@@ -5,6 +5,7 @@ const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ["ui", "icons"],
   output: "standalone",
+  swcMinify: true,
   experimental: {
     outputFileTracingRoot: path.join(__dirname, "../../"),
     optimizePackageImports: ["ui", "icons"],

apps/app/package.json

@@ -16,20 +16,32 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
-    "@rbnd/flows": "0.0.19",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@rbnd/flows": "0.0.24",
+    "@rbnd/react-dark-mode": "^2.0.1",
     "@supabase/ssr": "^0.0.10",
+    "@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",
+    "shared": "workspace:*",
     "cookies-next": "^4.1.0",
+    "dayjs": "^1.11.10",
     "icons": "workspace:*",
     "monaco-editor": "^0.44.0",
-    "next": "^14.0.3",
+    "next": "14.0.5-canary.39",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
+    "swr": "^2.2.4",
     "ui": "workspace:*"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.0.3",
-    "@pandacss/dev": "0.19.0",
+    "@next/eslint-plugin-next": "14.0.4",
+    "@pandacss/dev": "0.23.0",
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",

apps/app/panda.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "@pandacss/dev";
-import { theme, conditions } from "ui/theme";
+import { theme, conditions, utilities } from "ui/theme";
 
 export default defineConfig({
   // Whether to use css reset
@@ -13,6 +13,8 @@ export default defineConfig({
 
   theme,
 
+  utilities,
+
   // The output directory for your css system
   outdir: "@flows/pandacss",
 

apps/app/public/gotrue/mailer/templates/account-invite-template.html

@@ -0,0 +1,2 @@
+{ "transactionalId": "clpn080ta00ekjs0p8q45obhk", "email": "{{ .Email }}", "dataVariables": {
+"confirmationUrl": "{{ .ConfirmationURL }}" } }

apps/app/public/gotrue/mailer/templates/account-magic-link-template.html

@@ -0,0 +1,2 @@
+{ "transactionalId": "clpn0978u045jjs0otu3qsp8o", "email": "{{ .Email }}", "dataVariables": {
+"confirmationUrl": "{{ .ConfirmationURL }}" } }

apps/app/public/gotrue/mailer/templates/account-recovery-template.html

@@ -0,0 +1,2 @@
+{ "transactionalId": "clpn08i4l056sl90ojahcq01m", "email": "{{ .Email }}", "dataVariables": {
+"confirmationUrl": "{{ .ConfirmationURL }}" } }

apps/app/src/app/(dashboard)/error.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { PageError } from "components/ui/page-error";
+
+export default function DashboardError(props): JSX.Element {
+  return <PageError {...props} title="Error loading dashboard" />;
+}

apps/app/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,30 @@
+import { css } from "@flows/styled-system/css";
+import { Flex } from "@flows/styled-system/jsx";
+import { Sidebar } from "components/header";
+import type { ReactNode } from "react";
+
+type Props = {
+  children?: ReactNode;
+};
+
+export const dynamic = "force-dynamic";
+
+export default function DashboardLayout({ children }: Props): JSX.Element {
+  return (
+    <Flex height="100%" minHeight="100%">
+      <Sidebar />
+      <div
+        className={css({
+          width: "100%",
+          maxWidth: "1100px",
+          mx: "auto",
+          py: "space24",
+          px: "space32",
+          minHeight: "100%",
+        })}
+      >
+        {children}
+      </div>
+    </Flex>
+  );
+}

apps/app/src/app/(dashboard)/loading.tsx

@@ -0,0 +1,3 @@
+import { PageLoading } from "components/ui/page-loading";
+
+export default PageLoading;

apps/app/src/app/(dashboard)/org/[organizationId]/(detail)/layout.tsx

@@ -0,0 +1,23 @@
+import { api } from "lib/api";
+import { load } from "lib/load";
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+type Props = {
+  children?: ReactNode;
+  params: {
+    organizationId: string;
+  };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const org = await load(api["/organizations/:organizationId"](params.organizationId));
+
+  return {
+    title: `${org.name} | Flows`,
+  };
+}
+
+export default function OrganizationDetailLayout({ children }: Props): JSX.Element {
+  return <>{children}</>;
+}

apps/app/src/app/org/[organizationId]/page.tsx → apps/app/src/app/(dashboard)/org/[organizationId]/(detail)/page.tsx

@@ -1,30 +1,37 @@
 import { css } from "@flows/styled-system/css";
-import { getAuth } from "auth/server";
 import { CreateProjectDialog } from "components/projects";
 import { api } from "lib/api";
-import { redirect } from "next/navigation";
+import { load } from "lib/load";
+import type { Metadata } from "next";
+import { redirect, RedirectType } from "next/navigation";
 import { routes } from "routes";
 import { Button, Text } from "ui";
 
-import { OrganizationDeleteDialog } from "./organization-delete-dialog";
+import { OrganizationDeleteDialog } from "../organization-delete-dialog";
 
 type Props = {
   params: { organizationId: string };
 };
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const org = await load(api["/organizations/:organizationId"](params.organizationId));
+
+  return {
+    title: `${org.name} | Flows`,
+  };
+}
+
 export default async function ProjectsPage({ params }: Props): Promise<JSX.Element> {
-  const auth = await getAuth();
-  if (!auth) return redirect(routes.login());
-  const fetchCtx = { token: auth.access_token };
-  const projects = await api["/organizations/:organizationId/projects"](params.organizationId)(
-    fetchCtx,
+  const projects = await load(
+    api["/organizations/:organizationId/projects"](params.organizationId),
   );
   if (projects.length)
     return redirect(
       routes.project({ projectId: projects[0].id, organizationId: projects[0].organization_id }),
+      RedirectType.replace,
     );
 
-  const org = await api["/organizations/:organizationId"](params.organizationId)(fetchCtx);
+  const org = await load(api["/organizations/:organizationId"](params.organizationId));
 
   return (
     <>

apps/app/src/app/(dashboard)/org/[organizationId]/(detail)/settings/invite-dialog.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { css } from "@flows/styled-system/css";
+import { useSend } from "hooks/use-send";
+import { Plus16 } from "icons";
+import { api } from "lib/api";
+import { useRouter } from "next/navigation";
+import { type FC, useState } from "react";
+import type { SubmitHandler } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { t } from "translations";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  Input,
+  Text,
+  toast,
+} from "ui";
+
+type Props = {
+  organizationId: string;
+};
+
+type FormData = {
+  email: string;
+};
+
+export const InviteDialog: FC<Props> = ({ organizationId }) => {
+  const [open, setOpen] = useState(false);
+  const { send, loading } = useSend();
+  const router = useRouter();
+
+  const { register, handleSubmit } = useForm<FormData>();
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    const res = await send(api["POST /organizations/:organizationId/users"](organizationId, data), {
+      errorMessage: t.toasts.createInviteFailed,
+    });
+    if (res.error) return;
+    toast.success(t.toasts.inviteSent);
+    router.refresh();
+    setOpen(false);
+  };
+
+  return (
+    <Dialog
+      onOpenChange={setOpen}
+      open={open}
+      trigger={
+        <Button startIcon={<Plus16 />} variant="secondary">
+          {t.organization.members.addDialog.button}
+        </Button>
+      }
+    >
+      <DialogTitle>{t.organization.members.addDialog.title}</DialogTitle>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <DialogContent>
+          <Text
+            className={css({
+              mb: "space16",
+            })}
+          >
+            {t.organization.members.addDialog.description}
+          </Text>
+          <Input {...register("email")} label="Email" required type="email" />
+        </DialogContent>
+        <DialogActions>
+          <DialogClose asChild>
+            <Button shadow={false} size="small" variant="secondary">
+              {t.actions.close}
+            </Button>
+          </DialogClose>
+          <Button loading={loading} size="small" type="submit">
+            {t.organization.members.addDialog.confirm}
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+};