Feat/861n1vx9t/avatar

.eslintrc.cjs

@@ -3,4 +3,13 @@ module.exports = {
     'plugin:storybook/recommended',
     '@virtuslab/eslint-config-tetrisly',
   ],
+  rules: {
+    '@typescript-eslint/no-use-before-define': [
+      2,
+      {
+        functions: false,
+        typedefs: false,
+      },
+    ],
+  },
 };

.github/workflows/deploy-storybook.yml

@@ -3,9 +3,9 @@ name: Deploy Storybook
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["gh-pages"]
+    branches: ['gh-pages']
   pull_request:
-    branches: ["gh-pages"]
+    branches: ['gh-pages']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -19,7 +19,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -28,6 +28,8 @@ jobs:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
+    env:
+      NODE_OPTIONS: '--max_old_space_size=4096'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -40,7 +42,7 @@ jobs:
         uses: actions/upload-pages-artifact@v1
         with:
           # Upload entire repository
-          path: "."
+          path: '.'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2

.github/workflows/node.js.yml

@@ -5,17 +5,15 @@ name: Node.js CI
 
 on:
   push:
-    branches: ["development"]
+    branches: ['development']
   pull_request:
-    branches: ["development"]
+    branches: ['development']
 
 jobs:
   build:
     runs-on: ubuntu-latest
     environment:
       name: development
-    env:
-      HELLO: ${{ secrets.HELLO }}
 
     strategy:
       matrix:
@@ -28,9 +26,10 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "yarn"
+          cache: 'yarn'
 
       - run: yarn install --frozen-lockfile
       - run: yarn build
+      - run: yarn lint
       - run: yarn build-storybook
       - run: yarn test

.storybook/main.ts

@@ -10,10 +10,6 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-styling',
     '@storybook/addon-docs',
