diff --git a/package.json b/package.json index 67d6585..a4a9e50 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,23 @@ { "name": "figlog", "version": "1.0.0", - "description": "The easiest and most efficient way to document team decisions and the evolution of your changes in Figma.", "repository": "https://github.com/FormidableLabs/figlog.git", - "scripts": { - "build": "esbuild widget-src/Widget.tsx --bundle --outfile=dist/code.js --target=es6", - "tsc": "tsc --noEmit -p widget-src", - "watch": "bun run build -- --watch" - }, - "contributors": [ - "Ryan Srofe " - ], - "license": "MIT", "devDependencies": { "@figma/plugin-typings": "*", "@figma/widget-typings": "*", + "date-fns": "^3.6.0", "esbuild": "*", "typescript": "*" + }, + "contributors": [ + "Ryan Srofe ", + "Christy Presler " + ], + "description": "The easiest and most efficient way to document team decisions and the evolution of your changes in Figma.", + "license": "MIT", + "scripts": { + "build": "esbuild widget-src/Widget.tsx --bundle --outfile=dist/code.js --target=es6", + "tsc": "tsc --noEmit -p widget-src", + "watch": "bun run build -- --watch" } } diff --git a/widget-src/Widget.tsx b/widget-src/Widget.tsx index a2067f2..2d692e2 100644 --- a/widget-src/Widget.tsx +++ b/widget-src/Widget.tsx @@ -1,4 +1,4 @@ -import { ChangeLog } from './types/ChangeLog'; +import { ChangeLog, ChangeLogState } from './types/ChangeLog'; import { Header } from './components/Header'; import { Footer } from './components/Footer'; import { WidgetContainer } from './components/WidgetContainer'; @@ -15,7 +15,7 @@ function Widget() { const [showStatus, setShowStatus] = useSyncedState('showStatus', '0'); const [showVersion, setShowVersion] = useSyncedState('showVersion', false); const [showBranding, setShowBranding] = useSyncedState('showBradning', true); // fixing the typo messes with branding state on existing widgets - const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', false); + const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', true); // Meta Data const [createdDate, setCreatedDate] = useSyncedState('createdDate', 0); const [updatedDate, setUpdatedDate] = useSyncedState('updatedDate', 0); @@ -25,6 +25,15 @@ function Widget() { const [changeIds, setChangeIds] = useSyncedState('changeKeys', []); const changeLogs = useSyncedMap('changes'); + const updateOtherStates = (currentChangeId: string, changes: Partial) => { + changeIds.map((id: string) => { + if (id !== currentChangeId) { + const otherLog = changeLogs.get(id) as ChangeLog; + changeLogs.set(id, { ...otherLog, state: { ...otherLog.state, ...changes }}) + } + }) + } + const addChange = (changeToAdd: string) => { changeLogs.set(changeToAdd, { change: '', @@ -32,15 +41,22 @@ function Widget() { createdDate: Date.now(), editedDate: Date.now(), user: currentUser, + links: [], editCount: 0, state: { + editing: true, showTypeMenu: false, showLinkForm: false, - linkFormError: { label: false, url: false } + updates: { + change: '', + type: 'none', + createdDate: Date.now(), + linkFormError: { label: false, url: false } + } }, - links: [], }); setChangeIds([changeToAdd, ...changeIds]); + updateOtherStates(changeToAdd, { editing: false }) setUpdatedDate(Date.now()); }; const deleteChange = (changeToDelete: string) => { @@ -164,7 +180,7 @@ function Widget() { void; iconSrc?: string; + error?: boolean; } export const Button = ({ label, hideLabel = false, action, - iconSrc + iconSrc, + error = false, }: ButtonProps) => { + if (error) { + return ( + + {iconSrc && ( + + + + )} + + + ) + } + return ( ; - adminId: string; + updateOtherStates: (changeId: string, changes: Partial) => void; deleteChange: (changeId: string) => void; setUpdatedDate: (updatedDate: number) => void; showTypes: boolean; @@ -17,13 +17,13 @@ interface ChangeLogListProps { export const ChangeLogList = ({ changeLogIds, changeLogs, - // adminId, + updateOtherStates, deleteChange, setUpdatedDate, showTypes }: ChangeLogListProps) => { useEffect(() => { - console.log('ChangeLogs', changeLogs.entries()); + // console.log('ChangeLogs', changeLogs.entries()); }); return ( @@ -37,16 +37,9 @@ export const ChangeLogList = ({ horizontal: PADDING.none, }} > - {changeLogIds.map((changeLogId, index) => { - const changeLog = changeLogs.get(changeLogId) as ChangeLog; - - function isEditable(): boolean { - // if widget admin - // if (adminId === currentUser?.id) { return true; } - // if changeLog owner - // if (changeLog?.user?.id === currentUser?.id) { return true; } - return true; - } + {changeLogs.entries().sort((a, b) => b[1].createdDate - a[1].createdDate ).map((changeLogArr, index) => { + const changeLogId = changeLogArr[0]; + const changeLog = changeLogArr[1]; return ( changeLogs.set(changeLogId, { ...changeLog, ...changes })} - updateOthers={changes => { - changeLogIds.map((id) => { - if (id !== changeLogId) { - const otherLog = changeLogs.get(id) as ChangeLog; - changeLogs.set(id, { ...otherLog, ...changes }) - } - }) - }} + updateChangeState={changes => changeLogs.set(changeLogId, { ...changeLog, state: { ... changes }})} + updateOtherStates={updateOtherStates} deleteChange={() => deleteChange(changeLogId)} setUpdatedDate={setUpdatedDate} - isEditable={isEditable()} showTypes={showTypes} /> ); diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx index 46f5f34..1465570 100644 --- a/widget-src/components/ChangeLogRow.tsx +++ b/widget-src/components/ChangeLogRow.tsx @@ -1,16 +1,8 @@ -import { ChangeLog } from '../types/ChangeLog'; -import { Button } from './Button'; +import { ChangeLog, ChangeLogState } from '../types/ChangeLog'; import { User } from './log/User'; -import { DateRange } from './log/DateRange'; -import { Type } from './log/Type'; -import { formatDate } from '../utilities/Utils'; -import { COLOR, FONT, GAP, PADDING, SPACE } from '../utilities/Styles'; -import { TypeMenu } from './log/TypeMenu'; -import { ActionDeleteIcon } from '../svgs/ActionDeleteIcon'; -import { ActionLinkIcon } from '../svgs/ActionLinkIcon'; -import { LinkForm } from './log/LinkForm'; -import { LinkList } from './log/LinkList'; -import { AddLink } from './log/AddLink'; +import { COLOR, GAP, SPACE } from '../utilities/Styles'; +import { ChangeLogEditing } from './log/LogEditing'; +import { ChangeLogDisplay } from './log/LogDisplay'; const { widget } = figma; const { AutoLayout, Input, Rectangle, Text } = widget; @@ -19,11 +11,11 @@ interface ChangeLogRowProps { changeLogId: string; changeLog: ChangeLog; isLastRow: boolean; - updateChange: (changes: Partial) => void; // update this change log - updateOthers: (changes: Partial) => void; // update all other change logs + updateChange: (changes: Partial) => void; + updateChangeState: (changes: Partial) => void; + updateOtherStates: (changeId: string, changes: Partial) => void; deleteChange: () => void; setUpdatedDate: (updatedDate: number) => void; - isEditable: boolean; showTypes: boolean; } @@ -32,10 +24,10 @@ export const ChangeLogRow = ({ changeLog, isLastRow, updateChange, - updateOthers, + updateChangeState, + updateOtherStates, deleteChange, setUpdatedDate, - isEditable, showTypes, }: ChangeLogRowProps) => { @@ -50,183 +42,24 @@ export const ChangeLogRow = ({ > - - - {!!changeLog.state?.showTypeMenu && ( - { - - const addEdit = changeLog.type !== 'none' && changeLog.type !== 'added'; - - if (newType !== changeLog.type) { - updateChange({ - type: newType, - editCount: addEdit ? changeLog.editCount + 1 : changeLog.editCount, - editedDate: addEdit ? Date.now() : changeLog.editedDate, - state: { - ...changeLog.state, - showTypeMenu: !changeLog.state?.showTypeMenu, - }, - }); - setUpdatedDate(Date.now()); - } else { - updateChange({ - state: { - ...changeLog.state, - showTypeMenu: !changeLog.state?.showTypeMenu, - }, - }) - } - }} - /> - )} - {showTypes && ( - { - // toggle log type menu - updateChange({ - state: { - ...changeLog.state, - showTypeMenu: !changeLog.state?.showTypeMenu, - } - }) - // hide all other log type menues - updateOthers({ - state: { - ...changeLog.state, - showTypeMenu: false, - } - }) - }} - /> - )} - - {changeLog.user?.name || ''} - - - - {isEditable && ( - -