Refactor: components/shared

### TL;DR

Removed the dependency on `react-hot-toast` in favor of a custom implementation for toast notifications.

### What changed?

1. Removed `react-hot-toast` from `package.json` and `yarn.lock`. 
2. Updated `EnvironmentVariables` and `Config` to use the custom toast notification system.

### Why make this change?

To reduce bundle size and have more control over the toast notification system.

### How to test?

1. Navigate to the Environment Variables settings for a project. Try adding and removing environment variables to see the new toast notifications in action.
2. Navigate to the Domains settings for a project and try adding a new domain to view the custom toast notifications.

---

README.md

@@ -15,7 +15,7 @@ yarn
 ### Build backend
 
 ```zsh
-yarn build --ignore-frontend
+yarn build --ignore frontend
 ```
 
 ### Environment variables, running the development server, and deployment

packages/backend/README.md

@@ -15,7 +15,7 @@ yarn
 ### Build backend
 
 ```zsh
-yarn build --ignore-frontend
+yarn build --ignore frontend
 ```
 
 ### Environment variables

packages/backend/src/resolvers.ts

@@ -6,6 +6,7 @@ import { Permission } from './entity/ProjectMember';
 import { Domain } from './entity/Domain';
 import { Project } from './entity/Project';
 import { EnvironmentVariable } from './entity/EnvironmentVariable';
+import { AddProjectFromTemplateInput } from './types';
 
 const log = debug('snowball:resolver');
 
@@ -197,6 +198,26 @@ export const createResolvers = async (service: Service): Promise<any> => {
         }
       },
 
