@bitrise/bitkit 9.17.0-alpha-badge.2 → 9.17.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.17.0-alpha-badge.2",
+  "version": "9.17.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -55,7 +55,7 @@
     "@babel/core": "^7.18.2",
     "@bitrise/eslint-plugin": "^2.1.0",
     "@chakra-ui/cli": "^1.9.0",
-    "@chakra-ui/storybook-addon": "^3.0.2",
+    "@chakra-ui/storybook-addon": "^1.0.3",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
     "@google-cloud/storage": "^5.19.4",

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

@@ -1,10 +1,49 @@
 const schemeColors = {
-  default: { backgroundColor: 'inherit', color: 'inherit' },
-  blue: { backgroundColor: 'blue.93', color: 'blue.40' },
-  red: { backgroundColor: 'red.93', color: 'red.40' },
-  green: { backgroundColor: 'green.95', color: 'green.50' },
-  yellow: { backgroundColor: 'yellow.95', color: 'yellow.40' },
-  purple: { backgroundColor: 'purple.95', color: 'purple.40' },
+  blue: {
+    color: 'blue.40',
+    _active: {
+      backgroundColor: 'blue.90',
+    },
+    _hover: {
+      backgroundColor: 'blue.93',
+    },
+  },
+  red: {
+    color: 'red.40',
+    _active: {
+      backgroundColor: 'red.90',
+    },
+    _hover: {
+      backgroundColor: 'red.93',
+    },
+  },
+  green: {
+    color: 'green.50',
+    _active: {
+      backgroundColor: 'green.90',
+    },
+    _hover: {
+      backgroundColor: 'green.93',
+    },
+  },
+  yellow: {
+    color: 'yellow.40',
+    _active: {
+      backgroundColor: 'yellow.90',
+    },
+    _hover: {
+      backgroundColor: 'yellow.93',
+    },
+  },
+  purple: {
+    color: 'purple.40',
+    _active: {
+      backgroundColor: 'purple.90',
+    },
+    _hover: {
+      backgroundColor: 'purple.93',
+    },
+  },
 };
 
 const ColorButtonTheme = {
@@ -13,8 +52,8 @@ const ColorButtonTheme = {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      ...schemeColors[c || 'default'],
-      _hover: schemeColors[c || 'default'],
+      backgroundColor: 'transparent',
+      ...schemeColors[c || 'blue'],
     };
   },
 };

package/src/Components/Tabs/Tab.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Badge as ChakraBadge,
+  BadgeProps as ChakraBadgeProps,
+  Button,
+  Tab as ChakraTab,
+  TabProps as ChakraTabProps,
+  forwardRef,
+  useMultiStyleConfig,
+  useTab,
+} from '@chakra-ui/react';
+import Icon from '../../Old/Icon/Icon';
+import { TypeIconName } from '../../Old/Icon/tsx';
+
+// TODO: separated component
+interface BadgeProps extends ChakraBadgeProps {
+  backgroundColor?: ChakraBadgeProps['backgroundColor'];
+  children?: number | string;
+  color?: ChakraBadgeProps['color'];
+}
+
+const Badge = (props: BadgeProps) => {
+  const properties: ChakraBadgeProps = {
+    ...props,
+    borderRadius: '4',
+    fontSize: '1',
+    lineHeight: '1',
+    paddingY: '3px',
+    paddingX: '8',
+    textTransform: 'uppercase',
+  };
+  return <ChakraBadge {...properties} />;
+};
+
+export interface TabProps extends ChakraTabProps {
+  badge?: BadgeProps;
+  id: string;
+  leftIconName?: TypeIconName;
+  isDisabled?: boolean;
+  rightIconName?: TypeIconName;
+}
+
+const CustomTab = forwardRef((props, ref) => {
+  const { badge, leftIconName, rightIconName, ...rest } = props;
+  const tabProps = useTab({ ...rest, ref });
+  const styles = useMultiStyleConfig('Tabs', tabProps);
+
+  return (
+    <Button __css={styles.tab} {...tabProps}>
+      {leftIconName && <Icon name={leftIconName} />}
+      <span>{tabProps.children}</span>
+      {badge?.children && <Badge {...badge} />}
+      {rightIconName && <Icon name={rightIconName} />}
+    </Button>
+  );
+});
+
+const Tab = forwardRef<TabProps, 'div'>((props, ref) => {
+  const { badge, leftIconName, rightIconName, ...rest } = props;
+  const properties = rest;
+  if (badge?.children || leftIconName || rightIconName) {
+    return <CustomTab {...props} />;
+  }
+  return <ChakraTab {...properties} ref={ref} />;
+});
+
+export default Tab;

