refactor: TET-207 avatar (#51)

VirtusLab · Sep 11, 2023 · cbfb3f7 · cbfb3f7
1 parent b66f002
commit cbfb3f7
Show file tree

Hide file tree

Showing 10 changed files with 362 additions and 88 deletions.
diff --git a/src/components/Avatar/Avatar.props.ts b/src/components/Avatar/Avatar.props.ts
@@ -1,13 +1,12 @@
-import { ImgHTMLAttributes } from 'react';
+import type { ImgHTMLAttributes } from 'react';
 
-import { AvatarConfig } from './Avatar.styles';
-import { AvatarShape } from './AvatarShape.type';
-import { Appearance } from '../../types/Appearance';
-
-import { Emphasis } from '@/types/Emphasis';
-import { MarginProps } from '@/types/MarginProps';
-import { Size } from '@/types/Size';
-import { DeepPartial } from '@/utility-types/DeepPartial';
+import type { AvatarConfig } from './Avatar.styles';
+import type {
+  AvatarAppearanceColors,
+  AvatarEmphasis,
+  AvatarShape,
+  AvatarSize,
+} from './types';
 
 export type AvatarProps = (
   | {
@@ -17,12 +16,13 @@ export type AvatarProps = (
       initials?: never;
     }
   | {
-      appearance?: Appearance;
-      emphasis?: Emphasis;
+      img?: never;
+      appearance?: AvatarAppearanceColors;
+      emphasis?: AvatarEmphasis;
       initials: string;
     }
 ) & {
   shape?: AvatarShape;
-  size?: Size;
-  custom?: DeepPartial<AvatarConfig>;
-} & MarginProps;
+  size?: AvatarSize;
+  custom?: AvatarConfig;
+};
diff --git a/src/components/Avatar/Avatar.styles.ts b/src/components/Avatar/Avatar.styles.ts
@@ -1,28 +1,26 @@
-import { AvatarShape } from './AvatarShape.type';
+import type { AvatarAppearance, AvatarShape } from './types';
 
-import { fromEntries } from '@/services/fromEntries';
-import { Appearance, appearances } from '@/types/Appearance';
-import { BaseProps } from '@/types/BaseProps';
+import type { BaseProps } from '@/types/BaseProps';
 import { Emphasis } from '@/types/Emphasis';
-import { Size, sizes } from '@/types/Size';
+import { Size } from '@/types/Size';
 
 export type AvatarConfig = {
-  nestedImage: BaseProps;
-  shape: Record<AvatarShape, BaseProps>;
-  size: Record<Size, BaseProps>;
-  appearance: Record<
-    Appearance | 'image',
-    {
-      emphasis: Record<Emphasis, BaseProps>;
-    }
+  shape?: Partial<Record<AvatarShape, BaseProps>>;
+  size?: Partial<Record<Size, BaseProps>>;
+  appearance?: Partial<
+    Record<
+      AvatarAppearance,
+      {
+        emphasis?: Partial<Record<Emphasis, BaseProps>>;
+      }
+    >
   >;
+  innerElements?: {
+    image?: BaseProps;
+  };
 } & BaseProps;
 
 export const defaultConfig = {
-  nestedImage: {
-    w: '100%',
-    h: '100%',
-  },
   overflow: 'hidden',
   position: 'relative',
   display: 'flex',
@@ -36,41 +34,213 @@ export const defaultConfig = {
       borderRadius: 'large',
     },
   },
-  size: sizes.reduce(
-    (acc, size) => ({
-      ...acc,
-      [size]: {
-        w: size,
-        h: size,
-        text: `body-${size.includes('xSmall') ? 'strong-xSmall' : size}`,
-      },
-    }),
-    {} as Record<Size, BaseProps>,
-  ),
-
+  size: {
+    large: {
+      w: 'large',
+      h: 'large',
+      text: 'body-large',
+    },
+    medium: {
+      w: 'medium',
+      h: 'medium',
+      text: 'body-medium',
+    },
+    small: {
+      w: 'small',
+      h: 'small',
+      text: 'body-small',
+    },
+    xSmall: {
+      w: 'xSmall',
+      h: 'xSmall',
+      text: 'body-strong-xSmall',
+    },
+    '2xSmall': {
+      w: '2xSmall',
+      h: '2xSmall',
+      text: 'body-strong-xSmall',
+    },
+  },
   appearance: {
     image: {
       emphasis: {
         high: {},
         low: {},
       },
     },
-    ...fromEntries(
-      appearances.map((appearance) => [
-        appearance,
-        {
-          emphasis: {
-            high: {
-              color: 'nonSemantic-white-content-primary',
-              backgroundColor: `nonSemantic-${appearance}-background-strong`,
-            },
-            low: {
-              color: `nonSemantic-${appearance}-content-primary`,
-              backgroundColor: `nonSemantic-${appearance}-background-muted`,
-            },
-          },
-        },
-      ]),
-    ),
+    blue: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-blue-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-blue-content-primary',
+          backgroundColor: 'nonSemantic-blue-background-muted',
+        },
+      },
+    },
+    green: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-green-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-green-content-primary',
+          backgroundColor: 'nonSemantic-green-background-muted',
+        },
+      },
+    },
+    grey: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-grey-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-grey-content-primary',
+          backgroundColor: 'nonSemantic-grey-background-muted',
+        },
+      },
+    },
+    red: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-red-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-red-content-primary',
+          backgroundColor: 'nonSemantic-red-background-muted',
+        },
+      },
+    },
+    orange: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-orange-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-orange-content-primary',
+          backgroundColor: 'nonSemantic-orange-background-muted',
+        },
+      },
+    },
+    raspberry: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-raspberry-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-raspberry-content-primary',
+          backgroundColor: 'nonSemantic-raspberry-background-muted',
+        },
+      },
+    },
+    magenta: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-magenta-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-magenta-content-primary',
+          backgroundColor: 'nonSemantic-magenta-background-muted',
+        },
+      },
+    },
+    purple: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-purple-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-purple-content-primary',
+          backgroundColor: 'nonSemantic-purple-background-muted',
+        },
+      },
+    },
+    grape: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-grape-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-grape-content-primary',
+          backgroundColor: 'nonSemantic-grape-background-muted',
+        },
+      },
+    },
+    violet: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-violet-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-violet-content-primary',
+          backgroundColor: 'nonSemantic-violet-background-muted',
+        },
+      },
+    },
+    cyan: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-cyan-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-cyan-content-primary',
+          backgroundColor: 'nonSemantic-cyan-background-muted',
+        },
+      },
+    },
+    teal: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-teal-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-teal-content-primary',
+          backgroundColor: 'nonSemantic-teal-background-muted',
+        },
+      },
+    },
+    aquamarine: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-aquamarine-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-aquamarine-content-primary',
+          backgroundColor: 'nonSemantic-aquamarine-background-muted',
+        },
+      },
+    },
+    emerald: {
+      emphasis: {
+        high: {
+          color: 'nonSemantic-white-content-primary',
+          backgroundColor: 'nonSemantic-emerald-background-strong',
+        },
+        low: {
+          color: 'nonSemantic-emerald-content-primary',
+          backgroundColor: 'nonSemantic-emerald-background-muted',
+        },
+      },
+    },
+  },
+  innerElements: {
+    image: {
+      w: '100%',
+      h: '100%',
+    },
   },
 } satisfies AvatarConfig;