Refactor icons

[floydnant]

export const taskStatusColorMap: Record<TaskStatus, TwColorClass> = {
    [TaskStatus.OPEN]: 'text-tinted-300',
    [TaskStatus.IN_PROGRESS]: 'text-secondary-400',
    [TaskStatus.BACKLOG]: 'text-tinted-300',
    [TaskStatus.COMPLETED]: 'text-submit-400',
    [TaskStatus.NOT_PLANNED]: 'text-danger-400',
}

export const taskStatusIconClassMap: Record<TaskIconKey, string> = Object.fromEntries(
    Object.entries({
        [TaskStatus.OPEN]: `far fa-circle`,
        [TaskStatus.IN_PROGRESS]: `far fa-clock`,
        [TaskStatus.BACKLOG]: `fas fa-spinner rotate-[-45deg]`,
        [TaskStatus.COMPLETED]: `fas fa-check-circle`,
        [TaskStatus.NOT_PLANNED]: `fas fa-times-circle`,
        [TaskState.BLOCKED]: `far fa-ban`,
    } as Record<TaskIconKey, string>).map(([status, iconClass]) => [
        status,
        `${iconClass} ${taskStatusColorMap[status as TaskStatus]}`,
    ])
) as Record<TaskIconKey, string>


export enum PageEntityState {
    DEFAULT = 'Default',
    LOADING = 'Loading',
    ERROR = 'Error',
}

export const stateIcons = {
    [PageEntityState.LOADING]: 'far fa-spinner-third animate-spin text-tinted-200',
    [PageEntityState.ERROR]: '',
} as const

export const entityIcons = {
    [EntityType.TASKLIST]: {
        [PageEntityState.DEFAULT]: 'far fa-tasks text-tinted-400',
        ...stateIcons,
    } as const,
    [EntityType.TASK]: {
        [PageEntityState.DEFAULT]: taskStatusIconClassMap[TaskStatus.OPEN],
        ...stateIcons,
        ...taskStatusIconClassMap,
    } as const,
} // satisfies Record<EntityType, Record<PageEntityState, string>>

type IconPaths = PathsConcatenated<typeof entityIcons>

type IconLeaves = LeavesConcatenated<typeof entityIcons>
// const path = 'View.test' satisfies IconPaths
const path: IconPaths = 'Task.In Progress'

• Every entity should have their own icon set scoped by the EntityType. I.e. handled with a nested object and concatenated keys:

// @TODO: derive the icon keys from here
const iconClasses = {
  [EntityType.TASK]: {
    ...taskStatusIconClassMap,
    [PageEntityState.Loading]: 'fas fa-loading'
    // ...
  }
  // ...
}

export type IconKey = LeavesConcatenated<typeof iconClasses> = 'Task.Open' | 'Task.Loading' // ...

• Maybe we should have the tailwind color classes typed:

import colors from 'colors.json'

// @TODO: derive the color classes from here
const colorClasses = {
    text: colors,
    bg: colors,
}

export type TwColorClass = LeavesConcatenated<typeof colorClasses> = 'text-primary-700' | 'bg-submit-400' // ...