@bitrise/bitkit 12.7.0 → 12.9.0

package/package.json

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

package/src/Components/Sidebar/SidebarItem.theme.ts

@@ -23,6 +23,13 @@ const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
     },
   },
   variants: {
+    disabled: {
+      link: {
+        color: 'neutral.60',
+        _hover: { bg: 'unset' },
+        _active: { bg: 'unset' },
+      },
+    },
     selected: {
       link: {
         fontWeight: 'demiBold',

package/src/Components/Sidebar/SidebarItem.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps, createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import Text from '../Text/Text';
@@ -7,27 +7,42 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 type SidebarItemProps = {
   children: ReactNode;
   selected?: boolean;
+  disabled?: boolean;
   onClick?: () => void;
   href?: string;
 };
 
 const [SidebarItemStyleProvider, useSidebarItemStyle] = createStylesContext('SidebarItem');
 
-const SidebarItem = ({ children, selected, href, onClick }: SidebarItemProps) => {
-  const style = useMultiStyleConfig('SidebarItem', { variant: selected ? 'selected' : undefined });
-  const shared = {
-    onClick,
-    position: 'relative',
-    href,
-    children: <SidebarItemStyleProvider value={style}>{children}</SidebarItemStyleProvider>,
-    sx: style.link,
-    height: '48',
-  } as ChakraProps;
-  if (onClick) {
-    return <chakra.button {...shared} />;
+const sidebarVariant = ({ selected, disabled }: { selected?: boolean; disabled?: boolean }) => {
+  if (disabled) {
+    return 'disabled';
   }
-  return <chakra.a {...shared} />;
+  if (selected) {
+    return 'selected';
+  }
+  return undefined;
 };
+const SidebarItem = forwardRef(
+  (
+    { children, disabled, selected, href, onClick }: SidebarItemProps,
+    ref: React.Ref<HTMLButtonElement & HTMLAnchorElement>,
+  ) => {
+    const style = useMultiStyleConfig('SidebarItem', { variant: sidebarVariant({ disabled, selected }) });
+    const shared = {
+      onClick,
+      position: 'relative',
+      href,
+      children: <SidebarItemStyleProvider value={style}>{children}</SidebarItemStyleProvider>,
+      sx: style.link,
+      height: '48',
+    } as ChakraProps;
+    if (onClick || disabled) {
+      return <chakra.button ref={ref} disabled={disabled} {...shared} />;
+    }
+    return <chakra.a ref={ref} {...shared} />;
+  },
+);
 
 const SidebarItemIcon = ({ name }: { name: TypeIconName }) => {
   const { icon } = useSidebarItemStyle();

package/src/Components/Slider/Slider.theme.ts

@@ -0,0 +1,70 @@
+import { defineStyle, createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers([
+  'container',
+  'track',
+  'thumb',
+  'filledTrack',
+]);
+
+const baseStyleContainer = defineStyle(() => ({
+  width: '100%',
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'pointer',
+  _disabled: {
+    opacity: 0.6,
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+}));
+
+const baseStyleTrack = defineStyle(() => ({
+  height: '8',
+  overflow: 'hidden',
+  backgroundColor: 'neutral.95',
+  borderRadius: '4',
+}));
+
+const baseStyleThumb = defineStyle(() => ({
+  top: '50%',
+  transform: `translateY(-50%)`,
+  _active: {
+    transform: 'translateY(-50%) scale(1.15)',
+  },
+  width: '40px',
+  height: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'absolute',
+  outline: 0,
+  zIndex: 1,
+  borderRadius: '4',
+  bg: 'neutral.100',
+  border: '1px solid',
+  borderColor: 'neutral.90',
+  color: 'neutral.90',
+  transitionProperty: 'transform',
+  _focusVisible: {
+    boxShadow: 'outline',
+  },
+}));
+
+const baseStyleFilledTrack = defineStyle(() => ({
+  width: 'inherit',
+  height: 'inherit',
+  borderRadius: 'inherit',
+  backgroundColor: 'purple.40',
+}));
+
+const baseStyle = definePartsStyle(() => ({
+  container: baseStyleContainer(),
+  track: baseStyleTrack(),
+  thumb: baseStyleThumb(),
+  filledTrack: baseStyleFilledTrack(),
+}));
+
+const SliderTheme = defineMultiStyleConfig({ baseStyle });
+
+export default SliderTheme;

package/src/Components/Slider/Slider.tsx

@@ -0,0 +1,4 @@
+import { Slider, SliderProps } from '@chakra-ui/react';
+
+export type { SliderProps };
+export default Slider;

package/src/Components/Slider/SliderFilledTrack.tsx

@@ -0,0 +1,4 @@
+import { SliderFilledTrack, SliderInnerTrackProps } from '@chakra-ui/react';
+
+export type { SliderInnerTrackProps };
+export default SliderFilledTrack;

package/src/Components/Slider/SliderMark.tsx

@@ -0,0 +1,4 @@
+import { SliderMark, SliderMarkProps } from '@chakra-ui/react';
+
+export type { SliderMarkProps };
+export default SliderMark;

package/src/Components/Slider/SliderThumb.tsx

@@ -0,0 +1,12 @@
+import { SliderThumb as ChakraThumb, SliderThumbProps } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+
+export type { SliderThumbProps };
+
+const SliderThumb = ({ children, ...restProps }: SliderThumbProps) => {
+  return (
+    <ChakraThumb {...restProps}>{children || <Icon name="MenuHamburger" transform="rotate(90deg)" />}</ChakraThumb>
+  );
+};
+
+export default SliderThumb;

package/src/Components/Slider/SliderTrack.tsx

@@ -0,0 +1,4 @@
+import { SliderTrack, SliderTrackProps } from '@chakra-ui/react';
+
+export type { SliderTrackProps };
+export default SliderTrack;

package/src/index.ts

@@ -244,6 +244,20 @@ export { default as SearchInput } from './Components/SearchInput/SearchInput';
 export type { CloseButtonProps } from './Components/CloseButton/CloseButton';
 export { default as CloseButton } from './Components/CloseButton/CloseButton';
 
+export type { SliderProps } from './Components/Slider/Slider';
+export { default as Slider } from './Components/Slider/Slider';
+
+export type { SliderTrackProps } from './Components/Slider/SliderTrack';
+export { default as SliderTrack } from './Components/Slider/SliderTrack';
+
+export type { SliderInnerTrackProps } from './Components/Slider/SliderFilledTrack';
+export { default as SliderFilledTrack } from './Components/Slider/SliderFilledTrack';
+
+export type { SliderThumbProps } from './Components/Slider/SliderThumb';
+export { default as SliderThumb } from './Components/Slider/SliderThumb';
+
+export type { SliderMarkProps } from './Components/Slider/SliderMark';
+export { default as SliderMark } from './Components/Slider/SliderMark';
 export type { SidebarProps } from './Components/Sidebar/Sidebar';
 export { default as Sidebar } from './Components/Sidebar/Sidebar';
 export {

package/src/theme.ts

@@ -30,6 +30,7 @@ import DatePickerDay from './Components/DatePicker/DatePickerDay.theme';
 import NumberInput from './Components/NumberInput/NumberInput.theme';
 import Skeleton from './Components/Skeleton/Skeleton.theme';
 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';
 
@@ -111,6 +112,7 @@ const theme = {
     Sidebar,
     SidebarItem,
     Progress: ProgressBar,
+    Slider,
   },
 };