Merge pull request #114 from RBND-studio/dev

Merge dev

.github/workflows/code-checks.yml

@@ -0,0 +1,58 @@
+name: Code Checks
+
+on:
+  pull_request:
+    branches: [dev]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - run: pnpm install
+      - run: pnpm web build
+      - run: pnpm lint
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - run: pnpm install
+      - run: pnpm web build
+      - run: pnpm tsc
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - run: pnpm install
+      - run: pnpm test
+      - run: pnpm be test:e2e
+  spellcheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - run: pnpm install
+      - run: pnpm spellcheck

.github/workflows/deploy-prod.yml

@@ -29,6 +29,7 @@ jobs:
           echo NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }} >> .env
           echo NEXT_PUBLIC_ENV=${{ secrets.NEXT_PUBLIC_ENV }} >> .env
           echo NEXT_PUBLIC_TURNSTILE_SITE_KEY=${{ secrets.NEXT_PUBLIC_TURNSTILE_SITE_KEY }} >> .env
+          echo NEXT_PUBLIC_POSTHOG_KEY=${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }} >> .env
         working-directory: "./prod-deploy/apps/app"
       - run: |
           touch .env

.github/workflows/deploy-stage.yml

@@ -30,6 +30,7 @@ jobs:
           echo NEXT_PUBLIC_API_URL=${{ secrets.NEXT_PUBLIC_API_URL }} >> .env
           echo NEXT_PUBLIC_ENV=${{ secrets.NEXT_PUBLIC_ENV }} >> .env
           echo NEXT_PUBLIC_TURNSTILE_SITE_KEY=${{ secrets.NEXT_PUBLIC_TURNSTILE_SITE_KEY }} >> .env
+          echo NEXT_PUBLIC_POSTHOG_KEY=${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }} >> .env
         working-directory: "./stage-deploy/apps/app"
       - run: |
           touch .env

apps/app/.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: ["custom/next"],
+  rules: {
+    camelcase: "off",
+  },
 };

apps/app/package.json

@@ -15,7 +15,7 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
-    "@flows/js": "0.0.38",
+    "@flows/js": "0.0.39",
     "@marsidev/react-turnstile": "^0.5.2",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-slot": "^1.0.2",
@@ -32,6 +32,7 @@
     "icons": "workspace:*",
     "monaco-editor": "^0.44.0",
     "next": "14.1.0",
+    "posthog-js": "^1.108.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",

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

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

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { useSend } from "hooks/use-send";
+import { api } from "lib/api";
+import { useRouter } from "next/navigation";
+import type { FC } from "react";
+import { t } from "translations";
+import { Button, toast } from "ui";
+
+type Props = {
+  inviteId: string;
+};
+
+export const InviteDelete: FC<Props> = ({ inviteId }) => {
+  const { send, loading } = useSend();
+  const router = useRouter();
+  const handleDelete = async (): Promise<void> => {
+    const res = await send(api["DELETE /invites/:inviteId"](inviteId), {
+      errorMessage: t.toasts.deleteInviteFailed,
+    });
+    if (res.error) return;
+    router.refresh();
+    toast.success(t.toasts.deleteInviteSuccess);
+  };
+
+  return (
+    <Button loading={loading} onClick={handleDelete} size="small" variant="secondary">
+      Remove
+    </Button>
+  );
+};

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { useSend } from "hooks/use-send";
-import { api, type OrganizationDetail, type OrganizationUser } from "lib/api";
+import type { OrganizationDetail, OrganizationMember } from "lib/api";
+import { api } from "lib/api";
 import { useRouter } from "next/navigation";
 import type { FC } from "react";
 import { t } from "translations";