package/src/Components/Tabs/TabList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TabList as ChakraTabList, TabListProps, forwardRef } from '@chakra-ui/react';
+
+const TabList = forwardRef<TabListProps, 'div'>((props, ref) => {
+  return <ChakraTabList {...props} ref={ref} />;
+});
+
+export type { TabListProps };
+
+export default TabList;

package/src/Components/Tabs/TabPanel.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TabPanel as ChakraTabPanel, TabPanelProps, forwardRef } from '@chakra-ui/react';
+
+const TabPanel = forwardRef<TabPanelProps, 'div'>((props, ref) => {
+  return <ChakraTabPanel {...props} ref={ref} />;
+});
+
+export type { TabPanelProps };
+
+export default TabPanel;

package/src/Components/Tabs/TabPanels.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TabPanels as ChakraTabPanels, TabPanelsProps, forwardRef } from '@chakra-ui/react';
+
+const TabPanels = forwardRef<TabPanelsProps, 'div'>((props, ref) => {
+  return <ChakraTabPanels {...props} ref={ref} />;
+});
+
+export type { TabPanelsProps };
+
+export default TabPanels;

package/src/Components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,65 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Tabs from './Tabs';
+import TabList from './TabList';
+import Tab from './Tab';
+import TabPanels from './TabPanels';
+import TabPanel from './TabPanel';
+
+export default {
+  title: 'Components/Tabs',
+  component: Tabs,
+  subcomponents: { Tab },
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
+} as ComponentMeta<typeof Tabs>;
+
+const badge = {
+  backgroundColor: 'yellow.80',
+  children: 'new',
+  color: 'neutral.10',
+};
+
+export const WithDefaults: ComponentStory<typeof Tabs> = (props) => {
+  return (
+    <Tabs defaultTab="selected-as-default" {...props}>
+      <TabList>
+        <Tab id="basic">Basic</Tab>
+        <Tab id="selected-as-default">Selected as default</Tab>
+        <Tab id="with-left-icon" leftIconName="Bell">
+          With left icon
+        </Tab>
+        <Tab id="with-badge" badge={badge}>
+          With badge
+        </Tab>
+        <Tab id="disabled" isDisabled>
+          Disabled
+        </Tab>
+        <Tab id="with-right-icon" rightIconName="ArrowForward">
+          With right icon
+        </Tab>
+      </TabList>
+
+      <TabPanels>
+        <TabPanel paddingTop="16">
+          <p>
+            You can add any style prop to <code>TabPanel</code>, like padding.
+            <br />
+            But doesn't have any default style.
+          </p>
+        </TabPanel>
+        <TabPanel paddingTop="16">You can use defaultIndex for this</TabPanel>
+        <TabPanel paddingTop="16">You can add icon to tab</TabPanel>
+        <TabPanel paddingTop="16">Or Badge</TabPanel>
+        <TabPanel paddingTop="16">This panel is disabled</TabPanel>
+        <TabPanel paddingTop="16">You can add icon to tab</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+WithDefaults.args = {
+  withHistory: true,
+};

package/src/Components/Tabs/Tabs.theme.ts

@@ -0,0 +1,52 @@
+const TextTheme = {
+  baseStyle: {
+    tab: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      fontSize: '3',
+      gap: '8',
+      lineHeight: '3',
+      paddingX: '16',
+      paddingTop: '12',
+      paddingBottom: '10px',
+      borderBottom: '2px solid',
+      borderBottomColor: 'transparent',
+      color: 'neutral.50',
+      fontWeight: 'bold',
+      _selected: {
+        borderBottomColor: 'purple.50',
+        color: 'purple.50',
+      },
+      _focusVisible: {
+        backgroundColor: 'purple.95',
+        boxShadow: 'none',
+        color: 'purple.50',
+      },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+      _active: {
+        backgroundColor: 'neutral.93',
+      },
+      _disabled: {
+        color: 'neutral.70',
+        cursor: 'not-allowed',
+        _hover: {
+          background: 'transparent',
+        },
+      },
+    },
+    tablist: {
+      borderBottom: '1px solid',
+      borderBottomColor: 'separator.primary',
+    },
+    tabpanel: {
+      _focusVisible: {
+        boxShadow: 'none',
+      },
+    },
+  },
+};
+
+export default TextTheme;

package/src/Components/Tabs/Tabs.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
+import { useHistory } from '../../hooks';
+
+export interface TabsProps extends ChakraTabsProps {
+  defaultTab?: string;
+  onChange?: (index: number, tabId?: string) => void;
+  withHistory?: boolean;
+}
+
+const getTabIds = (props: TabsProps) => {
+  const ids: string[] = [];
+  const tabs = React.Children.toArray(props.children)[0] as any;
+  React.Children.forEach(tabs.props.children, (c, index) => {
+    ids[index] = c?.props?.id;
+  });
+  return ids;
+};
+
+/**
+ * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
+ */
+const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
+  const { defaultTab = '', onChange, withHistory, ...rest } = props;
+  const tabIds = getTabIds(props);
+  const defaultIndex = tabIds.indexOf(defaultTab) > -1 ? tabIds.indexOf(defaultTab) : 0;
+
+  const { searchParams, replace } = useHistory();
+  const [actualIndex, setActualIndex] = useState(defaultIndex);
+
+  useEffect(() => {
+    if (withHistory && searchParams.get('tab')) {
+      const tabName = searchParams.get('tab') || '';
+      const index = tabIds.indexOf(tabName) > -1 ? tabIds.indexOf(tabName) : defaultIndex;
+      setActualIndex(index);
+    }
+  }, []);
+
+  const onTabChange = (index: number) => {
+    const tabId = tabIds[index];
+    setActualIndex(index);
+    if (withHistory) {
+      if (tabId) {
+        searchParams.set('tab', tabId);
+      } else {
+        searchParams.delete('tab');
+      }
+      replace(`?${searchParams.toString()}`);
+    }
+    if (onChange) {
+      onChange(index, tabId);
+    }
+  };
+  return <ChakraTabs {...rest} ref={ref} onChange={onTabChange} index={actualIndex} />;
+});
+
+export default Tabs;

