feat: migrate to dtfm (#58)

apps/engine/package.json

@@ -40,6 +40,7 @@
     "@vercel/og": "^0.6.2",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "design-tokens-format-module": "catalog:",
     "drizzle-orm": "^0.32.2",
     "drizzle-zod": "^0.5.1",
     "framer-motion": "^11.3.21",
@@ -59,7 +60,6 @@
     "server-only": "^0.0.1",
     "sharp": "^0.33.5",
     "standardwebhooks": "^1.0.0",
-    "style-dictionary": "catalog:",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.4.0",
     "zod": "^3.23.8",

apps/engine/src/app/app/integrations/@tabs/outputs/github/_actions/update-settings.action.ts

@@ -11,6 +11,7 @@ import { database } from '@ds-project/database/client';
 import { authorizedAction } from '@/lib/safe-action';
 import { z } from 'zod';
 import { revalidatePath } from 'next/cache';
+import { config } from '@/config';
 
 export const updateSettings = authorizedAction
   .metadata({ actionName: 'updateGithubSettings' })
@@ -20,7 +21,7 @@ export const updateSettings = authorizedAction
       repositoryId: z.number(),
       tokensPath: z.string().optional(),
       targetGitBranch: z.string().optional(),
-      defaultCommitMessage: z.string().optional(),
+      commitMessage: z.string().optional(),
     })
   )
   .outputSchema(
@@ -35,7 +36,7 @@ export const updateSettings = authorizedAction
         repositoryId,
         tokensPath,
         targetGitBranch,
-        defaultCommitMessage,
+        commitMessage,
       },
     }) => {
       const validatedData = await githubIntegrationSchema.parseAsync({
@@ -44,7 +45,10 @@ export const updateSettings = authorizedAction
         repositoryId,
         tokensPath,
         targetGitBranch,
-        defaultCommitMessage,
+        commitMessage:
+          commitMessage?.length === 0
+            ? config.defaultCommitMessage
+            : commitMessage,
       });
 
       await database

apps/engine/src/app/app/integrations/@tabs/outputs/github/_components/settings-form.tsx

@@ -23,6 +23,7 @@ import { z } from 'zod';
 import { updateSettings } from '../_actions';
 import { SupportButton } from '@/components';
 import type { api } from '@ds-project/api/rsc';
+import { config } from '@/config';
 
 export function SettingsForm({
   integration,
@@ -43,7 +44,7 @@ export function SettingsForm({
     repositoryId: z.coerce.number(),
     tokensPath: z.string().optional(),
     targetGitBranch: z.string().optional(),
-    defaultCommitMessage: z.string().optional(),
+    commitMessage: z.string().optional(),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -54,7 +55,7 @@ export function SettingsForm({
       installationId: integration?.data.installationId,
       tokensPath: integration?.data.tokensPath,
       targetGitBranch: integration?.data.targetGitBranch,
-      defaultCommitMessage: integration?.data.defaultCommitMessage,
+      commitMessage: integration?.data.commitMessage,
     },
   });
 
@@ -66,7 +67,7 @@ export function SettingsForm({
         repositoryId: values.repositoryId,
         tokensPath: values.tokensPath,
         targetGitBranch: values.targetGitBranch,
-        defaultCommitMessage: values.defaultCommitMessage,
+        commitMessage: values.commitMessage,
       });
       setIsSubmitting(false);
 
@@ -130,6 +131,9 @@ export function SettingsForm({
                     ) : null}
                   </SelectContent>
                 </Select>
+                <FormDescription>
+                  Repository where the tokens.json file will be pushed.
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -174,15 +178,15 @@ export function SettingsForm({
 
           <FormField
             control={form.control}
-            name="defaultCommitMessage"
+            name="commitMessage"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Default Commit Message</FormLabel>
+                <FormLabel>Commit Message</FormLabel>
                 <FormControl>
-                  <Input placeholder="Update design tokens" {...field} />
+                  <Input placeholder={config.defaultCommitMessage} {...field} />
                 </FormControl>
                 <FormDescription>
-                  Default commit message when synchronizing tokens.
+                  Commit message when synchronizing tokens.
                 </FormDescription>
                 <FormMessage />
               </FormItem>

apps/engine/src/app/app/integrations/@tabs/outputs/github/callback/route.ts

@@ -28,7 +28,7 @@ export async function GET(request: NextRequest) {
       installationId: parseInt(installationId),
       tokensPath: config.defaultGitTokensPath,
       targetGitBranch: config.defaultTargetGitBranch,
-      defaultCommitMessage: config.defaultCommitMessage,
+      commitMessage: config.defaultCommitMessage,
     });
 
     const validatedValues = InsertIntegrationsSchema.parse({

apps/engine/src/app/app/releases/_actions/fetch-release-tokens.action.ts

@@ -1,10 +1,9 @@
 'use server';
-import type { DesignTokens } from 'style-dictionary/types';
 import type { Octokit } from '@octokit/core';
 
 import { api } from '@ds-project/api/rsc';
 import { getInstallationOctokit } from '@ds-project/services/github';
-import { config } from '@/config';
+import type { JSONTokenTree } from 'design-tokens-format-module';
 
 async function searchFileSha({
   octokit,
@@ -53,7 +52,7 @@ async function searchFileSha({
 
 export async function fetchReleaseTokens(
   releaseId: number
-): Promise<DesignTokens | null> {
+): Promise<JSONTokenTree | null> {
   const githubIntegration = await api.integrations.github();
 
   if (!githubIntegration) {
@@ -109,7 +108,10 @@ export async function fetchReleaseTokens(
     }
   );
 
-  const tokensPath = [...config.defaultGitTokensPath.split('/'), 'tokens.json'];
+  const tokensPath = [
+    ...githubIntegration.data.tokensPath.split('/'),
+    'tokens.json',
+  ];
   const fileSha = await searchFileSha({
     octokit,
     owner: repository.owner.login,
@@ -136,5 +138,5 @@ export async function fetchReleaseTokens(
     file.encoding as BufferEncoding
   ).toString();
 
-  return JSON.parse(tokens) as DesignTokens;
+  return JSON.parse(tokens) as JSONTokenTree;
 }

apps/engine/src/app/app/releases/_components/select-releases.tsx

@@ -7,7 +7,7 @@ import {
   SelectValue,
 } from '@ds-project/components';
 import { useCallback, useEffect, useState } from 'react';
-import type { DesignTokens } from 'style-dictionary/types';
+import type { JSONTokenTree } from 'design-tokens-format-module';
 import { InstallRelease, JsonBlock } from '@/components';
 import type { fetchReleases } from '../_actions';
 import { fetchReleaseTokens } from '../_actions/fetch-release-tokens.action';
@@ -19,7 +19,7 @@ interface SelectReleasesProps {
 export function SelectReleases({ releases }: SelectReleasesProps) {
   const [selectedRelease, setSelectedRelease] =
     useState<NonNullable<SelectReleasesProps['releases']>[number]>();
-  const [tokens, setTokens] = useState<DesignTokens>();
+  const [tokens, setTokens] = useState<JSONTokenTree>();
 
   const onReleaseChange = useCallback(
     (selectedReleaseId: string) => {

packages/api/package.json

@@ -37,10 +37,10 @@
     "@trpc/client": "catalog:",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
+    "design-tokens-format-module": "catalog:",
     "keyhippo": "^0.0.40",
     "next": "catalog:",
     "react": "catalog:",
-    "style-dictionary": "catalog:",
     "superjson": "^2.2.1",
     "zod": "catalog:"
   },

packages/api/src/operations/release.ts

@@ -1,14 +1,14 @@
 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';
+import type { JSONTokenTree } from 'design-tokens-format-module';
 
 export async function release({
   ctx,
   designTokens,
 }: {
   ctx: DSContext;
-  designTokens: DesignTokensModel | null;
+  designTokens: JSONTokenTree | null;
 }) {
   const githubIntegration = await selectGithubIntegration({ ctx });
 
@@ -45,6 +45,6 @@ export async function release({
     repo: repository.name,
     targetBranchName: githubIntegration.data.targetGitBranch,
     defaultBranchName: 'main',
-    commitMessage: githubIntegration.data.defaultCommitMessage,
+    commitMessage: githubIntegration.data.commitMessage,
   });
 }

packages/api/src/router/github.ts

@@ -1,8 +1,8 @@
 import { createTRPCRouter, protectedProcedure } from '../trpc';
 import { getInstallationOctokit } from '@ds-project/services/github';
 import { getRef } from '../../../services/src/github/utils/get-ref';
-import type { DesignTokens } from 'style-dictionary/types';
 import { selectGithubIntegration } from '../queries/integrations';
+import type { JSONTokenTree } from 'design-tokens-format-module';
 
 export const githubRouter = createTRPCRouter({
   tokens: protectedProcedure.query(async ({ ctx }) => {
@@ -52,8 +52,8 @@ export const githubRouter = createTRPCRouter({
       return response.data.encoding === 'base64'
         ? (JSON.parse(
             Buffer.from(response.data.content, 'base64').toString()
-          ) as DesignTokens)
-        : (JSON.parse(response.data.content) as DesignTokens);
+          ) as JSONTokenTree)
+        : (JSON.parse(response.data.content) as JSONTokenTree);
     }
   }),
 });

packages/api/src/router/resources.ts

@@ -89,7 +89,11 @@ export const resourcesRouter = createTRPCRouter({
   create: protectedProcedure
     .input(InsertResourcesSchema)
     .mutation(({ ctx, input }) => {
-      return ctx.database.insert(Resources).values(input);
+      return ctx.database.insert(Resources).values({
+        name: input.name,
+        projectId: input.projectId,
+        designTokens: PreprocessedTokensSchema.parse(input.designTokens),
+      });
     }),
 
   delete: protectedProcedure

packages/database/package.json

@@ -39,9 +39,11 @@
   },
   "prettier": "@ds-project/prettier",
   "dependencies": {
+    "@nclsndr/design-tokens-library": "^0.0.1",
     "@next/env": "^14.2.13",
     "@t3-oss/env-core": "^0.11.1",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "design-tokens-format-module": "catalog:",
     "drizzle-kit": "^0.24.2",
     "drizzle-orm": "^0.32.2",
     "drizzle-zod": "^0.5.1",
@@ -55,7 +57,6 @@
     "@ds-project/typescript": "workspace:*",
     "@types/node": "catalog:",
     "eslint": "catalog:",
-    "style-dictionary": "catalog:",
     "supabase": "^1.200.3",
     "typescript": "catalog:"
   }

packages/database/src/schema/integrations.ts

@@ -24,7 +24,7 @@ export const githubIntegrationSchema = z.object({
   repositoryId: z.number().optional(),
   tokensPath: z.string(),
   targetGitBranch: z.string(),
-  defaultCommitMessage: z.string(),
+  commitMessage: z.string(),
 });
 
 export const figmaIntegrationSchema = z.object({

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

@@ -7,48 +7,15 @@ import {
   uuid,
 } from 'drizzle-orm/pg-core';
 import { createInsertSchema } from 'drizzle-zod';
-import type { DesignTokens, DesignToken } from 'style-dictionary/types';
-import { z } from 'zod';
 import { Projects } from '../projects';
-
-// DesignToken schema
-const DesignTokenSchema = z
-  .object({
-    value: z.any().optional(),
-    $value: z.any().optional(),
-    type: z.string().optional(),
-    $type: z.string().optional(),
-    $description: z.string().optional(),
-    name: z.string().optional(),
-    comment: z.string().optional(),
-    themeable: z.boolean().optional(),
-    attributes: z.record(z.unknown()).optional(),
-    // Allow any additional properties
-  })
-  .catchall(z.any());
-
-// DesignTokens schema
-const DesignTokensSchema: z.ZodType<DesignTokens> = z.lazy(() =>
-  z
-    .object({
-      $type: z.string().optional(),
-      // Allow nesting of DesignTokens or DesignToken
-    })
-    .catchall(
-      z.union([
-        DesignTokenSchema,
-        z.lazy(() => DesignTokensSchema),
-        z.string(),
-        z.undefined(),
-      ])
-    )
-);
-
-// PreprocessedTokens schema
-export const PreprocessedTokensSchema: z.ZodType<DesignToken | DesignTokens> =
-  z.lazy(() => z.union([DesignTokenSchema, PreprocessedTokensSchema]));
-
-export type DesignTokensModel = z.infer<typeof PreprocessedTokensSchema>;
+import type { JSONTokenTree } from 'design-tokens-format-module';
+import { parseJSONTokenTree } from '@nclsndr/design-tokens-library';
+export const PreprocessedTokensSchema = {
+  parse: (jsonTokenTree: unknown): JSONTokenTree => {
+    const tokenTree = parseJSONTokenTree(jsonTokenTree, { throwOnError: true });
+    return tokenTree.toJSON() satisfies JSONTokenTree;
+  },
+};
 
 /**
  * Represents the resources linked to a design system.
@@ -68,13 +35,11 @@ export const Resources = pgTable(
       .references(() => Projects.id, { onDelete: 'cascade' })
       .notNull(),
     name: text('name').notNull(),
-    designTokens: json('design_tokens').$type<DesignTokensModel>(),
+    designTokens: json('design_tokens').$type<JSONTokenTree>(),
   },
   (resource) => ({
     unique: unique().on(resource.name, resource.projectId),
   })
 );
 
-export const InsertResourcesSchema = createInsertSchema(Resources, {
-  designTokens: () => PreprocessedTokensSchema,
-});
+export const InsertResourcesSchema = createInsertSchema(Resources);

packages/figma-utilities/package.json

@@ -20,8 +20,8 @@
   "prettier": "@ds-project/prettier",
   "dependencies": {
     "@create-figma-plugin/utilities": "^3.2.0",
+    "design-tokens-format-module": "catalog:",
     "object-hash": "^3.0.0",
-    "style-dictionary": "^4.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

packages/figma-utilities/src/events.ts

@@ -3,8 +3,8 @@ import {
   emit as defaultEmit,
   once as defaultOnce,
 } from '@create-figma-plugin/utilities';
-import type { DesignTokens } from 'style-dictionary/types';
 import type { Credentials } from './credentials';
+import type { JSONTokenTree } from 'design-tokens-format-module';
 
 const DEFAULT_EVENT_TIMEOUT = 10 * 1000; // 10 seconds
 
@@ -32,7 +32,7 @@ type Event = Implements<
     };
 
     'sync-variables': {
-      request: { variables: DesignTokens };
+      request: { variables: JSONTokenTree };
       response: {
         lastSyncedAt: string | null;
       };