@bitrise/bitkit 9.23.0 → 9.24.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.23.0",
+  "version": "9.24.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -64,16 +64,16 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-interactions": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/addons": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/theming": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "^6.5.9",
     "@svgr/cli": "^6.2.1",
     "@svgr/core": "^6.2.1",
     "@types/cheerio": "^0.22.31",
@@ -157,6 +157,7 @@
   },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",
+    "ts-node": "^10.8.0",
     "@types/react": "17.0.40"
   }
 }

package/src/Components/CloseButton/CloseButton.theme.ts

@@ -0,0 +1,35 @@
+const sizes = {
+  large: { w: '40', h: '40' },
+  medium: { w: '32', h: '32' },
+  small: { w: '24', h: '24' },
+};
+const CloseButtonTheme = {
+  baseStyle({
+    colorScheme,
+    size,
+  }: {
+    colorScheme: 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'neutral';
+    size: 'small' | 'medium' | 'large';
+  }) {
+    if (colorScheme === 'neutral') {
+      return {
+        borderRadius: '4',
+        bg: 'neutral.100',
+        color: 'purple.10',
+        _hover: { bg: 'neutral.95' },
+        _active: { bg: 'neutral.90' },
+        ...sizes[size],
+      };
+    }
+    return {
+      borderRadius: '4',
+      bg: `${colorScheme}.95`,
+      color: `${colorScheme}.40`,
+      _hover: { bg: `${colorScheme}.93` },
+      _active: { bg: `${colorScheme}.90` },
+      ...sizes[size],
+    };
+  },
+  defaultProps: { colorScheme: 'neutral', size: 'small' },
+};
+export default CloseButtonTheme;

package/src/Components/CloseButton/CloseButton.tsx

