@bitrise/bitkit 10.32.2 → 10.33.0-alpha-chakra.1

package/package.json

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

package/src/Components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,11 @@
+import ProgressBar from './ProgressBar';
+
+export default {
+  component: ProgressBar,
+};
+
+export const WithProps = {
+  args: {
+    value: 35,
+  },
+};

package/src/Components/ProgressBar/ProgressBar.theme.ts

@@ -0,0 +1,19 @@
+import { defineStyleConfig } from '@chakra-ui/styled-system';
+
+const ProgressBarTheme = defineStyleConfig({
+  baseStyle: {
+    filledTrack: {
+      backgroundColor: 'purple.40',
+      borderRadius: '8',
+      height: '100%',
+      transition: '400ms',
+    },
+    track: {
+      backgroundColor: 'neutral.93',
+      borderRadius: '8',
+      height: '4',
+    },
+  },
+});
+
+export default ProgressBarTheme;

package/src/Components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,12 @@
+import { Progress as ChakraProgress, ProgressProps } from '@chakra-ui/react';
+
+export type ProgressBarProps = Pick<ProgressProps, 'max' | 'min' | 'value'>;
+
+/**
+ * ProgressBar is used to display the progress status for a task that takes a long time or consists of several steps.
+ */
+const ProgressBar = (props: ProgressBarProps) => {
+  return <ChakraProgress max={100} min={0} {...props} />;
+};
+
+export default ProgressBar;

package/src/index.ts

@@ -213,3 +213,6 @@ export { default as Skeleton } from './Components/Skeleton/Skeleton';
 
 export type { SkeletonBoxProps } from './Components/Skeleton/SkeletonBox';
 export { default as SkeletonBox } from './Components/Skeleton/SkeletonBox';
+
+export type { ProgressBarProps } from './Components/ProgressBar/ProgressBar';
+export { default as ProgressBar } from './Components/ProgressBar/ProgressBar';

package/src/old.ts

@@ -18,9 +18,6 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
 
-export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
-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';
 

package/src/theme.ts

@@ -27,6 +27,7 @@ import Toggle from './Components/Toggle/Toggle.theme';
 import Textarea from './Components/Form/Textarea/Textarea.theme';
 import Form from './Components/Form/Form.theme';
 import Skeleton from './Components/Skeleton/Skeleton.theme';
+import ProgressBar from './Components/ProgressBar/ProgressBar.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -101,6 +102,7 @@ const theme = {
     Switch: Toggle,
     Textarea,
     Skeleton,
+    Progress: ProgressBar,
   },
 };