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

Save version history #96

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Save version history #96

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
ef04443
adding save to version historty
ryansrofe May 5, 2024
1dd5076
Merge branch 'main' into save-version-history
ryansrofe Jan 15, 2025
fb76813
Update Figma Version History with FigLog Save
ryansrofe Jan 15, 2025
3a1c2b1
linting
ryansrofe Jan 15, 2025
8b8f338
version history feature
ryansrofe Jan 17, 2025
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
13 changes: 12 additions & 1 deletion widget-src/Widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ function Widget() {
// Change Logs
const [changeIds, setChangeIds] = useSyncedState<string[]>('changeKeys', []);
const changeLogs = useSyncedMap<ChangeLog>('changes');
// Name and Description
const [nameText, setNameText] = useSyncedState('nameText', '');
const [descriptionText, setDescriptionText] = useSyncedState('descriptionText', '');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested this with some older widgets and it seems fine.


const updateOtherStates = (currentChangeId: string, changes: Partial<ChangeLogState>) => {
changeIds.map((id: string) => {
Expand Down Expand Up @@ -77,7 +80,7 @@ function Widget() {
{ option: '2', label: 'Draft' },
{ option: '3', label: 'Beta' },
{ option: '4', label: 'Released' },
{ option: '5', label: 'Depreciated' },
{ option: '5', label: 'Deprecated' },
{ option: '6', label: 'Archived' },
],
selectedOption: showStatus.toString(),
Expand Down Expand Up @@ -190,6 +193,10 @@ function Widget() {
showVersion={showVersion}
addChange={addChange}
isLocked={isLocked}
nameText={nameText}
setNameText={setNameText}
descriptionText={descriptionText}
setDescriptionText={setDescriptionText}
/>
{changeIds.length === 0 ? (
<ChangeLogEmpty isLocked={isLocked} />
Expand All @@ -203,6 +210,10 @@ function Widget() {
showTypes={showLogTypes}
showAvatars={showAvatars}
isLocked={isLocked}
nameText={nameText}
showName={showName}
version={version}
showVersion={showVersion}
/>
)}
{showBranding && <Footer />}
Expand Down
12 changes: 12 additions & 0 deletions widget-src/components/ChangeLogList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ interface ChangeLogListProps {
showTypes: boolean;
showAvatars: boolean;
isLocked: boolean;
nameText: string;
showName: boolean;
showVersion: boolean;
version: string;
}

export const ChangeLogList = ({
Expand All @@ -25,6 +29,10 @@ export const ChangeLogList = ({
showTypes,
showAvatars,
isLocked,
nameText,
showName,
showVersion,
version,
}: ChangeLogListProps) => {
return (
<AutoLayout
Expand Down Expand Up @@ -58,6 +66,10 @@ export const ChangeLogList = ({
showTypes={showTypes}
showAvatars={showAvatars}
locked={isLocked}
nameText={nameText}
showName={showName}
showVersion={showVersion}
version={version}
/>
);
})}
Expand Down
12 changes: 12 additions & 0 deletions widget-src/components/ChangeLogRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ interface ChangeLogRowProps {
showTypes: boolean;
showAvatars: boolean;
locked: boolean;
nameText: string;
showName: boolean;
showVersion: boolean;
version: string;
}

export const ChangeLogRow = ({
Expand All @@ -33,6 +37,10 @@ export const ChangeLogRow = ({
showTypes,
showAvatars,
locked,
nameText,
showName,
showVersion,
version,
}: ChangeLogRowProps) => {
return (
<AutoLayout
Expand Down Expand Up @@ -60,6 +68,10 @@ export const ChangeLogRow = ({
setUpdatedDate={setUpdatedDate}
showTypes={showTypes}
isLastRow={isLastRow}
nameText={nameText}
showName={showName}
showVersion={showVersion}
version={version}
/>
) : (
<ChangeLogDisplay
Expand Down
13 changes: 9 additions & 4 deletions widget-src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Description } from './header/Description';
import { COLOR, GAP, RADIUS, SPACE } from '../utilities/Styles';

const { widget } = figma;
const { AutoLayout, Rectangle, useSyncedState } = widget;
const { AutoLayout, Rectangle } = widget;

interface HeaderProps {
name: boolean;
Expand All @@ -19,6 +19,10 @@ interface HeaderProps {
setVersion: (updatedVersion: string) => void;
addChange: (changeId: string) => void;
isLocked: boolean;
nameText: string;
setNameText: (nameText: string) => void;
descriptionText: string;
setDescriptionText: (descriptionText: string) => void;
}

export const Header = ({
Expand All @@ -33,10 +37,11 @@ export const Header = ({
setVersion,
addChange,
isLocked,
nameText,
setNameText,
descriptionText,
setDescriptionText,
}: HeaderProps) => {
const [nameText, setNameText] = useSyncedState('nameText', '');
const [descriptionText, setDescriptionText] = useSyncedState('descriptionText', '');

return (
<AutoLayout name="Header" overflow="visible" direction="vertical" spacing={GAP.sm} width="fill-parent">
<AutoLayout name="Container" overflow="visible" direction="vertical" width="fill-parent">
Expand Down
2 changes: 1 addition & 1 deletion widget-src/components/header/Status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const Status = ({ status }: StatusProps) => {
break;
case '5':
statusEmoji = '🧊';
statusLabel = 'Depreciated';
statusLabel = 'Deprecated';
break;
case '6':
statusEmoji = '🚨';
Expand Down
88 changes: 87 additions & 1 deletion widget-src/components/log/LogEditing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,74 @@ import { LinkForm } from './LinkForm';
import { AddLink } from './AddLink';
import { ActionCloseIcon } from '../../svgs/ActionCloseIcon';
import { displayDate } from '../../utilities/Utils';
import { LinkType } from '../../types/LinkTypes';

const { widget } = figma;
const { widget, saveVersionHistoryAsync } = figma;
const { AutoLayout, Text } = widget;

async function saveToVersionHistory(
name: string,
type: string,
description: string,
links: LinkType[] | undefined,
showName: boolean,
showTypes: boolean,
showVersion: boolean,
version?: string,
) {
const formattedLinks = links?.map(link => `${link.label}\n${link.url}`).join('\n\n') || '';
if (!description.trim() && !formattedLinks.trim()) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be able to add formatting around the links as well, maybe check here against links.length === 0 instead?

Also, why does the lack of description or links stop a version history point from being created? Shouldn't a version history point always be created with a new log, even if it doesn't include a description?

return;
}

let typeFormatted = '';
if (showTypes) {
switch (type) {
case 'none':
break;
case 'added': // catch legacy logs with "added" as default type
typeFormatted = '';
break;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to set this to an empty string, it already is one, you can stack the 'none' and 'added' cases together and just break.

Also, I wish we didn't need to repeat this logic since we are using something super similar in the Type component, but not sure if that is worth the refactor at this moment.

case 'newAdd':
typeFormatted = 'Added';
break;
case 'breaking':
typeFormatted = 'Breaking';
break;
case 'changed':
typeFormatted = 'Changed';
break;
case 'deprecated':
typeFormatted = 'Deprecated';
break;
case 'fixed':
typeFormatted = 'Fixed';
break;
case 'removed':
typeFormatted = 'Removed';
break;
default:
typeFormatted = 'Other';
break;
}
}

const nameParts = ['FigLog'];
const innerParts = [
showName && name,
showVersion && version && `${version}`,
showTypes && `(${typeFormatted})`,
].filter(Boolean);

if (innerParts.length > 0) {
nameParts.push(` | ${innerParts.join(' ')}`);
}

const nameFormatted = nameParts.join('');
const descriptionFormatted = `${description}\n\n- - - -\n\n${formattedLinks}`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think \n\n- - - -\n\n should be included in formattedLinks, so if there are no formattedLinks the - - - doesn't show up.

await saveVersionHistoryAsync(nameFormatted, descriptionFormatted);
}

interface ChangeLogEditingProps {
changeLog: ChangeLog;
updateChange: (changes: Partial<ChangeLog>) => void;
Expand All @@ -22,6 +86,10 @@ interface ChangeLogEditingProps {
setUpdatedDate: (updatedDate: number) => void;
showTypes: boolean;
isLastRow: boolean;
nameText: string;
showName: boolean;
showVersion: boolean;
version: string;
}

export const ChangeLogEditing = ({
Expand All @@ -32,6 +100,10 @@ export const ChangeLogEditing = ({
setUpdatedDate,
showTypes,
isLastRow,
nameText,
showName,
showVersion,
version,
}: ChangeLogEditingProps) => {
return (
<AutoLayout
Expand Down Expand Up @@ -166,7 +238,21 @@ export const ChangeLogEditing = ({
},
},
});

setUpdatedDate(Date.now());

saveToVersionHistory(
nameText,
saveType,
saveChange,
saveLinks,
showName,
showTypes,
showVersion,
version,
)
.then(val => console.log('Version History Saved', val))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: val is showing as undefined in the console every time so it probably isn't worth passing through.

.catch(e => console.log('Error saving version history', e));
}
}}
/>
Expand Down
Loading