feat(dx): Add commit hooks

.hooks/shared/compile-tsc.json

@@ -0,0 +1,4 @@
+{
+  "name": "[Shared] Typescript compilation ♳",
+  "command": "pnpm exec tsc --noEmit"
+}

.hooks/shared/conventional-commits.json

@@ -0,0 +1,4 @@
+{
+  "name": "[Shared] Conventional Commits",
+  "command": "cd `git rev-parse --show-toplevel` && (cat {args} | npx commitlint)"
+}

.hooks/shared/node-build.json

@@ -0,0 +1,4 @@
+{
+  "name": "[Shared] Build Node app",
+  "command": "npx pnpm build"
+}

.hooks/shared/node-lint.json

@@ -0,0 +1,4 @@
+{
+  "name": "[Shared] Linting Node app 🧹",
+  "command": "npx lint-staged"
+}

.lintstagedrc.json

@@ -0,0 +1,18 @@
+{
+  "**/*.ts": [
+    "prettier --write",
+    "eslint --max-warnings 0 ."
+  ],
+  "**/*.tsx": [
+    "prettier --write",
+    "eslint --max-warnings 0 ."
+  ],
+  "**/*.js": [
+    "prettier --write",
+    "eslint --max-warnings 0 ."
+  ],
+  "**/*.jsx": [
+    "prettier --write",
+    "eslint --max-warnings 0 ."
+  ]
+}

.mookme.json

@@ -0,0 +1,3 @@
+{
+  "addedBehavior": "exit"
+}

apps/docs/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true
+  }
+}

apps/docs/.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+tsconfig.tsbuildinfo

apps/docs/.hooks/commit-msg.json

@@ -0,0 +1,7 @@
+{
+  "steps": [
+    {
+      "from": "conventional-commits"
+    }
+  ]
+}

apps/docs/.hooks/pre-commit.json

@@ -0,0 +1,7 @@
+{
+  "steps": [
+    {
+      "from": "node-lint"
+    }
+  ]
+}

apps/docs/.hooks/pre-push.json

@@ -0,0 +1,7 @@
+{
+  "steps": [
+    {
+      "from": "compile-tsc"
+    }
+  ]
+}

apps/docs/app/(docs)/layout.tsx

@@ -1,14 +1,17 @@
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import type { ReactNode } from 'react';
-import { baseOptions } from '@/app/layout.config';
-import { source } from '@/lib/source';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs'
+import type { ReactNode } from 'react'
+import { baseOptions } from '@/app/layout.config'
+import { source } from '@/lib/source'
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout tree={{
-      ...source.pageTree,
-    }} {...baseOptions}>
+    <DocsLayout
+      tree={{
+        ...source.pageTree
+      }}
+      {...baseOptions}
+    >
       {children}
     </DocsLayout>
-  );
+  )
 }

apps/docs/app/layout.config.tsx

@@ -3,7 +3,6 @@ import { RootToggle } from 'fumadocs-ui/layouts/docs.client'
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'
 import pkgJson from 'usdk/package.json'
 import Image from 'next/image'
-import Link from 'next/link'
 import GitHubRepoCard from '@/components/github-repo-card'
 
 /**
@@ -30,20 +29,13 @@ export const baseOptions = {
                 href: 'https://www.npmjs.com/package/usdk'
               }
             }
-            // {
-            //   title: 'Folder 2',
-            //   description: 'Pages in folder 2',
-            //   url: '/path/to/page-tree-2',
-            // },
           ]}
         />
       </div>
     )
   },
   sidebar: {
-    footer: (
-      <GitHubRepoCard repo={"upstreetAI/upstreet-core"} />
-    ),
+    footer: <GitHubRepoCard repo={'upstreetAI/upstreet-core'} />,
     banner: (
       <RootToggle
         defaultValue={0}
@@ -99,11 +91,4 @@ export const baseOptions = {
       />
     )
   }
-  // links: [
-  //   {
-  //     text: 'Documentation',
-  //     url: '/docs',
-  //     active: 'nested-url',
-  //   },
-  // ],
 }

apps/docs/components/author-card.tsx

@@ -1,33 +1,33 @@
-"use client";
-import { cn } from "../lib/utils";
-import Image from "next/image";
+'use client'
+import { cn } from '../lib/utils'
+import Image from 'next/image'
 
 export default function AuthorCard({
-    title,
-    description,
-    src,
-    thumbnailSrc,
-    authorName,
-    authorSubtitle,
-    variant="community",
+  title,
+  description,
+  src,
+  thumbnailSrc,
+  authorName,
+  authorSubtitle,
+  variant = 'community'
 }: {
-    title: string;
-    description: string;
-    src?: string;
-    thumbnailSrc: string;
-    authorName: string;
-    authorSubtitle: string;
-    variant?: "official" | "community",
+  title: string
+  description: string
+  src?: string
+  thumbnailSrc: string
+  authorName: string
+  authorSubtitle: string
+  variant?: 'official' | 'community'
 }) {
   return (
     <div className="md:max-w-xs w-full flex flex-grow group/card">
       <div
         className={cn(
-          "w-full cursor-pointer overflow-hidden relative card h-96 rounded-md shadow-xl mx-auto backgroundImage flex flex-col justify-between p-4",
+          'w-full cursor-pointer overflow-hidden relative card h-96 rounded-md shadow-xl mx-auto backgroundImage flex flex-col justify-between p-4',
           `bg-cover`
         )}
         style={{
-          backgroundImage: `url(${thumbnailSrc})`,
+          backgroundImage: `url(${thumbnailSrc})`
         }}
       >
         {/* Dark overlay for initial background */}
