@bitrise/bitkit 12.11.6 → 12.12.0

package/package.json

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

package/src/Components/ContentSwitcher/ContentSwitcher.context.ts

@@ -0,0 +1,7 @@
+import { UseRadioGroupReturn } from '@chakra-ui/react';
+import { createContext } from '@chakra-ui/react-utils';
+
+export interface ContentSwitcherContextType {
+  getRadioProps: UseRadioGroupReturn['getRadioProps'];
+}
+export const [ContentSwitcherContext, useContentSwitcherContext] = createContext<ContentSwitcherContextType>();

package/src/Components/ContentSwitcher/ContentSwitcher.theme.ts

@@ -0,0 +1,47 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const itemHelpers = createMultiStyleConfigHelpers(['container', 'item']);
+
+const ContentSwitcherTheme = itemHelpers.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      display: 'flex',
+      width: '100%',
+      backgroundColor: 'neutral.95',
+      gap: '4',
+      borderRadius: '8',
+      padding: '4',
+    },
+    item: {
+      flexGrow: 1,
+      paddingX: '0.375rem',
+      cursor: 'pointer',
+      fontSize: '3',
+      lineHeight: '2.375rem',
+      color: 'purple.10',
+      textAlign: 'center',
+      border: '1px solid',
+      borderColor: 'transparent',
+      borderRadius: '4',
+      _checked: {
+        fontWeight: 'demiBold',
+        color: 'purple.40',
+        backgroundColor: 'neutral.100',
+        borderColor: 'separator.primary',
+        _hover: {
+          backgroundColor: 'neutral.100',
+          borderColor: 'separator.primary',
+        },
+      },
+      _focus: {
+        boxShadow: 'outline',
+      },
+      _hover: {
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.93',
+      },
+    },
+  },
+});
+
+export default ContentSwitcherTheme;

package/src/Components/ContentSwitcher/ContentSwitcher.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useMultiStyleConfig, useRadioGroup, UseRadioGroupProps } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+import { ContentSwitcherContext, ContentSwitcherContextType } from './ContentSwitcher.context';
+
+export type ContentSwitcherProps = BoxProps & UseRadioGroupProps;
+
+/**
+ * This is a custom radio button group, based on: https://chakra-ui.com/docs/components/radio/usage#custom-radio-buttons.
+ */
+const ContentSwitcher = (props: ContentSwitcherProps) => {
+  const { defaultValue, isDisabled, name, onChange, value, ...rest } = props;
+
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    defaultValue,
+    isDisabled,
+    name,
+    onChange,
+    value,
+  });
+
+  const ctx = useMemo<ContentSwitcherContextType>(
+    () => ({
+      getRadioProps,
+    }),
+    [getRadioProps],
+  );
+
+  const group = getRootProps();
+
+  const theme = useMultiStyleConfig('ContentSwitcher');
+
+  return (
+    <ContentSwitcherContext value={ctx}>
+      <Box __css={theme.container} {...group} {...rest} />
+    </ContentSwitcherContext>
+  );
+};
+
+export default ContentSwitcher;

package/src/Components/ContentSwitcher/ContentSwitcherItem.tsx

@@ -0,0 +1,27 @@
+import { useMultiStyleConfig, useRadio } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import { useContentSwitcherContext } from './ContentSwitcher.context';
+
+export interface ContentSwitcherItemProps {
+  children: string;
+  value: string;
+}
+
+const ContentSwitcherItem = (props: ContentSwitcherItemProps) => {
+  const { getRadioProps } = useContentSwitcherContext();
+
+  const { children, value } = props;
+
+  const { getInputProps, getCheckboxProps } = useRadio(getRadioProps({ value }));
+
+  const theme = useMultiStyleConfig('ContentSwitcher');
+
+  return (
+    <Box as="label" __css={theme.item} {...getCheckboxProps()}>
+      <input {...getInputProps()} />
+      {children}
+    </Box>
+  );
+};
+
+export default ContentSwitcherItem;

package/src/index.ts

@@ -269,3 +269,9 @@ export {
 } from './Components/Sidebar/Sidebar';
 export { default as SidebarItem } from './Components/Sidebar/SidebarItem';
 export { SidebarItemIcon, SidebarItemLabel, SidebarItemDateExtra } from './Components/Sidebar/SidebarItem';
+
+export type { ContentSwitcherProps } from './Components/ContentSwitcher/ContentSwitcher';
+export { default as ContentSwitcher } from './Components/ContentSwitcher/ContentSwitcher';
+
+export type { ContentSwitcherItemProps } from './Components/ContentSwitcher/ContentSwitcherItem';
+export { default as ContentSwitcherItem } from './Components/ContentSwitcher/ContentSwitcherItem';

package/src/theme.ts

@@ -33,6 +33,7 @@ import ProgressBar from './Components/ProgressBar/ProgressBar.theme';
 import Slider from './Components/Slider/Slider.theme';
 import Sidebar from './Components/Sidebar/Sidebar.theme';
 import SidebarItem from './Components/Sidebar/SidebarItem.theme';
+import ContentSwitcher from './Components/ContentSwitcher/ContentSwitcher.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -113,6 +114,7 @@ const theme = {
     SidebarItem,
     Progress: ProgressBar,
     Slider,
+    ContentSwitcher,
   },
 };