@bitrise/bitkit 10.17.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.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/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,
   },
 };