@@ -38,7 +38,7 @@ export default function AuthorCard({
           <Image
             height="100"
             width="100"
-            alt={authorName + " Avatar"}
+            alt={authorName + ' Avatar'}
             src={src ?? '/images/general/default_profile_picture.webp'}
             className="h-10 w-10 rounded-full border-2 object-cover"
           />
@@ -53,14 +53,16 @@ export default function AuthorCard({
           <h1 className="font-bold text-xl md:text-2xl text-gray-50 relative z-10">
             {title}
           </h1>
-          <p className={cn(
-            "font-normal text-sm text-gray-50 relative z-10 my-4",
-            variant === "official" ? "line-clamp-2" : "line-clamp-4"
-          )}>
+          <p
+            className={cn(
+              'font-normal text-sm text-gray-50 relative z-10 my-4',
+              variant === 'official' ? 'line-clamp-2' : 'line-clamp-4'
+            )}
+          >
             {description}
           </p>
         </div>
       </div>
     </div>
-  );
+  )
 }

apps/docs/components/card.tsx

@@ -1,56 +1,60 @@
-"use client";
-import { cn } from "../lib/utils";
+'use client'
+import { cn } from '../lib/utils'
 
 function Card({
   title,
   description,
   src: bgSrc,
   gifSrc,
-  backgroundOverlay = true,
+  backgroundOverlay = true
 }: {
-  title?: string;
-  description?: string;
-  src: string;
-  gifSrc?: string;
-  backgroundOverlay?: boolean;
+  title?: string
+  description?: string
+  src: string
+  gifSrc?: string
+  backgroundOverlay?: boolean
 }) {
   return (
     <div className="max-w-xs w-full">
       <div
         className={cn(
-          "group w-full cursor-pointer overflow-hidden relative card h-96 rounded-md shadow-xl mx-auto flex flex-col justify-end p-4 border border-transparent dark:border-neutral-800",
+          'group w-full cursor-pointer overflow-hidden relative card h-96 rounded-md shadow-xl mx-auto flex flex-col justify-end p-4 border border-transparent dark:border-neutral-800',
           "hover:after:content-[''] hover:after:absolute hover:after:inset-0 hover:after:bg-fd-card-foreground dark:hover:after:bg-fd-background hover:after:opacity-50",
-          "transition-all duration-500",
-          backgroundOverlay ? "bg-opacity-50" : "bg-opacity-100"
+          'transition-all duration-500',
+          backgroundOverlay ? 'bg-opacity-50' : 'bg-opacity-100'
         )}
         style={{
           backgroundImage: `url(${bgSrc})`,
-          backgroundSize: 'cover',
+          backgroundSize: 'cover'
         }}
-        // Set the hover gif background via inline style
-        onMouseEnter={(e) => {
+        onMouseEnter={e => {
           if (gifSrc) {
-            (e.currentTarget as HTMLElement).style.backgroundImage = `url(${gifSrc})`;
+            ;(e.currentTarget as HTMLElement).style.backgroundImage =
+              `url(${gifSrc})`
           }
         }}
-        onMouseLeave={(e) => {
-          (e.currentTarget as HTMLElement).style.backgroundImage = `url(${bgSrc})`;
+        onMouseLeave={e => {
+          ;(e.currentTarget as HTMLElement).style.backgroundImage =
+            `url(${bgSrc})`
         }}
       >
         {/* Dark overlay for initial background */}
-        {backgroundOverlay && <div className="absolute inset-0 bg-fd-card-foreground dark:bg-fd-background opacity-60 z-0"></div>} 
+        {backgroundOverlay && (
+          <div className="absolute inset-0 bg-fd-card-foreground dark:bg-fd-background opacity-60 z-0"></div>
+        )}
 
         <div className="text relative z-[1]">
           <h1 className="font-bold text-xl md:text-3xl text-gray-50 relative">
-            {title}
+            {' '}
+            {title}{' '}
           </h1>
           <p className="font-normal text-base text-gray-50 relative mb-4 mt-2">
             {description}
           </p>
         </div>
       </div>
     </div>
-  );
+  )
 }
 
-export default Card;
+export default Card