@bitrise/bitkit 13.120.0 → 13.122.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.120.0",
+  "version": "13.122.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

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

@@ -13,6 +13,9 @@ const ChipInput = defineStyleConfig({
     padding: '0.6875rem',
     transition: '200ms',
     width: '100%',
+    _readOnly: {
+      background: 'background.disabled',
+    },
   },
 });
 

package/src/Components/Form/TagsInput/TagsInput.tsx

@@ -25,12 +25,14 @@ export interface TagsInputProps extends UsedFormControlProps {
   invalidValues?: string[];
   errorText?: ReactNode;
   helperText?: ReactNode;
+  isReadOnly?: boolean;
 }
 
 const TagsInput = ({
   errorText,
   helperText,
   invalidValues = [],
+  isReadOnly,
   label,
   maxCount,
   onNewValues,
@@ -74,7 +76,7 @@ const TagsInput = ({
   const isInvalid = rest.isInvalid || (maxCount && value.length > maxCount) || Boolean(errorText);
   const id = useId();
   return (
-    <FormControl {...rest} isInvalid={isInvalid}>
+    <FormControl {...rest} isInvalid={isInvalid} isReadOnly={isReadOnly}>
       <Box alignItems="center" display={label || maxCount ? 'flex' : 'none'} gap="4" marginBlockEnd="4">
         {label && (
           <FormLabel
@@ -110,12 +112,13 @@ const TagsInput = ({
         gap="4"
         paddingRight={isInvalid ? '42px' : undefined}
         position="relative"
+        data-readonly={isReadOnly}
       >
         {value.map((item, idx) => (
           <Tag
             key={item}
             colorScheme={invalidValues.includes(item) || (maxCount && idx > maxCount - 1) ? 'red' : undefined}
-            onClose={() => removeItem(item)}
+            onClose={isReadOnly ? undefined : () => removeItem(item)}
             size="sm"
           >
             {item}
@@ -130,6 +133,10 @@ const TagsInput = ({
           onKeyDown={keydownHandler}
           onPaste={pasteEventHandler}
           placeholder={value.length === 0 ? placeholder : undefined}
+          readOnly={isReadOnly}
+          _readOnly={{
+            backgroundColor: 'background/disabled',
+          }}
         />
         {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="16" />}
       </Box>

package/src/Components/Notification/Notification.tsx

@@ -10,7 +10,10 @@ import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 type NotificationStatus = 'info' | 'error' | 'success' | 'warning' | 'progress';
 
-const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIcon: ReactElement }> = {
+export const NOTIFICATION_STATUSES: Record<
+  NotificationStatus,
+  { colorScheme: ColorScheme; defaultIcon: ReactElement }
+> = {
   error: { colorScheme: 'red', defaultIcon: <Icon name="ErrorCircleFilled" /> },
   info: { colorScheme: 'blue', defaultIcon: <Icon name="InfoCircle" /> },
   progress: {
@@ -62,7 +65,7 @@ const NotificationAction = ({ href, label, ...rest }: ActionProps) => {
 
 const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   const { action, children, iconName, onClose, showIcon = true, status, ...rest } = props;
-  const { colorScheme, defaultIcon } = STATUSES[status];
+  const { colorScheme, defaultIcon } = NOTIFICATION_STATUSES[status];
   const icon = iconName ? <Icon name={iconName} /> : defaultIcon;
   let actionButton;
   const actionPlacement = action?.placement ?? 'end';

package/src/Components/components.theme.ts

@@ -1,3 +1,4 @@
+import NotificationCard from '../Patterns/NotificationCard/NotificationCard.theme';
 import Alert from './Alert/Alert.theme';
 import Accordion from './Accordion/Accordion.theme';
 import Avatar from './Avatar/Avatar.theme';
@@ -81,6 +82,7 @@ const components = {
   Menu,
   Modal: Dialog,
   Note,
+  NotificationCard,
   NumberInput,
   Popover,
   Progress: ProgressBar,

package/src/Patterns/NotificationCard/NotificationCard.theme.ts

@@ -0,0 +1,75 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { ColorScheme } from 'src/types/bitkit';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['card', 'icon']);
+
+const colorSchemeToStatus = (colorScheme: ColorScheme) => {
+  switch (colorScheme) {
+    case 'blue':
+      return 'info';
+    case 'green':
+      return 'success';
+    case 'yellow':
+      return 'warning';
+    case 'red':
+      return 'critical';
+    case 'purple':
+      return 'progress';
+  }
+};
+
+const getIconColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  switch (colorScheme) {
+    case 'blue':
+      return 'sys/info/base';
+    case 'green':
+      return 'icon/positive';
+    case 'yellow':
+      return 'sys/warning/base';
+    case 'red':
+      return 'icon/negative';
+    case 'purple':
+      return 'purple.40';
+  }
+};
+
+const getBackgroundColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  return `status/${colorSchemeToStatus(colorScheme)}/bg`;
+};
+
+const getBorderColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  return `status/${colorSchemeToStatus(colorScheme)}/border`;
+};
+
+const getTextColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  switch (colorScheme) {
+    case 'blue':
+      return 'text/primary';
+    case 'green':
+      return 'text/positive';
+    case 'yellow':
+      return 'text/primary';
+    case 'red':
+      return 'text/negative';
+    case 'purple':
+      return 'text/secondary';
+  }
+};
+
+const NotificationTheme = defineMultiStyleConfig({
+  baseStyle: ({ colorScheme }: { colorScheme: string }) => {
+    const cs = colorScheme as ColorScheme;
+    return {
+      card: {
+        bg: getBackgroundColor({ colorScheme: cs }),
+        borderColor: getBorderColor({ colorScheme: cs }),
+        color: getTextColor({ colorScheme: cs }),
+      },
+      icon: {
+        color: getIconColor({ colorScheme: cs }),
+      },
+    };
+  },
+});
+
+export default NotificationTheme;

package/src/Patterns/NotificationCard/NotificationCard.tsx

@@ -0,0 +1,78 @@
+import { BoxProps, CardProps, TextProps, useMultiStyleConfig, useStyleConfig } from '@chakra-ui/react';
+import { NOTIFICATION_STATUSES, NotificationProps } from '../../Components/Notification/Notification';
+import Card from '../../Components/Card/Card';
+import Box from '../../Components/Box/Box';
+import Text from '../../Components/Text/Text';
+import Button from '../../Components/Button/Button';
+
+export type ActionProps = {
+  href?: string;
+  label: string;
+  onClick?: () => void;
+  target?: string;
+};
+
+export type NotificationCardProps = {
+  action?: ActionProps;
+  message: string;
+  status: NotificationProps['status'];
+  title?: string;
+};
+
+const NotificationCardAction = ({ href, label, ...rest }: ActionProps) => {
+  return (
+    <Button as={(href ? 'a' : 'button') as any} variant="tertiary" size="md" href={href} {...rest}>
+      {label}
+    </Button>
+  );
+};
+
+const NotificationCard = ({ action, status, message: description, title }: NotificationCardProps) => {
+  const { colorScheme, defaultIcon } = NOTIFICATION_STATUSES[status || 'info'];
+
+  const style = useMultiStyleConfig('NotificationCard', { colorScheme });
+  const { borderColor, bg, color } = style.card;
+  const { borderRadius } = useStyleConfig('Card', { colorScheme });
+
+  let actionButton;
+  if (action) {
+    actionButton = <NotificationCardAction {...action} />;
+  }
+
+  return (
+    <Card borderColor={borderColor as BoxProps['borderColor']} display="flex" flexDirection="row" variant="outline">
+      <Box
+        alignItems="stretch"
+        borderLeftRadius={borderRadius as CardProps['borderRadius']}
+        bg={bg as BoxProps['backgroundColor']}
+        display="flex"
+        paddingInline="8"
+        paddingBlock="12"
+        sx={style.icon}
+      >
+        {defaultIcon}
+      </Box>
+      <Box
+        flex="1"
+        padding="12"
+        paddingInlineEnd="16"
+        display="flex"
+        gap="12"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Box display="flex" flexDir="column">
+          <Text color={color as TextProps['color']} textStyle="body/lg/semibold">
+            {title}
+          </Text>
+          <Text textStyle="body/md/regular" color={title ? '' : (color as TextProps['color'])}>
+            {description}
+          </Text>
+        </Box>
+        {actionButton}
+      </Box>
+    </Card>
+  );
+};
+
+export default NotificationCard;

package/src/index.ts

@@ -157,6 +157,9 @@ export {
 export type { NotificationProps } from './Components/Notification/Notification';
 export { default as Notification } from './Components/Notification/Notification';
 
+export type { NotificationCardProps } from './Patterns/NotificationCard/NotificationCard';
+export { default as NotificationCard } from './Patterns/NotificationCard/NotificationCard';
+
 export type { AccordionProps } from './Components/Accordion/Accordion';
 export { default as Accordion } from './Components/Accordion/Accordion';