@bitrise/bitkit 10.25.2 → 10.26.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.25.2",
+  "version": "10.26.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -28,7 +28,6 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
-    "clipboard": "^2.0.11",
     "framer-motion": "^6.5.1",
     "luxon": "^2.5.0",
     "react": "^18.2.0",
@@ -66,7 +65,6 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.3.0",
     "@types/cheerio": "^0.22.31",
-    "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/jest": "^28.1.6",
     "@types/luxon": "^2.4.0",
@@ -109,7 +107,6 @@
   },
   "files": [
     "src",
-    "icons.ts",
     "tsconfig.json"
   ],
   "publishConfig": {

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,30 +1,49 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbLink from './BreadcrumbLink';
 
 export default {
-  title: 'Components/Breadcrumb',
   component: Breadcrumb,
   subcomponents: { BreadcrumbLink },
+  args: {
+    hasSeparatorAfterLast: true,
+    hasSeparatorBeforeFirst: false,
+  },
 } as ComponentMeta<typeof Breadcrumb>;
 
-const Template: ComponentStory<typeof Breadcrumb> = (props) => (
-  <Breadcrumb {...props}>
-    <BreadcrumbLink
-      avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
-      href="#"
-    >
-      Bitrise #Core
-    </BreadcrumbLink>
-    <BreadcrumbLink avatarName="Bitkit" href="#">
-      bitkit
-    </BreadcrumbLink>
-    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
-  </Breadcrumb>
-);
+export const DefaultVersion = {
+  args: {
+    children: [
+      <BreadcrumbLink
+        avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+        href="#"
+      >
+        Bitrise #Core
+      </BreadcrumbLink>,
+      <BreadcrumbLink avatarName="Bitkit" href="#">
+        bitkit
+      </BreadcrumbLink>,
+      <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>,
+    ],
+  },
+};
 
-export const WithProps = Template.bind({});
-WithProps.args = {
-  hasSeparatorAfterLast: false,
-  hasSeparatorBeforeFirst: false,
+export const WithLongText = {
+  args: {
+    children: [
+      <BreadcrumbLink
+        avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+        href="#"
+      >
+        Bitrise #Core
+      </BreadcrumbLink>,
+      <BreadcrumbLink avatarName="Bitkit" href="#">
+        Bitkit
+      </BreadcrumbLink>,
+      <BreadcrumbLink href="#">
+        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
+        some form, by injected humour, or randomised words which don't look even slightly believable.
+      </BreadcrumbLink>,
+    ],
+  },
 };

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -8,13 +8,22 @@ const BreadcrumbTheme: SystemStyleObject = {
         alignItems: 'center',
       },
     },
+    item: {
+      _last: {
+        minWidth: 0,
+        '.chakra-breadcrumb__link': {
+          display: 'block',
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        },
+      },
+    },
     link: {
       display: 'flex',
       alignItems: 'center',
       gap: '8',
-      '[aria-current]': {
-        color: 'red',
-      },
+      whiteSpace: 'nowrap',
     },
     separator: {
       display: 'flex',

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -5,10 +5,9 @@ import {
   BreadcrumbItem,
   BreadcrumbSeparator,
   forwardRef,
-  useBreakpointValue,
 } from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Icon, { TypeIconName } from '../Icon/Icon';
+import { useResponsive } from '../../hooks';
 
 export interface BreadcrumbProps extends ChakraBreadcrumbProps {
   hasSeparatorAfterLast?: boolean;
@@ -21,7 +20,7 @@ export interface BreadcrumbProps extends ChakraBreadcrumbProps {
  */
 const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
   const { children, hasSeparatorAfterLast, hasSeparatorBeforeFirst, separatorIconName, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+  const { isMobile } = useResponsive();
 
   const childrenCount = Children.count(children);
   const items = Children.map(children, (child, index) => {

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -2,10 +2,9 @@ import {
   BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
   forwardRef,
-  useBreakpointValue,
 } from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Avatar from '../Avatar/Avatar';
+import { useResponsive } from '../../hooks';
 
 export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
   avatarName?: string;
@@ -14,7 +13,7 @@ export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
 
 const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
   const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+  const { isMobile } = useResponsive();
 
   const properties: ChakraBreadcrumbLinkProps = {
     color: isCurrentPage ? 'neutral.40' : 'inherit',

package/src/Components/Dialog/Dialog.tsx

@@ -37,7 +37,7 @@ const Dialog = ({
   variant,
   ...rest
 }: DialogProps) => {
-  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.TABLET]: size });
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
 
   return (

package/src/Components/LightBox/LightBox.tsx

@@ -17,7 +17,7 @@ export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollB
 
 const LightBox = ({ children, dataTestid, size, isOpen, onClose, ...rest }: LightBoxProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
-  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.TABLET]: size });
 
   return (
     <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose} size={dialogSize}>

package/src/Components/Ribbon/Ribbon.tsx

@@ -2,7 +2,6 @@ import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
 import { ColorScheme } from '../../Foundations/Colors/Colors';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon from '../Icon/Icon';
@@ -62,19 +61,8 @@ const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
       {...rest}
     >
       <ActionContext.Provider value={actionContext}>
-        {onClose && (
-          <Box
-            display={{ [BREAKPOINTS.MOBILE]: 'none', [BREAKPOINTS.DESKTOP]: 'block' }}
-            width={24}
-            height={24}
-            marginEnd="auto"
-          />
-        )}
-        <Box
-          display="flex"
-          flexDirection={{ [BREAKPOINTS.MOBILE]: 'column', [BREAKPOINTS.DESKTOP]: 'row' }}
-          gap={{ [BREAKPOINTS.MOBILE]: 12, [BREAKPOINTS.DESKTOP]: 16 }}
-        >
+        {onClose && <Box display={['none', 'block']} width={24} height={24} marginEnd="auto" />}
+        <Box display="flex" flexDirection={['column', 'row']} gap={['12', '16']}>
           {children}
           {actionButton}
         </Box>

package/src/Foundations/Responsive/Responsive.examples.tsx

@@ -47,9 +47,9 @@ export const Responsive = () => {
             This Box is
             <List>
               <ListItem>green below 848px (53rem)</ListItem>
-              <ListItem>purple from 848px (53rem) but below 1280px (80rem)</ListItem>
-              <ListItem>red from 1280px (80rem) but below 1616px (101rem)</ListItem>
-              <ListItem>gray from 1616px (101rem)</ListItem>
+              <ListItem>purple from 848px (53rem)</ListItem>
+              <ListItem>but red from 1280px (80rem)</ListItem>
+              <ListItem>but gray from 1616px (101rem)</ListItem>
             </List>
           </Box>
         </CardContent>

package/src/Old/hooks/index.ts

@@ -1,4 +1,3 @@
-export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useEventListener } from './useEventListener';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useSyncedStateAndProps } from './useSyncedStateAndProps';

package/src/old.ts

@@ -15,15 +15,6 @@ export { default as Base } from './Old/Base/Base';
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
-export type { Props as DropdownMenuProps } from './Old/Dropdown/DropdownMenu';
-export { default as DropdownMenu } from './Old/Dropdown/DropdownMenu';
-
-export type { Props as DropdownMenuItemProps } from './Old/Dropdown/DropdownMenuItem';
-export { default as DropdownMenuItem } from './Old/Dropdown/DropdownMenuItem';
-
-export type { Props as DropdownMenuItemGroupProps } from './Old/Dropdown/DropdownMenuItemGroup';
-export { default as DropdownMenuItemGroup } from './Old/Dropdown/DropdownMenuItemGroup';
-
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';