@@ -0,0 +1,18 @@
+import {
+  forwardRef,
+  CloseButton as ChakraCloseButton,
+  CloseButtonProps as ChakraCloseButtonProps,
+} from '@chakra-ui/react';
+import CloseButtonTheme from './CloseButton.theme';
+
+type ThemeArguments = Parameters<typeof CloseButtonTheme['baseStyle']>[0];
+export interface CloseButtonProps extends ChakraCloseButtonProps {
+  size?: ThemeArguments['size'];
+  colorScheme: ThemeArguments['colorScheme'];
+}
+
+const CloseButton = forwardRef<CloseButtonProps, 'button'>((props, ref) => (
+  <ChakraCloseButton ref={ref} {...CloseButtonTheme.defaultProps} {...props} />
+));
+
+export default CloseButton;

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -18,7 +18,7 @@ const schemeColors = {
     },
   },
   green: {
-    color: 'green.50',
+    color: 'green.40',
     _active: {
       backgroundColor: 'green.90',
     },

package/src/Components/Notification/Notification.stories.tsx

@@ -0,0 +1,40 @@
+import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Notification, { NotificationText, NotificationTitle } from './Notification';
+
+export default {
+  title: 'Components/Notification',
+  component: Notification,
+  argTypes: {
+    title: { type: 'string', defaultValue: 'title' },
+    description: { type: 'string', defaultValue: 'description' },
+    action: {
+      control: 'inline-radio',
+      defaultValue: 'unset',
+      options: ['unset', 'link', 'action'],
+      mapping: {
+        unset: undefined,
+        link: { label: 'link', href: '#' },
+        action: { label: 'action', onClick: action('action') },
+      },
+    },
+    onClose: {
+      control: 'inline-radio',
+      options: ['unset', 'action'],
+      mapping: {
+        unset: undefined,
+        action: action('onClose'),
+      },
+    },
+  },
+  args: {
+    status: 'info',
+  },
+} as ComponentMeta<typeof Notification>;
+
+export const Default: ComponentStoryFn<typeof Notification> = ({ title, description, ...args }) => (
+  <Notification {...args}>
+    <NotificationTitle>{title}</NotificationTitle>
+    <NotificationText>{description}</NotificationText>
+  </Notification>
+);

package/src/Components/Notification/Notification.theme.tsx

@@ -0,0 +1,33 @@
+const AlertTheme = {
+  parts: ['container', 'title', 'icon', 'body'],
+  baseStyle({ colorScheme }: { colorScheme: 'blue' | 'red' | 'green' | 'yellow' | 'purple' }) {
+    return {
+      container: {
+        display: 'flex',
+        alignItems: 'start',
+        gap: '8',
+        borderRadius: '8',
+        borderWidth: '1px',
+        padding: '12',
+        fontSize: '3',
+        lineHeight: '3',
+        bg: `${colorScheme}.95`,
+        color: `${colorScheme}.40`,
+        borderColor: `${colorScheme}.80`,
+      },
+      title: {
+        fontWeight: 'bold',
+      },
+      icon: {
+        w: 24,
+        h: 24,
+        marginEnd: 8,
+      },
+      body: { display: 'flex', flexDirection: 'column' },
+    };
+  },
+  defaultProps: {
+    colorScheme: 'blue',
+  },
+};
+export default AlertTheme;

package/src/Components/Notification/Notification.tsx

@@ -0,0 +1,87 @@
+import { createContext, useContext, useMemo } from 'react';
+import {
+  Alert as ChakraAlert,
+  AlertTitle as NotificationTitle,
+  AlertProps,
+  forwardRef,
+  AlertDescription as NotificationText,
+  Spinner,
+  chakra,
+} from '@chakra-ui/react';
+
+import Box from '../Box/Box';
+import CloseButton from '../CloseButton/CloseButton';
+import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
+import Icon from '../Icon/Icon';
+
+const STATUSES = {
+  info: { colorScheme: 'blue', icon: <Icon flexShrink={0} name="Info" /> },
+  error: { colorScheme: 'red', icon: <Icon flexShrink={0} name="ErrorGeneral" /> },
+  success: { colorScheme: 'green', icon: <Icon flexShrink={0} name="Tick" /> },
+  warning: { colorScheme: 'yellow', icon: <Icon flexShrink={0} name="Warning" /> },
+  progress: {
+    colorScheme: 'purple',
+    icon: (
+      <chakra.span w="24" h="24" p="2" flexShrink={0}>
+        <Spinner w="100%" h="100%" />
+      </chakra.span>
+    ),
+  },
+} as const;
+
+export type ActionProps = { label: string; href?: string; onClick?: () => void } & Omit<
+  ColorButtonProps,
+  'as' | 'onClick' | 'colorScheme'
+>;
+export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorScheme' | 'onClose'> {
+  status: keyof typeof STATUSES;
+  onClose?: () => void;
+  action?: ActionProps;
+}
+
+const ActionContext = createContext<{ colorScheme: ColorButtonProps['colorScheme'] }>({ colorScheme: 'blue' });
+
+const NotificationAction = ({ label, href, ...rest }: ActionProps) => {
+  const actionContext = useContext(ActionContext);
+  return (
+    <ColorButton
+      flexGrow={0}
+      flexShrink={1}
+      as={(href ? 'a' : 'button') as any}
+      href={href}
+      {...actionContext}
+      {...rest}
+    >
+      {label}
+    </ColorButton>
+  );
+};
+
+const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
+  const { status, action, children, onClose, ...rest } = props;
+  const { colorScheme, icon } = STATUSES[status];
+  let actionButton;
+  if (action) {
+    actionButton = <NotificationAction marginRight="12" {...action} alignSelf="center" />;
+  }
+  const actionContext = useMemo(() => ({ colorScheme }), [colorScheme]);
+  return (
+    <ChakraAlert ref={ref} {...rest} colorScheme={colorScheme}>
+      <ActionContext.Provider value={actionContext}>
+        {icon}
+        <Box wordBreak="break-word" display="flex" flexDirection="column" flexGrow={1}>
+          {children}
+        </Box>
+        {actionButton}
+        {onClose && (
+          <CloseButton flexShrink={0} colorScheme={colorScheme} onClick={onClose}>
+            <Icon name="CloseSmall" />
+          </CloseButton>
+        )}
+      </ActionContext.Provider>
+    </ChakraAlert>
+  );
+});
+
+export { NotificationTitle, NotificationText, NotificationAction };
+export default Notification;