-    {
-      name: '@storybook/addon-styling',
-      options: {},
-    },
   ],
   framework: {
     name: '@storybook/react-vite',
@@ -22,9 +18,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
-  core: {
-    builder: '@storybook/builder-vite',
-  },
+  core: {},
   async viteFinal(config) {
     if (!config.plugins) {
       config.plugins = [];

package.json

@@ -19,7 +19,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "styled-components": "^5.3.3"
+    "styled-components": "5.3.3"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.26",
@@ -39,23 +39,29 @@
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "@virtuslab/eslint-config-tetrisly": "^1.1.8",
+    "@virtuslab/eslint-config-tetrisly": "^1.2.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.44.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.2",
     "jsdom": "^22.1.0",
+    "prettier": "^3.0.2",
     "storybook": "^7.0.26",
     "typescript": "^5.1.6",
     "vite": "^4.4.2",
     "vite-plugin-dts": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.33.0"
+    "vitest": "^0.34.2"
   },
   "exports": {
     ".": {
       "import": "./dist/tetrisly-icons.es.js",
       "require": "./dist/tetrisly-icons.umd.js"
     }
+  },
+  "resolutions": {
+    "strip-ansi": "^6.0.1",
+    "string-width": "^4.2.2"
   }
 }

src/components/Avatar/Avatar.props.ts

@@ -0,0 +1,28 @@
+import { 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';
+
+export type AvatarProps = (
+  | {
+      img: Omit<ImgHTMLAttributes<HTMLImageElement>, 'color'>;
+      appearance: 'image';
+      emphasis?: 'low';
+      initials?: never;
+    }
+  | {
+      appearance?: Appearance;
+      emphasis?: Emphasis;
+      initials: string;
+    }
+) & {
+  shape?: AvatarShape;
+  size?: Size;
+  custom?: DeepPartial<AvatarConfig>;
+} & MarginProps;

src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar } from './Avatar';
+import { appearances } from '../../types/Appearance';
+
+import { AvatarDocs } from '@/docs-components/AvatarDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+  component: Avatar,
+  tags: ['autodocs'],
+  args: {
+    img: { src: 'https://thispersondoesnotexist.com/' },
+  },
+  argTypes: {
+    img: { if: { arg: 'appearance', eq: 'image' } },
+    initials: { if: { arg: 'appearance', neq: 'image' } },
+    emphasis: { if: { arg: 'appearance', neq: 'image' } },
+  },
+  parameters: {
+    controls: { sort: 'alpha' },
+    docs: {
+      description: {
+        component:
+          "A visual representation of a user's identity, often displayed as a small image or icon. Avatars can be personalized with user-uploaded photos or auto-generated images and are commonly used in profile sections, comments, and messaging interfaces.",
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/list/avatar">
+          <AvatarDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Initials: Story = {
+  argTypes: {
+    appearance: appearances,
+  },
+  args: {
+    initials: 'M',
+    appearance: 'cyan',
+  },
+};
+
+export const Image: Story = {
+  args: {
+    appearance: 'image',
+  },
+};

src/components/Avatar/Avatar.styles.ts

@@ -0,0 +1,76 @@
+import { AvatarShape } from './AvatarShape.type';
+import { Appearance, appearances } from '../../types/Appearance';
+
+import { fromEntries } from '@/services/fromEntries';
+import { Emphasis } from '@/types/Emphasis';
+import { Size, sizes } from '@/types/Size';
+import { BaseConfigProps } from '@/utility-types/BaseConfigProps';
+
+export type AvatarConfig = {
+  nestedImage: BaseConfigProps;
+  shape: Record<AvatarShape, BaseConfigProps>;
+  size: Record<Size, BaseConfigProps>;
+  appearance: Record<
+    Appearance | 'image',
+    {
+      emphasis: Record<Emphasis, BaseConfigProps>;
+    }
+  >;
+} & BaseConfigProps;
+
+export const config = {
+  nestedImage: {
+    w: '100%',
+    h: '100%',
+  },
+  overflow: 'hidden',
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  shape: {
+    rounded: {
+      borderRadius: 'full',
+    },
+    square: {
+      borderRadius: 'large',
+    },
+  },
+  size: sizes.reduce(
+    (acc, size) => ({
+      ...acc,
+      [size]: {
+        w: size,
+        h: size,
+        text: `body-${size.includes('xSmall') ? 'strong-xSmall' : size}`,
+      },
+    }),
+    {} as Record<Size, BaseConfigProps>,
+  ),
+
+  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`,
+            },
+          },
+        },
+      ]),
+    ),
+  },
+} satisfies AvatarConfig;

src/components/Avatar/Avatar.tsx

@@ -0,0 +1,42 @@
+import { FC, ImgHTMLAttributes } from 'react';
+
+import { AvatarProps } from './Avatar.props';
+import { config } from './Avatar.styles';
+import { stylesBuilder } from './stylesBuilder';
+
+import { tet } from '@/tetrisly';
+import { MarginProps } from '@/types/MarginProps';
+
+export const Avatar: FC<AvatarProps> = ({
+  appearance = 'blue',
+  emphasis = 'low',
+  shape = 'rounded',
+  size = 'medium',
+  custom = {},
+  initials,
+  ...rest
+}) => {
+  const { nestedImage, ...styles } = stylesBuilder({
+    config,
+    custom,
+    variant: { appearance, emphasis, shape, size },
+  });
+
+  const [img, marginProps] = extractImage(rest);
+
+  return (
+    <tet.div {...{ ...styles, ...marginProps }}>
+      {img !== null ? <tet.img {...nestedImage} {...img} /> : initials}
+    </tet.div>
+  );
+};
+
+function extractImage<T extends object>(obj: T) {
+  if ('img' in obj) {
+    const { img, ...marginProps } = obj as {
+      img: Omit<ImgHTMLAttributes<HTMLImageElement>, 'color'>;
+    } & MarginProps;
+    return [img, marginProps] as const;
+  }
+  return [null, obj] as const;
+}

src/components/Avatar/AvatarShape.type.ts

@@ -0,0 +1 @@
+export type AvatarShape = 'rounded' | 'square';

src/components/Avatar/stylesBuilder.ts

@@ -0,0 +1,33 @@
+import { merge } from 'lodash';
+
+import { AvatarProps } from './Avatar.props';
+import { AvatarConfig } from './Avatar.styles';
+
+import { DeepPartial } from '@/utility-types/DeepPartial';
+
+export function stylesBuilder({
+  config: originalConfig,
+  custom,
+  variant,
+}: {
+  config: AvatarConfig;
+  custom: DeepPartial<AvatarConfig>;
+  variant: Required<
+    Pick<AvatarProps, 'appearance' | 'emphasis' | 'shape' | 'size'>
+  >;
+}) {
+  const {
+    appearance: appearanceStyles,
+    shape: shapeStyles,
+    size: sizeStyles,
+    ...base
+  } = merge(originalConfig, custom);
+  const { appearance, emphasis, shape, size } = variant;
+
+  return {
+    ...base,
+    ...appearanceStyles[appearance].emphasis[emphasis],
+    ...shapeStyles[shape],
+    ...sizeStyles[size],
+  };
+}