package/src/Old/AddonBeam/AddonBeam.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TypeIconName } from '../Icon/tsx';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Hamburger from '../Hamburger/Hamburger';
+import Badge from '../Badge/Badge';
 import Icon from '../Icon/Icon';
 import Link from '../Link/Link';
 import Image from '../Image/Image';
@@ -82,6 +83,14 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
             by Bitrise
           </Text>
         </Flex>
+
+        {isBeta && (
+          <Flex>
+            <Badge backgroundColor="yellow.80" textColor="purple.10">
+              BETA
+            </Badge>
+          </Flex>
+        )}
       </Flex>
 
       {!isInResponsiveView && appName && (

package/src/Old/Badge/Badge.css

@@ -0,0 +1,6 @@
+.Badge {
+  display: inline-block;
+  padding: 0.1875rem var(--size--x2);
+  border-radius: var(--size--x1);
+  line-height: 1.125rem;
+}

package/src/Old/Badge/Badge.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Text, { Props as TextProps } from '../Text/Text';
+import './Badge.css';
+
+export interface Props extends TextProps {
+  uppercase?: boolean;
+}
+
+/**
+ * A badge component, useful to provide context and highlight something
+ * important to a user.
+ */
+const Badge: React.FunctionComponent<Props> = ({ uppercase = true, className, ...rest }: Props) => {
+  return <Text {...rest} className={classnames('Badge', className)} size="1" uppercase={uppercase} />;
+};
+
+export default Badge;

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useHistory } from './useHistory';

package/src/hooks/useHistory.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+
+type UseLocation = {
+  pathname: string;
+  push: (url: string) => void;
+  replace: (url: string) => void;
+  search: string;
+  searchParams: URLSearchParams;
+};
+
+const getCurrentLocation = () => ({
+  pathname: window.location.pathname,
+  search: window.location.search,
+});
+
+const listeners: Array<() => void> = [];
+
+const notify = () => {
+  listeners.forEach((listener) => listener());
+};
+
+const getSearchParams = (search: string): URLSearchParams => {
+  const searchParams = new URLSearchParams(search);
+  return searchParams;
+};
+
+const useLocation = (): UseLocation => {
+  const [{ pathname, search }, setLocation] = useState(getCurrentLocation());
+
+  const handleChange = () => {
+    setLocation(getCurrentLocation());
+  };
+
+  const push = (url: string) => {
+    window.history.pushState(null, '', url);
+    notify();
+  };
+
+  const replace = (url: string) => {
+    window.history.replaceState(null, '', url);
+    notify();
+  };
+
+  useEffect(() => {
+    window.addEventListener('popstate', handleChange);
+    return () => {
+      window.removeEventListener('popstate', handleChange);
+    };
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  useEffect(() => {
+    listeners.push(handleChange);
+    return () => listeners.splice(listeners.indexOf(handleChange), 1);
+  }, []);
+
+  return {
+    pathname,
+    push,
+    replace,
+    search,
+    searchParams: getSearchParams(search),
+  };
+};
+
+export default useLocation;

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './old';
 export * from './types/chakra';
 export * from './utils/chakra';
+export * from './hooks';
 
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';
@@ -38,5 +39,17 @@ export { default as Box } from './Components/Box/Box';
 export type { ColorButtonProps } from './Components/ColorButton/ColorButton';
 export { default as ColorButton } from './Components/ColorButton/ColorButton';
 
-export type { BadgeProps } from './Components/Badge/Badge';
-export { default as Badge } from './Components/Badge/Badge';
+export type { TabsProps } from './Components/Tabs/Tabs';
+export { default as Tabs } from './Components/Tabs/Tabs';
+
+export type { TabListProps } from './Components/Tabs/TabList';
+export { default as TabList } from './Components/Tabs/TabList';
+
+export type { TabProps } from './Components/Tabs/Tab';
+export { default as Tab } from './Components/Tabs/Tab';
+
+export type { TabPanelsProps } from './Components/Tabs/TabPanels';
+export { default as TabPanels } from './Components/Tabs/TabPanels';
+
+export type { TabPanelProps } from './Components/Tabs/TabPanel';
+export { default as TabPanel } from './Components/Tabs/TabPanel';

package/src/old.ts

@@ -37,6 +37,9 @@ export { default as AppLayoutSidebar } from './Old/AppLayout/AppLayoutSidebar';
 export type { Props as AvatarProps } from './Old/Avatar/Avatar';
 export { default as Avatar } from './Old/Avatar/Avatar';
 
+export type { Props as BadgeProps } from './Old/Badge/Badge';
+export { default as Badge } from './Old/Badge/Badge';
+
 export type { Props as BaseProps } from './Old/Base/Base';
 export type { TypeBorderRadius } from './Old/Base/Base';
 export type { TypeColors } from './Old/Base/Base';
@@ -223,12 +226,6 @@ export { default as TableHeaderRow } from './Old/Table/TableHeaderRow';
 export type { Props as TableRowProps } from './Old/Table/TableRow';
 export { default as TableRow } from './Old/Table/TableRow';
 
-export type { Props as TabProps } from './Old/Tabs/Tab';
-export { default as Tab } from './Old/Tabs/Tab';
-
-export type { Props as TabsProps } from './Old/Tabs/Tabs';
-export { default as Tabs } from './Old/Tabs/Tabs';
-
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';
 

package/src/theme.ts

@@ -1,10 +1,10 @@
-import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
+import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
 
 import colors from './Foundations/Colors/Colors';
@@ -47,13 +47,13 @@ const theme = {
     },
   },
   components: {
-    Badge,
     Button,
     Card,
     ColorButton,
     Divider,
     Link,
     Menu,
+    Tabs,
     Text,
   },
 };