@bitrise/bitkit 12.6.2 → 12.7.0

package/package.json

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

package/src/Components/Dropdown/Dropdown.tsx

@@ -143,7 +143,7 @@ function useDropdown<T>({
   optionsRef,
   defaultValue,
   dropdownWidth = 'match',
-  placement,
+  placement = 'bottom-start',
   ref,
   children,
   readOnly,

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

@@ -0,0 +1,12 @@
+import { SystemStyleObject } from '@chakra-ui/styled-system';
+
+const SidebarTheme = {
+  baseStyle: {
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+    } as SystemStyleObject,
+  },
+};
+
+export default SidebarTheme;

package/src/Components/Sidebar/Sidebar.tsx

@@ -0,0 +1,84 @@
+import { createContext, ReactNode, useContext } from 'react';
+import { BoxProps, createStylesContext, SpaceProps, useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import Divider from '../Divider/Divider';
+import Icon from '../Icon/Icon';
+
+const [SidebarContext, useSidebarStyle] = createStylesContext('Sidebar');
+
+const SidebarContainer = ({ children }: { children: ReactNode }) => {
+  const { container } = useSidebarStyle();
+  return <Box sx={container}>{children}</Box>;
+};
+
+const SidebarHeader = ({ title }: { title?: string }) => {
+  if (!title) {
+    return <Box h="24" w="100%" />;
+  }
+  return (
+    <Text lineHeight="var(--sizes-40)" size={['6', '4']} fontWeight="bold" px="32" py="16">
+      {title}
+    </Text>
+  );
+};
+
+const FooterContext = createContext(false);
+
+const SidebarDivider = () => {
+  const isInFooter = useContext(FooterContext);
+  const margins: SpaceProps = isInFooter ? { marginTop: '12' } : { mx: '32', my: '24' };
+  return <Divider {...margins} w="auto" />;
+};
+
+const SidebarGroupHeader = ({ label }: { label: string }) => {
+  return (
+    <Box marginTop="24" marginBottom="12" display="flex" mx="32" alignItems="center" gap="16">
+      <Text size="1" fontWeight="bold" textColor="neutral.60">
+        {label}
+      </Text>
+      <Divider w="auto" flexGrow="1" />
+    </Box>
+  );
+};
+
+const SidebarFooter = ({ children }: { children: ReactNode }) => {
+  const { container } = useSidebarStyle();
+  return (
+    <FooterContext.Provider value>
+      <Box marginTop="auto" sx={container}>
+        {children}
+      </Box>
+    </FooterContext.Provider>
+  );
+};
+
+export type SidebarProps = { children: ReactNode; title?: string } & Omit<
+  BoxProps,
+  'display' | 'd' | 'flexDirection' | 'flexDir' | 'as'
+>;
+const Sidebar = ({ children, title, ...boxProps }: SidebarProps) => {
+  const theme = useMultiStyleConfig('Sidebar');
+  return (
+    <SidebarContext value={theme}>
+      <Box as="nav" display="flex" flexDirection="column" {...boxProps}>
+        <SidebarHeader title={title} />
+        {children}
+      </Box>
+    </SidebarContext>
+  );
+};
+
+const SidebarButton = ({ onClick, title }: Pick<BoxProps, 'onClick'> & { title: string }) => {
+  return (
+    <Box as="button" onClick={onClick} h="56" display="flex" alignItems="center" gap="4" paddingLeft="16">
+      <Icon size="24" name="ChevronLeft" />
+      <Text as="span" lineHeight="var(--space-24)">
+        {title}
+      </Text>
+    </Box>
+  );
+};
+
+export default Sidebar;
+export { SidebarDivider, SidebarGroupHeader, SidebarContainer, SidebarFooter, SidebarButton };

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

@@ -0,0 +1,53 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const itemHelpers = createMultiStyleConfigHelpers(['cell', 'link']);
+
+const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
+  baseStyle: {
+    link: {
+      userSelect: 'none',
+      color: 'purple.10',
+      display: 'flex',
+      flexShrink: '0',
+      alignItems: 'center',
+      _hover: {
+        bg: 'neutral.95',
+      },
+      _active: {
+        bg: 'neutral.93',
+      },
+    },
+    icon: {
+      marginLeft: '32',
+      marginRight: '16',
+    },
+  },
+  variants: {
+    selected: {
+      link: {
+        fontWeight: 'demiBold',
+        bg: 'purple.95',
+        _hover: {
+          bg: 'purple.93',
+        },
+        _active: {
+          bg: 'purple.93',
+        },
+        '&::after': {
+          display: 'block',
+          content: "''",
+          width: '2px',
+          height: '100%',
+          right: '0px',
+          position: 'absolute',
+          top: 'calc(50% - var(--sizes-48)/2)',
+          background: 'purple.50',
+          borderRadius: '0px 2px 2px 0px',
+          transform: 'matrix(-1, 0, 0, 1, 0, 0)',
+        },
+      },
+    },
+  },
+});
+
+export default SidebarItemTheme;

package/src/Components/Sidebar/SidebarItem.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { chakra, ChakraProps, createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
+import { DateTime } from 'luxon';
+import Text from '../Text/Text';
+import Icon, { TypeIconName } from '../Icon/Icon';
+
+type SidebarItemProps = {
+  children: ReactNode;
+  selected?: 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} />;
+  }
+  return <chakra.a {...shared} />;
+};
+
+const SidebarItemIcon = ({ name }: { name: TypeIconName }) => {
+  const { icon } = useSidebarItemStyle();
+  return <Icon sx={icon} name={name} size="24" />;
+};
+
+const SidebarItemLabel = ({ children }: { children: ReactNode }) => (
+  <Text as="span" textAlign="left" flexGrow="1">
+    {children}
+  </Text>
+);
+const SidebarItemDateExtra = ({ date }: { date: Date | DateTime }) => {
+  const dateTime = DateTime.isDateTime(date) ? date : DateTime.fromJSDate(date);
+  return (
+    <Text
+      as="time"
+      minWidth="5rem"
+      dateTime={dateTime.toFormat('yyyy-LL-dd')}
+      textAlign="left"
+      whiteSpace="nowrap"
+      fontWeight="normal"
+      textColor="text.secondary"
+      paddingEnd="24"
+    >
+      {dateTime.toFormat('LLL d')}
+    </Text>
+  );
+};
+
+export default SidebarItem;
+export { SidebarItemIcon, SidebarItemLabel, SidebarItemDateExtra };

package/src/index.ts

@@ -243,3 +243,15 @@ 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 { SidebarProps } from './Components/Sidebar/Sidebar';
+export { default as Sidebar } from './Components/Sidebar/Sidebar';
+export {
+  SidebarDivider,
+  SidebarGroupHeader,
+  SidebarContainer,
+  SidebarFooter,
+  SidebarButton,
+} from './Components/Sidebar/Sidebar';
+export { default as SidebarItem } from './Components/Sidebar/SidebarItem';
+export { SidebarItemIcon, SidebarItemLabel, SidebarItemDateExtra } from './Components/Sidebar/SidebarItem';

package/src/theme.ts

@@ -30,6 +30,8 @@ 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 Sidebar from './Components/Sidebar/Sidebar.theme';
+import SidebarItem from './Components/Sidebar/SidebarItem.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -106,6 +108,8 @@ const theme = {
     DatePickerDay,
     NumberInput,
     Skeleton,
+    Sidebar,
+    SidebarItem,
     Progress: ProgressBar,
   },
 };