@bitrise/bitkit 10.17.0 → 10.18.0-alpha-chakra.2

package/package.json

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

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/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,78 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const ToggleTheme: ComponentStyleConfig = {
+  baseStyle: {
+    formControl: {
+      display: 'flex',
+      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)',
+      },
+    },
+    label: {
+      flexBasis: 'calc(100% - 56px)',
+    },
+    spinner: {
+      width: '16',
+      height: '16',
+      color: 'neutral.70',
+    },
+    helpherText: {
+      fontSize: '2',
+      lineHeight: '2',
+      marginTop: '-4px',
+      color: 'neutral.40',
+    },
+  },
+};
+
+export default ToggleTheme;

package/src/Components/Toggle/Toggle.tsx

@@ -0,0 +1,53 @@
+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 sx={css.label} 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,
   },
 };