Add newline to trigger re-build in CD

* v.0.0.9 staging

* fix: temp frontend deployment bug

README.md

@@ -1,220 +1,24 @@
 # snowballtools-base
 
-## Setup
+This is a [yarn workspace](https://yarnpkg.com/features/workspaces) monorepo for the dashboard.
 
-- Clone the `snowballtools-base` repo
+## Getting Started
 
-  ```bash
-  git clone git@github.com:snowball-tools/snowballtools-base.git
-  cd snowballtools-base
-  ```
+### Install dependencies
 
-- Install dependencies in root
+In the root of the project, run:
 
-  ```bash
-  yarn
-  ```
+```zsh
+yarn
+```
 
-- Build packages
+### Build backend
 
-  ```bash
-  yarn build --ignore frontend
-  ```
+```zsh
+yarn build --ignore frontend
+```
 
-Let us assume the following domains for backend and frontend
-  - Backend server: `api.snowballtools.com`
-  - Frontend app: `dashboard.snowballtools.com`
+### Environment variables, running the development server, and deployment
 
-- Configuration Files
+Follow the instructions in the README.md files of the [backend](packages/backend/README.md) and [frontend](packages/frontend/README.md) packages.
 
-  - For Backend:
-  
-    ```bash
-    cp packages/backend/environments/local.toml.example packages/backend/environments/local.toml
-    ```
-
-    - Production
-      
-      - Update the following in backend [config file](packages/backend/environments/local.toml)
-        
-        ```toml
-        [server]
-          ...
-          [server.session]
-            # Secret should be changed to a different random string
-            secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7sidnc382"
-            # Set URL of the frontend app
-            appOriginUrl = "https://dashboard.snowballtools.com"
-            # Set to true for session cookies to work behind proxy
-            trustProxy = true
-            # Set empty domain when using secure connection
-            domain = ""
-        ```
-      
-      - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
-        - [OAuth App Creation](https://github.com/organizations/<org>/settings/applications/new)
-          - Homepage URL: `https://dashboard.snowballtools.com`
-          - Authorization callback URL: `https://dashboard.snowballtools.com/organization/projects/create`
-          - Generate a new client secret after app is created
-      
-      - Set `gitHub.webhookUrl` in backend [config file](packages/backend/environments/local.toml)
-      
-        ```toml
-        [gitHub]
-          webhookUrl = "https://api.snowballtools.com"
-        ```
-      
-      - Let us assume domain for Laconicd to be `api.laconic.com` and set the following in backend [config file](packages/backend/environments/local.toml)
-      
-        ```toml
-        [registryConfig]
-          fetchDeploymentRecordDelay = 5000
-          # Use actual port for REST endpoint
-          restEndpoint = "http://api.laconic.com:1317"
-          # Use actual port for GQL endpoint
-          gqlEndpoint = "http://api.laconic.com:9473/api"
-          # Set private key of account to be used in Laconicd
-          privateKey = "0wtu92cd4f1y791ezpjwgzzazni4dmd3q3mzqc3t6i6r9v06ji784tey6hwmnn69"
-          # Set Bond ID to be used for publishing records
-          bondId = "8xk8c2pb61kajwixpm223zvptr2x2ncajq0vd998p6aqhvqqep2reu6pik245epf"
-          chainId = "laconic_9000-1"
-          # Set authority that is existing in the chain
-          authority = "laconic"
-          [registryConfig.fee]
-            amount = "200000"
-            denom = "aphoton"
-            gas = "750000"
-        ```
-
-    - Development
-    
-      - Set `gitHub.oAuth.clientId` and `gitHub.oAuth.clientSecret` in backend [config file](packages/backend/environments/local.toml)
-        - [OAuth App Creation](https://github.com/organizations/<org>/settings/applications/new)
-          - Homepage URL: `http://localhost:3000`
-          - Authorization callback URL: `http://localhost:3000/organization/projects/create`
-          - Generate a new client secret after app is created
-      
-      - Setup Laconicd
-        - Run the laconicd stack following this [doc](https://git.vdb.to/cerc-io/stack-orchestrator/src/branch/main/docs/laconicd-with-console.md)
-        - Get the private key and set `registryConfig.privateKey` in backend [config file](packages/backend/environments/local.toml)
-      
-          ```bash
-          laconic-so deployment --dir laconic-loaded-deployment exec laconicd "laconicd keys export mykey --unarmored-hex --unsafe"
-          # WARNING: The private key will be exported as an unarmored hexadecimal string. USE AT YOUR OWN RISK. Continue? [y/N]: y
-          # 754cca7b4b729a99d156913aea95366411d072856666e95ba09ef6c664357d81
-          ```
-
-        - Set authority in `registryConfig.authority` in backend [config file](packages/backend/environments/local.toml)
-
-        - Run the script to create bond, reserve the authority and set authority bond
-      
-          ```bash
-          yarn test:registry:init
-          # snowball:initialize-registry bondId: 6af0ab81973b93d3511ae79841756fb5da3fd2f70ea1279e81fae7c9b19af6c4 +0ms
-          ```
-      
-          - Get the bond id and set `registryConfig.bondId` in backend [config file](packages/backend/environments/local.toml)
-      
-      - Setup ngrok for GitHub webhooks
-        - [ngrok getting started](https://ngrok.com/docs/getting-started/)
-        - Start ngrok and point to backend server endpoint
-      
-          ```bash
-          ngrok http http://localhost:8000
-          ```
-      
-        - Look for the forwarding URL in ngrok
-      
-          ```bash
-          Forwarding                    https://19c1-61-95-158-116.ngrok-free.app -> http://localhost:8000
-          ```
-      
-        - Set `gitHub.webhookUrl` in backend [config file](packages/backend/environments/local.toml)
-      
-          ```toml
-          [gitHub]
-            webhookUrl = "https://19c1-61-95-158-116.ngrok-free.app"
-          ```
-
-  - For Frontend:
-  
-    ```bash
-    cp packages/frontend/.env.example packages/frontend/.env
-    ```
-
-    - Copy the GitHub OAuth app client ID from previous steps and set it in frontend [.env](packages/frontend/.env) file
-
-      ```env
-      VITE_GITHUB_CLIENT_ID = <CLIENT_ID>
-      ```
-    
-    - Set `VITE_GITHUB_PWA_TEMPLATE_REPO` and `VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO` in [.env](packages/frontend/.env) file
-    
-      ```env
-      VITE_GITHUB_PWA_TEMPLATE_REPO = 'cerc-io/test-progressive-web-app'   # Set actual owner/name of the template repo that will be used for creating new repo
-      VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'cerc-io/image-upload-pwa-example'  # Set actual owner/name of the template repo that will be used for creating new repo
-      ```
-
-    - Production
-    
-      - Set the following values in [.env](packages/frontend/.env) file
-      
-        ```env
-        VITE_SERVER_URL = 'https://api.snowballtools.com'   # Backend server endpoint
-        ```
-      
-      - Sign in to [wallet connect](https://cloud.walletconnect.com/sign-in) to create a project ID
-        - Create a project and add information to use wallet connect SDK
-          - Add project name and select project type as `App`
-          - Set project home page URL to `https://dashboard.snowballtools.com`
-        - On creation of project, use the `Project ID` and set it in `VITE_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
-      
-        ```env
-        VITE_WALLET_CONNECT_ID = <PROJECT_ID>
-        ```
-      
-      - Build the React application
-      
-        ```bash
-        yarn build
-        ```
-      
-      - Use a web server for hosting static built files
-      
-        ```bash
-        python3 -m http.server -d build 3000
-        ```
-
-    - Development
-    
-      - Copy the graphQL endpoint from terminal and add the endpoint in the [.env](packages/frontend/.env) file present in `packages/frontend`
-      
-        ```env
-        VITE_SERVER_URL = 'http://localhost:8000'
-        ```
-      
-      - Sign in to [wallet connect](https://cloud.walletconnect.com/sign-in) to create a project ID.
-        - Create a project and add information to use wallet connect SDK
-          - Add project name and select project type as `App`
-          - Project home page URL is not required to be set
-        - On creation of project, use the `Project ID` and set it in `VITE_WALLET_CONNECT_ID` in [.env](packages/frontend/.env) file
-      
-        ```env
-        VITE_WALLET_CONNECT_ID = <Project_ID>
-        ```
-      
-      - The React application will be running in `http://localhost:3000/`
-
-## Development
-
-- Start the backend server
-
-  ```bash
-  yarn start:backend
-  ```
-
-- Start the frontend
-
-  ```bash
-  yarn start
-  ```

packages/backend/README.md

@@ -1 +1,76 @@
-# Backend for Snowball Tools
+# backend
+
+This backend is a [node.js](https://nodejs.org/) [express.js](https://expressjs.com/) [apollo server](https://www.apollographql.com/docs/apollo-server/) project in a [yarn workspace](https://yarnpkg.com/features/workspaces).
+
+## Getting Started
+
+### Install dependencies
+
+In the root of the project, run:
+
+```zsh
+yarn
+```
+
+### Build backend
+
+```zsh
+yarn build --ignore frontend
+```
+
+### Environment variables
+
+#### Local
+
+Copy the `envionments/local.toml.example` file to `envionments/local.toml`:
+
+```zsh
+cp envionments/local.toml.example envionments/local.toml
+```
+
+#### Staging environment variables
+
+In the deployment repository, update staging [staging/configmaps/config/prod.toml](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments/src/commit/318c2bc09f334dca79c3501838512749f9431bf1/deployments/staging/configmaps/config/prod.toml)
+
+#### Production environment variables
+
+In the deployment repository, update production [production/configmaps/config/prod.toml](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments/src/commit/318c2bc09f334dca79c3501838512749f9431bf1/deployments/production/configmaps/config/prod.toml)
+
+### Run development server
+
+```zsh
+yarn start
+```
+
+## Deployment
+
+Clone the [deployer repository](https://git.vdb.to/cerc-io/snowballtools-base-api-deployments):
+
+```zsh
+git clone git@git.vdb.to:cerc-io/snowballtools-base-api-deployments.git
+```
+
+### Staging
+
+```zsh
+echo trigger >> .gitea/workflows/triggers/staging-deploy
+git commit -a -m "Deploy v0.0.8"  # replace with version number
+git push
+```
+
+### Production
+
+```zsh
+echo trigger >> .gitea/workflows/triggers/production-deploy
+git commit -a -m "Deploy v0.0.8" # replace with version number
+git push
+```
+
+### Deployment status
+
+Dumb for now
+
+- [Staging](https://snowballtools-base-api.staging.apps.snowballtools.com/staging/version)
+- [Production](https://snowballtools-base-api.apps.snowballtools.com/staging/version)
+
+Update version number manually in [routes/staging.ts](/packages/backend/src/routes/staging.ts)

packages/backend/environments/local.toml.example

@@ -3,7 +3,7 @@
   port = 8000
   gqlPath = "/graphql"
   [server.session]
-    secret = "p4yfpkqnddkui2iw7t6hbhwq74lbqs7bhobvmfhrowoi"
+    secret = ""
     appOriginUrl = "http://localhost:3000"
     trustProxy = false
     domain = "localhost"
@@ -17,6 +17,16 @@
     clientId = ""
     clientSecret = ""
 
+[google]
+  clientId = ""
+  clientSecret = ""
+
+[turnkey]
+  apiBaseUrl = "https://api.turnkey.com"
+  apiPrivateKey = ""
+  apiPublicKey = ""
+  defaultOrganizationId = ""
+
 [registryConfig]
   fetchDeploymentRecordDelay = 5000
   restEndpoint = "http://localhost:1317"

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/routes/staging.ts

@@ -3,7 +3,7 @@ import { Router } from 'express';
 const router = Router();
 
 router.get('/version', async (req, res) => {
-  return res.send({ version: '0.0.8' });
+  return res.send({ version: '0.0.9' });
 });
 
 export default router;

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/deployer/README.md

@@ -1,9 +1,11 @@
 # deployer
 
 - Install dependencies
+
   ```bash
   yarn
   ```
+
   ```bash
   brew install jq # if you do not have jq installed already
   ```
@@ -12,13 +14,13 @@
 
   - To deploy frontend app to `dashboard.staging.apps.snowballtools.com`
 
-    ```
+    ```bash
     ./deploy-frontend.staging.sh
     ```
   
   - To deploy frontend app to `dashboard.apps.snowballtools.com`
 
-    ```
+    ```bash
     ./deploy-frontend.sh
     ```
 
@@ -27,6 +29,7 @@
 ## Notes
 
 - Any config env can be updated in [records/application-deployment-request.yml](records/application-deployment-request.yml)
+
   ```yml
   record:
     ...
@@ -35,6 +38,7 @@
         LACONIC_HOSTED_CONFIG_app_server_url: https://snowballtools-base-api-001.apps.snowballtools.com
         ...
   ```
+
   - On changing `LACONIC_HOSTED_CONFIG_app_github_clientid`, the GitHub client ID and secret need to be changed in backend config too
 
 ## Troubleshoot
@@ -44,6 +48,7 @@
 
 - If deployment fails due to low bond balance
   - Check balances
+
     ```bash
     # Account balance
     yarn laconic cns account get
@@ -51,7 +56,9 @@
     # Bond balance
     yarn laconic cns bond get --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32
     ```
+
   - Command to refill bond
+
     ```bash
     yarn laconic cns bond refill --id 99c0e9aec0ac1b8187faa579be3b54f93fafb6060ac1fd29170b860df605be32 --type aphoton --quantity 10000000
     ```

packages/deployer/staging-records/application-deployment-request.yml

@@ -19,6 +19,6 @@ record:
       LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
       LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
   meta:
-    note: Added by Snowball @ Sat Jun 22 02:49:45 UTC 2024
+    note: Added by Snowball @ Mon Jun 24 23:51:48 UTC 2024
     repository: "https://git.vdb.to/cerc-io/snowballtools-base"
     repository_ref: 61e3e88a6c9d57e95441059369ee5a46f5c07601

packages/frontend/README.md

@@ -1,30 +1,65 @@
-# React + TypeScript + Vite
+# frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a [vite](https://vitejs.dev/) [react](https://reactjs.org/) [nextjs](https://nextjs.org/) project in a [yarn workspace](https://yarnpkg.com/features/workspaces).
 
-Currently, two official plugins are available:
+## Getting Started
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### Install dependencies
 
-## Expanding the ESLint configuration
+In the root of the project, run:
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-};
+```zsh
+yarn
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+### Build backend
+
+```zsh
+yarn build --ignore frontend
+```
+
+### Environment variables
+
+#### Local
+
+Copy the `.env.example` file to `.env`:
+
+```zsh
+cp .env.example .env
+```
+
+#### Staging environment variables
+
+Change in [deployer/deploy-frontend.staging.sh](/packages/deployer/deploy-frontend.staging.sh)
+
+#### Production environment variables
+
+Change in [deployer/deploy-frontend.sh](/packages/deployer/deploy-frontend.sh)
+
+### Run development server
+
+```zsh
+yarn dev
+```
+
+## Deployment
+
+From the root of the project,
+
+- check if the [gittea repository mirror](https://git.vdb.to/cerc-io/snowballtools-base) is up to date
+
+### Staging
+
+```zsh
+cd packages/deployer && ./deploy-frontend.staging.sh
+```
+
+### Production
+
+```zsh
+cd packages/deployer && ./deploy-frontend.sh
+```
+
+### Deployment status
+
+Check the status of the deployment [here](https://webapp-deployer.apps.snowballtools.com)

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,25 +27,30 @@ export const ProjectSearchBarDialog = ({
   const client = useGQLClient();
   const navigate = useNavigate();
 
-  const { getInputProps, getItemProps, inputValue, setInputValue } =
-    useCombobox({
-      items,
-      itemToString(item) {
-        return item ? item.name : '';
-      },
-      selectedItem,
-      onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
-        if (newSelectedItem) {
-          setSelectedItem(newSelectedItem);
-          onClickItem?.(newSelectedItem);
-          navigate(
-            `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
-          );
-        }
-      },
-    });
+  const {
+    getInputProps,
+    getItemProps,
+    getMenuProps,
+    inputValue,
+    setInputValue,
+  } = useCombobox({
+    items,
+    itemToString(item) {
+      return item ? item.name : '';
+    },
+    selectedItem,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+      if (newSelectedItem) {
+        setSelectedItem(newSelectedItem);
+        onClickItem?.(newSelectedItem);
+        navigate(
+          `/${newSelectedItem.organization.slug}/projects/${newSelectedItem.id}`,
+        );
+      }
+    },
+  });
 
-  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">
-              {items.length > 0
-                ? items.map((item, index) => (
-                    <>
-                      <div className="px-2 py-2">
-                        <p className="text-elements-mid-em text-xs font-medium">
-                          Suggestions
-                        </p>
-                      </div>
-                      <ProjectSearchBarItem
-                        key={item.id}
-                        item={item}
-                        {...getItemProps({ item, index })}
-                      />
-                    </>
-                  ))
-                : inputValue && <ProjectSearchBarEmpty />}
+            <div
+              className="flex flex-col gap-1 px-2 py-2"
+              {...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 />
+              )}
             </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">
-            <i>^</i> {domain.name}
-          </Typography>
-          <Chip
-            className="w-fit capitalize"
-            value={domain.status}
-            color={domain.status === DomainStatus.Live ? 'green' : 'orange'}
-            variant="ghost"
-            icon={<i>^</i>}
-          />
+          <Heading as="h6" className="flex-col">
+            {domain.name}{' '}
+            <Tag
+              type={
+                domain.status === DomainStatus.Live ? 'positive' : 'negative'
+              }
+              leftIcon={
+                domain.status === DomainStatus.Live ? (
+                  <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">
-      {webhookUrl}
+    <div className="flex justify-between w-full mb-3 gap-3">
+      <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/index.tsx

@@ -16,8 +16,7 @@ import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
 import { baseUrl } from 'utils/constants';
 
-// @ts-ignore
-console.log(`v-${__VERSION__}`);
+console.log(`v-0.0.9`);
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,

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 = () => {
-  return <div className="p-5">Settings page</div>;
-};
+import { Heading } from 'components/shared/Heading';
 
+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 { Badge } from 'components/shared/Badge';
+import { Heading, Badge, Button } from 'components/shared';
+import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
 
 const Projects = () => {
   const client = useGQLClient();
@@ -28,6 +26,7 @@ const Projects = () => {
   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">

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

@@ -11,98 +11,128 @@ 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 = () => {
-    //TODO: Implement this
+  const handleSetupDomain = async () => {
+    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 (
-    <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">
-        <Lottie animationData={logoAnimation} loop={false} size={40} />
-      </div>
-
-      {/* Heading */}
-      <div className="flex flex-col items-center gap-1.5">
-        <Heading as="h3" className="font-medium text-xl">
-          Project deployed successfully.
-        </Heading>
-        <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
-          Your project has been deployed at{' '}
-          <Button
-            className="no-underline text-elements-link"
-            // TODO: use dynamic value
-            href="https://www.iglootools.snowballtools.xyz"
-            as="a"
-            variant="link-emphasized"
-            external
-            leftIcon={<LinkChainIcon />}
-          >
-            {/* // TODO: use dynamic value */}
-            www.iglootools.snowballtools.xyz
-          </Button>
-        </p>
-      </div>
-
-      {/* Card */}
-      <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
-        {/* Trigger question */}
-        <div className="flex gap-2 justify-center items-center py-3">
-          <div className="h-5 w-5">
-            <QuestionMarkRoundFilledIcon size={18} />
+    <>
+      {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">
+            <Lottie animationData={logoAnimation} loop={false} size={40} />
           </div>
-          <Heading as="h5" className="font-sans font-medium text-sm">
-            {`Wondering what's next?`}
-          </Heading>
-        </div>
 
-        {/* CTA card */}
-        <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
-          <div className="flex gap-2">
-            <Badge variant="secondary">1</Badge>
-            <div className="space-y-3">
-              <div className="flex flex-col gap-1">
-                <Heading as="h6" className="text-sm font-sans">
-                  Add a custom domain
-                </Heading>
-                <p className="text-xs text-elements-low-em font-sans">
-                  Make it easy for your visitors to remember your URL with a
-                  custom domain.
-                </p>
-              </div>
-              <Button onClick={handleSetupDomain} variant="tertiary" size="sm">
-                Setup domain
+          {/* Heading */}
+          <div className="flex flex-col items-center gap-1.5">
+            <Heading as="h3" className="font-medium text-xl">
+              Project deployed successfully.
+            </Heading>
+            <p className="flex flex-col items-center lg:flex-row font-sans gap-0.5 lg:gap-2 text-sm text-elements-high-em">
+              Your project has been deployed at{' '}
+              <Button
+                className="no-underline text-elements-link"
+                // TODO: use dynamic value
+                href={project ? `https://${project.subDomain}` : ''}
+                as="a"
+                variant="link-emphasized"
+                external
+                leftIcon={<LinkChainIcon />}
+              >
+                {project.subDomain}
               </Button>
+            </p>
+          </div>
+
+          {/* Card */}
+          <div className="bg-base-bg-alternate rounded-xl shadow-inset w-full px-1 py-1">
+            {/* Trigger question */}
+            <div className="flex gap-2 justify-center items-center py-3">
+              <div className="h-5 w-5">
+                <QuestionMarkRoundFilledIcon size={18} />
+              </div>
+              <Heading as="h5" className="font-sans font-medium text-sm">
+                {`Wondering what's next?`}
+              </Heading>
+            </div>
+
+            {/* CTA card */}
+            <div className="bg-surface-card rounded-xl shadow-card-sm px-4 py-4">
+              <div className="flex gap-2">
+                <Badge variant="secondary">1</Badge>
+                <div className="space-y-3">
+                  <div className="flex flex-col gap-1">
+                    <Heading as="h6" className="text-sm font-sans">
+                      Add a custom domain
+                    </Heading>
+                    <p className="text-xs text-elements-low-em font-sans">
+                      Make it easy for your visitors to remember your URL with a
+                      custom domain.
+                    </p>
+                  </div>
+                  <Button
+                    onClick={handleSetupDomain}
+                    variant="tertiary"
+                    size="sm"
+                  >
+                    Setup domain
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col lg:flex-row justify-center gap-3">
+            <div className="w-full lg:w-fit">
+              <Link to="/">
+                <Button
+                  leftIcon={<ArrowLeftCircleFilledIcon />}
+                  fullWidth
+                  variant="tertiary"
+                >
+                  Back to projects
+                </Button>
+              </Link>
+            </div>
+            <div className="w-full lg:w-fit">
+              <Link to={`/${orgSlug}/projects/${id}`}>
+                <Button fullWidth variant="primary">
+                  View project
+                </Button>
+              </Link>
             </div>
           </div>
         </div>
-      </div>
-
-      {/* CTA Buttons */}
-      <div className="flex flex-col lg:flex-row justify-center gap-3">
-        <div className="w-full lg:w-fit">
-          <Link to="/">
-            <Button
-              leftIcon={<ArrowLeftCircleFilledIcon />}
-              fullWidth
-              variant="tertiary"
-            >
-              Back to projects
-            </Button>
-          </Link>
-        </div>
-        <div className="w-full lg:w-fit">
-          <Link to={`/${orgSlug}/projects/${id}`}>
-            <Button fullWidth variant="primary">
-              View project
-            </Button>
-          </Link>
-        </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
-        const gitRepo = await octokit?.rest.repos.createUsingTemplate({
-          template_owner: owner,
-          template_repo: repo,
-          owner: data.account,
-          name: data.repoName,
-          include_all_branches: false,
-          private: data.isPrivate,
-        });
+        setIsLoading(true);
 
-        if (!gitRepo) {
-          return;
-        }
+        const { addProjectFromTemplate } = await client.addProjectFromTemplate(
+          orgSlug!,
+          {
+            templateOwner: owner,
+            templateRepo: repo,
+            owner: data.account,
+            name: data.repoName,
+            isPrivate: false,
+          },
+        );
 
-        // 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}`);
+        navigate(
+          `deploy?projectId=${addProjectFromTemplate.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 { Button } from 'components/shared/Button';
-import { Heading } from 'components/shared/Heading';
-import { Avatar } from 'components/shared/Avatar';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Button, Heading, Avatar, Tag } from 'components/shared';
 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(
-          createFormData.variables.length > 1
-            ? `${createFormData.variables.length} variables added`
-            : `Variable added`,
-        );
+        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/frontend/vite.config.ts

@@ -13,7 +13,6 @@ export default defineConfig({
       context: '/src/context',
       components: '/src/components',
       pages: '/src/pages',
-      types: '/src/types',
     },
   },
   define: {

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

@@ -267,93 +267,112 @@ query ($projectId: String!, $filter: FilterDomainsInput) {
 // src/mutations.ts
 var import_client2 = require("@apollo/client");
 var removeProjectMember = import_client2.gql`
-mutation ($projectMemberId: String!) {
-  removeProjectMember(projectMemberId: $projectMemberId)
-}
+  mutation ($projectMemberId: String!) {
+    removeProjectMember(projectMemberId: $projectMemberId)
+  }
 `;
 var updateProjectMember = import_client2.gql`
-mutation ($projectMemberId: String!, $data: UpdateProjectMemberInput) {
-  updateProjectMember(projectMemberId: $projectMemberId, data: $data)
-}
+  mutation ($projectMemberId: String!, $data: UpdateProjectMemberInput) {
+    updateProjectMember(projectMemberId: $projectMemberId, data: $data)
+  }
 `;
 var addProjectMember = import_client2.gql`
-mutation ($projectId: String!, $data: AddProjectMemberInput) {
-  addProjectMember(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: AddProjectMemberInput) {
+    addProjectMember(projectId: $projectId, data: $data)
+  }
 `;
 var addEnvironmentVariables = import_client2.gql`
-mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
-  addEnvironmentVariables(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
+    addEnvironmentVariables(projectId: $projectId, data: $data)
+  }
 `;
 var updateEnvironmentVariable = import_client2.gql`
-mutation ($environmentVariableId: String!, $data: UpdateEnvironmentVariableInput!) {
-  updateEnvironmentVariable(environmentVariableId: $environmentVariableId, data: $data)
-}
+  mutation (
+    $environmentVariableId: String!
+    $data: UpdateEnvironmentVariableInput!
+  ) {
+    updateEnvironmentVariable(
+      environmentVariableId: $environmentVariableId
+      data: $data
+    )
+  }
 `;
 var removeEnvironmentVariable = import_client2.gql`
-mutation ($environmentVariableId: String!) {
-  removeEnvironmentVariable(environmentVariableId: $environmentVariableId)
-}
+  mutation ($environmentVariableId: String!) {
+    removeEnvironmentVariable(environmentVariableId: $environmentVariableId)
+  }
 `;
 var updateDeploymentToProd = import_client2.gql`
-mutation ($deploymentId: String!) {
-  updateDeploymentToProd(deploymentId: $deploymentId)
-}
+  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
+  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)
-}`;
+  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)
-}`;
+  mutation ($domainId: String!, $data: UpdateDomainInput!) {
+    updateDomain(domainId: $domainId, data: $data)
+  }
+`;
 var redeployToProd = import_client2.gql`
-mutation ($deploymentId: String!) {
-  redeployToProd(deploymentId: $deploymentId)
-}
+  mutation ($deploymentId: String!) {
+    redeployToProd(deploymentId: $deploymentId)
+  }
 `;
 var deleteProject = import_client2.gql`
-mutation ($projectId: String!) {
-  deleteProject(projectId: $projectId)
-}
+  mutation ($projectId: String!) {
+    deleteProject(projectId: $projectId)
+  }
 `;
 var deleteDomain = import_client2.gql`
-mutation ($domainId: String!) {
-  deleteDomain(domainId: $domainId)
-}`;
+  mutation ($domainId: String!) {
+    deleteDomain(domainId: $domainId)
+  }
+`;
 var rollbackDeployment = import_client2.gql`
-mutation ($projectId: String! ,$deploymentId: String!) {
-  rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
-}
+  mutation ($projectId: String!, $deploymentId: String!) {
+    rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
+  }
 `;
 var deleteDeployment = import_client2.gql`
-mutation ($deploymentId: String!) {
-  deleteDeployment(deploymentId: $deploymentId)
-}
+  mutation ($deploymentId: String!) {
+    deleteDeployment(deploymentId: $deploymentId)
+  }
 `;
 var addDomain = import_client2.gql`
-mutation ($projectId: String!, $data: AddDomainInput!) {
-  addDomain(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: AddDomainInput!) {
+    addDomain(projectId: $projectId, data: $data)
+  }
 `;
 var authenticateGitHub = import_client2.gql`
-mutation ($code: String!) {
-  authenticateGitHub(code: $code) {
-    token
+  mutation ($code: String!) {
+    authenticateGitHub(code: $code) {
+      token
+    }
   }
-}`;
+`;
 var unauthenticateGitHub = import_client2.gql`
-mutation {
-  unauthenticateGitHub
-}`;
+  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

@@ -240,93 +240,112 @@ query ($projectId: String!, $filter: FilterDomainsInput) {
 // src/mutations.ts
 import { gql as gql2 } from "@apollo/client";
 var removeProjectMember = gql2`
-mutation ($projectMemberId: String!) {
-  removeProjectMember(projectMemberId: $projectMemberId)
-}
+  mutation ($projectMemberId: String!) {
+    removeProjectMember(projectMemberId: $projectMemberId)
+  }
 `;
 var updateProjectMember = gql2`
-mutation ($projectMemberId: String!, $data: UpdateProjectMemberInput) {
-  updateProjectMember(projectMemberId: $projectMemberId, data: $data)
-}
+  mutation ($projectMemberId: String!, $data: UpdateProjectMemberInput) {
+    updateProjectMember(projectMemberId: $projectMemberId, data: $data)
+  }
 `;
 var addProjectMember = gql2`
-mutation ($projectId: String!, $data: AddProjectMemberInput) {
-  addProjectMember(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: AddProjectMemberInput) {
+    addProjectMember(projectId: $projectId, data: $data)
+  }
 `;
 var addEnvironmentVariables = gql2`
-mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
-  addEnvironmentVariables(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
+    addEnvironmentVariables(projectId: $projectId, data: $data)
+  }
 `;
 var updateEnvironmentVariable = gql2`
-mutation ($environmentVariableId: String!, $data: UpdateEnvironmentVariableInput!) {
-  updateEnvironmentVariable(environmentVariableId: $environmentVariableId, data: $data)
-}
+  mutation (
+    $environmentVariableId: String!
+    $data: UpdateEnvironmentVariableInput!
+  ) {
+    updateEnvironmentVariable(
+      environmentVariableId: $environmentVariableId
+      data: $data
+    )
+  }
 `;
 var removeEnvironmentVariable = gql2`
-mutation ($environmentVariableId: String!) {
-  removeEnvironmentVariable(environmentVariableId: $environmentVariableId)
-}
+  mutation ($environmentVariableId: String!) {
+    removeEnvironmentVariable(environmentVariableId: $environmentVariableId)
+  }
 `;
 var updateDeploymentToProd = gql2`
-mutation ($deploymentId: String!) {
-  updateDeploymentToProd(deploymentId: $deploymentId)
-}
+  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
+  mutation ($organizationSlug: String!, $data: AddProjectInput) {
+    addProject(organizationSlug: $organizationSlug, data: $data) {
+      id
+    }
   }
-}`;
+`;
 var updateProjectMutation = gql2`
-mutation ($projectId: String!, $data: UpdateProjectInput) {
-  updateProject(projectId: $projectId, data: $data)
-}`;
+  mutation ($projectId: String!, $data: UpdateProjectInput) {
+    updateProject(projectId: $projectId, data: $data)
+  }
+`;
 var updateDomainMutation = gql2`
-mutation ($domainId: String!, $data: UpdateDomainInput!) {
-  updateDomain(domainId: $domainId, data: $data)
-}`;
+  mutation ($domainId: String!, $data: UpdateDomainInput!) {
+    updateDomain(domainId: $domainId, data: $data)
+  }
+`;
 var redeployToProd = gql2`
-mutation ($deploymentId: String!) {
-  redeployToProd(deploymentId: $deploymentId)
-}
+  mutation ($deploymentId: String!) {
+    redeployToProd(deploymentId: $deploymentId)
+  }
 `;
 var deleteProject = gql2`
-mutation ($projectId: String!) {
-  deleteProject(projectId: $projectId)
-}
+  mutation ($projectId: String!) {
+    deleteProject(projectId: $projectId)
+  }
 `;
 var deleteDomain = gql2`
-mutation ($domainId: String!) {
-  deleteDomain(domainId: $domainId)
-}`;
+  mutation ($domainId: String!) {
+    deleteDomain(domainId: $domainId)
+  }
+`;
 var rollbackDeployment = gql2`
-mutation ($projectId: String! ,$deploymentId: String!) {
-  rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
-}
+  mutation ($projectId: String!, $deploymentId: String!) {
+    rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
+  }
 `;
 var deleteDeployment = gql2`
-mutation ($deploymentId: String!) {
-  deleteDeployment(deploymentId: $deploymentId)
-}
+  mutation ($deploymentId: String!) {
+    deleteDeployment(deploymentId: $deploymentId)
+  }
 `;
 var addDomain = gql2`
-mutation ($projectId: String!, $data: AddDomainInput!) {
-  addDomain(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: AddDomainInput!) {
+    addDomain(projectId: $projectId, data: $data)
+  }
 `;
 var authenticateGitHub = gql2`
-mutation ($code: String!) {
-  authenticateGitHub(code: $code) {
-    token
+  mutation ($code: String!) {
+    authenticateGitHub(code: $code) {
+      token
+    }
   }
-}`;
+`;
 var unauthenticateGitHub = gql2`
-mutation {
-  unauthenticateGitHub
-}`;
+  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,107 +1,127 @@
-import { gql } from '@apollo/client';
+import { gql } from "@apollo/client";
 
 export const removeProjectMember = gql`
-mutation ($projectMemberId: String!) {
-  removeProjectMember(projectMemberId: $projectMemberId)
-}
+  mutation ($projectMemberId: String!) {
+    removeProjectMember(projectMemberId: $projectMemberId)
+  }
 `;
 
 export const updateProjectMember = gql`
-mutation ($projectMemberId: String!, $data: UpdateProjectMemberInput) {
-  updateProjectMember(projectMemberId: $projectMemberId, data: $data)
-}
+  mutation ($projectMemberId: String!, $data: UpdateProjectMemberInput) {
+    updateProjectMember(projectMemberId: $projectMemberId, data: $data)
+  }
 `;
 
 export const addProjectMember = gql`
-mutation ($projectId: String!, $data: AddProjectMemberInput) {
-  addProjectMember(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: AddProjectMemberInput) {
+    addProjectMember(projectId: $projectId, data: $data)
+  }
 `;
 
 export const addEnvironmentVariables = gql`
-mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
-  addEnvironmentVariables(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: [AddEnvironmentVariableInput!]) {
+    addEnvironmentVariables(projectId: $projectId, data: $data)
+  }
 `;
 
 export const updateEnvironmentVariable = gql`
-mutation ($environmentVariableId: String!, $data: UpdateEnvironmentVariableInput!) {
-  updateEnvironmentVariable(environmentVariableId: $environmentVariableId, data: $data)
-}
+  mutation (
+    $environmentVariableId: String!
+    $data: UpdateEnvironmentVariableInput!
+  ) {
+    updateEnvironmentVariable(
+      environmentVariableId: $environmentVariableId
+      data: $data
+    )
+  }
 `;
 
 export const removeEnvironmentVariable = gql`
-mutation ($environmentVariableId: String!) {
-  removeEnvironmentVariable(environmentVariableId: $environmentVariableId)
-}
+  mutation ($environmentVariableId: String!) {
+    removeEnvironmentVariable(environmentVariableId: $environmentVariableId)
+  }
 `;
 
 export const updateDeploymentToProd = gql`
-mutation ($deploymentId: String!) {
-  updateDeploymentToProd(deploymentId: $deploymentId)
-}
+  mutation ($deploymentId: String!) {
+    updateDeploymentToProd(deploymentId: $deploymentId)
+  }
+`;
+
+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
+  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)
-}`;
+  mutation ($projectId: String!, $data: UpdateProjectInput) {
+    updateProject(projectId: $projectId, data: $data)
+  }
+`;
 
 export const updateDomainMutation = gql`
-mutation ($domainId: String!, $data: UpdateDomainInput!) {
-  updateDomain(domainId: $domainId, data: $data)
-}`;
+  mutation ($domainId: String!, $data: UpdateDomainInput!) {
+    updateDomain(domainId: $domainId, data: $data)
+  }
+`;
 
 export const redeployToProd = gql`
-mutation ($deploymentId: String!) {
-  redeployToProd(deploymentId: $deploymentId)
-}
+  mutation ($deploymentId: String!) {
+    redeployToProd(deploymentId: $deploymentId)
+  }
 `;
 
 export const deleteProject = gql`
-mutation ($projectId: String!) {
-  deleteProject(projectId: $projectId)
-}
+  mutation ($projectId: String!) {
+    deleteProject(projectId: $projectId)
+  }
 `;
 
 export const deleteDomain = gql`
-mutation ($domainId: String!) {
-  deleteDomain(domainId: $domainId)
-}`;
+  mutation ($domainId: String!) {
+    deleteDomain(domainId: $domainId)
+  }
+`;
 
 export const rollbackDeployment = gql`
-mutation ($projectId: String! ,$deploymentId: String!) {
-  rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
-}
+  mutation ($projectId: String!, $deploymentId: String!) {
+    rollbackDeployment(projectId: $projectId, deploymentId: $deploymentId)
+  }
 `;
 
 export const deleteDeployment = gql`
-mutation ($deploymentId: String!) {
-  deleteDeployment(deploymentId: $deploymentId)
-}
+  mutation ($deploymentId: String!) {
+    deleteDeployment(deploymentId: $deploymentId)
+  }
 `;
 
 export const addDomain = gql`
-mutation ($projectId: String!, $data: AddDomainInput!) {
-  addDomain(projectId: $projectId, data: $data)
-}
+  mutation ($projectId: String!, $data: AddDomainInput!) {
+    addDomain(projectId: $projectId, data: $data)
+  }
 `;
 
 export const authenticateGitHub = gql`
-mutation ($code: String!) {
-  authenticateGitHub(code: $code) {
-    token
+  mutation ($code: String!) {
+    authenticateGitHub(code: $code) {
+      token
+    }
   }
-}`;
+`;
 
 export const unauthenticateGitHub = gql`
-mutation {
-  unauthenticateGitHub
-}`;
+  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',
-  Maintainer = 'Maintainer',
-  Reader = 'Reader',
+  Owner = "Owner",
+  Maintainer = "Maintainer",
+  Reader = "Reader",
 }
 
 export enum Permission {
-  View = 'View',
-  Edit = 'Edit',
+  View = "View",
+  Edit = "Edit",
 }
 
 export enum Environment {
-  Production = 'Production',
-  Preview = 'Preview',
-  Development = 'Development',
+  Production = "Production",
+  Preview = "Preview",
+  Development = "Development",
 }
 
 export enum DeploymentStatus {
-  Building = 'Building',
-  Ready = 'Ready',
-  Error = 'Error',
-  Deleting = 'Deleting'
+  Building = "Building",
+  Ready = "Ready",
+  Error = "Error",
+  Deleting = "Deleting",
 }
 
 export enum DomainStatus {
-  Live = 'Live',
-  Pending = 'Pending',
+  Live = "Live",
+  Pending = "Pending",
 }
 
 export type EnvironmentVariable = {
-  id: string
-  environment: Environment
-  key: string
-  value: string
-  createdAt: string
-  updatedAt: string
-}
+  id: string;
+  environment: Environment;
+  key: string;
+  value: string;
+  createdAt: string;
+  updatedAt: string;
+};
 
 export type Domain = {
-  id: string
-  branch: string
-  name: string
-  status: DomainStatus
-  redirectTo: Domain | null
-  createdAt: string
-  updatedAt: string
-}
+  id: string;
+  branch: string;
+  name: string;
+  status: DomainStatus;
+  redirectTo: Domain | null;
+  createdAt: string;
+  updatedAt: string;
+};
 
 export type User = {
-  id: string
-  name: string | null
-  email: string
-  isVerified: boolean
-  createdAt: string
-  updatedAt: string
-  gitHubToken: string | null
-}
+  id: string;
+  name: string | null;
+  email: string;
+  isVerified: boolean;
+  createdAt: string;
+  updatedAt: string;
+  gitHubToken: string | null;
+};
 
 export type Deployment = {
-  id: string
-  domain: Domain
-  branch: string
-  commitHash: string
-  commitMessage: string
-  url?: string
-  environment: Environment
-  isCurrent: boolean
-  status: DeploymentStatus
-  createdBy: User
-  createdAt: string
-  updatedAt: string
-}
+  id: string;
+  domain: Domain;
+  branch: string;
+  commitHash: string;
+  commitMessage: string;
+  url?: string;
+  environment: Environment;
+  isCurrent: boolean;
+  status: DeploymentStatus;
+  createdBy: User;
+  createdAt: string;
+  updatedAt: string;
+};
 
 export type OrganizationMember = {
-  id: string
-  member: User
-  role: Role
-  createdAt: string
-  updatedAt: string
-}
+  id: string;
+  member: User;
+  role: Role;
+  createdAt: string;
+  updatedAt: string;
+};
 
 export type ProjectMember = {
-  id: string
-  member: User
-  permissions: Permission[]
-  isPending: boolean
-  createdAt: string
-  updatedAt: string
-}
+  id: string;
+  member: User;
+  permissions: Permission[];
+  isPending: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
 
 export type OrganizationProject = {
-  id: string
-  owner: User
-  deployments: Deployment[]
-  name: string
-  repository: string
-  prodBranch: string
-  description: string
-  template: string
-  framework: string
-  webhooks: string[]
-  members: ProjectMember[]
-  environmentVariables: EnvironmentVariable[]
-  createdAt: string
-  updatedAt: string
-}
+  id: string;
+  owner: User;
+  deployments: Deployment[];
+  name: string;
+  repository: string;
+  prodBranch: string;
+  description: string;
+  template: string;
+  framework: string;
+  webhooks: string[];
+  members: ProjectMember[];
+  environmentVariables: EnvironmentVariable[];
+  createdAt: string;
+  updatedAt: string;
+};
 
 export type Organization = {
-  id: string
-  name: string
-  slug: string
-  projects: OrganizationProject[]
-  createdAt: string
-  updatedAt: string
-  members: OrganizationMember[]
-}
+  id: string;
+  name: string;
+  slug: string;
+  projects: OrganizationProject[];
+  createdAt: string;
+  updatedAt: string;
+  members: OrganizationMember[];
+};
 
 export type Project = {
-  id: string
-  owner: User
-  deployments: Deployment[]
-  name: string
-  repository: string
-  prodBranch: string
-  description: string
-  template: string
-  framework: string
-  webhooks: string[]
-  members: ProjectMember[]
-  environmentVariables: EnvironmentVariable[]
-  createdAt: string
-  updatedAt: string
-  organization: Organization
-  icon: string
-  subDomain: string
-}
+  id: string;
+  owner: User;
+  deployments: Deployment[];
+  name: string;
+  repository: string;
+  prodBranch: string;
+  description: string;
+  template: string;
+  framework: string;
+  webhooks: string[];
+  members: ProjectMember[];
+  environmentVariables: EnvironmentVariable[];
+  createdAt: string;
+  updatedAt: string;
+  organization: Organization;
+  icon: 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
-  description?: string
-  prodBranch?: string
-  webhooks?: string[]
-  organizationId?: string
-}
+  name?: string;
+  description?: string;
+  prodBranch?: string;
+  webhooks?: 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
-  status?: DomainStatus
-}
+  branch?: string;
+  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"