Create Progress component

src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { BoemlyProgress as Progress } from './Progress';
+
+export default {
+  title: 'components/Progress',
+  component: Progress,
+  argTypes: {
+    ariaLAbel: {
+      type: { name: 'string', required: true },
+      control: { type: 'text' },
+    },
+  },
+} as Meta<typeof Progress>;
+
+const Template: StoryFn<typeof Progress> = (args) => <Progress {...args} />;
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Red = Template.bind({});
+Red.args = {
+  min: 50,
+  max: 100,
+  value: 25,
+  color: 'red',
+};
+
+export const Gray = Template.bind({});
+Gray.args = {
+  min: 50,
+  max: 200,
+  value: 50,
+  color: 'gray',
+};
+
+export const Green = Template.bind({});
+Green.args = {
+  min: 50,
+  max: 300,
+  value: 100,
+  color: 'green',
+  isIndeterminate: true,
+};
+
+export const WithStripe = Template.bind({});
+WithStripe.args = {
+  min: 50,
+  max: 400,
+  value: 100,
+  color: 'green',
+  hasStripe: true,
+};

src/components/Progress/Progress.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Progress } from '@chakra-ui/react';
+
+interface BoemlyProgressProps {
+  min?: number;
+  max?: number;
+  value: number;
+  color: 'red' | 'green' | 'gray';
+  hasStripe?: boolean;
+}
+
+const VARIANTS = {
+  red: 'red',
+  green: 'primary',
+  gray: 'gray',
+};
+
+export const BoemlyProgress: React.FC<BoemlyProgressProps> = ({
+  min = 0,
+  max = 100,
+  value,
+  color,
+  hasStripe,
+}: BoemlyProgressProps) => (
+  <Progress
+    role="progressbar"
+    value={value}
+    borderRadius="full"
+    colorScheme={VARIANTS[color]}
+    maxWidth={max}
+    minWidth={min}
+    hasStripe={hasStripe}
+  />
+);

src/components/Progress/index.tsx

@@ -0,0 +1 @@
+export { BoemlyProgress } from './Progress';