Project-wide Prettier setup (#237)

* Setup project-wide prettier

* Remove old workspace file

* Remove old debugging directives

* New top-level .prettierignore

* Updated Prettier config settings

* Contrubuting guide: Fix for some bad code blocks

* Added more ignores

* Improved the format script command

* printWidth set to 100

* Formatted entire repo (pnpm run format)

Author: matt-aitken

.infisical.json

@@ -1 +1 @@
-{"workspaceId":"63e5e42daf9a537ba8d9503c"}
+{ "workspaceId": "63e5e42daf9a537ba8d9503c" }

.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.env
+.env.local
+pnpm-lock.yaml
+tailwind.css
+.babelrc.json
+**/.react-email/
+**/storybook-static/
+**/.changeset/
+**/build/
+**/dist/

.vscode/launch.json

@@ -5,19 +5,12 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "command": "pnpm run idev --filter webapp",
+      "command": "pnpm run dev --filter webapp",
       "name": "Run webapp",
       "request": "launch",
       "type": "node-terminal",
       "cwd": "${workspaceFolder}"
     },
-    {
-      "command": "pnpm run dev --filter integrations",
-      "name": "Run integrations",
-      "request": "launch",
-      "type": "node-terminal",
-      "cwd": "${workspaceFolder}"
-    },
     {
       "type": "chrome",
       "request": "launch",

.vscode/trigger.code-workspace

@@ -81,15 +81,20 @@ branch are tagged into a release monthly.
 
 2. Once the app is running click the magic link button and enter your email.
 3. Check your terminal, the magic link email should have printed out as following:
-   `webapp:dev: Log in to Trigger.dev
-webapp:dev: 
-webapp:dev: Click here to log in with this magic link
-webapp:dev: [http://localhost:3030/magic?token=U2FsdGVkX18OvB0JxgaswTLCSbaRz%2FY82TN0EZWhSzFyZYwgG%2BIzKVTkeiaOtWfotPw7F8RwFzCHh53aBpMEu%2B%2B%2FItb%2FcJYh89MSjc3Pz92bevoEjqxSQ%2Ff%2BZbks09JOpqlBbYC3FzGWC8vuSVFBlxqLXxteSDLthZSUaC%2BS2LaA%2BJgp%2BLO7hgjAaC2lXbCHrM7MTgTdXOFt7i0Dvvuwz6%2BWY25RnfomZOPqDsyH0xz8Q2rzPTz0Xu53WSXrZ1hd]
-webapp:dev: 
-webapp:dev: If you didn't try to log in, you can safely ignore this email.`
-4. Paste the magic link shown in your terminal into your browser to login.
+
+   ```sh
+   webapp:dev: Log in to Trigger.dev
+   webapp:dev:
+   webapp:dev: Click here to log in with this magic link
+   webapp:dev: [http://localhost:3030/magic?token=U2FsdGVkX18OvB0JxgaswTLCSbaRz%2FY82TN0EZWhSzFyZYwgG%2BIzKVTkeiaOtWfotPw7F8RwFzCHh53aBpMEu%2B%2B%2FItb%2FcJYh89MSjc3Pz92bevoEjqxSQ%2Ff%2BZbks09JOpqlBbYC3FzGWC8vuSVFBlxqLXxteSDLthZSUaC%2BS2LaA%2BJgp%2BLO7hgjAaC2lXbCHrM7MTgTdXOFt7i0Dvvuwz6%2BWY25RnfomZOPqDsyH0xz8Q2rzPTz0Xu53WSXrZ1hd]
+   webapp:dev:
+   webapp:dev: If you didn't try to log in, you can safely ignore this email.
+   ```
+
+   Paste the magic link shown in your terminal into your browser to login.
 
 ## Adding and running migrations
+
 1. Modify packages/database/prisma/schema.prisma file
 2. Change directory to the packages/database folder
    ```sh
@@ -100,6 +105,7 @@ webapp:dev: If you didn't try to log in, you can safely ignore this email.`
    ```sh
    pnpm run generate
    ```
+
    The above updates the prisma client generated into node_modules/.prisma/client folder. This helps with typing of relevant prisma models. It ensures typescript
    recognizes fields added or removed from a model and type-checks appropriately.
 
@@ -108,6 +114,7 @@ webapp:dev: If you didn't try to log in, you can safely ignore this email.`
    ```
    pnpm run db:migrate:dev
    ```
+
    This creates a migration file and executes the migrations against your database and applies changes to the database schema(s)
 
 5. Commit generated migrations as well as changes to the schema.prisma file
@@ -119,44 +126,44 @@ To test CLI changes, follow the steps below:
 
 1. Build the CLI and watch for changes
 
-   ```
-   cd packages/cli
-   pnpm run dev
-   ```
+```sh
+cd packages/cli
+pnpm run dev
+```
 
 2. Open a new Terminal window and run the webapp locally and then create a new project in the dashboard. Copy out the dev API key.
 
 3. Create a new temporary Next.js app in examples directory
 
-   ```
-   pnpm create next-app@latest
-   ```
+```sh
+pnpm create next-app@latest
+```
 
-   Follow the prompts to create a TypeScript project using the App Directory.
+Follow the prompts to create a TypeScript project using the App Directory.
 
 4. Then once that's finished, add the `@trigger.dev/cli` to the `devDependencies` of the newly created Next.js app's `package.json` file, like so:
 
-   ```
-   {
-      "devDependencies": { "@trigger.dev/cli": "workspace:*" }
-   }
-   ```
+```json
+{
+  "devDependencies": { "@trigger.dev/cli": "workspace:*" }
+}
+```
 
 5. Open a new terminal window, navigate into the example, and initialize the CLI:
 
-   ```
-   cd examples/your-newly-created-nextjs-project
-   pnpm i
-   pnpm exec trigger-cli init
-   ```
+```sh
+cd examples/your-newly-created-nextjs-project
+pnpm i
+pnpm exec trigger-cli init
+```
 
 6. When prompted, select `self-hosted` and enter `localhost:3030` for your local version of the webapp. When asked for an API key, use the key you copied earlier.
 
 7. Run the CLI
 
-   ```
-   pnpm exec trigger-cli dev
-   ```
+```sh
+pnpm exec trigger-cli dev
+```
 
 8. After running the CLI, start your newly created Next.js project. You should now be able to see the changes.
 
@@ -170,19 +177,19 @@ The [examples/jobs-starter](./examples/jobs-starter/) project defines simple job
 2. Create a `.env.local` file with the following content,
    replacing `[TRIGGER_DEV_API_KEY]` with an actual key:
 
-   ```
-   TRIGGER_API_KEY=[TRIGGER_DEV_API_KEY]
-   TRIGGER_API_URL=http://localhost:3030
-   ```
+```env
+TRIGGER_API_KEY=[TRIGGER_DEV_API_KEY]
+TRIGGER_API_URL=http://localhost:3030
+```
 
-   `TRIGGER_API_URL` is used to configure the URL for your Trigger.dev instance,
-   where the jobs will be registered.
+`TRIGGER_API_URL` is used to configure the URL for your Trigger.dev instance,
+where the jobs will be registered.
 
 3. Run the `jobs-starter` app:
 
-   ```
-   pnpm dev
-   ```
+```sh
+pnpm dev
+```
 
 4. Navigate to your trigger.dev instance ([http://localhost:3030](http://localhost:3030/)), to see the jobs.
    You can use the test feature to trigger them.
@@ -204,7 +211,7 @@ If you are contributing a change to any packages in this monorepo (anything in e
 
 To add a changeset, run the following command in the root of the repo
 
-```shell
+```sh
 pnpm run changeset:add
 ```
 
@@ -221,15 +228,18 @@ Most of the time the changes you'll make are likely to be categorized as patch r
 ### EADDRINUSE: address already in use :::3030
 
 When receiving the following error message:
-`webapp:dev: Error: listen EADDRINUSE: address already in use :::3030`
+
+```sh
+webapp:dev: Error: listen EADDRINUSE: address already in use :::3030
+```
 
 The process running on port `3030` should be destroyed.
 
 1. Get the `PID` of the process running on PORT `3030`
-   ```
+   ```sh
    lsof -i :3030
    ```
 2. Kill the process
-   ```
+   ```sh
    sudo kill -9 <PID>
    ```

CONTRIBUTING.md

@@ -11,9 +11,11 @@
 
 [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/triggerdotdev.svg?style=social&label=Follow%20%40trigger.dev)](https://twitter.com/triggerdotdev)
 [![GitHub Repo stars](https://img.shields.io/github/stars/triggerdotdev/trigger.dev?style=social)](https://github.com/triggerdotdev/trigger.dev)
+
 </div>
 
 # About Trigger.dev
+
 Create long-running jobs directly in your codebase with features like API integrations, webhooks, scheduling and delays.
 
 ### Long running Jobs on serverless
@@ -60,5 +62,4 @@ We provide an official trigger.dev docker image you can use to easily self-host
 
 ## Development
 
-To setup and develop locally or contribute to the open source project, follow our [developement guide](./CONTRIBUTING.md). 
-
+To setup and develop locally or contribute to the open source project, follow our [developement guide](./CONTRIBUTING.md).

README.md

@@ -1,9 +1,5 @@
 {
-  "extends": [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "prettier"
-  ],
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node", "prettier"],
   "rules": {
     "@typescript-eslint/strict-boolean-expressions": [
       "error",

apps/webapp/.eslintrc

@@ -20,10 +20,7 @@ const config: StorybookConfig = {
       },
     };
   },
-  stories: [
-    "../app/**/stories/*.mdx",
-    "../app/**/stories/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../app/**/stories/*.mdx", "../app/**/stories/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

apps/webapp/.storybook/main.ts

@@ -35,9 +35,7 @@ const preview: Preview = {
 
       return (
         <OperatingSystemContextProvider platform="mac">
-          <LocaleContextProvider
-            locales={window.navigator.languages as string[]}
-          >
+          <LocaleContextProvider locales={window.navigator.languages as string[]}>
             <RemixStub initialEntries={["/"]} />
           </LocaleContextProvider>
         </OperatingSystemContextProvider>

apps/webapp/.storybook/preview.tsx

@@ -1,11 +1,6 @@
 export function DynamicTriggerIcon({ className }: { className?: string }) {
   return (
-    <svg
-      viewBox="0 0 21 21"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
+    <svg viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

apps/webapp/app/assets/icons/DynamicTriggerIcon.tsx

@@ -1,11 +1,6 @@
 export function ErrorIcon({ className }: { className?: string }) {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="10" cy="10" r="7" fill="white" />
       <path
         fillRule="evenodd"

apps/webapp/app/assets/icons/ErrorIcon.tsx

@@ -1,11 +1,6 @@
 export function WebhookIcon({ className }: { className?: string }) {
   return (
-    <svg
-      className={className}
-      viewBox="0 0 190 180"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg className={className} viewBox="0 0 190 180" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         fill="currentColor"
         fillRule="evenodd"

apps/webapp/app/assets/icons/WebhookIcon.tsx

@@ -16,10 +16,7 @@ export function ComingSoon({ title, description, icon }: ComingSoonProps) {
       <div className="flex flex-col justify-center rounded border border-slate-800 bg-slate-850">
         <div className="flex items-center gap-2 border-b border-slate-750 px-4 py-4">
           {typeof icon === "string" ? (
-            <NamedIconInBox
-              name={icon}
-              className={"h-10 w-10 bg-midnight-800"}
-            />
+            <NamedIconInBox name={icon} className={"h-10 w-10 bg-midnight-800"} />
           ) : (
             icon
           )}

apps/webapp/app/components/ComingSoon.tsx

@@ -19,19 +19,14 @@ export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
         <ErrorDisplay
           title={friendlyErrorDisplay(error.status, error.statusText).title}
           message={
-            error.data.message ??
-            friendlyErrorDisplay(error.status, error.statusText).message
+            error.data.message ?? friendlyErrorDisplay(error.status, error.statusText).message
           }
           {...options}
         />
       ) : error instanceof Error ? (
         <ErrorDisplay title={error.name} message={error.message} {...options} />
       ) : (
-        <ErrorDisplay
-          title="Oops"
-          message={JSON.stringify(error)}
-          {...options}
-        />
+        <ErrorDisplay title="Oops" message={JSON.stringify(error)} {...options} />
       )}
     </>
   );
@@ -47,11 +42,7 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
     <div className="p-4">
       <Header1 className="mb-4 border-b border-slate-800 pb-4">{title}</Header1>
       {message && <Header3>{message}</Header3>}
-      <LinkButton
-        to={button ? button.to : "/"}
-        variant="primary/medium"
-        className="mt-8"
-      >
+      <LinkButton to={button ? button.to : "/"} variant="primary/medium" className="mt-8">
         {button ? button.title : "Home"}
       </LinkButton>
     </div>