package/src/Components/Toast/Toast.stories.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { Meta } from '@storybook/react';
+import NotificationStories from '../Notification/Notification.stories';
+import useToast, { ToastOptions } from './Toast';
+
+export default {
+  title: 'Components/Toast',
+  argTypes: {
+    isClosable: { type: 'boolean', defaultValue: true },
+    showTimestamp: { type: 'boolean', defaultValue: true },
+    action: NotificationStories.argTypes?.action,
+    title: { type: 'string', defaultValue: 'the title' },
+    description: { type: 'string', defaultValue: 'some description' },
+    duration: { control: { type: 'range', min: 0, max: 10000, step: 1000 } },
+    status: {
+      control: 'inline-radio',
+      defaultValue: 'success',
+      options: ['success', 'info', 'error', 'warning', 'progress'],
+    },
+  },
+} as Meta;
+
+export const Default = ({ duration, ...props }: ToastOptions) => {
+  const toast = useToast();
+  useEffect(() => {
+    toast({ duration: duration || null, ...props });
+  }, [duration, props]);
+
+  return <div />;
+};

package/src/Components/Toast/Toast.tsx

@@ -0,0 +1,50 @@
+import { useToast as useChakraToast, ToastOptions as ChakraToastOptions } from '@chakra-ui/react';
+import { DateTime } from 'luxon';
+import Notification, {
+  ActionProps,
+  NotificationAction,
+  NotificationProps,
+  NotificationText,
+  NotificationTitle,
+} from '../Notification/Notification';
+
+export interface ToastOptions {
+  title: string;
+  description: React.ReactNode;
+  status: NotificationProps['status'];
+  action?: ActionProps;
+  duration?: ChakraToastOptions['duration'];
+  position?: ChakraToastOptions['position'];
+  isClosable?: boolean;
+  showTimestamp?: boolean;
+}
+
+const useToast = () => {
+  const toast = useChakraToast();
+  return (opts: ToastOptions) => {
+    let timestamp: string | undefined;
+    if (opts.showTimestamp) {
+      timestamp = DateTime.now().toFormat('hh:mm:ssa');
+    }
+    toast({
+      isClosable: opts.isClosable,
+      duration: opts.duration,
+      position: opts.position,
+      render: ({ onClose }) => (
+        <Notification
+          boxShadow="large"
+          maxW="437px"
+          status={opts.status}
+          onClose={opts.isClosable ? onClose : undefined}
+        >
+          <NotificationTitle>{opts.title}</NotificationTitle>
+          <NotificationText>{opts.description}</NotificationText>
+          {!opts.action && timestamp && <NotificationText marginTop="8">{timestamp}</NotificationText>}
+          {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
+        </Notification>
+      ),
+    });
+  };
+};
+
+export default useToast;

package/src/index.ts

@@ -80,3 +80,5 @@ export { default as MenuItem } from './Components/Menu/MenuItem';
 
 export type { MenuListProps } from './Components/Menu/MenuList';
 export { default as MenuList } from './Components/Menu/MenuList';
+
+export { default as useToast } from './Components/Toast/Toast';

package/src/theme.ts

@@ -8,7 +8,9 @@ import Menu from './Components/Menu/Menu.theme';
 import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
+import Notification from './Components/Notification/Notification.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
+import CloseButton from './Components/CloseButton/CloseButton.theme';
 
 import colors from './Foundations/Colors/Colors';
 import radii from './Foundations/Radii/Radii';
@@ -61,6 +63,8 @@ const theme = {
     Tabs,
     Text,
     Tooltip,
+    Alert: Notification,
+    CloseButton,
   },
 };