@@ -18,7 +19,7 @@ import {
 
 type Props = {
   organization: OrganizationDetail;
-  user: OrganizationUser;
+  user: OrganizationMember;
 };
 
 export const MemberRemoveDialog: FC<Props> = ({ organization, user }) => {

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

@@ -1,28 +1,26 @@
+import { css } from "@flows/styled-system/css";
 import { Flex } from "@flows/styled-system/jsx";
 import { Person24 } from "icons";
-import type { OrganizationDetail, OrganizationUser } from "lib/api";
+import type { OrganizationDetail, OrganizationUsers } from "lib/api";
+import { timeFromNow } from "lib/date";
 import type { FC } from "react";
 import { plural, t } from "translations";
 import { Icon, Text } from "ui";
 
+import { InviteDelete } from "./invite-delete";
 import { InviteDialog } from "./invite-dialog";
 import { MemberRemoveDialog } from "./member-remove-dialog";
 
 type Props = {
   org: OrganizationDetail;
-  members: OrganizationUser[];
+  users: OrganizationUsers;
 };
 
-export const OrganizationMembers: FC<Props> = ({ members, org }) => {
+export const OrganizationMembers: FC<Props> = ({ users, org }) => {
+  const { members, pending_invites } = users;
   return (
-    <Flex
-      alignItems="flex-start"
-      cardWrap="-"
-      flexDirection="column"
-      gap="space16"
-      padding="space16"
-    >
-      <Flex flexDirection="column">
+    <Flex alignItems="flex-start" cardWrap="-" flexDirection="column" padding="space16">
+      <Flex flexDirection="column" mb="space16">
         <Text variant="titleL">{t.organization.members.title}</Text>
         <Text color="muted">
           {plural(
@@ -32,7 +30,7 @@ export const OrganizationMembers: FC<Props> = ({ members, org }) => {
           )}
         </Text>
       </Flex>
-      <Flex flexDirection="column" gap="space12">
+      <Flex flexDirection="column" gap="space12" mb="space16">
         {members.map((member) => (
           <Flex alignItems="center" gap="space8" key={member.id}>
             <Icon icon={Person24} />
@@ -41,6 +39,20 @@ export const OrganizationMembers: FC<Props> = ({ members, org }) => {
           </Flex>
         ))}
       </Flex>
+
+      <Text className={css({ mb: "space8" })} variant="titleS">
+        Pending invites
+      </Text>
+      <Flex direction="column" gap="space12" mb="space16">
+        {pending_invites.map((invite) => (
+          <Flex alignItems="center" gap="space8" key={invite.id}>
+            <Text>{invite.email}</Text>
+            <Text>Expires {timeFromNow(invite.expires_at)}</Text>
+            <InviteDelete inviteId={invite.id} />
+          </Flex>
+        ))}
+      </Flex>
+
       <InviteDialog organizationId={org.id} />
     </Flex>
   );

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

@@ -14,11 +14,13 @@ type Props = {
 };
 
 export default async function OrganizationSettingsPage({ params }: Props): Promise<JSX.Element> {
-  const [org, members] = await Promise.all([
+  const [org, users] = await Promise.all([
     load(api["/organizations/:organizationId"](params.organizationId)),
     load(api["/organizations/:organizationId/users"](params.organizationId)),
   ]);
 
+  users;
+
   return (
     <>
       <Flex alignItems="center" justifyContent="space-between" mb="space16">
@@ -27,7 +29,7 @@ export default async function OrganizationSettingsPage({ params }: Props): Promi
       </Flex>
 
       <OrganizationEditForm org={org} />
-      <OrganizationMembers members={members} org={org} />
+      <OrganizationMembers org={org} users={users} />
     </>
   );
 }

apps/app/src/app/(dashboard)/org/[organizationId]/project/[projectId]/(detail)/getting-started/create-flow.tsx

@@ -0,0 +1,41 @@
+import { Flex } from "@flows/styled-system/jsx";
+import { Plus16 } from "icons";
+import type { FC } from "react";
+import { Button, Text } from "ui";
+
+import { CreateFlowDialog } from "../create-flow-dialog";
+import { NumberCircle } from "./number-circle";
+
+type Props = {
+  organizationId: string;
+  projectId: string;
+};
+
+export const CreateFlow: FC<Props> = ({ projectId, organizationId }) => {
+  return (
+    <Flex gap="space12">
+      <NumberCircle>2</NumberCircle>
+      <Flex
+        alignItems="center"
+        flex="1"
+        gap="space16"
+        justifyContent="space-between"
+        mdDown={{ flexDirection: "column", justifyContent: "unset", alignItems: "flex-start" }}
+      >
+        <Flex flexDirection="column" gap="space4">
+          <Text variant="titleL">Create your first flow</Text>
+          <Text color="muted">Start onboarding your users by creating your first flow.</Text>
+        </Flex>
+        <CreateFlowDialog
+          organizationId={organizationId}
+          projectId={projectId}
+          trigger={
+            <Button size="medium" startIcon={<Plus16 />} variant="primary">
+              Create flow
+            </Button>
+          }
+        />
+      </Flex>
+    </Flex>
+  );
+};