Skip to content

Commit

Permalink
Change Log Types (#60)
Browse files Browse the repository at this point in the history
Co-authored-by: Christy Presler <[email protected]>
  • Loading branch information
cpresler and cpresler authored Jan 23, 2024
1 parent 07991cf commit 59be9f0
Show file tree
Hide file tree
Showing 9 changed files with 207 additions and 41 deletions.
44 changes: 27 additions & 17 deletions widget-src/Widget.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ChangeLog } from './types/ChangeLog';
import { Header } from './components/Header';
import { Footer } from './components/Footer';
import { WidgetContainer } from './components/WidgetContainer';
Expand All @@ -13,7 +14,8 @@ function Widget() {
const [showDescription, setShowDescription] = useSyncedState('showDescription', true);
const [showStatus, setShowStatus] = useSyncedState('showStatus', '0');
const [showVersion, setShowVersion] = useSyncedState('showVersion', false);
const [showBranding, setShowBranding] = useSyncedState('showBradning', true);
const [showBranding, setShowBranding] = useSyncedState('showBranding', true);
const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', false);
// Meta Data
const [createdDate, setCreatedDate] = useSyncedState('createdDate', 0);
const [updatedDate, setUpdatedDate] = useSyncedState('updatedDate', 0);
Expand All @@ -26,11 +28,12 @@ function Widget() {
const addChange = (changeToAdd: string) => {
changeLogs.set(changeToAdd, {
change: '',
type: 'added',
type: 'none',
createdDate: Date.now(),
editedDate: Date.now(),
user: currentUser,
editCount: 0,
showTypeMenu: false,
});
setChangeIds([changeToAdd, ...changeIds]);
setUpdatedDate(Date.now());
Expand All @@ -43,21 +46,6 @@ function Widget() {

usePropertyMenu(
[
{
itemType: 'toggle',
tooltip: 'Name',
propertyName: 'name',
isToggled: showName,
},
{
itemType: 'toggle',
tooltip: 'Description',
propertyName: 'description',
isToggled: showDescription,
},
{
itemType: 'separator',
},
{
itemType: 'dropdown',
options: [
Expand All @@ -76,12 +64,30 @@ function Widget() {
{
itemType: 'separator',
},
{
itemType: 'toggle',
tooltip: 'Name',
propertyName: 'name',
isToggled: showName,
},
{
itemType: 'toggle',
tooltip: 'Description',
propertyName: 'description',
isToggled: showDescription,
},
{
itemType: 'toggle',
tooltip: 'Version',
propertyName: 'version',
isToggled: showVersion,
},
{
itemType: 'toggle',
tooltip: 'Log Types',
propertyName: 'logTypes',
isToggled: showLogTypes,
},
{
itemType: 'toggle',
tooltip: 'Branding',
Expand All @@ -108,6 +114,9 @@ function Widget() {
case 'branding':
setShowBranding(!showBranding);
break;
case 'logTypes':
setShowLogTypes(!showLogTypes);
break;
}
setUpdatedDate(Date.now());
}
Expand Down Expand Up @@ -153,6 +162,7 @@ function Widget() {
adminId={adminId}
deleteChange={deleteChange}
setUpdatedDate={setUpdatedDate}
showTypes={showLogTypes}
/>
)}
<Footer showBranding={showBranding} />
Expand Down
12 changes: 12 additions & 0 deletions widget-src/components/ChangeLogList.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ChangeLog } from '../types/ChangeLog';
import { PADDING } from '../utilities/Styles';
import { ChangeLogRow } from './ChangeLogRow';

Expand All @@ -10,6 +11,7 @@ interface ChangeLogListProps {
adminId: string;
deleteChange: (changeId: string) => void;
setUpdatedDate: (updatedDate: number) => void;
showTypes: boolean;
}

export const ChangeLogList = ({
Expand All @@ -18,6 +20,7 @@ export const ChangeLogList = ({
// adminId,
deleteChange,
setUpdatedDate,
showTypes
}: ChangeLogListProps) => {
useEffect(() => {
console.log('ChangeLogs', changeLogs.entries());
Expand Down Expand Up @@ -52,9 +55,18 @@ export const ChangeLogList = ({
changeLog={changeLog}
isLastRow={index === changeLogIds.length - 1}
updateChange={changes => 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 })
}
})
}}
deleteChange={() => deleteChange(changeLogId)}
setUpdatedDate={setUpdatedDate}
isEditable={isEditable()}
showTypes={showTypes}
/>
);
})}
Expand Down
50 changes: 47 additions & 3 deletions widget-src/components/ChangeLogRow.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { ChangeLog } from '../types/ChangeLog';
import { Button } from './Button';
import { User } from './log/User';
import { DateRange } from './log/DateRange';
// import { Type } from './log/Type';
import { Type } from './log/Type';
import { formatDate } from '../utilities/Utils';
import { COLOR, FONT, GAP, PADDING, SPACE } from '../utilities/Styles';
import { TypeMenu } from './log/TypeMenu';

const { widget } = figma;
const { AutoLayout, Input, Rectangle, Text } = widget;
Expand All @@ -12,21 +14,26 @@ interface ChangeLogRowProps {
changeLogId: string;
changeLog: ChangeLog;
isLastRow: boolean;
updateChange: (changes: Partial<ChangeLog>) => void;
updateChange: (changes: Partial<ChangeLog>) => void; // update this change log
updateOthers: (changes: Partial<ChangeLog>) => void; // update all other change logs
deleteChange: () => void;
setUpdatedDate: (updatedDate: number) => void;
isEditable: boolean;
showTypes: boolean;
}

export const ChangeLogRow = ({
changeLogId,
changeLog,
isLastRow,
updateChange,
updateOthers,
deleteChange,
setUpdatedDate,
isEditable,
showTypes,
}: ChangeLogRowProps) => {

return (
<AutoLayout
key={changeLogId}
Expand Down Expand Up @@ -62,7 +69,44 @@ export const ChangeLogRow = ({
width="fill-parent"
verticalAlignItems="center"
>
{/* <Type type="Added" /> */}
{!!changeLog.showTypeMenu && (
<TypeMenu
currentType={changeLog.type === 'added' ? 'none' : changeLog.type}
selectType={(newType) => {

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,
showTypeMenu: !changeLog.showTypeMenu,
});
setUpdatedDate(Date.now());
} else {
updateChange({
showTypeMenu: !changeLog.showTypeMenu,
})
}
}}
/>
)}
{showTypes && (
<Type
type={changeLog.type}
action={() => {
// toggle log type menu
updateChange({
showTypeMenu: !changeLog.showTypeMenu,
})
// hide all other log type menues
updateOthers({
showTypeMenu: false,
})
}}
/>
)}
<Text
name="Date"
fill={COLOR.black}
Expand Down
7 changes: 5 additions & 2 deletions widget-src/components/header/MetaValue.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,11 @@ export const MetaValue = ({
fill: COLOR.white,
}}
onTextEditEnd={e => {
setValue ? setValue(e.characters) : null;
setUpdatedDate ? setUpdatedDate(Date.now()) : null;
// only update if something changed
if (e.characters !== value) {
setValue ? setValue(e.characters) : null;
setUpdatedDate ? setUpdatedDate(Date.now()) : null;
}
}}
placeholder="0.0.0"
value={value}
Expand Down
64 changes: 48 additions & 16 deletions widget-src/components/log/Type.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,62 @@
import { COLOR, FONT, RADIUS, PADDING } from '../../utilities/Styles';
import { COLOR, FONT, RADIUS, PADDING, SPACE, GAP } from '../../utilities/Styles';
import { ChangeType } from '../../types/ChangeTypes'
import { Check } from '../../svgs/Check';
import { ActionAddIcon } from '../../svgs/ActionAddIcon';

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

interface TypeProps {
type: 'Added' | 'Breaking' | 'Changed' | 'Deprecated' | 'Fixed' | 'Other' | 'Removed';
type: ChangeType;
isActive?: boolean;
action: () => void;
}

export const Type = ({ type }: TypeProps) => {
export const Type = ({ type, isActive = false, action }: TypeProps) => {
let txColor = COLOR.white;
let bgColor = COLOR.black;
let showStroke = false;
let displayName = '';
switch (type) {
case 'Added':
case 'none':
case 'added': // catch legacy logs with "added" as default type
txColor = COLOR.greyDark;
bgColor = COLOR.white;
showStroke = true;
displayName = "Log Type";
break;
case 'newAdd':
bgColor = COLOR.green;
displayName = "Added";
break;
case 'Breaking':
case 'breaking':
bgColor = COLOR.red;
displayName = "Breaking";
break;
case 'Changed':
case 'changed':
bgColor = COLOR.purple;
displayName = "Changed";
break;
case 'Deprecated':
case 'deprecated':
bgColor = COLOR.orange;
displayName = "Deprecated";
break;
case 'Fixed':
case 'fixed':
bgColor = COLOR.blue;
displayName = "Fixed";
break;
case 'Other':
txColor = COLOR.black;
bgColor = COLOR.grey;
break;
case 'Removed':
bgColor = COLOR.black;
case 'removed':
bgColor = COLOR.greyDark;
displayName = "Removed";
break;
default:
// other
txColor = COLOR.black;
bgColor = COLOR.grey;
displayName = "Other";
break;
}

return (
<AutoLayout
name="Log Type"
Expand All @@ -47,7 +68,18 @@ export const Type = ({ type }: TypeProps) => {
}}
horizontalAlignItems="center"
verticalAlignItems="center"
spacing={SPACE.xxxs}
onClick={() => { action() }}
positioning='auto'
stroke={showStroke ? COLOR.grey : ''}
strokeDashPattern={showStroke ? [GAP.sm, GAP.sm] : []}
>
{isActive && (
<SVG name="Active" height={PADDING.sm} width={PADDING.md} src={<Check color={txColor}/>} />
)}
{type === ('none' || 'added') && (
<SVG name="Add" height={PADDING.sm} width={PADDING.sm} src={<ActionAddIcon color={txColor}/>} />
)}
<Text
name="Type"
fill={txColor}
Expand All @@ -60,7 +92,7 @@ export const Type = ({ type }: TypeProps) => {
fontWeight={FONT.weight.bold}
textCase="upper"
>
{type}
{displayName}
</Text>
</AutoLayout>
);
Expand Down
Loading

0 comments on commit 59be9f0

Please sign in to comment.