From 18dc85ddc8e43367849dfc0e96d8b1bb322e61ad Mon Sep 17 00:00:00 2001 From: popdrazvan Date: Wed, 20 Nov 2024 15:48:33 +0200 Subject: [PATCH 01/20] changes --- packages/tokens-studio-for-figma/package.json | 4 +- .../StorageItemForm/TokensStudioForm.tsx | 150 +- .../src/app/store/models/tokenState.tsx | 245 +- .../providers/tokens-studio/tokensStudio.tsx | 19 +- .../src/app/store/remoteTokens.tsx | 65 +- .../src/i18n/lang/en/storage.json | 4 +- .../src/storage/RemoteTokenStorage.ts | 43 +- .../src/storage/TokensStudioTokenStorage.ts | 527 ++-- .../tokensStudio/createTokenInTokensStudio.ts | 50 +- .../createTokenSetInTokensStudio.ts | 16 +- .../deleteTokenSetFromTokensStudio.ts | 10 +- .../duplicateTokenInTokensStudio.ts | 40 +- .../graphql/createTokenSetMutation.ts | 16 +- .../graphql/deleteThemeGroupMutation.ts | 25 +- .../graphql/deleteTokenSetMutation.ts | 10 +- .../tokensStudio/graphql/getOrgsQuery.ts | 18 + .../graphql/getProjectDataQuery.ts | 55 +- .../src/storage/tokensStudio/graphql/index.ts | 1 + .../graphql/updateThemeGroupMutation.ts | 25 +- .../graphql/updateTokenSetMutation.ts | 17 +- .../deleteTheme.ts | 8 +- .../updateThemeGroupsInTokensStudio/index.ts | 211 +- .../saveTheme.ts | 12 +- .../updateThemeGroupName.ts | 6 +- .../updateTokenSetInTokensStudio.ts | 20 +- .../tokensStudio/utils/tokensStudioToToken.ts | 96 +- .../src/types/StorageType.ts | 1 + .../src/types/ThemeObject.ts | 17 +- .../src/utils/themeListToTree.ts | 34 +- .../src/utils/tokenHelpers.ts | 49 +- yarn.lock | 2136 ++++++++++------- 31 files changed, 2345 insertions(+), 1585 deletions(-) create mode 100644 packages/tokens-studio-for-figma/src/storage/tokensStudio/graphql/getOrgsQuery.ts diff --git a/packages/tokens-studio-for-figma/package.json b/packages/tokens-studio-for-figma/package.json index b16594d74..2dc734afa 100644 --- a/packages/tokens-studio-for-figma/package.json +++ b/packages/tokens-studio-for-figma/package.json @@ -61,7 +61,7 @@ "@supabase/supabase-js": "^2.0.5", "@supernovaio/supernova-sdk": "^1.9.3", "@tokens-studio/graph-engine": "^0.17.5", - "@tokens-studio/sdk": "^1.2.1", + "@tokens-studio/sdk": "^2.0.0-alpha.0", "@tokens-studio/tokens": "0.2.5", "@tokens-studio/types": "0.5.1", "@tokens-studio/ui": "0.9.0", @@ -92,6 +92,7 @@ "i18next": "^23.2.3", "iconoir-react": "^7.3.0", "ignore-styles": "^5.0.1", + "is-plain-obj": "^4.1.0", "js-yaml": "^4.1.0", "json5": "^2.2.3", "jszip": "^3.10.0", @@ -138,6 +139,7 @@ "rooks": "^6.4.2", "set-value": "^3.0.3", "storyblok-js-client": "^3.3.1", + "style-dictionary": "^4.2.0", "use-debounce": "^6.0.1", "uuid": "^9.0.0", "zod": "^3.22.3" diff --git a/packages/tokens-studio-for-figma/src/app/components/StorageItemForm/TokensStudioForm.tsx b/packages/tokens-studio-for-figma/src/app/components/StorageItemForm/TokensStudioForm.tsx index 85d5638f2..170bc0bd9 100644 --- a/packages/tokens-studio-for-figma/src/app/components/StorageItemForm/TokensStudioForm.tsx +++ b/packages/tokens-studio-for-figma/src/app/components/StorageItemForm/TokensStudioForm.tsx @@ -1,10 +1,21 @@ import React from 'react'; import zod from 'zod'; import { - Box, Button, FormField, Heading, IconButton, Label, Link, Stack, Text, TextInput, + Box, + Button, + FormField, + Heading, + IconButton, + Label, + Link, + Select, + Stack, + Text, + TextInput, } from '@tokens-studio/ui'; import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons'; import { useTranslation } from 'react-i18next'; +import { create, Organization } from '@tokens-studio/sdk'; import { StorageProviderType } from '@/constants/StorageProviderType'; import { StorageTypeFormValues } from '@/types/StorageType'; import { generateId } from '@/utils/generateId'; @@ -12,6 +23,7 @@ import { ChangeEventHandler } from './types'; import { ErrorMessage } from '../ErrorMessage'; import TokensStudioWord from '@/icons/tokensstudio-word.svg'; import { styled } from '@/stitches.config'; +import { GET_ORGS_QUERY } from '@/storage/tokensStudio/graphql'; const StyledTokensStudioWord = styled(TokensStudioWord, { width: '200px', @@ -28,10 +40,10 @@ type Props = { errorMessage?: string; }; -export default function TokensStudioForm({ - onChange, onSubmit, onCancel, values, hasErrored, errorMessage, -}: Props) { +export default function TokensStudioForm({ onChange, onSubmit, onCancel, values, hasErrored, errorMessage }: Props) { const { t } = useTranslation(['storage']); + const [fetchOrgsError, setFetchOrgsError] = React.useState(null); + const [orgData, setOrgData] = React.useState([]); const syncGuideUrl = 'tokens-studio'; const [isMasked, setIsMasked] = React.useState(true); const [showTeaser, setShowTeaser] = React.useState(true); @@ -50,6 +62,7 @@ export default function TokensStudioForm({ id: zod.string(), secret: zod.string(), internalId: zod.string().optional(), + orgId: zod.string(), }); const validationResult = zodSchema.safeParse(values); if (validationResult.success) { @@ -57,6 +70,7 @@ export default function TokensStudioForm({ ...validationResult.data, internalId: validationResult.data.internalId || generateId(24), } as ValidatedFormValues; + console.log('formFields', formFields); onSubmit(formFields); } }, @@ -73,20 +87,81 @@ export default function TokensStudioForm({ setShowTeaser(false); }, []); - return showTeaser ? ( - - - - A dedicated design tokens management platform - We are working a dedicated design tokens management platform built on our powerful node-based graph engine including plug and play token transformation - suitable for enterprises! Still in early access, sign up for the waitlist! - Learn more - - + const fetchOrgData = React.useCallback(async () => { + try { + const client = create({ + host: process.env.API_HOST || 'localhost:4200', + secure: process.env.NODE_ENV !== 'development', + auth: `Bearer ${values.secret}`, + }); + const result = await client.query({ + query: GET_ORGS_QUERY, + }); + if (result.data?.organizations) { + setOrgData(result.data.organizations.data as Organization[]); + } + } catch (error) { + setFetchOrgsError('Error fetching organization data. Please check your PAT.'); + } + }, [values.secret]); + + const orgOptions = React.useMemo( + () => + orgData?.map((org) => ({ + label: org.name, + value: org.id, + })), + [orgData], + ); + + const onOrgChange = React.useCallback( + (value: string) => { + onChange({ target: { name: 'orgId', value } }); + }, + [onChange], + ); + + const projectOptions = React.useMemo(() => { + if (!orgData) return []; + const org = orgData.find((org) => org.id === values.orgId); + if (!org) return []; + return org.projects.data.map((project) => ({ + label: project.name, + value: project.id, + })); + }, [orgData, values.orgId]); + + const selectedOrg = orgOptions?.find((org) => org.value === values.orgId); + + const selectedProject = projectOptions?.find((project) => project.value === values.id); + + const onProjectChange = React.useCallback( + (value: string) => { + onChange({ target: { name: 'id', value } }); + }, + [onChange], + ); + + return showTeaser ? ( + + + + A dedicated design tokens management platform + + We are working a dedicated design tokens management platform built on our powerful node-based graph engine + including plug and play token transformation - suitable for enterprises! Still in early access, sign up for + the waitlist! + + + Learn more + - ):( + + + ) : (
- + {t('providers.tokensstudio.descriptionFirstPart')}{' '} : } /> - )} + } /> + {fetchOrgsError && {fetchOrgsError}} - - - - + {orgOptions?.length > 0 && ( + + +
+ +
+ + )} + + {projectOptions?.length > 0 && ( + + +
+ +
+ + )}