diff --git a/apps/engine/src/app/app/@connections/getting-started/quickstart/page.mdx b/apps/engine/src/app/app/@connections/getting-started/quickstart/page.mdx
index 6229e50e..a9e286c6 100644
--- a/apps/engine/src/app/app/@connections/getting-started/quickstart/page.mdx
+++ b/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.
diff --git a/packages/api/src/router/resources.ts b/packages/api/src/router/resources.ts
index 4a8540b9..d82d89eb 100644
--- a/packages/api/src/router/resources.ts
+++ b/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,
})
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
index f9e626d7..96436075 100644
--- a/packages/api/src/trpc.ts
+++ b/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,
},
});
diff --git a/packages/figma-utilities/src/events.ts b/packages/figma-utilities/src/events.ts
index f47ba568..51ae16b9 100644
--- a/packages/figma-utilities/src/events.ts
+++ b/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;
- };
}
>;
diff --git a/packages/figma-widget/src/ui/app.tsx b/packages/figma-widget/src/ui/app.tsx
index c697cc6e..205e0f5d 100644
--- a/packages/figma-widget/src/ui/app.tsx
+++ b/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 (
-
);
diff --git a/packages/figma-widget/src/ui/modules/link-design-system/index.ts b/packages/figma-widget/src/ui/modules/link-design-system/index.ts
deleted file mode 100644
index 659f12c0..00000000
--- a/packages/figma-widget/src/ui/modules/link-design-system/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './link-design-system';
diff --git a/packages/figma-widget/src/ui/modules/link-design-system/link-design-system.tsx b/packages/figma-widget/src/ui/modules/link-design-system/link-design-system.tsx
deleted file mode 100644
index 97310811..00000000
--- a/packages/figma-widget/src/ui/modules/link-design-system/link-design-system.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from '@ds-project/components';
-import { useCallback } from 'react';
-import { useProjects } from '../providers/projects-provider';
-
-export function LinkDesignSystem() {
- const {
- isLoading: isProjectsLoading,
- linkProject,
- projects,
- selectedProjectId,
- } = useProjects();
-
- const onValueChange = useCallback(
- (projectId: string) => {
- linkProject(projectId);
- },
- [linkProject]
- );
-
- return (
-
- );
-}
diff --git a/packages/figma-widget/src/ui/modules/project/project.ui.tsx b/packages/figma-widget/src/ui/modules/project/project.ui.tsx
deleted file mode 100644
index eab70efc..00000000
--- a/packages/figma-widget/src/ui/modules/project/project.ui.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useProjects } from '../providers/projects-provider';
-import { once } from '@ds-project/figma-utilities';
-import { Icons, Separator, Text } from '@ds-project/components';
-
-export function ProjectUI() {
- const [isVisible, setIsVisible] = useState(false);
- const {
- isLoading: isProjectsLoading,
- linkProject,
- projects,
- selectedProjectId,
- } = useProjects();
-
- useEffect(() => {
- return once('set-project', () => {
- setIsVisible(true);
- });
- }, []);
-
- const onValueChange = useCallback(
- (projectId: string) => {
- linkProject(projectId);
- },
- [linkProject]
- );
-
- if (!isVisible) return null;
-
- if (isProjectsLoading) return
Loading...
;
-
- return (
-
-
- Select project
-
-
- {projects?.map(({ id, name }, index) => (
- -
-
- {index < projects.length - 1 ? : null}
-
- ))}
-
-
- );
-}
diff --git a/packages/figma-widget/src/ui/modules/providers/index.tsx b/packages/figma-widget/src/ui/modules/providers/index.tsx
index bdaa48e8..87f97cf0 100644
--- a/packages/figma-widget/src/ui/modules/providers/index.tsx
+++ b/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 (
-
- {children}
-
+ {children}
);
diff --git a/packages/figma-widget/src/ui/modules/providers/projects-provider.tsx b/packages/figma-widget/src/ui/modules/providers/projects-provider.tsx
deleted file mode 100644
index aa81707e..00000000
--- a/packages/figma-widget/src/ui/modules/providers/projects-provider.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
- createContext,
- useCallback,
- useContext,
- useMemo,
- useState,
-} from 'react';
-
-import { api } from '@ds-project/api/react';
-import { useConfig } from './config-provider';
-import type { SelectProjects } from '../../../../../database/src/schema/projects';
-import { emit } from '@ds-project/figma-utilities';
-import { useAuth } from './auth-provider';
-
-interface ContextType {
- selectedProjectId: string | null;
- linkProject: (projectId: string) => void;
- projects?: Pick[];
- isLoading: boolean;
-}
-
-const Context = createContext({
- isLoading: false,
- // eslint-disable-next-line @typescript-eslint/no-empty-function
- linkProject: () => {},
- selectedProjectId: null,
- projects: undefined,
-});
-
-export function ProjectsProvider({ children }: { children: React.ReactNode }) {
- const { fileName, projectId: defaultProjectId } = useConfig();
- const [selectedProjectId, setSelectedProjectId] = useState(
- defaultProjectId
- );
- const { state } = useAuth();
- const { data: projects, isLoading: isProjectsLoading } =
- api.projects.getAll.useQuery(undefined, {
- enabled: state === 'authorized',
- });
-
- const { mutateAsync: linkResource } =
- api.resources.linkToProject.useMutation();
-
- const linkProject = useCallback(
- async (projectId: string) => {
- const linkedProjectName = projects?.find(
- (project) => project.id === projectId
- )?.name;
- if (!linkedProjectName || !fileName) return;
-
- try {
- await linkResource({ projectId, name: fileName });
-
- setSelectedProjectId(projectId);
- return emit('set-project', { id: projectId, name: linkedProjectName });
- } catch (error) {
- console.error('Error linking project', { error });
- }
- },
- [fileName, linkResource, projects]
- );
-
- const value = useMemo(
- () => ({
- linkProject,
- selectedProjectId,
- isLoading: isProjectsLoading,
- projects: projects?.map(({ id, name }) => ({ id, name })),
- }),
- [linkProject, selectedProjectId, isProjectsLoading, projects]
- );
-
- return {children};
-}
-
-export function useProjects() {
- const context = useContext(Context);
-
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- If provider is not available, this will be undefined
- if (!context) {
- throw new Error('useProject should be used within ');
- }
-
- return context;
-}
diff --git a/packages/figma-widget/src/ui/modules/variables.ui.tsx b/packages/figma-widget/src/ui/modules/variables.ui.tsx
index 3cbf11f4..5bbb51cb 100644
--- a/packages/figma-widget/src/ui/modules/variables.ui.tsx
+++ b/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 {
diff --git a/packages/figma-widget/src/widget/components/container.tsx b/packages/figma-widget/src/widget/components/container.tsx
index a685aab4..8f68a949 100644
--- a/packages/figma-widget/src/widget/components/container.tsx
+++ b/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 (
DS Pro
- /
- {projectNode}
diff --git a/packages/figma-widget/src/widget/hooks/ui.ts b/packages/figma-widget/src/widget/hooks/ui.ts
index 9cbc0d6c..a1e93c23 100644
--- a/packages/figma-widget/src/widget/hooks/ui.ts
+++ b/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,
})
diff --git a/packages/figma-widget/src/widget/main.tsx b/packages/figma-widget/src/widget/main.tsx
index d7a3feea..95b134bf 100644
--- a/packages/figma-widget/src/widget/main.tsx
+++ b/packages/figma-widget/src/widget/main.tsx
@@ -1,23 +1,17 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { Container } from './components/container';
import { registerWidget } from './lib/widget';
-import { ProjectSelect } from './modules/project/project-select';
import { AuthEvents } from './modules/auth/auth.events';
import { AuthWarning } from './modules/auth/auth-warning';
-import { ProjectEvents } from './modules/project/project.events';
import { VariablesEvents } from './modules/variables/variables.events';
-import { ProjectWarning } from './modules/project/project-warning';
import { VariablesSync } from './modules/variables/variables-sync';
function Widget() {
return (
- }>
+
-
-
);
diff --git a/packages/figma-widget/src/widget/modules/project/project-label.tsx b/packages/figma-widget/src/widget/modules/project/project-label.tsx
deleted file mode 100644
index 0ce77d95..00000000
--- a/packages/figma-widget/src/widget/modules/project/project-label.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Button } from '../../components/button';
-import { ProjectSelector } from '../../components/project';
-import { Text } from '../../lib/widget';
-import { useProjectActions } from './project.actions';
-
-export function ProjectLabel() {
- const { selectProject, selectedProject } = useProjectActions();
-
- if (selectedProject) {
- return (
-
- );
- }
-
- return (
-
- );
-}
diff --git a/packages/figma-widget/src/widget/modules/project/project-select.tsx b/packages/figma-widget/src/widget/modules/project/project-select.tsx
deleted file mode 100644
index c685c97f..00000000
--- a/packages/figma-widget/src/widget/modules/project/project-select.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Button } from '../../components/button';
-import { caretIcon } from '../../icons/caret';
-import { AutoLayout, SVG, Text } from '../../lib/widget';
-import { useProjectActions } from './project.actions';
-
-export function ProjectSelect() {
- const { selectProject, selectedProject, isReady } = useProjectActions();
-
- if (!isReady) {
- return null;
- }
-
- if (selectedProject) {
- return (
-
- );
- }
-
- return (
-
- );
-}
diff --git a/packages/figma-widget/src/widget/modules/project/project-warning.tsx b/packages/figma-widget/src/widget/modules/project/project-warning.tsx
deleted file mode 100644
index ca6b2ae7..00000000
--- a/packages/figma-widget/src/widget/modules/project/project-warning.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Text } from '../../lib/widget';
-import { useProjectActions } from './project.actions';
-
-export function ProjectWarning() {
- const { selectedProject, isReady } = useProjectActions();
-
- if (!isReady) {
- // Project is not ready to be selected
- return null;
- }
-
- if (selectedProject) {
- // Project has been selected
- return null;
- }
-
- // Project is ready to be selected
- return (
-
- ☝️ Select a project to get started
-
- );
-}
diff --git a/packages/figma-widget/src/widget/modules/project/project.actions.tsx b/packages/figma-widget/src/widget/modules/project/project.actions.tsx
deleted file mode 100644
index ba5c6850..00000000
--- a/packages/figma-widget/src/widget/modules/project/project.actions.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { requestAsync } from '@ds-project/figma-utilities';
-import { useUI } from '../../hooks/ui';
-import { useSyncedLinkedProject } from '../state';
-import { useAuthActions } from '../auth/auth.actions';
-
-export function useProjectActions() {
- const { open, close } = useUI();
- const [selectedProject, setSyncedLinkedProject] = useSyncedLinkedProject();
- const { isConnected } = useAuthActions();
- const isReady = isConnected;
-
- const selectProject = async () => {
- await open({ visible: true });
-
- try {
- const project = await requestAsync('set-project', undefined);
- setSyncedLinkedProject(project);
- } finally {
- close();
- }
- };
-
- return {
- isReady,
- selectProject,
- selectedProject,
- };
-}
diff --git a/packages/figma-widget/src/widget/modules/project/project.events.tsx b/packages/figma-widget/src/widget/modules/project/project.events.tsx
deleted file mode 100644
index 5234c298..00000000
--- a/packages/figma-widget/src/widget/modules/project/project.events.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function ProjectEvents() {
- return null;
-}
diff --git a/packages/figma-widget/src/widget/modules/state.ts b/packages/figma-widget/src/widget/modules/state.ts
index b259f7e7..b30dc392 100644
--- a/packages/figma-widget/src/widget/modules/state.ts
+++ b/packages/figma-widget/src/widget/modules/state.ts
@@ -5,25 +5,16 @@ export const useSyncedCredentials = () => {
return useSyncedState('credentials', null);
};
-export const useSyncedLinkedProject = () => {
- return useSyncedState<{ name: string; id: string } | null>(
- 'projectName',
- null
- );
-};
-
export const useSyncedLastSyncedAt = () => {
return useSyncedState('lastSyncedAt', null);
};
export const useCleanupSyncedState = () => {
const [, setSyncedCredentials] = useSyncedCredentials();
- const [, setSyncedLinkedProject] = useSyncedLinkedProject();
const [, setSyncedLastSyncedAt] = useSyncedLastSyncedAt();
const cleanup = () => {
setSyncedCredentials(null);
- setSyncedLinkedProject(null);
setSyncedLastSyncedAt(null);
};
diff --git a/packages/figma-widget/src/widget/modules/variables/variables.actions.ts b/packages/figma-widget/src/widget/modules/variables/variables.actions.ts
index 7473dd29..78db960e 100644
--- a/packages/figma-widget/src/widget/modules/variables/variables.actions.ts
+++ b/packages/figma-widget/src/widget/modules/variables/variables.actions.ts
@@ -2,15 +2,13 @@ import { requestAsync } from '@ds-project/figma-utilities';
import { useUI } from '../../hooks/ui';
import { useSyncedLastSyncedAt } from '../state';
import { useAuthActions } from '../auth/auth.actions';
-import { useProjectActions } from '../project/project.actions';
import { extractDesignTokens } from '../design-tokens/extract-design-tokens';
export function useVariablesActions() {
const { open } = useUI();
const [lastSyncedAt, setLastSyncedAt] = useSyncedLastSyncedAt();
const { isConnected } = useAuthActions();
- const { selectedProject } = useProjectActions();
- const isReady = isConnected && selectedProject;
+ const isReady = isConnected;
const syncVariables = async () => {
const designTokens = await extractDesignTokens();