@bitrise/bitkit 9.16.5 → 9.17.0-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.16.5",
+  "version": "9.17.0-alpha-chakra.1",
   "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/Tabs/Tab.tsx

@@ -0,0 +1,66 @@
+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;
+  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,48 @@
+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 },
+} as ComponentMeta<typeof Tabs>;
+
+const badge = {
+  backgroundColor: 'yellow.80',
+  children: 'new',
+  color: 'neutral.10',
+};
+
+export const WithDefaults: ComponentStory<typeof Tabs> = () => {
+  return (
+    <Tabs defaultIndex={1} variant="unstyled">
+      <TabList>
+        <Tab>Default</Tab>
+        <Tab>Selected as default</Tab>
+        <Tab leftIconName="Bell">With left icon</Tab>
+        <Tab badge={badge}>With badge</Tab>
+        <Tab isDisabled>Disabled</Tab>
+        <Tab 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>
+  );
+};

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

@@ -0,0 +1,51 @@
+const TextTheme = {
+  baseStyle: {
+    tab: {
+      display: 'flex',
+      alignItems: 'center',
+      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,13 @@
+import React from 'react';
+import { Tabs as ChakraTabs, TabsProps, forwardRef } from '@chakra-ui/react';
+
+/**
+ * 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) => {
+  return <ChakraTabs {...props} ref={ref} />;
+});
+
+export type { TabsProps };
+
+export default Tabs;

package/src/index.ts

@@ -37,3 +37,18 @@ 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 { 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

@@ -226,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

@@ -4,6 +4,7 @@ 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';
@@ -52,6 +53,7 @@ const theme = {
     Divider,
     Link,
     Menu,
+    Tabs,
     Text,
   },
 };