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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.34.1",
+  "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/Components/Dialog/Dialog.theme.ts

@@ -1,7 +1,7 @@
-import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
-const DialogTheme: SystemStyleObject = {
-  baseStyle: {
+const DialogTheme: ComponentStyleConfig = {
+  baseStyle: ({ scrollBehavior }) => ({
     overlay: {
       backgroundColor: 'rgba(0, 0, 0, .5)',
     },
@@ -9,13 +9,15 @@ const DialogTheme: SystemStyleObject = {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'flex-start',
-      overflow: 'auto',
+      overflow: scrollBehavior === 'inside' ? 'hidden' : 'auto',
+      zIndex: 'dialog',
     },
     dialog: {
       borderRadius: '8',
       backgroundColor: 'neutral.100',
       boxShadow: 'large',
       marginY: '128',
+      maxH: scrollBehavior === 'inside' ? 'calc(100% - 16rem)' : undefined,
     },
     header: {
       padding: '24',
@@ -42,7 +44,7 @@ const DialogTheme: SystemStyleObject = {
       padding: '32',
       paddingTop: '48',
     },
-  },
+  }),
   sizes: {
     small: {
       dialog: {
@@ -61,7 +63,7 @@ const DialogTheme: SystemStyleObject = {
     },
     full: {
       dialogContainer: {
-        zIndex: 1000,
+        zIndex: 'fullDialog',
       },
       dialog: {
         position: 'absolute',
@@ -71,6 +73,7 @@ const DialogTheme: SystemStyleObject = {
         right: '32',
         top: '32',
         bottom: '32',
+        maxH: 'auto',
       },
     },
     mobile: {

package/src/Components/Dialog/Dialog.tsx

@@ -25,17 +25,24 @@ export const useDialog = (): DialogState => {
     onOpen,
   };
 };
-export interface DialogProps extends HTMLChakraProps<'section'> {
+export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;
   size?: 'small' | 'medium' | 'large' | 'full';
+  scrollBehavior?: 'inside' | 'outside';
   state: DialogState;
   title: string;
 }
 
-const Dialog = ({ children, dataTestid, state, size, title, ...rest }: DialogProps) => {
+const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, ...rest }: DialogProps) => {
   const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
-    <Modal closeOnOverlayClick={false} isOpen={state.isOpen} onClose={state.onClose} size={dialogSize}>
+    <Modal
+      closeOnOverlayClick={false}
+      isOpen={state.isOpen}
+      onClose={state.onClose}
+      scrollBehavior={scrollBehavior}
+      size={dialogSize}
+    >
       <ModalOverlay />
       <ModalContent data-testid={dataTestid} {...rest}>
         <ModalHeader>
@@ -53,6 +60,7 @@ const Dialog = ({ children, dataTestid, state, size, title, ...rest }: DialogPro
 };
 
 Dialog.defaultProps = {
+  scrollBehavior: 'outside',
   size: 'medium',
 } as DialogProps;
 

package/src/Components/Popover/Popover.theme.ts

@@ -2,9 +2,6 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 const PopoverTheme: SystemStyleObject = {
   baseStyle: {
-    popper: {
-      zIndex: 10,
-    },
     content: {
       backgroundColor: 'neutral.100',
       borderRadius: 8,

package/src/Components/Popover/PopoverContent.tsx

@@ -1,13 +1,22 @@
-import { ReactNode } from 'react';
+import { ReactNode, Fragment } from 'react';
 import {
   PopoverContentProps as ChakraPopoverContentProps,
   PopoverContent as ChakraPopoverContent,
+  Portal,
 } from '@chakra-ui/react';
 
 export interface PopoverContentProps extends ChakraPopoverContentProps {
   children: ReactNode;
+  withoutPortal?: boolean;
 }
 
-const PopoverContent = (props: PopoverContentProps) => <ChakraPopoverContent {...props} />;
+const PopoverContent = ({ withoutPortal, ...rest }: PopoverContentProps) => {
+  const Wrapper = withoutPortal ? Fragment : Portal;
+  return (
+    <Wrapper>
+      <ChakraPopoverContent {...rest} />
+    </Wrapper>
+  );
+};
 
 export default PopoverContent;

package/src/Foundations/Zindex/Zindex.ts

@@ -0,0 +1,10 @@
+const zIndices = {
+  hide: -1,
+  auto: 'auto',
+  base: 0,
+  header: 1100,
+  fullDialog: 1200,
+  dialog: 1300,
+};
+
+export default zIndices;

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';
@@ -21,6 +22,7 @@ import radii from './Foundations/Radii/Radii';
 import shadows from './Foundations/Shadows/Shadows';
 import sizes from './Foundations/Sizes/Sizes';
 import typography from './Foundations/Typography/Typography';
+import zIndices from './Foundations/Zindex/Zindex';
 
 const theme = {
   config: {
@@ -33,6 +35,7 @@ const theme = {
   shadows,
   sizes,
   space: sizes,
+  zIndices,
   styles: {
     global: {
       body: {
@@ -57,6 +60,7 @@ const theme = {
     },
   },
   components: {
+    Avatar,
     Badge,
     Button,
     Card,