Merge pull request #1162 from Wizleap-Inc/feat/1137_avatar

[#1137] Avatar の bgColor を random で生成されるように修正

.changeset/cool-knives-play.md

@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+---
+
+[#1137] Avatar のブランク画像の設定修正

packages/wiz-ui-next/src/components/base/avatar/avatar.stories.ts

@@ -10,6 +10,9 @@ export default {
   title: "Base/Avatar",
   component: WizAvatar,
   argTypes: {
+    name: {
+      control: { type: "text" },
+    },
     size: {
       control: { type: "select" },
       options: SPACING_ACCESSORS,
@@ -75,6 +78,7 @@ export const FailToLoadImage = Template.bind({});
 FailToLoadImage.args = {
   src: "./public/images/avatar-0.png",
   ariaLabel: "avatar",
+  name: "山田 tarou",
   alt: "avatar",
 };
 
@@ -87,7 +91,7 @@ FailToLoadImage.parameters = {
     source: {
       code: `
 <template>
-  <WizAvatar src="./public/images/avatar-0.png" alt="avatar"/>
+  <WizAvatar src="./public/images/avatar-0.png" name="avatar"/>
 </template>
       `,
     },
@@ -106,7 +110,7 @@ FailToLoadImageWithFallback.parameters = {
   docs: {
     description: {
       story:
-        "`fallback` を設定した場合、画像の表示に失敗した際に、`alt`の代わりに `fallback` で指定されたテキストが表示されます。",
+        "`fallback` を設定した場合、画像の表示に失敗した際に、`alt`の代わりに `fallback` で指定されたテキストが表示されます。（廃止予定）",
     },
     source: {
       code: `

packages/wiz-ui-next/src/components/base/avatar/avatar.vue

@@ -3,7 +3,7 @@
     :class="[
       avatarStyle,
       sizeStyle[size],
-      colorStyle[color],
+      colorStyle[fontColor],
       clickable && avatarClickableStyle,
     ]"
     :aria-label="ariaLabel"
@@ -16,39 +16,47 @@
       :alt="alt"
       @error="onError"
     />
-    <div v-else :class="[avatarFallbackStyle, backgroundStyle[bgColor]]">
-      {{ fallback }}
+    <div
+      v-else
+      :class="[avatarFallbackStyle]"
+      :style="{
+        background: avatarBgColor,
+      }"
+    >
+      {{ altHeader }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {
+  getColorCss,
   ComponentName,
   ColorKeys,
   SpacingKeys,
+  THEME,
 } from "@wizleap-inc/wiz-ui-constants";
 import {
   avatarStyle,
   avatarImageStyle,
   avatarFallbackStyle,
   avatarClickableStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/avatar.css";
-import {
-  backgroundStyle,
-  sizeStyle,
-  colorStyle,
-} from "@wizleap-inc/wiz-ui-styles/commons";
-import { ref, PropType } from "vue";
+import { sizeStyle, colorStyle } from "@wizleap-inc/wiz-ui-styles/commons";
+import { ref, PropType, computed } from "vue";
 
 defineOptions({
   name: ComponentName.Anchor,
 });
 
 const props = defineProps({
+  name: {
+    type: String,
+    required: false,
+  },
   src: {
     type: String,
-    required: true,
+    required: false,
   },
   ariaLabel: {
     type: String,
@@ -62,17 +70,18 @@ const props = defineProps({
   color: {
     type: String as PropType<ColorKeys>,
     required: false,
-    default: "gray.900",
   },
   bgColor: {
     type: String as PropType<ColorKeys>,
     required: false,
-    default: "gray.400",
   },
   alt: {
     type: String,
     required: false,
   },
+  /**
+   * @deprecated この プロパティ は削除予定です。代わりに `name` プロパティを使ってください。
+   */
   fallback: {
     type: String,
     required: false,
@@ -96,4 +105,30 @@ const isImgLoadSuccess = ref(true);
 const onError = () => {
   isImgLoadSuccess.value = false;
 };
+
+const altHeader = computed(() => {
+  if (props.name) {
+    return props.name;
+  }
+  if (props.fallback) return props.fallback;
+  return "";
+});
+
+const avatarBgColor = computed(() => {
+  if (props.bgColor) return getColorCss(props.bgColor);
+  if (!props.name) return THEME.color.gray[400];
+  const getNum = Array.from(props.name)
+    .map((ch) => ch.charCodeAt(0))
+    .reduce((a, b) => a + b);
+  const extractHue = (getNum * getNum) % 360;
+  return `hsl(${extractHue}, 50%, 48%)`;
+});
+
+const fontColor = computed(() => {
+  if (props.color) return props.color;
+  if (props.fallback && !props.name) {
+    return "gray.900";
+  }
+  return "white.800";
+});
 </script>

packages/wiz-ui-react/src/components/base/avatar/components/avatar.tsx

@@ -2,23 +2,32 @@ import {
   ColorKeys,
   ComponentName,
   SpacingKeys,
+  THEME,
+  getColorCss,
 } from "@wizleap-inc/wiz-ui-constants";
 import * as styles from "@wizleap-inc/wiz-ui-styles/bases/avatar.css";
-import {
-  backgroundStyle,
-  colorStyle,
-  sizeStyle,
-} from "@wizleap-inc/wiz-ui-styles/commons";
+import { colorStyle, sizeStyle } from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
-import { ComponentProps, ForwardedRef, forwardRef, useState } from "react";
+import {
+  ComponentProps,
+  ForwardedRef,
+  forwardRef,
+  useMemo,
+  useState,
+} from "react";
 
 import { BaseProps } from "@/types";
 type Props = BaseProps & {
-  src: string;
+  src?: string;
+  name?: string;
   size?: SpacingKeys;
   color?: ColorKeys;
   bgColor?: ColorKeys;
   alt?: string;
+
+  /**
+   * @deprecated この プロパティ は削除予定です。代わりに `name` プロパティを使ってください。
+   */
   fallback?: string;
   clickable?: boolean;
 } & ComponentProps<"div">;
@@ -29,9 +38,10 @@ const Avatar = forwardRef(
       className,
       style,
       src,
+      name,
       size = "xl3",
-      color = "gray.900",
-      bgColor = "gray.400",
+      color,
+      bgColor,
       alt,
       fallback,
       clickable,
@@ -42,14 +52,38 @@ const Avatar = forwardRef(
   ) => {
     const [isImgLoadSuccess, setIsLoadSuccess] = useState(true);
 
+    const altHeader = useMemo(() => {
+      if (name) {
+        return name;
+      }
+      if (fallback) return fallback;
+      return "";
+    }, [name, fallback]);
+
+    const fontColor = useMemo(() => {
+      if (color) return color;
+      if (fallback && !name) return "gray.900";
+      return "white.800";
+    }, [color, fallback, name]);
+
+    const avatarBgColor = useMemo(() => {
+      if (bgColor) return getColorCss(bgColor);
+      if (!name) return THEME.color.gray[400];
+      const getNum = Array.from(name)
+        .map((ch) => ch.charCodeAt(0))
+        .reduce((a, b) => a + b);
+      const extractHue = (getNum * getNum) % 360;
+      return `hsl(${extractHue}, 50%, 48%)`;
+    }, [bgColor, name]);
+
     return (
       <div
         ref={ref}
         className={clsx(
           className,
           styles.avatarStyle,
           sizeStyle[size],
-          colorStyle[color],
+          colorStyle[fontColor],
           clickable && styles.avatarClickableStyle
         )}
         style={style}
@@ -76,12 +110,12 @@ const Avatar = forwardRef(
           />
         ) : (
           <div
-            className={clsx(
-              styles.avatarFallbackStyle,
-              backgroundStyle[bgColor]
-            )}
+            className={clsx(styles.avatarFallbackStyle)}
+            style={{
+              background: avatarBgColor,
+            }}
           >
-            {fallback}
+            {altHeader}
           </div>
         )}
       </div>

packages/wiz-ui-react/src/components/base/avatar/stories/avatar.stories.tsx

@@ -28,6 +28,9 @@ const meta: Meta<typeof WizAvatar> = {
     alt: {
       control: { type: "text" },
     },
+    name: {
+      control: { type: "text" },
+    },
     fallback: {
       control: { type: "text" },
     },
@@ -54,6 +57,7 @@ export const HaveImage: Story = {
   args: {
     src: "./public/images/avatar-1.png",
     alt: "avatar",
+    name: "John Due",
   },
   render: (args) => <WizAvatar {...args} />,
 };
@@ -63,13 +67,14 @@ export const FailToLoadImage: Story = {
     docs: {
       description: {
         story:
-          "イメージの表示に失敗した場合は、画像の代わりに `alt` で指定した代替テキストが表示されます。",
+          "イメージの表示に失敗した場合は、画像の代わりに `name` で指定した代替テキストが表示されます。",
       },
     },
   },
   args: {
     src: "./public/images/avatar-0.png",
     alt: "avatar",
+    name: "John Due",
   },
   render: (args) => <WizAvatar {...args} />,
 };