@bitrise/bitkit 9.39.0-alpha-chakra.1 → 9.39.0-alpha-form.2

package/package.json

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

package/src/Components/Form/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,36 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import CheckboxGroup from './CheckboxGroup';
+import Checkbox from './Checkbox';
+
+export default {
+  component: Checkbox,
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (props) => <Checkbox {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  children: 'Checkbox',
+  isDisabled: false,
+  isIndeterminate: false,
+};
+
+export const InGroup: ComponentStory<typeof CheckboxGroup> = (props) => (
+  <CheckboxGroup {...props} display="flex" gap="24">
+    <Checkbox value="1">
+      Checkbox 1<br />
+      asddssadsda
+    </Checkbox>
+    <Checkbox value="2">Checkbox 2</Checkbox>
+    <Checkbox value="3">Checkbox 3</Checkbox>
+  </CheckboxGroup>
+);
+
+InGroup.args = {
+  defaultValue: ['1', '3'],
+};

package/src/Components/{Checkbox → Form/Checkbox}/Checkbox.theme.ts

@@ -6,6 +6,7 @@ const CheckboxTheme: ComponentStyleConfig = {
       color: 'neutral.100',
     },
     container: {
+      alignItems: 'flex-start',
       _disabled: {
         cursor: 'not-allowed',
         ':hover > span:first-of-type': {
@@ -23,6 +24,7 @@ const CheckboxTheme: ComponentStyleConfig = {
       borderColor: 'neutral.90',
       borderRadius: '4',
       boxShadow: 'inner',
+      transitionDuration: '200ms',
       _checked: {
         backgroundColor: 'purple.50',
         _disabled: {
@@ -32,7 +34,8 @@ const CheckboxTheme: ComponentStyleConfig = {
       _hover: {
         borderColor: 'neutral.70',
       },
-      _focusVisible: {
+      // TODO: change it to _focusVisible when the Chakra updated to v2
+      _focus: {
         boxShadow: 'outline',
       },
     },

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,22 @@
+import { Checkbox as ChakraCheckbox, CheckboxProps as ChakraCheckboxProps, forwardRef } from '@chakra-ui/react';
+import Icon from '../../Icon/Icon';
+
+export type CheckboxProps = Omit<ChakraCheckboxProps, 'icon' | 'iconColor' | 'iconSize'>;
+
+const CustomIcon = (props: CheckboxProps) => {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { __css, isChecked, isIndeterminate } = props;
+  if (!isChecked) {
+    return null;
+  }
+  return <Icon __css={__css} name={isIndeterminate ? 'MinusClose' : 'Tick'} />;
+};
+
+/**
+ * Checkbox component is used in forms when a user needs to select multiple values from several options.
+ */
+const Checkbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
+  return <ChakraCheckbox alignItems="flex-start" icon={<CustomIcon />} {...props} ref={ref} />;
+});
+
+export default Checkbox;

package/src/Components/Form/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,26 @@
+import { CheckboxGroup as ChakraCheckboxGroup, CheckboxGroupProps as ChakraCheckboxGroupProps } from '@chakra-ui/react';
+import Box, { BoxProps } from '../../Box/Box';
+
+export type CheckboxGroupProps = ChakraCheckboxGroupProps & BoxProps;
+
+/**
+ * CheckboxGroup component to help manage the checked state of its children Checkbox components and conveniently pass a few shared style props to each.
+ * Composes Box.
+ */
+const CheckboxGroup = (props: CheckboxGroupProps) => {
+  const { children, defaultValue, isDisabled, isNative, onChange, value, ...boxProps } = props;
+  const groupProps = {
+    defaultValue,
+    isDisabled,
+    isNative,
+    onChange,
+    value,
+  };
+  return (
+    <ChakraCheckboxGroup {...groupProps}>
+      <Box {...boxProps}>{children}</Box>
+    </ChakraCheckboxGroup>
+  );
+};
+
+export default CheckboxGroup;

package/src/Components/Form/Radio/Radio.stories.tsx

@@ -0,0 +1,28 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import RadioGroup from './RadioGroup';
+import Radio from './Radio';
+
+export default {
+  component: Radio,
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+} as ComponentMeta<typeof Radio>;
+
+export const InGroup: ComponentStory<typeof RadioGroup> = (props) => (
+  <RadioGroup {...props} display="flex" gap="24">
+    <Radio value="1">
+      Radio 1<br />
+      asdasddsa
+    </Radio>
+    <Radio value="2">Radio 2</Radio>
+    <Radio value="3">Radio 3</Radio>
+  </RadioGroup>
+);
+
+InGroup.args = {
+  defaultValue: '2',
+  name: 'radioName',
+};

package/src/Components/Form/Radio/Radio.theme.ts

@@ -0,0 +1,56 @@
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const RadioTheme: ComponentStyleConfig = {
+  baseStyle: {
+    icon: {
+      color: 'neutral.100',
+    },
+    container: {
+      alignItems: 'flex-start',
+      _disabled: {
+        cursor: 'not-allowed',
+        ':hover > span:first-of-type': {
+          borderColor: 'neutral.90',
+        },
+      },
+      ':hover > span:first-of-type': {
+        borderColor: 'neutral.70',
+      },
+    },
+    control: {
+      width: '24',
+      height: '24',
+      border: '1px solid',
+      borderColor: 'neutral.90',
+      borderRadius: '12',
+      boxShadow: 'inner',
+      _before: {
+        content: `""`,
+        display: 'inline-block',
+        width: '12',
+        height: '12',
+        borderRadius: '50%',
+        backgroundColor: 'transparent',
+        transitionDuration: '200ms',
+      },
+      _checked: {
+        _before: {
+          backgroundColor: 'purple.40',
+        },
+      },
+      _hover: {
+        borderColor: 'neutral.70',
+      },
+      // TODO: change it to _focusVisible when the Chakra updated to v2
+      _focus: {
+        boxShadow: 'outline',
+      },
+    },
+    label: {
+      userSelect: 'none',
+      _disabled: { color: 'neutral.60' },
+    },
+  },
+};
+
+export default RadioTheme;

package/src/Components/Form/Radio/Radio.tsx

@@ -0,0 +1,12 @@
+import { Radio as ChakraRadio, RadioProps as ChakraRadioProps, forwardRef } from '@chakra-ui/react';
+
+export type RadioProps = ChakraRadioProps;
+
+/**
+ * Radios are used when only one choice may be selected in a series of options.
+ */
+const Radio = forwardRef<RadioProps, 'input'>((props, ref) => {
+  return <ChakraRadio {...props} ref={ref} />;
+});
+
+export default Radio;

package/src/Components/Form/Radio/RadioGroup.tsx

@@ -0,0 +1,27 @@
+import { RadioGroup as ChakraRadioGroup, RadioGroupProps as ChakraRadioGroupProps } from '@chakra-ui/react';
+import Box, { BoxProps } from '../../Box/Box';
+
+export type RadioGroupProps = ChakraRadioGroupProps & BoxProps;
+
+/**
+ * RadioGroup component to help manage Radio components and conveniently pass a few shared style props to each.
+ * Composes Box.
+ */
+const RadioGroup = (props: RadioGroupProps) => {
+  const { children, defaultValue, isDisabled, isFocusable, isNative, onChange, value, ...boxProps } = props;
+  const groupProps = {
+    defaultValue,
+    isDisabled,
+    isFocusable,
+    isNative,
+    onChange,
+    value,
+  };
+  return (
+    <ChakraRadioGroup {...groupProps}>
+      <Box {...boxProps}>{children}</Box>
+    </ChakraRadioGroup>
+  );
+};
+
+export default RadioGroup;

package/src/index.ts

@@ -118,5 +118,14 @@ export { default as List } from './Components/List/List';
 export type { ListItemProps } from './Components/List/ListItem';
 export { default as ListItem } from './Components/List/ListItem';
 
-export type { CheckboxProps } from './Components/Checkbox/Checkbox';
-export { default as Checkbox } from './Components/Checkbox/Checkbox';
+export type { CheckboxProps } from './Components/Form/Checkbox/Checkbox';
+export { default as Checkbox } from './Components/Form/Checkbox/Checkbox';
+
+export type { CheckboxGroupProps } from './Components/Form/Checkbox/CheckboxGroup';
+export { default as CheckboxGroup } from './Components/Form/Checkbox/CheckboxGroup';
+
+export type { RadioProps } from './Components/Form/Radio/Radio';
+export { default as Radio } from './Components/Form/Radio/Radio';
+
+export type { RadioGroupProps } from './Components/Form/Radio/RadioGroup';
+export { default as RadioGroup } from './Components/Form/Radio/RadioGroup';

package/src/theme.ts

@@ -2,7 +2,7 @@ import Avatar from './Components/Avatar/Avatar.theme';
 import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
-import Checkbox from './Components/Checkbox/Checkbox.theme';
+import Checkbox from './Components/Form/Checkbox/Checkbox.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Dialog from './Components/Dialog/Dialog.theme';
 import Divider from './Components/Divider/Divider.theme';
@@ -10,6 +10,7 @@ import EmptyState from './Components/EmptyState/EmptyState.theme';
 import Link from './Components/Link/Link.theme';
 import List from './Components/List/List.theme';
 import Menu from './Components/Menu/Menu.theme';
+import Radio from './Components/Form/Radio/Radio.theme';
 import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
@@ -74,6 +75,7 @@ const theme = {
     List,
     Menu,
     Modal: Dialog,
+    Radio,
     Select,
     Tabs,
     Text,