fix: remove unnecessary project selection within figma widget (#76)

apps/engine/src/app/app/@connections/getting-started/quickstart/page.mdx

@@ -8,11 +8,15 @@ Welcome! Follow the instructions below to learn how to connect, transform and pu
 
 ### Step 1: Connect your Source
 
-1. Install the Figma Widget and connect your DS Pro account.
-2. Select the project - `Default Project` is the only option available.
+1. Install the Figma Widget
+2. Connect to DS Pro
 
 ### Step 2: Connect your Destination
 
 1. Connect GitHub to your account or organization.
 2. Select the repositories that DS Pro should have access to.
 3. Configure the GitHub repository under Settings after the connection has been established.
+
+### Step 3: Push your Figma Variables directly to GitHub
+
+1. In the Figma Widget, click 🔄 to push to GitHub and transform Figma Variables into Design Tokens.

packages/api/src/router/resources.ts

@@ -46,7 +46,7 @@ export const resourcesRouter = createTRPCRouter({
 
   updateDesignTokens: authenticatedProcedure
     .input(
-      InsertResourcesSchema.pick({ name: true, projectId: true }).extend({
+      InsertResourcesSchema.pick({ name: true }).extend({
         // TODO: remove casting when zod validation is in place
         designTokens: z.unknown(),
       })
@@ -56,7 +56,7 @@ export const resourcesRouter = createTRPCRouter({
         .insert(Resources)
         .values({
           name: input.name,
-          projectId: input.projectId,
+          projectId: ctx.projectId,
           // TODO: remove casting when zod validation is in place
           designTokens: input.designTokens as Group,
         })

packages/api/src/trpc.ts

@@ -184,10 +184,17 @@ export const authenticatedProcedure = t.procedure
       const account = ctx.userId
         ? ((await tx.query.Accounts.findFirst({
             where: (accounts) => eq(accounts.userId, ctx.userId),
+            with: {
+              accountsToProjects: {
+                columns: {
+                  projectId: true,
+                },
+              },
+            },
           })) ?? null)
         : null;
 
-      if (!account) {
+      if (!account?.accountsToProjects[0]?.projectId) {
         throw new TRPCError({
           code: 'UNAUTHORIZED',
           message: "User doesn't have a valid account.",
@@ -199,6 +206,7 @@ export const authenticatedProcedure = t.procedure
           ...ctx,
           database: tx,
           account,
+          projectId: account.accountsToProjects[0].projectId,
         },
       });
 

packages/figma-utilities/src/events.ts

@@ -42,16 +42,6 @@ type Event = Implements<
       request: undefined;
       response: { credentials: Credentials | null };
     };
-
-    'set-project': {
-      request: undefined;
-      response: { id: string; name: string };
-    };
-
-    'open-projects-ui': {
-      request: undefined;
-      response: undefined;
-    };
   }
 >;
 

packages/figma-widget/src/ui/app.tsx

@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import { Auth } from './modules/auth';
 import { emit } from '@ds-project/figma-utilities';
 import { VariablesUI } from './modules/variables.ui';
-import { ProjectUI } from './modules/project/project.ui';
 import { Container } from './components/container';
 
 export function App() {
@@ -14,7 +13,6 @@ export function App() {
   return (
     <Container>
       <Auth />
-      <ProjectUI />
       <VariablesUI />
     </Container>
   );

packages/figma-widget/src/ui/modules/providers/index.tsx

@@ -1,7 +1,6 @@
 import { ApiProvider } from './api-provider';
 import { AuthProvider } from './auth-provider';
 import { ConfigProvider } from './config-provider';
-import { ProjectsProvider } from './projects-provider';
 
 interface ProvidersProps {
   children: React.ReactNode;
@@ -11,9 +10,7 @@ export function Providers({ children }: ProvidersProps) {
   return (
     <ConfigProvider>
       <AuthProvider>
-        <ApiProvider>
-          <ProjectsProvider>{children}</ProjectsProvider>
-        </ApiProvider>
+        <ApiProvider>{children}</ApiProvider>
       </AuthProvider>
     </ConfigProvider>
   );

packages/figma-widget/src/ui/modules/variables.ui.tsx

@@ -4,18 +4,16 @@ import { useEffect } from 'react';
 import { api } from '@ds-project/api/react';
 import { useConfig } from './providers/config-provider';
 import { handle } from '@ds-project/figma-utilities';
-import { useProjects } from './providers/projects-provider';
 
 export function VariablesUI() {
   const { fileName } = useConfig();
   const { mutateAsync: updateDesignTokens } =
     api.resources.updateDesignTokens.useMutation();
-  const { selectedProjectId } = useProjects();
 
   useEffect(() => {
     return handle('sync-variables', async ({ variables }) => {
       // Update the design tokens when the variables are synced
-      if (!fileName || !selectedProjectId) {
+      if (!fileName) {
         return {
           lastSyncedAt: null,
         };
@@ -24,7 +22,6 @@ export function VariablesUI() {
       await updateDesignTokens({
         designTokens: variables,
         name: fileName,
-        projectId: selectedProjectId,
       });
 
       return {

packages/figma-widget/src/widget/components/container.tsx

@@ -3,15 +3,9 @@ import { ConnectButton } from '../modules/auth/connect-button';
 import { Divider } from './divider';
 import { Link } from './link';
 
-interface ContainerProps extends AutoLayoutProps {
-  projectNode?: FigmaDeclarativeNode | FigmaDeclarativeNode[];
-}
+type ContainerProps = AutoLayoutProps;
 
-export const Container = ({
-  children,
-  projectNode,
-  ...props
-}: ContainerProps) => {
+export const Container = ({ children, ...props }: ContainerProps) => {
   return (
     <AutoLayout
       name="Container"
@@ -40,8 +34,6 @@ export const Container = ({
           verticalAlignItems="center"
         >
           <Text fontWeight="bold">DS Pro</Text>
-          <Text fontWeight="extra-light">/</Text>
-          {projectNode}
         </AutoLayout>
 
         <AutoLayout width="fill-parent" height={1} />

packages/figma-widget/src/widget/hooks/ui.ts

@@ -1,8 +1,7 @@
-import { useSyncedCredentials, useSyncedLinkedProject } from '../modules/state';
+import { useSyncedCredentials } from '../modules/state';
 import { once } from '@ds-project/figma-utilities';
 
 export function useUI() {
-  const [syncedLinkedProject] = useSyncedLinkedProject();
   const [syncedCredentials] = useSyncedCredentials();
 
   const open = async (options: ShowUIOptions = {}) => {
@@ -20,7 +19,6 @@ export function useUI() {
         __html__.replace(
           '%__SHOW_UI_DATA__%',
           JSON.stringify({
-            projectId: syncedLinkedProject?.id ?? null,
             fileName: figma.root.name,
             credentials: syncedCredentials,
           })