Release 131 (#1506)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tokens-studio-for-figma",
   "version": "1.0.0",
-  "plugin_version": "130",
+  "plugin_version": "131",
   "description": "Tokens Studio for Figma",
   "license": "MIT",
   "scripts": {

script/release.sh

@@ -1,4 +1,4 @@
-VERSION=figma-tokens@130
+VERSION=figma-tokens@131
 sentry-cli releases -p figma-tokens files "$VERSION" upload-sourcemaps --ext ts --ext tsx --ext map --ext js --ignore-file .sentryignore .
 sentry-cli releases set-commits "$VERSION" --auto
 sentry-cli releases finalize "$VERSION"

src/app/components/AppContainer/AppContainer.tsx

@@ -2,7 +2,6 @@ import React, {
   useCallback, useEffect, useState,
 } from 'react';
 import { useDispatch } from 'react-redux';
-import * as pjs from '../../../../package.json';
 import App from '../App';
 import FigmaLoading from '../FigmaLoading';
 import { AsyncMessageTypes, StartupMessage } from '@/types/AsyncMessages';
@@ -11,7 +10,6 @@ import { Tabs } from '@/constants/Tabs';
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { useStartupProcess } from './useStartupProcess';
 import { ProcessStepStatus } from '@/hooks';
-import { track } from '@/utils/analytics';
 import { withLDProviderWrapper } from '../LaunchDarkly';
 import { ApplicationInitSteps } from './ApplicationInitSteps';
 import ConfirmDialog from '../ConfirmDialog';
@@ -59,7 +57,6 @@ export const AppContainer = withLDProviderWrapper((params: Props) => {
       && startupProcess.currentStatus !== ProcessStepStatus.CANCELED
     ) {
       if (startupProcess.currentStep === null) {
-        track('Launched', { version: pjs.plugin_version });
         await startupProcess.start();
       } else if (startupProcess.currentStatus === ProcessStepStatus.DONE) {
         await startupProcess.next();

src/app/components/AppContainer/startupProcessSteps/__tests__/savePluginDataFactory.test.ts

@@ -12,7 +12,7 @@ describe('savePluginDataFactory', () => {
 
     const mockParams = {
       user: {
-        userId: 'uid:1234',
+        userId: 'figma:1234',
         figmaId: 'figma:1234',
         name: 'Jan Six',
       },

src/app/components/AppContainer/startupProcessSteps/pullTokensFactory.ts

@@ -13,6 +13,7 @@ import { notifyToUI } from '@/plugin/notifiers';
 import type useRemoteTokens from '@/app/store/remoteTokens';
 import { hasTokenValues } from '@/utils/hasTokenValues';
 import { BackgroundJobs } from '@/constants/BackgroundJobs';
+import { isGitProvider } from '@/utils/is';
 
 export function pullTokensFactory(
   store: Store<RootState>,
@@ -50,7 +51,8 @@ export function pullTokensFactory(
       if (matchingSet) {
         // found API credentials
         try {
-          track('Fetched from remote', { provider: matchingSet.provider });
+          const isMultifile = isGitProvider(matchingSet) && 'filePath' in matchingSet && !matchingSet.filePath.endsWith('.json');
+          track('Fetched from remote', { provider: matchingSet.provider, isMultifile });
           if (!matchingSet.internalId) {
             track('missingInternalId', { provider: matchingSet.provider });
           }

src/app/components/AppContainer/startupProcessSteps/savePluginDataFactory.ts

@@ -1,11 +1,21 @@
 import type { Dispatch } from '@/app/store';
 import type { StartupMessage } from '@/types/AsyncMessages';
-import { identify } from '@/utils/analytics';
+import { identify, track } from '@/utils/analytics';
+import * as pjs from '../../../../../package.json';
 
 export function savePluginDataFactory(dispatch: Dispatch, params: StartupMessage) {
   return async () => {
     const { user } = params;
     if (user) {
+      // initiate analytics
+      if (user.userId) {
+        identify({
+          userId: user.userId,
+          figmaId: user.userId,
+          name: user.name,
+        });
+      }
+      track('Launched', { version: pjs.plugin_version });
       const {
         width, height, showEmptyGroups, ...rest
       } = params.settings;
@@ -24,7 +34,6 @@ export function savePluginDataFactory(dispatch: Dispatch, params: StartupMessage
       dispatch.uiState.setOnboardingExplainerSyncProviders(params.onboardingExplainer.syncProviders);
       dispatch.uiState.setOnboardingExplainerInspect(params.onboardingExplainer.inspect);
       dispatch.settings.setUISettings(settings);
-      identify(user);
     } else {
       throw new Error('User not found');
     }

src/app/components/BranchSelector.tsx

@@ -38,6 +38,7 @@ import ProBadge from './ProBadge';
 import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { StorageTypeCredentials } from '@/types/StorageType';
+import { track } from '@/utils/analytics';
 
 const BranchSwitchMenuItemElement: React.FC<{
   branch: string
@@ -121,13 +122,15 @@ export default function BranchSelector() {
   }, [confirm]);
 
   const createBranchByChange = React.useCallback(() => {
+    track('Create new branch from current changes');
     setMenuOpened(false);
     setIsCurrentChanges(true);
     setStartBranch(currentBranch ?? null);
     setCreateBranchModalVisible(true);
   }, [currentBranch]);
 
   const createNewBranchFrom = React.useCallback(async (branch: string) => {
+    track('Create new branch from specific branch');
     setMenuOpened(false);
 
     if (hasChanges && await askUserIfPushChanges()) {
@@ -154,6 +157,7 @@ export default function BranchSelector() {
   }, [apiData, localApiState, pullTokens, usedTokenSet, activeTheme, dispatch]);
 
   const onBranchSelected = React.useCallback(async (branch: string) => {
+    track('Branch changed');
     if (hasChanges) {
       if (await askUserIfPushChanges()) {
         await changeAndPull(branch);

src/app/components/Footer.tsx

@@ -106,7 +106,7 @@ export default function Footer() {
       </Stack>
       <Stack direction="row" gap={4} align="center">
         <Box css={{ color: '$textMuted', fontSize: '$xsmall' }}>
-          {`V ${pjs.plugin_version}`}
+          <a href="https://tokens.studio/changelog" target="_blank" rel="noreferrer">{`V ${pjs.plugin_version}`}</a>
         </Box>
         <Stack direction="row" gap={1}>
           <ProBadge />

src/app/components/StartScreen.tsx

@@ -17,6 +17,7 @@ import { Tabs } from '@/constants/Tabs';
 import { StorageProviderType } from '@/constants/StorageProviderType';
 import Box from './Box';
 import { transformProviderName } from '@/utils/transformProviderName';
+import { track } from '@/utils/analytics';
 
 const StyledFigmaTokensLogo = styled(FigmaLetter, {
   width: '130px',
@@ -46,11 +47,18 @@ function StartScreen() {
   const storageType = useSelector(storageTypeSelector);
   const apiProviders = useSelector(apiProvidersSelector);
 
-  const onSetDefaultTokens = React.useCallback(() => {
+  const onSetEmptyTokens = React.useCallback(() => {
+    track('Start with empty set');
     dispatch.uiState.setActiveTab(Tabs.TOKENS);
     dispatch.tokenState.setEmptyTokens();
   }, [dispatch]);
 
+  const onSetDefaultTokens = React.useCallback(() => {
+    track('Start with exmaple set');
+    dispatch.uiState.setActiveTab(Tabs.TOKENS);
+    dispatch.tokenState.setDefaultTokens();
+  }, [dispatch]);
+
   const onSetSyncClick = React.useCallback(() => {
     if (storageType.provider === StorageProviderType.LOCAL) {
       return;
@@ -85,11 +93,11 @@ function StartScreen() {
         <Stack direction="column" gap={4}>
           <Heading size="large">Guides</Heading>
           <Stack direction="column" gap={3}>
-            <HelpfulLink href="https://docs.tokens.studio/getting-started" target="_blank">
+            <HelpfulLink href="https://docs.tokens.studio/getting-started?ref=startscreen" target="_blank">
               <BookmarkIcon />
               Getting started
             </HelpfulLink>
-            <HelpfulLink href="https://docs.tokens.studio/" target="_blank">
+            <HelpfulLink href="https://docs.tokens.studio/?ref=startscreen" target="_blank">
               <ReaderIcon />
               Documentation
             </HelpfulLink>
@@ -110,9 +118,14 @@ function StartScreen() {
             }}
           />
         ) : (
-          <Button id="button-configure" size="small" variant="primary" onClick={onSetDefaultTokens}>
-            Get started with a new file
-          </Button>
+          <Stack direction="row" gap={2}>
+            <Button id="button-configure" size="small" variant="primary" onClick={onSetEmptyTokens}>
+              New empty file
+            </Button>
+            <Button id="button-configure-preset" size="small" variant="ghost" onClick={onSetDefaultTokens}>
+              Load example
+            </Button>
+          </Stack>
         )}
         <Stack direction="row" align="center" gap={3}>
           <GitHubLogoIcon />

src/app/hooks/usePropertiesForType.ts

@@ -31,6 +31,24 @@ export function usePropertiesForTokenType(type: TokenTypes, value?: SingleToken[
           { label: 'Bottom Left', name: Properties.borderRadiusBottomLeft, disabled },
         );
         break;
+      case TokenTypes.BORDER:
+        properties.push(
+          {
+            label: 'All',
+            name: Properties.border,
+            clear: [
+              Properties.borderTop,
+              Properties.borderRight,
+              Properties.borderBottom,
+              Properties.borderLeft,
+            ],
+          },
+          { label: 'Top', name: Properties.borderTop, disabled },
+          { label: 'Right', name: Properties.borderRight, disabled },
+          { label: 'Bottom', name: Properties.borderBottom, disabled },
+          { label: 'Left', name: Properties.borderLeft, disabled },
+        );
+        break;
       case TokenTypes.BORDER_WIDTH:
         properties.push(
           {

src/constants/Properties.ts

@@ -12,6 +12,11 @@ export enum Properties {
   itemSpacing = 'itemSpacing',
   fill = 'fill',
   backgroundBlur = 'backgroundBlur',
+  border = 'border',
+  borderTop = 'borderTop',
+  borderRight = 'borderRight',
+  borderBottom = 'borderBottom',
+  borderLeft = 'borderLeft',
   borderColor = 'borderColor',
   borderRadius = 'borderRadius',
   borderRadiusTopLeft = 'borderRadiusTopLeft',
@@ -35,7 +40,6 @@ export enum Properties {
   paragraphSpacing = 'paragraphSpacing',
   textCase = 'textCase',
   dimension = 'dimension',
-  border = 'border',
   textDecoration = 'textDecoration',
   asset = 'asset',
   tokenValue = 'tokenValue',

src/plugin/node.ts

@@ -179,7 +179,7 @@ async function migrateTokens(entry: NodeManagerNode, values: MapValuesToTokensRe
   if (typeof values.border === 'string' && typeof tokens.border !== 'undefined') {
     values.borderColor = values.border;
     await updatePluginData({
-      entries: [entry], values: { [Properties.borderColor]: tokens.border, [Properties.border]: 'delete' },
+      entries: [entry], values: { [Properties.borderColor]: tokens.border, [Properties.border]: 'delete' }, shouldRemove: false,
     });
     await defaultNodeManager.updateNode(entry.node, (t) => (
       omit(t, [Properties.border])

src/plugin/setBorderValuesOnTarget.ts

@@ -4,13 +4,26 @@ import { isPrimitiveValue } from '@/utils/is';
 import { transformValue } from './helpers';
 import setColorValuesOnTarget from './setColorValuesOnTarget';
 
-export default function setBorderValuesOnTarget(target: BaseNode, token: Pick<SingleBorderToken, 'value'>) {
+export default function setBorderValuesOnTarget(target: BaseNode, token: Pick<SingleBorderToken, 'value'>, side?: 'top' | 'right' | 'bottom' | 'left') {
   const { value } = token;
   const { color, width, style } = value;
   try {
-    if ('strokeWeight' in target && typeof width !== 'undefined' && isPrimitiveValue(width)) {
+    if ('strokeWeight' in target && typeof width !== 'undefined' && isPrimitiveValue(width) && !side) {
       target.strokeWeight = transformValue(String(width), 'borderWidth');
     }
+    if ('strokeTopWeight' in target && typeof width !== 'undefined' && isPrimitiveValue(width) && side === 'top') {
+      target.strokeTopWeight = transformValue(String(width), 'borderWidth');
+    }
+    if ('strokeRightWeight' in target && typeof width !== 'undefined' && isPrimitiveValue(width) && side === 'right') {
+      target.strokeRightWeight = transformValue(String(width), 'borderWidth');
+    }
+    if ('strokeBottomWeight' in target && typeof width !== 'undefined' && isPrimitiveValue(width) && side === 'bottom') {
+      target.strokeBottomWeight = transformValue(String(width), 'borderWidth');
+    }
+    if ('strokeLeftWeight' in target && typeof width !== 'undefined' && isPrimitiveValue(width) && side === 'left') {
+      target.strokeLeftWeight = transformValue(String(width), 'borderWidth');
+    }
+
     if (typeof color !== 'undefined' && typeof color === 'string') {
       setColorValuesOnTarget(target, { value: color }, 'strokes');
     }

src/plugin/setValuesOnNode.ts

@@ -53,6 +53,18 @@ export default async function setValuesOnNode(
       if (values.border && isCompositeBorderValue(values.border)) {
         setBorderValuesOnTarget(node, { value: values.border });
       }
+      if (values.borderTop && isCompositeBorderValue(values.borderTop)) {
+        setBorderValuesOnTarget(node, { value: values.borderTop }, 'top');
+      }
+      if (values.borderRight && isCompositeBorderValue(values.borderRight)) {
+        setBorderValuesOnTarget(node, { value: values.borderRight }, 'right');
+      }
+      if (values.borderBottom && isCompositeBorderValue(values.borderBottom)) {
+        setBorderValuesOnTarget(node, { value: values.borderBottom }, 'bottom');
+      }
+      if (values.borderLeft && isCompositeBorderValue(values.borderLeft)) {
+        setBorderValuesOnTarget(node, { value: values.borderLeft }, 'left');
+      }
 
       // if applied border is just a string, it's the older version where border was just a color. apply color then.
       if (values.border && typeof values.border === 'string' && typeof data.border !== 'undefined') {