@bitrise/bitkit 9.30.0 → 9.33.0

package/package.json

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

package/src/Components/Dialog/Dialog.theme.ts

@@ -59,6 +59,17 @@ const DialogTheme: SystemStyleObject = {
       },
     },
     full: {
+      dialog: {
+        position: 'absolute',
+        margin: '0',
+        width: 'auto',
+        left: '32',
+        right: '32',
+        top: '32',
+        bottom: '32',
+      },
+    },
+    mobile: {
       dialog: {
         maxW: '100vw',
         minH: '100vh',

package/src/Components/Dialog/Dialog.tsx

@@ -28,13 +28,13 @@ export const useDialog = (): DialogState => {
 export interface DialogProps {
   children: ReactNode;
   dataTestid?: string;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'full';
   state: DialogState;
   title: string;
 }
 
 const Dialog = ({ children, dataTestid, state, size, title }: DialogProps) => {
-  const dialogSize = useBreakpointValue({ mobile: 'full', desktop: size });
+  const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
     <Modal closeOnOverlayClick={false} isOpen={state.isOpen} onClose={state.onClose} size={dialogSize}>
       <ModalOverlay />

package/src/Components/Popover/Popover.stories.tsx

@@ -0,0 +1,19 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Button from '../Button/Button';
+import Popover from './Popover';
+import PopoverTrigger from './PopoverTrigger';
+import PopoverContent from './PopoverContent';
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+} as ComponentMeta<typeof Popover>;
+
+export const Default: ComponentStory<typeof Popover> = () => (
+  <Popover>
+    <PopoverTrigger>
+      <Button>Open popover</Button>
+    </PopoverTrigger>
+    <PopoverContent>Test content</PopoverContent>
+  </Popover>
+);

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

@@ -0,0 +1,15 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const PopoverTheme: SystemStyleObject = {
+  baseStyle: {
+    content: {
+      backgroundColor: 'neutral.100',
+      borderRadius: 8,
+      boxShadow: 'large',
+      py: 24,
+      px: 32,
+    },
+  },
+};
+
+export default PopoverTheme;

package/src/Components/Popover/Popover.tsx

@@ -0,0 +1,7 @@
+import { PopoverProps as ChakraPopoverProps, Popover as ChakraPopover } from '@chakra-ui/react';
+
+export type PopoverProps = ChakraPopoverProps;
+
+const Popover = (props: PopoverProps) => <ChakraPopover {...props} />;
+
+export default Popover;

package/src/Components/Popover/PopoverContent.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import {
+  PopoverContentProps as ChakraPopoverContentProps,
+  PopoverContent as ChakraPopoverContent,
+} from '@chakra-ui/react';
+
+export interface PopoverContentProps extends ChakraPopoverContentProps {
+  children: ReactNode;
+}
+
+const PopoverContent = (props: PopoverContentProps) => <ChakraPopoverContent {...props} />;
+
+export default PopoverContent;

package/src/Components/Popover/PopoverTrigger.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { PopoverTrigger as ChakraPopoverTrigger } from '@chakra-ui/react';
+
+const PopoverTigger: FC = (props) => <ChakraPopoverTrigger {...props} />;
+
+export default PopoverTigger;

package/src/Components/Select/Select.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Select from './Select';
@@ -36,3 +37,40 @@ WithProps.args = sortObjectByKey({
   ...args,
   placeholder: 'Select build status',
 });
+
+export const Controlled = () => {
+  const [value, setValue] = useState<string | undefined>(undefined);
+  return (
+    <Select w="300px" placeholder="Test holder" value={value} onChange={({ target: { value: val } }) => setValue(val)}>
+      {children}
+    </Select>
+  );
+};
+
+export const WithLoading = () => (
+  <>
+    <Select w="300px" isDisabled placeholder="Test holder">
+      {children}
+    </Select>
+    <Select w="300px" isLoading>
+      {children}
+    </Select>
+  </>
+);
+
+export const WithLoadingOnChange = () => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Select
+      w="240px"
+      isLoading={loading}
+      onChange={() => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 3000);
+      }}
+    >
+      {children}
+    </Select>
+  );
+};

package/src/Components/Select/Select.tsx

@@ -1,30 +1,43 @@
-import { Select as ChakraSelect, SelectProps as ChakraSelectProps } from '@chakra-ui/react';
+import { forwardRef, Select as ChakraSelect, SelectProps as ChakraSelectProps, Spinner } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
 
 export interface SelectProps extends ChakraSelectProps {
   size?: 'small' | 'medium';
+  isLoading?: boolean;
 }
 
-const Select = (props: SelectProps) => {
-  const { size, placeholder, children, ...rest } = props;
+const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
+  const { size, placeholder, children, isDisabled, isLoading, ...rest } = props;
   const iconSize = size === 'medium' ? '24' : '16';
   const properties: ChakraSelectProps = {
-    icon: <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />,
+    icon: isLoading ? (
+      <Spinner width={iconSize} height={iconSize} marginEnd="4" />
+    ) : (
+      <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
+    ),
+    isDisabled: isLoading || isDisabled,
     size,
     variant: 'select',
     ...rest,
   };
+  if (placeholder) {
+    if ('value' in properties) {
+      properties.value = properties.value || '';
+    } else {
+      properties.defaultValue = '';
+    }
+  }
   return (
-    <ChakraSelect {...properties}>
+    <ChakraSelect ref={ref} {...properties}>
       {placeholder && (
-        <option selected hidden disabled value="">
+        <option hidden disabled value="">
           {placeholder}
         </option>
       )}
       {children}
     </ChakraSelect>
   );
-};
+});
 
 Select.defaultProps = {
   size: 'medium',

package/src/theme.ts

@@ -13,6 +13,7 @@ import Text from './Components/Text/Text.theme';
 import Notification from './Components/Notification/Notification.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
+import Popover from './Components/Popover/Popover.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -71,6 +72,7 @@ const theme = {
     Tooltip,
     Alert: Notification,
     CloseButton,
+    Popover,
   },
 };