@bitrise/bitkit 9.35.0 → 9.36.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.35.0",
+  "version": "9.36.0-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Avatar from './Avatar';
+
+export default {
+  title: 'Components/Avatar',
+  component: Avatar,
+} as ComponentMeta<typeof Avatar>;
+
+export const WithProps: ComponentStory<typeof Avatar> = ({ contentProps, ...props }) => <Avatar {...props} />;
+
+WithProps.args = {
+  ...Avatar.defaultProps,
+  name: 'Bitrise website',
+  src: 'https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png',
+};

package/src/Components/Avatar/Avatar.theme.ts

@@ -0,0 +1,66 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { AvatarSizes } from './Avatar';
+
+const BACKGROUND_COLORS = [
+  '#68442c',
+  '#86d641',
+  '#a775db',
+  '#df5ac3',
+  '#46bee8',
+  '#63c99a',
+  '#19937c',
+  '#ed544c',
+  '#ff931e',
+  '#107ec1',
+  '#48e1ed',
+  '#743da5',
+  '#f9d128',
+  '#ff931e',
+  '#9e4b39',
+  '#b51c98',
+  '#b20202',
+  '#bf8a66',
+  '#2c3f50',
+  '#441f62',
+  '#0c5b4c',
+  '#391401',
+  '#27ae61',
+  '#ef7bef',
+];
+
+const getSize = (size: AvatarSizes) => {
+  const sizeAsNumber = Number(size);
+  const fontSizes = {
+    16: '9px',
+    24: '1',
+    32: '3',
+    40: '3',
+    48: '4',
+    64: '5',
+    96: '7',
+    128: '8',
+  };
+
+  return {
+    fontSize: fontSizes[sizeAsNumber as keyof typeof fontSizes],
+    height: `${sizeAsNumber / 16}rem`,
+    width: `${sizeAsNumber / 16}rem`,
+  };
+};
+
+const AvatarTheme: ComponentStyleConfig = {
+  baseStyle: ({ name, size }) => {
+    const str = name.toUpperCase();
+    const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+
+    return {
+      container: {
+        backgroundColor: BACKGROUND_COLORS[seed % BACKGROUND_COLORS.length],
+        color: 'neutral.100',
+        ...getSize(size),
+      },
+    };
+  },
+};
+
+export default AvatarTheme;

package/src/Components/Avatar/Avatar.tsx

@@ -0,0 +1,24 @@
+import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from '@chakra-ui/react';
+import { Radii } from '../../Foundations/Radii/Radii';
+
+export type AvatarSizes = '16' | '24' | '32' | '40' | '48' | '64' | '96' | '128';
+
+export interface AvatarProps extends ChakraAvatarProps {
+  borderRadius?: keyof Radii;
+  size?: AvatarSizes;
+}
+
+const getInitials = (name: string) => {
+  return `${name.charAt(0)}${name.charAt(name.length - 1)}`;
+};
+
+const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => (
+  <ChakraAvatar getInitials={getInitials} {...props} ref={ref} />
+));
+
+Avatar.defaultProps = {
+  borderRadius: '8',
+  size: '32',
+} as AvatarProps;
+
+export default Avatar;

package/src/index.ts

@@ -110,3 +110,5 @@ export { default as PopoverTrigger } from './Components/Popover/PopoverTrigger';
 export type { PopoverContentProps } from './Components/Popover/PopoverContent';
 export { default as PopoverContent } from './Components/Popover/PopoverContent';
 
+export type { AvatarProps } from './Components/Avatar/Avatar';
+export { default as Avatar } from './Components/Avatar/Avatar';

package/src/old.ts

@@ -34,9 +34,6 @@ export { default as AppLayoutMain } from './Old/AppLayout/AppLayoutMain';
 export type { Props as AppLayoutSidebarProps } from './Old/AppLayout/AppLayoutSidebar';
 export { default as AppLayoutSidebar } from './Old/AppLayout/AppLayoutSidebar';
 
-export type { Props as AvatarProps } from './Old/Avatar/Avatar';
-export { default as Avatar } from './Old/Avatar/Avatar';
-
 export type { Props as BaseProps } from './Old/Base/Base';
 export type { TypeBorderRadius } from './Old/Base/Base';
 export type { TypeColors } from './Old/Base/Base';

package/src/theme.ts

@@ -1,3 +1,4 @@
+import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
@@ -59,6 +60,7 @@ const theme = {
     },
   },
   components: {
+    Avatar,
     Badge,
     Button,
     Card,