push to github on resources update

apps/dashboard/src/components/navigation/navigation.tsx

@@ -1,4 +1,5 @@
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -24,48 +25,63 @@ export function Navigation({ className, projects }: NavigationProps) {
   return (
     <nav
       className={cn(
-        'flex w-full justify-start gap-2 border-b border-slate-200 bg-white pb-2',
+        'flex w-full justify-between gap-2 border-b border-slate-200 bg-white pb-2',
         className
       )}
     >
-      <HomeButton />
-      <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center gap-2 rounded-md border border-[hsl(var(--input))] p-2">
-          <Icons.FrameIcon /> {projects?.[0].name} <Icons.ChevronDownIcon />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          {projects?.map((project) => (
-            <DropdownMenuItem key={project.id}>
-              <Icons.FrameIcon className="mr-2" /> {project.name}
+      <div className="flex w-full gap-2">
+        <HomeButton />
+        <DropdownMenu>
+          <DropdownMenuTrigger className="flex items-center gap-2 rounded-md border border-[hsl(var(--input))] p-2">
+            <Icons.FrameIcon /> {projects?.[0].name} <Icons.ChevronDownIcon />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {projects?.map((project) => (
+              <DropdownMenuItem key={project.id}>
+                <Icons.FrameIcon className="mr-2" /> {project.name}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuItem
+              aria-label="Soon you will be able to add new projects"
+              disabled
+              title="Coming Soon"
+            >
+              <Icons.PlusIcon className="mr-2" /> New Project
             </DropdownMenuItem>
-          ))}
-          <DropdownMenuItem
-            aria-label="Soon you will be able to add new projects"
-            disabled
-            title="Coming Soon"
-          >
-            <Icons.PlusIcon className="mr-2" /> New Project
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <Link href="/tokens" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Tokens
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-          <NavigationMenuItem>
-            <Link href="/integrations" legacyBehavior passHref>
-              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                Integrations
-              </NavigationMenuLink>
-            </Link>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <Link href="/tokens" legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Tokens
+                </NavigationMenuLink>
+              </Link>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <Link href="/integrations" legacyBehavior passHref>
+                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                  Integrations
+                </NavigationMenuLink>
+              </Link>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      <div className="flex gap-2">
+        <Button variant="ghost" size="icon" title="GitHub">
+          <Link href="https://github.com/Design-System-Project" target="_blank">
+            <Icons.GitHubLogoIcon />
+          </Link>
+        </Button>
+        <Button variant="ghost" size="icon" title="Discord">
+          <Link href="https://discord.gg/AKza6Mqr" target="_blank">
+            <Icons.DiscordLogoIcon />
+          </Link>
+        </Button>
+      </div>
     </nav>
   );
 }

packages/api/src/operations/release.ts

@@ -0,0 +1,47 @@
+import { getInstallationOctokit, pushFile } from '@ds-project/services/github';
+import { selectGithubIntegration } from '../queries/integrations';
+import type { DSContext } from '../types/context';
+import type { DesignTokensModel } from '@ds-project/database/schema';
+
+export async function release({
+  ctx,
+  designTokens,
+}: {
+  ctx: DSContext;
+  designTokens: DesignTokensModel | null;
+}) {
+  const githubIntegration = await selectGithubIntegration({ ctx });
+
+  if (!githubIntegration) {
+    console.log('No GitHub integration found. Skipping release.');
+    return;
+  }
+
+  const octokit = await getInstallationOctokit(
+    githubIntegration.data.installationId
+  );
+
+  const repositories = await octokit.request('GET /installation/repositories');
+  const repository = repositories.data.repositories.find(
+    (_repository) => _repository.id === githubIntegration.data.repositoryId
+  );
+
+  if (!repository) {
+    console.log('No repository found. Skipping release.');
+    return;
+  }
+
+  const content = btoa(JSON.stringify(designTokens, null, 2));
+
+  await pushFile({
+    file: {
+      content,
+      encoding: 'base64',
+      name: 'tokens.json',
+      path: 'packages/generator/tokens',
+    },
+    installationId: githubIntegration.data.installationId,
+    owner: repository.owner.login,
+    repo: repository.name,
+  });
+}

packages/api/src/router/resources.ts

@@ -8,6 +8,7 @@ import {
   PreprocessedTokensSchema,
   Resources,
 } from '@ds-project/database/schema';
+import { release } from '../operations/release';
 
 export const resourcesRouter = createTRPCRouter({
   byId: protectedProcedure
@@ -55,7 +56,7 @@ export const resourcesRouter = createTRPCRouter({
       })
     )
     .mutation(async ({ ctx, input }) => {
-      const result = await ctx.database
+      const [resource] = await ctx.database
         .insert(Resources)
         .values({
           name: input.name,
@@ -69,10 +70,16 @@ export const resourcesRouter = createTRPCRouter({
           set: {
             designTokens: PreprocessedTokensSchema.parse(input.designTokens),
           },
+        })
+        .returning({
+          insertedDesignTokens: Resources.designTokens,
         });
-      // TODO: Run update to Integration here ---> GitHub
 
-      return result;
+      if (!resource) return resource;
+
+      await release({ ctx, designTokens: resource.insertedDesignTokens });
+
+      return resource;
     }),
 
   create: protectedProcedure

packages/database/src/schema/resources/resources.ts

@@ -41,6 +41,8 @@ const DesignTokensSchema: z.ZodType<DesignTokens> = z.lazy(() =>
 export const PreprocessedTokensSchema: z.ZodType<DesignToken | DesignTokens> =
   z.lazy(() => z.union([DesignTokenSchema, PreprocessedTokensSchema]));
 
+export type DesignTokensModel = z.infer<typeof PreprocessedTokensSchema>;
+
 /**
  * Represents the resources linked to a design system.
  */
@@ -57,8 +59,7 @@ export const Resources = pgTable('resources', {
     .references(() => Projects.id, { onDelete: 'cascade' })
     .notNull(),
   name: text('name').notNull().unique(),
-  designTokens:
-    json('design_tokens').$type<z.infer<typeof PreprocessedTokensSchema>>(),
+  designTokens: json('design_tokens').$type<DesignTokensModel>(),
 });
 
 export const InsertResourcesSchema = createInsertSchema(Resources, {

packages/services/src/github/utils/push-file.ts

@@ -105,7 +105,7 @@ export async function pushFile({
     base_tree: baseCommitSha,
     tree: [
       {
-        path: `${file.path ?? ''}${file.name}`,
+        path: `${file.path ?? ''}/${file.name}`,
         mode: '100644',
         type: 'blob',
         sha: blobSha,