@bitrise/bitkit 9.14.2 → 9.15.0-alpha-chakra-colorbutton.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.14.2",
+  "version": "9.15.0-alpha-chakra-colorbutton.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Button/Button.stories.tsx

@@ -5,6 +5,12 @@ import Button from './Button';
 export default {
   title: 'Components/Button',
   component: Button,
+  argTypes: {
+    as: {
+      control: 'inline-radio',
+      options: ['a', 'button'],
+    },
+  },
 } as ComponentMeta<typeof Button>;
 
 const Template: ComponentStory<typeof Button> = (props) => <Button {...props} />;

package/src/Components/ColorButton/ColorButton.stories.tsx

@@ -0,0 +1,25 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
+import ColorButton from './ColorButton';
+
+export default {
+  title: 'Components/ColorButton',
+  component: ColorButton,
+  argTypes: {
+    as: {
+      control: 'inline-radio',
+      options: ['a', 'button'],
+    },
+  },
+} as ComponentMeta<typeof ColorButton>;
+
+const Template: ComponentStory<typeof ColorButton> = (props) => <ColorButton {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = sortObjectByKey({
+  ...ColorButton.defaultProps,
+  children: 'ColorButton',
+  colorScheme: 'blue',
+  isDisabled: false,
+  isLoading: false,
+});

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

@@ -0,0 +1,22 @@
+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' },
+};
+
+const ColorButtonTheme = {
+  baseStyle: ({ colorScheme: c }: { colorScheme?: 'blue' | 'red' | 'green' | 'yellow' | 'purple' }) => {
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...schemeColors[c || 'default'],
+      _hover: schemeColors[c || 'default'],
+    };
+  },
+};
+
+export default ColorButtonTheme;

package/src/Components/ColorButton/ColorButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
+
+export interface ColorButtonProps extends ChakraButtonProps {
+  as?: 'a' | 'button';
+  colorScheme?: 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+}
+
+/**
+ * The ColorButton component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
+ */
+const ColorButton = forwardRef<ColorButtonProps, 'button'>((props, ref) => {
+  const { as, colorScheme, isDisabled, isLoading, ...rest } = props;
+  const styles = {
+    ...useStyleConfig('Button', { size: 'small' }),
+    ...useStyleConfig('ColorButton', { colorScheme }),
+  };
+
+  const properties: ChakraButtonProps = {
+    as,
+    __css: styles,
+    isDisabled,
+    isLoading,
+    ...rest,
+  };
+  if (isDisabled) {
+    properties.as = 'button';
+  }
+  return <ChakraButton {...properties} size="small" ref={ref} />;
+});
+
+ColorButton.defaultProps = {
+  as: 'button',
+} as ColorButtonProps;
+
+export default ColorButton;

package/src/index.ts

@@ -28,3 +28,6 @@ export { default as Card } from './Components/Card/Card';
 
 export type { CardContentProps } from './Components/Card/CardContent';
 export { default as CardContent } from './Components/Card/CardContent';
+
+export type { ColorButtonProps } from './Components/ColorButton/ColorButton';
+export { default as ColorButton } from './Components/ColorButton/ColorButton';

package/src/old.ts

@@ -52,9 +52,6 @@ export { default as Bounds } from './Old/Bounds/Bounds';
 export type { Props as CheckboxProps } from './Old/Checkbox/Checkbox';
 export { default as Checkbox } from './Old/Checkbox/Checkbox';
 
-export type { Props as ColorButtonProps } from './Old/Button/ColorButton';
-export { default as ColorButton } from './Old/Button/ColorButton';
-
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
@@ -168,9 +165,6 @@ export { default as ProgressBar } from './Old/Progress/ProgressBar';
 export type { Props as ProgressBitbotProps } from './Old/Progress/ProgressBitbot';
 export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 
-export type { Props as ProgressColorButtonProps } from './Old/Progress/ProgressColorButton';
-export { default as ProgressColorButton } from './Old/Progress/ProgressColorButton';
-
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
 

package/src/theme.ts

@@ -1,5 +1,6 @@
 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';
@@ -47,6 +48,7 @@ const theme = {
   components: {
     Button,
     Card,
+    ColorButton,
     Divider,
     Link,
     Menu,