@bitrise/bitkit 10.17.0-alpha-export-new-notification.1 → 10.18.0-alpha-chakra.1

package/package.json

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

package/src/Components/Accordion/Accordion.stories.tsx

@@ -56,5 +56,8 @@ export const DefaultVariant: ComponentStory<typeof Accordion> = (props) => (
       Content - you can use any style prop on AccordionItem
     </AccordionItem>
     <AccordionItem buttonContent={<ButtonContentElement title="Without children" />} id="third" />
+    <AccordionItem buttonContent="Fourth, enabled element" fontSize="2" id="fourth">
+      Fourth, enabled element
+    </AccordionItem>
   </Accordion>
 );

package/src/Components/Accordion/Accordion.theme.ts

@@ -1,5 +1,22 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
+const buttonStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '16',
+  borderBottom: '1px solid',
+  borderColor: 'neutral.93',
+  borderRadius: '8',
+};
+
+const iconStyle = {
+  width: '24',
+  height: '24',
+  marginLeft: '16',
+};
+
 const AccordionTheme: ComponentStyleConfig = {
   baseStyle: ({ colorScheme }) => ({
     item: {
@@ -9,28 +26,29 @@ const AccordionTheme: ComponentStyleConfig = {
       boxShadow: 'small',
       marginBottom: '16',
     },
-    button: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: '100%',
-      padding: '16',
+    enabledButton: {
+      ...buttonStyle,
       background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
-      borderBottom: '1px solid',
-      borderColor: 'neutral.93',
-      borderRadius: '8',
-      '&[type="button"]:hover': {
+      _hover: {
         background: 'purple.95',
       },
-      '&[aria-expanded="true"]': {
+      _expanded: {
         borderBottomLeftRadius: '0',
         borderBottomRightRadius: '0',
       },
     },
-    icon: {
-      width: '24',
-      height: '24',
-      marginLeft: '16',
+    disabledButton: {
+      ...buttonStyle,
+      background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
+      cursor: 'default',
+    },
+    enabledIcon: {
+      ...iconStyle,
+    },
+    disabledIcon: {
+      ...iconStyle,
+      opacity: '0.4',
+      transform: 'none',
     },
     panel: {
       padding: '16',

package/src/Components/Accordion/AccordionItem.tsx

@@ -8,7 +8,6 @@ import {
   AccordionIcon,
   useAccordionStyles,
 } from '@chakra-ui/react';
-import Box from '../Box/Box';
 import Text from '../Text/Text';
 
 export interface AccordionItemProps extends AccordionPanelProps {
@@ -21,14 +20,12 @@ const AccordionItem = (props: AccordionItemProps) => {
   const { buttonContent, children, id, ...rest } = props;
   const styles = useAccordionStyles();
 
-  const ButtonComponent = children ? AccordionButton : Box;
-
   return (
     <ChakraAccordionItem sx={styles.item} id={id}>
-      <ButtonComponent sx={styles.button}>
+      <AccordionButton sx={children ? styles.enabledButton : styles.disabledButton}>
         {isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
-        <AccordionIcon opacity={children ? 1 : 0.4} />
-      </ButtonComponent>
+        <AccordionIcon sx={children ? styles.enabledIcon : styles.disabledIcon} />
+      </AccordionButton>
       {!!children && <AccordionPanel {...rest}>{children}</AccordionPanel>}
     </ChakraAccordionItem>
   );

package/src/Components/Notification/Notification.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import Notification, { NotificationText, NotificationTitle } from './Notification';
+import Link from '../Link/Link';
+import Notification from './Notification';
 
 export default {
   title: 'Components/Notification',
   component: Notification,
   argTypes: {
-    title: { type: 'string', defaultValue: 'title' },
-    description: { type: 'string', defaultValue: 'description' },
+    children: { type: 'string', defaultValue: 'text' },
     action: {
       control: 'inline-radio',
       options: ['unset', 'link', 'action'],
@@ -31,12 +31,7 @@ export default {
   },
 } as ComponentMeta<typeof Notification>;
 
-const Template: ComponentStoryFn<typeof Notification> = ({ title, description, ...props }) => (
-  <Notification {...props}>
-    <NotificationTitle>{title}</NotificationTitle>
-    <NotificationText>{description}</NotificationText>
-  </Notification>
-);
+const Template: ComponentStoryFn<typeof Notification> = (props) => <Notification {...props} />;
 
 export const Default: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
 Default.args = {
@@ -64,3 +59,26 @@ WithAction.args = {
     label: 'Upgrade',
   },
 };
+
+export const WithActionAfterContent: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
+WithActionAfterContent.storyName = 'With action after content';
+WithActionAfterContent.args = {
+  action: {
+    label: 'Upgrade',
+    placement: 'after-content',
+  },
+};
+
+export const WithLink: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
+WithLink.storyName = 'With link';
+WithLink.args = {
+  children: (
+    <>
+      Unable to send build status back to your git host. Please check{' '}
+      <Link href="#/" isUnderlined>
+        our guide
+      </Link>
+      .
+    </>
+  ),
+};

package/src/Components/Notification/Notification.tsx

@@ -1,13 +1,5 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
-import {
-  Alert as ChakraAlert,
-  AlertTitle as NotificationTitle,
-  AlertProps,
-  forwardRef,
-  AlertDescription as NotificationText,
-  Spinner,
-  chakra,
-} from '@chakra-ui/react';
+import { Alert as ChakraAlert, AlertProps, forwardRef, Spinner } from '@chakra-ui/react';
 
 import { ColorScheme } from '../../Foundations/Colors/Colors';
 import Box from '../Box/Box';
@@ -25,9 +17,9 @@ const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIc
   progress: {
     colorScheme: 'purple',
     defaultIcon: (
-      <chakra.span w="24" h="24" p="2">
-        <Spinner w="100" h="100" />
-      </chakra.span>
+      <Box width={24} height={24} padding={2}>
+        <Spinner width={20} height={20} />
+      </Box>
     ),
   },
 } as const;
@@ -36,6 +28,7 @@ export type ActionProps = {
   label: string;
   href?: string;
   onClick?: () => void;
+  placement?: 'end' | 'after-content';
 } & Omit<ColorButtonProps, 'as' | 'onClick' | 'colorScheme'>;
 export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorScheme' | 'onClose'> {
   status: NotificationStatus;
@@ -70,6 +63,7 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   const { colorScheme, defaultIcon } = STATUSES[status];
   const icon = iconName ? <Icon name={iconName} /> : defaultIcon;
   let actionButton;
+  const actionPlacement = action?.placement ?? 'end';
   if (action) {
     actionButton = <NotificationAction marginRight="12" {...action} alignSelf="center" />;
   }
@@ -81,12 +75,18 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
     <ChakraAlert ref={ref} {...rest} colorScheme={colorScheme}>
       <ActionContext.Provider value={actionContext}>
         {showIcon && cloneElement(icon, { flexShrink: 0, marginTop })}
-        <Box wordBreak="break-word" display="flex" flexDirection="column" flexGrow={1} marginTop={marginTop}>
+        <Box wordBreak="break-word" flexGrow={actionPlacement === 'end' ? 1 : undefined} marginTop={marginTop}>
           {children}
         </Box>
         {actionButton}
         {onClose && (
-          <CloseButton flexShrink={0} colorScheme={colorScheme} onClick={onClose}>
+          <CloseButton
+            flexShrink={0}
+            marginLeft="auto"
+            marginTop={marginTop}
+            colorScheme={colorScheme}
+            onClick={onClose}
+          >
             <Icon name="CloseSmall" />
           </CloseButton>
         )}
@@ -95,5 +95,5 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   );
 });
 
-export { NotificationTitle, NotificationText, NotificationAction };
+export { NotificationAction };
 export default Notification;

package/src/Components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
+import React, { isValidElement, ReactElement, useState } from 'react';
 import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
@@ -15,6 +15,25 @@ const getTabIds = (props: TabsProps): string[] => {
   return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
 };
 
+const getTabIndexFromSearchParams = (tabIds: string[], defaultIndex?: number) => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const tabName = searchParams.get('tab');
+  if (!tabName) {
+    return undefined;
+  }
+
+  const index = tabIds.indexOf(tabName);
+  if (index === -1) {
+    return defaultIndex;
+  }
+
+  return index;
+};
+
 /**
  * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
  */
@@ -23,21 +42,16 @@ const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
   const tabIds = getTabIds(props);
   const defaultIndex = tabIds.indexOf(defaultTab) > -1 ? tabIds.indexOf(defaultTab) : 0;
 
-  const { searchParams, replace } = useHistory();
-  const [actualIndex, setActualIndex] = useState(defaultIndex);
-
-  useEffect(() => {
-    if (withHistory && searchParams.get('tab')) {
-      const tabName = searchParams.get('tab') || '';
-      const index = tabIds.indexOf(tabName) > -1 ? tabIds.indexOf(tabName) : defaultIndex;
-      setActualIndex(index);
-    }
-  }, []);
+  const { replace } = useHistory();
+  const [actualIndex, setActualIndex] = useState(
+    withHistory ? getTabIndexFromSearchParams(tabIds, defaultIndex) : defaultIndex,
+  );
 
   const onTabChange = (index: number) => {
     const tabId = tabIds[index];
     setActualIndex(index);
     if (withHistory) {
+      const searchParams = new URLSearchParams(window.location.search);
       if (tabId) {
         searchParams.set('tab', tabId);
       } else {

package/src/Components/Toast/Toast.tsx

@@ -1,12 +1,7 @@
-import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react';
+import { useToast as useChakraToast, UseToastOptions, AlertTitle, AlertDescription } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
-import Notification, {
-  ActionProps,
-  NotificationAction,
-  NotificationProps,
-  NotificationText,
-  NotificationTitle,
-} from '../Notification/Notification';
+import Box from '../Box/Box';
+import Notification, { ActionProps, NotificationAction, NotificationProps } from '../Notification/Notification';
 
 export interface ToastOptions {
   title: string;
@@ -37,10 +32,12 @@ const useToast = () => {
           status={opts.status}
           onClose={opts.isClosable ? onClose : undefined}
         >
-          <NotificationTitle>{opts.title}</NotificationTitle>
-          <NotificationText>{opts.description}</NotificationText>
-          {!opts.action && timestamp && <NotificationText marginTop="8">{timestamp}</NotificationText>}
-          {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
+          <Box display="flex" flexDirection="column">
+            <AlertTitle>{opts.title}</AlertTitle>
+            <AlertDescription>{opts.description}</AlertDescription>
+            {!opts.action && timestamp && <AlertDescription marginTop="8">{timestamp}</AlertDescription>}
+            {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
+          </Box>
         </Notification>
       ),
     });

package/src/Components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta } from '@storybook/react';
+import Toggle from './Toggle';
+
+export default {
+  title: 'Components/Toggle',
+  component: Toggle,
+} as ComponentMeta<typeof Toggle>;
+
+export const WithProps = {
+  args: {
+    children: 'Toggle the toggle',
+    defaultChecked: false,
+    helpherText:
+      'Inline help. Maecenas a turpis tortor. Nunc vitae libero tempor, ullamcorper purus quis, mattis tellus.',
+    isDisabled: false,
+    isLoading: false,
+  },
+};

package/src/Components/Toggle/Toggle.theme.ts

@@ -0,0 +1,77 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const ToggleTheme: ComponentStyleConfig = {
+  baseStyle: {
+    formControl: {
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: '8',
+    },
+    track: {
+      boxSizing: 'border-box',
+      width: '48',
+      height: '24',
+      padding: '0.125rem',
+      backgroundColor: 'neutral.50',
+      borderRadius: '12',
+      transition: '100ms',
+      _disabled: {
+        backgroundColor: 'neutral.93',
+        cursor: 'not-allowed',
+      },
+      _checked: {
+        backgroundColor: 'turquoise.70',
+        _disabled: {
+          backgroundColor: 'turquoise.80',
+        },
+      },
+      _before: {
+        content: '""',
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.213 13.915 17.234 7l1.49 1.49L10.212 17 5 11.68l1.49-1.489 3.723 3.724Z' fill='white' /%3E%3C/svg%3E")`,
+        backgroundPositionX: '0.125rem',
+        position: 'absolute',
+        left: 0,
+        right: '50%',
+        top: 0,
+        bottom: 0,
+      },
+      _after: {
+        content: '""',
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E")`,
+        backgroundPositionX: '-0.125rem',
+        position: 'absolute',
+        left: '50%',
+        right: 0,
+        top: 0,
+        bottom: 0,
+      },
+    },
+    thumb: {
+      position: 'relative',
+      zIndex: '1',
+      width: '1.25rem',
+      height: '1.25rem',
+      borderRadius: '24',
+      bgGradient: 'linear(to-b, neutral.93 3.43%, neutral.100 100%)',
+      transition: '100ms',
+      _checked: {
+        transform: 'translate(24px)',
+      },
+    },
+    spinner: {
+      width: '16',
+      height: '16',
+      color: 'neutral.70',
+    },
+    helpherText: {
+      fontSize: '2',
+      lineHeight: '2',
+      width: '100%',
+      marginTop: '-4px',
+      color: 'neutral.40',
+    },
+  },
+};
+
+export default ToggleTheme;

package/src/Components/Toggle/Toggle.tsx

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import {
+  FormControl,
+  FormControlProps,
+  FormLabel,
+  Spinner,
+  Switch,
+  SwitchProps,
+  forwardRef,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
+import Text from '../Text/Text';
+
+export interface ToggleProps extends FormControlProps {
+  children?: ReactNode;
+  defaultChecked?: SwitchProps['defaultChecked'];
+  id?: SwitchProps['id'];
+  isChecked?: SwitchProps['isChecked'];
+  isDisabled?: SwitchProps['isDisabled'];
+  isLoading?: boolean;
+  helpherText?: string;
+  onChange?: SwitchProps['onChange'];
+  value?: SwitchProps['value'];
+}
+
+/**
+ * The Toggle component is used as an alternative for the checkbox component.
+ */
+const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
+  const { children, defaultChecked, helpherText, id, isChecked, isDisabled, isLoading, onChange, value, ...rest } =
+    props;
+  const switchProps = {
+    defaultChecked,
+    id,
+    isChecked,
+    isDisabled: isDisabled || isLoading,
+    onChange,
+    value,
+  };
+  const css = useMultiStyleConfig('Switch');
+  return (
+    <FormControl sx={css.formControl} {...rest} ref={ref}>
+      <Switch {...switchProps} />
+      <FormLabel htmlFor={id}>{children}</FormLabel>
+      {isLoading && <Spinner sx={css.spinner} />}
+      {helpherText && <Text sx={css.helpherText}>{helpherText}</Text>}
+    </FormControl>
+  );
+});
+
+export default Toggle;

package/src/index.ts

@@ -192,3 +192,6 @@ export { default as Thead } from './Components/Table/Thead';
 
 export type { TableRowProps } from './Components/Table/Tr';
 export { default as Tr } from './Components/Table/Tr';
+
+export type { ToggleProps } from './Components/Toggle/Toggle';
+export { default as Toggle } from './Components/Toggle/Toggle';

package/src/old.ts

@@ -94,9 +94,6 @@ export { default as OldTableRow } from './Old/Table/TableRow';
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';
 
-export type { Props as ToggleProps } from './Old/Toggle/Toggle';
-export { default as Toggle } from './Old/Toggle/Toggle';
-
 export type { Props as VisibilityProps } from './Old/Visibility/Visibility';
 export { default as Visibility } from './Old/Visibility/Visibility';
 

package/src/theme.ts

@@ -23,6 +23,7 @@ import Alert from './Foundations/Themes/Alert.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
 import Popover from './Components/Popover/Popover.theme';
+import Toggle from './Components/Toggle/Toggle.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -93,6 +94,7 @@ const theme = {
     CloseButton,
     Input,
     Popover,
+    Switch: Toggle,
   },
 };