@bitrise/bitkit 10.33.0-alpha-chakra.2 → 10.33.0-alpha-chakra.4

package/package.json

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

package/src/Components/Notification/Notification.tsx

@@ -1,11 +1,12 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
-import { Alert as ChakraAlert, AlertProps, forwardRef, Spinner } from '@chakra-ui/react';
+import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
 import { ColorScheme } from '../../Foundations/Colors/Colors';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon, { TypeIconName } from '../Icon/Icon';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 type NotificationStatus = 'info' | 'error' | 'success' | 'warning' | 'progress';
 
@@ -18,7 +19,7 @@ const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIc
     colorScheme: 'purple',
     defaultIcon: (
       <Box width={24} height={24} padding={2}>
-        <Spinner width={20} height={20} />
+        <ProgressSpinner size={20} />
       </Box>
     ),
   },

package/src/Components/ProgressBitbot/ProgressBitbot.stories.tsx

@@ -0,0 +1,12 @@
+import ProgressBitbot from './ProgressBitbot';
+
+export default {
+  component: ProgressBitbot,
+};
+
+export const WithProps = {
+  args: {
+    content: 'Loading...',
+    size: 64,
+  },
+};

package/src/{Old/Progress → Components/ProgressBitbot}/ProgressBitbot.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { Props as BaseProps } from '../Base/Base';
-import Text from '../../Components/Text/Text';
+import { forwardRef } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+import Text from '../Text/Text';
 
-export interface Props extends BaseProps {
+export interface ProgressBitbotProps extends BoxProps {
   /**
    * Message that appears underneath Bitbot to help
    * indicate what is progressing.
@@ -11,7 +11,7 @@ export interface Props extends BaseProps {
   /**
    * The size of the Bitbot progress indicator.
    */
-  size?: string;
+  size?: BoxProps['width'];
 }
 
 const alternate = (a: string, b: string, length: number) =>
@@ -58,12 +58,12 @@ const mouth = alternate(mouth0, mouth1, 7);
 /**
  * A playful indeterminate progress indicator.
  */
-const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
-  const { content, size, ...rest } = props;
+const ProgressBitbot = forwardRef<ProgressBitbotProps, 'div'>((props, ref) => {
+  const { content, size = '64', ...rest } = props;
 
   return (
-    <Text {...rest} textAlign="center">
-      <svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
+    <Box {...rest} ref={ref}>
+      <Box as="svg" fill="currentColor" height={size} viewBox="0 0 24 24" width={size} marginX="auto">
         <g fill="currentColor" fillRule="evenodd" stroke="none" strokeWidth="1">
           <path d={dot0}>
             <animate
@@ -156,19 +156,15 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
             />
           </path>
         </g>
-      </svg>
+      </Box>
 
       {content && (
         <Text textAlign="center" size="1" textTransform="uppercase">
           {content}
         </Text>
       )}
-    </Text>
+    </Box>
   );
-};
-
-ProgressBitbot.defaultProps = {
-  size: '64px',
-};
+});
 
 export default ProgressBitbot;

package/src/Components/ProgressSpinner/ProgressSpinner.stories.tsx

@@ -0,0 +1,12 @@
+import ProgressSpinner from './ProgressSpinner';
+
+export default {
+  component: ProgressSpinner,
+};
+
+export const WithProps = {
+  args: {
+    color: 'purple.40',
+    size: 24,
+  },
+};

package/src/Components/ProgressSpinner/ProgressSpinner.tsx

@@ -0,0 +1,15 @@
+import { Spinner as ChakraSpinner, SpinnerProps, forwardRef } from '@chakra-ui/react';
+
+export interface ProgressSpinnerProps extends Omit<SpinnerProps, 'size'> {
+  size?: SpinnerProps['width'];
+}
+
+/**
+ * Progresspinner
+ */
+const Progresspinner = forwardRef<ProgressSpinnerProps, 'div'>((props, ref) => {
+  const { size = '24', ...rest } = props;
+  return <ChakraSpinner width={size} height={size} {...rest} ref={ref} />;
+});
+
+export default Progresspinner;

package/src/Components/Select/Select.tsx

@@ -8,9 +8,9 @@ import {
   forwardRef,
   Select as ChakraSelect,
   SelectProps as ChakraSelectProps,
-  Spinner,
 } from '@chakra-ui/react';
 import Icon from '../Icon/Icon';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
@@ -52,7 +52,7 @@ const Select = forwardRef<SelectProps, 'div'>((props, ref) => {
   };
   const selectProperties: ChakraSelectProps = {
     icon: isLoading ? (
-      <Spinner width={iconSize} height={iconSize} marginEnd="4" />
+      <ProgressSpinner size={iconSize} marginEnd="4" />
     ) : (
       <Icon name="DropdownArrows" fontSize={iconSize} size={iconSize} />
     ),

package/src/Components/Toggle/Toggle.tsx

@@ -5,13 +5,13 @@ import {
   FormErrorMessage,
   FormHelperText,
   FormLabel,
-  Spinner,
   Switch,
   SwitchProps,
   forwardRef,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 export interface ToggleProps extends Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'> {
   'data-testid'?: string;
@@ -77,7 +77,7 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
             {label}
           </FormLabel>
         )}
-        {isLoading && <Spinner sx={css.spinner} />}
+        {isLoading && <ProgressSpinner sx={css.spinner} />}
       </Box>
       {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
       {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}

package/src/index.ts

@@ -216,3 +216,9 @@ export { default as SkeletonBox } from './Components/Skeleton/SkeletonBox';
 
 export type { ProgressBarProps } from './Components/ProgressBar/ProgressBar';
 export { default as ProgressBar } from './Components/ProgressBar/ProgressBar';
+
+export type { ProgressBitbotProps } from './Components/ProgressBitbot/ProgressBitbot';
+export { default as ProgressBitbot } from './Components/ProgressBitbot/ProgressBitbot';
+
+export type { ProgressSpinnerProps } from './Components/ProgressSpinner/ProgressSpinner';
+export { default as ProgressSpinner } from './Components/ProgressSpinner/ProgressSpinner';

package/src/old.ts

@@ -17,9 +17,3 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
-
-export type { Props as ProgressBitbotProps } from './Old/Progress/ProgressBitbot';
-export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
-
-export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
-export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';