diff --git a/.changeset/remove-storyblok-integration.md b/.changeset/remove-storyblok-integration.md new file mode 100644 index 0000000000..1bf3469e2a --- /dev/null +++ b/.changeset/remove-storyblok-integration.md @@ -0,0 +1,5 @@ +--- +"@tokens-studio/figma-plugin": patch +--- + +Remove Storyblok integration and changelog dialog feature. The changelog dialog functionality has been removed and can be brought back with a different system in the future. diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index a6f8d1b51a..3723cef274 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -137,7 +137,6 @@ Required environment variables in `.env` files: ``` MIXPANEL_ACCESS_TOKEN= -STORYBLOK_ACCESS_TOKEN= ENVIRONMENT=development LICENSE_API_URL=https://licence.tokens.studio LAUNCHDARKLY_SDK_CLIENT=626fb05d52e5c715abd11b5e diff --git a/developer-knowledgebase/creating-a-release.md b/developer-knowledgebase/creating-a-release.md index 325e1ecd51..607be76744 100644 --- a/developer-knowledgebase/creating-a-release.md +++ b/developer-knowledgebase/creating-a-release.md @@ -12,7 +12,6 @@ In order to release a new version, first make sure you have the correct `.env` v ``` MIXPANEL_ACCESS_TOKEN=INSERT_MIXPANEL_ACCESS_TOKEN -STORYBLOK_ACCESS_TOKEN=INSERT_STORYBLOK_ACCESS_TOKEN ENVIRONMENT=production LICENSE_API_URL=https://figmatokens-api.herokuapp.com LAUNCHDARKLY_SDK_CLIENT=626fb05d52e5c715abd11b5e diff --git a/packages/tokens-studio-for-figma/.env.example b/packages/tokens-studio-for-figma/.env.example index 25d3179a84..e99ede8818 100644 --- a/packages/tokens-studio-for-figma/.env.example +++ b/packages/tokens-studio-for-figma/.env.example @@ -1,4 +1,3 @@ MIXPANEL_ACCESS_TOKEN= -STORYBLOK_ACCESS_TOKEN= ENVIRONMENT=development LICENSE_API_URL=https://licence.tokens.studio \ No newline at end of file diff --git a/packages/tokens-studio-for-figma/.env.production.example b/packages/tokens-studio-for-figma/.env.production.example index ce8aa1536a..4a4945d777 100644 --- a/packages/tokens-studio-for-figma/.env.production.example +++ b/packages/tokens-studio-for-figma/.env.production.example @@ -1,4 +1,3 @@ MIXPANEL_ACCESS_TOKEN= -STORYBLOK_ACCESS_TOKEN= ENVIRONMENT=production LICENSE_API_URL=https://licence.tokens.studio \ No newline at end of file diff --git a/packages/tokens-studio-for-figma/cypress/support/mockEnv.js b/packages/tokens-studio-for-figma/cypress/support/mockEnv.js index 9f71f03661..c13ccaf253 100644 --- a/packages/tokens-studio-for-figma/cypress/support/mockEnv.js +++ b/packages/tokens-studio-for-figma/cypress/support/mockEnv.js @@ -11,10 +11,6 @@ const MockEnv = () => { success: true }).as('mixpanel') - cy.intercept('GET', `https://api.storyblok.com/**`, { - success: true - }).as('storyblok') - cy.intercept('GET', `**/get-license*`, { plan: 'pro' }).as('getLicense') diff --git a/packages/tokens-studio-for-figma/package.json b/packages/tokens-studio-for-figma/package.json index 7bbea51180..ac9c92dad6 100644 --- a/packages/tokens-studio-for-figma/package.json +++ b/packages/tokens-studio-for-figma/package.json @@ -138,7 +138,6 @@ "reselect": "^4.1.5", "rooks": "^6.4.2", "set-value": "^3.0.3", - "storyblok-js-client": "^3.3.1", "use-debounce": "^6.0.1", "uuid": "^9.0.0", "zod": "^3.22.3" diff --git a/packages/tokens-studio-for-figma/src/app/components/AppContainer/AppContainer.tsx b/packages/tokens-studio-for-figma/src/app/components/AppContainer/AppContainer.tsx index a3d9600256..16138a8811 100644 --- a/packages/tokens-studio-for-figma/src/app/components/AppContainer/AppContainer.tsx +++ b/packages/tokens-studio-for-figma/src/app/components/AppContainer/AppContainer.tsx @@ -13,7 +13,6 @@ import ConfirmDialog from '../ConfirmDialog'; import WindowResizer from '../WindowResizer'; import ImportedTokensDialog from '../ImportedTokensDialog'; import PushDialog from '../PushDialog'; -import Changelog from '../Changelog'; import OnboardingFlow from '../OnboardingFlow'; import { Initiator } from '../Initiator'; import { globalStyles } from '../globalStyles'; @@ -103,7 +102,6 @@ export const AppContainer = (params: Props) => { } - diff --git a/packages/tokens-studio-for-figma/src/app/components/Changelog.tsx b/packages/tokens-studio-for-figma/src/app/components/Changelog.tsx deleted file mode 100644 index 75983b467b..0000000000 --- a/packages/tokens-studio-for-figma/src/app/components/Changelog.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import { useTranslation } from 'react-i18next'; -import { Button, Heading } from '@tokens-studio/ui'; -import Text from './Text'; -import Modal from './Modal'; -import { changelogSelector } from '@/selectors'; -import Stack from './Stack'; -import { styled } from '@/stitches.config'; - -const StyledReadMoreLink = styled('a', { - color: '$accentDefault', - fontSize: '$xsmall', -}); - -const StyledImage = styled('img', { - marginBottom: '$4', - borderRadius: '$medium', -}); - -export default function Changelog() { - const [changelogOpen, setChangelogOpen] = React.useState(true); - const changelog = useSelector(changelogSelector); - const { t } = useTranslation(['general']); - - const [activeIndex, setIndex] = React.useState(0); - - const handleNext = React.useCallback(() => { - setIndex(activeIndex + 1); - }, [activeIndex]); - - const handlePrev = React.useCallback(() => { - setIndex(activeIndex - 1); - }, [activeIndex]); - - const handleClose = React.useCallback(() => { - setChangelogOpen(false); - }, []); - - return ( - 0 && changelogOpen} close={handleClose}> - -
- {changelog.map((item, index) => ( - - {item.image && } - {item.title} - {item.excerpt} - {item.read_more_link && ( - - {item.read_more_text ? item.read_more_text : t('readMore')} - - )} - - ))} -
- - - - {activeIndex !== 0 && ( - - )} - {changelog.length > activeIndex + 1 && ( - - )} - - -
-
- ); -} diff --git a/packages/tokens-studio-for-figma/src/app/store/models/uiState.tsx b/packages/tokens-studio-for-figma/src/app/store/models/uiState.tsx index fa53f31bff..10d61f73d7 100644 --- a/packages/tokens-studio-for-figma/src/app/store/models/uiState.tsx +++ b/packages/tokens-studio-for-figma/src/app/store/models/uiState.tsx @@ -2,9 +2,8 @@ import { createModel } from '@rematch/core'; import { track } from '@/utils/analytics'; import type { RootModel } from '@/types/RootModel'; -import fetchChangelog from '@/utils/storyblok'; import { NodeTokenRefMap } from '@/types/NodeTokenRefMap'; -import { SelectionGroup, StoryblokStory, ErrorCategory } from '@/types'; +import { SelectionGroup, ErrorCategory } from '@/types'; import { Tabs } from '@/constants/Tabs'; import { AsyncMessageTypes } from '@/types/AsyncMessages'; import { AsyncMessageChannel } from '@/AsyncMessageChannel'; @@ -68,7 +67,6 @@ export interface UIState { apiProviders: StorageTypeCredentials[]; localApiState: StorageTypeFormValues; lastUpdatedAt: string | null; - changelog: StoryblokStory['content'][]; lastOpened: number | null; onboardingExplainerSets: boolean; onboardingExplainerExportSets: boolean; @@ -132,7 +130,6 @@ export const uiState = createModel()({ format: TokenFormatOptions.Legacy, }, lastUpdatedAt: null, - changelog: [], lastOpened: '', onboardingExplainerSets: null, onboardingExplainerExportSets: null, @@ -312,12 +309,6 @@ export const uiState = createModel()({ apiProviders: payload, }; }, - setChangelog(state, payload: StoryblokStory['content'][]) { - return { - ...state, - changelog: payload, - }; - }, setLastOpened(state, payload: number) { return { ...state, @@ -450,12 +441,7 @@ export const uiState = createModel()({ triggerMigrationEdit: data, }), }, - effects: (dispatch) => ({ - setLastOpened: (payload) => { - fetchChangelog(payload, (result) => { - dispatch.uiState.setChangelog(result); - }); - }, + effects: (_dispatch) => ({ setOnboardingExplainerSets: (payload) => { AsyncMessageChannel.ReactInstance.message({ type: AsyncMessageTypes.SET_ONBOARDINGEXPLAINERSETS, diff --git a/packages/tokens-studio-for-figma/src/selectors/changelogSelector.ts b/packages/tokens-studio-for-figma/src/selectors/changelogSelector.ts deleted file mode 100644 index 5516695d52..0000000000 --- a/packages/tokens-studio-for-figma/src/selectors/changelogSelector.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createSelector } from 'reselect'; -import { uiStateSelector } from './uiStateSelector'; - -export const changelogSelector = createSelector( - uiStateSelector, - (state) => state.changelog, -); diff --git a/packages/tokens-studio-for-figma/src/selectors/index.ts b/packages/tokens-studio-for-figma/src/selectors/index.ts index d830d73859..b93bec893f 100644 --- a/packages/tokens-studio-for-figma/src/selectors/index.ts +++ b/packages/tokens-studio-for-figma/src/selectors/index.ts @@ -18,7 +18,6 @@ export * from './apiProvidersSelector'; export * from './activeApiProviderSelector'; export * from './hasUnsavedChangesSelector'; export * from './activeTabSelector'; -export * from './changelogSelector'; export * from './projectURLSelector'; export * from './lastSyncedStateSelector'; export * from './lastErrorSelector'; diff --git a/packages/tokens-studio-for-figma/src/types/ChangelogItem.ts b/packages/tokens-studio-for-figma/src/types/ChangelogItem.ts deleted file mode 100644 index ae45a7ef1f..0000000000 --- a/packages/tokens-studio-for-figma/src/types/ChangelogItem.ts +++ /dev/null @@ -1,11 +0,0 @@ -export type ChangelogItem = { - _uid: string; - image?: { - alt: string; - filename: string; - }; - title: string; - excerpt: string; - read_more_link?: string; - read_more_text?: string; -}; diff --git a/packages/tokens-studio-for-figma/src/types/StoryblokStory.ts b/packages/tokens-studio-for-figma/src/types/StoryblokStory.ts deleted file mode 100644 index 42462bdeac..0000000000 --- a/packages/tokens-studio-for-figma/src/types/StoryblokStory.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ChangelogItem } from './ChangelogItem'; - -// @README https://www.storyblok.com/docs/api/content-delivery#core-resources/stories/stories -export type StoryblokStory

= { - id: number; - uuid: string; - name: string; - slug: string; - full_slug: string; - default_full_slug: string | null; - created_at: string; - published_at: string; - first_published_at: string; - content: ChangelogItem & { - component: string; - } & P; -}; diff --git a/packages/tokens-studio-for-figma/src/types/index.ts b/packages/tokens-studio-for-figma/src/types/index.ts index fd295eb481..fa83dfb315 100644 --- a/packages/tokens-studio-for-figma/src/types/index.ts +++ b/packages/tokens-studio-for-figma/src/types/index.ts @@ -3,7 +3,6 @@ export * from './SelectionGroup'; export * from './SelectionValue'; export * from './PullStylesOptions'; export * from './PullVariablesOptions'; -export * from './StoryblokStory'; export * from './ThemeObject'; export * from './UsedTokenSetsMap'; export * from './StitchesCSS'; diff --git a/packages/tokens-studio-for-figma/src/utils/__tests__/formatTokensPerTheme.test.ts b/packages/tokens-studio-for-figma/src/utils/__tests__/formatTokensPerTheme.test.ts index 1273f0c92c..a54fb68c1d 100644 --- a/packages/tokens-studio-for-figma/src/utils/__tests__/formatTokensPerTheme.test.ts +++ b/packages/tokens-studio-for-figma/src/utils/__tests__/formatTokensPerTheme.test.ts @@ -26,7 +26,7 @@ describe('formatTokens per theme', () => { { name: 'typography.baseline', type: TokenTypes.FONT_SIZES, - value: '16px', // desktop baseline + value: '16px', // desktop baseline }, ], 'typography-tokens': [ @@ -41,7 +41,7 @@ describe('formatTokens per theme', () => { ], }; - // Define themes that use different typography baselines + // Define themes that use different typography baselines const themes: ThemeObject[] = [ { id: 'mobile', @@ -87,11 +87,11 @@ describe('formatTokens per theme', () => { })); // Verify that each theme has different baseline values - expect(mobileFormatted['mobile-base']['typography']['baseline']['$value']).toBe('14px'); - expect(desktopFormatted['desktop-base']['typography']['baseline']['$value']).toBe('16px'); + expect(mobileFormatted['mobile-base'].typography.baseline.$value).toBe('14px'); + expect(desktopFormatted['desktop-base'].typography.baseline.$value).toBe('16px'); // Verify that typography heading fontSize resolves differently for each theme - expect(mobileFormatted['typography-tokens']['typography']['heading']['fontSize']['$value']).toBe('14px'); - expect(desktopFormatted['typography-tokens']['typography']['heading']['fontSize']['$value']).toBe('16px'); + expect(mobileFormatted['typography-tokens'].typography.heading.fontSize.$value).toBe('14px'); + expect(desktopFormatted['typography-tokens'].typography.heading.fontSize.$value).toBe('16px'); }); -}); \ No newline at end of file +}); diff --git a/packages/tokens-studio-for-figma/src/utils/getLastOpened.test.ts b/packages/tokens-studio-for-figma/src/utils/getLastOpened.test.ts index c3582862b7..235ba4f743 100644 --- a/packages/tokens-studio-for-figma/src/utils/getLastOpened.test.ts +++ b/packages/tokens-studio-for-figma/src/utils/getLastOpened.test.ts @@ -1,7 +1,7 @@ import getLastOpened from './getLastOpened'; import { mockGetAsync } from '../../tests/__mocks__/figmaMock'; -describe('fetchChangelog', () => { +describe('getLastOpened', () => { it('user lanch the plugin for the first time', async () => { expect.assertions(1); try { diff --git a/packages/tokens-studio-for-figma/src/utils/mapTokensToVariableInfo.ts b/packages/tokens-studio-for-figma/src/utils/mapTokensToVariableInfo.ts index 9cb02b497e..ed974caab0 100644 --- a/packages/tokens-studio-for-figma/src/utils/mapTokensToVariableInfo.ts +++ b/packages/tokens-studio-for-figma/src/utils/mapTokensToVariableInfo.ts @@ -8,7 +8,7 @@ export function mapTokensToVariableInfo( token: ResolveTokenValuesResult, theme: ThemeObject, settings: SettingsState, - baseFontSize?: string + baseFontSize?: string, ) { // Use the provided baseFontSize (theme-specific) or fall back to settings.baseFontSize const effectiveBaseFontSize = baseFontSize || settings?.baseFontSize; diff --git a/packages/tokens-studio-for-figma/src/utils/storyblok.test.ts b/packages/tokens-studio-for-figma/src/utils/storyblok.test.ts deleted file mode 100644 index 704edbbe74..0000000000 --- a/packages/tokens-studio-for-figma/src/utils/storyblok.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import fetchChangelog, { formatDate } from './storyblok'; -import { mockFetch } from '../../tests/__mocks__/fetchMock'; - -describe('fetchChangelog', () => { - beforeAll(() => { - process.env.STORYBLOK_ACCESS_TOKEN = '1234'; - }); - it('called correct api', async () => { - const mockLastOnline = new Date(); - const mockSetChangelog = jest.fn(); - - await fetchChangelog(mockLastOnline, mockSetChangelog); - expect(mockFetch).toBeCalledWith( - `https://api.storyblok.com/v1/cdn/stories?version=published&token=1234&first_published_at_gt=${formatDate(mockLastOnline)}&startsWith=changelog/&sort_by=first_published_at`, - { - method: 'GET', - mode: 'cors', - cache: 'no-cache', - credentials: 'same-origin', - headers: { - 'Content-Type': 'application/json', - }, - }, - ); - }); -}); diff --git a/packages/tokens-studio-for-figma/src/utils/storyblok.ts b/packages/tokens-studio-for-figma/src/utils/storyblok.ts deleted file mode 100644 index 70d057bc18..0000000000 --- a/packages/tokens-studio-for-figma/src/utils/storyblok.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { StoryblokStory } from '@/types'; - -export function formatDate(date?: number | Date) { - const formatter = new Intl.DateTimeFormat('en', { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - hour12: false, - timeZone: 'UTC', - }); - const [month, , day, , year, , hour, , minute] = formatter.formatToParts(date); - return `${year.value}-${month.value}-${day.value} ${hour.value}:${minute.value}`; -} - -export default async function fetchChangelog(lastOnline: Date, setChangelog: (stories: StoryblokStory['content'][]) => void): Promise { - if (process.env.STORYBLOK_ACCESS_TOKEN && lastOnline.toString() !== '0') { - const token = process.env.STORYBLOK_ACCESS_TOKEN; - const formattedDate = formatDate(new Date(lastOnline)); - const response = await fetch( - `https://api.storyblok.com/v1/cdn/stories?version=published&token=${token}&first_published_at_gt=${formattedDate}&startsWith=changelog/&sort_by=first_published_at`, - { - method: 'GET', - mode: 'cors', - cache: 'no-cache', - credentials: 'same-origin', - headers: { - 'Content-Type': 'application/json', - }, - }, - ); - - const res = await response.json() as { - stories: StoryblokStory[]; - }; - if (res.stories) { - const stories = res.stories.map((story) => ({ ...story.content })); - setChangelog(stories); - } - } -}