Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

metrics update #3141

Merged
merged 5 commits into from
Sep 19, 2024
Merged

metrics update #3141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
690f860
move pushTokens to below switch
six7 Sep 12, 2024
47c1849
update push and pull metrics
six7 Sep 12, 2024
da04818
update import, create of variables and create styles
six7 Sep 12, 2024
e7733ee
introduce other settings and format
six7 Sep 12, 2024
cd30dca
Merge remote-tracking branch 'origin/main' into six7/metrics-update
six7 Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions packages/tokens-studio-for-figma/src/app/components/ImportedTokensDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { ImportToken } from '@/types/tokens';
import Text from './Text';
import Accordion from './Accordion';
import { Count } from './Count';
import { track } from '@/utils/analytics';

function NewOrExistingToken({
token,
Expand Down Expand Up @@ -164,6 +165,27 @@ export default function ImportedTokensDialog() {
// Update all existing tokens, and create new ones
importMultipleTokens({ multipleUpdatedTokens, multipleNewTokens });

const combinedTokens = [...multipleUpdatedTokens, ...multipleNewTokens];

const uniqueCollectionCount = combinedTokens.reduce((acc, token) => {
if (token.parent && !acc.includes(token.parent)) {
acc.push(token.parent);
}
return acc;
}, [] as string[]).length;

track('Import variables', {
totalCount: multipleUpdatedTokens.length + multipleNewTokens.length,
updatedCount: multipleUpdatedTokens.length,
newCount: multipleNewTokens.length,
colorTokens: combinedTokens.filter((token) => token.type === 'color').length,
textTokens: combinedTokens.filter((token) => token.type === 'text').length,
numberTokens: combinedTokens.filter((token) => token.type === 'number').length,
booleanTokens: combinedTokens.filter((token) => token.type === 'boolean').length,
dimensionTokens: combinedTokens.filter((token) => token.type === 'dimension').length,
collectionCount: uniqueCollectionCount,
});

setUpdatedTokens([]);
setNewTokens([]);
}, [activeTokenSet, importMultipleTokens, newTokens, updatedTokens]);
Expand All @@ -178,6 +200,7 @@ export default function ImportedTokensDialog() {
description: token.description,
shouldUpdateDocument: false,
});
track('Import single variable', { type: token.type });
setNewTokens(newTokens.filter((newToken) => newToken.name !== token.name));
}, [newTokens, activeTokenSet, createSingleToken]);

Expand All @@ -191,6 +214,8 @@ export default function ImportedTokensDialog() {
description: token.description,
shouldUpdateDocument: false,
});
track('Update single variable', { type: token.type });

setUpdatedTokens(updatedTokens.filter((updatedToken) => updatedToken.name !== token.name));
}, [updatedTokens, editSingleToken, activeTokenSet]);