+      addProjectFromTemplate: async (
+        _: any,
+        {
+          organizationSlug,
+          data,
+        }: { organizationSlug: string; data: AddProjectFromTemplateInput },
+        context: any,
+      ) => {
+        try {
+          return await service.addProjectFromTemplate(
+            context.user,
+            organizationSlug,
+            data,
+          );
+        } catch (err) {
+          log(err);
+          throw err;
+        }
+      },
+
       addProject: async (
         _: any,
         {

packages/backend/src/schema.gql

@@ -130,6 +130,14 @@ input AddEnvironmentVariableInput {
   value: String!
 }
 
+input AddProjectFromTemplateInput {
+  templateOwner: String!
+  templateRepo: String!
+  owner: String!
+  name: String!
+  isPrivate: Boolean!
+}
+
 input AddProjectInput {
   name: String!
   repository: String!
@@ -204,6 +212,10 @@ type Mutation {
   ): Boolean!
   removeEnvironmentVariable(environmentVariableId: String!): Boolean!
   updateDeploymentToProd(deploymentId: String!): Boolean!
+  addProjectFromTemplate(
+    organizationSlug: String!
+    data: AddProjectFromTemplateInput
+  ): Project!
   addProject(organizationSlug: String!, data: AddProjectInput): Project!
   updateProject(projectId: String!, data: UpdateProjectInput): Boolean!
   redeployToProd(deploymentId: String!): Boolean!

packages/backend/src/service.ts

@@ -16,6 +16,7 @@ import { User } from './entity/User';
 import { Registry } from './registry';
 import { GitHubConfig, RegistryConfig } from './config';
 import {
+  AddProjectFromTemplateInput,
   AppDeploymentRecord,
   AppDeploymentRemovalRecord,
   GitPushEventPayload,
@@ -643,6 +644,53 @@ export class Service {
     return newDeployment;
   }
 
+  async addProjectFromTemplate(
+    user: User,
+    organizationSlug: string,
+    data: AddProjectFromTemplateInput,
+  ): Promise<Project | undefined> {
+    try {
+      const octokit = await this.getOctokit(user.id);
+
+      const gitRepo = await octokit?.rest.repos.createUsingTemplate({
+        template_owner: data.templateOwner,
+        template_repo: data.templateRepo,
+        owner: data.owner,
+        name: data.name,
+        include_all_branches: false,
+        private: data.isPrivate,
+      });
+
+      if (!gitRepo) {
+        throw new Error('Failed to create repository from template');
+      }
+
+      const createdTemplateRepo = await octokit.rest.repos.get({
+        owner: data.owner,
+        repo: data.name,
+      });
+
+      const prodBranch = createdTemplateRepo.data.default_branch ?? 'main';
+
+      const project = await this.addProject(user, organizationSlug, {
+        name: `${gitRepo.data.owner!.login}-${gitRepo.data.name}`,
+        prodBranch,
+        repository: gitRepo.data.full_name,
+        // TODO: Set selected template
+        template: 'webapp',
+      });
+
+      if (!project || !project.id) {
+        throw new Error('Failed to create project from template');
+      }
+
+      return project;
+    } catch (error) {
+      console.error('Error creating project from template:', error);
+      throw error;
+    }
+  }
+
   async addProject(
     user: User,
     organizationSlug: string,
@@ -672,7 +720,7 @@ export class Service {
     });
 
     // Create deployment with prod branch and latest commit
-    await this.createDeployment(user.id, octokit, {
+    const deployment = await this.createDeployment(user.id, octokit, {
       project,
       branch: project.prodBranch,
       environment: Environment.Production,
@@ -683,6 +731,8 @@ export class Service {
 
     await this.createRepoHook(octokit, project);
 
+    console.log('projectid is', project.id);
+
     return project;
   }
 

packages/backend/src/types.ts

@@ -41,7 +41,7 @@ export interface AppDeploymentRecordAttributes {
 export interface AppDeploymentRemovalRecordAttributes {
   deployment: string;
   request: string;
-  type: "ApplicationDeploymentRemovalRecord";
+  type: 'ApplicationDeploymentRemovalRecord';
   version: string;
 }
 
@@ -61,3 +61,11 @@ export interface AppDeploymentRecord extends RegistryRecord {
 export interface AppDeploymentRemovalRecord extends RegistryRecord {
   attributes: AppDeploymentRemovalRecordAttributes;
 }
+
+export interface AddProjectFromTemplateInput {
+  templateOwner: string;
+  templateRepo: string;
+  owner: string;
+  name: string;
+  isPrivate: boolean;
+}

packages/frontend/README.md

@@ -15,7 +15,7 @@ yarn
 ### Build backend
 
 ```zsh
-yarn build --ignore-frontend
+yarn build --ignore frontend
 ```
 
 ### Environment variables

packages/frontend/package.json

@@ -62,7 +62,6 @@
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "react-hook-form": "^7.49.0",
-    "react-hot-toast": "^2.4.1",
     "react-oauth-popup": "^1.0.5",
     "react-router-dom": "^6.20.1",
     "react-timer-hook": "^3.0.7",

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCombobox } from 'downshift';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 
 import SearchBar from 'components/SearchBar';
 import { useGQLClient } from 'context/GQLClientContext';
@@ -42,7 +42,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     },
   });
 
-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -62,7 +62,7 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
     <div className="relative w-full lg:w-fit">
       <SearchBar {...getInputProps()} />
       <div
-        {...getMenuProps()}
+        {...getMenuProps({}, { suppressRefError: true })}
         className={cn(
           'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
           { hidden: !inputValue || !isOpen },

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx

@@ -5,7 +5,7 @@ import { CrossIcon, SearchIcon } from 'components/shared/CustomIcon';
 import { Input } from 'components/shared/Input';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Project } from 'gql-client';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 import { ProjectSearchBarItem } from './ProjectSearchBarItem';
 import { ProjectSearchBarEmpty } from './ProjectSearchBarEmpty';
 import { useNavigate } from 'react-router-dom';
@@ -27,8 +27,13 @@ export const ProjectSearchBarDialog = ({
   const client = useGQLClient();
   const navigate = useNavigate();
 
-  const { getInputProps, getItemProps, inputValue, setInputValue } =
+  const {
-    useCombobox({
+    getInputProps,
+    getItemProps,
+    getMenuProps,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
     items,
     itemToString(item) {
       return item ? item.name : '';
@@ -45,7 +50,7 @@ export const ProjectSearchBarDialog = ({
     },
   });
 
-  const debouncedInputValue = useDebounce<string>(inputValue, 300);
+  const [debouncedInputValue, _] = useDebounceValue<string>(inputValue, 300);
 
   const fetchProjects = useCallback(
     async (inputValue: string) => {
@@ -75,7 +80,7 @@ export const ProjectSearchBarDialog = ({
           <div className="h-full flex flex-col fixed top-0 inset-0">
             <div className="py-2.5 px-4 flex items-center justify-between border-b border-border-separator/[0.06]">
               <Input
-                {...getInputProps()}
+                {...getInputProps({}, { suppressRefError: true })}
                 leftIcon={<SearchIcon />}
                 placeholder="Search"
                 appearance="borderless"
@@ -86,23 +91,33 @@ export const ProjectSearchBarDialog = ({
               </Button>
             </div>
             {/* Content */}
-            <div className="flex flex-col gap-1 px-2 py-2">
+            <div
-              {items.length > 0
+              className="flex flex-col gap-1 px-2 py-2"
-                ? items.map((item, index) => (
+              {...getMenuProps(
+                {},
+                {
+                  suppressRefError: true,
+                },
+              )}
+            >
+              {items.length > 0 ? (
                 <>
                   <div className="px-2 py-2">
                     <p className="text-elements-mid-em text-xs font-medium">
                       Suggestions
                     </p>
                   </div>
+                  {items.map((item, index) => (
                     <ProjectSearchBarItem
                       key={item.id}
                       item={item}
                       {...getItemProps({ item, index })}
                     />
+                  ))}
                 </>
-                  ))
+              ) : (
-                : inputValue && <ProjectSearchBarEmpty />}
+                inputValue && <ProjectSearchBarEmpty />
+              )}
             </div>
           </div>
         </Dialog.Content>

packages/frontend/src/components/projects/project/settings/DomainCard.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Domain, DomainStatus, Project } from 'gql-client';
 
 import {
-  Chip,
   Typography,
   Menu,
   MenuHandler,
@@ -15,6 +14,15 @@ import EditDomainDialog from './EditDomainDialog';
 import { useGQLClient } from 'context/GQLClientContext';
 import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
 import { useToast } from 'components/shared/Toast';
+import { Tag } from 'components/shared/Tag';
+import {
+  CheckIcon,
+  CrossIcon,
+  GearIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
+import { Heading } from 'components/shared/Heading';
+import { Button } from 'components/shared/Button';
 
 enum RefreshStatus {
   IDLE,
@@ -79,22 +87,29 @@ const DomainCard = ({
     <>
       <div className="flex justify-between py-3">
         <div className="flex justify-start gap-1">
-          <Typography variant="h6">
+          <Heading as="h6" className="flex-col">
-            <i>^</i> {domain.name}
+            {domain.name}{' '}
-          </Typography>
+            <Tag
-          <Chip
+              type={
-            className="w-fit capitalize"
+                domain.status === DomainStatus.Live ? 'positive' : 'negative'
-            value={domain.status}
+              }
-            color={domain.status === DomainStatus.Live ? 'green' : 'orange'}
+              leftIcon={
-            variant="ghost"
+                domain.status === DomainStatus.Live ? (
-            icon={<i>^</i>}
+                  <CheckIcon />
-          />
+                ) : (
+                  <CrossIcon />
+                )
+              }
+            >
+              {domain.status}
+            </Tag>
+          </Heading>
         </div>
 
         <div className="flex justify-start gap-1">
           <i
             id="refresh"
-            className="cursor-pointer w-8 h-8"
+            className="cursor-pointer"
             onClick={() => {
               SetRefreshStatus(RefreshStatus.CHECKING);
               setTimeout(() => {
@@ -102,11 +117,17 @@ const DomainCard = ({
               }, CHECK_FAIL_TIMEOUT);
             }}
           >
-            {refreshStatus === RefreshStatus.CHECKING ? 'L' : 'R'}
+            {refreshStatus === RefreshStatus.CHECKING ? (
+              <LoadingIcon className="animate-spin" />
+            ) : (
+              'L'
+            )}
           </i>
           <Menu placement="bottom-end">
             <MenuHandler>
-              <button className="border-2 rounded-full w-8 h-8">...</button>
+              <Button iconOnly>
+                <GearIcon />
+              </Button>
             </MenuHandler>
             <MenuList>
               <MenuItem
@@ -143,13 +164,13 @@ const DomainCard = ({
       {domain.status === DomainStatus.Pending && (
         <Card className="bg-slate-100 p-4 text-sm">
           {refreshStatus === RefreshStatus.IDLE ? (
-            <Typography variant="small">
+            <Heading>
               ^ Add these records to your domain and refresh to check
-            </Typography>
+            </Heading>
           ) : refreshStatus === RefreshStatus.CHECKING ? (
-            <Typography variant="small" className="text-blue-500">
+            <Heading className="text-blue-500">
               ^ Checking records for {domain.name}
-            </Typography>
+            </Heading>
           ) : (
             <div className="flex gap-2 text-red-500 mb-2">
               <div className="grow">

packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Controller, useForm, SubmitHandler } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { Domain } from 'gql-client';
 
 import {
@@ -9,10 +8,11 @@ import {
   Option,
 } from '@snowballtools/material-tailwind-react-fork';
 
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { Modal } from 'components/shared/Modal';
 import { Button } from 'components/shared/Button';
 import { Input } from 'components/shared/Input';
+import { useToast } from 'components/shared/Toast';
 
 const DEFAULT_REDIRECT_OPTIONS = ['none'];
 
@@ -40,6 +40,7 @@ const EditDomainDialog = ({
   onUpdate,
 }: EditDomainDialogProp) => {
   const client = useGQLClient();
+  const { toast, dismiss } = useToast();
 
   const getRedirectUrl = (domain: Domain) => {
     const redirectDomain = domain.redirectTo;
@@ -99,10 +100,20 @@ const EditDomainDialog = ({
 
       if (updateDomain) {
         await onUpdate();
-        toast.success(`Domain ${domain.name} has been updated`);
+        toast({
+          id: 'domain_id_updated',
+          title: `Domain ${domain.name} has been updated`,
+          variant: 'success',
+          onDismiss: dismiss,
+        });
       } else {
         reset();
-        toast.error(`Error updating domain ${domain.name}`);
+        toast({
+          id: 'domain_id_error_update',
+          title: `Error updating domain ${domain.name}`,
+          variant: 'error',
+          onDismiss: dismiss,
+        });
       }
 
       handleOpen();

packages/frontend/src/components/projects/project/settings/WebhookCard.tsx

@@ -3,6 +3,8 @@ import { useState } from 'react';
 import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog';
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
+import { Input } from 'components/shared/Input';
+import { CopyIcon, TrashIcon } from 'components/shared/CustomIcon';
 
 interface WebhookCardProps {
   webhookUrl: string;
@@ -14,11 +16,12 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   return (
-    <div className="flex justify-between w-full mb-3">
+    <div className="flex justify-between w-full mb-3 gap-3">
-      {webhookUrl}
+      <Input value={webhookUrl} disabled />
       <div className="flex gap-3">
         <Button
-          size="sm"
+          iconOnly
+          size="md"
           onClick={() => {
             navigator.clipboard.writeText(webhookUrl);
             toast({
@@ -29,16 +32,17 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => {
             });
           }}
         >
-          Copy
+          <CopyIcon />
         </Button>
         <Button
-          size="sm"
+          iconOnly
+          size="md"
           variant="danger"
           onClick={() => {
             setDeleteDialogOpen(true);
           }}
         >
-          X
+          <TrashIcon />
         </Button>
       </div>
       <DeleteWebhookDialog

packages/frontend/src/components/shared/index.ts

@@ -0,0 +1,27 @@
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';
+export { Button } from './Button';
+export { Calendar } from './Calendar';
+export { Checkbox } from './Checkbox';
+export { DatePicker } from './DatePicker';
+export { DotBorder } from './DotBorder';
+export { Heading } from './Heading';
+export { IconWithFrame } from './IconWithFrame';
+export { InlineNotification } from './InlineNotification';
+export { Input } from './Input';
+export { Modal } from './Modal';
+export { OverflownText } from './OverflownText';
+export { Radio } from './Radio';
+export { SegmentedControls } from './SegmentedControls';
+export { Select } from './Select';
+export { Sidebar } from './Sidebar';
+export { Step } from './Steps';
+export { Switch } from './Switch';
+export { Table } from './Table';
+export { Tabs } from './Tabs';
+export { Tag } from './Tag';
+export { useToast } from './Toast';
+export { Tooltip } from './Tooltip';
+export { UserSelect } from './UserSelect';
+export { VerifyCodeInput } from './VerifyCodeInput';
+export { WavyBorder } from './WavyBorder';

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -32,7 +32,7 @@ const ProjectSearch = () => {
   return (
     <section className="h-full flex flex-col">
       {/* Header */}
-      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] z-30">
+      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] hover:z-30">
         <div className="flex pr-6 pl-2 py-2 items-center">
           <div className="flex-1">
             <ProjectSearchBar

packages/frontend/src/pages/org-slug/Settings.tsx

@@ -1,5 +1,19 @@
-const Settings = () => {
+import { Heading } from 'components/shared/Heading';
-  return <div className="p-5">Settings page</div>;
-};
 
+const Settings = () => {
+  return (
+    <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex items-center">
+        <div className="grow">
+          <div className="flex gap-4 items-center">
+            <Heading as="h2" className="text-[24px]">
+              Settings
+            </Heading>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 export default Settings;

packages/frontend/src/pages/org-slug/index.tsx

@@ -1,13 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { Project } from 'gql-client';
-import { Button } from 'components/shared/Button';
 
-import { PlusIcon } from 'components/shared/CustomIcon';
 import { ProjectCard } from 'components/projects/ProjectCard';
-import { Heading } from 'components/shared/Heading';
+import { Heading, Badge, Button } from 'components/shared';
-import { Badge } from 'components/shared/Badge';
+import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
 
 const Projects = () => {
   const client = useGQLClient();

packages/frontend/src/pages/org-slug/projects/create/success/Id.tsx

@@ -11,14 +11,37 @@ import {
 import { Heading } from 'components/shared/Heading';
 
 import logoAnimation from 'components/../../public/lottie/logo.json';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
+import { useEffect, useState } from 'react';
 
 const Id = () => {
   const { id, orgSlug } = useParams();
+  const client = useGQLClient();
+  const [project, setProject] = useState<Project | null>(null);
 
-  const handleSetupDomain = () => {
+  const handleSetupDomain = async () => {
-    //TODO: Implement this
+    if (id) {
+      // console.log('id', id);
+      // console.log('getting project for id', id);
+      const project = await client.getProject(id);
+      // console.log('project found:', project);
+      if (project && project.project) {
+        // console.log('project:', project.project);
+        setProject(project.project);
+      }
+    } else {
+      window.location.href = '/';
+    }
   };
+
+  useEffect(() => {
+    handleSetupDomain();
+  });
+
   return (
+    <>
+      {project ? (
         <div className="flex flex-col gap-8 lg:gap-11 max-w-[522px] mx-auto py-6 lg:py-12">
           {/* Icon */}
           <div className="flex justify-center">
@@ -35,14 +58,13 @@ const Id = () => {
               <Button
                 className="no-underline text-elements-link"
                 // TODO: use dynamic value
-            href="https://www.iglootools.snowballtools.xyz"
+                href={project ? `https://${project.subDomain}` : ''}
                 as="a"
                 variant="link-emphasized"
                 external
                 leftIcon={<LinkChainIcon />}
               >
-            {/* // TODO: use dynamic value */}
+                {project.subDomain}
-            www.iglootools.snowballtools.xyz
               </Button>
             </p>
           </div>
@@ -73,7 +95,11 @@ const Id = () => {
                       custom domain.
                     </p>
                   </div>
-              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
+                  <Button
+                    onClick={handleSetupDomain}
+                    variant="tertiary"
+                    size="sm"
+                  >
                     Setup domain
                   </Button>
                 </div>
@@ -103,6 +129,10 @@ const Id = () => {
             </div>
           </div>
         </div>
+      ) : (
+        <></>
+      )}
+    </>
   );
 };
 

packages/frontend/src/pages/org-slug/projects/create/template/index.tsx

@@ -11,7 +11,10 @@ import { Template } from '../../../../../types/types';
 import { Heading } from 'components/shared/Heading';
 import { Input } from 'components/shared/Input';
 import { Select, SelectOption } from 'components/shared/Select';
-import { ArrowRightCircleFilledIcon } from 'components/shared/CustomIcon';
+import {
+  ArrowRightCircleFilledIcon,
+  LoadingIcon,
+} from 'components/shared/CustomIcon';
 import { Checkbox } from 'components/shared/Checkbox';
 import { Button } from 'components/shared/Button';
 import { useToast } from 'components/shared/Toast';
@@ -50,36 +53,22 @@ const CreateRepo = () => {
         assert(template.repoFullName, 'Template URL not provided');
         const [owner, repo] = template.repoFullName.split('/');
 
-        // TODO: Handle this functionality in backend
+        setIsLoading(true);
-        const gitRepo = await octokit?.rest.repos.createUsingTemplate({
+
-          template_owner: owner,
+        const { addProjectFromTemplate } = await client.addProjectFromTemplate(
-          template_repo: repo,
+          orgSlug!,
+          {
+            templateOwner: owner,
+            templateRepo: repo,
             owner: data.account,
             name: data.repoName,
-          include_all_branches: false,
+            isPrivate: false,
-          private: data.isPrivate,
+          },
-        });
+        );
 
-        if (!gitRepo) {
+        navigate(
-          return;
+          `deploy?projectId=${addProjectFromTemplate.id}&templateId=${template.id}`,
-        }
+        );
-
-        // Refetch to always get correct default branch
-        const templateRepo = await octokit.rest.repos.get({
-          owner: template.repoFullName.split('/')[0],
-          repo: template.repoFullName.split('/')[1],
-        });
-        const prodBranch = templateRepo.data.default_branch ?? 'main';
-
-        const { addProject } = await client.addProject(orgSlug!, {
-          name: `${gitRepo.data.owner!.login}-${gitRepo.data.name}`,
-          prodBranch,
-          repository: gitRepo.data.full_name,
-          // TODO: Set selected template
-          template: 'webapp',
-        });
-
-        navigate(`deploy?projectId=${addProject.id}&templateId=${template.id}`);
       } catch (err) {
         setIsLoading(false);
 
@@ -206,7 +195,13 @@ const CreateRepo = () => {
             {...buttonSize}
             type="submit"
             disabled={!Boolean(template.repoFullName) || isLoading}
-            rightIcon={<ArrowRightCircleFilledIcon />}
+            rightIcon={
+              isLoading ? (
+                <LoadingIcon className="animate-spin" />
+              ) : (
+                <ArrowRightCircleFilledIcon />
+              )
+            }
           >
             Deploy
           </Button>

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -1,14 +1,11 @@
 import { useEffect, useState } from 'react';
-import { Domain, DomainStatus } from 'gql-client';
 import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
-import { useOctokit } from '../../../../context/OctokitContext';
+import { useOctokit } from 'context/OctokitContext';
 import { GitCommitWithBranch, OutletContextType } from '../../../../types';
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
-import { Button } from 'components/shared/Button';
+import { Button, Heading, Avatar, Tag } from 'components/shared';
-import { Heading } from 'components/shared/Heading';
-import { Avatar } from 'components/shared/Avatar';
 import { getInitials } from 'utils/geInitials';
 import {
   BranchStrokeIcon,
@@ -18,12 +15,12 @@ import {
   GithubStrokeIcon,
   GlobeIcon,
   LinkIcon,
+  CalendarDaysIcon,
 } from 'components/shared/CustomIcon';
-import { Tag } from 'components/shared/Tag';
 import { Activity } from 'components/projects/project/overview/Activity';
 import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
-import { CalendarDaysIcon } from 'components/shared/CustomIcon/CalendarDaysIcon';
 import { relativeTimeMs } from 'utils/time';
+import { Domain, DomainStatus } from 'gql-client';
 
 const COMMITS_PER_PAGE = 4;
 
@@ -131,9 +128,12 @@ const OverviewTabPanel = () => {
             <Heading className="text-lg leading-6 font-medium truncate">
               {project.name}
             </Heading>
-            <p className="text-sm text-elements-low-em tracking-tight truncate">
+            <a
+              href={`https://${project.subDomain}`}
+              className="text-sm text-elements-low-em tracking-tight truncate"
+            >
               {project.subDomain}
-            </p>
+            </a>
           </div>
         </div>
         <OverviewInfo label="Domain" icon={<GlobeIcon />}>

packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx

@@ -1,14 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { useParams } from 'react-router-dom';
-import { Environment, EnvironmentVariable } from 'gql-client';
 
 import { Collapse } from '@snowballtools/material-tailwind-react-fork';
 
 import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
 import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables';
-import { useGQLClient } from '../../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { EnvironmentVariablesFormValues } from '../../../../../types';
 import HorizontalLine from 'components/HorizontalLine';
 import { Heading } from 'components/shared/Heading';
@@ -17,10 +15,13 @@ import { Checkbox } from 'components/shared/Checkbox';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
+import { useToast } from 'components/shared/Toast';
+import { Environment, EnvironmentVariable } from 'gql-client';
 
 export const EnvironmentVariablesTabPanel = () => {
   const { id } = useParams();
   const client = useGQLClient();
+  const { toast, dismiss } = useToast();
 
   const [environmentVariables, setEnvironmentVariables] = useState<
     EnvironmentVariable[]
@@ -118,13 +119,25 @@ export const EnvironmentVariablesTabPanel = () => {
 
         fetchEnvironmentVariables(id);
 
-        toast.success(
+        toast({
+          id:
+            createFormData.variables.length > 1
+              ? 'env_variable_added'
+              : 'env_variables_added',
+          title:
             createFormData.variables.length > 1
               ? `${createFormData.variables.length} variables added`
               : `Variable added`,
-        );
+          variant: 'success',
+          onDismiss: dismiss,
+        });
       } else {
-        toast.error('Environment variables not added');
+        toast({
+          id: 'env_variables_not_added',
+          title: 'Environment variables not added',
+          variant: 'error',
+          onDismiss: dismiss,
+        });
       }
     },
     [id, client],

packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx

@@ -1,12 +1,12 @@
-import toast from 'react-hot-toast';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
-import { useGQLClient } from '../../../../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { Table } from 'components/shared/Table';
 import { Button } from 'components/shared/Button';
 import { InlineNotification } from 'components/shared/InlineNotification';
 import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
+import { useToast } from 'components/shared/Toast';
 
 const Config = () => {
   const { id, orgSlug } = useParams();
@@ -14,15 +14,26 @@ const Config = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const primaryDomainName = searchParams.get('name');
+  const { toast, dismiss } = useToast();
 
   const handleSubmitDomain = async () => {
     if (primaryDomainName === null) {
-      toast.error('Cannot resolve domain name');
+      toast({
+        id: 'unresolvable_domain_name',
+        title: 'Cannot resolve domain name',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
       return;
     }
 
     if (id === undefined) {
-      toast.error('Cannot find project');
+      toast({
+        id: 'domain_cannot_find_project',
+        title: 'Cannot find project',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
       return;
     }
 
@@ -31,10 +42,20 @@ const Config = () => {
     });
 
     if (isAdded) {
-      toast.success('Domain added successfully');
+      toast({
+        id: 'domain_added_successfully',
+        title: 'Domain added successfully',
+        variant: 'success',
+        onDismiss: dismiss,
+      });
       navigate(`/${orgSlug}/projects/${id}/settings/domains`);
     } else {
-      toast.error('Error adding domain');
+      toast({
+        id: 'generic_error_adding_domain',
+        title: 'Error adding domaint',
+        variant: 'error',
+        onDismiss: dismiss,
+      });
     }
   };
 

packages/frontend/src/stories/Components/ProjectSearchBar.stories.tsx

@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import { ProjectSearchBar } from 'components/projects/ProjectSearchBar';
+
+const meta: Meta<typeof ProjectSearchBar> = {
+  title: 'Components/ProjectSearchBar',
+  component: ProjectSearchBar,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: {
+      action: 'change',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProjectSearchBar>;
+
+export const Default: Story = {};

packages/frontend/src/stories/MockStoriesData.ts

@@ -11,6 +11,7 @@ import {
   DomainStatus,
   Domain,
   Environment,
+  Permission,
 } from 'gql-client';
 
 export const user: User = {
@@ -44,7 +45,7 @@ export const organization: Organization = {
 export const member: ProjectMember = {
   id: '1',
   member: user,
-  permissions: [],
+  permissions: [Permission.Edit],
   isPending: false,
   createdAt: '2021-08-01T00:00:00.000Z',
   updatedAt: '2021-08-01T00:00:00.000Z',
@@ -70,7 +71,7 @@ export const environmentVariable1: EnvironmentVariable = {
 
 export const domain0: Domain = {
   id: '1',
-  name: 'Domain',
+  name: 'domain.com',
   createdAt: '2021-08-01T00:00:00.000Z',
   updatedAt: '2021-08-01T00:00:00.000Z',
   branch: 'Branch',
@@ -78,6 +79,16 @@ export const domain0: Domain = {
   redirectTo: null,
 };
 
+export const domain1: Domain = {
+  id: '2',
+  name: 'www.domain.com',
+  createdAt: '2021-08-01T00:00:00.000Z',
+  updatedAt: '2021-08-01T00:00:00.000Z',
+  branch: 'Branch',
+  status: DomainStatus.Live,
+  redirectTo: domain0,
+};
+
 export const deployment0: Deployment = {
   id: '1',
   url: 'https://deployment.com',

packages/frontend/src/stories/Project/Settings/DomainCard.stories.tsx

@@ -0,0 +1,48 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import DomainCard from 'components/projects/project/settings/DomainCard';
+import { domain0, domain1, project } from '../../MockStoriesData';
+
+const meta: Meta<typeof DomainCard> = {
+  title: 'Project/Settings/DomainCard',
+  component: DomainCard,
+  tags: ['autodocs'],
+  argTypes: {
+    domains: {
+      control: {
+        type: 'object',
+      },
+    },
+    domain: {
+      control: {
+        type: 'object',
+      },
+    },
+    branches: {
+      control: {
+        type: 'object',
+      },
+    },
+    project: {
+      control: {
+        type: 'object',
+      },
+    },
+    onUpdate: {
+      action: 'update',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DomainCard>;
+
+export const Default: Story = {
+  args: {
+    domains: [domain0, domain1],
+    domain: domain0,
+    branches: ['main'],
+    project: project,
+  },
+};

packages/frontend/src/stories/Project/Settings/EditDomainDialog.stories.tsx

@@ -0,0 +1,43 @@
+import { StoryObj, Meta } from '@storybook/react';
+
+import EditDomainDialog from 'components/projects/project/settings/EditDomainDialog';
+
+const meta: Meta<typeof EditDomainDialog> = {
+  title: 'Components/EditDomainDialog',
+  component: EditDomainDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    domains: {
+      control: {
+        type: 'object',
+      },
+    },
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    handleOpen: {
+      action: 'open',
+    },
+    domain: {
+      control: {
+        type: 'object',
+      },
+    },
+    branches: {
+      control: {
+        type: 'object',
+      },
+    },
+    onUpdate: {
+      action: 'update',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EditDomainDialog>;
+
+export const Default: Story = {};

packages/frontend/src/stories/Project/Settings/WebhookCard.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import WebhookCard from 'components/projects/project/settings/WebhookCard';
+
+const meta: Meta<typeof WebhookCard> = {
+  title: 'Project/Settings/WebhookCard',
+  component: WebhookCard,
+  tags: ['autodocs'],
+  argTypes: {
+    webhookUrl: {
+      control: {
+        type: 'text',
+      },
+    },
+    onDelete: {
+      action: 'delete',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WebhookCard>;
+
+export const Default: Story = {
+  args: {
+    webhookUrl: 'https://api.retool.com',
+  },
+};

packages/gql-client/dist/index.d.mts

@@ -185,6 +185,9 @@ type RemoveEnvironmentVariableResponse = {
 type UpdateDeploymentToProdResponse = {
     updateDeploymentToProd: boolean;
 };
+type AddProjectFromTemplateResponse = {
+    addProjectFromTemplate: Project;
+};
 type AddProjectResponse = {
     addProject: Project;
 };
@@ -200,6 +203,13 @@ type DeleteProjectResponse = {
 type DeleteDomainResponse = {
     deleteDomain: boolean;
 };
+type AddProjectFromTemplateInput = {
+    templateOwner: string;
+    templateRepo: string;
+    owner: string;
+    name: string;
+    isPrivate: boolean;
+};
 type AddProjectInput = {
     name: string;
     repository: string;
@@ -267,6 +277,7 @@ declare class GQLClient {
     updateEnvironmentVariable(environmentVariableId: string, data: UpdateEnvironmentVariableInput): Promise<UpdateEnvironmentVariableResponse>;
     removeEnvironmentVariable(environmentVariableId: string): Promise<RemoveEnvironmentVariableResponse>;
     updateDeploymentToProd(deploymentId: string): Promise<UpdateDeploymentToProdResponse>;
+    addProjectFromTemplate(organizationSlug: string, data: AddProjectFromTemplateInput): Promise<AddProjectFromTemplateResponse>;
     addProject(organizationSlug: string, data: AddProjectInput): Promise<AddProjectResponse>;
     updateProject(projectId: string, data: UpdateProjectInput): Promise<UpdateProjectResponse>;
     updateDomain(domainId: string, data: UpdateDomainInput): Promise<UpdateDomainResponse>;
@@ -281,4 +292,4 @@ declare class GQLClient {
     unauthenticateGithub(): Promise<UnauthenticateGitHubResponse>;
 }
 
-export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };
+export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectFromTemplateInput, type AddProjectFromTemplateResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };

packages/gql-client/dist/index.d.ts

@@ -185,6 +185,9 @@ type RemoveEnvironmentVariableResponse = {
 type UpdateDeploymentToProdResponse = {
     updateDeploymentToProd: boolean;
 };
+type AddProjectFromTemplateResponse = {
+    addProjectFromTemplate: Project;
+};
 type AddProjectResponse = {
     addProject: Project;
 };
@@ -200,6 +203,13 @@ type DeleteProjectResponse = {
 type DeleteDomainResponse = {
     deleteDomain: boolean;
 };
+type AddProjectFromTemplateInput = {
+    templateOwner: string;
+    templateRepo: string;
+    owner: string;
+    name: string;
+    isPrivate: boolean;
+};
 type AddProjectInput = {
     name: string;
     repository: string;
@@ -267,6 +277,7 @@ declare class GQLClient {
     updateEnvironmentVariable(environmentVariableId: string, data: UpdateEnvironmentVariableInput): Promise<UpdateEnvironmentVariableResponse>;
     removeEnvironmentVariable(environmentVariableId: string): Promise<RemoveEnvironmentVariableResponse>;
     updateDeploymentToProd(deploymentId: string): Promise<UpdateDeploymentToProdResponse>;
+    addProjectFromTemplate(organizationSlug: string, data: AddProjectFromTemplateInput): Promise<AddProjectFromTemplateResponse>;
     addProject(organizationSlug: string, data: AddProjectInput): Promise<AddProjectResponse>;
     updateProject(projectId: string, data: UpdateProjectInput): Promise<UpdateProjectResponse>;
     updateDomain(domainId: string, data: UpdateDomainInput): Promise<UpdateDomainResponse>;
@@ -281,4 +292,4 @@ declare class GQLClient {
     unauthenticateGithub(): Promise<UnauthenticateGitHubResponse>;
 }
 
-export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };
+export { type AddDomainInput, type AddDomainResponse, type AddEnvironmentVariableInput, type AddEnvironmentVariablesResponse, type AddProjectFromTemplateInput, type AddProjectFromTemplateResponse, type AddProjectInput, type AddProjectMemberInput, type AddProjectMemberResponse, type AddProjectResponse, type AuthenticateGitHubResponse, type DeleteDeploymentResponse, type DeleteDomainResponse, type DeleteProjectResponse, type Deployment, DeploymentStatus, type Domain, DomainStatus, Environment, type EnvironmentVariable, type FilterDomainInput, GQLClient, type GetDeploymentsResponse, type GetDomainsResponse, type GetEnvironmentVariablesResponse, type GetOrganizationsResponse, type GetProjectMembersResponse, type GetProjectResponse, type GetProjectsInOrganizationResponse, type GetUserResponse, type GraphQLConfig, type Organization, type OrganizationMember, type OrganizationProject, Permission, type Project, type ProjectMember, type RedeployToProdResponse, type RemoveEnvironmentVariableResponse, type RemoveProjectMemberResponse, Role, type RollbackDeploymentResponse, type SearchProjectsResponse, type UnauthenticateGitHubResponse, type UpdateDeploymentToProdResponse, type UpdateDomainInput, type UpdateDomainResponse, type UpdateEnvironmentVariableInput, type UpdateEnvironmentVariableResponse, type UpdateProjectInput, type UpdateProjectMemberInput, type UpdateProjectMemberResponse, type UpdateProjectResponse, type User };

packages/gql-client/dist/index.js

@@ -287,8 +287,14 @@ mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
   }
 `;
 var updateEnvironmentVariable = import_client2.gql`
-mutation ($environmentVariableId: String!, $data: UpdateEnvironmentVariableInput!) {
+  mutation (
-  updateEnvironmentVariable(environmentVariableId: $environmentVariableId, data: $data)
+    $environmentVariableId: String!
+    $data: UpdateEnvironmentVariableInput!
+  ) {
+    updateEnvironmentVariable(
+      environmentVariableId: $environmentVariableId
+      data: $data
+    )
   }
 `;
 var removeEnvironmentVariable = import_client2.gql`
@@ -301,20 +307,30 @@ mutation ($deploymentId: String!) {
     updateDeploymentToProd(deploymentId: $deploymentId)
   }
 `;
+var addProjectFromTemplate = import_client2.gql`
+  mutation ($organizationSlug: String!, $data: AddProjectFromTemplateInput) {
+    addProjectFromTemplate(organizationSlug: $organizationSlug, data: $data) {
+      id
+    }
+  }
+`;
 var addProject = import_client2.gql`
   mutation ($organizationSlug: String!, $data: AddProjectInput) {
     addProject(organizationSlug: $organizationSlug, data: $data) {
       id
     }
-}`;
+  }
+`;
 var updateProjectMutation = import_client2.gql`
   mutation ($projectId: String!, $data: UpdateProjectInput) {
     updateProject(projectId: $projectId, data: $data)
-}`;
+  }
+`;
 var updateDomainMutation = import_client2.gql`
   mutation ($domainId: String!, $data: UpdateDomainInput!) {
     updateDomain(domainId: $domainId, data: $data)
-}`;
+  }
+`;
 var redeployToProd = import_client2.gql`
   mutation ($deploymentId: String!) {
     redeployToProd(deploymentId: $deploymentId)
@@ -328,7 +344,8 @@ mutation ($projectId: String!) {
 var deleteDomain = import_client2.gql`
   mutation ($domainId: String!) {
     deleteDomain(domainId: $domainId)
-}`;
+  }
+`;
 var rollbackDeployment = import_client2.gql`
   mutation ($projectId: String!, $deploymentId: String!) {
     rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
@@ -349,11 +366,13 @@ mutation ($code: String!) {
     authenticateGitHub(code: $code) {
       token
     }
-}`;
+  }
+`;
 var unauthenticateGitHub = import_client2.gql`
   mutation {
     unauthenticateGitHub
-}`;
+  }
+`;
 
 // src/client.ts
 var defaultOptions = {
@@ -538,6 +557,18 @@ var GQLClient = class {
       return data;
     });
   }
+  addProjectFromTemplate(organizationSlug, data) {
+    return __async(this, null, function* () {
+      const result = yield this.client.mutate({
+        mutation: addProjectFromTemplate,
+        variables: {
+          organizationSlug,
+          data
+        }
+      });
+      return result.data;
+    });
+  }
   addProject(organizationSlug, data) {
     return __async(this, null, function* () {
       const result = yield this.client.mutate({

packages/gql-client/dist/index.mjs

@@ -260,8 +260,14 @@ mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
   }
 `;
 var updateEnvironmentVariable = gql2`
-mutation ($environmentVariableId: String!, $data: UpdateEnvironmentVariableInput!) {
+  mutation (
-  updateEnvironmentVariable(environmentVariableId: $environmentVariableId, data: $data)
+    $environmentVariableId: String!
+    $data: UpdateEnvironmentVariableInput!
+  ) {
+    updateEnvironmentVariable(
+      environmentVariableId: $environmentVariableId
+      data: $data
+    )
   }
 `;
 var removeEnvironmentVariable = gql2`
@@ -274,20 +280,30 @@ mutation ($deploymentId: String!) {
     updateDeploymentToProd(deploymentId: $deploymentId)
   }
 `;
+var addProjectFromTemplate = gql2`
+  mutation ($organizationSlug: String!, $data: AddProjectFromTemplateInput) {
+    addProjectFromTemplate(organizationSlug: $organizationSlug, data: $data) {
+      id
+    }
+  }
+`;
 var addProject = gql2`
   mutation ($organizationSlug: String!, $data: AddProjectInput) {
     addProject(organizationSlug: $organizationSlug, data: $data) {
       id
     }
-}`;
+  }
+`;
 var updateProjectMutation = gql2`
   mutation ($projectId: String!, $data: UpdateProjectInput) {
     updateProject(projectId: $projectId, data: $data)
-}`;
+  }
+`;
 var updateDomainMutation = gql2`
   mutation ($domainId: String!, $data: UpdateDomainInput!) {
     updateDomain(domainId: $domainId, data: $data)
-}`;
+  }
+`;
 var redeployToProd = gql2`
   mutation ($deploymentId: String!) {
     redeployToProd(deploymentId: $deploymentId)
@@ -301,7 +317,8 @@ mutation ($projectId: String!) {
 var deleteDomain = gql2`
   mutation ($domainId: String!) {
     deleteDomain(domainId: $domainId)
-}`;
+  }
+`;
 var rollbackDeployment = gql2`
   mutation ($projectId: String!, $deploymentId: String!) {
     rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
@@ -322,11 +339,13 @@ mutation ($code: String!) {
     authenticateGitHub(code: $code) {
       token
     }
-}`;
+  }
+`;
 var unauthenticateGitHub = gql2`
   mutation {
     unauthenticateGitHub
-}`;
+  }
+`;
 
 // src/client.ts
 var defaultOptions = {
@@ -511,6 +530,18 @@ var GQLClient = class {
       return data;
     });
   }
+  addProjectFromTemplate(organizationSlug, data) {
+    return __async(this, null, function* () {
+      const result = yield this.client.mutate({
+        mutation: addProjectFromTemplate,
+        variables: {
+          organizationSlug,
+          data
+        }
+      });
+      return result.data;
+    });
+  }
   addProject(organizationSlug, data) {
     return __async(this, null, function* () {
       const result = yield this.client.mutate({

packages/gql-client/src/client.ts

@@ -228,6 +228,21 @@ export class GQLClient {
     return data;
   }
 
+  async addProjectFromTemplate(
+    organizationSlug: string,
+    data: types.AddProjectFromTemplateInput
+  ): Promise<types.AddProjectFromTemplateResponse> {
+    const result = await this.client.mutate({
+      mutation: mutations.addProjectFromTemplate,
+      variables: {
+        organizationSlug,
+        data,
+      },
+    });
+
+    return result.data;
+  }
+
   async addProject(
     organizationSlug: string,
     data: types.AddProjectInput

packages/gql-client/src/mutations.ts

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import { gql } from "@apollo/client";
 
 export const removeProjectMember = gql`
   mutation ($projectMemberId: String!) {
@@ -25,8 +25,14 @@ mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
 `;
 
 export const updateEnvironmentVariable = gql`
-mutation ($environmentVariableId: String!, $data: UpdateEnvironmentVariableInput!) {
+  mutation (
-  updateEnvironmentVariable(environmentVariableId: $environmentVariableId, data: $data)
+    $environmentVariableId: String!
+    $data: UpdateEnvironmentVariableInput!
+  ) {
+    updateEnvironmentVariable(
+      environmentVariableId: $environmentVariableId
+      data: $data
+    )
   }
 `;
 
@@ -42,22 +48,33 @@ mutation ($deploymentId: String!) {
   }
 `;
 
+export const addProjectFromTemplate = gql`
+  mutation ($organizationSlug: String!, $data: AddProjectFromTemplateInput) {
+    addProjectFromTemplate(organizationSlug: $organizationSlug, data: $data) {
+      id
+    }
+  }
+`;
+
 export const addProject = gql`
   mutation ($organizationSlug: String!, $data: AddProjectInput) {
     addProject(organizationSlug: $organizationSlug, data: $data) {
       id
     }
-}`;
+  }
+`;
 
 export const updateProjectMutation = gql`
   mutation ($projectId: String!, $data: UpdateProjectInput) {
     updateProject(projectId: $projectId, data: $data)
-}`;
+  }
+`;
 
 export const updateDomainMutation = gql`
   mutation ($domainId: String!, $data: UpdateDomainInput!) {
     updateDomain(domainId: $domainId, data: $data)
-}`;
+  }
+`;
 
 export const redeployToProd = gql`
   mutation ($deploymentId: String!) {
@@ -74,7 +91,8 @@ mutation ($projectId: String!) {
 export const deleteDomain = gql`
   mutation ($domainId: String!) {
     deleteDomain(domainId: $domainId)
-}`;
+  }
+`;
 
 export const rollbackDeployment = gql`
   mutation ($projectId: String!, $deploymentId: String!) {
@@ -99,9 +117,11 @@ mutation ($code: String!) {
     authenticateGitHub(code: $code) {
       token
     }
-}`;
+  }
+`;
 
 export const unauthenticateGitHub = gql`
   mutation {
     unauthenticateGitHub
-}`;
+  }
+`;

packages/gql-client/src/types.ts

@@ -1,298 +1,311 @@
+import { addProjectFromTemplate } from "./mutations";
 // Note: equivalent to types present in GQL schema
 
 export enum Role {
-  Owner = 'Owner',
+  Owner = "Owner",
-  Maintainer = 'Maintainer',
+  Maintainer = "Maintainer",
-  Reader = 'Reader',
+  Reader = "Reader",
 }
 
 export enum Permission {
-  View = 'View',
+  View = "View",
-  Edit = 'Edit',
+  Edit = "Edit",
 }
 
 export enum Environment {
-  Production = 'Production',
+  Production = "Production",
-  Preview = 'Preview',
+  Preview = "Preview",
-  Development = 'Development',
+  Development = "Development",
 }
 
 export enum DeploymentStatus {
-  Building = 'Building',
+  Building = "Building",
-  Ready = 'Ready',
+  Ready = "Ready",
-  Error = 'Error',
+  Error = "Error",
-  Deleting = 'Deleting'
+  Deleting = "Deleting",
 }
 
 export enum DomainStatus {
-  Live = 'Live',
+  Live = "Live",
-  Pending = 'Pending',
+  Pending = "Pending",
 }
 
 export type EnvironmentVariable = {
-  id: string
+  id: string;
-  environment: Environment
+  environment: Environment;
-  key: string
+  key: string;
-  value: string
+  value: string;
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-}
+};
 
 export type Domain = {
-  id: string
+  id: string;
-  branch: string
+  branch: string;
-  name: string
+  name: string;
-  status: DomainStatus
+  status: DomainStatus;
-  redirectTo: Domain | null
+  redirectTo: Domain | null;
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-}
+};
 
 export type User = {
-  id: string
+  id: string;
-  name: string | null
+  name: string | null;
-  email: string
+  email: string;
-  isVerified: boolean
+  isVerified: boolean;
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-  gitHubToken: string | null
+  gitHubToken: string | null;
-}
+};
 
 export type Deployment = {
-  id: string
+  id: string;
-  domain: Domain
+  domain: Domain;
-  branch: string
+  branch: string;
-  commitHash: string
+  commitHash: string;
-  commitMessage: string
+  commitMessage: string;
-  url?: string
+  url?: string;
-  environment: Environment
+  environment: Environment;
-  isCurrent: boolean
+  isCurrent: boolean;
-  status: DeploymentStatus
+  status: DeploymentStatus;
-  createdBy: User
+  createdBy: User;
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-}
+};
 
 export type OrganizationMember = {
-  id: string
+  id: string;
-  member: User
+  member: User;
-  role: Role
+  role: Role;
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-}
+};
 
 export type ProjectMember = {
-  id: string
+  id: string;
-  member: User
+  member: User;
-  permissions: Permission[]
+  permissions: Permission[];
-  isPending: boolean
+  isPending: boolean;
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-}
+};
 
 export type OrganizationProject = {
-  id: string
+  id: string;
-  owner: User
+  owner: User;
-  deployments: Deployment[]
+  deployments: Deployment[];
-  name: string
+  name: string;
-  repository: string
+  repository: string;
-  prodBranch: string
+  prodBranch: string;
-  description: string
+  description: string;
-  template: string
+  template: string;
-  framework: string
+  framework: string;
-  webhooks: string[]
+  webhooks: string[];
-  members: ProjectMember[]
+  members: ProjectMember[];
-  environmentVariables: EnvironmentVariable[]
+  environmentVariables: EnvironmentVariable[];
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-}
+};
 
 export type Organization = {
-  id: string
+  id: string;
-  name: string
+  name: string;
-  slug: string
+  slug: string;
-  projects: OrganizationProject[]
+  projects: OrganizationProject[];
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-  members: OrganizationMember[]
+  members: OrganizationMember[];
-}
+};
 
 export type Project = {
-  id: string
+  id: string;
-  owner: User
+  owner: User;
-  deployments: Deployment[]
+  deployments: Deployment[];
-  name: string
+  name: string;
-  repository: string
+  repository: string;
-  prodBranch: string
+  prodBranch: string;
-  description: string
+  description: string;
-  template: string
+  template: string;
-  framework: string
+  framework: string;
-  webhooks: string[]
+  webhooks: string[];
-  members: ProjectMember[]
+  members: ProjectMember[];
-  environmentVariables: EnvironmentVariable[]
+  environmentVariables: EnvironmentVariable[];
-  createdAt: string
+  createdAt: string;
-  updatedAt: string
+  updatedAt: string;
-  organization: Organization
+  organization: Organization;
-  icon: string
+  icon: string;
-  subDomain: string
+  subDomain: string;
-}
+};
 
 export type GetProjectMembersResponse = {
-  projectMembers: ProjectMember[]
+  projectMembers: ProjectMember[];
-}
+};
 
 export type AddProjectMemberResponse = {
-  addProjectMember: boolean
+  addProjectMember: boolean;
-}
+};
 
 export type RemoveProjectMemberResponse = {
   removeProjectMember: boolean;
-}
+};
 
 export type UpdateProjectMemberResponse = {
   updateProjectMember: boolean;
-}
+};
 
 export type GetDeploymentsResponse = {
-  deployments: Deployment[]
+  deployments: Deployment[];
-}
+};
 
 export type GetEnvironmentVariablesResponse = {
-  environmentVariables: EnvironmentVariable[]
+  environmentVariables: EnvironmentVariable[];
-}
+};
 
 export type GetOrganizationsResponse = {
-  organizations: Organization[]
+  organizations: Organization[];
-}
+};
 
 export type GetUserResponse = {
-  user: User
+  user: User;
-}
+};
 
 export type GetProjectResponse = {
-  project: Project | null
+  project: Project | null;
-}
+};
 
 export type GetProjectsInOrganizationResponse = {
-  projectsInOrganization: Project[]
+  projectsInOrganization: Project[];
-}
+};
 
 export type GetDomainsResponse = {
-  domains: Domain[]
+  domains: Domain[];
-}
+};
 
 export type SearchProjectsResponse = {
-  searchProjects: Project[]
+  searchProjects: Project[];
-}
+};
 
 export type AddEnvironmentVariablesResponse = {
   addEnvironmentVariables: boolean;
-}
+};
 
 export type AddEnvironmentVariableInput = {
   environments: string[];
   key: string;
   value: string;
-}
+};
 
 export type UpdateEnvironmentVariableInput = {
   key: string;
   value: string;
-}
+};
 
 export type UpdateProjectMemberInput = {
   permissions: Permission[];
-}
+};
 
 export type AddProjectMemberInput = {
   email: string;
-  permissions: Permission[]
+  permissions: Permission[];
-}
+};
 
 export type UpdateEnvironmentVariableResponse = {
   updateEnvironmentVariable: boolean;
-}
+};
 
 export type RemoveEnvironmentVariableResponse = {
   removeEnvironmentVariable: boolean;
-}
+};
 
 export type UpdateDeploymentToProdResponse = {
   updateDeploymentToProd: boolean;
-}
+};
+
+export type AddProjectFromTemplateResponse = {
+  addProjectFromTemplate: Project;
+};
 
 export type AddProjectResponse = {
-  addProject: Project
+  addProject: Project;
-}
+};
 
 export type UpdateProjectResponse = {
   updateProject: boolean;
-}
+};
 
 export type UpdateDomainResponse = {
   updateDomain: boolean;
-}
+};
 
 export type DeleteProjectResponse = {
   deleteProject: boolean;
-}
+};
 
 export type DeleteDomainResponse = {
   deleteDomain: boolean;
-}
+};
+
+export type AddProjectFromTemplateInput = {
+  templateOwner: string;
+  templateRepo: string;
+  owner: string;
+  name: string;
+  isPrivate: boolean;
+};
 
 export type AddProjectInput = {
   name: string;
   repository: string;
   prodBranch: string;
   template?: string;
-}
+};
 
 export type UpdateProjectInput = {
-  name?: string
+  name?: string;
-  description?: string
+  description?: string;
-  prodBranch?: string
+  prodBranch?: string;
-  webhooks?: string[]
+  webhooks?: string[];
-  organizationId?: string
+  organizationId?: string;
-}
+};
 
 export type UpdateDomainInput = {
   name?: string;
   branch?: string;
   redirectToId?: string | null;
-}
+};
 
 export type RedeployToProdResponse = {
-  redeployToProd: boolean
+  redeployToProd: boolean;
-}
+};
 
 export type RollbackDeploymentResponse = {
-  rollbackDeployment: boolean
+  rollbackDeployment: boolean;
-}
+};
 
 export type DeleteDeploymentResponse = {
-  deleteDeployment: boolean
+  deleteDeployment: boolean;
-}
+};
 
 export type AddDomainInput = {
-  name: string
+  name: string;
-}
+};
 
 export type FilterDomainInput = {
-  branch?: string
+  branch?: string;
-  status?: DomainStatus
+  status?: DomainStatus;
-}
+};
 
 export type AddDomainResponse = {
-  addDomain: true
+  addDomain: true;
-}
+};
 
 export type AuthenticateGitHubResponse = {
   authenticateGitHub: {
-    token: string
+    token: string;
-  }
+  };
-}
+};
 
 export type UnauthenticateGitHubResponse = {
-  unauthenticateGitHub: boolean
+  unauthenticateGitHub: boolean;
-}
+};

yarn.lock

@@ -11264,11 +11264,6 @@ globby@11.1.0, globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-goober@^2.1.10:
-  version "2.1.14"
-  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
-  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
-
 google-protobuf@^3.19.4:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
@@ -15328,13 +15323,6 @@ react-hook-form@^7.49.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.3.tgz#7486dd2d52280b6b28048c099a98d2545931cab3"
   integrity sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==
 
-react-hot-toast@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
-  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
-  dependencies:
-    goober "^2.1.10"
-
 react-inspector@6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-6.0.2.tgz#aa3028803550cb6dbd7344816d5c80bf39d07e9d"