Expand Down
1 change: 0 additions & 1 deletion packages/tokens-studio-for-figma/src/app/components/Initiator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ export function Initiator() {
case MessageFromPluginTypes.VARIABLES: {
const { values } = pluginMessage;
if (values) {
track('Import variables');
dispatch.tokenState.setTokensFromVariables(values);
dispatch.uiState.setActiveTab(Tabs.TOKENS);
}
Expand Down
43 changes: 32 additions & 11 deletions packages/tokens-studio-for-figma/src/app/store/remoteTokens.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,6 @@
async ({
context = api, featureFlags, usedTokenSet, activeTheme, collapsedTokenSets, updateLocalTokens = false,
}: PullTokensOptions) => {
track('pullTokens', { provider: context.provider });
showPullDialog('loading');
let remoteData: RemoteResponseData<unknown> | null = null;
switch (context.provider) {
Expand Down Expand Up @@ -241,6 +240,22 @@
}
}
}
try {
if (remoteData?.status === 'success') {
const setCount = Object.keys(remoteData.tokens).length;
const tokensCount = Object.values(remoteData.tokens).reduce((acc, set) => acc + set.length, 0);
const themeCount = Object.keys(remoteData.themes).length;
const tokenFormat = getFormat();
track('pullTokens', {
provider: context.provider, setCount, tokensCount, themeCount, tokenFormat,
});
} else {
track('pullTokens failure', { provider: context.provider });
}
} catch (e) {
console.error(e);

Check warning

Code scanning / ESLint

disallow the use of `console` Warning

Unexpected console statement.
}

dispatch.tokenState.resetChangedState();
closePullDialog();
return remoteData;
Expand Down Expand Up @@ -333,7 +348,6 @@
const pushTokens = useCallback(
async ({ context = api, overrides }: { context?: StorageTypeCredentials, overrides?: PushOverrides } = {}) => {
const isFolder = 'filePath' in context && !context.filePath?.endsWith('.json');
track('pushTokens', { provider: context.provider, isFolder });
let pushResult;
switch (context.provider) {
case StorageProviderType.GITHUB: {
Expand Down Expand Up @@ -363,19 +377,26 @@
default:
throw new Error('Not implemented');
}
try {
if (pushResult?.status === 'success') {
const setCount = Object.keys(tokens).length;
const tokensCount = Object.values(tokens).reduce((acc, set) => acc + set.length, 0);
const themeCount = Object.keys(themes).length;
const tokenFormat = getFormat();
track('pushTokens', {
provider: context.provider, isFolder, setCount, tokensCount, themeCount, tokenFormat,
});
} else {
track('pushTokens failure', { provider: context.provider, isFolder });
}
} catch (e) {
console.error(e);

Check warning

Code scanning / ESLint

disallow the use of `console` Warning

Unexpected console statement.
}
if (pushResult.status && pushResult.status === 'failure') {
notifyToUI(pushResult.errorMessage, { error: true });
}
},
[
api,
pushTokensToGitHub,
pushTokensToGitLab,
pushTokensToBitbucket,
pushTokensToADO,
pushTokensToSupernova,
pushTokensToTokensStudio,
],
[api, pushTokensToGitHub, pushTokensToGitLab, pushTokensToBitbucket, pushTokensToADO, pushTokensToSupernova, pushTokensToTokensStudio, tokens, themes],
);

const addNewProviderItem = useCallback(
Expand Down
17 changes: 13 additions & 4 deletions packages/tokens-studio-for-figma/src/app/store/updateSources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { AsyncMessageChannel } from '@/AsyncMessageChannel';
import { StorageProviderType } from '@/constants/StorageProviderType';
import { StorageType, StorageTypeCredentials } from '@/types/StorageType';
import { defaultTokenResolver } from '@/utils/TokenResolver';
import { TokenFormatOptions } from '@/plugin/TokenFormatStoreClass';
import { getFormat, TokenFormatOptions } from '@/plugin/TokenFormatStoreClass';

type UpdateRemoteTokensPayload = {
provider: StorageProviderType;
Expand Down Expand Up @@ -59,10 +59,12 @@ async function updateRemoteTokens({
dispatch,
}: UpdateRemoteTokensPayload) {
if (!context) return;
const setCount = Object.keys(tokens)?.length;
const tokensCount = Object.values(tokens).reduce((acc, set) => acc + set.length, 0);
const themeCount = Object.keys(themes).length;
const tokenFormat = getFormat();
switch (provider) {
case StorageProviderType.JSONBIN: {
track('pushTokens', { provider: StorageProviderType.JSONBIN });

notifyToUI('Updating JSONBin...');
await updateJSONBinTokens({
themes,
Expand All @@ -73,10 +75,13 @@ async function updateRemoteTokens({
storeTokenIdInJsonEditor,
dispatch,
});
track('pushTokens', {
provider: StorageProviderType.JSONBIN, setCount, tokensCount, themeCount, tokenFormat,
});

break;
}
case StorageProviderType.GENERIC_VERSIONED_STORAGE: {
track('pushTokens', { provider: StorageProviderType.GENERIC_VERSIONED_STORAGE });
notifyToUI('Updating Generic Remote...');
await updateGenericVersionedTokens({
themes,
Expand All @@ -88,6 +93,10 @@ async function updateRemoteTokens({
dispatch,
});

track('pushTokens', {
provider: StorageProviderType.GENERIC_VERSIONED_STORAGE, setCount, tokensCount, themeCount, tokenFormat,
});

break;
}
case StorageProviderType.GITHUB: {
Expand Down
76 changes: 53 additions & 23 deletions packages/tokens-studio-for-figma/src/app/store/useTokens.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default function useTokens() {

const pullVariables = useCallback(async () => {
const userDecision = await confirm({
text: 'Import Variables',
text: 'Import variables',
description: 'Sets will be created for each variable mode.',
choices: [
{ key: 'useDimensions', label: 'Convert numbers to dimensions', enabled: false },
Expand All @@ -199,7 +199,6 @@ export default function useTokens() {
});

if (userDecision) {
track('Import variables');
AsyncMessageChannel.ReactInstance.message({
type: AsyncMessageTypes.PULL_VARIABLES,
options: {
Expand Down Expand Up @@ -370,13 +369,6 @@ export default function useTokens() {
const shouldCreateStyles = (settings.stylesTypography || settings.stylesColor || settings.stylesEffect) && selectedSets.length > 0;
if (!shouldCreateStyles) return;

track('createStyles', {
type: 'sets',
textStyles: settings.stylesTypography,
colorStyles: settings.stylesColor,
effectStyles: settings.stylesEffect,
});

dispatch.uiState.startJob({
name: BackgroundJobs.UI_CREATE_STYLES,
isInfinite: true,
Expand Down Expand Up @@ -422,6 +414,20 @@ export default function useTokens() {
settings,
}));

track('createStyles', {
type: 'sets',
textStyles: settings.stylesTypography,
colorStyles: settings.stylesColor,
effectStyles: settings.stylesEffect,
setCount: selectedSets.length,
totalStyles: tokensToCreate.length,
removeStylesAndVariablesWithoutConnection: settings.removeStylesAndVariablesWithoutConnection,
renameExistingStylesAndVariables: settings.renameExistingStylesAndVariables,
ignoreFirstPartForStyles: settings.ignoreFirstPartForStyles,
prefixStylesWithThemeName: settings.prefixStylesWithThemeName,
createStylesWithVariableReferences: settings.createStylesWithVariableReferences,
});

dispatch.uiState.completeJob(BackgroundJobs.UI_CREATE_STYLES);
},
[tokens, settings, dispatch.uiState],
Expand All @@ -432,18 +438,12 @@ export default function useTokens() {
const shouldCreateStyles = (settings.stylesTypography || settings.stylesColor || settings.stylesEffect) && selectedThemes.length > 0;
if (!shouldCreateStyles) return;

track('createStyles', {
type: 'themes',
textStyles: settings.stylesTypography,
colorStyles: settings.stylesColor,
effectStyles: settings.stylesEffect,
});

dispatch.uiState.startJob({
name: BackgroundJobs.UI_CREATE_STYLES,
isInfinite: true,
});

let totalTokensToCreate = 0;
// Iterate over all given selectedThemes, and combine the selectedTokenSets.
const overallConfig = getOverallConfig(themes, selectedThemes);

Expand Down Expand Up @@ -488,6 +488,8 @@ export default function useTokens() {
return acc;
}, []);

totalTokensToCreate += tokensToCreate.length;

const createStylesResult = await wrapTransaction({ name: 'createStyles' }, async () => AsyncMessageChannel.ReactInstance.message({
type: AsyncMessageTypes.CREATE_STYLES,
tokens: tokensToCreate,
Expand All @@ -505,6 +507,19 @@ export default function useTokens() {
}
}

track('createStyles', {
type: 'themes',
textStyles: settings.stylesTypography,
colorStyles: settings.stylesColor,
effectStyles: settings.stylesEffect,
themesCount: selectedThemes.length,
totalTokens: totalTokensToCreate,
removeStylesAndVariablesWithoutConnection: settings.removeStylesAndVariablesWithoutConnection,
renameExistingStylesAndVariables: settings.renameExistingStylesAndVariables,
ignoreFirstPartForStyles: settings.ignoreFirstPartForStyles,
prefixStylesWithThemeName: settings.prefixStylesWithThemeName,
createStylesWithVariableReferences: settings.createStylesWithVariableReferences,
});
// Remove styles that aren't in the theme or in the exposed token object
if (settings.removeStylesAndVariablesWithoutConnection) {
const uniqueMergedStyleIds: string[] = Array.from(new Set([
Expand Down Expand Up @@ -637,9 +652,6 @@ export default function useTokens() {
&& selectedSets.length > 0;
if (!shouldCreateVariables) return;

track('createVariables', {
type: 'sets',
});
dispatch.uiState.startJob({
name: BackgroundJobs.UI_CREATEVARIABLES,
isInfinite: true,
Expand All @@ -650,6 +662,17 @@ export default function useTokens() {
statExtractor: async (result, transaction) => {
const data = await result;
if (data) {
track('createVariables', {
type: 'sets',
totalVariables: data.totalVariables,
setCount: selectedSets.length,
variablesColor: settings.variablesColor,
variablesNumber: settings.variablesNumber,
variablesString: settings.variablesString,
variablesBoolean: settings.variablesBoolean,
removeStylesAndVariablesWithoutConnection: settings.removeStylesAndVariablesWithoutConnection,
renameExistingStylesAndVariables: settings.renameExistingStylesAndVariables,
});
transaction.setMeasurement('variables', data.totalVariables, '');
}
},
Expand All @@ -676,10 +699,6 @@ export default function useTokens() {
&& selectedThemes.length > 0;
if (!shouldCreateVariables) return;

track('createVariables', {
type: 'themes',
});

dispatch.uiState.startJob({
name: BackgroundJobs.UI_CREATEVARIABLES,
isInfinite: true,
Expand All @@ -690,6 +709,17 @@ export default function useTokens() {
statExtractor: async (result, transaction) => {
const data = await result;
if (data) {
track('createVariables', {
type: 'themes',
totalVariables: data.totalVariables,
themeCount: selectedThemes.length,
variablesColor: settings.variablesColor,
variablesNumber: settings.variablesNumber,
variablesString: settings.variablesString,
variablesBoolean: settings.variablesBoolean,
removeStylesAndVariablesWithoutConnection: settings.removeStylesAndVariablesWithoutConnection,
renameExistingStylesAndVariables: settings.renameExistingStylesAndVariables,
});
transaction.setMeasurement('variables', data.totalVariables, '');
}
},
Expand Down
4 changes: 2 additions & 2 deletions packages/tokens-studio-for-figma/src/i18n/lang/en/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,9 @@
"styles": "Styles",
"stylesAndVariables": "Styles & Variables",
"syncStyles": "Sync styles",
"exportStylesAndVariables": "Export styles & variables",
"exportStylesAndVariables": "Export styles & variables to Figma",
"import": "Import",
"importStyles": "Import Styles",
"importStyles": "Import styles",
"createStyles": "Create styles",
"importVariables": "Import variables",
"createVariables": "Create variables",
Expand Down
Loading